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-01-15 09:54:09 +08:00
parent 2d751cec5e
commit 99b48e1a1e
3 changed files with 74 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -8,6 +8,7 @@
"build": "vue-cli-service build" "build": "vue-cli-service build"
}, },
"dependencies": { "dependencies": {
"@stripe/stripe-js": "^5.5.0",
"@tinymce/tinymce-vue": "^3.0.1", "@tinymce/tinymce-vue": "^3.0.1",
"axios": "^0.18.0", "axios": "^0.18.0",
"babel-polyfill": "^6.26.0", "babel-polyfill": "^6.26.0",

4
src/api/index.js
View File

@@ -19,8 +19,8 @@ const service = axios.create({
// baseURL: 'https://submission.tmrjournals.com/', //正式 记得切换 // baseURL: 'https://submission.tmrjournals.com/', //正式 记得切换
// baseURL: 'http://www.tougao.com/', //测试本地 记得切换 // baseURL: 'http://www.tougao.com/', //测试本地 记得切换
// baseURL: 'http://192.168.110.110/tougao/public/index.php/', // baseURL: 'http://192.168.110.110/tougao/public/index.php/',
// baseURL: '/api', //本地 baseURL: '/api', //本地
baseURL: '/', //正式 // baseURL: '/', //正式
}); });

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

@@ -1,6 +1,5 @@
<template> <template>
<div class="order-confirmation-box"> <div class="order-confirmation-box">
<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>
@@ -93,6 +92,33 @@
<div v-if="selectedPaymentMethod === 'PayPal'" class="checkmark">✔</div> <div v-if="selectedPaymentMethod === 'PayPal'" class="checkmark">✔</div>
</div> </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/zhifubao.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">
Stripe
</div>
</div>
</div>
<div v-if="selectedPaymentMethod === 'Stripe'" class="checkmark">✔</div>
</div>
</div>
<!-- <div <!-- <div
class="installmentOption" class="installmentOption"
:class="selectedPaymentMethod == 'Alipay' ? 'isSelect' : ''" :class="selectedPaymentMethod == 'Alipay' ? 'isSelect' : ''"
@@ -119,7 +145,7 @@
</div> </div>
<div v-if="selectedPaymentMethod === 'Alipay'" class="checkmark">✔</div> <div v-if="selectedPaymentMethod === 'Alipay'" class="checkmark">✔</div>
</div> </div>
</div> --> </div> -->
</div> </div>
</div> </div>
</div> </div>
@@ -146,10 +172,16 @@
</template> </template>
<script> <script>
import { loadStripe } from '@stripe/stripe-js';
export default { export default {
props: ['type'], props: ['type'],
data() { data() {
return { return {
stripe: null,
elements: null,
card: null,
orderInfo: {}, orderInfo: {},
articleInfo: {}, articleInfo: {},
journalInfo: {}, journalInfo: {},
@@ -166,7 +198,8 @@ export default {
totalAmount: '130.00', // 订单总价 totalAmount: '130.00', // 订单总价
needInvoice: false, // 是否需要发票 needInvoice: false, // 是否需要发票
invoiceTitle: '', // 发票抬头 invoiceTitle: '', // 发票抬头
invoiceContent: '' // 发票内容 invoiceContent: '',
stripeKey:'pk_test_51QgdjVPKgQFCEmmSTE5TcqvxbWwduryZ4rODZmKyU4u73oqRSMBYJL9HW0XSFNeda0kkDU2IseyMKcVK4R69At4100IDXgaRbV' // 发票内容
}; };
}, },
methods: { methods: {
@@ -189,7 +222,15 @@ export default {
if (this.selectedPaymentMethod == 'PayPal') { if (this.selectedPaymentMethod == 'PayPal') {
this.getPayPal(); this.getPayPal();
} else if (this.selectedPaymentMethod == 'Stripe') {
this.getStripe();
} else if (this.selectedPaymentMethod == 'Alipay') {
// this.getAlipay();
} }
},
getStripe() {
}, },
getPayPal(id) { getPayPal(id) {
var that = this; var that = this;
@@ -240,25 +281,22 @@ export default {
}); });
setTimeout(() => { setTimeout(() => {
loading.close(); loading.close();
var info={id: that.articleId} var info = { id: that.articleId };
that.$router.replace({ name: 'OrderConfirmation' }); that.$router.replace({ name: 'OrderConfirmation' });
// 跳转到新的路由
// 跳转到新的路由 that.$api
that.$api .post(that.urlList.completeOrder, {
.post(that.urlList.completeOrder, { order_id: that.orderInfo.order_id
order_id: that.orderInfo.order_id })
.then((res) => {});
}) that.$router.push({
.then((res) => {}); path: '/success',
that.$router.push({ query: {
path: '/success', ...info
query: { }
...info });
}
});
}, 500); }, 500);
}); });
}, },
@@ -314,9 +352,19 @@ export default {
alert('使用PayPal支付'); alert('使用PayPal支付');
} }
}, },
created() { async created() {
// Initialize Stripe.js with your publishable key
this.getDetail(); 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');
},
activated() { activated() {
this.getDetail(); this.getDetail();
} }