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

<template>
    <div class="discountCoupon">
        <div class="products">
            <scroll-view class="productList" scroll-x="true">
                <div class="item" v-for="(i,s) in products" :key="s" @click="ontag(s)" :class="{active:i.checked}">
                    <image :src="i.cover_url" class="p_img" mode="aspectFill" />
                    <div class="p_con">
                        <div class="t">{{ i.product_name }}</div>
                        <div class="p">{{ egralfun(i.official_price) }}</div>
                        <div class="fp">官方价￥{{ $h.Div(i.official_price, 100) }}</div>
                        <span v-if="i.checked" class="colg iconfont">&#xe62c;</span>
                    </div>
                </div>
            </scroll-view>
        </div>
        <div class="product_con">
            <div class="card">
                <div class="li flex_r flex_jb">
                    <span>购买数量</span>
                    <numbox v-model="count" :min="1" @change="countchange" />
                </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="msg" v-html="selectitem.use_explain"></div>
        </div>
        <div class="footbtn" @click="pay">立即购买</div>
    </div>
</template>
<script>
import numbox from "@/pagesB/components/number-box/number-box.vue"
import { post } from "@/request/api.js";
import { ToPayOpre } from "@/utils/reqTools.js";
let toPayOpre = new ToPayOpre();
export default {
    name: "discountCoupon",
    props: {},
    components: { numbox },
    data() {
        return {
            count: 1,
            topupBrand: {},
            products: [],
            egral: {},
            selectitem: {},
            cartTotal: 0,
            Integral: 0,
            deduction: 0,
            actuallypaid: 0,
            chabao: 0,
        };
    },
    methods: {
        getIntegral() {
            post("local/getIntegral", { type: 3 }).then(res => {
                if (res.code == 0) {
                    this.egral = res.data;
                }
            })
        },
        egralfun(va) {
            let i1 = this.egral.integral;
            let cartTotal = this.$h.Div(va, 100)
            let deduction = this.$h.Mul(cartTotal, i1).toFixed(2);
            return this.$h.Sub(cartTotal, deduction);
        },
        load(va) {
            post("local/coupon/productList", { type_name: va, type: 0 }).then(res => {
                if (res.code == 0) {
                    this.products = res.data;
                    this.ontag(0);
                }
            })
        },
        ontag(key) {
            let da = this.products;
            da.forEach(value => this.$set(value, 'checked', false));
            da[key].checked = true;
            this.selectitem = da[key];
            this.egralf();
        },
        egralf() {
            let i1 = this.egral.integral,
                i2 = this.egral.chabao;
            this.Integral = this.$h.Mul(i1, 100);
            this.cartTotal = this.$h.Mul(this.$h.Div(this.selectitem.official_price, 100), this.count)
            this.deduction = this.$h.Mul(this.cartTotal, i1);
            this.actuallypaid = this.$h.Sub(this.cartTotal, this.deduction);
            this.chabao = this.$h.Mul(this.actuallypaid, i2);
        },
        countchange(va) {
            this.count = va
            this.egralf();
        },
        pay() {
            let da = {
                type: 3,
                count: this.count,
                phone: uni.getStorageSync("userinfo").mobile,
                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 {
                            // 支付失败
                        }
                    });
                }
            })
        },
    },
    created() {
        this.getIntegral();
    },
    onLoad(da) {
        let va = uni.getStorageSync("topup_brand");
        uni.setNavigationBarTitle({ title: va.name });
        this.topupBrand = va;
        this.load(va.name);
    },
    onShow() {},
    mounted() {},
};
</script>
<style scoped lang='scss'>
.products {
    background-color: #fff;
    padding: 0 30rpx 28rpx;
    box-shadow: 4rpx 4rpx 26rpx 2rpx rgba(17, 18, 29, 0.1);
}

.productList {
    box-sizing: border-box;
    white-space: nowrap;
    background-color: rgba($color: #000, $alpha: 0.05);
    padding: 0 15rpx;
    border-radius: 16rpx;
}

.item {
    width: 380rpx;
    display: inline-block;
    background-color: #fff;
    border-radius: 15rpx;
    margin: 16rpx 15rpx;
    box-shadow: 4rpx 4rpx 26rpx 2rpx rgba(0, 0, 0, 0.15);
    vertical-align: middle;

    .p_img {
        width: 100%;
        height: 235rpx;
        border-radius: 15rpx 15rpx 0 0;
    }

    .p_con {
        padding: 8rpx 20rpx;
        position: relative;

        .t {
            font-size: 32rpx;
            white-space: pre-wrap;
            min-height: 82rpx;
            line-height: 36rpx;
        }

        .p {
            font-size: 35rpx;
            font-weight: bold;

            &:before {
                content: "￥";
                font-size: 20rpx;
            }
        }

        .fp {
            font-weight: 400;
            color: #999;
            font-size: 28rpx;
            text-decoration: line-through;
        }

        .colg {
            color: #18bb88;
            position: absolute;
            right: 28rpx;
            bottom: 20rpx;
        }
    }

    &.active {
        border: 4rpx solid #18bb88;
        box-shadow: 4rpx 4rpx 26rpx 2rpx rgba($color: #18bb88, $alpha: 0.3);

        .p_con {
            .p {
                color: #18bb88;
            }
        }
    }
}

.card {
    background-color: #fff;
    border-radius: 20rpx;
    margin-bottom: 30rpx;
    padding: 28rpx 30rpx;
    font-size: 32rpx;
    box-shadow: 4rpx 4rpx 26rpx 2rpx rgba(17, 18, 29, 0.1);

    &:last-child {
        margin-bottom: 0;
    }
}

.product_con {
    padding: 28rpx 30rpx;
}

.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>