优化

src/pages/mine/subs/coupon/components/coupon-item.vue

@@ -3,13 +3,13 @@
     <image v-if='item.status==0' :src='assetsUrl("bg_coupon.png")' />
     <image v-else-if='item.status==1' :src='assetsUrl("bg_coupon_expired.png")' />
     <view class='left-content accent-text-color' :class='{"left-content-disabled": item.status==1}'>
-      <text>{{ item.price }}</text>
+      <text>{{ item.reduce }}</text>
       <text>满{{ item.threshold }}元可用</text>
     </view>
 
     <view class='right-content accent-text-color' :class='{"right-content-disabled": item.status==1}'>
-      <text>{{ item?.title }}</text>
-      <text>有效期至{{ item.useTime }}</text>
+      <text>{{ item?.name }}</text>
+      <text>有效期至{{ dayjs(item.startTime).format("YYYY-MM-DD") }}</text>
       <text class='btn-text' :class='{"btn-text-disabled": item.status==1}'>
         立即使用
       </text>
@@ -21,6 +21,7 @@
 <script lang='ts' setup>
 
 import { assetsUrl } from '@/utils/assets';
+import dayjs from 'dayjs';
 
 defineProps({
   item: Object
@@ -76,7 +77,7 @@ defineProps({
     position: relative;
     flex: 1;
     justify-content: center;
-    margin-left: 100rpx;
+    margin-left: 60rpx;
 
     text:nth-of-type(1) {
       font-size: 30rpx;

src/pages/mine/subs/coupon/index.vue

@@ -1,6 +1,6 @@
 <template>
-  <tabbar :titles='["全部","未使用","已使用"]' :indicator-color='"#D95554"' @change='args => {}' />
-  <scroll-view :scroll-y='true' class='content'>
+  <tabbar :titles='["全部","未使用","已使用"]' :indicator-color='"#D95554"' @change='tabChange' />
+  <scroll-view :scroll-y='true' class='content' @loadmore='onLoadMore'>
     <coupon-item v-for='item in coupons' :item='item' />
   </scroll-view>
 </template>
@@ -10,70 +10,38 @@
 import CouponItem from './components/coupon-item.vue';
 import { getCouponList } from '@/api/user';
 import { useUserStore } from '@/store';
+import { getCompanyId } from '@/utils';
 
 const store = useUserStore();
 const { userInfo } = storeToRefs(store);
 
-const coupons = ref([{
-  id: 1,
-  title: '优惠券',
-  desc: '满100减10',
-  price: 100,
-  threshold: 10,
-  priceDesc: '满100减10',
-  useTime: '2021-12-31',
-  status: 1,
-  useStatus: '未使用'
-}, {
-  id: 1,
-  title: '优惠券',
-  desc: '满100减10',
-  price: 200,
-  threshold: 80,
-  priceDesc: '满100减10',
-  useTime: '2021-01-01',
-  status: 1,
-  useStatus: '未使用'
-}, {
-  id: 1,
-  title: '优惠券',
-  desc: '满100减10',
-  price: 300,
-  threshold: 60,
-  priceDesc: '满100减10',
-  useTime: '2023-12-31',
-  status: '0',
-  useStatus: '未使用'
-}, {
-  id: 1,
-  title: '优惠券',
-  desc: '满100减10',
-  price: 50,
-  threshold: 50,
-  priceDesc: '满100减10',
-  useTime: '2021-10-31',
-  status: 0,
-  useStatus: '未使用'
-}, {
-  id: 1,
-  title: '优惠券',
-  desc: '满1000减30',
-  price: 200,
-  threshold: 30,
-  priceDesc: '满100减10',
-  useTime: '2024-12-31',
-  status: 0,
-  useStatus: '未使用'
-}]);
+const coupons = ref([]);
 
 onLoad(async () => {
-  const { data } = await getCouponList({
-    obj: {
-      memberId: userInfo.value?.id, status: 0
-    }, pageNum: 1, pageSize: 1000
-  });
-  coupons.value = data.list;
+  fetchData(0);
 });
+
+const tabChange = (index: number) => {
+  fetchData(index);
+};
+
+const fetchData = async (status: number) => {
+  const { list } = await getCouponList({
+    companyId: getCompanyId(),
+    memberId: userInfo.value?.id,
+    status: status,
+    pageNum: 1,
+    pageSize: 20
+  });
+  coupons.value = list;
+};
+
+const onLoadMore = () => {
+  if(coupons.value.length >= 20) {
+    return;
+  }
+  fetchData(0);
+};
 </script>
 
 <style lang='scss' scoped>