lasuo_nft_front/src/views/Submit.vue

<template>
    <div class="page">
        <!-- <TopNavigation/> -->
        <div class="gift_confirmation_top">
            <!-- <div class="gift_confirmation_top_one">支付剩余时间 12:30</div> -->
            <div class="gift_confirmation_top_two">
                <div class="gift_confirmation_top_two_text1">¥</div>
                <div class="gift_confirmation_top_two_text2">{{ info.price }}</div>
            </div>
            <div class="gift_confirmation_top_three">
                <div class="gift_confirmation_top_three_text1">{{ info.name }}</div>
                <div class="gift_confirmation_top_three_text2">订单详情</div>
                <img :src="require('@assets/more@3x.png')" alt="" class="gift_confirmation_top_three_img" />
            </div>
        </div>
        <!-- <div class="payment_method">
            <div class="payment_method_con" @click="payType = item.type" v-for="(item, index) in payInfos" :key="index">
                <div class="payment_method_con_left">
                    <van-image :src="item.icon" width="24px" height="24px" fit="cover" class="payment_method_img" />
                    <div class="payment_method_title">{{ item.name }}</div>
                </div>
                <img class="choose-icon" :src="payType === item.type ? icons[1] : icons[0]" alt="" />
            </div>
        </div> -->
        <div class="payment_method">
            <div class="payment_method_all">
                <div
                    class="payment_method_con"
                    @click="payType = item.type"
                    v-for="(item, index) in payInfos"
                    :key="index"
                >
                    <div class="payment_method_con_text">
                        <div class="payment_method_con_left">
                            <img :src="item.icon" alt="" class="payment_method_img" />
                            <div class="payment_method_title">{{ item.name }}</div>
                        </div>
                        <img class="choose-icon" :src="payType === item.type ? icons[1] : icons[0]" alt="" />
                    </div>
                    <!-- <van-divider v-if="item.type == 'H5PAY'" /> -->
                </div>
                <!-- <div class="add_bank_card">
                    <div class="add_bank_card_con">
                        <img :src="require('@assets/tianjia@3x.png')" alt="" class="add_bank_card_img_one" />
                        <div class="add_bank_card_con_title">添加银行卡付款</div>
                    </div>
                    <img :src="require('@assets/gengduo@3x.png')" alt="" class="add_bank_card_img_two" />
                </div> -->
            </div>
        </div>
        <!-- <div class="confirm_order">
            <div class="confirm_order_top">
                <img :src="require('@assets/icon_querendingdan.png')" alt="" class="confirm_order_top_img" />
                <div class="confirm_order_top_text">确认订单</div>
            </div>
            <div class="order_information">
                <img :src="getImg(changeImgs(info.pic))" alt="" class="order_information_img" />
                <div class="order_information_title">
                    <div class="order_information_title_one">{{ info.name }}</div>
                    <div class="order_information_title_two">{{ info.category }}</div>
                    <div class="order_information_title_number">x1</div>
                </div>
            </div>
            <div class="fee_details">
                <div class="fee_details_con">
                    <div>商品费用</div>
                    <div class="fee_details_price">¥{{ info.price }}</div>
                </div>
                <van-divider class="fee_details_divider" />
                <div class="fee_details_con">
                    <div>GAS费用</div>
                    <div class="fee_details_price">¥{{ gas }}</div>
                </div>
            </div>
            <div class="payment_method">
                <div
                    class="payment_method_con"
                    @click="payType = item.type"
                    v-for="(item, index) in payInfos"
                    :key="index"
                >
                    <div class="payment_method_con_left">
                        <img :src="item.icon" alt="" class="payment_method_img" />
                        <div class="payment_method_title">{{ item.name }}</div>
                    </div>
                    <img class="choose-icon" :src="payType === item.type ? icons[1] : icons[0]" alt="" />
                </div>
            </div>
            <div class="bottom van-safe-area-bottom" ref="bottom">
                <div class="bottom-content immediate_payment">
                    <div class="immediate_payment_left">
                        <div class="immediate_payment_total">总计</div>
                        <span class="price">
                            <div class="price_con">¥</div>
                            {{ money }}
                        </span>
                    </div>
                    <div class="btn">
                        <div class="immediate_payment_con" @click="submit" :disabled="!!orderId">立即支付</div>
                    </div>
                    <a id="pay" :href="hrefUrl"></a>
                    <wx-open-launch-weapp id="launch-btn" :username="launchName" :path="launchPath"> </wx-open-launch-weapp>
                </div>
            </div>
        </div> -->
    </div>
    <div class="gift_button">
        <!-- <div class="gift_button_cancel" @click="$router.go(-1)">取消</div> -->
        <div class="gift_button_payment" @click="submit" :disabled="!!orderId">确认支付</div>
        <a id="pay" :href="hrefUrl"></a>
    </div>
</template>

<script>
import product from '../mixins/product';
import coupon from '../mixins/coupon';
import { mapState } from 'vuex';
import resolveUrl from 'resolve-url';
import qs from 'qs';
import encryptUtil from '../utils/encryptUtil';
// import TopNavigation from "../components/TopNavigation.vue"
let inWeixin = /micromessenger/i.test(navigator.userAgent);
let inApp = /#cordova#/i.test(navigator.userAgent);
let inIos = /iPhone|iPad|iPod/i.test(navigator.userAgent);
export default {
    name: 'Submit',
    mixins: [product, coupon],
    components: {
        //    TopNavigation
    },
    data() {
        return {
            info: {},
            message: '',
            payType: 'H5PAY',
            payChannel: null,
            payInfos: [
                {
                    icon: require('@assets/icon_yinlian.png'),
                    name: '银联快捷付',
                    type: 'H5PAY'
                }
                // {
                //     icon: require('@assets/svgs/zhifubao.svg'),
                //     name: '支付宝',
                //     type: 'ALIPAY'
                // }
            ],
            // payInfos: [
            //     {
            //         icon: require('@assets/zhifubao@3x.png'),
            //         name: '支付宝',
            //         type: 'ALIPAY'
            //     },
            //     {
            //         icon: require('@assets/weixin@3x.png'),
            //         name: '微信',
            //         type: 'WEIXIN'
            //     }
            // {
            //   icon: require("@assets/svgs/png-decp.svg"),
            //   name: "DCEP",
            // },
            // ],
            icons: [require('@assets/weixuanzhong@3.png'), require('@assets/xuanzhong@3x.png')],
            bottom: null,
            orderId: 0,
            gas: 1,
            inWeixin,
            inApp,
            inIos,
            couponList: [],
            collectionId: 0,
            timer: null,
            hrefUrl: '',
            enable_wx_lite: false,
            enable_wx_pub: false,
            launchName: '',
            launchPath: '',
            createOrderTimer: null,
            timerNum: 0,
            weixinOptions: {}
        };
    },
    computed: {
        money() {
            let money = 0;
            if (this.info.price && !this.couponInfo) {
                money = this.accAdd(this.info.price, money);
            }
            if (this.gas && (!this.couponInfo || this.couponInfo.needGas)) {
                money = this.accAdd(money, this.gas);
            }

            return money;
        },
        ...mapState(['couponInfo']),
        couponPayment() {
            return this.info.couponPayment || false;
        }
    },
    beforeRouteLeave(to, from, next) {
        if (this.createOrderTimer) {
            clearInterval(this.createOrderTimer);
        }
        if (to.path !== '/couponList') {
            this.$store.commit('setCouponInfo', null);
        }
        next();
    },
    mounted() {
        Promise.all([
            this.$http.get('/sysConfig/get/gas_fee').then(res => {
                this.gas = res.value;
                if (this.$store.state.review) {
                    this.gas = 0;
                }
                return Promise.resolve();
            }),
            // this.$http.get('/sysConfig/get/enable_H5').then(res => {
            //     if (!res.value) {
            //         this.payType = 'H5PAY';
            //         this.payInfos = [
            //             {
            //                 icon: require('@assets/icon_yinlian.png'),
            //                 name: '银联快捷付',
            //                 type: 'H5PAY'
            //             }
            //         ];
            //     } else {
            //         this.payType = 'ALIPAY';
            //         this.payInfos = [
            //             {
            //                 icon: require('@assets/svgs/zhifubao.svg'),
            //                 name: '支付宝',
            //                 type: 'ALIPAY'
            //             }
            //         ];
            //     }
            // }),
            inWeixin
                ? this.$http.get('/sysConfig/get/enable_wx_pub').then(res => {
                      this.enable_wx_pub = res.value.split(',').findIndex(i => i === this.$route.query.id) > -1;
                      return Promise.resolve();
                  })
                : Promise.resolve(),
            this.$http.get('/sysConfig/get/enable_wx_lite').then(res => {
                this.enable_wx_lite =
                    res.value.split(',').findIndex(i => i === this.$route.query.id) > -1 &&
                    !/AliApp/i.test(navigator.userAgent);
                return Promise.resolve();
            })
        ]).then(() => {
            // if (!(this.enable_wx_lite || this.enable_wx_pub)) {
            //     this.payInfos.splice(1, 1);
            //     this.payType = 'ALIPAY';
            // } else if (this.enable_wx_pub) {
            //     this.payChannel = 'wx_pub';
            // } else {
            //     this.payChannel = 'wx_lite';
            // }
        });
        this.$toast.loading({
            message: '加载中...',
            forbidClick: true
        });
        if (this.$route.query.id) {
            this.collectionId = Number(this.$route.query.id);
            this.$http.get('/collection/get/' + this.$route.query.id).then(res => {
                this.info = res;
                setTimeout(() => {
                    this.$toast.clear();
                }, 100);

                // this.$http('/sysConfig/get/gas_fee')
            });
            this.getCouponList();
        } else {
            this.orderId = this.$route.query.orderId;
            this.getOrder();
        }

        this.bottom = this.$refs.bottom;
        this.emitter.on('iapEvent', this.iapEvent);
    },
    beforeUnmount() {
        this.emitter.off('iapEvent', this.iapEvent);
        if (this.timer) {
            clearTimeout(this.timer);
            this.timer = null;
        }
    },
    methods: {
        getOrder(next = false) {
            this.$http.get('/order/get/' + this.orderId).then(res => {
                this.info = res;
                if (this.timer) {
                    clearTimeout(this.timer);
                }
                if (this.timerNum >= 20) {
                    this.$toast.clear();
                    this.$dialog
                        .confirm({
                            title: '提示',
                            message: '订单是否已经支付',
                            confirmButtonText: '已经支付',
                            cancelButtonText: '未支付'
                        })
                        .then(() => {
                            this.$dialog
                                .alert({
                                    title: '正在排队中...',
                                    message: '您的铸造订单正在排队，下单的藏品后续会直接出现在藏品室哦～'
                                })
                                .then(res => {
                                    this.$router.back();
                                });
                        })
                        .catch(e => {
                            this.$dialog
                                .confirm({
                                    title: '提示',
                                    message: '订单未支付是否重新支付？',
                                    confirmButtonText: '重新支付',
                                    cancelButtonText: '取消订单'
                                })
                                .then(() => {
                                    this.timerNum = 0;
                                    this.pay(false);
                                })
                                .catch(() => {
                                    this.$router.back();
                                });
                        });
                } else if (res.status === 'PROCESSING' || res.status === 'FINISH' || res.status === 'CANCELLED') {
                    this.$toast.clear();
                    this.$dialog
                        .alert({
                            title: '提示',
                            message:
                                res.status === 'CANCELLED' ? '订单支付失败,点击重新下单' : '订单已支付,点击查看订单详情'
                        })
                        .then(() => {
                            if (res.status === 'CANCELLED') {
                                this.$router.back();
                            } else {
                                this.$router.replace('/orderDetail?id=' + res.id);
                            }
                            // on close
                        });
                } else if (next) {
                    this.timerNum += 1;
                    this.timer = setTimeout(() => {
                        this.getOrder(next);
                    }, 1500);
                }
            });
        },
        getCouponList() {
            this.$http
                .post(
                    '/userCoupon/all',
                    {
                        query: { userId: this.$store.state.userInfo.id, used: false }
                    },
                    { body: 'json' }
                )
                .then(res => {
                    this.couponList = [...res.content].filter(item => {
                        return this.checkTime(item) && this.checkUse(item, this.collectionId);
                    });
                });
        },
        createOrder() {
            if (!this.payType) {
                this.$toast('请选择支付方式');
                return;
            }
            this.$toast.loading('请不要离开当前页面');

            let params = {
                collectionId: this.$route.query.id,
                qty: 1,
                couponId: (this.couponInfo || {}).id || '',
                invitor: this.$store.state.invitor || '',
                vip: this.$store.state.userInfo.vipPurchase > 0 ? true : false
            };
            params.sign = encryptUtil.encrypt(qs.stringify({ ...params, ts: new Date().getTime() }));
            return this.$http.post('/order/mqCreate', params).then(res => {
                return new Promise((resolve, reject) => {
                    let checkOrder = () => {
                        this.$http
                            .get('/order/createResult', { id: res.id })
                            .then(res => {
                                if (res) {
                                    clearInterval(this.createOrderTimer);
                                    this.createOrderTimer = null;
                                    if (res.success) {
                                        resolve(res.data);
                                    } else {
                                        reject({ error: res.data });
                                    }
                                }
                            })
                            .catch(e => {
                                clearInterval(this.createOrderTimer);
                                this.createOrderTimer = null;
                                reject(e);
                            });
                    };
                    setTimeout(checkOrder, 500);
                    this.createOrderTimer = setInterval(checkOrder, 2000);
                });
            });
        },
        submit() {
            if (!this.payType) {
                this.$toast('请选择支付方式');
                return;
            }

            if (this.couponPayment && !this.couponInfo) {
                this.$dialog
                    .alert({
                        title: '提示',
                        message: '该藏品为特殊藏品，需要使用优惠券才能兑换'
                    })
                    .then(() => {});
                return;
            }
            this.createOrder()
                .then(res => {
                    this.orderId = res.id;
                    this.pay();
                })
                .catch(e => {
                    if (e) {
                        this.$toast.clear();
                        this.$dialog
                            .alert({
                                title: '提示',
                                message: this.backReson(e.error)
                            })
                            .then(res => {
                                this.$router.back();
                            });
                    }
                });
        },
        pay(saveOrder = true) {
            this.paySubmit(saveOrder).then(() => {
                if (this.money) {
                    this.$nextTick(() => {
                        if (this.$store.state.review) {
                            window.store.order('358');
                            this.getOrder(true);
                        } else if (this.payType === 'ALIPAY') {
                            if (this.inWeixin) {
                                document.location.replace(
                                    resolveUrl(this.$baseUrl, '/payOrder/alipay_wx?id=' + this.orderId)
                                );
                            } else {
                                this.$nextTick(() => {
                                    document.getElementById('pay').click();
                                });

                                this.$toast.loading({
                                    message: '加载中...',
                                    forbidClick: true
                                });
                                this.getOrder(true);
                            }
                        } else if (this.payType === 'WEIXIN') {
                            this.$toast.loading('加载中');
                            if ('wx_pub' === this.payChannel) {
                                wx.chooseWXPay({
                                    ...this.weixinOptions,
                                    success(res) {
                                        this.$toast.success('支付成功');
                                        setTimeout(() => {
                                            this.$router.replace('/orders');
                                        }, 1000);
                                    },
                                    fail(e) {
                                        console.log(e);
                                        this.$toast('支付失败，请稍后再试');
                                    }
                                });
                            } else {
                                this.$toast.clear();
                                this.$nextTick(() => {
                                    document.getElementById('pay').click();
                                });

                                this.$toast.loading({
                                    message: '加载中...',
                                    forbidClick: true
                                });
                                this.getOrder(true);
                            }
                        } else if (this.payType === 'H5PAY') {
                            document.location.href = resolveUrl(
                                this.$baseUrl,
                                '/payOrder/sandQuick?id=' + this.orderId
                            );
                        }
                    });
                } else {
                    this.$toast.success('支付成功');
                    setTimeout(() => {
                        this.$router.replace('/orderDetail?id=' + this.orderId);
                    }, 1000);
                }
            });
        },
        paySubmit(saveOrder = true) {
            return new Promise((resolve, reject) => {
                if (this.money && saveOrder) {
                    this.$toast.clear();
                    this.$router.replace({ query: { ...this.$route.query, orderId: this.orderId } });
                    this.$nextTick(() => {
                        if (this.$store.state.review) {
                            resolve();
                        } else if (this.payType === 'ALIPAY') {
                            if (this.inWeixin) {
                                resolve();
                            } else {
                                this.$http
                                    .get(`/payOrder/${this.inApp ? 'alipay_app' : 'alipay_h5'}?id=${this.orderId}`)
                                    .then(res => {
                                        this.$toast.clear();
                                        this.hrefUrl = 'alipays://platformapi/startapp?saId=10000007&qrcode=' + res;
                                        resolve();
                                    })
                                    .catch(e => {
                                        if (e && e.error) {
                                            this.$toast.clear();
                                            this.$dialog
                                                .alert({
                                                    title: '提示',
                                                    message: this.backReson(e.error)
                                                })
                                                .then(res => {
                                                    this.$router.back();
                                                });
                                            reject();
                                        }
                                    });
                            }
                        } else if (this.payType === 'WEIXIN') {
                            this.$toast.loading('加载中');
                            this.$http
                                .post('/payOrder/weixin', {
                                    id: this.orderId,
                                    channel: this.payChannel,
                                    openId: localStorage.getItem('openId') || 'oWJG55wLnwdVzXoKka1-DzQKOd_Y'
                                })
                                .then(res => {
                                    if ('wx_pub' === this.payChannel) {
                                        this.weixinOptions = res;
                                        resolve();
                                    } else {
                                        this.$toast.clear();
                                        this.hrefUrl = res.scheme_code;
                                        resolve();
                                    }
                                    // console.log({
                                    //     ...res,
                                    //     package: res.package || res.packageValue
                                    // });
                                    // let _this = this;
                                    // wx.chooseWXPay({
                                    //     ...res,
                                    //     package: res.package || res.packageValue,
                                    //     timestamp: res.timeStamp,
                                    //     success(res) {
                                    //         _this.$toast.success('支付成功');
                                    //         setTimeout(() => {
                                    //             _this.$router.replace('/orders');
                                    //         }, 1000);
                                    //     },
                                    //     fail(e) {
                                    //         console.log(e);
                                    //         _this.$toast('支付失败，请稍后再试');
                                    //     }
                                    // });
                                })
                                .catch(e => {
                                    this.$toast.clear();
                                    this.$dialog
                                        .alert({
                                            title: '提示',
                                            message: this.backReson(e.error || '支付失败请稍后再试')
                                        })
                                        .then(res => {
                                            this.$router.back();
                                        });
                                    reject();
                                });
                        } else if (this.payType === 'H5PAY') {
                            this.$router.replace({
                                path: '/submit',
                                query: {
                                    orderId: this.orderId
                                }
                            });
                            resolve();
                        }
                    });
                } else {
                    resolve();
                }
            });
        },
        goCoupon() {
            if (!this.orderId) {
                this.$router.push('/couponList?collectionId=' + this.info.id);
            }
        },
        iapEvent(e) {
            console.log(e);
            switch (e.event) {
                case 'initiated':
                    this.$toast.loading({
                        duration: 0,
                        forbidClick: true,
                        message: '加载中'
                    });
                    break;
                case 'finished':
                    //this.$toast.clear();
                    this.$http.post('/notify/order/iap', {
                        receiptData: e.product.transaction.appStoreReceipt,
                        orderId: this.orderId
                    });
                    console.log(e.product.transaction.appStoreReceipt);
                    break;
                case 'cancelled':
                    this.$toast.clear();
                    this.orderId = null;
                    break;
            }
        }
    }
};
</script>

<style lang="less" scoped>
.page {
    background: #191d27;
}
.gift_confirmation_top {
    padding: 30px 0px;
    box-sizing: border-box;
    .gift_confirmation_top_one {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        line-height: 18px;
        opacity: 0.5;
        margin-bottom: 4px;
        text-align: center;
    }
    .gift_confirmation_top_two {
        display: flex;
        justify-content: center;
        margin-bottom: 6px;
        .gift_confirmation_top_two_text1 {
            font-size: 24px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #ffffff;
            line-height: 30px;
            margin-right: 4px;
            margin-top: 10px;
        }
        .gift_confirmation_top_two_text2 {
            font-size: 38px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #ffffff;
            line-height: 40px;
        }
    }
    .gift_confirmation_top_three {
        display: flex;
        justify-content: center;
        font-size: 13px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        line-height: 18px;
        opacity: 0.5;
        .gift_confirmation_top_three_text1 {
            margin-right: 10px;
        }
        .gift_confirmation_top_three_text2 {
            margin-right: 5px;
        }
        .gift_confirmation_top_three_img {
            width: 16px;
            height: 16px;
            margin-top: 2px;
        }
    }
}
.payment_method {
    width: 100%;
    padding: 0px 15px;
    box-sizing: border-box;
    // margin-top: 10px;
    .payment_method_all {
        padding: 20px 0px;
        background: #1e222c;
        border-radius: 12px;
    }
    .add_bank_card {
        padding: 0px 15px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        .add_bank_card_con {
            display: flex;
            .add_bank_card_con_title {
                font-size: 16px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #ffffff;
                line-height: 24px;
            }
            .add_bank_card_img_one {
                width: 24px;
                height: 24px;
                margin-right: 10px;
            }
        }
        .add_bank_card_img_two {
            width: 22px;
            height: 22px;
        }
    }
    .payment_method_con {
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #ffffff;
        .choose-icon {
            width: 22px;
            height: 22px;
        }
        .van-divider {
            padding-left: 49px;
            margin-top: 20px;
            margin-bottom: 19px;
        }
        .van-divider::before {
            height: 1px;
            background: #979797;
            opacity: 0.1;
        }
        .payment_method_con_text {
            display: flex;
            justify-content: space-between;
            padding: 0px 15px;
            box-sizing: border-box;
        }
        .payment_method_con_left {
            display: flex;
            .payment_method_title {
                margin-top: 2px;
            }
        }
        .payment_method_img {
            width: 24px;
            height: 24px;
            margin-right: 6px;
        }
    }
    // .payment_method_con:first-child {
    //     margin-bottom: 10px;
    //     border-bottom: 1px solid #5f646f;
    //     padding-bottom: 10px;
    //     box-sizing: border-box;
    // }
}
.fee_details_divider {
    margin: 10px 0;
}
.gift_button {
    position: fixed;
    bottom: 64px;
    width: 100%;
    height: 50px;
    // background: #191D27;
    padding: 0px 15px;
    box-sizing: border-box;
    .gift_button_cancel {
        width: 164px;
        height: 40px;
        border-radius: 8px;
        border: 1px solid #28b6ff;
        box-sizing: border-box;
        line-height: 40px;
        text-align: center;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #28b6ff;
    }
    .gift_button_payment {
        width: 100%;
        height: 50px;
        background: #f9ddb3;
        border-radius: 8px;
        font-size: 18px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #503a1e;
        text-align: center;
        line-height: 50px;
    }
}
.submit {
    padding: 20px 16px;
    background-color: @bg;
}

.pageTitle {
    font-size: 14px;
    color: @text0;
    line-height: 22px;
}

.info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    border-bottom: 1px solid @tabBorder;
    .text1 {
        font-size: 14px;
        color: @text0;
        line-height: 24px;
        flex-grow: 1;
    }

    .text2 {
        font-size: @font2;
        font-weight: bold;
        color: @prim;
        line-height: 24px;
    }

    .text3 {
        font-size: 14px;
        color: @text3;
        line-height: 20px;
    }

    .inter {
        width: 24px;
        height: 24px;
    }

    &.not {
        .text2 {
            font-size: @font2;
            color: @text3;
        }
    }
}

.product {
    display: flex;
    padding: 12px 0 20px;
    border-bottom: 1px solid @tabBorder;
    .product-content {
        flex-grow: 1;
        margin-left: 10px;
        display: flex;
        flex-direction: column;
        .no {
            flex-grow: 1;
            padding: 4px 0 8px;
            font-size: 14px;
            color: @text3;
            line-height: 24px;
        }

        .text1 {
            font-size: @font2;
            font-weight: bold;
            color: @text0;
            line-height: 24px;
        }

        .price {
            font-size: @font2;
            font-weight: bold;
            color: @text0;
            line-height: 24px;
        }
    }
}

/deep/.van-field {
    padding: 20px 0;
    .van-field__label {
        font-size: 14px;
        color: @text0;
        line-height: 24px;
    }
    .van-field__control {
        text-align: right;
        color: @text3;
    }
}

.pay-item {
    display: flex;
    align-items: center;
    height: 60px;
    border-bottom: 1px solid @tabBorder;
    span {
        font-size: 14px;
        font-weight: bold;
        color: @text0;
        line-height: 24px;
        flex-grow: 1;
        padding: 0 10px;
    }
    .choose-icon {
        width: 24px;
        height: 24px;
    }
}

.bottom {
    position: fixed;
    bottom: 0px;
    left: 0;
    right: 0;
    background-color: @bg;
    z-index: 20;
    border-top: 1px solid @tabBorder;

    .bottom-content {
        padding: 6px 16px;
        display: flex;
        align-items: flex-end;

        .btn {
            flex-grow: 1;
            display: flex;
            justify-content: flex-end;
        }
        .van-button {
            flex-grow: 1;
            color: @btnText !important;
            max-width: 132px;
        }
        .text {
            font-size: 14px;
            color: @text3;
            line-height: 20px;
            word-break: keep-all;
        }

        .price {
            font-size: 34px;
            font-family: OSP;
            font-weight: normal;
            color: @prim;
            line-height: 30px;
            display: flex;
            align-items: center;

            // flex-grow: 1;
            margin: 0 6px;
            .font_family {
                font-size: 10px;
            }
            .price_con {
                font-size: 14px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #28b6ff;
                padding-top: 10px;
                box-sizing: border-box;
            }
        }
    }
}
.confirm_order {
    width: 100%;
    height: 100%;
    position: absolute;
    background: @bg;
    // margin-top: 44px;
    padding: 10px 16px;
    box-sizing: border-box;
    .confirm_order_top {
        width: 100%;
        height: 44px;
        background: #29293f;
        border-radius: 8px;
        padding: 10px;
        box-sizing: border-box;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #28b6ff;
        display: flex;
        margin-bottom: 10px;
        .confirm_order_top_img {
            width: 24px;
            height: 24px;
            margin-right: 8px;
        }
        .confirm_order_top_text {
            margin-top: 2px;
        }
    }
    .order_information {
        width: 100%;
        background: #29293f;
        border-radius: 8px;
        padding: 10px;
        box-sizing: border-box;
        display: flex;
        margin-bottom: 10px;
        .order_information_img {
            width: 80px;
            height: 80px;
            margin-right: 12px;
        }
        .order_information_title_one {
            width: 215px;
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #ffffff;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-bottom: 6px;
        }
        .order_information_title_two {
            width: 56px;
            height: 22px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 4px;
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #28b6ff;
            line-height: 22px;
            text-align: center;
            margin-bottom: 16px;
        }
        .order_information_title_number {
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #c8c9cc;
        }
    }
    .fee_details {
        width: 100%;
        background: #29293f;
        border-radius: 8px;
        padding: 12px 10px;
        box-sizing: border-box;
        margin-bottom: 10px;
        .fee_details_con {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ffffff;
            display: flex;
            justify-content: space-between;
            .fee_details_price {
                font-weight: 500;
                color: #28b6ff;
            }
            .order_details {
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #939599;
            }
            .order_details_con {
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #ffffff;
            }
        }
    }
    .fee_details_divider {
        margin: 10px 0;
    }
    .payment_method {
        width: 100%;
        background: #29293f;
        border-radius: 8px;
        padding: 12px 10px;
        box-sizing: border-box;
        .payment_method_con {
            display: flex;
            justify-content: space-between;
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #ffffff;
            border-bottom: 1px solid rgba(94, 99, 110, 0.2);
            padding-bottom: 19px;
            margin-bottom: 10px;
            box-sizing: border-box;
            .payment_method_con_left {
                display: flex;
                .payment_method_title {
                    margin-top: 2px;
                }
            }
            .payment_method_img {
                width: 24px;
                height: 24px;
                margin-right: 6px;
            }
            .choose-icon {
                width: 24px;
                height: 24px;
            }
        }
        .payment_method_con:last-child {
            border-bottom: none;
            padding-bottom: 0px;
            margin-bottom: 0px;
        }
    }
    .fee_details_actual_payment {
        color: #ffffff;
    }
}
.immediate_payment {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 56px;
    background: #15152d;
    padding: 8px 16px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    .immediate_payment_left {
        display: flex;
    }
    .immediate_payment_total {
        margin-top: 16px;
        box-sizing: border-box;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #939599;
        margin-right: 4px;
    }
    .immediate_payment_price_symbol {
        margin-top: 16px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 500;
        color: #28b6ff;
    }
    .immediate_payment_price {
        margin-top: 10px;
        font-size: 26px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #28b6ff;
    }
    .immediate_payment_con {
        width: 160px;
        height: 40px;
        background: #28b6ff;
        border-radius: 8px;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #ffffff;
        line-height: 40px;
        text-align: center;
    }
}
/deep/ .van-divider::before {
    height: 1px;
    background: #5f646f;
    opacity: 0.2;
}
</style>