Client-Teapay/src/pages/account/conversion.vue

<template>
  <div class="conversion">
    <view class="list flex_r flex_ac flex_jb mar_t16">
      <view class="list_name">可转化云宝:</view>
      <view class="list_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">
        <input
          type="number"
          v-model="give_num"
          placeholder="请输入需要转化的云宝"
          placeholder-style="color:#ddd;"
        />
      </view>
    </view>

    <view class="list flex_r flex_ac flex_jb mar_t16">
      <view class="list_name">你将得到的茶宝:</view>
      <view class="list_text">{{ give_num * (1 - fee) || 0 }}</view>
    </view>
    <view class="tips">{{ tips }}</view>
    <view class="btn flex_r flex_ac flex_jc" @tap="exchange">立即转化</view>
  </div>
</template>
<script>
import { post } from "@/request/api.js";
let app = getApp();
var appEv = app.$vm.$options;
export default {
  name: "conversion",
  data() {
    return {
      give_num: undefined,
      userinfo: undefined, // 获取用户信息
      fee: undefined,
      tips: undefined,
    };
  },
  onLoad(option) {
    this.userinfo = uni.getStorageSync("userinfo");
    this.getMoneyChabao();
  },
  onLaunch() {},
  onShow() {},
  onHide() {},
  methods: {
    getMoneyChabao() {
      post("v1/moneyChabao").then((res) => {
        this.fee = res.data.data.fee;
        this.tips = res.data.data.tips;
      });
    },
    exchange() {
      if (this.give_num == 0) {
        appEv.errTips("赠送数量不得为0");
        return;
      } else if (this.give_num > Number(this.userinfo.user_money)) {
        appEv.errTips("转化数量不得超过云宝");
        return;
      } else {
        let content = `您将转化${this.give_num}云宝为${
          this.give_num * (1 - this.fee)
        }茶宝`;
        let that = this;
        uni.showModal({
          title: "提示",
          content: content,
          showCancel: true,
          success: function (res) {
            if (res.confirm) {
              that.turn();
            } else {
            }
          },
        });
      }
    },
    turn() {
      let data = {
        number: this.give_num,
      };
      post("v1/my/moneyTurn", data).then( async (res) => {
        if (res.code === 0) {
          this.give_num = undefined;
          this.userinfo = await uni.userfun();
          appEv.errTips(res.msg);
        } else {
          appEv.errTips(res.msg);
        }
      });
    },
  },
  computed: {},
  watch: {},
};
</script>
<style scoped lang='scss'>
// 页面配置
page {
  background: #f4f4f4;
}

// 页面配置-end

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

.list_text {
  flex: 1;
  font-family: "SourceHanSansCN-Bold";
  text-align: right;
}

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

.list_text input {
  font-size: 30rpx;
  color: #333;
  text-align: right;
  font-weight: bold;
  // margin-left: 20rpx;
}

.list_text text {
  font-family: "SourceHanSansCN-Medium";
  font-size: 36rpx;
  font-weight: bold;
  color: #17bb87;
}
.tips {
  margin-top: 100rpx;
  text-align: center;
  color: #999;
  font-size: 30rpx;
}
.btn {
  width: 689rpx;
  height: 92rpx;
  background: #17bb87;
  color: #fff;
  font-size: 42rpx;
  font-family: "SourceHanSansCN-Medium";
  font-weight: 500;
  margin: 20rpx auto 0;
  border-radius: 10rpx;
}
</style>