mrr.sj.front/pages/wallet/withdrawCash.vue

<template>
  <view class="content">
    <custom-navbar
      title="提现"
      :showBack="true"
      titleColor="#333"
    ></custom-navbar>
    <view class="cash-card flex-space">
      <view class="cash-card-title">选择提现方式</view>
      <uv-radio-group
        v-model="radiovalue"
        placement="row"
        class="uvRadio"
        @change="changeRadio"
      >
        <uv-radio
          :name="item.value"
          :label="item.name"
          activeColor="rgba(232, 16, 30, 1)"
          v-for="(item, index) in radioList"
          :key="index"
        >
          <template #icon>
            <image src="/static/images/shop/pintuan/yes.png" class="radioYes">
            </image>
          </template>
        </uv-radio>
      </uv-radio-group>
    </view>
    <view class="cash-card flex-space" v-if="!isBinDing">
      <view class="cash-card-title">{{
        radiovalue == 1 ? `请绑定支付宝账号` : `请绑定银行卡号`
      }}</view>
      <view class="cash-card-text1" @click="goBinding">去绑定</view>
    </view>
    <view class="cash-card" v-else>
      <view v-if="radiovalue == 1" @click="goAlipayAccount">
        <view class="pop-border-bottom" style="padding-top: 0rpx">
          <view class="cash-card-title2">支付宝账号</view>
          <view class="cash-card-text2"
            >{{ accountObj.card_no
            }}<image
              src="/static/images/wallet/right.png"
              class="cash-card-text2-img"
          /></view>
        </view>
        <view class="pop-border-bottom">
          <view class="cash-card-title2">姓名</view>
          <view class="cash-card-text2">{{ accountObj.name }}</view>
        </view>
        <view style="padding-top: 24rpx; display: flex">
          <view class="cash-card-title2">手机号</view>
          <view class="cash-card-text2">{{ accountObj.phone }}</view>
        </view>
      </view>
      <view v-if="radiovalue == 3" @click="goAlipayAccount">
        <view class="pop-border-bottom" style="padding-top: 0rpx">
          <view class="cash-card-title2">银行卡号</view>
          <view class="cash-card-text2"
            >{{ accountObj.card_no
            }}<image
              src="/static/images/wallet/right.png"
              class="cash-card-text2-img"
          /></view>
        </view>
        <view class="pop-border-bottom">
          <view class="cash-card-title2">所属银行</view>
          <view class="cash-card-text2">{{ accountObj.bank }}</view>
        </view>
        <view class="pop-border-bottom">
          <view class="cash-card-title2">姓名</view>
          <view class="cash-card-text2">{{ accountObj.name }}</view>
        </view>
        <view class="pop-border-bottom">
          <view class="cash-card-title2">手机号</view>
          <view class="cash-card-text2">{{ accountObj.phone }}</view>
        </view>
        <view style="padding-top: 24rpx; display: flex">
          <view class="cash-card-title2">开户行</view>
          <view class="cash-card-text2">{{ accountObj.bank_name }}</view>
        </view>
      </view>
    </view>
    <view class="cash-card">
      <view class="cash-card-title">提现金额</view>
      <view class="cash-card-input">
        <uv-input
          type="digit"
          placeholder=""
          border="bottom"
          fontSize="64rpx"
          @input="onCashMoneyInput"
          v-model="queryData.cash_money"
        >
          <template v-slot:prefix>
            <text>¥</text>
          </template>
        </uv-input>
      </view>
      <view class="cash-card-text3"
        >可提现金额{{ formatPriceNumber(userInfo.usable_money) }}元</view
      >
    </view>
    <view class="cash-card">
      <view class="cash-card-title" style="margin-bottom: 30rpx">提现规则</view>
      <rich-text :nodes="textData.text"></rich-text>
    </view>

    <view class="agree_box">
      <view class="agree">
        <uv-checkbox-group
          v-model="isAgree"
          placement="row"
          shape="circle"
          class="uvRadio"
        >
          <uv-checkbox name="1" activeColor="rgba(232, 16, 30, 1)">
            <template #icon>
              <image src="/static/images/shop/pintuan/yes.png" class="radioYes">
              </image>
            </template>
          </uv-checkbox>
        </uv-checkbox-group>
        <text class="agree-text">已阅读并同意</text>
        <text class="agreement" @click="goAgreement(5)">《提现协议》</text>
      </view>

      <view class="sure-btn" @click="withdrawCash">提现</view>
    </view>

    <addPop
      v-model="popShow"
      :title="popTitle"
      :btnText="btnText"
      @goAdd="goAdd"
    ></addPop>
  </view>
</template>

<script>
import request from "@/utils/request";
import addPop from "./components/addPop.vue";
export default {
  components: {
    addPop,
  },
  data() {
    return {
      isWithdrawCash: false, //是否开始提交提现
      isAgree: [],
      isBinDing: false, //是否绑定
      accountObj: {}, //账号信息
      popTitle: "",
      btnText: "",
      radiovalue: 1, //1支付宝  2微信 3银行卡
      radioList: [
        {
          name: "支付宝",
          value: 1,
          btnText: "+ 添加支付宝账号",
          popTitle: "支付宝账号管理",
        },
        {
          name: "银行卡",
          value: 3,
          btnText: "+ 添加银行卡号",
          popTitle: "银行卡管理",
        },
      ],
      userInfo: {},
      textData: {},
      popShow: false,
      queryData: {
        cash_money: null,
        cash_type: getApp().globalData.artisanType,
      },
    };
  },
  async onLoad() {
    const systemInfo = uni.getSystemInfoSync();
    this.statusBarHeight = systemInfo.statusBarHeight;
    if (this.queryData.cash_type) {
      await this.getUserInfo();
      this.getAccount();
    }
    this.getXieyi(10);
  },
  computed: {

  },
  methods: {
    onCashMoneyInput(val) {
      if (!val) {
        this.$nextTick(() => {
          this.queryData.cash_money = "";
        });
        return;
      }
	  if (val<0) {
	    this.$nextTick(() => {
	      this.queryData.cash_money = "";
	    });
		uni.showToast({
		  title: `提现金额不能为负`,
		  icon: "none",
		  duration: 1000,
		});
	    return;
	  }

      let legalVal = val.toString();

      const maxMoney = Number(this.userInfo.usable_money) || 0;
      const currentMoney = Number(legalVal) || 0;

      if (currentMoney > maxMoney && maxMoney > 0) {
        legalVal = maxMoney.toFixed(2);
        uni.showToast({
          title: `最多可提${maxMoney}元`,
          icon: "none",
          duration: 1000,
        });
      }

      if (currentMoney > 0 && currentMoney < 0.01) {
        setTimeout(() => {
          legalVal = "0.01";
        }, 100);
        uni.showToast({
          title: "最小提现0.01元",
          icon: "none",
          duration: 1000,
        });
      }
      if (legalVal.includes(".")) {
        const decimalIndex = legalVal.indexOf(".");
        legalVal = legalVal.slice(0, decimalIndex + 3);
      }
      console.log(legalVal, "======");
      this.$nextTick(() => {
        this.queryData.cash_money = legalVal;
      });
    },

    //
    changeRadio(e) {
      this.getAccount();
    },
    //获取默认卡号
    getAccount(item) {
      if (item) {
        this.accountObj = item;
        return;
      }
      let obj = {
        user_type: this.queryData.cash_type,
        type: this.radiovalue,
        page: 1,
        limit: 1,
      };
      request.post("/user/userCard/list", obj).then((res) => {
        console.log(res, "======");
        if (res.code == 200) {
          if (res.data.list[0]) {
            this.accountObj = res.data.list[0];
            this.isBinDing = true;
          } else {
            this.accountObj = {};
            this.isBinDing = false;
          }
        }
      });
    },
    goAlipayAccount() {
      uni.navigateTo({
        url: `/pages/wallet/alipayAccount?type=${this.radiovalue}`,
      });
    },
    goAdd() {
      this.popShow = false;
      uni.navigateTo({
        url: `/pages/wallet/alipay?type=${this.radiovalue}`,
      });
    },
    goBack() {
      setTimeout(() => {
        const pages = getCurrentPages();
        const prevPage = pages[pages.length - 2];
        if (prevPage) {
          if (prevPage.$vm && typeof prevPage.$vm.getUserInfo === "function") {
            prevPage.$vm.getUserInfo(); // 存在则调用
          }
          if (prevPage.$vm && typeof prevPage.$vm.search === "function") {
            prevPage.$vm.search(); // 存在则调用
          }
        }
        uni.navigateBack({
          delta: 1,
        });
      }, 1500);
    },
    // 去绑定
    goBinding() {
      this.popTitle = this.radioList.find(
        (item) => item.value == this.radiovalue
      ).popTitle;
      this.btnText = this.radioList.find(
        (item) => item.value == this.radiovalue
      ).btnText;
      this.popShow = true;
    },
    async getUserInfo() {
      const type =
        this.queryData.cash_type == 1
          ? 2
          : this.queryData.cash_type == 2
          ? 3
          : "";
      const result = await request.post("/sj/user/getuser", { type });
      this.userInfo = result.data;
    },
    getXieyi(type) {
      request.post("/user/getsystemtext", { type }).then((res) => {
        console.log(res, "======");
        this.textData = res.data;
      });
    },
    goAgreement(type) {
      uni.navigateTo({
        url: "/pages/agreement/agreement?type=" + type,
      });
    },
    withdrawCash() {
      if (!this.isAgree[0]) {
        uni.showToast({
          title: "请先阅读并同意《提现协议》",
          icon: "none",
        });
        return;
      }
      if (!this.queryData.cash_money) {
        uni.showToast({
          title: "请填写提取金额",
          icon: "none",
        });
        return;
      }
      // 最小金额校验
	  let cash_money = Number(this.queryData.cash_money)
	  let usable_money = Number(this.userInfo.usable_money)
      if (cash_money < 0.01) {
        uni.showToast({ title: "最小提现0.01元", icon: "none" });
        return;
      }
      if (cash_money > usable_money) {
        uni.showToast({
          title: "可提现金额不足",
          icon: "none",
        });
        return;
      }
      if (!this.accountObj.id) {
        uni.showToast({
          title: "选择提取账户",
          icon: "none",
        });
        return;
      }
      this.queryData.cash_money = cash_money;
      this.queryData.cash_user_id = this.userInfo.id;
      this.queryData.cash_card_id = this.accountObj.id;
      this.queryData.cash_kind = this.radiovalue;
      if (this.isWithdrawCash) {
        return;
      }
      this.isWithdrawCash = true;
      request
        .post("/user/applyCashOut", this.queryData)
        .then((res) => {
          console.log(res, "======");
          if (res.code == 200) {
            uni.showToast({
              title: "提交申请成功",
              icon: "none",
            });
            // this.getUserInfo();
            this.goBack();
          }
        })
        .finally(() => {
          this.isWithdrawCash = false;
        });
    },
  },
};
</script>

<style lang="less">
.agree_box {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #fff;
  padding: 20rpx 0 20rpx 0;
}
.content {
  padding-bottom: 180rpx;
  .cash-card {
    padding: 30rpx 20rpx;
    margin: 20rpx;
    background: #ffffff;
    border-radius: 20rpx;
    .cash-card-title {
      font-weight: 500;
      font-size: 30rpx;
      color: #333333;
      line-height: 42rpx;
      text-align: left;
      font-style: normal;
    }
    .cash-card-title2 {
      font-weight: 500;
      font-size: 30rpx;
      color: #333333;
      line-height: 42rpx;
      text-align: left;
      font-style: normal;
      width: 200rpx;
    }
    .cash-card-text1 {
      font-weight: 400;
      font-size: 30rpx;
      color: #FF4767;
      line-height: 42rpx;
      text-align: left;
      font-style: normal;
      margin-left: 35rpx;
    }
    .cash-card-text2 {
      font-weight: 400;
      font-size: 30rpx;
      color: #333333;
      line-height: 42rpx;
      text-align: left;
      font-style: normal;
	      word-break: break-all;
	      flex: 1;
      .cash-card-text2-img {
        width: 8rpx;
        height: 18rpx;
        margin-left: 10rpx;
      }
    }
    .cash-card-text3 {
      margin-top: 20rpx;
      font-weight: 400;
      font-size: 24rpx;
      color: #999999;
      line-height: 33rpx;
      text-align: left;
      font-style: normal;
    }
    .pop-border-bottom {
      border-bottom: 2rpx solid #e8e8e8;
      padding: 24rpx 0;
      display: flex;
    }
    .cash-card-input {
      font-weight: 500;
      font-size: 42rpx;
      color: #333333;
      line-height: 59rpx;
      text-align: left;
      font-style: normal;
      display: flex;
      .uv-input {
        padding: 0 !important;
      }
    }
    .uvRadio {
      margin-left: 96rpx;
      display: flex;
      gap: 60rpx;
    }
  }
  .flex-space {
    display: flex;
    align-items: center;
  }
  .agree {
    display: flex;
    justify-content: center;
    align-items: center;
    .uv-checkbox-group {
      flex: none;
    }
    .agreement {
      font-weight: 400;
      font-size: 24rpx;
      color: #848484;
      line-height: 33rpx;
      text-align: left;
      font-style: normal;
      color: rgba(46, 131, 214, 1);
    }
  }
  .sure-btn {
    margin: 20rpx 20rpx 0 20rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 710rpx;
    height: 108rpx;
    background: linear-gradient(180deg, #f52540 0%, #FF4767 100%);
    border-radius: 55rpx;
    font-weight: 400;
    font-size: 42rpx;
    color: #ffffff;
    line-height: 59rpx;
    text-align: left;
    font-style: normal;
  }
}

.radioYes {
  width: 24rpx;
  height: 16rpx;
}
</style>