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

<template>
  <view class="container">
    <view class="list flex_r flex_ac flex_jb mar_t16">
      <view class="list_name">赠送类型:</view>
      <view class="list_text">
        <div class="option-i" @click="value = 1">
          <img src="@/static/img/xuanzhong_icon.png" v-if="value === 1" class="ico" alt="" />
          <img src="@/static/img/weixuanzhong_icon.png" v-else class="ico" alt="" />
          <span class="txt">茶宝</span>
        </div>
        <div class="option-i" @click="value = 0">
          <img src="@/static/img/xuanzhong_icon.png" v-if="value === 0" class="ico" alt="" />
          <img src="@/static/img/weixuanzhong_icon.png" v-else class="ico" alt="" />
          <span class="txt">余额</span>
        </div>
      </view>
    </view>
    <view class="list flex_r flex_ac flex_jb mar_t16" v-if="value == 0">
      <view class="list_name">当前余额:</view>
      <view class="list_text"><text>{{ userinfo.user_money }}</text></view>
    </view>
    <view class="list flex_r flex_ac flex_jb mar_t16" v-else>
      <view class="list_name">当前茶宝:</view>
      <view class="list_text"><text>{{ userinfo.cha_bao }}</text></view>
    </view>
    <view class="list flex_r flex_ac flex_jb mar_t16">
      <view class="list_name">对方账号:</view>
      <view class="list_text">
        <input type="text" v-model="id" 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">
        <input type="text" 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">{{ list[value].fee * 100 }}%</view>
    </view>
    <view class="tips">{{ list[value].tips }}</view>
    <view class="btn flex_r flex_ac flex_jc" @tap="give">立即赠送</view>
  </view>
</template>
<script>
let page = 1;
let app = getApp();
var appEv = app.$vm.$options;
import { post } from "@/request/api.js";
export default {
  data() {
    return {
      id: "",
      give_num: "",
      userinfo: undefined, // 获取用户信息

      pickerShow: false,
      value: 1,
      list: [],
    };
  },
  components: {},
  onLoad() {
    this.userinfo = uni.getStorageSync("userinfo");
    this.getGiveList();
  },
  methods: {
    getGiveList() {
      post("v1/giveRate").then((res) => {
        this.list = res.data.data;
      });
    },
    give() {
      if (this.give_num == 0) {
        appEv.errTips("赠送数量不得为0");
        return;
      } else if (
        this.give_num > Number(this.userinfo.cha_bao) &&
        this.value == 1
      ) {
        appEv.errTips("赠送数量不得超过茶宝余额");
        return;
      } else if (
        this.give_num > Number(this.userinfo.user_money) &&
        this.value == 0
      ) {
        appEv.errTips("赠送数量不得超过余额");
        return;
      } else if (this.id == "") {
        appEv.errTips("请输入赠送账号");
        return;
      } else {
        let content = "";
        if (this.value == 0) {
          content = `你将赠送给${this.id}余额${
            this.give_num
          },扣除手续费后对方将收到${
            this.$h.Mul(this.give_num, (1 - this.list[this.value].fee))
          }余额`;
        } else {
          content = `你将赠送给${this.id}茶宝${
            this.give_num
          },扣除手续费后对方将收到${
            this.$h.Mul(this.give_num, (1 - this.list[this.value].fee))
          }茶宝`;
        }
        let that = this
        uni.showModal({
          title: "提示",
          content: content,
          showCancel: true,
          success: function(res) {
            if (res.confirm) {
              if (that.value == 0) {
                that.giveMoney();
              } else {
                that.giveIntegral();
              }
            } else {}
          },
        });
      }
    },
    // 赠送茶宝
    giveIntegral() {
      let data = {
        mobile: this.id,
        number: this.give_num,
      };
      post("v1/my/give", data).then((res) => {
        if (res.code === 0) {
          this.give_num = 0;
          this.id = "";
          this.getuserInfo();
          appEv.errTips(res.msg);
        } else {
          appEv.errTips(res.msg);
        }
      });
    },

    giveMoney() {
      let data = {
        mobile: this.id,
        number: this.give_num,
      };
      post("v1/my/moneyGive", data).then((res) => {
        if (res.code === 0) {
          this.give_num = 0;
          this.id = "";
          appEv.errTips(res.msg);
          this.getuserInfo();
        } else {
          appEv.errTips(res.msg);
        }
      });
    },

    async getuserInfo() {
      this.userinfo = await uni.userfun();
    },

    OnpickerShow() {
      this.pickerShow = !this.pickerShow;
    },
    confirm(da) {
      this.value = da[0]
    }
  },
};
</script>
<style 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;

  .iconfont {
    font-size: 28rpx;
    margin-left: 12rpx;
  }
  
  .option-i {
    display: inline-block;
    margin-right: 32rpx;
    &:last-child {
      margin-right: 0;
    }
  }
  .ico {
    width: 32rpx;
    height: 32rpx;
    margin-right: 6rpx;
  }
  .txt,
  .ico {
    vertical-align: middle;
  }
}

.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>