Client-Teapay/src/pages/to-pay-list/index.vue

<template>
    <view class="container">
        <!-- shipping_method    发货方式：0邮寄 1自提 2邮寄自提 -->
        <template v-if="Data.is_sell != 1">
            <div class="qtmd mar_b20" v-if="goodsInfo.shipping_method == 2">
                <view class="order_list flex_r flex_ac flex_jb">
                    <view class="list_name">发货方式</view>
                    <view class="list_con flex_r flex_jb">
                        <div class="select_tab" @click="onprom(0)" :class="{st_active:prom_type===0}">快递邮寄</div>
                        <div class="select_tab" @click="onprom(1)" :class="{st_active:prom_type===1}">到店自提</div>
                    </view>
                </view>
            </div>
            <div class="qtmd mar_b20" v-else>
                <view class="order_list flex_r flex_ac flex_jb">
                    <view class="list_name">发货方式</view>
                    <view class="list_con flex_r flex_jb">
                        <div class="list_con" v-if="prom_type==0">快递邮寄</div>
                        <div class="list_con" v-else>到店自提</div>
                    </view>
                </view>
            </div>
        </template>
        <!-- 收货地址 -->
        <!-- is_sell    0：邮寄 1：寄售         prom_type    0：邮寄 1：自提 -->
        <view class="address mar_b20" v-if="Data.is_sell != 1 && prom_type != 1">
            <block v-if="DefaultAddress.name">
                <view class="add_head flex_r flex_ac flex_jb">
                    <view class="user_info flex_r flex_ac">
                        <view class="user_name">{{ DefaultAddress.name }}</view>
                        <view class="user_phone">{{ DefaultAddress.mobile }}</view>
                    </view>
                    <view class="set_address flex_r flex_ac" @tap="chooseWXaddress">
                        <image class="set_img" src="/static/img/setAddress.png" mode=""></image>
                        <view class="set_text">修改</view>
                    </view>
                </view>
                <view class="add_name mar_t20">{{ DefaultAddress.province + ' ' + DefaultAddress.city + ' ' + DefaultAddress.area + ' ' + DefaultAddress.street + ' ' + DefaultAddress.address }}</view>
            </block>
            <block v-else>
                <view class="add_address flex_c flex_ac flex_jc" @tap="chooseWXaddress('add')">
                    <image class="add_icon" src="/static/img/add.png" mode=""></image>
                    <view class="add_text">添加收货地址</view>
                </view>
            </block>
        </view>
        <!-- 收货地址-end -->
        <!-- 商品信息 -->
        <view class="goods_info mar_b20">
            <view class="info_type" v-if="Data.type != 1">{{ modularName }}</view>
            <view class="goods flex_r">
                <image class="goods_img" :src="goodsInfo.original_img" mode=""></image>
                <view class="goods_con flex_c flex_jc flex_jb">
                    <view class="goods_name ellipsis2">{{ goodsInfo.goods_name }}</view>
                    <!-- <view class="goods_msg" v-if="Data.type == 2">{{ goodsInfo.trade_price }}元+{{ goodsInfo.trade_num }}批发券+{{ goodsInfo.treasure_price }}贡献值</view> -->
                    <view class="goods_spec">
                        <text class="goods_spec_text" v-if="specName">{{ specName }}</text>
                        <text v-if="attrName">{{ attrName }}</text>
                    </view>
                    <template v-if="Data.type != 1">
                        <view class="goods_msg">{{ goodsInfo.cost_price }}</view>
                        <view class="goods_num">x {{ Data.num }}</view>
                    </template>
                </view>
            </view>
        </view>
        <!-- 商品信息-end -->
        <!-- 订单信息 -->
        <view class="order mar_b20">
            <view class="info_type" v-if="Data.type == 1">{{ modularName }}</view>
            <view class="order_list flex_r flex_ac flex_jb">
                <view class="list_name">数量</view>
                <view class="list_con">{{ Data.num }}</view>
            </view>
            <view class="order_list flex_r flex_ac flex_jb" v-if="Data.type == 1">
                <view class="list_name">商品单价</view>
                <view class="list_con">{{ parseFloat(goodsInfo.teac) }} TeaC</view>
            </view>
            <view class="order_list flex_r flex_ac flex_jb" v-else>
                <view class="list_name">商品单价</view>
                <view class="list_con">￥{{ parseFloat(goodsInfo.cost_price) }}</view>
            </view>
            <template v-if="Data.type != 1">
                <view class="order_list flex_r flex_ac flex_jb" v-if="Data.is_sell != 1 && prom_type != 1 && freight > 0">
                    <view class="flex_r flex_ac">
                        <view class="list_name">运费</view>
                        <view class="list_con p_color">({{ freight }}元/每套)</view>
                    </view>
                    <view class="list_con">￥{{ $h.Mul(freight, Data.num) }}</view>
                </view>
            </template>
            <view class="order_list flex_r flex_ac flex_jb" v-if="Data.type == 2 || Data.type == 5">
                <view class="flex_r flex_ac">
                    <view class="list_name">贡献值</view>
                    <view class="list_con p_color">(可用{{ userinfo.cha_bao }})</view>
                </view>
                <view class="list_con" v-if="Data.type != 5">{{ goodsInfo.treasure_price * Data.num }} 贡献值</view>
                <view class="list_con" v-else>{{ $h.Mul(goodsInfo.cha_bao, Data.num) }} 贡献值</view>
            </view>
            <view class="order_list flex_r flex_ac flex_jb" v-if="Data.type == 8">
                <view class="flex_r flex_ac">
                    <view class="list_name">OE</view>
                    <view class="list_con p_color">(可用{{ localInfo.original_equity }})</view>
                </view>
                <view class="list_con">{{ $h.Mul(goodsInfo.oe_price, Data.num) }} OE</view>
            </view>
            <view class="order_list flex_r flex_ac flex_jb" v-if="Data.type == 7">
                <view class="flex_r flex_ac">
                    <view class="list_name">消费券</view>
                    <view class="list_con p_color">(可用{{ localInfo.integral }})</view>
                </view>
                <view class="list_con">{{ $h.Mul(goodsInfo.consume, Data.num) }} 消费券</view>
            </view>
            <view class="order_list flex_r flex_ac flex_jb" v-if="Data.type == 2">
                <view class="flex_r flex_ac">
                    <view class="list_name">批发券</view>
                    <view class="list_con p_color">(可用{{ userinfo.integral }})</view>
                </view>
                <view class="list_con">{{ $h.Mul(goodsInfo.trade_num, Data.num) }} 批发券</view>
            </view>
            <template v-if="Data.type==4 && isAct">
                <view class="order_list flex_r flex_ac flex_jb">
                    <view class="list_name">商品原价</view>
                    <view class="list_con">￥{{ originalPrice }}</view>
                </view>
                <view class="order_list flex_r flex_ac flex_jb">
                    <view class="flex_r flex_ac">
                        <view class="list_name">消费券抵</view>
                        <view class="list_con p_color">(可用 {{ parseFloat(localInfo.integral) }})</view>
                    </view>
                    <view class="list_con p_color">-￥{{ goldNum }}</view>
                </view>
            </template>
            <view class="order_list flex_r flex_ac flex_jb" v-if="Data.type == 1">
                <view class="list_name">小计</view>
                <view class="list_con">{{ $h.Mul(goodsInfo.teac, Data.num) }} TeaC</view>
            </view>
            <view class="order_list flex_r flex_ac flex_jb" v-if="Data.type == 1">
                <view class="list_name">贡献值</view>
                <view class="list_con">{{ $h.Mul(goodsInfo.treasure_price, Data.num) }} 贡献值</view>
            </view>
            <view class="order_list flex_r flex_ac flex_jb" v-else>
                <view class="list_name">小计</view>
                <view class="list_con">￥{{ CommodityPrice>0?CommodityPrice:0 || 0 }}</view>
            </view>
            
        </view>
        <view class="order mar_b20" v-if="Data.type == 1">
            <view class="info_type">批发专区</view>
            <view class="order_list flex_r flex_ac flex_jb">
                <view class="list_name">数量</view>
                <view class="list_con">{{ Data.num * 2 }}</view>
            </view>
            <view class="order_list flex_r flex_ac flex_jb">
                <view class="list_name">商品单价</view>
                <view class="list_con">{{ parseFloat(goodsInfo.trade_teac) }} TeaC</view>
            </view>
            <!-- <view class="order_list flex_r flex_ac flex_jb" v-if="Data.type != 1">
                <view class="list_name">小计</view>
                <view class="list_con">￥{{ wholesalePriceTotal || 0 }}</view>
            </view> -->
            <view class="order_list flex_r flex_ac flex_jb">
                <view class="list_name">小计</view>
                <view class="list_con">{{($h.Mul(goodsInfo.trade_teac, Data.num * 2) || 0) +' TeaC'}}</view>
            </view>
            <view class="order_list flex_r flex_ac flex_jb">
                <view class="flex_r flex_ac">
                    <view class="list_name">寄卖服务</view>
                    <view class="list_con p_color">({{ goodsInfo.service }}元/每套)</view>
                </view>
                <view class="list_con">￥{{ $h.Mul(goodsInfo.service, Data.num * 2) }}</view>
            </view>
        </view>
        <view class="order">
            <view class="order_list flex_r flex_ac flex_jb">
                <view class="list_name">订单合计</view>
                <view class="list_con" v-if="Data.type == 1">{{($h.Add($h.Mul(goodsInfo.teac, Data.num),$h.Mul(goodsInfo.trade_teac, Data.num * 2))||0) +'TeaC + '+(($h.Mul(goodsInfo.treasure_price, Data.num)) || 0) }}贡献值 + ￥{{ $h.Mul(goodsInfo.service, Data.num * 2) }}</view>
                <view class="list_con" v-else>￥{{ amountTotal>0?amountTotal:0 || 0 }}</view>
            </view>
            <view class="order_list flex_r flex_ac flex_jb" v-if="['2','3'].includes(Data.type)">
                <view class="list_name">可用云宝</view>
                <view class="list_con g_color">￥{{ userinfo.user_money }}</view>
            </view>
            <view class="order_list flex_r flex_ac flex_jb" v-if="['2','3', '4', '5', '7', '8'].includes(Data.type) && isAct">
                <view class="list_name">我的付宝</view>
                <view class="list_con g_color">{{ localInfo.property }}</view>
            </view>
            <view class="order_list flex_r flex_ac flex_jb" v-if="Data.type == 1">
                <view class="list_name">可用TeaC</view>
                <view class="list_con g_color">{{ userinfo.teac }}</view>
            </view>
            <view class="order_list flex_r flex_ac flex_jb" v-if="Data.type == 1">
                <view class="list_name">可用贡献值</view>
                <view class="list_con g_color">{{ userinfo.cha_bao }}</view>
            </view>
            <view class="order_list flex_r flex_ac flex_jb" v-if="Data.type == 1">
                <view class="list_name">付宝</view>
                <view class="list_con g_color">￥{{ localInfo.property }}</view>
            </view>
        </view>
        <view class="msginfo" v-if="Data.type == 1">
            <view class="title">特别提示</view>
            <view>1、寄卖服务费只能使用您的付宝抵扣或微信支付</view>
        </view>
        <!-- 订单信息-end -->
        <!-- 底部操作栏 -->
        <view class="bar flex_r flex_ac flex_jb">
            <!-- <view class="bar_info flex_r flex_ac" v-if="Data.type == 1">待支付<text>￥{{ $h.Mul(goodsInfo.service, Data.num * 2) }}</text></view> -->
            <view class="bar_info flex_r flex_ac">待支付<text>￥{{ obligation }}</text></view>
            <view class="pay_btn flex_r flex_ac flex_jc" @tap="payment">立即支付</view>
        </view>
        <!-- 底部操作栏-end -->
        <!-- 收货地址弹窗 -->
        <userAddress ref="userAddress" @addressConfirm="loadDa" />
    </view>
</template>
<script>
import { post } from "@/request/api.js";
import { ToPayOpre } from "@/utils/reqTools.js";
let toPayOpre = new ToPayOpre();
import userAddress from "pages/xghc-addrress/userAddress";
export default {
    data() {
        return {
            Data: {},
            goodsInfo: "", //商品信息
            modularName: "", //商品类型
            DefaultAddress: {}, //用户默认地址
            originalPrice: 0, //商品原价(总价)
            CommodityPrice: 0, //商品折扣后价格（总价）
            wholesalePriceTotal: 0, //批发总价
            obligation: 0, //待支付 （可以理解为必须微信支付的）
            freight: 0, //运费
            goldNum: 0, //消费券抵扣
            amountTotal: 0, //合计

            userinfo: uni.getStorageSync("userinfo"),
            localInfo: uni.getStorageSync("localInfo"),

            prom_type: 0, //0：邮寄 1：自提
            isAct: false, //是否激活数智生活,
            specName: "",
            attrName: ""
        };
    },
    components: {
        userAddress,
    },
    onLoad(e) {
        this.Data = e;
        this.isActivation(); //查询是否激活数智生活
        this.loadAddress(); //获取收货地址
        this.loadData(e); //加载订单商品数据

        this.modularName = this.tidyTpye(e.type);
    },
    computed: {},
    methods: {
        onprom(va) {
            this.prom_type = va
            this.loadData(this.Data);
        },
        // 是否激活数智生活
        async isActivation() {
            let res = await post("local/isActivation", this.Query);
            if (res.code === 0) {
                this.isAct = true
            } else {
                uni.hideToast();
                this.isAct = false
            }
        },
        loadData(da) {
            post("v1/goods/goodsDetail", da).then((res) => {
                if (res.code === 0) {
                    this.goodsInfo = res.data.data;
                    let attr_list=[]
                    if (this.goodsInfo.goods_spec_list.length > 0) {
                        let list= this.goodsInfo.goods_spec_list.filter((item)=>{
                            return item.id == this.Data.spec_id
                        })[0]
                        this.specName = list.spec_name;
                        attr_list = list.attr_list
                    }
                    if (attr_list.length > 0) {
                        this.attrName = attr_list.filter((item)=>{
                            return item.id == this.Data.attr_id
                        })[0].attr_name
                    }
                    post("v1/goods/getPrice", {
                        goods_id: this.Data.goods_id,
                        spec_id: this.Data.spec_id,
                        attr_id: this.Data.attr_id,
                        type: this.Data.type
                    }).then((resPrice) => {
                        if (resPrice.code === 0) {
                            if(resPrice.data){
                                this.goodsInfo.cost_price = resPrice.data.cost_price;
                            }
                            
                        }
                        if (this.goodsInfo.shipping_method != 2) this.prom_type = this.goodsInfo.shipping_method
                            if(da.type==1)this.calculatePrice(1,this.Data.num);
                            else{
                                post("v1/goods/freight", { type: da.type, id: da.id }).then((resFreight) => {
                                    if (resFreight.code === 0) this.freight = resFreight.data.freight;
                                    this.calculatePrice(this.Data.type,this.Data.num);
                                });
                            }
                    });
                    
                    
                }
            });
        },
        getPrice(){
            post("v1/goods/getPrice", {
                goods_id: this.Data.goods_id,
                spec_id: this.Data.spec_id,
                attr_id: this.Data.attr_id,
                type: this.Data.type
            }).then((res) => {
                if (res.code === 0) {
                    if(res.data){
                        this.goodsInfo.cost_price = res.data.cost_price
                    }
                }
            });
        },
        calculatePrice(type,num){
            setTimeout(() => {
                // 计算待支付
                let p = this.goodsInfo.cost_price; //商品单价
                let y = (this.prom_type == 1 || this.Data.is_sell == 1 || type == 1) ? 0 : this.freight; // 运费单价   寄卖、自提 运费为0
                let ps = this.$h.Mul(p, num); //商品总价
                let ys = this.$h.Mul(y, num); //运费总价
                let a = this.$h.Add(ps, ys); //商品总价加运费
                this.originalPrice = ps; this.CommodityPrice = ps; this.amountTotal = ps;
                let wy = this.$h.Mul(this.goodsInfo.service, num*2); //寄卖服务费
                if (type == 1) {
                    let wp = this.$h.Mul(this.goodsInfo.cost_price, num*2*0.2); // 批发价字段去除了 零售价+2*（零售价 *0.2+寄卖服务价）
                    let wpt = this.$h.Add(wp,wy)
                    this.wholesalePriceTotal = wpt;
                    this.amountTotal = this.$h.Add(wpt,this.amountTotal)
                    ps = this.$h.Add(ps, wp);
                }
                let um = 0; //可用付宝
                if (this.isAct) um = this.localInfo.property; //可用付宝
                let userBalance = this.$h.Add(this.userinfo.user_money, um); //用户总余额（可用付宝+云宝）
    
                let b = this.$h.Sub(a, userBalance); //待支付金额
                let b1 = this.$h.Sub(ps, userBalance); //待支付金额 - 零售&批发&云宝货易 运费必须现金支付
    
                let obligation = 0;
                if (type == 1) {
                    // b1 = this.$h.Sub(ps, this.userinfo.user_money); //用云宝计算后 待支付价格
                    b1 = this.$h.Sub(ps,um); // 寄卖服务待支付价格不使用云宝
                    let sp = this.$h.Sub(wy,um);  //寄卖服务费只能用数智生活付宝抵扣或微信支付
                    obligation = b1 > 0 ? b1 : 0; 
                    obligation = this.$h.Add(obligation,sp > 0 ? sp : 0);
                }
                else if (type == 4) {
                    if (this.isAct) {
                        let up = this.localInfo.integral; //数智生活消费券
                        let goldnum = this.$h.Mul(this.goodsInfo.consume, num); //商品消费券 可抵金额
                        this.goldNum = up > goldnum ? goldnum : up; //可抵金额，消费券不够及余额多少抵多少
                        let sp = this.$h.Sub(ps, this.goldNum); //抵扣后价格
                        this.CommodityPrice = sp; this.amountTotal = sp;
                        let b2 = this.$h.Sub(sp, um); //消费券电商  可以使用数智生活佣金支付
                        obligation = b2 > 0 ? b2 : 0;
                    } else obligation = a;
                }
                else if (type == 5 || type == 8 || type == 7) {
                    obligation = this.$h.Sub(a, um)> 0 ? this.$h.Sub(a, um) : 0;
                }
                else if (["6"].includes(type)) obligation = a;
                else if (["3"].includes(type)) obligation = b1 > 0 ? this.$h.Add(b1, ys) : ys;
                else obligation = b > 0 ? b : 0;
                this.obligation = obligation;
            }, 100);
        },
        // 获取用户地址
        async loadAddress() {
            let res = await post("v1/user/addressList");
            if (res.code === 0) {
                let da = res.data.data;
                if (da.length) {
                    for (const i of da) {
                        if (i.status == 1) {
                            this.DefaultAddress = i;
                            break;
                        } else this.DefaultAddress = da[0];
                    }
                }
            }
        },
        //获取微信的收货地址
        getwexinAddress() {
            let that = this
            uni.chooseAddress({
                success(res) {
                    console.log(res);
                    if (res.errMsg == "chooseAddress:ok") {
                        let data = {
                            province: res.provinceName,
                            city: res.cityName,
                            area: res.countyName,
                            street: res.streetName,
                            address: res.detailInfo,
                            mobile: res.telNumber,
                            name: res.userName,
                            is_default: 0,
                        };
                        post("v1/user/addAddress", data).then((res) => {
                            if (res.code === 0) {
                                that.$toast(res.msg);
                                that.loadAddress();
                            }
                        });
                    }
                },
            });
        },
        chooseWXaddress(va) {
            let a = va != "add" ? this.DefaultAddress.id : "add";
            this.$refs.userAddress.open(a);
        },
        // 支付
        payment() {
            let that = this
            if (that.obligation == 0) {
                uni.showModal({
                    title: "温馨提示",
                    content: "你将支付该订单，请确认。",
                    showCancel: true,
                    confirmText: "确认",
                    confirmColor: "#f02f2f",
                    success(res) {
                        if (res.confirm) {
                            that.Pay();
                        }
                    },
                });
            } else {
                that.Pay();
            }
        },
        async Pay() {
            let trade_type = "jsapi";
            // #ifdef  H5
            trade_type = "H5";
            // #endif
            // #ifdef  APP
            trade_type = "app";
            // #endif
            // #ifdef  MP-WEIXIN
            trade_type = "jsapi";
            // #endif

            let that = this
            let adres = await uni.Location();

            post("v1/goods/submitOrder", {
                ...that.Data,
                address_id: that.DefaultAddress.id || '',
                regional_code: that.DefaultAddress.regional_code || '',
                trade_type: trade_type,
                prom_type: that.prom_type,
                price: that.goodsInfo.cost_price,
                location: "+"+adres.lat+'/+'+adres.lng
            }).then((res) => {
                if (res.code === 0) {
                    if(res.data && res.data != 200){
                        let data = {
                            ...res.data,
                            appId:res.data.app_id,
                            nonceStr:res.data.nonce_str,
                            package:res.data.package,
                            signType:res.data.sign_type,
                            paySign:res.data.pay_sign,
                            timeStamp:res.data.time_stamp,
                            prepayid:res.data.prepay_id
                        }
                        // data.prepayid = data.package?data.package.split('prepay_id=')[1]:''
                        if (res.code == 0 && data.prepayid) {
                            toPayOpre.toPay(data, (rea) => {
                                if (!rea) {
                                    // 支付成功
                                    this.$toast("支付成功");
                                    setTimeout(() => {
                                        that.goto("/pages/szw-order-list/index");
                                    }, 1500);
                                } else {
                                    // 支付失败
                                    this.$toast("支付已取消");
                                }
                            });
                        }
                    } else {
                        this.$toast("支付成功");
                        setTimeout(() => {
                            that.goto("/pages/szw-order-list/index");
                        }, 1500);
                    }
                } else {
                    that.loadData(that.Data);
                }
            });

        },
        loadDa(da) {
            this.DefaultAddress = da;
        },
        // 获取userinfo
        async getuserInfo() {
            this.userinfo = await uni.userfun();
        },
        async getLU() {
            this.localInfo = await uni.Luserfun()
        },
    },
};
</script>
<style lang="scss">
// 页面配置
page {
    background: #f5f5f5;
}

.container {
    padding: 20rpx 20rpx 150rpx;
    box-sizing: border-box;
}

// 页面配置-end

// 收货地址
.user_phone {
    font-size: 26rpx;
    color: #222;
}

.set_text {
    font-size: 24rpx;
    color: #868686;
}

.set_img {
    width: 24rpx;
    height: 24rpx;
    margin-right: 9rpx;
}

.add_address {
    width: 100%;
    overflow: hidden;
    height: 109rpx;
}

.add_icon {
    width: 60rpx;
    height: 60rpx;
    margin-bottom: 12rpx;
}

.user_name {
    font-size: 32rpx;
    color: #000;
    margin-right: 46rpx;
}

.add_name {
    // width: 448rpx;
    // overflow: hidden;
    font-size: 24rpx;
    color: #868686;
}

.add_text {
    font-size: 24rpx;
    color: #868686;
    font-family: "SourceHanSansCN-Normal";
}

.address {
    width: 100%;
    overflow: hidden;
    padding: 28rpx;
    box-sizing: border-box;
    background: #fff;
    border-radius: 12rpx;
}

// 收货地址-end

// 商品信息
.goods:nth-last-child(1) {
    margin-bottom: 0;
}

.goods_num {
    // text-align: right;
    font-size: 26rpx;
    color: #989898;
    position: absolute;
    bottom: 0;
    right: 0;
}

.goods_con {
    width: calc(100% - 202rpx - 36rpx);
    min-height: 187rpx;
    position: relative;
    // overflow: hidden;
}

.goods {
    width: 100%;
    overflow: hidden;
    margin-bottom: 20rpx;
    align-items: initial;
}

.goods_img {
    width: 202rpx;
    height: 187rpx;
    margin-right: 36rpx;
    border-radius: 12rpx;
}

.goods_name {
    font-size: 34rpx;
    color: #1b1b1b;
    font-family: "SourceHanSansCN-Bold";
    font-weight: bold;
}

.goods_msg {
    overflow: hidden;
    font-size: 26rpx;
    color: #18bb88;
    font-family: "SourceHanSansCN-Medium";
    font-weight: 500;
}

.info_type {
    font-size: 30rpx;
    color: #353535;
    font-family: "SourceHanSansCN-Bold";
    font-weight: bold;
    margin-bottom: 43rpx;
}

.goods_info {
    width: 100%;
    overflow: hidden;
    padding: 28rpx;
    background: #fff;
    border-radius: 12rpx;
    box-sizing: border-box;
}

.goods_spec{
    font-size: 24rpx;
    color: #868686;
    text{
        padding: 10rpx 20rpx;
        border-radius: 10rpx;
        margin-right: 12rpx;
        background-color: #f5f5f5;
        
    }
    &_text{
        padding-right: 8rpx;
    }
}
// 商品信息-end

// 订单信息
.list_name {
    width: 120rpx;
    font-size: 26rpx;
    text-align-last: justify;
    color: rgba(0, 0, 0, 0.8);
    font-weight: bold;
    margin-right: 12rpx;
}

.order_list:nth-last-child(1) {
    margin-bottom: 0;
}

.order_list {
    width: 100%;
    overflow: hidden;
    margin-bottom: 30rpx;
}

.list_con {
    font-size: 24rpx;
    color: #000;
    font-family: "SourceHanSansCN-Medium";
    font-weight: bold;
    line-height: 1;
}

.order {
    width: 100%;
    overflow: hidden;
    padding: 28rpx;
    box-sizing: border-box;
    background: #fff;
    border-radius: 12rpx;
}

.list_name text {
    font-size: 26rpx;
    color: rgba(0, 0, 0, 0.8);
    font-family: "SourceHanSansCN-Medium";
    font-weight: bold;
    line-height: 1;
}

.p_color {
    color: #ff6d44;
}

.g_color {
    color: #18bb88;
}

// 订单信息-end

// 底部操作栏
.bar_info {
    font-size: 24rpx;
    color: #000;
    font-family: "SourceHanSansCN-Medium";
    font-weight: bold;
}

.bar_info text {
    font-size: 30rpx;
    color: #ff6d44;
    font-family: "SourceHanSansCN-Medium";
    font-weight: bold;
}

.pay_btn {
    width: 187rpx;
    height: 72rpx;
    font-size: 30rpx;
    font-family: "SourceHanSansCN-Medium";
    font-weight: bold;
    background: #2db48a;
    border-radius: 36rpx;
    color: #fff;
}

.bar {
    width: 100%;
    overflow: hidden;
    position: fixed;
    bottom: 0;
    left: 0;
    background: #fff;
    box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.15);
    padding: 14rpx 30rpx;
    box-sizing: border-box;
}

// 底部操作栏-end

.qtmd {
    width: 100%;
    padding: 28rpx;
    box-sizing: border-box;
    background: #fff;
    border-radius: 12rpx;

    .select_tab {
        margin-left: 30rpx;
        font-size: 28rpx;

        &:first-child {
            margin-left: 0;
        }

        &::before {
            content: "";
            display: inline-block;
            width: 32rpx;
            height: 32rpx;
            background-image: url("~@/static/img/weixuanzhong_icon.png");
            background-size: 100% 100%;
            vertical-align: middle;
            margin-right: 6rpx;
        }
    }

    .st_active {
        &::before {
            background-image: url("~@/static/img/xuanzhong_icon.png");
        }
    }
}
.msginfo{
    font-size: 24rpx;
    color: #999;
    margin-top: 30rpx;
    .title {
        color: #666;
        font-size: 26rpx;
        height: 26rpx;
        line-height: 26rpx;
        // padding-left: 12rpx;
        // border-left: 6rpx solid #00b76c;
        margin-bottom: 16rpx;
    }
}
</style>