VAVABUY/pages/bank/withdraw.vue

<template>
  <Theme>
    <view class="wrap">
      <Navbar fixed border title="提现">
        <template #right>
          <navMenu :options="{ icon: 'icon-home', text: '主页' }" />
          <view class="nav_right" @click.stop="handleTo">
            <trans _t="记录" />
          </view>
        </template>
      </Navbar>
      <view class="content">
        <view class="bank">
          <view class="bank_item">
            <view class="label">
              <trans _t="可用余额" />({{ symbol.symbol }})
            </view>
            <view class="value">{{ symbol.symbol }}{{ Moneyhtml(userInfo.money) }}
            </view>
          </view>
        </view>
        <view class="bank">
          <view class="bank_item">
            <view class="label">
              <trans _t="提款金额" />({{ symbol.symbol }})
            </view>
            <view class="money_value">
              <Input v-model="money" shape="square" type="number" :placeholder="t('请输入提款金额')" />
              <view class="all" @click="all">
                <trans _t="全部" />
              </view>
            </view>
          </view>
        </view>
        <view class="edit_bank" @click="() => popupRef.open()">
          <view class="edit_label">
            <trans _t="编辑您的银行卡" />
          </view>
          <i class="icon-font icon-back"></i>
        </view>
        <view class="btn" @click="submit">
          <trans _t="提款" />
        </view>
      </view>
      <popup title="您的银行卡账户" isClose ref="popupRef">
        <template #content>
          <view class="bank_info">
            <view class="info_name">
              <view class="label">
                <trans _t="姓名" />
              </view>
              <view class="value">
                <Input v-model="bank.name" shape="square" :placeholder="t('请填写持卡人姓名')" />
              </view>
            </view>
            <view class="info_bank">
              <view class="label">
                <trans _t="银行名称" />
              </view>
              <view class="value">
                <Input v-model="bank.bank" shape="square" :placeholder="t('请填写银行名称')" />
              </view>
            </view>
            <view class="info_card">
              <view class="label">
                <trans _t="银行卡" />
              </view>
              <view class="value">
                <Input v-model="bank.card" shape="square" :placeholder="t('请填写银行卡')" />
              </view>
            </view>
          </view>
        </template>
        <template #footer>
          <view class="footer_btn" :style="{ opacity: (bank.name && bank.card && bank.card) ? 1 : .5 }"
            @click="AddBank">
            <trans _t="保存" />
          </view>
        </template>
      </popup>
    </view>
  </Theme>
</template>
<script setup>
import Navbar from "@/components/navbar";
import navMenu from "@/components/nav_menu";
import popup from "@/components/popup"
import { ref, onMounted, computed, nextTick } from "vue";
import { useUserStore, useSystemStore } from "@/store"
import Input from "@/components/input"
import { t } from "@/locale"
import { USER_BANK_ADD, USER_BANK, USER_EXTRACT } from "@/api"
import { Toast, Moneyhtml } from "@/utils";
import { onShow } from "@dcloudio/uni-app"

const useUser = useUserStore();
const useSystem = useSystemStore();
const popupRef = ref(null);
const money = ref('');
const userInfo = computed(() => useUser.getuserInfo);
const currency = computed(() => useSystem.getCurrency);
const symbol = computed(() => useSystem.getSymbol);
const bank = ref({
  name: '',
  bank: '',
  card: ''
})

const handleTo = () => {
  uni.navigateTo({ url: '/pages/bank/withdraw_list' })
}
const all = () => {
  if (userInfo.value.money && Number(userInfo.value.money)) {
    money.value = userInfo.value.money
  }
}

const AddBank = async () => {
  if (!bank.value.name && !bank.value.card && !bank.value.bank) return;
  try {
    const res = await USER_BANK_ADD(bank.value);
    bank.value = res.data
    nextTick(() => {
      popupRef.value && popupRef.value.close();
    })
  } catch (error) {
    Toast(error.msg)
  }
}

const submit = async () => {
  if (!money.value) return Toast(t('请输入提款金额'));
  if (!bank.value.id) return popupRef.value && popupRef.value.open();
  try {
    const res = await USER_EXTRACT({
      money: money.value,
      bankid: bank.value.id
    });
    Toast(res.msg, 1000).then(() => {
      setTimeout(() => {
        uni.navigateTo({ url: '/pages/bank/withdraw_list' })
      }, 1000)
    })
  } catch (error) {
    Toast(error.msg
    )
  }
}

const getBankInfo = async () => {
  try {
    const res = await USER_BANK();
    if (!res.data) return;
    bank.value = res.data[0];
  } catch (error) { }
}

onShow(() => {
  useUser.getUserInfo();
  getBankInfo();
})
</script>
<style lang="less" scoped>
@import url('@/style.less');

.wrap {
  min-height: 100vh;
  background-color: var(--bg);

  .nav_right {
    color: var(--text);
    .size(28rpx);
    margin-left: 16rpx;
  }

  .content {
    padding: 24rpx;

    .bank {
      padding: 16rpx 24rpx;
      border-radius: 16rpx;
      background-color: var(--light);
      margin-bottom: 24rpx;

      .bank_item {
        .label {
          color: var(--text);
          .size(28rpx);
          line-height: 50rpx;
          font-weight: 700;
        }

        .value {
          color: var(--black);
          font-weight: 700;
          .size(48rpx);
          line-height: 92rpx;

          text {
            .size(28rpx);
            margin-right: 12rpx;
          }
        }

        .money_value {
          .ver();
          margin-top: 16rpx;
          column-gap: 16rpx;

          /deep/ .u-input {
            border-radius: 16rpx;

            .u-input__content__field-wrapper__field {
              height: 38px;
            }
          }

          .all {
            color: var(--text);
            .size(28rpx);
            padding: 0 12rpx;
          }
        }
      }
    }

    .edit_bank {
      padding: 16rpx 24rpx;
      border-radius: 16rpx;
      background-color: var(--light);
      .flex_position(space-between);

      .edit_label {
        .size(28rpx);
        color: var(--text);
        line-height: 60rpx;
      }

      .icon-back {
        color: #7d8fb3;
        transform: rotateY(180deg);
        .size();
      }
    }

    .btn {
      height: 90rpx;
      padding: 16rpx 30rpx;
      .size(28rpx);
      border-radius: 16rpx;
      background-color: var(--black);
      color: var(--light);
      font-weight: 700;
      .flex_center();
      margin-top: 50rpx;
    }
  }

  .bank_info {
    width:100%;
    .flex();
    flex-direction: column;
    row-gap: 24rpx;

    .info_name,
    .info_bank,
    .info_card {
      .ver();

      .label {
        color: var(--text);
        .size(28rpx);
        width: 160rpx;
      }

      .value {
        flex: 1;

        /deep/ .u-input {
          border-radius: 16rpx;

          .u-input__content__field-wrapper__field {
            height: 38px;
          }
        }
      }
    }
  }

  .footer_btn {
    height: 76rpx;
    padding: 16rpx 30rpx;
    .size(28rpx);
    border-radius: 16rpx;
    background-color: var(--black);
    color: var(--light);
    font-weight: 700;
    .flex_center();
    margin-top: 50rpx;
  }
}
</style>