zhangsiye/mini/pages/share/withdraw.vue

<template>
  <view class="withdraw">
    <view class="overage">
      账户剩余金额：<text class="number">{{ userInfo.income }}元</text>
    </view>
    <view class="input-box main-left cross-center">
      <view class="left">￥</view>
      <view class="center">
        <input v-model="price" type="text" placeholder="请输入提现金额">
      </view>
      <view class="right" @click="handleAll">全部</view>
    </view>

    <view class="tips">
      <view>提现金额不能小于{{ setting.withdraw_min }}元</view>
      <view>提现需要加收{{ setting.withdraw_discount }}%手续费</view>
    </view>
    <view class="type-box main-between cross-center" @click="show = true">
      <view>提现方式</view>
      <view class="main-left cross-center">
        <text>{{ selectType.name }}</text>
        <u-icon name="arrow-right" :color="$colors.infoColor" bold top="1" />
      </view>
    </view>
    <template v-if="Object.keys(selectType).length">
      <view class="input-box main-left cross-center">
        <view class="left">姓名</view>
        <view class="center">
          <input v-model="name" type="text" placeholder="请输入姓名">
        </view>
      </view>
      <view class="input-box main-left cross-center">
        <view class="left">手机号</view>
        <view class="center">
          <input v-model="phone_num" type="number" placeholder="请输入手机号">
        </view>
      </view>
      <template v-if="selectType.value === 3">
        <view class="input-box main-left cross-center">
          <view class="left">提现银行</view>
          <view class="center">
            <input v-model="bank_name" type="text" placeholder="请输入提现银行">
          </view>
        </view>
      </template>
      <view class="input-box main-left cross-center">
        <view class="left">提现账号</view>
        <view class="center">
          <input v-model="account" :type="selectType.value === 3 ?'number':'text'" placeholder="请输入提现账号">
        </view>
      </view>
    </template>

    <view class="btn" @click="handleConfirm">提交申请</view>
    <!--   选择提现方式 -->
    <u-popup
      :show="show"
      :round="20"
      closeable
      @close="handleClose"
    >
      <view class="popup-content">
        <view
          v-for="(type, index) in types"
          :key="index"
          class="type-item main-between cross-center"
          @click="handleSelect(type, index)"
        >
          <view class="left-box dir-left-nowrap cross-center">
            <view class="icon" :class="{bank: index === 2}">
              <image :src="type.icon" />
            </view>
            <text>{{ type.name }}</text>
          </view>
          <u-icon v-if="selectIndex === index" name="checkmark" color="#68EBE9" size="24" />
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'Withdraw',
  data() {
    return {
      price: '',
      account: '',
      name: '',
      phone_num: '',
      bank_name: '',
      setting: { withdraw_min: 0, withdraw_discount: 0 },
      show: false,
      types: [
        { icon: '/static/image/share/wechat.png', value: 1, name: '微信线下打款' },
        { icon: '/static/image/share/alipay.png', value: 2, name: '支付宝线下打款' },
        { icon: '/static/image/share/bank.png', value: 3, name: '银联线下打款' }
      ],
      selectIndex: 0,
      selectType: {}
    }
  },
  computed: {
    ...mapState({
      userInfo: seate => seate.user.info
    })
  },
  methods: {
    handleConfirm() {
      if (!this.price) {
        this.$u.toast(`请输入提现金额`)
        return
      }
      if (Object.keys(this.selectType).length === 0) {
        this.$u.toast(`请选择提现方式`)
        return
      }
      if (parseFloat(this.price) < parseFloat(this.setting.withdraw_min)) {
        this.$u.toast(`提现金额不能小于${this.setting.withdraw_min}元`)
        return
      }
      if (!this.name) {
        this.$u.toast(`请输入姓名`)
        return
      }
      if (!this.phone_num) {
        this.$u.toast(`请输入手机号`)
        return
      }
      if (!this.account) {
        this.$u.toast(`请输入账号`)
        return
      }
      if (parseFloat(this.price) > this.userInfo.income) {
        this.$u.toast(`提现金额不能大于可提现余额`)
        return
      }
      if (Object.keys(this.selectType).length === 0) {
        this.$u.toast(`请选择提现方式`)
        return
      }

      if (this.selectType.value === 3 && !this.bank_name) {
        this.$u.toast(`请输入提现银行`)
        return
      }

      const params = {
        price: this.price,
        type: this.selectType.value,
        account: this.account,
        name: this.name,
        phone_num: this.phone_num,
        bank_name: this.bank_name
      }
      this.$loading()
      this.$api.share.withdraw.create(params).then(res => {
        this.$hideLoading()
        this.$u.toast(`提交成功`)
        this.$api.user.info().then(res => {
          this.$store.dispatch('user/info', res.data)
          setTimeout(() => {
            this.$u.route({ type: 'redirect', url: '/pages/share/withdrawDetail?active=1' })
          }, 500)
        })
      }).catch(() => {
        this.$hideLoading()
      })
    },
    handleAll() {
      this.price = this.userInfo.income
    },
    handleSelect(item, index) {
      this.selectIndex = index
      this.selectType = item
      this.handleClose()
    },
    handleClose() {
      this.show = false
    },
    getSetting() {
      this.$loading()
      this.$api.share.setting().then(res => {
        this.$hideLoading()
        this.setting = res.data
      })
    }
  },
  onLoad() {
    this.getSetting()
  }
}
</script>

<style lang="scss" scoped>
.withdraw {
  padding: 30rpx 30rpx 80rpx;
  color: #FFFFFF;
  font-size: 38rpx;
  input{
    color: #fff;
    font-size: 38rpx;
  }
  .overage{
    font-weight: bold;
    padding-bottom: 30rpx;
    border-bottom: 1rpx solid $border-op-color;
    .number{
      color: #6eebe8;
    }
  }
  .input-box{
    padding: 30rpx 0;
    border-bottom: 1rpx solid $border-op-color;
    .left{
      width: 180rpx;
    }
    .center{
      flex: 1;
      margin-left: 10rpx;
    }
    .right{
      font-size: 28rpx;
      color: #6eebe8;
    }
  }
  .tips{
    background: $bg-op-color;
    border-radius: 20rpx;
    padding: 30rpx 20rpx;
    color: #ccc;
    margin: 30rpx 0;
    font-size: 24rpx;
  }
  .type-box{
    border-bottom: 1rpx solid $border-op-color;
    padding: 30rpx 0;
    text{
      margin-right: 10rpx;
      font-size: 32rpx;
    }
  }
  .btn{
    background: linear-gradient(270deg, #6EEBE8 0%, #FF74B9 100%);
    text-align: center;
    padding: 26rpx 0;
    width: 90%;
    margin: 60rpx auto;
    border-radius: 50rpx;
    font-size: 32rpx;
  }
  .popup-content{
    padding: 120rpx 0 40rpx;
    .type-item{
      padding: 20rpx 40rpx;
      background: transparent;
      border: none;
      text-align: unset;
      width: 100%;
      line-height: initial;
      font-size: initial;
      justify-content: space-between;
      border-top: 1rpx solid #CECFD1;
      border-radius: 0;
      &:first-child{

      }
      .left-box{
        flex: 1;
        .icon{
          width: 60rpx;
          height: 48rpx;
          transform: translateY(4rpx);
          image{
            width: 48rpx;
            height: 48rpx;
          }
          &.bank{
            image{
              width: 56rpx;
              height: 38rpx;
            }
          }
        }
        text{
          color: #777777;
          margin-left: 10rpx;
        }
      }
    }
  }
}
</style>