zhishifufei_uniapp/pages/spread/withdraw.vue

<template>
  
  <BaseContainer class="withdraw">
    <NavBar title="提现" />
    <view class="tab">
      <view
        v-for="item in tabs"
        :key="item.value"
        :class="{ on: extract_type === item.value }"
        class="item"
        @click="extract_type = item.value"
      >
        <view><i :class="item.icon"></i></view>
        <view>{{ item.name }}</view>
      </view>
    </view>
    <view class="content">
      <view class="label" v-if="extract_type == 'bank'">
        <view>持卡人</view>
        <input
          placeholder-style="color: #bbb"
          v-model.trim="name"
          type="text"
          placeholder="请填写持卡人姓名"
        />
      </view>
      <view class="label" v-if="extract_type == 'bank'">
        <view>卡号</view>
        <input
          placeholder-style="color: #bbb"
          v-model="cardnum"
          type="number"
          placeholder="请填写卡号"
        />
      </view>
      <view class="label" v-if="extract_type == 'bank'">
        <view>银行</view>
        <picker
          class="flex-auto"
          :range="extract_bank"
          range-key="bank_name"
          @change="pickerSelect"
        >
          <text :class="{ 'bank-name-value': !bankname }">
            {{ bankname || "请选择银行" }}
          </text>
        </picker>
      </view>
      <view class="label" v-if="extract_type == 'weixin'">
        <view>微信号</view>
        <input
          placeholder-style="color: #bbb"
          v-model.trim="weixin"
          type="text"
          placeholder="请填写微信号"
        />
      </view>
      <view class="label" v-if="extract_type == 'alipay'">
        <view>用户名</view>
        <input
          placeholder-style="color: #bbb"
          v-model.trim="name"
          type="text"
          placeholder="请填写您的支付宝用户名"
        />
      </view>
      <view class="label" v-if="extract_type == 'alipay'">
        <view>账号</view>
        <input
          placeholder-style="color: #bbb"
          v-model.trim="alipay_code"
          type="text"
          placeholder="请填写您的支付宝账号"
        />
      </view>
      <view class="label">
        <view>提现</view>
        <input
          placeholder-style="color: #bbb"
          type="number"
          :placeholder="`最低提现金额${extract_min_money}`"
          @input="inputMoney"
        />
      </view>
      <view class="tip">当前可提现金额: {{ brokerage_price }}</view>
      <view class="btn">
        <button class="flex flex-center" type="button" @click="withdraw">提现</button>
      </view>
    </view>
    <view :class="{ mask: dialogShow }"></view>
    <view :class="{ show: dialogShow }" class="dialog">
      <image mode="aspectFit" :src="getImgPath('/wap/first/zsff/images/withdraw.png')" />
      <view>提现申请已提交，等待人工审核</view>
      <button type="button" @click="confirm">知道了</button>
    </view>
  </BaseContainer>
</template>

<script>
import { getWithDrawData, saveWithDraw } from "@/api/spread";

const tabs = [
  {
    name: "银行卡",
    icon: "iconfont2 iconyinhangqia",
    value: "bank",
  },
  {
    name: "支付宝",
    icon: "iconfont2 iconicon34",
    value: "alipay",
  },
  {
    name: "微信",
    icon: "iconfont2 iconweixin1",
    value: "weixin",
  },
  {
    name: "余额",
    icon: "iconfont2 iconicon-test",
    value: "yue",
  },
];

export default {
  data() {
    return {
      brokerage_price: 0,
      extract_min_money: 0,
      extract_type: "bank",
      extract_bank: [],
      name: "",
      cardnum: "",
      bankname: "",
      weixin: "",
      alipay_code: "",
      money: 0,
      dialogShow: false,
      tabs,
      mer_id: 0,
      token: "",
      type:0
    };
  },
  watch: {
    extract_type(value) {
      this.money = "";
      switch (value) {
        case "bank":
          this.name = "";
          this.cardnum = "";
          this.bankname = "";
          break;
        case "alipay":
          this.name = "";
          this.alipay_code = "";
          break;
        case "weixin":
          this.weixin = "";
          break;
      }
    },
  },
  onLoad({ mer_id,type }) {
    this.mer_id = mer_id ?? 0;
    this.type = type ?? 0;
    if (mer_id) {
      for (let i = 0; i < this.tabs.length; i++) {
        if (this.tabs[i].value === "yue") {
          this.tabs.splice(i, 1);
          break;
        }
      }
    }

    this.getData();
  },
  methods: {
    getData() {
      var data = {mer_id:this.mer_id,type:this.type};
      getWithDrawData(data).then(({ data }) => {
        const { token, extract_bank, brokerage_price, extract_min_money } = data;
        Object.assign(this, {
          token,
          brokerage_price,
          extract_min_money,
          money: extract_min_money,
          extract_bank,
        });
      });
    },
    pickerSelect({ detail }) {
      const { value } = detail;
      this.bankname = this.extract_bank[value].bank_name;
    },
    async withdraw() {
      const data = {
        extract_type: this.extract_type,
      };
      if (!this.brokerage_price) {
        return this.$util.showMsg("当前可提现金额\n" + this.brokerage_price);
      }
      // 银行卡
      if (this.extract_type === "bank") {
        if (!this.extract_bank.length) {
          return this.$util.showMsg("暂无可以选择的银行\n请选择其他方式进行提现");
        }
        if (!this.name) {
          return this.$util.showMsg("请填写持卡人姓名");
        }
        if (!this.cardnum) {
          return this.$util.showMsg("请填写卡号");
        }

        try {
          const result = await this.$util.wrapFn(uni.request, {
            url: "https://ccdcapi.alipay.com/validateAndCacheCardInfo.json",
            method: "GET",
            data: {
              cardBinCheck: true,
              cardNo: this.cardnum,
            },
          });

          if (!result.data.validated) {
            return this.$util.showMsg("银行卡号错误");
          }
          if (!this.bankname) {
            return this.$util.showMsg("请选择银行");
          }
          data.name = this.name;
          data.cardnum = this.cardnum;
          data.bankname = this.bankname;
        } catch (err) {
          return this.$util.showMsg(err);
        }
      }
      // 支付宝
      if (this.extract_type === "alipay") {
        if (!this.name) {
          return this.$util.showMsg("请填写您的支付宝用户名");
        }
        if (!this.alipay_code) {
          return this.$util.showMsg("请填写您的支付宝账号");
        }
        data.name = this.name;
        data.alipay_code = this.alipay_code;
      }
      // 微信
      if (this.extract_type === "weixin") {
        if (!this.weixin) {
          return this.$util.showMsg("请填写微信号");
        }
        data.weixin = this.weixin;
      }
      if (this.money === "") {
        return this.$util.showMsg("请填写提现金额");
      }
      if (this.extract_min_money > this.money) {
        return this.$util.showMsg("最低提现金额：\n" + this.extract_min_money);
      }
      if (this.extract_min_money > this.money) {
        return this.$util.showMsg("当前可以提现金额:\n" + this.brokerage_price);
      }
      data.money = this.money;
      if (this.mer_id) {
        data.business = 1;
      }
      uni.showLoading({ mask: true });

      try {
        data.token=this.token
        data.type = this.type
        await saveWithDraw(data);
        uni.hideLoading();
        this.dialogShow = true;
      } catch (err) {
        uni.hideLoading();
        this.$util.showMsg(err);
      }
    },
    confirm() {
      this.dialogShow = false;
      uni.navigateBack({
         delta: 1
      })
    },
    inputMoney(event) {
      this.money = event.target.value = event.target.value.replace(
        /\D*(\d*)(\.?)(\d{0,2})\d*/,
        "$1$2$3"
      );
    },
  },
};
</script>

<style>
page {
  background: #ffffff;
}
</style>

<style scoped lang="scss">
.bank-name-value {
  color: #bbb;
}

/* 提现 */
.withdraw .tab {
  display: flex;
  height: 130rpx;

  box-shadow: 0 1px 30rpx rgba(0, 0, 0, 0.06);
}

.withdraw .tab .item {
  position: relative;

  flex: 1;
  cursor: pointer;
}

.withdraw .tab .item::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  width: 1px;
  background: #f0f0f0;
}

.withdraw .tab .item:first-child::before {
  display: none;
}

.withdraw .tab .item > view:first-child {
  position: relative;
  width: 40rpx;
  height: 40rpx;
  border: 1px solid #2c8eff;
  border-radius: 50%;
  margin: 19rpx auto 4rpx;
  line-height: 40rpx;
  text-align: center;

  transition: 0.3s;
}

.withdraw .tab .item > view:first-child::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  z-index: 2;
  width: 1px;
  height: 19rpx;
  background: #2c8eff;

  transform: translateX(-50%);

  transition: 0.3s;
}

.withdraw .tab .item > view:last-child {
  margin-top: 4rpx;
  font-size: 26rpx;
  line-height: 37rpx;
  text-align: center;
  color: #2c8eff;
}

.withdraw .tab .iconfont2 {
  font-size: 20rpx;
  color: #2c8eff;
}

.withdraw .tab .item.on > view:first-child {
  margin-top: 40rpx;
  background: #2c8eff;

  .iconfont2 {
    color: #ffffff;
  }
}

.withdraw .tab .item.on > view:first-child::before {
  height: 40rpx;
}

.withdraw .tab .item.on .iconfont {
  color: #ffffff;
}

.withdraw .content {
  margin-top: 9rpx;
}

.withdraw .content .label {
  position: relative;

  display: flex;
  padding: 32rpx 30rpx;
}

.withdraw .content .label::after {
  content: "";
  position: absolute;
  right: 30rpx;
  bottom: 0;
  left: 30rpx;
  z-index: 2;
  height: 1px;
  background: #eeeeee;
}

.withdraw .content .label view {
  width: 183rpx;
  font-size: 30rpx;
  line-height: 42rpx;
  color: #333333;
}

.withdraw .content input {
  flex: 1;
  min-width: 0;
  font-size: 30rpx;
}

.withdraw .tip {
  padding: 23rpx 30rpx 56rpx;
  font-size: 26rpx;
  line-height: 37rpx;
  color: #999999;
}

.withdraw .tip.center {
  padding-bottom: 0;
  text-align: center;
}

.withdraw .btn {
  padding: 0 30rpx;
}

.withdraw .btn button {
  width: 100%;
  height: 90rpx;
  border-radius: 45rpx;
  background: #2c8eff;
  font-size: 32rpx;
  color: #ffffff;
}

.withdraw .dialog {
  position: fixed;
  top: 50%;
  right: 75rpx;
  left: 75rpx;
  z-index: 56;
  display: none;
  max-height: 90%;
  padding: 56rpx 60rpx;
  border-radius: 16rpx;
  background-color: #ffffff;

  transform: translateY(-50%);
  text-align: center;
  font-size: 32rpx;
  line-height: 45rpx;
  color: #282828;
  opacity: 0;
}

.withdraw .dialog.show {
  display: block;
  opacity: 1;
}

.withdraw .dialog image {
  width: 250rpx;
  height: 180rpx;
  margin-bottom: 49rpx;
  vertical-align: middle;
  object-fit: contain;
}

.withdraw .dialog button {
  width: 100%;
  height: 86rpx;
  border-radius: 43rpx;
  margin-top: 59rpx;
  background-color: #2c8eff;
  font-size: 32rpx;
  color: #ffffff;
  height: 86rpx;
}
</style>