更新

src/views/coupons/index.module.less

@@ -81,6 +81,11 @@
       font-size: 24px;
       line-height: 33px;
     }
+    .number {
+      display: inline-block;
+      min-width: 40px;
+      text-align: center;
+    }
   }
   .type {
     max-width: 165px;

src/views/coupons/index.tsx

@@ -1,3 +1,5 @@
+import request from '@/helpers/request'
+import { state } from '@/state'
 import { Tab, Tabs } from 'vant'
 import { defineComponent } from 'vue'
 import styles from './index.module.less'
@@ -5,11 +7,38 @@ import List from './list'
 
 export default defineComponent({
   name: 'coupon-container',
+  data() {
+    return {
+      couponCount: {
+        total: 0,
+        useState: 'USABLE'
+      } as any
+    }
+  },
+  async mounted() {
+    try {
+      // 判断是哪个端
+      const url =
+        state.platformType === 'STUDENT' ? '/api-student' : '/api-teacher'
+      const res = await request.get(`${url}/couponInfo/statInfo`)
+      const result = res.data || []
+      this.couponCount = result.find(result => result.useState === 'USABLE')
+      console.log(result.find(result => result.useState === 'USABLE'))
+    } catch {
+      // TODO: handle
+    }
+  },
   render() {
     return (
       <div class={styles.coupons}>
-        <Tabs color="#2DC7AA" lineWidth={44} sticky>
-          <Tab title="可使用">
+        <Tabs color="#2DC7AA" lineWidth={44} sticky animated>
+          <Tab
+            title={`可使用${
+              this.couponCount.total > 0
+                ? '(' + this.couponCount.total + '张)'
+                : ''
+            }`}
+          >
             <List />
           </Tab>
           <Tab title="已使用">

src/views/coupons/item.tsx

@@ -46,15 +46,17 @@ export default defineComponent({
         <div class={styles.top}>
           <div class={styles.price}>
             <span class={styles.suffix}>￥</span>
-            <span>{item.discountPrice}</span>
+            <span class={styles.number}>{item.discountPrice}</span>
           </div>
 
-          <div class={styles.type}>{item.name}</div>
+          <div class={styles.type}>{item.couponName}</div>
         </div>
 
         <div class={styles.bottom}>
           <div class={styles.condition}>
-            <span class={styles.conditionTag}>满{item.useLimit}可用</span>
+            <span class={styles.conditionTag}>
+              {item.useLimit > 0 ? `满${item.useLimit}可用` : '无门槛'}
+            </span>
           </div>
           <div class={styles.useTime}>
             有效期：{dayjs(item.startTime).format('YYYY.MM.DD')}~

src/views/coupons/list.tsx

@@ -21,6 +21,7 @@ export default defineComponent({
       dataShow: true, // 判断是否有数据
       loading: false,
       finished: false,
+      lockLoad: false,
       params: {
         useState: this.useState,
         page: 1,
@@ -29,78 +30,30 @@ export default defineComponent({
     }
   },
   mounted() {
-    // this.getList()
-
-    this.list = [
-      {
-        couponType: 'FULL_DISCOUNT',
-        discountPrice: '200',
-        useLimit: '20',
-        endTime: new Date(),
-        id: 1,
-        name: '小酷Ai充值券',
-        startTime: new Date(),
-        useState: 'EXPIRED',
-        useTime: new Date()
-      },
-      {
-        couponType: 'FULL_DISCOUNT',
-        discountPrice: '300',
-        useLimit: '100',
-        endTime: new Date(),
-        id: 2,
-        name: '小酷Ai充值券',
-        startTime: new Date(),
-        useState: 'USED',
-        useTime: new Date()
-      },
-      {
-        couponType: 'FULL_DISCOUNT',
-        discountPrice: '3000',
-        useLimit: '10',
-        endTime: new Date(),
-        id: 2,
-        name: '小酷Ai充值券',
-        startTime: new Date(),
-        useState: 'USABLE',
-        useTime: new Date()
-      }
-    ]
+    this.getList()
   },
   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 {
+        if (this.lockLoad) return
+        // 上锁
+        this.lockLoad = true
         // 判断是哪个端
         const url =
-          state.platformType === 'STUDENT'
-            ? '/api-student/couponInfo/page'
-            : '/api-teacher/couponInfo/page'
-        const res = await request.post(url, {
+          state.platformType === 'STUDENT' ? '/api-student' : '/api-teacher'
+        const res = await request.post(`${url}/couponInfo/page`, {
           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
+        // 解锁
+        this.lockLoad = false
       } catch {
         this.dataShow = false
         this.finished = true
@@ -115,7 +68,8 @@ export default defineComponent({
             v-model:loading={this.loading}
             finished={this.finished}
             finishedText=" "
-            class={[styles.list]}
+            // 为了处理体验问题
+            class={[this.list.length > 0 && styles.list]}
             onLoad={this.getList}
             immediateCheck={false}
           >

src/views/order-detail/index.tsx

@@ -103,7 +103,6 @@ export default defineComponent({
   },
   methods: {
     onAuthSuccess() {
-      // console.log('auth success')
       this.popupShow = false
       this.onSubmit() // 实名成功后自动支付
     },
@@ -180,9 +179,11 @@ export default defineComponent({
     },
     onCouponSelect(item: any) {
       console.log('onCouponSelect', item)
-      const discountCount = item.map((list: any) => {
-        return Number(list.discountPrice || 0)
+      let discountCount = 0
+      ;(item || []).forEach((item: any) => {
+        discountCount += Number(item.discountPrice)
       })
+
       const lastAmount = Number(
         (Number(this.orderAmount) - Number(discountCount)).toFixed(2)
       )

src/views/order-detail/use-coupons/choice-coupon.tsx

@@ -1,4 +1,6 @@
 import ColResult from '@/components/col-result'
+import request from '@/helpers/request'
+import { state } from '@/state'
 import Item from '@/views/coupons/item'
 import { Button, Loading } from 'vant'
 import { defineComponent } from 'vue'
@@ -11,7 +13,7 @@ export const list = [
     useLimit: '30',
     endTime: new Date(),
     id: 1,
-    name: '小酷Ai充值券',
+    couponName: '小酷Ai充值券',
     startTime: new Date(),
     useState: 'USABLE',
     useTime: new Date()
@@ -22,7 +24,7 @@ export const list = [
     useLimit: '20',
     endTime: new Date(),
     id: 2,
-    name: '小酷Ai充值券',
+    couponName: '小酷Ai充值券',
     startTime: new Date(),
     useState: 'USABLE',
     useTime: new Date()
@@ -33,7 +35,7 @@ export const list = [
     useLimit: '10',
     endTime: new Date(),
     id: 3,
-    name: '小酷Ai充值券',
+    couponName: '小酷Ai充值券',
     startTime: new Date(),
     useState: 'USABLE',
     useTime: new Date()
@@ -44,7 +46,7 @@ export const list = [
     useLimit: '29',
     endTime: new Date(),
     id: 0,
-    name: '小酷Ai充值券',
+    couponName: '小酷Ai充值券',
     startTime: new Date(),
     useState: 'USABLE',
     useTime: new Date()
@@ -65,7 +67,7 @@ export default defineComponent({
   emits: ['close', 'submit'],
   data() {
     return {
-      list: list,
+      list: [],
       consumeAmount: 0, // 消耗金额
       dataLoading: false
     }
@@ -82,8 +84,24 @@ export default defineComponent({
   methods: {
     async getList() {
       this.dataLoading = true
-      setTimeout(() => {
+      try {
+        // 判断是哪个端
+        const url =
+          state.platformType === 'STUDENT' ? '/api-student' : '/api-teacher'
+        const res = await request.post(`${url}/couponInfo/page`, {
+          data: {
+            useState: 'USABLE',
+
+            page: 1,
+            rows: 100
+          }
+        })
         this.dataLoading = false
+        const result = res.data || {}
+        // 处理重复请求数据
+        if (this.list.length > 0 && result.pageNo === 1) return
+        this.list = result.rows || []
+
         // 处理可用优惠券是否支付使用
         this.list.forEach((item: any) => {
           // 如果使用金额大于订单金额则优惠券不可用
@@ -108,7 +126,9 @@ export default defineComponent({
         this.list = [...canUsable, ...canUsed]
 
         this.calcCoupon()
-      }, 300)
+      } catch {
+        //
+      }
     },
     onSubmit() {
       // 返回选中的优惠券

src/views/order-detail/use-coupons/index.tsx

@@ -1,3 +1,5 @@
+import request from '@/helpers/request'
+import { state } from '@/state'
 import { Cell, Popup } from 'vant'
 import { defineComponent } from 'vue'
 import ChoiceCoupon from './choice-coupon'
@@ -21,7 +23,8 @@ export default defineComponent({
       popupStatus: false,
       popupLoading: false,
       useCouponList: [] as any,
-      useCouponCount: 1
+      useCouponLoading: false,
+      useCouponCount: 0
     }
   },
   computed: {
@@ -36,7 +39,26 @@ export default defineComponent({
         : 0
     }
   },
+  mounted() {
+    this.getUseableCoupon()
+  },
   methods: {
+    async getUseableCoupon() {
+      try {
+        this.useCouponLoading = true
+        // 判断是哪个端
+        const url =
+          state.platformType === 'STUDENT' ? '/api-student' : '/api-teacher'
+        const res = await request.get(`${url}/couponInfo/statInfo`)
+        this.useCouponLoading = false
+        const result = (res.data || []).find(
+          result => result.useState === 'USABLE'
+        )
+        this.useCouponCount = result.total || 0
+      } catch {
+        // TODO: handle
+      }
+    },
     onSubmit(item: any) {
       // useCouponList
       this.useCouponList = item
@@ -55,24 +77,25 @@ export default defineComponent({
           isLink={!this.disabled}
           clickable={false}
           v-slots={{
-            value: () => (
-              <>
-                {/* 判断是否有选择优惠券 */}
-                {this.couponCount > 0 ? (
-                  <span class={styles.couponCount}>
-                    <i>-￥</i>
-                    {this.couponCount}
-                  </span>
-                ) : (
-                  <>
-                    {/* 判断是否有可以的优惠券 */}
-                    {this.useCouponCount > 0
-                      ? `${this.useCouponCount}张可使用`
-                      : '暂无可使用优惠券'}
-                  </>
-                )}
-              </>
-            )
+            value: () =>
+              !this.useCouponLoading && (
+                <>
+                  {/* 判断是否有选择优惠券 */}
+                  {this.couponCount > 0 ? (
+                    <span class={styles.couponCount}>
+                      <i>-￥</i>
+                      {this.couponCount}
+                    </span>
+                  ) : (
+                    <>
+                      {/* 判断是否有可以的优惠券 */}
+                      {this.useCouponCount > 0
+                        ? `${this.useCouponCount}张可使用`
+                        : '暂无可使用优惠券'}
+                    </>
+                  )}
+                </>
+              )
           }}
           onClick={() => {
             if (this.disabled) return