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"
},
"dependencies": {
"@stripe/stripe-js": "^5.5.0",
"@tinymce/tinymce-vue": "^3.0.1",
"axios": "^0.18.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: 'http://www.tougao.com/', //测试本地 记得切换
// baseURL: 'http://192.168.110.110/tougao/public/index.php/',
// baseURL: '/api', //本地
baseURL: '/', //正式
baseURL: '/api', //本地
// baseURL: '/', //正式
});

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

@@ -1,6 +1,5 @@
<template>
<div class="order-confirmation-box">
<div id="paypal-container" style="display: none">
<div id="paypal-payment-button" style="width: 100%; height: 50px"></div>
</div>
@@ -93,6 +92,33 @@
<div v-if="selectedPaymentMethod === 'PayPal'" 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/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
class="installmentOption"
:class="selectedPaymentMethod == 'Alipay' ? 'isSelect' : ''"
@@ -119,7 +145,7 @@
</div>
<div v-if="selectedPaymentMethod === 'Alipay'" class="checkmark">✔</div>
</div>
</div> -->
</div> -->
</div>
</div>
</div>
@@ -146,10 +172,16 @@
</template>
<script>
import { loadStripe } from '@stripe/stripe-js';
export default {
props: ['type'],
data() {
return {
stripe: null,
elements: null,
card: null,
orderInfo: {},
articleInfo: {},
journalInfo: {},
@@ -166,7 +198,8 @@ export default {
totalAmount: '130.00', // 订单总价
needInvoice: false, // 是否需要发票
invoiceTitle: '', // 发票抬头
invoiceContent: '' // 发票内容
invoiceContent: '',
stripeKey:'pk_test_51QgdjVPKgQFCEmmSTE5TcqvxbWwduryZ4rODZmKyU4u73oqRSMBYJL9HW0XSFNeda0kkDU2IseyMKcVK4R69At4100IDXgaRbV' // 发票内容
};
},
methods: {
@@ -189,7 +222,15 @@ export default {
if (this.selectedPaymentMethod == 'PayPal') {
this.getPayPal();
} else if (this.selectedPaymentMethod == 'Stripe') {
this.getStripe();
} else if (this.selectedPaymentMethod == 'Alipay') {
// this.getAlipay();
}
},
getStripe() {
},
getPayPal(id) {
var that = this;
@@ -240,25 +281,22 @@ export default {
});
setTimeout(() => {
loading.close();
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({
path: '/success',
query: {
...info
}
});
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({
path: '/success',
query: {
...info
}
});
}, 500);
});
},
@@ -314,9 +352,19 @@ export default {
alert('使用PayPal支付');
}
},
created() {
async created() {
// Initialize Stripe.js with your publishable key
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() {
this.getDetail();
}