wip: 4.0

src/pages/admin/withdrawal/index.vue

@@ -1,100 +1,40 @@
 <script lang="ts" setup>
-import { ref, h } from "vue";
-import Taro from "@tarojs/taro";
-import { getWithdrawList, addWithdraw } from "@/api/admin";
+import {ref, h} from 'vue';
+import Taro from '@tarojs/taro';
+import {getWithdrawList, addWithdraw} from '@/api/admin';
 
-const user_info = Taro.getStorageSync("userInfo");
+const user_info = ref<any>({});
+
+const mer_info = ref<any>({});
 
 const row = ref(0);
 
+const formRef = ref();
+
 const basicData = ref({
-  num: "",
+  num: '',
 });
 
 const showPreview = ref(false);
 
+const visible1 = ref(false);
+
 const imgData = ref([
   {
-    src: "",
+    src: '',
   },
 ]);
 
-const columns = ref([
-  {
-    title: "时间",
-    key: "add_time",
-    align: "center",
-  },
-  {
-    title: "提现金额",
-    key: "integral",
-    align: "center",
-    render: (row: { integral: number }) => {
-      return h("view", {}, row.integral);
-    },
-  },
-  {
-    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 data = ref<any>([]);
 
 const pagination = ref({
   page: 1,
-  itemsPerPage: 5,
-  showPageSize: 5,
-  totalItems: 0,
-  change: (page: number) => {
-    pagination.value.page = page;
-    getData();
-  },
+  total: 0,
 });
 
-const hideFn = () => {
-  showPreview.value = false;
-};
-
 Taro.useLoad(() => {
+  user_info.value = Taro.getStorageSync('userInfo');
+  mer_info.value = Taro.getStorageSync('mer_info');
   getData();
 });
 
@@ -102,11 +42,11 @@ const getData = async () => {
   try {
     const res = await getWithdrawList({
       PageNum: pagination.value.page,
-      PageSize: pagination.value.showPageSize,
-      Bid: user_info.data.bid,
+      PageSize: 10,
+      Bid: user_info.value.data.bid,
     });
-    data.value = res.data.data || [];
-    pagination.value.totalItems = res.data.total;
+    data.value.push(...res.data.data);
+    pagination.value.total = res.data.total;
     row.value = res.data.integral || 0;
   } catch (e) {
     throw e;
@@ -115,111 +55,220 @@ const getData = async () => {
 
 const add = async () => {
   try {
-    if (Number(basicData.value.num) === 0)
-      return Taro.showToast({
-        title: "提现积分需大于0",
-        icon: "none",
-      });
-    const res = await addWithdraw({
-      Bid: user_info.data.bid,
-      Number: Number(basicData.value.num),
+    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();
+      }
     });
-    Taro.showToast({
-      title: res.msg,
-      icon: "none",
-    });
-    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>
-    <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 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>
-          当前可提现积分：
-          <text class="text-red">{{ row }}</text>
+          <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 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" />
+    <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">
-.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;
-}
+@import './index.scss';
 </style>