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

tijiao

Browse Source
This commit is contained in:
始于初见
2025-02-21 13:22:53 +08:00
parent abb99280b0
commit 202b63322d
2 changed files with 53 additions and 213 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 882 B

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

@@ -1,29 +1,12 @@
<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 id="paypal-container" style="display: none">
<div id="paypal-payment-button" style="width: 100%; height: 50px"></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')"
@@ -102,10 +85,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; color: #222d65"
>
<div class="clamp-wrap clamp-ellipsis mainTitle" style="-webkit-line-clamp: unset">
PayPal
</div>
</div>
@@ -124,7 +104,7 @@
>
<div class="trade-layout-leaf">
<div class="iconWrapper">
<img src="@/assets/img/Stripe.png" class="icon" />
<img src="@/assets/img/paystation.png" class="icon" />
</div>
</div>
<div
@@ -134,7 +114,7 @@
<div class="trade-layout-leaf" style="width: 100%">
<div
class="clamp-wrap clamp-ellipsis mainTitle"
style="-webkit-line-clamp: unset; color: #635bff"
style="-webkit-line-clamp: unset; color: #a2a91b"
>
Paystation
</div>
@@ -143,33 +123,6 @@
<div v-if="selectedPaymentMethod === 'Paystation'" class="checkmark">✔</div>
</div>
</div>
<!-- <div
class="installmentOption"
:class="selectedPaymentMethod == 'Stripe' ? 'isSelect' : ''"
@click="selectPaymentMethod('Stripe')"
>
<div
class="ant-row trade-layout-row"
style="height: 100%; align-items: center; justify-content: flex-start"
>
<div class="trade-layout-leaf">
<div class="iconWrapper">
<img src="@/assets/img/Stripe.png" class="icon" />
</div>
</div>
<div
class="ant-col trade-layout-col"
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;color: #635bff;">
Stripe
</div>
</div>
</div>
<div v-if="selectedPaymentMethod === 'Stripe'" class="checkmark">✔</div>
</div>
</div> -->
<!-- <div
class="installmentOption"
:class="selectedPaymentMethod == 'Alipay' ? 'isSelect' : ''"
@@ -199,12 +152,6 @@
</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>
@@ -229,26 +176,10 @@
</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,
orderInfo: {},
articleInfo: {},
journalInfo: {},
@@ -265,36 +196,10 @@ export default {
totalAmount: '130.00', // 订单总价
needInvoice: false, // 是否需要发票
invoiceTitle: '', // 发票抬头
invoiceContent: '',
stripeKey: 'pk_test_51QgdjVPKgQFCEmmSTE5TcqvxbWwduryZ4rODZmKyU4u73oqRSMBYJL9HW0XSFNeda0kkDU2IseyMKcVK4R69At4100IDXgaRbV' // 发票内容
invoiceContent: '' // 发票内容
};
},
methods: {
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');
@@ -314,33 +219,34 @@ export default {
if (this.selectedPaymentMethod == 'PayPal') {
this.getPayPal();
} else if (this.selectedPaymentMethod == 'Stripe') {
}else if (this.selectedPaymentMethod == 'Paystation') {
this.getPaystation();
}
},
getPaystation() {
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 == 'Paystation') {
this.getPaystation();
var that = this;
this.$api
.post(this.urlList.createdOrder, {
article_id: this.articleId,
type: 2
})
.then((res) => {
console.log('res at line 222:', res);
if (res.code == 0) {
window.location.href = res.data.paystation.payme_url; loading.close();
} else {
this.$message.error(res.data.msg);
}
},
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(loading) {
getPayPal(id) {
var that = this;
window.paypal
.Buttons({
@@ -368,8 +274,7 @@ export default {
createOrder: (data, actions) => {
return this.$api
.post(this.urlList.createdOrder, {
article_id: this.articleId,
// type: 0
article_id: this.articleId
})
.then((res) => {
console.log('res at line 222:', res);
@@ -390,14 +295,16 @@ export default {
});
setTimeout(() => {
loading.close();
var info = { id: that.articleId };
var info={id: that.articleId}
that.$router.replace({ name: 'OrderConfirmation' });
// 跳转到新的路由
that.$api
.post(that.urlList.completeOrder, {
order_id: that.orderInfo.order_id
})
.then((res) => {});
that.$router.push({
@@ -406,6 +313,7 @@ export default {
...info
}
});
}, 500);
});
},
@@ -423,29 +331,6 @@ export default {
event.stopPropagation();
});
},
getPaystation() {
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
var that = this;
this.$api
.post(this.urlList.createdOrder, {
article_id: this.articleId,
type: 2
})
.then((res) => {
console.log('res at line 222:', res);
if (res.code == 0) {
loading.close();
window.location.href = res.data.paystation.payme_url;
} else {
this.$message.error(res.data.msg);
}
});
},
getDetail() {
this.$api
.post(this.urlList.detail, {
@@ -470,30 +355,9 @@ export default {
formatAmount(amount) {
return amount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
},
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) {
selectPaymentMethod(method) {
console.log('method at line 191:', method);
this.selectedPaymentMethod = method;
if (method == 'Stripe') {
this.initStripe();
}
this.$forceUpdate();
},
payWithAlipay() {
@@ -505,12 +369,9 @@ export default {
alert('使用PayPal支付');
}
},
async created() {
// Initialize Stripe.js with your publishable key
created() {
this.getDetail();
},
async mounted() {},
activated() {
this.getDetail();
}
@@ -993,25 +854,4 @@ 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>