From abb99280b05560149b8ae9b309eb08a946947c07 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A7=8B=E4=BA=8E=E5=88=9D=E8=A7=81?= <752204717@qq.com>
Date: Fri, 21 Feb 2025 11:51:08 +0800
Subject: [PATCH] tijiao

---
 .../pendingPayment/OrderConfirmation copy.vue | 1017 +++++++++++++++++
 .../pendingPayment/OrderConfirmation.vue      |   94 +-
 2 files changed, 1069 insertions(+), 42 deletions(-)
 create mode 100644 src/components/page/components/pendingPayment/OrderConfirmation copy.vue

diff --git a/src/components/page/components/pendingPayment/OrderConfirmation copy.vue b/src/components/page/components/pendingPayment/OrderConfirmation copy.vue
new file mode 100644
index 0000000..99c54ce
--- /dev/null
+++ b/src/components/page/components/pendingPayment/OrderConfirmation copy.vue	
@@ -0,0 +1,1017 @@
+<template>
+    <div class="order-confirmation-box">
+        <!-- <div id="card-element" style="width:100%;height: 600px;"></div>
+        <div id="card-errors" role="alert"></div>
+        <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>  -->
+        <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"
+      :options="stripeOptions"
+      :pk="stripeKey"
+      @token="tokenCreated"
+    />  <button @click="submit1">Generate token</button> -->
+
+        <!-- 错误显示区域 -->
+
+        <!-- 支付按钮 -->
+
+        <div class="order-confirmation">
+            <el-descriptions :title="$t('pendingPayment.Confirmorderinformation')" :column="2">
+                <el-descriptions-item label="ID">{{ articleInfo.accept_sn }}</el-descriptions-item>
+                <el-descriptions-item :label="$t('pendingPayment.journal')">{{ journalInfo.title }} </el-descriptions-item>
+                <el-descriptions-item :span="2" style="width: 100%" :label="$t('pendingPayment.title')"
+                    ><p>{{ articleInfo.title }}</p></el-descriptions-item
+                >
+            </el-descriptions>
+        </div>
+        <div
+            id="settlementContainer"
+            class="trade-container type-of-affix-right-panel-to-bottom bg-white overflow-hidden flex-col rounded-t-16"
+        >
+            <div class="SettlementHeader">
+                <div class="title1">{{ $t('pendingPayment.payDetail') }}</div>
+            </div>
+            <div class="settlementPanelContainer">
+                <div class="priceWrap">
+                    <div class="priceLine priceLine_total">
+                        <div class="priceTotal_title">{{ $t('pendingPayment.total') }}</div>
+                        <div class="priceRight">
+                            <div class="trade-price-container price">
+                                <span class="trade-price-symbol priceTotal_unit">$</span>
+                                <span class="trade-price-integer priceTotal_num">{{ formatAmount(total) }}</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="priceLine priceLine_total">
+                        <div class="priceTotal_title" style="font-weight: 400">{{ $t('pendingPayment.youhui') }}</div>
+                        <div class="priceRight" style="font-weight: 400; color: #7c889c">
+                            <div class="trade-price-container price">
+                                <span class="trade-price-symbol priceTotal_unit" style="font-weight: 400; color: #7c889c">$</span>
+                                <span class="trade-price-integer priceTotal_num" style="font-weight: 400; color: #7c889c">0</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div id="paymentCard" class="trade-container type-of-normal rounded-8 mx-16 bg-gray mt-24 mb-24 pb-20 pt-20">
+                        <div class="SettlementOption">
+                            <div class="title">
+                                <label class="ant-checkbox-wrapper">
+                                    <span>
+                                        <div class="option">
+                                            <img
+                                                src="https://img.alicdn.com/imgextra/i2/O1CN01Ao5ka31RmZsasktnV_!!6000000002154-2-tps-88-88.png"
+                                                class="optionIcon"
+                                            />
+                                            <div class="titleArea">
+                                                <div class="clamp-wrap clamp-ellipsis optionTitle" style="-webkit-line-clamp: unset">
+                                                    {{ $t('pendingPayment.paymentmethod') }}
+                                                </div>
+                                                <div
+                                                    class="clamp-wrap clamp-ellipsis optionSubTitle"
+                                                    style="-webkit-line-clamp: unset"
+                                                ></div>
+                                            </div>
+                                        </div>
+                                    </span>
+                                </label>
+                            </div>
+                            <div class="SettlementInstallmentOptionArea">
+                                <div class="optionArea">
+                                    <div
+                                        class="installmentOption"
+                                        :class="selectedPaymentMethod == 'PayPal' ? 'isSelect' : ''"
+                                        @click="selectPaymentMethod('PayPal')"
+                                    >
+                                        <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/paypal.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; color: #222d65"
+                                                    >
+                                                        PayPal
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div v-if="selectedPaymentMethod === 'PayPal'" class="checkmark">✔</div>
+                                        </div>
+                                    </div>
+                                    <div
+                                        class="installmentOption"
+                                        :class="selectedPaymentMethod == 'Paystation' ? 'isSelect' : ''"
+                                        @click="selectPaymentMethod('Paystation')"
+                                    >
+                                        <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/Stripe.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; color: #635bff"
+                                                    >
+                                                        Paystation
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div v-if="selectedPaymentMethod === 'Paystation'" 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/Stripe.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;color: #635bff;">
+                                                        Stripe
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div v-if="selectedPaymentMethod === 'Stripe'" class="checkmark">✔</div>
+                                        </div>
+                                    </div> -->
+                                    <!-- <div
+                                        class="installmentOption"
+                                        :class="selectedPaymentMethod == 'Alipay' ? 'isSelect' : ''"
+                                        @click="selectPaymentMethod('Alipay')"
+                                    >
+                                        <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">
+                                                        支付宝
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div v-if="selectedPaymentMethod === 'Alipay'" class="checkmark">✔</div>
+                                        </div>
+                                    </div>  -->
+                                </div>
+                            </div>
+                            <div v-show="selectedPaymentMethod == 'Stripe'" style="padding: 0 16px">
+                                <form>
+                                    <div id="payment-element" />
+                                    <!-- <el-button native-type="submit" type="primary" round>Complete</el-button> -->
+                                </form>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="SettlementSubmit">
+                <div class="price">
+                    <p class="title2">{{ $t('pendingPayment.Disbursements') }}</p>
+                    <div class="totalPrice">
+                        <div class="trade-price-container">
+                            <span class="trade-price-symbol totalPrice_unit"><span class="currency">$</span></span>
+                            <span class="trade-price-integer totalPrice_num">{{ formatAmount(total) }}</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="btnBox">
+                    <div class="btn" @click="submit">{{ $t('pendingPayment.submitOrder') }}</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { loadStripe } from '@stripe/stripe-js';
+
+export default {
+    props: ['type'],
+    data() {
+        return {
+            clientSecret: 'pi_3QhTa4PKgQFCEmmS1YU2egVT_secret_d3VZ5GwCUuvN1OjTAW7FdkxrN',
+            // baseUrl: this.Common.baseUrl,
+            baseUrl: 'https://submission.tmrjournals.com/',
+            baseUrl: 'http://localhost:8080/',
+            stripeOptions: {
+                locale: 'en', // 可选，设置 Stripe Elements 的语言
+                pk: 'pk_test_51QgdjVPKgQFCEmmSTE5TcqvxbWwduryZ4rODZmKyU4u73oqRSMBYJL9HW0XSFNeda0kkDU2IseyMKcVK4R69At4100IDXgaRbV'
+            },
+            loading: false,
+            paymentError: null,
+            paymentIntentId: '', // 用于存储 PaymentIntent ID
+            stripe: null,
+            elements: null,
+            card: null,
+            orderInfo: {},
+            articleInfo: {},
+            journalInfo: {},
+            total: '',
+            selectedPaymentMethod: 'PayPal', // 默认选中 PayPal
+            articleId: this.$route.query.id,
+            urlList: {
+                detail: 'api/Order/preOrderDetail',
+                createdOrder: 'api/Order/creatArticleOrder',
+                completeOrder: 'api/Order/completeOrder'
+            },
+            orderId: '1234567890', // 订单号
+            orderItems: [], // 订单明细
+            totalAmount: '130.00', // 订单总价
+            needInvoice: false, // 是否需要发票
+            invoiceTitle: '', // 发票抬头
+            invoiceContent: '',
+            stripeKey: 'pk_test_51QgdjVPKgQFCEmmSTE5TcqvxbWwduryZ4rODZmKyU4u73oqRSMBYJL9HW0XSFNeda0kkDU2IseyMKcVK4R69At4100IDXgaRbV' // 发票内容
+        };
+    },
+
+    methods: {
+        onPaymentSuccess(paymentIntent) {
+            // 在支付成功后调用的逻辑，例如通知后端更新订单状态
+            console.log('Payment successful with ID:', paymentIntent.id);
+
+            fetch('/update-order-status', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    paymentIntentId: paymentIntent.id // 传递支付 ID 给后端
+                })
+            })
+                .then(() => console.log('Order updated successfully'))
+                .catch((error) => console.error('Failed to update order:', error));
+        },
+
+        submit1() {
+            // this will trigger the process
+            this.$refs.elementRef.submit();
+        },
+        tokenCreated(token) {
+            console.log(token);
+            // handle the token
+            // send it to your server
+        },
+        submit() {
+            // 假设 PayPal 按钮的容器有 id="paypal-button-container"
+            const paypalButtonContainer = document.getElementById('paypal-container');
+
+            // 删除所有 PayPal 按钮
+            if (paypalButtonContainer) {
+                paypalButtonContainer.innerHTML = '';
+                paypalButtonContainer.innerHTML = '<div id="paypal-payment-button"></div>';
+            }
+            if (process.env.NODE_ENV === 'development') {
+                console.log('当前是开发环境');
+            } else if (process.env.NODE_ENV === 'production') {
+                console.log('当前是生产环境');
+            } else if (process.env.NODE_ENV === 'test') {
+                console.log('当前是测试环境');
+            }
+
+            if (this.selectedPaymentMethod == 'PayPal') {
+                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)'
+                });
+                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({
+                elements,
+                confirmParams: {
+                    // Make sure to change this to your payment completion page
+                    return_url: `${this.baseUrl}success?id=${this.articleId}`
+                }
+                //redirect: 'if_required'如果设置redirect: 'if_required'则不跳转returnUrl
+            });
+            loading.close();
+            console.log(error);
+        },
+        getPayPal(loading) {
+            var that = this;
+            window.paypal
+                .Buttons({
+                    style: {
+                        layout: 'horizontal', // 水平布局
+                        shape: 'rect', // 矩形形状
+                        label: 'paypal', // 显示 PayPal 标签
+                        tagline: false, // 隐藏标语
+                        color: 'blue', // 按钮颜色为蓝色
+                        size: 'small' // 按钮大小为大
+                    },
+                    onInit: () => {
+                        // 支付按钮加载完成 通知原生关闭loading
+                        console.log('--------1.支付按钮加载完成 关闭loading--------');
+                        // 自动点击 执行支付
+                        console.log('--------2.自动点击 执行支付--------');
+                        // 如果按钮获取到 就 自动执行点击 否则显示按钮
+                        const paypalButton = window.frames[1].document.querySelector('.paypal-button');
+                        if (paypalButton) paypalButton.click();
+                        else {
+                            document.querySelector('#paypal-container').style.display = 'block';
+                            // document.querySelector('#loading').style.display = 'none';
+                        }
+                    },
+                    createOrder: (data, actions) => {
+                        return this.$api
+                            .post(this.urlList.createdOrder, {
+                                article_id: this.articleId,
+                                // type: 0
+                            })
+                            .then((res) => {
+                                console.log('res at line 222:', res);
+                                that.orderInfo = res.data.detail;
+                                document.querySelector('#paypal-container').style.display = 'none';
+                                return res.data.paypal.jsonResponse.id;
+                            });
+                    },
+                    onApprove(data, actions) {
+                        return actions.order.capture().then((details) => {
+                            console.log('details at line 232:', details.id);
+
+                            const loading = that.$loading({
+                                lock: true,
+                                text: 'Loading',
+                                spinner: 'el-icon-loading',
+                                background: 'rgba(0, 0, 0, 0.7)'
+                            });
+                            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
+                                    }
+                                });
+                            }, 500);
+                        });
+                    },
+                    onError(error) {
+                        console.error('支付失败：', error);
+                        that.$message.error('Payment error, please contact the journal editor!');
+                    }
+                })
+                .render('#paypal-payment-button')
+                .then(() => {})
+                .catch((err) => {
+                    console.error('Error rendering PayPal button:', err);
+                });
+            document.querySelector('.paypal-overlay').addEventListener('click', function (event) {
+                event.stopPropagation();
+            });
+        },
+        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,
+                    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
+                .post(this.urlList.detail, {
+                    article_id: this.articleId
+                })
+                .then((res) => {
+                    console.log('res at line 191:', res);
+                    if (res.code == 0) {
+                        this.articleInfo = res.data.article_detail;
+                        this.journalInfo = res.data.journal_detail;
+                        // this.orderItems = [
+                        //     {
+                        //         ...this.articleInfo,
+                        //         fee: this.journalInfo.fee,
+                        //         journal: this.journalInfo.title
+                        //     }
+                        // ];
+                        this.total = this.journalInfo.fee;
+                    }
+                });
+        },
+        formatAmount(amount) {
+            return amount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+        },
+        async initStripe() {
+            const loading = this.$loading({
+                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'
+            });
+            const paymentElement = this.elements.create('payment');
+            paymentElement.mount('#payment-element');
+            loading.close();
+        },
+
+        async selectPaymentMethod(method) {
+            console.log('method at line 191:', method);
+            this.selectedPaymentMethod = method;
+            if (method == 'Stripe') {
+                this.initStripe();
+            }
+            this.$forceUpdate();
+        },
+        payWithAlipay() {
+            // 实现支付宝支付逻辑
+            alert('使用支付宝支付');
+        },
+        payWithPayPal() {
+            // 实现PayPal支付逻辑
+            alert('使用PayPal支付');
+        }
+    },
+    async created() {
+        // Initialize Stripe.js with your publishable key
+
+        this.getDetail();
+    },
+    async mounted() {},
+    activated() {
+        this.getDetail();
+    }
+};
+</script>
+<style scoped>
+.order-confirmation {
+    text-align: left;
+    padding: 20px;
+    background-color: #fff;
+    /* border: 1px solid #ccc; */
+    border-radius: 16px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    /* margin: 20px auto; */
+    margin-top: 20;
+
+    box-sizing: border-box;
+}
+h3 {
+    margin-bottom: 20px;
+}
+.order-confirmation-box {
+    width: 1040px;
+    margin: 0 auto;
+    height: 100%;
+
+    padding-top: 20px;
+    box-sizing: border-box;
+    /* background-color: #f3f6f8; */
+}
+.orderHeader {
+    align-items: center;
+    background-color: #f3f6f8;
+    border-radius: 8px;
+    color: #11192d;
+    display: flex;
+    flex-direction: row;
+    font-size: 14px;
+    height: 48px;
+    padding: 0 16px;
+    text-align: center;
+}
+.grey {
+    width: 100%;
+    overflow: hidden;
+    padding: 20px;
+    box-sizing: border-box;
+    background-color: #f3f6f8;
+    border-bottom-left-radius: 8px;
+    border-bottom-right-radius: 8px;
+}
+::v-deep .el-table th {
+    background-color: #f3f6f8 !important;
+    color: #11192d !important;
+}
+::v-deep .el-table {
+    border-top-left-radius: 8px !important;
+    border-top-right-radius: 8px !important;
+}
+.price-24 {
+    font-size: 30px;
+    height: 30px;
+    line-height: 34px;
+}
+.trade-price-container {
+    float: right;
+    font-weight: bold;
+    /* width: 100%; */
+    /* align-items: flex-end; */
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.trade-price-label,
+.trade-price-symbol {
+    color: #ff5000;
+    font-size: 16px;
+    height: 16px;
+    line-height: 16px;
+}
+
+.trade-price-symbol {
+    /* font-family: AlibabaSans102v1TaoBao-Bold */
+}
+
+.trade-price-decimal,
+.trade-price-integer,
+.trade-price-point {
+    color: #ff5000;
+    /* font-family: AlibabaSans102v1TaoBao-Bold; */
+    font-size: 26px;
+    height: 26px;
+    line-height: 26px;
+}
+.super-text,
+.trade-tips {
+    color: #50607a;
+    font-size: 12px;
+}
+
+#settlementContainer {
+    background-image: linear-gradient(180deg, #ffebe0, #fff 100px);
+}
+.rounded-t-16 {
+    border-top-left-radius: 16px;
+    border-top-right-radius: 16px;
+}
+.bg-white {
+    background-color: #fff;
+    margin-top: 20px;
+}
+.SettlementHeader {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    margin-bottom: 2px;
+    padding: 24px 16px;
+}
+
+.title1 {
+    color: #11192d;
+    font-size: 16px;
+    font-weight: 600;
+    height: 16px;
+    line-height: 16px;
+    margin-right: 8px;
+}
+
+.goodNum {
+    align-items: baseline;
+    color: #11192d;
+    display: flex;
+    flex-direction: row;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 16px;
+}
+
+.goodNum p {
+    color: #11192d;
+    font-size: 18px;
+    font-weight: 600;
+    line-height: 16px;
+    margin: 0 2px;
+    text-align: center;
+}
+
+.priceWrap {
+    padding: 0 16px;
+}
+
+.priceWrap .priceLine {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 12px;
+}
+
+.priceWrap .priceLine .priceTotal_title {
+    color: #11192d;
+    font-size: 14px;
+    font-weight: 600;
+}
+
+.priceWrap .priceLine .priceRight {
+    align-items: flex-end;
+    display: flex;
+    flex-direction: row;
+    padding-right: 16px;
+    position: relative;
+}
+
+.priceWrap .priceLine .priceRight img {
+    height: 8px;
+    position: absolute;
+    right: 0;
+    top: 6px;
+    width: 8px;
+}
+
+.priceWrap .priceLine .priceRight img.arrow_up {
+    transform: rotate(180deg);
+}
+
+.priceWrap .priceLine .priceRight .price {
+    align-items: baseline;
+}
+
+.priceWrap .priceLine_total {
+    margin-bottom: 16px;
+}
+
+.priceWrap .priceTotal_unit {
+    color: #11192d;
+
+    font-size: 12px;
+    font-weight: 700;
+    line-height: 14px;
+    margin-right: 2px;
+}
+
+.priceWrap .priceTotal_num {
+    color: #11192d;
+
+    font-size: 18px;
+    font-weight: 700;
+    line-height: 18px;
+}
+
+.priceWrap .pricePromotion_pre {
+    color: #ff5000;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 14px;
+}
+
+.priceWrap .pricePromotion_unit {
+    color: #ff5000;
+
+    font-size: 12px;
+    font-weight: 700;
+    line-height: 14px;
+    margin: 0 2px 0 4px;
+}
+
+.priceWrap .pricePromotion_num {
+    color: #ff5000;
+
+    font-size: 18px;
+    font-weight: 700;
+    line-height: 18px;
+}
+.rounded-8 {
+    border-radius: 8px;
+}
+.SettlementOption--Qu5uk29m {
+    margin-bottom: 16px;
+}
+
+.SettlementOption--Qu5uk29m:last-child {
+    margin-bottom: 0;
+}
+
+.option {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    white-space: nowrap;
+    word-break: keep-all;
+}
+
+.optionIcon {
+    height: 16px;
+    margin-right: 8px;
+    width: 16px;
+}
+
+.titleArea {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.optionArea {
+    -moz-column-gap: 8px;
+    column-gap: 8px;
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: 20px;
+}
+
+.optionSubTitle {
+    color: #7c889c;
+    font-size: 12px;
+}
+
+.optionTitle {
+    color: #11192d;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 14px;
+}
+.bg-gray {
+    background-color: #f3f6f8;
+}
+.pb-20 {
+    padding-bottom: 20px;
+}
+.installmentOption {
+    background-color: #fff;
+    border-radius: 4px;
+    cursor: pointer;
+    height: 30px;
+    margin-bottom: 8px;
+    padding: 9px 16px;
+    width: calc(25% - 36px);
+    position: relative;
+}
+.trade-layout-row {
+    display: flex;
+    flex-direction: row;
+}
+
+.trade-layout-col {
+    display: flex;
+    flex-direction: column;
+}
+.icon {
+    height: 16px;
+    margin-right: 8px;
+    width: 16px;
+}
+.iconWrapper {
+    align-items: center;
+    display: flex;
+    height: 100%;
+}
+
+.title {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    padding: 0 16px 12px;
+}
+
+.title .ant-checkbox-wrapper {
+    flex-grow: 1;
+    overflow: hidden;
+}
+
+.title .ant-checkbox + span {
+    overflow: hidden;
+    width: 100%;
+}
+
+.title .ant-checkbox {
+    top: 0;
+}
+.SettlementInstallmentOptionArea,
+.SettlementInstallmentOptionAreaExpanded {
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    padding: 0 16px;
+}
+.pt-20 {
+    padding-top: 20px;
+}
+.settlementPanelContainer {
+    border-bottom: 1px solid #f0f3f5;
+    padding-bottom: 24px;
+}
+.SettlementSubmit {
+    align-items: center;
+    background-color: #fff;
+    border-bottom-left-radius: 16px;
+    border-bottom-right-radius: 16px;
+    box-shadow: 0 -1px 0 0 #f0f3f5;
+    box-sizing: border-box;
+    display: flex;
+    height: 80px;
+    padding: 16px;
+}
+
+.SettlementSubmit,
+.SettlementSubmit .price {
+    justify-content: space-between;
+}
+
+.SettlementSubmit .title2 {
+    color: #11192d;
+    font-size: 14px;
+    font-weight: 400;
+    height: 14px;
+    line-height: 14px;
+}
+
+.SettlementSubmit .totalPrice {
+    align-items: flex-end;
+    display: flex;
+    height: 38px;
+}
+
+.SettlementSubmit .totalPrice_unit {
+    color: #ff5000;
+
+    font-size: 14px;
+}
+
+.SettlementSubmit .totalPrice_num {
+    color: #ff5000;
+
+    font-size: 24px;
+    line-height: 24px;
+}
+
+.SettlementSubmit .btnBox {
+    align-items: center;
+    display: flex;
+}
+
+.SettlementSubmit .back {
+    background-color: #fff;
+    border: 1px solid #e5e8ec;
+    border-radius: 8px;
+    color: #7c889c;
+    cursor: pointer;
+    flex: 0 0 56px;
+    font-size: 16px;
+    font-weight: 600;
+    height: 46px;
+    line-height: 46px;
+    position: relative;
+    text-align: center;
+    transition: all 0.3s ease;
+    width: 56px;
+}
+
+.SettlementSubmit .back:hover:after {
+    background-color: rgba(0, 0, 0, 0.03);
+    border-radius: 8px;
+    content: ' ';
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    z-index: 1;
+}
+
+.SettlementSubmit .btn {
+    background-color: #ff5000;
+    border-radius: 8px;
+    color: #fff;
+    cursor: pointer;
+    flex: 0 0 160px;
+    font-size: 16px;
+    font-weight: 600;
+    height: 48px;
+    line-height: 48px;
+    margin-left: 12px;
+    position: relative;
+    text-align: center;
+    transition: all 0.3s ease;
+    width: 160px;
+}
+
+.SettlementSubmit .btn:hover:after {
+    background-color: rgba(0, 0, 0, 0.03);
+    border-radius: 8px;
+    content: ' ';
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    z-index: 1;
+}
+
+.btn_disabled {
+    color: hsla(0, 0%, 100%, 0.5) !important;
+    pointer-events: none !important;
+}
+
+.btn_loading {
+    background-color: #f5f5f5;
+}
+.checkmark {
+    position: absolute;
+    right: 5px;
+    top: 16px;
+    font-size: 20px;
+    color: #ff5000;
+}
+.isSelect {
+    border: 0.5px solid #ff5000;
+}
+.tableInfo {
+    font-size: 14px;
+}
+#card-element {
+    border: 1px solid #ccc;
+    padding: 10px;
+    border-radius: 4px;
+    margin-bottom: 10px;
+}
+#card-errors {
+    color: red;
+    margin-bottom: 10px;
+}
+button {
+    background-color: #5469d4;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    padding: 10px;
+    cursor: pointer;
+}
+button:disabled {
+    background-color: #ccc;
+}
+</style>
diff --git a/src/components/page/components/pendingPayment/OrderConfirmation.vue b/src/components/page/components/pendingPayment/OrderConfirmation.vue
index 2f807bb..99c54ce 100644
--- a/src/components/page/components/pendingPayment/OrderConfirmation.vue
+++ b/src/components/page/components/pendingPayment/OrderConfirmation.vue
@@ -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"
@@ -16,7 +19,6 @@
     />  <button @click="submit1">Generate token</button> -->
 
         <!-- 错误显示区域 -->
-    
 
         <!-- 支付按钮 -->
 
@@ -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);
@@ -290,7 +295,7 @@ export default {
             // handle the token
             // send it to your server
         },
-        submit() { 
+        submit() {
             // 假设 PayPal 按钮的容器有 id="paypal-button-container"
             const paypalButtonContainer = document.getElementById('paypal-container');
 
@@ -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();
         },