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

提交

Browse Source
This commit is contained in:
始于初见
2025-01-15 20:01:28 +08:00
parent 2757a5bd3b
commit b79eda48bc
4 changed files with 303 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/img/Stripe.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

159
src/components/page/components/pendingPayment/OrderConfirmation.vue
View File

@@ -1,11 +1,27 @@
<template>
<div class="order-confirmation-box">
<!-- <div id="card-element" style="width:100%;height: 600px;"></div>
<div id="card-errors" role="alert"></div>
<button @click="getStripe">Submit Payment</button>
<div id="paypal-container" style="display: none">
<div id="paypal-payment-button" style="width: 100%; height: 50px"></div>
</div>
</div> -->
<!-- <stripe-element-card
:hidePostalCode="true"
ref="elementRef"
ref="elements"
:options="stripeOptions"
:pk="stripeKey"
@token="tokenCreated"
/> <button @click="submit1">Generate token</button> -->
<!-- 错误显示区域 -->
<!-- 支付按钮 -->
<div class="order-confirmation">
<el-descriptions :title="$t('pendingPayment.Confirmorderinformation')" column="2">
<el-descriptions :title="$t('pendingPayment.Confirmorderinformation')" :column="2">
<el-descriptions-item label="ID">{{ articleInfo.accept_sn }}</el-descriptions-item>
<el-descriptions-item :label="$t('pendingPayment.journal')">{{ journalInfo.title }} </el-descriptions-item>
<el-descriptions-item :span="2" style="width: 100%" :label="$t('pendingPayment.title')"
@@ -84,7 +100,7 @@
style="width: 74%; align-items: flex-start; justify-content: flex-start"
>
<div class="trade-layout-leaf" style="width: 100%">
<div class="clamp-wrap clamp-ellipsis mainTitle" style="-webkit-line-clamp: unset">
<div class="clamp-wrap clamp-ellipsis mainTitle" style="-webkit-line-clamp: unset;color:#222d65">
PayPal
</div>
</div>
@@ -103,7 +119,7 @@
>
<div class="trade-layout-leaf">
<div class="iconWrapper">
<img src="@/assets/img/zhifubao.png" class="icon" />
<img src="@/assets/img/Stripe.png" class="icon" />
</div>
</div>
<div
@@ -111,7 +127,7 @@
style="width: 74%; align-items: flex-start; justify-content: flex-start"
>
<div class="trade-layout-leaf" style="width: 100%">
<div class="clamp-wrap clamp-ellipsis mainTitle" style="-webkit-line-clamp: unset">
<div class="clamp-wrap clamp-ellipsis mainTitle" style="-webkit-line-clamp: unset;color: #635bff;">
Stripe
</div>
</div>
@@ -148,6 +164,13 @@
</div> -->
</div>
</div>
<div v-show="selectedPaymentMethod == 'Stripe'" style="padding: 0 16px">
<form >
<div id="payment-element" />
<!-- <el-button native-type="submit" type="primary" round>Complete</el-button> -->
</form>
</div>
</div>
</div>
</div>
@@ -172,13 +195,24 @@
</template>
<script>
import { loadStripe } from '@stripe/stripe-js';
export default {
props: ['type'],
data() {
return {
clientSecret:'pi_3QhTa4PKgQFCEmmS1YU2egVT_secret_d3VZ5GwCUuvN1OjTAW7FdkxrN',
// baseUrl: this.Common.baseUrl,
baseUrl: 'https://submission.tmrjournals.com/',
baseUrl: 'http://localhost:8080/',
stripeOptions: {
locale: 'en', // 可选，设置 Stripe Elements 的语言
pk: 'pk_test_51QgdjVPKgQFCEmmSTE5TcqvxbWwduryZ4rODZmKyU4u73oqRSMBYJL9HW0XSFNeda0kkDU2IseyMKcVK4R69At4100IDXgaRbV'
},
loading: false,
paymentError: null,
paymentIntentId: '', // 用于存储 PaymentIntent ID
stripe: null,
elements: null,
card: null,
@@ -199,11 +233,37 @@ export default {
needInvoice: false, // 是否需要发票
invoiceTitle: '', // 发票抬头
invoiceContent: '',
stripeKey:'pk_test_51QgdjVPKgQFCEmmSTE5TcqvxbWwduryZ4rODZmKyU4u73oqRSMBYJL9HW0XSFNeda0kkDU2IseyMKcVK4R69At4100IDXgaRbV' // 发票内容
stripeKey: 'pk_test_51QgdjVPKgQFCEmmSTE5TcqvxbWwduryZ4rODZmKyU4u73oqRSMBYJL9HW0XSFNeda0kkDU2IseyMKcVK4R69At4100IDXgaRbV' // 发票内容
};
},
methods: {
submit() {
onPaymentSuccess(paymentIntent) {
// 在支付成功后调用的逻辑，例如通知后端更新订单状态
console.log('Payment successful with ID:', paymentIntent.id);
fetch('/update-order-status', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
paymentIntentId: paymentIntent.id // 传递支付 ID 给后端
})
})
.then(() => console.log('Order updated successfully'))
.catch((error) => console.error('Failed to update order:', error));
},
submit1() {
// this will trigger the process
this.$refs.elementRef.submit();
},
tokenCreated(token) {
console.log(token);
// handle the token
// send it to your server
},
submit() {
// 假设 PayPal 按钮的容器有 id="paypal-button-container"
const paypalButtonContainer = document.getElementById('paypal-container');
@@ -223,16 +283,33 @@ export default {
if (this.selectedPaymentMethod == 'PayPal') {
this.getPayPal();
} else if (this.selectedPaymentMethod == 'Stripe') {
this.getStripe();
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
this.getStripe(loading);
} else if (this.selectedPaymentMethod == 'Alipay') {
// this.getAlipay();
}
},
getStripe() {
async getStripe(loading) {
let elements = this.elements;
let stripe = this.stripe;
const { error } = await stripe.confirmPayment({
elements,
confirmParams: {
// Make sure to change this to your payment completion page
return_url: `${this.baseUrl}success?id=${this.articleId}`
}
//redirect: 'if_required'如果设置redirect: 'if_required'则不跳转returnUrl
});
loading.close()
console.log(error);
},
getPayPal(id) {
getPayPal(loading) {
var that = this;
window.paypal
.Buttons({
@@ -338,9 +415,33 @@ export default {
formatAmount(amount) {
return amount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
},
selectPaymentMethod(method) {
async initStripe() {
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
this.stripe = await loadStripe(this.stripeKey);
this.elements = this.stripe.elements({
theme: 'stripe',
clientSecret: this.clientSecret,
locale: !localStorage.getItem('langs') || localStorage.getItem('langs') == 'en' ? 'en' : 'zh',
});
const paymentElement = this.elements.create('payment');
paymentElement.mount('#payment-element');
loading.close()
},
async selectPaymentMethod(method) {
console.log('method at line 191:', method);
this.selectedPaymentMethod = method;
if (method == 'Stripe') {
this.initStripe();
}
this.$forceUpdate();
},
payWithAlipay() {
@@ -354,17 +455,10 @@ export default {
},
async created() {
// Initialize Stripe.js with your publishable key
this.getDetail();
},
async mounted(){
this.stripe = await loadStripe(this.stripeKey);
this.elements = this.stripe.elements();
// Create a Card Element and mount it into the DOM
this.card = this.elements.create('card');
this.card.mount('#card-element');
},
async mounted() {},
activated() {
this.getDetail();
}
@@ -847,4 +941,25 @@ h3 {
.tableInfo {
font-size: 14px;
}
#card-element {
border: 1px solid #ccc;
padding: 10px;
border-radius: 4px;
margin-bottom: 10px;
}
#card-errors {
color: red;
margin-bottom: 10px;
}
button {
background-color: #5469d4;
color: white;
border: none;
border-radius: 4px;
padding: 10px;
cursor: pointer;
}
button:disabled {
background-color: #ccc;
}
</style>