zsw-farm-bxg/pages/user/promotion/UserCash/index.vue

<template>
  <view class="cash-withdrawal">
    <view class="nav acea-row">
      <view
        v-for="(item, navListIndex) in navList"
        class="item font-color-red"
        @click="swichNav(navListIndex, item)"
        :key="navListIndex"
      >
        <view class="line bg-color-red" :class="currentTab === navListIndex ? 'on' : ''"></view>
        <view class="iconfont" :class="item.icon + ' ' + (currentTab === navListIndex ? 'on' : '')"></view>
        <view>{{ item.name }}</view>
      </view>
    </view>
    <view class="wrapper">
      <view :hidden="currentTab !== 0" class="list">
        <view class="item acea-row row-between-wrapper">
          <view class="name">微信号</view>
          <view class="input">
            <input placeholder="请输入微信号" v-model="post.weixin" />
          </view>
        </view>
        <view class="item acea-row row-between-wrapper">
          <view class="name">提现</view>
          <view class="input">
            <input :placeholder="'最低提现金额' + minPrice" v-model="post.money" />
          </view>
        </view>
        <view class="tip">当前可提现金额: {{ commissionCount }}</view>
        <view class="bnt bg-color-red" @click="submitted">提现</view>
      </view>
      <view :hidden="currentTab !== 1" class="list">
        <view class="item acea-row row-between-wrapper">
          <view class="name">用户名</view>
          <view class="input">
            <input placeholder="请填写您的支付宝用户名" v-model="post.name" />
          </view>
        </view>
        <view class="item acea-row row-between-wrapper">
          <view class="name">账号</view>
          <view class="input">
            <input placeholder="请填写您的支付宝账号" v-model="post.alipay_code" />
          </view>
        </view>
        <view class="item acea-row row-between-wrapper">
          <view class="name">提现</view>
          <view class="input">
            <input :placeholder="'最低提现金额' + minPrice" v-model="post.money" />
          </view>
        </view>
        <view class="tip">当前可提现金额: {{ commissionCount }}</view>
        <view class="bnt bg-color-red" @click="submitted">提现</view>
      </view>
    </view>
  </view>
</template>
<script>
import { getBank, postCashInfo } from "@/api/user";
import { required } from "@/utils/validate";
import { validatorDefaultCatch } from "@/utils/dialog";

export default {
  name: "UserCash",
  components: {},
  props: {},
  data: function() {
    return {
      navList: [
        { name: "微信", type: "weixin", icon: "icon-weixin2" },
        { name: "支付宝", type: "alipay", icon: "icon-icon34" }
      ],
      post: {
        extract_type: "weixin",
        alipay_code: "",
        money: "",
        name: "",
        bankname: "",
        cardnum: "",
        weixin: ""
      },
      currentTab: 0,
      minPrice: 0,
      banks: [],
      commissionCount: 0
    };
  },
  mounted: function() {
    this.getBank();
  },
  methods: {
    swichNav: function(index, item) {
      this.currentTab = index;
      this.post.extract_type = item.type;
    },
    getBank: function() {
      let that = this;
      getBank().then(
        res => {
          that.banks = res.data.extractBank;
          that.minPrice = res.data.minPrice;
          that.commissionCount = res.data.commissionCount;
        },
        function(err) {
          uni.showToast({
				title: err.msg || err.response.data.msg,
				icon: 'none',
				duration: 2000
			});
        }
      );
    },
    async submitted() {
      let bankname = this.post.bankname,
        alipay_code = this.post.alipay_code,
        money = this.post.money,
        name = this.post.name,
        cardnum = this.post.cardnum,
        weixin = this.post.weixin,
        that = this;
      if (
        parseFloat(money) > parseFloat(that.commissionCount) ||
        parseFloat(that.commissionCount) == 0
      ) {
        uni.showToast({
          title: "余额不足",
          icon: "none",
          duration: 2000
        });
        return;
      }
      if (parseFloat(money) < parseFloat(that.minPrice)) {
        uni.showToast({
          title: "最低提现金额" + that.minPrice,
          icon: "none",
          duration: 2000
        });
        return;
      }
      switch (that.post.extract_type) {
        case "alipay":
          try {
            await this.$validator({
              name: [required(required.message("支付宝用户名"))],
              alipayCode: [required(required.message("支付宝账号"))],
              money: [required(required.message("提现金额"))]
            }).validate({ name, alipay_code, money });
            let save = {
              extractType: that.post.extract_type,
              alipayCode: alipay_code,
              name: name,
              money: money
            };
            that.save(save);
          } catch (e) {
            return validatorDefaultCatch(e);
          }
          break;
        case "weixin":
          try {
            await this.$validator({
              weixin: [required(required.message("提现微信号"))],
              money: [required(required.message("提现金额"))]
            }).validate({ weixin, money });
            let save = {
              extractType: that.post.extract_type,
              weixin: weixin,
              money: money
            };
            that.save(save);
          } catch (e) {
            return validatorDefaultCatch(e);
          }
          break;
      }
    },
    save: function(info) {
      postCashInfo(info).then(
        res => {
          uni.showToast({
            title: res.msg,
            icon: "none",
            duration: 2000
          });
          this.router.push({ path: "/user/audit" });
        },
        err => {
          uni.showToast({
            title: err.msg || err.response.data.msg,
            icon: "none",
            duration: 2000
          });
        }
      );
    }
  }
};
</script>