Client-Teapay/src/pages/top-up/index.vue

<template>
    <view class="container">
        <view class="con">
            <view class="list flex_r flex_ac" v-if="type == 'local'">
                <view class="list_name">当前余额：</view>
                <span>{{localInfo.property}}</span>
            </view>
            <view class="list flex_r flex_ac" v-else>
                <view class="list_name">当前云宝：</view>
                <span>{{userinfo.user_money}}</span>
            </view>
            <view class="list flex_r flex_ac">
                <view class="list_name">充值金额：</view>
                <input class="list_input flex_grow" type="text" v-model="price" placeholder="请输入充值金额" />
            </view>
            <view class="list flex_r flex_ac">
                <view class="list_name">支付方式：</view>
                <view class="flex_r flex_ac">
                    <view class="way_con flex_r flex_ac">
                        <span class="iconfont icow">&#xe650;</span>
                        <view class="way_text">微信支付</view>
                    </view>
                </view>
            </view>
            <div class="checkbox-box flex_r flex_ac">
                <checkbox-group @change="checkboxChange" class="flex_r flex_ac">
                    <label class="checkbox flex_r flex_ac">
                        <checkbox class="checkboxCom" value="agree" />
                        <view>我同意</view>
                    </label>
                    <span @click="goto('/pages/agreement/index',{tit:'充值协议',type:28})" class="hover_a">《充值协议》</span>
                </checkbox-group>
            </div>
            <view class="btn flex_r flex_ac flex_jc" @tap="confimTopUp">立即充值</view>
            <view>
                <image class="adv_img" :src="advertisingImg"></image>
            </view>
        </view>
    </view>
</template>
<script>
import { ToPayOpre } from "@/utils/reqTools.js";
var toPayOpre = new ToPayOpre();
import { post } from "@/request/api.js";
export default {
    data() {
        return {
            price: "",
            isSelect: 1,
            detail: {},
            array: ["云宝充值"],
            index: 0,
            userinfo: uni.getStorageSync("userinfo"), // 获取用户信息
            localInfo: uni.getStorageSync("localInfo"), // 获取数智生活用户信息
            isDisabled: false, //是否选中协议
            advertisingImg: "", //广告图片

            type: undefined
        };
    },
    onLoad(e) {
        this.type = e.type
        this.getAdvImg();
    },
    methods: {
        confimTopUp() {
            let that = this
            if (!this.price) {
                this.$toast("充值不能为0");
                return;
            } else if (!this.isDisabled) {
                this.$toast("请阅读并同意相关协议");
                return;
            } else {
                let trade_type = "";
                // #ifdef  H5
                trade_type = "H5";
                // #endif
                // #ifdef  APP
                trade_type = "app";
                // #endif
                // #ifdef  MP-WEIXIN
                trade_type = "jsapi";
                // #endif
                let data = {
                    type: this.type == "local" ? 2 : 1,
                    trade_type: trade_type,
                    amount: this.price,
                };

                post("v1/user/recharge", data).then((res) => {
                    toPayOpre.toPay(res.data.data, (rea) => {
                        if (!rea) {
                            // 支付成功
                            this.$toast("支付成功");
                            that.$set(that,"price","");
                            if(that.type == "local") that.getLU();
                            else that.getuserInfo();
                        } else {
                            // 支付失败
                            this.$toast("支付已取消");
                        }
                    });
                });
            }
        },
        getAdvImg() {
            post("v1/adImgages").then((res) => {
                if (res.code === 0) {
                    this.advertisingImg = res.data.data;
                }
            });
        },
        async getuserInfo() {
            this.userinfo = await uni.userfun();
        },
        async getLU() {
            this.localInfo = await uni.Luserfun()
        },
        checkboxChange(e) {
            var value = e.detail.value;
            if (value.length == 0) {
                this.isDisabled = false
            } else {
                this.isDisabled = true
            }
        },
    },
};
</script>
<style lang="scss" scoped>
// 页面配置
page {
    background: #f4f4f4;
}

// 页面配置-end

// 页面内容
.con {
    width: 1005;
    overflow: hidden;
    padding: 30rpx;
    box-sizing: border-box;
}

.adv_img {
    margin-top: 20px;
    width: 690rpx;
    // height: 100%;
    height: 345rpx;
}

.list {
    width: 100%;
    height: 100rpx;
    border-bottom: 3rpx solid rgba(0, 0, 0, 0.12);
}

.list_name {
    font-size: 28rpx;
    color: #333;
    font-weight: "SourceHanSansCN-Medium";
    width: 150rpx;
}

.list_input {
    width: calc(100% - 140rpx);
    margin-left: 10rpx;
    height: 100%;
    font-size: 28rpx;
    color: #333;
}

.btn {
    width: 395rpx;
    height: 95rpx;
    border-radius: 10rpx;
    background: #17bb87;
    color: #fff;
    font-size: 34rpx;
    font-family: "SourceHanSansCN-Medium";
    margin: 100rpx auto 0;
}

// 提交内容-end

.checkbox-box {
    margin-top: 60rpx;
    margin-bottom: -20px;
    font-size: 28rpx;
}

.checkbox-box text {
    /* color: #07d; */
    /* color: #44A92F; */
    color: #44a92f;
}

.checkbox-box .checkbox .checkboxCom {
    transform: scale(0.84);
    -webkit-transform: scale(0.84);
}

.way_radio {
    width: 39rpx;
    height: 35rpx;
    background: url("~@/static/sgin/weixuanzhong_icon.png");
    background-repeat: no-repeat;
    background-size: 35rpx 35rpx;
    background-position: center center;
}

.select_way {
    background: url("~@/static/sgin/xuanzhong_icon.png");
    background-repeat: no-repeat;
    background-size: 39rpx 35rpx;
    background-position: center center;
}

.way_text {
    font-size: 22rpx;
    color: #333333;
    font-family: "SourceHanSansCN-Medium";
}

.icow{
    color: #00C800;
    margin-right: 6rpx;
}
.way_text,.icow{
    vertical-align: middle;
}
// 页面内容-end
</style>