discounts-minapp/invite/wallet/withdraw.vue

<template>
  <view class="page">
    <view class="card">

      <view class="input">
        <view class="prefix">￥</view>
        <view class="inner">
          <u-input border="none" v-model="price" :fontSize="30" type="digit" placeholder="请输入提现金额"></u-input>
        </view>
        <view class="text" @click="getAll">
          全部提现
        </view>
      </view>
      <view class="amount">可提现金额：{{ currency(amount, {
        symbol: '￥',
        fromCents: true
      }).format() }}</view>

      <view class="title">
        提现至微信
      </view>

      <view class="info">
        <text>
          余额提现至微信钱包，提现限额200元/日
          次日00:00恢复提现额度
        </text>
      </view>

    </view>
    <view class="btn">
      <u-button color="#1F1F1F" :loading="loading" @click="submit" size="large" shape="circle">确定</u-button>
    </view>
  </view>
</template>

<script>
import { transfer, getWallet } from '@/api/wallet'
import currency from "@/utils/currency"
export default {
  data() {
    return {
      currency,
      amount: 0,
      walletId: '',
      price: null,
      openid: '',
      loading: false,
    };
  },
  methods: {
    submit() {
      uni.showLoading({
        title: '加载中'
      });
      this.loading = true
      if (!isNaN(this.price) && this.price > 0) {
        console.log(this.walletId)
        transfer({
          appid: 'wx3be1d6d84d46cdf7',
          openid: this.openid,
          total: this.price * 100,
          walletId: this.walletId
        }).then(
          res => {
            this.loading = false
            if (res.state == 'Success') {
              uni.showToast({
                title: '提现成功',
                icon: 'success',
                duration: 5000
              });
              this.getWallet()
              this.price = null
            }
            uni.hideLoading({ noConflict: true });
          }
        )
      } else {
        uni.showToast({
          title: '请输入正确的金额',
          icon: 'none',
          duration: 2000
        });
        this.price = null
        this.loading = false
        uni.hideLoading({ noConflict: true });
      }
    },
    getAll() {
      if (this.amount > 0) {
        this.price = this.amount / 100;
      }
    },
    getWallet() {
      getWallet().then(({ content }) => {
        if (content) {
          this.amount = content.amount
        }
      })
    }
  },
  onShow() {
    const userInfo = JSON.parse(uni.getStorageSync('userInfo'));
    this.openid = userInfo.openId
  },
  onLoad({ amount }) {
    const walletId = uni.getStorageSync('walletId');
    this.walletId = walletId;
    this.amount = amount;
  },
};
</script>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
  background-color: #F9F9F9;
  padding: 20rpx;

  .card {
    border-radius: 16rpx;
    background-color: #ffffff;
    padding: 40rpx;

    .input {
      display: flex;
      align-items: center;
      padding-bottom: 20rpx;

      .prefix {
        font-size: 80rpx;
        font-weight: bold;
        color: #333333;
      }

      .inner {
        flex: 1;
        padding: 0 20rpx;
      }

      .text {
        color: #333333;
        font-weight: bold;
        font-size: 28rpx;
      }
    }

    .amount {
      border-bottom: 1px solid #f2f2f2;
      padding-bottom: 30rpx;
      color: #AAAAAA;
    }

    .title {
      font-size: 32rpx;
      color: #333333;
      margin: 30rpx 0;
      font-weight: bold;
    }

    .info {
      font-size: 28rpx;
      color: #666666;
      line-height: 40rpx;
      margin-top: 20rpx 0 40rpx 0;
    }




  }

  .btn {
    margin: 60rpx 0;
  }


}

/deep/.u-input__content__field-wrapper__field {
  height: 80rpx !important;
}
</style>