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,
        };
    },
    methods: {
        getMerchant(da) {
            post("local/getMerchantById", da).then(res => {
                if (res.code == 0) {
                    this.Merchant = res.data;
                }
            })
        },
        getIntegral(){
            post("local/getIntegral",{type:1}).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(){
            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 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
            }
            post("local/merchantOrder", da).then(res => {
                if (res.code == 0 && res.data.prepayid) {
                    toPayOpre.toPay(res.data, (rea) => {
                      if (!rea) {
                        // 支付成功
                        this.goto("/pagesB/orderingfood/orderlist")
                      } else {
                        // 支付失败
                      }
                    });
                }
            })
        }
    },
    onReady() {
        this.getuserInfo();
    },
    onLoad(da) {
        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>