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="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"
        ><text>￥</text>{{ userinfo.user_money }}</view
      >
    </view>
    <view class="list flex_r flex_ac flex_jb mar_t16" v-if="index == 1">
      <view class="list_name">当前拼团金:</view>
      <view class="list_text flex_r flex_ac"
        ><text>￥</text>{{ detail.qxMoney }}</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="自定义金额" />
      </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 { get, post } from "@/request/api.js";
export default {
  data() {
    return {
      price: '',
      isSelect: 1,
      detail: {},
      array: ["余额充值"],
      index: 0,
      userinfo: undefined, // 获取用户信息
    };
  },
  onLoad: function () {
    this.userinfo = uni.getStorageSync("userinfo");
  },
  methods: {
    confimTopUp() {
      if (this.price == 0 || this.prioce == '') {
        appEv.errTips("充值不能为0");
        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("支付已取消");
            }
          });
        });
      }
    },
	getuserInfo() {
        post("/user/userinfo").then((res) => {
            if (res.code === 0) {
                uni.setStorageSync('userinfo', res.data.data);
                this.userinfo = res.data.data
            }
        });
    },
    bindPickerChange: function (e) {
      this.index = e.target.value;
      this.loadData();
    },
  },
};
</script>

<style lang="scss" scoped>
// 页面配置
page {
  background: #f4f4f4;
}

// 页面配置-end

// 页面内容
.option_con {
  width: 100%;
  overflow: hidden;
}

.way_img {
  width: 52rpx;
  height: 52rpx;
  margin-right: 8rpx;
}

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

.list_text input {
  font-size: 28rpx;
  color: #333333;
  text-align: right;
  margin-left: 20rpx;
}

.list {
  width: 100%;
  height: 86rpx;
  padding: 0 30rpx;
  box-sizing: border-box;
  background: #fff;
}

.list_text {
  font-family: "SourceHanSansCN-Bold";
  font-weight: bold;
  font-size: 36rpx;
  color: #17bb87;
}

.list_name {
  color: #333333;
  font-size: 28rpx;
  font-family: "SourceHanSansCN-Medium";
  font-weight: 500;
}

.option {
  width: 100%;
  overflow: hidden;
  padding: 20rpx 30rpx 60rpx;
  box-sizing: border-box;
  background: #fff;
}

.list_text text {
  font-family: "SourceHanSansCN-Medium";
  font-size: 22rpx;
  font-weight: 500rpx;
  color: #17bb87;
}

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

.btn {
  width: 689rpx;
  height: 92rpx;
  background: #17bb87;
  color: #fff;
  font-size: 42rpx;
  font-family: "SourceHanSansCN-Medium";
  font-weight: 500;
  margin: 132rpx auto 0;
  border-radius: 10rpx;
}

.select_name {
  width: 80%;
  text-align: end;
  font-family: SourceHanSansCN-Medium;
  color: #494949;
  font-size: 28rpx;
}

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

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