Client-Teapay/src/pagesB/directCharge/payment.vue

<template>
    <div class="payment">
        <div class="headbar card">
            <div class="l">
                <div class="tit">充值账号</div>
                <input class="inp" v-model="phone" :placeholder="`请输入${topupBrand.name}账号`" />
            </div>
            <img class="r_logo" :src="topupBrand.img" alt="">
            <div class="msg">* 请确保充值账号无误，充值成功后不支持退换</div>
        </div>
        <div class="tags flex_r flex_jse">
            <div :class="['tab',checked==i?'checked':'']" v-for="(i,s) in tags" :key="s" @click="checked = i">{{ i }}</div>
        </div>
        <div class="product clearfix">
            <div :class="{li:true,checked:i.checked}" v-for="(i,s) in products" :key="s" @click="ontag(s)" v-show="showfun(i)">
                <div class="p1">{{ i.product_name.replace(checked,"") }}</div>
                <div class="p" v-if="i.custom_price>0">{{ $h.Div(i.custom_price, 100) }}</div>
                <div class="p" v-else>{{ $h.Div(i.official_price, 100) }}</div>
            </div>
        </div>
        <template v-if="cartTotal>0">
            <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" v-if="selectitem.custom_price==0">{{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>
        </template>
        <div class="msg" v-html="selectitem.use_explain"></div>
        <div class="footbtn" @click="pay">立即充值</div>
    </div>
</template>

<script>
import { ToPayOpre } from "@/utils/reqTools.js";
let toPayOpre = new ToPayOpre();
import { post } from "@/request/api.js";
import { Asc } from "@/utils/myfun.js";
export default {
    name: "payment",
    props: {},
    components: {},
    data() {
        return {
            phone: "",
            products: [],
            tags: [],
            checked: "",
            selectitem: {},
            egral: {},
            cartTotal: 0,
            Integral: 0,
            deduction: 0,
            actuallypaid: 0,
            chabao: 0,
            topupBrand: {},
        };
    },
    methods: {
        showfun(da){
            return this.checked ? this.checked == da.next_name : true
        },
        getIntegral(){
            post("local/getIntegral",{type:3}).then(res=>{
                if (res.code == 0) {
                    this.egral = res.data;
                }
            })
        },
        load(va){
            post("local/coupon/productList",{type_name:va,type:1}).then(res=>{
                if (res.code == 0) {
                    let a = res.data.next_name, b = res.data.product_list;
                    Asc(b,"official_price"); //原价升序
                    if(a.length) this.checked = a[0];
                    this.tags = a;
                    this.products = b;
                }
            })
        },
        ontag(key) {
            let da = this.products;
			da.forEach(value => this.$set(value, 'checked', false));
			da[key].checked = true;
            this.selectitem = da[key];
            this.egralfun()
        },
        egralfun(){
            let i1 = this.egral.integral, i2 = this.egral.chabao;
            this.Integral = this.$h.Mul(i1,100);
            if(this.selectitem.custom_price > 0){
                this.cartTotal = this.$h.Div(this.selectitem.custom_price, 100);
                this.deduction = this.$h.Mul(this.selectitem.custom_integral, 1);
            }
            else {
                this.cartTotal = this.$h.Div(this.selectitem.official_price, 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);
        },
        pay() {
            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 da = {
                type: 2,
                count: 1,
                phone: this.phone,
                product_no: this.selectitem.product_no,
            }
            post("local/coupon/addOrder", da).then(res => {
                if (res.code == 0 && res.data.prepayid) {
                    toPayOpre.toPay(res.data, (rea) => {
                        if (!rea) {
                            // 支付成功
                            this.goto("/pagesB/orderingfood/orderlist")
                        } else {
                            // 支付失败
                        }
                    });
                }else if (res.code == 0 && res.data == 200) this.goto("/pagesB/orderingfood/orderlist")
            })
        },
    },
    onLoad(da) {
        this.getIntegral()
        let va = uni.getStorageSync("topup_brand");
        uni.setNavigationBarTitle({ title: va.name });
        this.load(va.name);
        this.topupBrand = va;
    },
    onShow() {},
    mounted() {},
};
</script>

<style scoped lang='scss'>
.payment{
    padding: 30rpx 30rpx 160rpx;
}
.headbar{
    .l,.r_logo{
        display: inline-block;
        vertical-align: top;
    }
    .l{
        width: calc(100% - 150rpx);
        .tit{
            font-size: 30rpx;
            font-weight: 600;
            margin-bottom: 20rpx;
        }
        .inp{
            font-size: 33rpx;
            // font-weight: bold;
            padding: 8rpx 0;
        }
    }
    .r_logo{
        width: 150rpx;
        height: 150rpx;
        border-radius: 10rpx;
        // border: 1px  solid #e5e5e5;
        box-sizing: border-box;
    }
    .msg{
        border-top: 1px solid #e5e5e5;
        margin-top: 12rpx;
        padding: 10rpx 0 2rpx;
        font-size: 24rpx;
        color: #999;
    }
}
.tags{
    padding: 15rpx 0;
   .tab{
        // width: 180rpx;
        min-width: 100rpx;
        text-align: center;
        font-size: 30rpx;
        font-weight: 600;
        color: #999;
        padding: 6rpx 0;
        &.checked{
            color: #333;
            position: relative;
            border-bottom: 6rpx solid #18bb88;
        }
   } 
}
.product{
    margin: 0 -15rpx 30rpx;
    .li{
        width: calc(50% - 30rpx);
        background-color: #fff;
        margin: 12rpx 15rpx;
        padding: 20rpx 30rpx;
        text-align: center;
        float: left;
        border-radius: 22rpx;
        border: 4rpx solid #fff;
        &.checked{
            border: 4rpx solid #18bb88;
        }
    }
    .p1{
        font-size: 28rpx;
        margin-bottom: 12rpx;
    }
    .p{
        font-size: 32rpx;
        font-weight: bold;
        color: #18bb88;
        &::before{
            content: "￥";
            font-size: 25rpx;
        }
    }
}
.card {
    background-color: #fff;
    border-radius: 26rpx;
    margin-bottom: 30rpx;
    padding: 28rpx 30rpx;
    font-size: 32rpx;
    box-shadow: 4rpx 4rpx 8rpx 4rpx rgba(0, 0, 0, 0.12);

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

.footbtn{
  width: calc(100% - 60rpx);
  height: 80rpx;
  background: #17bb87;
  border-radius: 45rpx;
  position: fixed;
  bottom: 50rpx;
  left: 30rpx;
  color: #fff;
  font-size: 36rpx;
  text-align: center;
  line-height: 80rpx;
}
</style>