更新待支付订单

src/student/teacher-dependent/teacher-follow.tsx

@@ -99,7 +99,7 @@ export default defineComponent({
       })
     },
     // 检验是否有对应徽章
-    checkBadge(type: string, item: any) {
+    checkBadge(type: string, item: any, vipType?: string) {
       // tag : 老师点亮图标
       // STYLE:个人风采
       // VIDEO：视频课
@@ -116,14 +116,10 @@ export default defineComponent({
           }
           break
         case 'VIP':
-          if (item.membershipStartTime && item.membershipEndTime) {
-            const startTime = dayjs(item.membershipStartTime).valueOf()
-            const endTime = dayjs(item.membershipEndTime).valueOf()
-            const nowTime = dayjs().valueOf()
-            status = nowTime >= startTime && nowTime <= endTime
-          } else {
-            status = false
-          }
+          status = vipType === 'VIP'
+          break
+        case 'SVIP':
+          status = vipType === 'SVIP' || vipType === 'PERMANENT_SVIP'
           break
         case 'DEGREE':
           status = item.degreeFlag ? true : false
@@ -189,7 +185,12 @@ export default defineComponent({
                       <Image
                         class={[
                           styles.avatar,
-                          this.checkBadge('VIP', item.teacher) &&
+                          (this.checkBadge('VIP', item.teacher, item.vipType) ||
+                            this.checkBadge(
+                              'SVIP',
+                              item.teacher,
+                              item.vipType
+                            )) &&
                             styles.avatarActive
                         ]}
                         round
@@ -202,14 +203,31 @@ export default defineComponent({
                           直播中
                         </p>
                       ) : (
-                        <Image
-                          class={styles.teacherIconVip}
-                          src={
-                            this.checkBadge('VIP', item.teacher)
-                              ? getAssetsHomeFile('vip_active.png')
-                              : getAssetsHomeFile('vip_default.png')
-                          }
-                        />
+                        (this.checkBadge('SVIP', item.teacher, item.vipType) ||
+                          this.checkBadge(
+                            'VIP',
+                            item.teacher,
+                            item.vipType
+                          )) && (
+                          <Image
+                            class={styles.teacherIconVip}
+                            src={
+                              this.checkBadge(
+                                'SVIP',
+                                item.teacher,
+                                item.vipType
+                              )
+                                ? getAssetsHomeFile('svip_active.png')
+                                : this.checkBadge(
+                                    'VIP',
+                                    item.teacher,
+                                    item.vipType
+                                  )
+                                ? getAssetsHomeFile('vip_active.png')
+                                : getAssetsHomeFile('vip_default.png')
+                            }
+                          />
+                        )
                       )}
                     </div>
                   </div>

src/views/member-center/index.module.less

@@ -356,6 +356,7 @@
   padding: 18px 15px 23px;
   background-color: #fff;
 
+
   .btn {
     border-radius: 12px;
     font-weight: bold;
@@ -712,11 +713,23 @@
 
   .dialogBtnGroup {
     padding: 0 16px;
+
+    &.orderGroup {
+      display: flex;
+      align-items: center;
+      padding: 0;
+    }
+
+    :global {
+      .van-button {
+        font-weight: 500;
+        font-size: 16px;
+      }
+    }
   }
 
   .dialogBtn {
-    font-weight: 500;
-    font-size: 16px;
+    margin-left: 12px;
     color: #FFFFFF;
     line-height: 22px;
   }
@@ -737,4 +750,4 @@
   span {
     color: #FF491A;
   }
-}
+}

src/views/member-center/index.tsx

@@ -1,4 +1,11 @@
-import { computed, defineComponent, onMounted, reactive, shallowRef } from 'vue'
+import {
+  computed,
+  defineComponent,
+  nextTick,
+  onMounted,
+  reactive,
+  shallowRef
+} from 'vue'
 import styles from './index.module.less'
 import ColHeader from '@/components/col-header'
 import { Button, Image, NoticeBar, Popup, Toast } from 'vant'
@@ -20,6 +27,7 @@ import { memberSimpleType, memberType } from '@/constant'
 import dayjs from 'dayjs'
 import { orderStatus } from '../order-detail/orderStatus'
 import TheNoticeBar from '@/components/the-noticeBar'
+import { tradeOrder } from '@/student/trade/tradeOrder'
 
 export default defineComponent({
   name: 'member-center',
@@ -34,6 +42,8 @@ export default defineComponent({
       titleOpacity: 0,
       shareStatus: false, // 分享
       dialogVisiable: false,
+      orderVisiable: false,
+      orderDetail: {} as any,
       shareUrl: '',
       shareDiscount: 0,
       discountTeacher: {
@@ -174,6 +184,10 @@ export default defineComponent({
         state.selectMember = state.memberShowList[0]
       }
       state.tabActive = type
+
+      nextTick(() => {
+        document.querySelector('.system-list')?.scroll(0, 0)
+      })
     }
 
     const calcSalePrice = (item: any) => {
@@ -212,6 +226,20 @@ export default defineComponent({
           return
         }
 
+        // 判断是否有待支付订单
+        const resPadding = await request.post(
+          `${state.apiSuffix}/userOrder/getPendingOrder`,
+          {
+            data: { goodType: state.tabActive }
+          }
+        )
+        console.log(resPadding, 'resPadding')
+        if (resPadding?.data?.id) {
+          state.orderVisiable = true
+          state.orderDetail = resPadding.data || {}
+          return
+        }
+
         const member: any = state.selectMember
         // 判断是否有会员
         let startTime = new Date()
@@ -280,6 +308,30 @@ export default defineComponent({
       }
     }
 
+    // 取消支付
+    const onCancelOrder = async () => {
+      try {
+        await request.post(`${state.apiSuffix}/userOrder/orderCancel`, {
+          data: { orderNo: state.orderDetail.orderNo }
+        })
+        state.orderVisiable = false
+      } catch {
+        //
+      }
+    }
+    // 继续支付
+    const onContinueOrder = async () => {
+      const orderDetail = state.orderDetail || {}
+      tradeOrder(orderDetail, () => {
+        router.push({
+          path: '/orderDetail',
+          query: {
+            orderType: orderDetail.orderType
+          }
+        })
+      })
+    }
+
     /** 格式化分类信息 */
     const formatMemberList = () => {
       // console.log(vipList.value, svipList.value, 'vipList.value')
@@ -540,6 +592,7 @@ export default defineComponent({
                 <div class={styles.system_list_section}>
                   <div
                     class={[
+                      'system-list',
                       styles['system-list'],
                       state.tabActive === 'VIP' ? styles.system_list_vip : '',
                       memberInfos.value.memberLength === 2
@@ -554,6 +607,7 @@ export default defineComponent({
                       <>
                         {state.memberShowList.map((member: any) => (
                           <div
+                            key={member.id}
                             class={[
                               styles['system-item'],
                               member.id === state.selectMember.id
@@ -739,6 +793,34 @@ export default defineComponent({
             </div>
           </div>
         </Popup>
+
+        <Popup
+          v-model:show={state.orderVisiable}
+          style={{ background: 'transparent' }}
+          closeOnClickOverlay={false}
+        >
+          <div class={styles.dialogContainer}>
+            <div class={styles.dialogTitle}>提示</div>
+            <div class={styles.dialogContent}>
+              您有待支付的订单,是否继续支付
+            </div>
+
+            <div class={[styles.dialogBtnGroup, styles.orderGroup]}>
+              <Button round type="default" plain block onClick={onCancelOrder}>
+                取消
+              </Button>
+              <Button
+                round
+                type="primary"
+                block
+                class={styles.dialogBtn}
+                onClick={onContinueOrder}
+              >
+                继续支付
+              </Button>
+            </div>
+          </div>
+        </Popup>
       </div>
     )
   }