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 11:51:08 +08:00
parent d0666f7cd0
commit abb99280b0
2 changed files with 1069 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1017
src/components/page/components/pendingPayment/OrderConfirmation copy.vue Normal file
View File

File diff suppressed because it is too large Load Diff

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

@@ -6,6 +6,9 @@
<div id="paypal-container" style="display: none"> <div id="paypal-container" style="display: none">
<div id="paypal-payment-button" style="width: 100%; height: 50px"></div> <div id="paypal-payment-button" style="width: 100%; height: 50px"></div>
</div> --> </div> -->
<div id="paypal-container" style="display: none">
<div id="paypal-payment-button" style="width: 100%; height: 50px"></div>
</div>
<!-- <stripe-element-card <!-- <stripe-element-card
:hidePostalCode="true" :hidePostalCode="true"
ref="elementRef" ref="elementRef"
@@ -17,7 +20,6 @@
<!-- 错误显示区域 --> <!-- 错误显示区域 -->
<!-- 支付按钮 --> <!-- 支付按钮 -->
<div class="order-confirmation"> <div class="order-confirmation">
@@ -100,7 +102,10 @@
style="width: 74%; align-items: flex-start; justify-content: flex-start" style="width: 74%; align-items: flex-start; justify-content: flex-start"
> >
<div class="trade-layout-leaf" style="width: 100%"> <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; color: #222d65"
>
PayPal PayPal
</div> </div>
</div> </div>
@@ -127,7 +132,10 @@
style="width: 74%; align-items: flex-start; justify-content: flex-start" style="width: 74%; align-items: flex-start; justify-content: flex-start"
> >
<div class="trade-layout-leaf" style="width: 100%"> <div class="trade-layout-leaf" style="width: 100%">
<div class="clamp-wrap clamp-ellipsis mainTitle" style="-webkit-line-clamp: unset;color: #635bff;"> <div
class="clamp-wrap clamp-ellipsis mainTitle"
style="-webkit-line-clamp: unset; color: #635bff"
>
Paystation Paystation
</div> </div>
</div> </div>
@@ -192,7 +200,6 @@
</div> </div>
</div> </div>
<div v-show="selectedPaymentMethod == 'Stripe'" style="padding: 0 16px"> <div v-show="selectedPaymentMethod == 'Stripe'" style="padding: 0 16px">
<form> <form>
<div id="payment-element" /> <div id="payment-element" />
<!-- <el-button native-type="submit" type="primary" round>Complete</el-button> --> <!-- <el-button native-type="submit" type="primary" round>Complete</el-button> -->
@@ -222,7 +229,6 @@
</template> </template>
<script> <script>
import { loadStripe } from '@stripe/stripe-js'; import { loadStripe } from '@stripe/stripe-js';
export default { export default {
@@ -265,7 +271,6 @@ export default {
}, },
methods: { methods: {
onPaymentSuccess(paymentIntent) { onPaymentSuccess(paymentIntent) {
// 在支付成功后调用的逻辑，例如通知后端更新订单状态 // 在支付成功后调用的逻辑，例如通知后端更新订单状态
console.log('Payment successful with ID:', paymentIntent.id); console.log('Payment successful with ID:', paymentIntent.id);
@@ -322,7 +327,6 @@ export default {
} }
}, },
async getStripe(loading) { async getStripe(loading) {
let elements = this.elements; let elements = this.elements;
let stripe = this.stripe; let stripe = this.stripe;
const { error } = await stripe.confirmPayment({ const { error } = await stripe.confirmPayment({
@@ -333,7 +337,7 @@ export default {
} }
//redirect: 'if_required'如果设置redirect: 'if_required'则不跳转returnUrl //redirect: 'if_required'如果设置redirect: 'if_required'则不跳转returnUrl
}); });
loading.close() loading.close();
console.log(error); console.log(error);
}, },
getPayPal(loading) { getPayPal(loading) {
@@ -364,7 +368,8 @@ export default {
createOrder: (data, actions) => { createOrder: (data, actions) => {
return this.$api return this.$api
.post(this.urlList.createdOrder, { .post(this.urlList.createdOrder, {
article_id: this.articleId article_id: this.articleId,
// type: 0
}) })
.then((res) => { .then((res) => {
console.log('res at line 222:', res); console.log('res at line 222:', res);
@@ -418,20 +423,28 @@ export default {
event.stopPropagation(); event.stopPropagation();
}); });
}, },
getPaystation(loading) { getPaystation() {
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
var that = this; var that = this;
this.$api this.$api
.post(this.urlList.createdOrder, { .post(this.urlList.createdOrder, {
article_id: this.articleId article_id: this.articleId,
type: 2
}) })
.then((res) => { .then((res) => {
console.log('res at line 222:', res); console.log('res at line 222:', res);
that.orderInfo = res.data.detail; if (res.code == 0) {
loading.close();
window.location.href = res.data.paystation.payme_url;
} else {
this.$message.error(res.data.msg);
}
}); });
}, },
getDetail() { getDetail() {
this.$api this.$api
@@ -468,21 +481,18 @@ export default {
this.elements = this.stripe.elements({ this.elements = this.stripe.elements({
theme: 'stripe', theme: 'stripe',
clientSecret: this.clientSecret, clientSecret: this.clientSecret,
locale: !localStorage.getItem('langs') || localStorage.getItem('langs') == 'en' ? 'en' : 'zh', locale: !localStorage.getItem('langs') || localStorage.getItem('langs') == 'en' ? 'en' : 'zh'
}); });
const paymentElement = this.elements.create('payment'); const paymentElement = this.elements.create('payment');
paymentElement.mount('#payment-element'); paymentElement.mount('#payment-element');
loading.close() loading.close();
}, },
async selectPaymentMethod(method) { async selectPaymentMethod(method) {
console.log('method at line 191:', method); console.log('method at line 191:', method);
this.selectedPaymentMethod = method; this.selectedPaymentMethod = method;
if (method == 'Stripe') { if (method == 'Stripe') {
this.initStripe(); this.initStripe();
} }
this.$forceUpdate(); this.$forceUpdate();
}, },