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

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

@@ -5,8 +5,11 @@
<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> -->
<!-- <stripe-element-card
</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"
@@ -17,7 +20,6 @@
<!-- 错误显示区域 -->
<!-- 支付按钮 -->
<div class="order-confirmation">
@@ -100,7 +102,10 @@
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; color: #222d65"
>
PayPal
</div>
</div>
@@ -127,7 +132,10 @@
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;">
<div
class="clamp-wrap clamp-ellipsis mainTitle"
style="-webkit-line-clamp: unset; color: #635bff"
>
Paystation
</div>
</div>
@@ -192,8 +200,7 @@
</div>
</div>
<div v-show="selectedPaymentMethod == 'Stripe'" style="padding: 0 16px">
<form >
<form>
<div id="payment-element" />
<!-- <el-button native-type="submit" type="primary" round>Complete</el-button> -->
</form>
@@ -222,14 +229,13 @@
</template>
<script>
import { loadStripe } from '@stripe/stripe-js';
export default {
props: ['type'],
data() {
return {
clientSecret:'pi_3QhTa4PKgQFCEmmS1YU2egVT_secret_d3VZ5GwCUuvN1OjTAW7FdkxrN',
clientSecret: 'pi_3QhTa4PKgQFCEmmS1YU2egVT_secret_d3VZ5GwCUuvN1OjTAW7FdkxrN',
// baseUrl: this.Common.baseUrl,
baseUrl: 'https://submission.tmrjournals.com/',
baseUrl: 'http://localhost:8080/',
@@ -265,7 +271,6 @@ export default {
},
methods: {
onPaymentSuccess(paymentIntent) {
// 在支付成功后调用的逻辑，例如通知后端更新订单状态
console.log('Payment successful with ID:', paymentIntent.id);
@@ -311,18 +316,17 @@ export default {
this.getPayPal();
} else if (this.selectedPaymentMethod == 'Stripe') {
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
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();
}
},
async getStripe(loading) {
let elements = this.elements;
let stripe = this.stripe;
const { error } = await stripe.confirmPayment({
@@ -333,7 +337,7 @@ export default {
}
//redirect: 'if_required'如果设置redirect: 'if_required'则不跳转returnUrl
});
loading.close()
loading.close();
console.log(error);
},
getPayPal(loading) {
@@ -364,7 +368,8 @@ export default {
createOrder: (data, actions) => {
return this.$api
.post(this.urlList.createdOrder, {
article_id: this.articleId
article_id: this.articleId,
// type: 0
})
.then((res) => {
console.log('res at line 222:', res);
@@ -418,20 +423,28 @@ export default {
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;
this.$api
.post(this.urlList.createdOrder, {
article_id: this.articleId
})
.then((res) => {
console.log('res at line 222:', res);
that.orderInfo = res.data.detail;
});
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
@@ -459,30 +472,27 @@ export default {
},
async initStripe() {
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
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',
locale: !localStorage.getItem('langs') || localStorage.getItem('langs') == 'en' ? 'en' : 'zh'
});
const paymentElement = this.elements.create('payment');
paymentElement.mount('#payment-element');
loading.close()
loading.close();
},
async selectPaymentMethod(method) {
console.log('method at line 191:', method);
this.selectedPaymentMethod = method;
if (method == 'Stripe') {
this.initStripe();
}
this.$forceUpdate();
},