更新

src/router/routes-common.ts

@@ -195,6 +195,14 @@ export const router = [
     meta: {
       title: '会员中心'
     }
+  },
+  {
+    path: '/coupons',
+    name: 'coupons',
+    component: () => import('@/views/coupons/index'),
+    meta: {
+      title: '优惠券'
+    }
   }
 ]
 

src/views/coupons/index.module.less

@@ -0,0 +1,17 @@
+.coupons {
+  :global {
+    .van-tab {
+      font-size: 16px;
+    }
+    .van-tab--active {
+      color: #2dc7aa;
+    }
+  }
+}
+
+.list {
+  margin: 12px 14px;
+  padding: 12px 14px;
+  background-color: #fff;
+  border-radius: 10px;
+}

src/views/coupons/index.tsx

@@ -0,0 +1,25 @@
+import { Tab, Tabs } from 'vant'
+import { defineComponent } from 'vue'
+import styles from './index.module.less'
+import List from './list'
+
+export default defineComponent({
+  name: 'coupons',
+  render() {
+    return (
+      <div class={styles.coupons}>
+        <Tabs color="#2DC7AA" lineWidth={44}>
+          <Tab title="可使用">
+            <List />
+          </Tab>
+          <Tab title="已使用">
+            <List useState="USED" />
+          </Tab>
+          <Tab title="已失效">
+            <List useState="EXPIRED" />
+          </Tab>
+        </Tabs>
+      </div>
+    )
+  }
+})

src/views/coupons/item.tsx

@@ -0,0 +1,8 @@
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'coupon-item',
+  render() {
+    return <>优惠券</>
+  }
+})

src/views/coupons/list.tsx

@@ -0,0 +1,96 @@
+import ColResult from '@/components/col-result'
+import request from '@/helpers/request'
+import { state } from '@/state'
+import { List } from 'vant'
+import { defineComponent, PropType } from 'vue'
+import styles from './index.module.less'
+import Item from './item'
+
+// 使用状态: EXPIRED(已失效) USABLE(可使用) USED(已使用)
+export default defineComponent({
+  name: 'coupon-list',
+  props: {
+    useState: {
+      type: String as PropType<'USABLE' | 'USED' | 'EXPIRED'>,
+      default: 'USABLE'
+    }
+  },
+  data() {
+    return {
+      list: [],
+      dataShow: true, // 判断是否有数据
+      loading: false,
+      finished: false,
+      params: {
+        useState: this.useState,
+        page: 1,
+        rows: 20
+      }
+    }
+  },
+  mounted() {
+    // this.getList()
+    this.dataShow = false
+  },
+  methods: {
+    onSort() {
+      this.params.page = 1
+      this.list = []
+      this.dataShow = true // 判断是否有数据
+      this.loading = false
+      this.finished = false
+      this.getList()
+    },
+    onSearch(value: string) {
+      this.onSort()
+    },
+    async getList() {
+      try {
+        // 判断是哪个端
+        const url =
+          state.platformType === 'STUDENT'
+            ? '/api-student/couponInfo/page'
+            : '/api-teacher/couponInfo/page'
+        const res = await request.post(url, {
+          data: {
+            ...this.params
+          }
+        })
+        this.loading = false
+        const result = res.data || {}
+        // 处理重复请求数据
+        if (this.list.length > 0 && result.pageNo === 1) {
+          return
+        }
+        this.list = this.list.concat(result.rows || [])
+        this.finished = result.pageNo >= result.totalPage
+        this.params.page = result.pageNo + 1
+        this.dataShow = this.list.length > 0
+      } catch {
+        this.dataShow = false
+        this.finished = true
+      }
+    }
+  },
+  render() {
+    return (
+      <div class={styles.list}>
+        <Item />
+        {/* {this.dataShow ? (
+          <List
+            v-model:loading={this.loading}
+            finished={this.finished}
+            finishedText=" "
+            class={[styles.liveList]}
+            onLoad={this.getList}
+            immediateCheck={false}
+          >
+            <span>11212</span>
+          </List>
+        ) : (
+          <ColResult btnStatus={false} classImgSize="SMALL" tips="暂无优惠券" />
+        )} */}
+      </div>
+    )
+  }
+})