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> <button @click="getStripe">Submit Payment</button>
<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> -->
<!-- <stripe-element-card <div id="paypal-container" style="display: none">
<div id="paypal-payment-button" style="width: 100%; height: 50px"></div>
</div>
<!-- <stripe-element-card
:hidePostalCode="true" :hidePostalCode="true"
ref="elementRef" ref="elementRef"
ref="elements" ref="elements"
@@ -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,8 +200,7 @@
</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> -->
</form> </form>
@@ -222,14 +229,13 @@
</template> </template>
<script> <script>
import { loadStripe } from '@stripe/stripe-js'; import { loadStripe } from '@stripe/stripe-js';
export default { export default {
props: ['type'], props: ['type'],
data() { data() {
return { return {
clientSecret:'pi_3QhTa4PKgQFCEmmS1YU2egVT_secret_d3VZ5GwCUuvN1OjTAW7FdkxrN', clientSecret: 'pi_3QhTa4PKgQFCEmmS1YU2egVT_secret_d3VZ5GwCUuvN1OjTAW7FdkxrN',
// baseUrl: this.Common.baseUrl, // baseUrl: this.Common.baseUrl,
baseUrl: 'https://submission.tmrjournals.com/', baseUrl: 'https://submission.tmrjournals.com/',
baseUrl: 'http://localhost:8080/', baseUrl: 'http://localhost:8080/',
@@ -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);
@@ -311,18 +316,17 @@ export default {
this.getPayPal(); this.getPayPal();
} else if (this.selectedPaymentMethod == 'Stripe') { } else if (this.selectedPaymentMethod == 'Stripe') {
const loading = this.$loading({ const loading = this.$loading({
lock: true, lock: true,
text: 'Loading', text: 'Loading',
spinner: 'el-icon-loading', spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)' background: 'rgba(0, 0, 0, 0.7)'
}); });
this.getStripe(loading); this.getStripe(loading);
} else if (this.selectedPaymentMethod == 'Paystation') { } else if (this.selectedPaymentMethod == 'Paystation') {
this.getPaystation(); this.getPaystation();
} }
}, },
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) => { })
console.log('res at line 222:', res); .then((res) => {
that.orderInfo = res.data.detail; 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() { getDetail() {
this.$api this.$api
@@ -459,30 +472,27 @@ export default {
}, },
async initStripe() { async initStripe() {
const loading = this.$loading({ const loading = this.$loading({
lock: true, lock: true,
text: 'Loading', text: 'Loading',
spinner: 'el-icon-loading', spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)' background: 'rgba(0, 0, 0, 0.7)'
}); });
this.stripe = await loadStripe(this.stripeKey); this.stripe = await loadStripe(this.stripeKey);
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();
}, },