Client-Teapay/src/pagesB/orderingfood/payTheBill.vue

<template>
    <div class="payTheBill">
        <div class="head card">
            <div class="p1">{{Merchant.restaurant_name}}</div>
            <div class="p2">{{Merchant.restaurant_address}}</div>
        </div>
        <div class="phone card flex_r flex_jb">
            <span>联系方式</span>
            <span>{{ userinfo.mobile }}</span>
        </div>
        <div class="commodity card">
            <div class="li tit">
                <span class="s1">商品名称</span>
                <span class="s2">数量</span>
                <span class="s2">原价</span>
            </div>
            <div class="li li2" v-for="(i,s) in cartList" :key="s">
                <span class="s1 ellipsis">{{ i.product_name }}</span>
                <span class="s2">{{ i.number }}</span>
                <span class="s2">{{ $h.Mul($h.Add(i.product_price, i.spec_price),i.number) }}</span>
            </div>
        </div>
        <div class="money card">
            <div class="li flex_r flex_jb">
                <span>消费金额</span>
                <span>￥{{ cartTotal || 0 }}</span>
            </div>
            <div class="li flex_r flex_jb">
                <span>消费券抵扣<span class="corg">{{Integral}}%</span></span>
                <span class="corg">-￥{{ deduction || 0 }}</span>
            </div>
            <div class="li flex_r flex_jb">
                <span>实付金额</span>
                <span>￥{{ actuallypaid || 0 }}</span>
            </div>
        </div>
        <div class="money card">
            <div class="li flex_r flex_jb">
                <span>赠送茶宝</span>
                <span>{{ chabao || 0 }}</span>
            </div>
        </div>
        <div class="btnbar">
            <div class="btn" @click="payBill">确认支付</div>
        </div>
        <div class="mag">*核对商品无误后即可付款，然后订单详情页会显示取餐码，将取餐码告知店员即可取餐</div>
    </div>
</template>
<script>
import { ToPayOpre } from "@/utils/reqTools.js";
let toPayOpre = new ToPayOpre();
import { post } from "@/request/api.js";
export default {
    name: "payTheBill",
    props: {},
    components: {},
    data() {
        return {
            Merchant: {},
            cartList: [],
            cartTotal: 0,
            userinfo: {},
            Integral: 0,
            deduction: 0,
            actuallypaid: 0,
            chabao: 0,
            brand_id: ""
        };
    },
    methods: {
        getMerchant(da) {
            post("local/getMerchantById", da).then(res => {
                if (res.code == 0) {
                    this.Merchant = res.data;
                }
            })
        },
        getIntegral(){
            post("local/getIntegral",{type:1,brand_id: this.brand_id}).then(res=>{
                if (res.code == 0) {
                    let i1 = res.data.integral, i2 = res.data.chabao;
                    this.Integral = this.$h.Mul(i1,100);
                    this.deduction = this.$h.Mul(this.cartTotal,i1).toFixed(2);
                    this.actuallypaid = this.$h.Sub(this.cartTotal,this.deduction);
                    this.chabao = this.$h.Mul(this.actuallypaid,i2).toFixed(2);
                }
            })
        },
        getCartList(id) {
            post("local/myCart", {
                restaurant_id: id,
            }).then(res => {
                if (res.code == 0) {
                    let data = res.data;
                    let totals = 0;
                    data.forEach(itm => {
                        totals = this.$h.Add(totals, this.$h.Mul(this.$h.Add(itm.product_price, itm.spec_price), itm.number));
                    })
                    this.cartList = data;
                    this.cartTotal = totals;
                    this.getIntegral();
                }
            })
        },
        async getuserInfo() {
            this.userinfo = await uni.userfun();
        },
        payBill(){
            if (!this.userinfo.mobile) {
                // #ifdef  MP-WEIXIN
                uni.showModal({
                    title: "温馨提示",
                    content: "您还未登录",
                    showCancel: true,
                    confirmText: "前往登录",
                    confirmColor: "#f02f2f",
                    success(res) {
                        if (res.confirm) {
                            uni.navigateTo({url:"/pages/my/wxLogin"})
                        }
                        
                    },
                    
                });
                // #endif
                return
            }
            let that = this
            let localInfo = uni.getStorageSync("localInfo");
            let um = localInfo.property;
            let str = um > this.actuallypaid ? "将优先使用茶币抵扣" : "将使用茶币抵扣部分支付"
            if(um > 0){
                uni.showModal({
                    title: "温馨提示",
                    content: `您的可用茶币为 ${um}，` + str,
                    showCancel: true,
                    confirmText: "确认",
                    confirmColor: "#f02f2f",
                    success(res) {
                        if (res.confirm) {
                            that.payok();
                        }
                    },
                });
            }else this.payok();
        },
        payok(){
            let Arr = []
            for (const it of this.cartList) {
                let spec = JSON.parse(it.spec)
                let product_details = spec.product_details
                Arr.push({
                    product_id: it.product_id,
                    amount: it.number,
                    product_details
                })
            }
            let type = "";
            // #ifdef  H5
			type = "H5";
			// #endif
			// #ifdef  APP
			type = "app";
			// #endif
			// #ifdef  MP-WEIXIN
			type = "jsapi";
			// #endif
            let product_detail = JSON.stringify(Arr)
            let da = {
                brand_id: this.Merchant.brand_id,
                restaurant_id: this.Merchant.restaurant_id,
                phone: this.userinfo.mobile,
                total_amount: this.actuallypaid,
                product_detail,
                trade_type: type,
            }
            post("local/merchantOrder", da).then(res => {
                if(res.data && res.data != 200){
                    let data = JSON.parse(res.data)
                    data.prepayid = data.package?data.package.split('prepay_id=')[1]:''
                    if (res.code == 0 && data.prepayid) {
                        toPayOpre.toPay(data, (rea) => {
                        if (!rea) {
                            // 支付成功
                            this.goto("/pagesB/orderingfood/orderlist")
                        } else {
                            // 支付失败
                        }
                        });
                    }
                }else if (res.code == 0 && res.data == 200) this.goto("/pagesB/orderingfood/orderlist")
            })
        }
    },
    onReady() {
        this.getuserInfo();
    },
    onLoad(da) {
        this.brand_id = da.brand_id;
        this.getMerchant(da);
        this.getCartList(da.restaurant_id);
    },
    onShow() {},
    mounted() {},
};
</script>
<style scoped lang='scss'>
page {
    min-height: 100%;
    background-color: #ECECEC;
}

.payTheBill {
    padding: 32rpx;
}

.head{
    .p2{
        font-size: 26rpx;
        color: #999;
        margin-top: 10rpx;
    }
}

.commodity {
    .li{
        margin-bottom: 8rpx;
        &:last-child{
            margin-bottom: 0;
        }
    }
    .tit {
        font-weight: bold;
        margin-bottom: 18rpx;
        .s1, .s2 {
            font-size: 30rpx;
        }
    }

    .s1, .s2 {
        display: inline-block;
        font-size: 26rpx;
    }

    .s1 {
        width: calc(100% - 240rpx);
    }

    .s2 {
        width: 120rpx;
        text-align: center;
    }
}

.money{
    .li{
        margin-bottom: 16rpx;
        &:last-child{
            margin-bottom: 0;
        }
        span{
            font-size: 30rpx;
        }
    }
    .corg{
        color: #18bb88;
        margin-left: 5rpx;
    }
}

.btnbar{
    padding: 20rpx 0;
    .btn{
        height: 80rpx;
        line-height: 80rpx;
        border-radius: 16rpx;
        background-color: #18bb88;
        text-align: center;
        color: #fff;
    }
}

.mag{
    font-size: 26rpx;
    color: #999;
}

.card {
    background-color: #fff;
    border-radius: 26rpx;
    margin-bottom: 30rpx;
    padding: 28rpx 30rpx;
    font-size: 32rpx;

    &:last-child {
        margin-bottom: 0;
    }
}
</style>