tf-business/user_module/voucherPrice/components/transferPopup/index.vue

<template>
  <view class="transfer-box">
    <view class="transfer-title">
      <view>代金券转赠</view>
      <view @click="cancel">取消</view>
    </view>
    <view class="transfer-list">
      <view
        class="transfer-item"
        v-for="(item, index) in transferPriceList"
        :key="index"
        :class="idx === index ? 'act' : ''"
        @click="changeIdx(index)"
        >{{ item }}</view
      >
      <view
        class="transfer-item custom"
        :class="idx === 5 ? 'act' : ''"
        @click="changeIdx(5)"
      >
        <text>自定义数额</text>
        <input type="number" v-model="customNum" />
      </view>
    </view>
    <view class="transfer-account">
      <view class="account-title">转赠账号</view>
      <view class="account-input">
        <tui-input
          placeholder="请输入用户手机号后点击查询"
          padding="32rpx 0 32rpx 0"
          borderColor="#e7e7e7"
          :lineLeft="false"
          v-model="searchValue"
        >
          <template #right>
            <view class="query" @click="searchUser">查询</view>
          </template>
        </tui-input>
      </view>
      <view class="account-info">
        <view class="info-image">
          <image :src="buyerUserObj.headImage" />
        </view>
        <view class="info-text">
          <view class="name">{{
            buyerUserObj.wechatName || buyerUserObj.name
          }}</view>
          <view class="text" v-if="buyerUserObj.phone">
            <text>ID：{{ buyerUserObj.buyerUserId }}</text>
            <text>手机号：{{ buyerUserObj.phone || "" }}</text>
          </view>
        </view>
      </view>
    </view>
    <view class="transfer-btn">
      <view class="available"> 可用代金券：<text>{{ voucherWithdrawalIn }}</text> </view>
      <view class="btn" @click="immediatelyBtn">立即转赠</view>
    </view>
    <!--  自定义弹框组件 -->
    <modal
      :showModal="modal"
      :promptList="promptList"
      @closeModal="closeModal"
      @btnClick="backClick"
      :showBtn="true"
      showText="确认赠送"
    ></modal>
  </view>
</template>

<script>
import { getBandUserInfoApi, bandUserInfoApi } from "@/config/index";
export default {
  props: {
    voucherWithdrawalIn: {
      type: String || Number,
      default: 0,
    },
  },
  data() {
    return {
      //  激活态
      idx: "",
      //  转赠金额列表
      transferPriceList: [50, 100, 200, 1000, 2000],
      searchValue: "",
      //  转增人员信息
      buyerUserObj: {},
      //  转赠参数
      transferUser: {
        voucherNum: "",
        buyerUserId: "",
      },
      //  自定义数额
      customNum: "",
      modal: false,
      //  二次确认信息
      promptList: ["转增金额：1000", "转赠账户：15170844121"],
    };
  },
  methods: {
    //  查询用户
    async searchUser() {
      if (this.searchValue == "") {
        this.$showToast("请输入用户手机号后点击查询");
        return;
      }
      //  手机正则校验
      const phoneCodeVerification = /^[1][3-9][0-9]{9}$/;
      if (!phoneCodeVerification.test(this.searchValue)) {
        this.$showToast("手机号格式为1开头11位！");
        return;
      }
      let res = await getBandUserInfoApi({ numPhone: this.searchValue });
      console.log(res.data, Object.is(res.data, {}));
      if (Object.keys(res.data).length == 0) {
        this.$showToast("该用户不存在！");
      }
      this.buyerUserObj = res.data;
      this.transferUser.buyerUserId = res.data.buyerUserId;
    },
    //  修改激活态
    changeIdx(val) {
      this.idx = val;
    },
    //  立即转增
    immediatelyBtn() {
      let num = 0;
      if (this.idx == 5 && !this.customNum) {
        this.$showToast("请输入自定义数额且不能为0");
        return;
      }else if(this.idx === ""){
        this.$showToast("请选择需要赠送的额度");
        return
      }
      if (this.idx == 5) {
        num = this.customNum;
      } else {
        num = this.transferPriceList[this.idx];
      }
      if(Object.keys(this.buyerUserObj).length == 0){
        this.$showToast("请查询需要赠送的账户");
        return
      }
      // if(this.voucherWithdrawalIn < num){
      //   this.$showToast("抱歉，你转赠的代金券不足，请先充值代金券");
      //   return
      // }
      this.promptList = [
        "转增金额：" + num,
        "转赠账户：" + this.buyerUserObj.phone,
      ]
      this.modal = true;
    },
    //  确认赠送
    async backClick() {
      let obj = {
        voucherNum:0,
        buyerUserId:""
      }
      if (this.idx == 5) {
        obj.voucherNum = this.customNum;
      } else {
        obj.voucherNum = this.transferPriceList[this.idx];
      }
      obj.buyerUserId = this.buyerUserObj.buyerUserId;
      //  请求
      let res = await bandUserInfoApi(obj);
      console.log(res);
    },
    // 关闭二次确认弹框
    closeModal() {
      this.modal = false;
    },
    //  取消按钮
    cancel(){
      this.$emit('cancel')
    }
  },
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>