<template>
    <view class="container">
        <view class="con">
            <view class="list flex_r flex_ac">
                <view class="list_name">当前云宝:</view>
                <input class="list_input flex_grow" type="text" v-model="userinfo.user_money" readonly placeholder="当前云宝" />
            </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">
                        <image class="way_img" src="/static/weixin_icon.png" mode=""></image>
                        <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>
let app = getApp();
var appEv = app.$vm.$options;
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: undefined, // 获取用户信息
            isDisabled: false, //是否选中协议
            advertisingImg: "", //广告图片
        };
    },
    onLoad: function() {
        this.userinfo = uni.getStorageSync("userinfo");
        this.getAdvImg();
    },
    methods: {
        confimTopUp() {
            console.log(this.isDisabled, "qqqq")
            if (this.price == 0 || this.prioce == "") {
                appEv.errTips("充值不能为0");
                return;
            } else if (!this.isDisabled) {
                appEv.errTips("请阅读并同意相关协议");
                return;
            } else {
                let type = "H5";
                // #ifdef  H5
                type = "H5";
                // #endif
                // #ifdef  APP
                type = "app";
                // #endif
                // #ifdef  MP-WEIXIN
                type = "jsapi";
                // #endif
                let data = {
                    trade_type: type,
                    amount: this.price,
                };

                post("v1/user/recharge", data).then((res) => {
                    toPayOpre.toPay(res.data.data, (rea) => {
                        if (!rea) {
                            // 支付成功
                            appEv.errTips("支付成功");
                            this.price = 0;
                            this.getuserInfo();
                        } else {
                            // 支付失败
                            appEv.errTips("支付已取消");
                        }
                    });
                });
            }
        },
        getAdvImg() {
            post("v1/adImgages").then((res) => {
                if (res.code === 0) {
                    console.log(res.data.data);
                    this.advertisingImg = res.data.data;
                }
            });
        },
        async getuserInfo() {
            this.userinfo = await uni.userfun();
        },
        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: #333333;
    font-weight: "SourceHanSansCN-Medium";
    width: 130rpx;
}

.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_img {
    width: 52rpx;
    height: 52rpx;
    margin-right: 8rpx;
}

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

// 页面内容-end
</style>