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>{{$store.state.app.userInfo.account||''}}</text>
        </view>
        <view class="item">
          <text>可用余额</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: ['50元', '100元', '200元', '500元', '全部', '自定义'],
        changeMoney: -1,
        payMoney: {
          money: ''
        },
        payTimer: null,
        timeCount: 5,
      }
    },
    onLoad() {},
    onShow() {},
    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
        });
        Toast(res.msg)
      }
    },
    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: #3274F9FF;
      height: 170rpx;
      width: 100vw;
      border-radius: 0rpx 0rpx 28rpx 28rpx;
      position: absolute;
      top: 0;
      left: 0;
    }

    .card {
      width: 694rpx;
      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-between;
      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;
      }
    }
  }

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

    .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 #3274F9;
        color: #3274F9;
      }
    }

    .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: #3274F9;
      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: #3274F9;
      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>