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 = Taro.getStorageSync("userInfo");

const row = ref(0);

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

const showPreview = ref(false);

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

const columns = ref([
  {
    title: "时间",
    key: "add_time",
    align: "center",
  },
  {
    title: "提现金额",
    key: "integral",
    align: "center",
    render: (row: { integral: number }) => {
      return h("view", {}, row.integral / 100);
    },
  },
  {
    title: "审核状态",
    key: "status",
    align: "center",
    render: (row: { status: number }) => {
      return h(
        "view",
        {
          class: `tag ${
            row.status === 1
              ? "success"
              : row.status === 2
              ? "danger"
              : "warning"
          }`,
        },
        {
          default: () =>
            row.status === 1
              ? "已打款"
              : row.status === 2
              ? "已拒绝"
              : "待审核",
        }
      );
    },
  },
  {
    title: "备注",
    key: "img",
    align: "center",
    render: (row: { status_img: string }) => {
      return h("img", {
        class: "image",
        onClick: () => {
          imgData.value[0].src = row.status_img;
          showPreview.value = true;
        },
        src: row.status_img,
      });
    },
  },
]);

const data = ref([]);

const pagination = ref({
  page: 1,
  itemsPerPage: 5,
  showPageSize: 5,
  totalItems: 0,
  change: (page: number) => {
    pagination.value.page = page;
    getData();
  },
});

const hideFn = () => {
  showPreview.value = false;
};

Taro.useLoad(() => {
  getData();
});

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

const add = async () => {
  try {
    if (Number(basicData.value.num) === 0)
      return Taro.showToast({
        title: "提现积分需大于0",
        icon: "none",
      });
    const res = await addWithdraw({
      Bid: user_info.bid,
      Number: Number(basicData.value.num),
    });
    Taro.showToast({
      title: res.msg,
      icon: "none",
    });
    await getData();
  } catch (e) {
    throw e;
  }
};
</script>

<template>
  <view>
    <nut-form>
      <nut-form-item label="提现积分：">
        <nut-input
          v-model="basicData.num"
          class="nut-input-text"
          placeholder="请输入提现积分"
          type="text"
        />
      </nut-form-item>
      <nut-form-item>
        <view>
          当前可提现积分：
          <text class="text-red">{{ row }}</text>
        </view>
        <view style="margin-top: 10px">
          实际到账：
          <text class="text-red">{{ (row / 100).toFixed(2) }}</text>
          元
        </view>
      </nut-form-item>
      <nut-form-item>
        <nut-button block type="primary" @click="add">立即提现</nut-button>
      </nut-form-item>
    </nut-form>
    <view v-if="data.length > 0">
      <view class="data">
        <nut-table :columns="columns" :data="data"></nut-table>
        <nut-pagination
          class="pagination"
          v-model="pagination.page"
          :total-items="pagination.totalItems"
          :items-per-page="pagination.itemsPerPage"
          :show-page-size="pagination.showPageSize"
          @change="pagination.change"
          :bordered="false"
        />
      </view>
    </view>
    <nut-empty v-else description="暂无提现记录"></nut-empty>
    <!--    图片预览    -->
    <nut-image-preview :show="showPreview" :images="imgData" @close="hideFn" />
  </view>
</template>

<style lang="scss">
.text-red {
  color: red;
}

.data {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #fff;
  padding: 10px;

  .pagination {
    margin: 10px auto;
  }
}

.tag {
  width: 100%;
  padding: 5px 8px;
  color: white;
  border-radius: 8px;
  margin: 0 auto;
}

.success {
  background-color: #4fc08d;
}

.danger {
  background-color: #df3526;
}

.warning {
  background-color: #f3812e;
}

.image {
  width: 50px;
  height: 50px;
}
</style>