jiqu-library-miniprogram/src/pageA/balance_transfer/index.vue

<template>
  <view class="">
    <!-- 导航栏 -->
    <u-navbar back-icon-color="#000000" title-color="#000000" :border-bottom="false">
      <view class="flex-1 text-center text-32rpx">余额转账</view>
      <view slot="right" class="pr-base text-28rpx text-primary" @tap="$u.routeAuth('/pageA/balance_transfer_details/index')"> 转账明细 </view>
    </u-navbar>
    <nav-shadow></nav-shadow>
    <view class="px-60rpx pt-100rpx">
      <view class="flex items-center text-txBase text-lg mt-60rpx">
        <view class="w-120rpx">手机号</view>
        <input
          :adjust-position="false"
          placeholder-class="text-txGray"
          class="inputHeight rounded-lg"
          v-model="phone"
          type="number"
          placeholder="请输入手机号"
        />
      </view>
      <view class="flex items-center text-txBase text-lg mt-60rpx">
        <view class="w-120rpx">金额</view>
        <input
          :adjust-position="false"
          placeholder-class="text-txGray"
          class="inputHeight rounded-lg"
          v-model="amount"
          type="number"
          placeholder="0.00"
        />
      </view>
      <view class="text-right text-txBase text-lg mt-60rpx">可转余额：{{ balance.balance }}</view>
      <view class="text-center text-txGray text-md mt-60rpx">提示：请认真填写，避免发生错误！</view>
      <view class="mt-50rpx">
        <view class="login-btn" @tap="onSubmit"> 确认转账 </view>
      </view>
    </view>
    <!-- 判断是否设置了安全密码 -->
    <cu-modal
      v-model="tipsShow"
      title="您还未设置支付密码？"
      :showCancelButton="true"
      confirmText="去设置"
      @confirm="$u.routeAuth('/pageA/reset_password/secure')"
      content="提示：请先设置后在进行操作～"
    ></cu-modal>
    <!-- 输入密码 -->
    <password-popup v-model="inputShow" @getPassword="confirm">
      <view class="text-md text-txBase text-center">向【{{ phone }}】转出余额：{{ (amount * 1).toFixed(2) }}</view>
      <view v-if="passwordError" class="text-txBase text-center text-error">密码错误</view>
    </password-popup>
  </view>
</template>
<script>
import { mcl } from '@/utils/index.js';
export default {
  data() {
    return {
      tipsShow: false,
      inputShow: false,
      passwordError: false,
      content: '你还未设置安全密码，是否立即前往设置？',
      phone: '',
      amount: '',
      min: 0,
    };
  },
  computed: {
    user() {
      return this.$store.getters.user ?? {};
    },
    balance() {
      return this.$store.getters.user?.balance ?? {};
    },
    wallet() {
      return this.$store.getters.user?.wallet ?? {};
    },
    //判断提现的金额是否大于余额
    judge() {
      return this.amount.trim() * 1 - this.balance.balance;
    },
    //判断最低金额
    minamount() {
      return this.amount.trim() * 1 - this.min * 1;
    },
  },
  methods: {
    onSubmit() {
      if (!this.phone) {
        return this.$u.toast('手机号不能为空');
      }
      if (!this.$u.test.mobile(this.phone)) {
        return this.$u.toast('手机号格式不正确');
      }
      if(this.phone==this.user.phone){
        return this.$u.toast('不能给自己转账')
      }
      if (this.minamount <= 0) {
         this.$u.toast(`转账的金额不能为0`);
      } else if (this.judge > 0) {
        this.$u.toast(`最高转账金额为${this.balance.balance}元`);
      } else {
        !this.wallet.has_password ? (this.tipsShow = true) : (this.inputShow = true);
      }
    },
    async confirm(e) {
      this.inputShow = false;
      try {
        let obj = {
          phone: this.phone,
          amount: mcl(this.amount, 100),
          wallet_password: e,
        };
        await this.$api.post('/v1/wallet/balance-transfer', obj, {
          custom: {
            loading: true,
            toast: false,
          },
        });
        this.amount = '';
        this.$store.dispatch('user/getUserInfo');
        this.$u.toast('转账成功');
        uni.redirectTo({
          url: '/pageA/balance_transfer_details/index',
        });
      } catch (err) {
        if (err.errcode == 10001) {
          this.passwordError = true;
          this.inputShow = true;
        } else {
          this.$u.toast(err.message ?? '系统繁忙，请稍后再试');
          this.inputShow = false;
        }
      }
    },
  },
};
</script>
<style>
page {
  background: #fff;
}

.inputHeight {
  border: 1rpx solid;
  @apply h-80rpx flex-1 border border-txBorder px-base ml-40rpx text-lg text-txBase;

}
</style>