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

<template>
    <div class="prepaidRefill">
        <div class="input_phone">
            <div class="flex_r flex_jb flex_ac">
                <textarea v-model="qda.phoneno" placeholder="请输入手机号" @input="inphone" @confirm="inphone" :auto-height="true" class="inp dinB" placeholder-class="inpc" />
                <div class="ico iconfont" @click="openContact">&#xe8fb;</div>
            </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.money }" v-for="(i, s) in CallingList" :key="s" @click="selectMoney(i)" >{{ i.money }}元</div>
            </div>
        </div>
        <div class="money card">
            <div class="li flex_r flex_jb">
                <span>消费金额</span>
                <span>￥{{ selectItem.custom_price == 0 ? selectItem.money : selectItem.custom_price }}</span>
            </div>
            <div class="li flex_r flex_jb">
                <span>消费券抵扣</span>
                <span class="corg">-￥{{ selectItem.custom_integral || 0 }}</span>
            </div>
            <div class="li flex_r flex_jb">
                <span>实付金额</span>
                <span>￥{{ selectItem.actual_price || 0 }}</span>
            </div>
        </div>
        <div class="money card mar_b60">
            <div class="li flex_r flex_jb">
                <span>赠送茶宝</span>
                <span>{{ selectItem.chabao || 0 }}</span>
            </div>
        </div>
        <div class="msgbar">
            <div class="tit">话费充值说明</div>
            <div class="msg_con">
                <p v-for="(i,s) in Desc" :key="s">{{ i }}</p>
            </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: {
                phoneno: "",
                cardnum: 100,
            },
            userinfo: uni.getStorageSync("userinfo"),
            gameArea: "",
            selectItem: {},
            Desc: {}, //充值说明
        };
    },
    methods: {
        openContact() {
            let that = this;
            uni.chooseContact({
                success: (res) => {
                    setTimeout(() => {
                        that.qda.phoneno = res.phoneNumber;
                        that.inphone();
                    }, 80);
                },
                fail: (err) => {
                    console.log("获取通讯录失败：", err);
                },
            });
        },
        selectMoney(va){
            this.selectItem = va
            this.qda.cardnum = va.money
            this.qda.attachment = JSON.stringify(va)
        },
        getCallingList() {
            post("local/ofpay/getMoney").then((res) => {
                if (res.code == 0) {
                    this.CallingList = res.data;
                    this.selectMoney(res.data[0]);
                    this.inphone();
                }
            });
        },
        inphone() {
            if (this.checkPhone(this.qda.phoneno)) {
                post("local/ofpay/telCheck", this.qda).then((res) => {
                    if (res.code == 0) {
                        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;
                                }
                            }
                        });
                    }
                });
            }
        },
        checkPhone(phone) {
            if (/^1[3456789]\d{9}$/.test(phone)) {
                return true;
            } else {
                return false;
            }
        },
        onpay() {
            let that = this
            let localInfo = uni.getStorageSync("localInfo");
            let um = localInfo.property;
            let str = um > this.selectItem.actual_price ? "将优先使用余额支付" : "将使用余额抵扣部分支付"
            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 type = "";
            // #ifdef  H5
			type = "H5";
			// #endif
			// #ifdef  APP
			type = "app";
			// #endif
			// #ifdef  MP-WEIXIN
			type = "jsapi";
			// #endif
            this.qda.trade_type = type
            post("local/ofpay/onlineorde", this.qda).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")
            });
        },
        getdesc() {
            post("local/ofpay/desc").then((res) => {
                if (res.code == 0) {
                    this.Desc = res.data[0];
                }
            });
        },
    },
    onLoad(da) {
        this.qda.phoneno = this.userinfo.mobile;
        this.getCallingList();
        this.getdesc();
    },
    watch: {},
    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;
    }
}
.msgbar{
    padding-bottom: 160rpx;
    .tit{
        font-size: 32rpx;
        font-weight: bold;
        margin: 80rpx 0 20rpx;
    }
    .msg_con{
        font-size: 26rpx;
        p{
            margin-bottom: 10rpx;
        }
    }
}
.card {
    background-color: #fff;
    border-radius: 16rpx;
    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;
    }
}
.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>