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

<template>
  <view class="container">
    <!-- <view class="list flex_r flex_ac flex_jb mar_t16">
      <view class="list_name">充值类型:</view>
      <view class="title_select">
        <picker @change="bindPickerChange" :value="index" :range="array">
          <view class="flex_r flex_ac flex_je" style="width: 300rpx">
            <view class="select_name">{{ array[index] }}</view>
            <image
              style="width: 25rpx; height: 25rpx; margin-left: 15rpx"
              src="/static/down.png"
              mode=""
            >
            </image>
          </view>
        </picker>
      </view>
    </view> -->
    <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_radio select_way"></view> -->
          <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>
        <!-- <input
          class="list_input flex_grow"
          type="text"
          v-model="price"
          placeholder="请输入充值金额"
        /> -->
      </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>
          <navigator url="/pages/agreement/privacy" hover-class="li_hover"
            ><text>《充值协议》</text></navigator
          >
        </checkbox-group>
      </div>
      <!-- <view class="privacy">
				<navigator url="/pages/agreement/privacy" hover-class="li_hover"><text>查看《隐私协议》</text></navigator>
			</view> -->

      <view class="btn flex_r flex_ac flex_jc" @tap="confimTopUp"
        >立即充值</view
      >
      <view>
        <image class="adv_img" :src="advertisingImg" ></image>
      </view>
    </view>

    <!-- <view class="list flex_r flex_ac flex_jb mar_t16" v-if="index == 0">
      <view class="list_name">当前余额:</view>
      <view class="list_text flex_r flex_ac flex_je"
        ><text>￥</text>{{ userinfo.user_money }}</view
      >
    </view>
    <view class="list flex_r flex_ac flex_jb mar_t16">
      <view class="list_name">充值金额:</view>
      <view class="list_text flex_r flex_ac">
        <input
          type="text"
          v-model="price"
          placeholder="自定义金额"
          placeholder-style="color:#ddd;"
        />
      </view>
    </view>

    <view class="option flex_c mar_t16">
      <view class="list_name">充值方式</view>
      <view class="option_con flex_r flex_ac flex_jb mar_t16">
        <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
          class="way_radio"
          :class="isSelect == 1 ? 'select_way' : ''"
        ></view>
      </view>
    </view>

    <view class="btn flex_r flex_ac flex_jc" @tap="confimTopUp">立即充值</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 {
        // #ifdef  H5
        let type = "H5";
        // #endif
        // #ifdef  APP
        let type = "app";
        // #endif
        // #ifdef  MP-WEIXIN
        let type = "jsapi";
        // #endif
        let data = {
          trade_type: type,
          amount: this.price,
        };

        post("/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("/adImgages").then((res) => {
        if (res.code === 0) {
          console.log(res.data.data);
          this.advertisingImg = res.data.data;
        }
      });
    },
    getuserInfo() {
      post("/user/userinfo").then((res) => {
        if (res.code === 0) {
          uni.setStorageSync("userinfo", res.data.data);
          this.userinfo = res.data.data;
        }
      });
    },
    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>