jdt-user/src/pages/admin/withdrawal/index.vue

<script lang="ts" setup>
import {ref, h} from 'vue';
import Taro from '@tarojs/taro';
import {getWithdrawList, addWithdraw} from '@/api/admin';

const user_info = ref<any>({});

const mer_info = ref<any>({});

const row = ref(0);

const formRef = ref();

const basicData = ref({
  num: '',
});

const showPreview = ref(false);

const visible1 = ref(false);

const imgData = ref([
  {
    src: '',
  },
]);

const data = ref<any>([]);

const pagination = ref({
  page: 1,
  total: 0,
});

Taro.useLoad(() => {
  user_info.value = Taro.getStorageSync('userInfo');
  mer_info.value = Taro.getStorageSync('mer_info');
  getData();
});

const getData = async () => {
  try {
    const res = await getWithdrawList({
      PageNum: pagination.value.page,
      PageSize: 10,
      Bid: user_info.value.data.bid,
    });
    data.value.push(...res.data.data);
    pagination.value.total = res.data.total;
    row.value = res.data.integral || 0;
  } catch (e) {
    throw e;
  }
};

const add = async () => {
  try {
    formRef.value?.validate().then(async ({valid}) => {
      if (valid) {
        const res = await addWithdraw({
          Bid: user_info.value.data.bid,
          Number: Number(basicData.value.num),
        });
        Taro.showToast({
          title: res.msg,
          icon: 'none',
        });
        basicData.value.num = '';
        await getData();
      }
    });
  } catch (e) {
    throw e;
  }
};

const rules = ref({
  num: [
    {
      message: '请填写提现积分',
      validator: (value, _) => {
        console.log(value);
        if (!value) {
          return false;
        } else {
          return true;
        }
      },
    },
    {
      message: '提现积分最低为100',
      validator: (value, _) => {
        if (Number(value) < 100) {
          return false;
        } else {
          return true;
        }
      },
    },
    {
      message: '提现积分不能大于可提现积分',
      validator: (value, _) => {
        if (Number(value) > row.value) {
          return false;
        } else {
          return true;
        }
      },
    },
  ],
});

const openPreview = item => {
  imgData.value[0].src = item.status_img;
  showPreview.value = true;
};

const closePreview = () => {
  showPreview.value = false;
  imgData.value[0].src = '';
};

Taro.usePullDownRefresh(() => {
  pagination.value.page = 1;
  getData();
  Taro.stopPullDownRefresh();
});

Taro.useReachBottom(() => {
  if (pagination.value.total === data.value.length)
    return Taro.showToast({
      title: '没有更多数据了',
      icon: 'none',
    });
  pagination.value.page++;
  getData();
});
</script>

<template>
  <view>
    <view class="card">
      <view class="container">
        <view class="">
          <view class="font-bold text-[35px]">{{ row }}</view>
          <view class="text-[25px] mt-2">可提现积分</view>
        </view>
        <view class="line"></view>
        <view class="">
          <view class="font-bold text-[35px]">{{
            (row / 100 - (row / 100) * 0.138).toFixed(2)
          }}</view>
          <view class="text-[25px] mt-2">实际到账</view>
        </view>
      </view>
      <view class="footer">
        <text>到账方式</text>
        <!-- <text>{{
          `${mer_info.bank}(${mer_info.bank_card?.substring(
            mer_info.bank_card.length - 4,
          )})`
        }}</text> -->
        <text>银行卡汇款</text>
      </view>
    </view>
    <view class="formCard">
      <view class="flex justify-between">
        <text>积分提现</text>
        <view class="flex items-center" @click="visible1 = true">
          <image
            class="w-[25px] h-[25px]"
            src="http://p1.meituan.net/csc/5437a800f4ed4a49f14984494c1c3077994.png"></image>
          <view class="text-[#EC4443] text-[20px] ml-1">提现疑问</view>
        </view>
      </view>
      <nut-form ref="formRef" :model-value="basicData" :rules="rules">
        <nut-form-item prop="num">
          <nut-input
            v-model="basicData.num"
            class="nut-input-text"
            placeholder="请输入提现积分"
            type="text">
            <template #right>
              <text
                class="text-[#EC4443] text-[25px]"
                @tap="basicData.num = row.toString()"
                >全部</text
              >
            </template>
          </nut-input>
        </nut-form-item>
      </nut-form>
      <nut-button block type="primary" @click="add">立即提现</nut-button>
    </view>

    <view class="title">
      <view class="title-line"></view>
      <view class="title-text">提现记录</view>
    </view>

    <view class="list" v-if="data.length > 0">
      <view class="item" v-for="(item, index) in data" :key="index">
        <view class="flex justify-between items-center">
          <view class="text-[25px] text-[#9C9C9C]">到账金额</view>
          <view
            class="text-[27px]"
            :class="
              item.status === 1
                ? 'success'
                : item.status === 1
                ? 'danger'
                : 'warning'
            "
            >{{
              item.status === 1
                ? '已打款'
                : item.status === 2
                ? '已拒绝'
                : '待审核'
            }}</view
          >
        </view>
        <view>
          <view class="mt-3 mb-3 text-[35px]">￥{{ item.number }}</view>
          <view class="text-[25px] mb-1">提现积分：{{ item.integral }}</view>
          <view class="text-[25px] mb-1"
            >信息服务费：{{ item.commission }}</view
          >
          <view class="text-[25px] mb-1"
            >手续费：{{ item.commission_number }}%</view
          >
          <view class="text-[25px] mb-1">时间：{{ item.add_time }}</view>
          <view v-if="item.status === 2" class="text-[25px] text-[#9C9C9C]"
            >备注：</view
          >
          <view
            v-if="item.status === 1"
            class="text-[23px] mt-2 text-[#df3526]"
            @click="openPreview(item)"
            >点我查看回执单</view
          >
        </view>
      </view>
    </view>
    <nut-empty v-else description="暂无提现记录"></nut-empty>
    <!--    图片预览    -->
    <nut-image-preview
      :show="showPreview"
      :images="imgData"
      @close="closePreview" />

    <nut-dialog
      title="提现疑问？"
      content="这是基础弹框。"
      ok-text="我已知晓"
      :no-cancel-btn="true"
      v-model:visible="visible1">
      <template #default>
        <text>
          积分和人民币兑换比例为
          <text class="text-[#F83D3D]">100:1</text>
          平台收取<text class="text-[#F83D3D]">10%服务费</text>和<text
            class="text-[#F83D3D]"
            >0.038%手续费</text
          >
        </text>
      </template>
    </nut-dialog>
  </view>
</template>

<style lang="scss">
@import './index.scss';
</style>