Client-Teapay/src/pagesB/prepaidRefill/index.vue

<template>
    <div class="prepaidRefill">
        <div class="input_phone flex_r flex_jb flex_wrap">
            <textarea
                v-model="qda.phoneno"
                placeholder="请输入手机号"
                class="inp dinB"
                :auto-height="true"
                @input="inphone"
                @blur="inphone"
                @confirm="inphone"
                placeholder-class="inpc"
            />
            <div class="ico iconfont" @click="openContact">&#xe8fb;</div>
            <div class="phonemsg" v-if="gameArea">{{ gameArea }}</div>
        </div>
        <div class="items">
            <div class="tit">充话费</div>
            <div class="li flex_r">
                <div
                    :class="{ li_it: 1, active: qda.cardnum == i }"
                    v-for="(i, s) in CallingList"
                    :key="s"
                    @click="qda.cardnum = i"
                >
                    {{ i }}元
                </div>
            </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 mar_b60">
            <div class="li flex_r flex_jb">
                <span>赠送茶宝</span>
                <span>{{ chabao || 0 }}</span>
            </div>
        </div>
        <div class="footbtn" @click="onpay">立即支付</div>
    </div>
</template>

<script>
import { ToPayOpre } from "@/utils/reqTools.js";
let toPayOpre = new ToPayOpre();
import { post } from "@/request/api.js";
export default {
    name: "prepaidRefill",
    props: {},
    components: {},
    data() {
        return {
            CallingList: [], //可充话费列表
            qda: {
                cardnum: 100,
            },
            isvalid: false,
            userinfo: uni.getStorageSync("userinfo"),
            gameArea: "",

            ratio: {},
            cartTotal: 0,
            Integral: 0,
            deduction: 0,
            actuallypaid: 0,
            chabao: 0,
        };
    },
    methods: {
        openContact() {
            let that = this;
            uni.chooseContact({
                success: (res) => {
                    if (that.checkPhone(res.phoneNumber)) {
                        that.qda.phoneno = res.phoneNumber;
                    }
                },
                fail: (err) => {
                    console.log("获取通讯录失败：", err);
                },
            });
        },
        getCallingList() {
            post("local/ofpay/getMoney").then((res) => {
                if (res.code == 0) {
                    this.CallingList = res.data;
                    this.qda.cardnum = res.data[0];
                    this.inphone();
                }
            });
        },
        inphone() {
            if (this.checkPhone(this.qda.phoneno)) {
                post("local/ofpay/telCheck", this.qda).then((res) => {
                    if (res.code == 0) {
                        this.isvalid = true;
                        post("local/ofpay/telQuery", this.qda).then((res) => {
                            if (res.code == 0) {
                                if (res.data.error_code == 0) {
                                    this.gameArea = res.data.result.game_area;
                                    this.getIntegral();
                                }
                            }
                        });
                    } else this.isvalid = false;
                });
            }
        },
        checkPhone(phone) {
            if (/^1[3456789]\d{9}$/.test(phone)) {
                return true;
            } else {
                return false;
            }
        },
        getIntegral() {
            post("local/getIntegral", { type: 6 }).then((res) => {
                if (res.code == 0) {
                    this.ratio = res.data;
                    this.computef();
                }
            });
        },
        computef() {
            let { integral, chabao } = this.ratio;
            let i1 = integral,
                i2 = chabao;
            this.cartTotal = this.qda.cardnum;
            this.Integral = this.$h.Mul(i1, 100);
            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).toFixed(2);
        },
        onpay() {
            post("local/ofpay/onlineorde", this.qda).then((res) => {
                if (res.code == 0) {
                    toPayOpre.toPay(res.data, (rea) => {
                        if (!rea) {
                            // 支付成功
                            this.goto("/pagesB/orderingfood/orderlist");
                        } else {
                            // 支付失败
                        }
                    });
                }
            });
        },
    },
    onLoad(da) {
        this.qda.phoneno = this.userinfo.mobile;
        this.getCallingList();
    },
    watch: {
        'qda.cardnum': {
            immediate: true,
            deep: true,
            handler(va) {
                this.computef();
            }
        }
    },
    onShow() {},
    mounted() {},
};
</script>

<style scoped lang='scss'>
.prepaidRefill {
    min-height: 100vh;
    background-color: #fff;
    padding: 28rpx 32rpx;
}
.input_phone {
    border-bottom: 1rpx solid rgba($color: #000, $alpha: 0.15);
    padding: 12rpx 16rpx;
    margin-bottom: 60rpx;
    .inp {
        font-size: 40rpx;
    }
    .ico{
        font-size: 50rpx;
        font-weight: bold;
    }
    .phonemsg {
        width: 100%;
        font-size: 24rpx;
        margin-top: 12rpx;
        color: #666;
    }
}
.items {
    margin-bottom: 60rpx;
    .tit {
        font-size: 26rpx;
        color: #666;
        margin-bottom: 20rpx;
    }
    .li {
        display: grid;
        justify-content: space-between;
        grid-template-columns: repeat(auto-fill, 210rpx);
    }
    .li_it {
        font-size: 38rpx;
        font-weight: 600;
        width: 210rpx;
        text-align: center;
        height: 120rpx;
        line-height: 120rpx;
        border-radius: 12rpx;
        border: 1rpx solid rgba($color: #000, $alpha: 0.15);
        margin-bottom: 16rpx;
        color: #555;
        &.active {
            color: #18bb88;
            border-color: #18bb88;
            box-shadow: 4rpx 4rpx 16rpx 10rpx rgba($color: #18bb88, $alpha: 0.1);
        }
    }
}
.money {
    .li {
        margin-bottom: 16rpx;

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

        span {
            font-size: 30rpx;
        }
    }

    .corg {
        color: #18bb88;
        margin-left: 12rpx;
    }
}
.card {
    background-color: #fff;
    border-radius: 16rpx;
    margin-bottom: 30rpx;
    padding: 28rpx 30rpx;
    font-size: 32rpx;
    box-shadow: 4rpx 4rpx 16rpx 10rpx rgba($color: #000, $alpha: 0.15);

    &:last-child {
        margin-bottom: 0;
    }
}
.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>
<style lang='scss'>
.prepaidRefill {
    .inpc {
        font-size: 34rpx;
    }
}
</style>