OfficeApp/subpkg/withdrawDeposit/withdrawDeposit.vue

<template>
  <view class="">
    <view class="info">
      <view class="bg"></view>
      <view class="card">
        <view class="title">提现信息</view>
        <view class="item">
          <text>提现账户</text>
          <text v-if="$store.state.app.userInfo.admin_id">{{$store.state.app.userInfo.company.company_name||''}}</text>
          <text v-else>{{$store.state.app.userInfo.account||''}}</text>
        </view>
        <view class="item">
          <text>可用余额</text>
          <text>{{company_money||'0.00'}}元</text>
          <!-- <text>{{$store.state.app.userInfo.user_money||'0.00'}}元</text> -->
        </view>
      </view>
    </view>
    <view class="price">
      <view class="title">提现金额</view>
      <view class="tab">
        <view class="item" :class="index==changeMoney?'active':''" @click="changePrice(index)"
          v-for="(item, index) in priceList" :key="index">{{item}}</view>
      </view>
      <input v-if="priceList[changeMoney]=='自定义'" class="input" type="digit" placeholder="输入充值金额(元)"
        v-model="payMoney.money" />
      <button class="btn" @click="pay">申请提现</button>
    </view>
<!--    <view class="tip">
      <view class="title">备注</view>
      <view class="text">提现后将会由后台审核,审核通过后会直接往您所上传的银行卡汇款,请耐心等待,如由疑问也可拨打商城客服热线<text
          @click="copyPhone('4008888888')">4008888888</text></view>
    </view> -->
  </view>
</template>

<script>
  import { userWithdraw } from "@/api/pay.js"
  import { userInfo } from "@/api/oaUser.js"
  import { debounce, throttle } from 'lodash'
  import { Toast } from '@/libs/uniApi.js'
  export default {
    data() {
      return {
        priceList: ['10元','50元','100元','500元','1000元','5000元','全部', '自定义'],
        changeMoney: -1,
        company_money: "0.00",
        payMoney: {
          money: ''
        },
        payTimer: null,
        timeCount: 5,
      }
    },
    // 点击提现记录
    onNavigationBarButtonTap(res){
      if (res.index === 0) {
        uni.navigateTo({
          url: '/subpkg/withdrawList/withdrawList'
        })
      }
    },
    onLoad() {
      const eventChannel = this.getOpenerEventChannel();
      eventChannel.on('company_money', (e)=>{
        this.company_money = e.company_money;
      })
    },
    methods: {
      copyPhone(str = "") {
        uni.setClipboardData({
          data: str + "",
          success: (e) => {
            Toast('号码已复制')
          },
          fail: (e) => {
            Toast('复制失败')
          }
        })
      },
      changePrice(index) {
        if (this.changeMoney == index) this.changeMoney = -1;
        else this.changeMoney = index;
        if (this.priceList[index] == '自定义') this.payMoney.money = '';
        else if (this.priceList[index] == '全部') this.payMoney.money = this.$store.state.app.userInfo.user_money || 0;
        else this.payMoney.money = this.priceList[index].split('元')[0];
      },
      // 提现
      pay() {
        if (!this.payMoney.money) return Toast('请先填写提现金额!')
        if (+this.payMoney.money <= 0) return Toast('提现金额不能小于0!')
        if (+this.payMoney.money > +this.$store.state.app.userInfo.user_money) return Toast('提现金额不能大于余额!')
        if (!this.payTimer) {
          this.goApply();
          this.payTimer = setInterval(() => {
            this.timeCount--;
            if (this.timeCount <= 0) {
              clearInterval(this.payTimer);
              this.payTimer = null;
              this.timeCount = 5;
            }
          }, 1000)
        } else Toast(this.timeCount + '秒后再提现!')
      },
      // 提现
      async goApply() {
        let res = await userWithdraw({
          amount: this.payMoney.money
        });
        uni.showToast({
          icon:'success',
          title: res.msg
        })
        // 重新显示余额
        let info = this.$store.state.app.userInfo;
        this.payMoney.money = '';
        info.user_money = (info.user_money - this.payMoney.money).toFixed(2);
        this.$store.commit('setUserInfo', info);
      }
    },
    onPullDownRefresh() {
      uni.stopPullDownRefresh()
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #fff;
  }

  .info {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    height: 250rpx;

    .bg {
      background-color: $theme-oa-color;
      height: 170rpx;
      width: 100vw;
      border-radius: 0rpx 0rpx 28rpx 28rpx;
      position: absolute;
      top: 0;
      left: 0;
    }

    .card {
      width: 694rpx;
      min-height: 180rpx;
      background: #FFFFFF;
      margin-top: 38.55rpx;
      box-shadow: 0rpx 0rpx 18rpx 2rpx rgba(50, 116, 249, 0.1);
      border-radius: 14rpx 14rpx 14rpx 14rpx;
      opacity: 1;
      padding: 31.5rpx 28rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      position: absolute;
      top: 0;

      .title {
        font-size: 32rpx;
        font-weight: 600;
        color: #333333;
        padding-bottom: 10rpx;
      }

      .item {
        display: flex;
        justify-content: space-between;
        font-size: 32rpx;
        font-weight: 400;
        color: #333333;
        text:nth-child(1){
          flex-shrink: 0;
          margin-right: 18rpx;
        }
      }
    }
  }

  .price {
    display: flex;
    flex-direction: column;
    padding: 0 28rpx;
    margin-top: 50rpx;

    .title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333333;
      line-height: 39rpx;
      margin-bottom: 42rpx;
    }

    .tab {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-evenly;

      .item {
        width: 217rpx;
        height: 131rpx;
        margin-bottom: 20rpx;
        border-radius: 7rpx 7rpx 7rpx 7rpx;
        border: 2rpx solid #F5F5F5;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 32rpx;
        font-weight: 500;
        line-height: 32rpx;
      }

      .active {
        border: 2rpx solid $theme-oa-color;
        color: $theme-oa-color;
      }
    }

    .input {
      width: 100%;
      height: 112rpx;
      background: #F5F5F5;
      border-radius: 56rpx 56rpx 56rpx 56rpx;
      opacity: 1;
      padding: 0 45.56rpx;
      box-sizing: border-box;
      font-size: 28rpx;
      font-weight: 400;
      color: #333;
      line-height: 35rpx;
    }

    .btn {
      width: 694rpx;
      height: 84rpx;
      margin-top: 73.6rpx;
      background: $theme-oa-color;
      box-shadow: 0rpx 14rpx 44rpx 2rpx #E9EFF5;
      border-radius: 42rpx 42rpx 42rpx 42rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 32rpx;
      font-weight: 400;
      color: #FFFFFF;
    }
  }

  .tip {
    display: flex;
    flex-direction: column;
    padding: 0 28rpx;
    margin-top: 84rpx;

    .title {
      font-size: 32rpx;
      font-weight: 500;
      color: $theme-oa-color;
      line-height: 32rpx;
      margin-bottom: 21rpx;
    }

    .text {
      font-size: 28rpx;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.6);
      line-height: 42rpx;
      -webkit-background-clip: text;
    }
  }
</style>