wip: 4.0

2024-05-16 14:27:57 +08:00
parent b09c1d9537
commit 8f3b158032
72 changed files with 3931 additions and 2161 deletions
--- a/src/pages/users/account/index.config.ts
+++ b/src/pages/users/account/index.config.ts
@@ -1,3 +1,3 @@
 export default definePageConfig({
-  navigationBarTitleText: "我的账户",
+  navigationBarTitleText: '账户明细',
 });
--- a/src/pages/users/account/index.vue
+++ b/src/pages/users/account/index.vue
@@ -1,30 +1,31 @@
 <script lang="ts" setup>
-import { computed, ref } from "vue";
-import Taro from "@tarojs/taro";
-import * as dayjs from "dayjs";
-import { getIntegralDetail, getBeanDetail, getGiftRecord } from "@/api/user";
+import {computed, ref} from 'vue';
+import Taro from '@tarojs/taro';
+import * as dayjs from 'dayjs';
+import {getIntegralDetail, getBeanDetail, getGiftRecord} from '@/api/user';
+import {TriangleDown} from '@nutui/icons-vue-taro';

 const tabValue = ref(1);

 const tabsList = ref([
  {
-    title: "兑换明细",
+    title: '兑换明细',
    value: 1,
  },
  {
-    title: "赠送明细",
+    title: '赠送明细',
    value: 3,
  },
  {
-    title: "豆子明细",
+    title: '豆子明细',
    value: 2,
  },
  {
-    title: "活动赠送",
+    title: '活动赠送',
    value: 4,
  },
  {
-    title: "聚合积分",
+    title: '聚合积分',
    value: 5,
  },
 ]);
@@ -33,11 +34,11 @@ const computerType = computed(() => {
  return (val: number) => {
    switch (val) {
      case 5:
-        return "注册赠送";
+        return '注册赠送';
      case 6:
-        return "签到赠送";
+        return '签到赠送';
      case 7:
-        return "系统赠送";
+        return '系统赠送';
    }
  };
 });
@@ -64,8 +65,12 @@ const data = ref<DataType[]>([]);
 const userInfo = ref<any>({});

 Taro.useLoad(() => {
+  pickerVal.value = [
+    dayjs().format('YYYY-MM-DD'),
+    dayjs().format('YYYY-MM-DD'),
+  ];
  getList();
-  userInfo.value = Taro.getStorageSync("userInfo");
+  userInfo.value = Taro.getStorageSync('userInfo');
 });

 const page = ref({
@@ -86,12 +91,14 @@ const getList = async () => {
      PageNum: page.value.PageNum,
      PageSize: page.value.PageSize,
      Type: tabValue.value,
+      TimeStart: pickerVal.value[0],
+      TimeEnd: pickerVal.value[1],
    };
    if (tabValue.value === 1 || tabValue.value === 3 || tabValue.value === 5) {
      res = await getBeanDetail(newData);
    } else if (tabValue.value === 2) {
      // delete data.value.Type;
-      Reflect.deleteProperty(data.value, "Type");
+      Reflect.deleteProperty(data.value, 'Type');
      res = await getIntegralDetail(newData);
    } else if (tabValue.value === 4) {
      res = await getGiftRecord(newData);
@@ -101,41 +108,64 @@ const getList = async () => {
  } catch (error) {
    Taro.showToast({
      title: error.msg,
-      icon: "none",
+      icon: 'none',
    });
  }
 };
+
+const pickerRef = ref();
+const showPicker = ref(false);
+
+const pickerVal = ref<Array<string>>([]);
+
+const openPicker = () => {
+  showPicker.value = true;
+  pickerRef.value.scrollToDate(dayjs().format('YYYY-MM-DD'));
+};
+const choose = e => {
+  pickerVal.value = [e[0][3], e[1][3]];
+  getList();
+};
+
+const closePicker = () => {
+  showPicker.value = false;
+};
 </script>

 <template>
  <view>
-    <view class="card">
-      <view class="info">
-        <view class="left">
-          <view>
-            <view class="num">豆子: {{ userInfo.data?.pulse }}</view>
-          </view>
-          <view>
-            <view class="num">积分: {{ userInfo.data?.integral }}</view>
-          </view>
-        </view>
+    <view class="tabs-box">
+      <view
+        class="item"
+        v-for="(item, idx) in tabsList"
+        :key="idx"
+        @click="tabChange(item.value)"
+        :style="{
+          backgroundColor: item.value === tabValue ? '#ff0000' : '#F0F0F0',
+          color: item.value === tabValue ? '#fff' : '#333',
+        }">
+        <view>{{ item.title }}</view>
      </view>
    </view>
-    <scroll-view scroll-x>
-      <view class="tabs-box">
-        <view
-          v-for="item in tabsList"
-          :key="item.value"
-          @click="tabChange(item.value)"
-        >
-          <view class="text">{{ item.title }}</view>
-          <view
-            class="line"
-            :class="{ lineColor: item.value === tabValue }"
-          ></view>
-        </view>
-      </view>
-    </scroll-view>
+
+    <view
+      @click="openPicker"
+      class="pt-[20px] pb-[20px] pl-[25px] text-[30px] text-[#333] flex items-center">
+      <text>时间筛选</text>
+      <TriangleDown size="20px" color="#333" />
+    </view>
+
+    <nut-calendar
+      ref="pickerRef"
+      type="range"
+      title="时间筛选"
+      v-model:visible="showPicker"
+      :default-value="pickerVal"
+      start-date="2023-01-01"
+      end-date="2070-01-01"
+      @close="closePicker"
+      @choose="choose">
+    </nut-calendar>

    <view v-if="data.length > 0">
      <view v-if="tabValue === 1">
@@ -143,7 +173,7 @@ const getList = async () => {
          <view class="left">
            <view>订单号: {{ item.oid }}</view>
            <text class="jf">{{
-              dayjs(item.add_time).format("YYYY/MM/DD mm:ss")
+              dayjs(item.add_time).format('YYYY/MM/DD mm:ss')
            }}</text>
          </view>
          <view class="right">
@@ -205,11 +235,11 @@ const getList = async () => {
        </view>
      </view>
      <nut-pagination
+        class="mt-3"
        v-model="page.PageNum"
        :total-items="page.ItemCount"
        :items-per-page="page.PageSize"
-        @change="pageChange"
-      />
+        @change="pageChange" />
    </view>
    <nut-empty v-else description="暂无明细"></nut-empty>
  </view>
@@ -222,95 +252,46 @@ const getList = async () => {
  transform: translateX(-50%);
 }

-.card {
-  width: 90%;
-  border-radius: 20px;
-  background-color: #282828;
-  margin: 10px auto;
-  color: #d0a568;
-  padding: 20px;
-
-  .info {
-    .left {
-      height: 200px;
-      text-align: left;
-      margin-left: 50px;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-
-      .num {
-        font-weight: bold;
-        margin-top: 10px;
-      }
-    }
-  }
-}
-
 .tabs-box {
  display: flex;
-  flex-direction: row;
-  // justify-content: space-evenly;
  align-items: center;
-  height: auto;
  background-color: #fff;
-  padding: 0 10px;
  text-align: center;
-  overflow-x: auto;
+  flex-wrap: wrap;
+  padding: 15px;
+  justify-content: space-evenly;

-  &::-webkit-scrollbar {
-    width: 0;
-    height: 0;
-  }
-
-  view {
-    width: 200px;
-  }
-
-  .text {
-    margin: 10px 0;
-    align-items: center;
-    font-size: large;
-  }
-
-  .line {
-    margin: 0 auto;
-    width: 100px;
-    height: 5px;
-    border-radius: 30px;
-    transition: all 0.3s ease-in-out;
-  }
-
-  .lineColor {
-    background-color: #ff0000;
+  .item {
+    padding: 10px 20px;
+    font-size: 23px;
+    border-radius: 10px;
  }
 }

 .card-list {
-  margin: 10px 20px;
+  // margin: 10px 20px;
  background-color: #fff;
  display: flex;
  border-radius: 10px;
  padding: 20px;
  justify-content: space-between;
  align-items: center;
+  font-size: 25px;

  .jf {
-    color: #8a8a8a;
+    color: #484848;
  }

  .left {
    .text {
      text-align: left;
      font-weight: bolder;
-      // 超出一行隐藏
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
      word-break: break-word;
      color: #484848;
-      font-size: large;
    }
  }