zm/tougao_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pay

Browse Source
This commit is contained in:
始于初见
2024-12-26 13:28:42 +08:00
parent e22c51e87f
commit b415c06d9e
3 changed files with 118 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -34,6 +34,7 @@
"vue": "^2.6.10",
"vue-cropperjs": "^3.0.0",
"vue-i18n": "^8.10.0",
"vue-paypal-checkout": "^3.2.0",
"vue-pdf": "^4.3.0",
"vue-quill-editor": "^3.0.6",
"vue-router": "^3.0.3",

63
src/components/page/components/pendingPayment/PayPalButton.vue Normal file
View File

@@ -0,0 +1,63 @@
<template>
<div>
<paypal-checkout
:client="paypalClient"
:amount="amount"
:currency="currency"
@success="onPaymentSuccess"
@error="onPaymentError"
>
<template #default="{ onClick }">
<button @click="onClick">Pay with PayPal</button>
</template>
</paypal-checkout>
</div>
</template>
<script>
import PaypalCheckout from 'vue-paypal-checkout';
export default {
name: 'PayPalButton',
components: {
PaypalCheckout
},
data() {
return {
// PayPal Client ID
paypalClient: {
sandbox: 'Ab8SeEuhkLGp6Fts9V3Cti0UcXQhITRWZkiHDM3U1fDY9YrrRc5IOcYHPfV6qROhmh0hvgysqrfOCSUr', // Replace with your sandbox client ID
production: 'Ab8SeEuhkLGp6Fts9V3Cti0UcXQhITRWZkiHDM3U1fDY9YrrRc5IOcYHPfV6qROhmh0hvgysqrfOCSUr' // Replace with your production client ID
},
amount: '10.00', // Amount to be paid
currency: 'USD' // Currency
};
},
methods: {
onPaymentSuccess(payment) {
console.log('Payment successful!', payment);
// Handle successful payment here
this.$emit('payment-success', payment);
},
onPaymentError(error) {
console.error('Payment error:', error);
// Handle payment error here
this.$emit('payment-error', error);
}
}
};
</script>
<style scoped>
button {
padding: 10px 20px;
background-color: #0070ba;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #005b9a;
}
</style>

93
src/components/page/components/pendingPayment/index.vue
View File

@@ -1,48 +1,63 @@
<template>
<div>
<el-table :data="list" style="width: 100%">
<slot name="tableItem"></slot>
<el-table-column prop="id" label="ID" width="100"></el-table-column>
<el-table-column prop="title" :label="$t('pendingPayment.title')"></el-table-column>
<el-table-column prop="author" :label="$t('pendingPayment.journal')"></el-table-column>
<el-table-column prop="amount" :label="$t('pendingPayment.Paymentamount')" width="140">
<template slot-scope="scope">
{{ formatAmount(scope.row.amount) }}
</template>
</el-table-column>
<el-table-column prop="status" :label="$t('pendingPayment.Paymentstatus')" width="140"></el-table-column>
<el-table-column label="" width="140" >
<template slot-scope="scope">
<el-button @click="payArticle(scope.row)" plain type="danger" size="mini">{{$t('pendingPayment.payment')}}</el-button>
</template>
</el-table-column>
</el-table>
<el-table :data="list" style="width: 100%">
<slot name="tableItem"></slot>
<el-table-column prop="id" label="ID" width="100"></el-table-column>
<el-table-column prop="title" :label="$t('pendingPayment.title')"></el-table-column>
<el-table-column prop="author" :label="$t('pendingPayment.journal')"></el-table-column>
<el-table-column prop="amount" :label="$t('pendingPayment.Paymentamount')" width="140">
<template slot-scope="scope">
{{ formatAmount(scope.row.amount) }}
</template>
</el-table-column>
<el-table-column prop="status" :label="$t('pendingPayment.Paymentstatus')" width="140"></el-table-column>
<el-table-column label="" width="140">
<template slot-scope="scope">
<PayPalButton @payment-success="handlePaymentSuccess" @payment-error="handlePaymentError" />
<el-button @click="payArticle(scope.row)" plain type="danger" size="mini">{{ $t('pendingPayment.payment') }}</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
</template>
<script>
import PayPalButton from './PayPalButton.vue';
export default {
components: {
PayPalButton
},
props: {
list: {
type: Array,
default: () => []
}
list: {
type: Array,
default: () => []
}
},
data() {
return {
};
return {};
},
methods: {
formatAmount(amount) {
return amount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
},
payArticle(article) {
// 在这里实现缴费逻辑，例如调用后端API进行缴费
// 缴费成功后更新article.status为'已缴费'
article.status = '已缴费';
this.$message.success(`已成功为稿件 ${article.title} 缴费`);
}
handlePaymentSuccess(payment) {
// Handle payment success
console.log('Payment successful!', payment);
},
handlePaymentError(error) {
// Handle payment error
console.error('Payment error:', error);
},
formatAmount(amount) {
return amount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
},
payArticle(article) {
// 在这里实现缴费逻辑，例如调用后端API进行缴费
// 缴费成功后更新article.status为'已缴费'
article.status = '已缴费';
this.$message.success(`已成功为稿件 ${article.title} 缴费`);
}
}
};
</script>
};
</script>