更新

src/business-components/calendar/index.tsx

@@ -200,7 +200,7 @@ export default defineComponent({
           showConfirm={false}
           showMark={false}
           firstDayOfWeek={1}
-          rowHeight={60}
+          rowHeight={56}
           minDate={this.minDate}
           maxDate={this.maxDate}
           color="var(--van-primary)"
@@ -211,14 +211,14 @@ export default defineComponent({
               <div class={styles.subtitle}>
                 <Icon
                   name={IconArrow}
-                  size={18}
+                  size={22}
                   class={this.arrowStatus && styles.disabled}
                   onClick={this.onPrevMonth}
                 />
                 <span>{this.subtitle}</span>
                 <Icon
                   name={IconArrow}
-                  size={18}
+                  size={22}
                   class={styles.right}
                   onClick={this.onNextMonth}
                 />

src/student/live-class/live-detail.tsx

@@ -2,9 +2,8 @@ import CoursePlanStep from '@/business-components/course-plan-step'
 import SectionDetail from '@/business-components/section-detail'
 import UserDetail from '@/business-components/user-detail'
 import request from '@/helpers/request'
-import { state } from '@/state'
 import dayjs from 'dayjs'
-import { Icon, Sticky, Button } from 'vant'
+import { Icon, Sticky, Button, Dialog } from 'vant'
 import { defineComponent } from 'vue'
 import styles from './live-detail.module.less'
 import iconTips from '@common/images/icon_tips.png'
@@ -80,18 +79,58 @@ export default defineComponent({
     } catch {}
   },
   methods: {
-    onBuy() {
+    async onBuy() {
+      try {
+        const res = await request.post(
+          '/api-student/userOrder/getPendingOrder',
+          {
+            data: {
+              goodType: 'LIVE',
+              bizId: this.groupId
+            }
+          }
+        )
+        console.log(res, res.data)
+        const live = this.live
+        orderStatus.orderType = 'LIVE'
+        orderStatus.liveInfo = {
+          courseGroupId: live.courseGroupId,
+          courseGroupName: live.courseGroupName,
+          coursePrice: live.coursePrice,
+          teacherName: live.teacherName || `游客${live.teacherId || ''}`,
+          teacherId: live.teacherId,
+          avatar: live.avatar,
+          courseInfo: this.courseInfo
+        }
+        const result = res.data
+        if (result) {
+          Dialog.confirm({
+            title: '提示',
+            message: '您有一个未支付的订单，是否继续支付？',
+            confirmButtonColor: '#269a93',
+            cancelButtonText: '取消订单',
+            confirmButtonText: '继续支付'
+          })
+            .then(async () => {
+              orderStatus.orderInfo = {
+                orderNo: result.orderNo,
+                actualPrice: result.actualPrice,
+                payStatus: true
+              }
+              this.routerTo()
+            })
+            .catch(() => {
+              Dialog.close()
+              // 只用取消订单，不用做其它处理
+              this.cancelPayment(result.orderNo)
+            })
+        } else {
+          this.routerTo()
+        }
+      } catch {}
+    },
+    routerTo() {
       const live = this.live
-      orderStatus.orderType = 'LIVE'
-      orderStatus.liveInfo = {
-        courseGroupId: live.courseGroupId,
-        courseGroupName: live.courseGroupName,
-        coursePrice: live.coursePrice,
-        teacherName: live.teacherName || `游客${live.teacherId || ''}`,
-        teacherId: live.teacherId,
-        avatar: live.avatar,
-        courseInfo: this.courseInfo
-      }
       this.$router.push({
         path: '/orderDetail',
         query: {
@@ -99,6 +138,16 @@ export default defineComponent({
           courseGroupId: live.courseGroupId
         }
       })
+    },
+    async cancelPayment(orderNo: string) {
+      try {
+        await request.post('/api-student/userOrder/orderCancel', {
+          data: {
+            orderNo
+          }
+        })
+        // this.routerTo()
+      } catch {}
     }
   },
   render() {

src/student/teacher-dependent/components/practice.module.less

@@ -1,12 +1,10 @@
 .practice {
   padding: 14px 14px 0;
-
   .group {
     margin-bottom: 12px;
     border-radius: 10px;
     overflow: hidden;
   }
-
   .price {
     font-size: 14px;
     color: #999999;
@@ -18,6 +16,11 @@
   }
 }
 
+.protocol {
+  padding: 0 14px;
+  background-color: #f6f8f9;
+}
+
 .arrangeCell {
   margin: 10px 0 0;
   width: auto;
@@ -25,23 +28,6 @@
   overflow: hidden;
 }
 
-.rTitle {
-  display: flex;
-  align-items: center;
-  font-size: 16px;
-  color: #333;
-  font-weight: 500;
-  &::before {
-    margin-right: 8px;
-    content: ' ';
-    display: inline-block;
-    width: 4px;
-    height: 17px;
-    background: linear-gradient(180deg, #59e5d5 0%, #2dc7aa 100%);
-    border-radius: 3px;
-  }
-}
-
 :global {
   .van-stepper--round .van-stepper__minus {
     color: #333 !important;

src/student/teacher-dependent/components/practice.tsx

@@ -1,20 +1,46 @@
-import Calendar from '@/business-components/calendar'
+import ColProtocol from '@/components/col-protocol'
 import request from '@/helpers/request'
 import { state } from '@/state'
 import dayjs from 'dayjs'
-import { Cell, CellGroup, Dialog, Stepper, Tag } from 'vant'
+import {
+  ActionSheet,
+  Button,
+  Cell,
+  CellGroup,
+  Dialog,
+  Stepper,
+  Sticky,
+  Tag,
+  Popup
+} from 'vant'
 import { defineComponent } from 'vue'
+import PracticeCalendar from '../model/practice-calendar'
 import styles from './practice.module.less'
 
 export default defineComponent({
   name: 'practice',
+  props: {
+    userInfo: {
+      type: Object,
+      default: {}
+    }
+  },
   data() {
     const query = this.$route.query
     return {
       teacherId: query.teacherId,
-      showSelectList: [],
       calendarList: {},
-      selectCourseList: []
+      selectCourseList: [],
+      agreeStatus: false,
+      teacherSubjectList: [],
+      subjectStatus: false,
+      subjectInfo: {
+        subjectPrice: 0,
+        courseMinutes: 0,
+        subjectName: '',
+        subjectId: 0
+      },
+      courseNum: 4
     }
   },
   async mounted() {
@@ -27,115 +53,118 @@ export default defineComponent({
           }
         }
       )
-      console.log(res)
-      this.getList()
+      const result = res.data || []
+      const findItem = result.find((item: any) => {
+        return item.subjectId === Number(this.userInfo.subjectId)
+      })
+      // 判断是否有跟学生相同的科目，如果没有则默认取第一个
+      const tempRes = findItem || result[0]
+      const { subjectName, subjectPrice, courseMinutes, subjectId } = tempRes
+      this.subjectInfo = {
+        subjectPrice,
+        courseMinutes,
+        subjectName,
+        subjectId
+      }
+
+      result.forEach((item: any) => {
+        item.name = item.subjectName
+      })
+      this.teacherSubjectList = result
     } catch {}
   },
   methods: {
-    async getList(date?: Date) {
-      try {
-        console.log(state.user.data)
-        let params = {
-          day: dayjs(date || new Date()).format('DD'),
-          month: dayjs(date || new Date()).format('MM'),
-          year: dayjs(date || new Date()).format('YYYY')
-        }
-        let res = await request.post(
-          '/api-student/courseSchedule/createPracticeCourseCalendar',
-          {
-            data: {
-              ...params,
-              studentId: state.user.data?.userId,
-              teacherId: this.teacherId
-            }
-          }
-        )
-        const result = res.data || []
-        let tempObj = {}
-        result.forEach((item: any) => {
-          tempObj[item.date] = item
-        })
-        this.calendarList = tempObj
-      } catch {}
-    },
-    onCloseTag(item: any) {
-      Dialog.confirm({
-        title: '提示',
-        message: '您是否要删除该选择的课程？',
-        confirmButtonColor: 'var(--van-primary)'
-      }).then(() => {
-        // const index = createState.selectCourseList.findIndex(
-        //   (course: any) => course.startTime === item.startTime
-        // )
-        // createState.selectCourseList.splice(index, 1)
-      })
-    }
+    onSubmit() {}
   },
   render() {
     return (
-      <div class={styles.practice}>
-        <CellGroup class={styles.group}>
-          <Cell
-            title="陪练课收费"
-            v-slots={{
-              default: () => (
-                <div class={styles.price}>
-                  <span>¥40</span>/25分钟
-                </div>
-              )
-            }}
-          />
-          <Cell title="选择专业" isLink value="竖笛" />
-          <Cell
-            title="课时数"
-            v-slots={{
-              default: () => <Stepper theme="round" buttonSize={22} />
-            }}
+      <>
+        <div class={styles.practice}>
+          <CellGroup class={styles.group}>
+            <Cell
+              title="陪练课收费"
+              v-slots={{
+                default: () => (
+                  <div class={styles.price}>
+                    <span>
+                      ¥
+                      {(this as any).$filters.moneyFormat(
+                        this.subjectInfo.subjectPrice
+                      )}
+                    </span>
+                    /{this.subjectInfo.courseMinutes}分钟
+                  </div>
+                )
+              }}
+            />
+            <Cell
+              title="选择专业"
+              isLink
+              value={this.subjectInfo.subjectName}
+              onClick={() => (this.subjectStatus = true)}
+            />
+            <Cell
+              title="课时数"
+              v-slots={{
+                default: () => (
+                  <Stepper
+                    v-model={this.courseNum}
+                    theme="round"
+                    max={12}
+                    min={1}
+                    buttonSize={22}
+                    onChange={() => {
+                      this.selectCourseList = []
+                    }}
+                  />
+                )
+              }}
+            />
+          </CellGroup>
+
+          <PracticeCalendar
+            teacherId={this.teacherId as string}
+            courseNum={this.courseNum}
           />
-        </CellGroup>
 
-        <div class={styles.group}>
-          <Calendar
-            selectList={this.selectCourseList}
-            list={this.calendarList}
-            maxDays={5}
-            nextMonth={(date: Date) => this.getList(date)}
-            prevMonth={(date: Date) => this.getList(date)}
-            selectDay={this.onSelectDay}
+          <ActionSheet
+            show={this.subjectStatus}
+            actions={this.teacherSubjectList}
+            cancelText="取消"
+            closeOnClickAction
+            onCancel={() => (this.subjectStatus = false)}
+            onSelect={(item: any) => {
+              const { subjectName, subjectPrice, courseMinutes, subjectId } =
+                item
+              this.subjectInfo = {
+                subjectPrice,
+                courseMinutes,
+                subjectName,
+                subjectId
+              }
+              this.subjectStatus = false
+            }}
           />
         </div>
+        <Sticky offsetBottom={0} position="bottom">
+          <div class={styles.protocol}>
+            <ColProtocol
+              v-model={this.agreeStatus}
+              showHeader
+              style={{ paddingLeft: 0, paddingRight: 0 }}
+            />
+          </div>
 
-        <Cell
-          class={[styles.arrangeCell, 'mb12']}
-          v-slots={{
-            title: () => (
-              <div class={styles.rTitle}>
-                <span>已选择课程时间</span>
-              </div>
-            ),
-            label: () => (
-              <div class={styles.rTag}>
-                {this.showSelectList.map((item: any) => (
-                  <>
-                    <Tag
-                      plain
-                      round
-                      closeable
-                      size="large"
-                      type="primary"
-                      class={styles.tag}
-                      onClose={() => this.onCloseTag(item)}
-                    >
-                      {item.title}
-                    </Tag>
-                    <br />
-                  </>
-                ))}
-              </div>
-            )
-          }}
-        ></Cell>
-      </div>
+          <div
+            class={'btnGroup'}
+            style={{ background: '#fff', paddingTop: '10px' }}
+          >
+            <Button block round type="primary" onClick={this.onSubmit}>
+              确认约课
+            </Button>
+          </div>
+        </Sticky>
+      </>
     )
   }
 })

src/student/teacher-dependent/model/practice-calendar.module.less

@@ -0,0 +1,67 @@
+.rTag {
+  padding: 10px 0;
+  .tag {
+    background: #e9fff8;
+    margin-bottom: 8px;
+  }
+}
+
+.selectPopup {
+  width: 312px;
+  background: #ffffff;
+  border-radius: 8px;
+  .selectContainer {
+    padding: 18px 14px;
+  }
+  .rTitle {
+    font-size: 18px;
+  }
+  .selectPopupContent {
+    padding: 20px 0;
+  }
+  .desc,
+  .times {
+    font-size: 14px;
+    color: #666666;
+    line-height: 20px;
+  }
+
+  .times {
+    padding-top: 15px;
+    span {
+      display: block;
+    }
+  }
+
+  .selectBtn {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .btn {
+      width: 48%;
+    }
+  }
+}
+
+.group {
+  margin-bottom: 12px;
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+.rTitle {
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+  color: #333;
+  font-weight: 500;
+  &::before {
+    margin-right: 8px;
+    content: ' ';
+    display: inline-block;
+    width: 4px;
+    height: 17px;
+    background: linear-gradient(180deg, #59e5d5 0%, #2dc7aa 100%);
+    border-radius: 3px;
+  }
+}

src/student/teacher-dependent/model/practice-calendar.tsx

@@ -0,0 +1,223 @@
+import dayjs from 'dayjs'
+import Calendar from '@/business-components/calendar'
+import { Button, Cell, Dialog, Popup, Tag } from 'vant'
+import { defineComponent } from 'vue'
+import styles from './practice-calendar.module.less'
+import { getWeekCh } from '@/helpers/utils'
+import request from '@/helpers/request'
+import { state } from '@/state'
+
+export default defineComponent({
+  name: 'practice-calendar',
+  props: {
+    courseNum: {
+      type: Number,
+      default: 4
+    },
+    teacherId: {
+      type: [Number, String],
+      default: ''
+    }
+  },
+  data() {
+    return {
+      calendarList: [] as any,
+      selectCourseList: [] as any,
+      coursePlanStatus: false,
+      selectStatus: false,
+      coursePlanList: []
+    }
+  },
+  computed: {
+    showSelectList() {
+      const arr: any = this.selectCourseList
+      let list = [...arr]
+      list.forEach((item: any) => {
+        item.title =
+          dayjs(item.startTime).format('YYYY-MM-DD') +
+          ' ' +
+          getWeekCh(dayjs(item.startTime).day()) +
+          ' ' +
+          item.start +
+          '~' +
+          item.end
+      })
+      return list
+    },
+    selectType() {
+      // 循环次数是否足够
+      return this.selectCourseList.length < this.courseNum
+        ? 'noEnough'
+        : 'enough'
+    }
+  },
+  mounted() {
+    this.getList()
+  },
+  methods: {
+    async getList(date?: Date) {
+      try {
+        let params = {
+          day: dayjs(date || new Date()).format('DD'),
+          month: dayjs(date || new Date()).format('MM'),
+          year: dayjs(date || new Date()).format('YYYY')
+        }
+        let res = await request.post(
+          '/api-student/courseSchedule/createPracticeCourseCalendar',
+          {
+            data: {
+              ...params,
+              studentId: state.user.data?.userId,
+              teacherId: this.teacherId
+            }
+          }
+        )
+        const result = res.data || []
+        let tempObj = {}
+        result.forEach((item: any) => {
+          tempObj[item.date] = item
+        })
+        this.calendarList = tempObj
+      } catch {}
+    },
+    onSelectDay(obj: any) {
+      const result = obj || []
+      let list = [...this.selectCourseList] as any
+      console.log(obj, list)
+      result.forEach((item: any) => {
+        const isExist = list.some(
+          (course: any) => course.startTime === item.startTime
+        )
+        !isExist && list.push({ ...item })
+      })
+      // 去掉不在
+      list.forEach((item: any) => {
+        const isExist = result.some(
+          (course: any) => course.startTime === item.startTime
+        )
+        const index = result.findIndex(
+          (course: any) => course.startTime === item.startTime
+        )
+        !isExist && list.splice(index, 1)
+      })
+      // 对数组进行排序
+      list.sort((first: any, second: any) => {
+        if (first.startTime > second.startTime) return 1
+        if (first.startTime < second.startTime) return -1
+        return 0
+      })
+      console.log(list, 'list')
+      this.selectCourseList = [...list] as any
+    },
+    onCloseTag(item: any) {
+      Dialog.confirm({
+        title: '提示',
+        message: '您是否要删除该选择的课程？',
+        confirmButtonColor: 'var(--van-primary)'
+      }).then(() => {
+        const index = this.selectCourseList.findIndex(
+          (course: any) => course.startTime === item.startTime
+        )
+        this.selectCourseList.splice(index, 1)
+      })
+    }
+  },
+  render() {
+    return (
+      <>
+        <div class={styles.group}>
+          <Calendar
+            selectList={this.selectCourseList}
+            list={this.calendarList}
+            maxDays={this.courseNum}
+            nextMonth={(date: Date) => this.getList(date)}
+            prevMonth={(date: Date) => this.getList(date)}
+            selectDay={this.onSelectDay}
+          />
+        </div>
+
+        <Cell
+          class={[styles.arrangeCell, 'mb12']}
+          v-slots={{
+            title: () => (
+              <div class={styles.rTitle}>
+                <span>已选择课程时间</span>
+              </div>
+            ),
+            label: () => (
+              <div class={styles.rTag}>
+                {this.showSelectList.map((item: any) => (
+                  <>
+                    <Tag
+                      plain
+                      round
+                      closeable
+                      size="large"
+                      type="primary"
+                      class={styles.tag}
+                      onClose={() => this.onCloseTag(item)}
+                    >
+                      {item.title}
+                    </Tag>
+                    <br />
+                  </>
+                ))}
+              </div>
+            )
+          }}
+        ></Cell>
+        <Popup show={this.selectStatus} class={styles.selectPopup}>
+          <div class={styles.selectContainer}>
+            <div class={styles.rTitle}>
+              <span>提示</span>
+            </div>
+            <div class={styles.selectPopupContent}>
+              <p class={styles.desc}>
+                {this.selectType === 'noEnough' && !this.coursePlanStatus
+                  ? '您所选择的上课时间未达到您输入的课时数，系统根据已选时间将自动按周顺延排课。'
+                  : '您已选择以下上课时间段，时间段会暂时锁定，锁定期间学员不可购买该时间段课程。'}
+              </p>
+              {this.coursePlanList &&
+                this.coursePlanList.length > 0 &&
+                this.coursePlanStatus && (
+                  <p class={styles.times}>
+                    {this.coursePlanList.map((item: any) => (
+                      <span>
+                        {dayjs(item.startTime || new Date()).format(
+                          'YYYY-MM-DD'
+                        )}{' '}
+                        {dayjs(item.startTime || new Date()).format('HH:mm')}~
+                        {dayjs(item.endTime || new Date()).format('HH:mm')}
+                      </span>
+                    ))}
+                  </p>
+                )}
+            </div>
+
+            <div class={styles.selectBtn}>
+              <Button
+                class={styles.btn}
+                type="primary"
+                round
+                block
+                plain
+                onClick={this.onReset}
+              >
+                {this.selectType === 'noEnough' ? '继续选择' : '重新选择'}
+              </Button>
+              <Button
+                class={styles.btn}
+                type="primary"
+                round
+                block
+                onClick={this.onSure}
+              >
+                确认
+              </Button>
+            </div>
+          </div>
+        </Popup>
+      </>
+    )
+  }
+})

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

@@ -50,15 +50,6 @@ export default defineComponent({
       return subjectName ? subjectName.split(',') : []
     }
   },
-  mounted() {
-    this.$nextTick(() => {
-      const height = document.querySelector('.headContainer')?.clientHeight || 0
-      height &&
-        ((
-          document.querySelector('.headContainer') as any
-        ).style.height = `${height}px`)
-    })
-  },
   methods: {
     async onStart() {
       // 关注与取消关注
@@ -81,12 +72,7 @@ export default defineComponent({
   render() {
     return (
       <div class={styles['teacher-record']}>
-        {/* <div class={styles.headContainer}> */}
-        <Sticky
-          position="top"
-          offsetTop={0}
-          // style={{ position: 'fixed', left: 0, right: 0, zIndex: 999 }}
-        >
+        <Sticky position="top" offsetTop={0}>
           <ColHeader
             class={styles.teacherHeader}
             background="transparent"
@@ -199,7 +185,7 @@ export default defineComponent({
 
         <div class={styles.container}>
           {this.tabs === 'single' && <Single userInfo={this.userInfo} />}
-          {this.tabs === 'practice' && <Practice />}
+          {this.tabs === 'practice' && <Practice userInfo={this.userInfo} />}
           {this.tabs === 'live' && <Live />}
           {this.tabs === 'video' && <VideoList />}
           {this.tabs === 'music' && <Music />}

src/student/video-class/video-detail.tsx

@@ -1,7 +1,7 @@
 import CourseVideoItem from '@/business-components/course-video-item'
 import SectionDetail from '@/business-components/section-detail'
 import UserDetail from '@/business-components/user-detail'
-import { Sticky, Button } from 'vant'
+import { Sticky, Button, Dialog } from 'vant'
 import { defineComponent } from 'vue'
 import styles from './video-detail.module.less'
 import request from '@/helpers/request'
@@ -57,18 +57,56 @@ export default defineComponent({
         }
       })
     },
-    onBuy() {
-      const userInfo = this.userInfo
-      orderStatus.orderType = 'LIVE'
-      orderStatus.videoInfo = {
-        courseGroupId: userInfo.id,
-        courseGroupName: userInfo.lessonName,
-        coursePrice: userInfo.lessonPrice,
-        teacherName: userInfo.username || `游客${userInfo.teacherId || ''}`,
-        teacherId: userInfo.teacherId,
-        avatar: userInfo.avatar,
-        courseInfo: this.detailList
-      }
+    async onBuy() {
+      try {
+        const res = await request.post(
+          '/api-student/userOrder/getPendingOrder',
+          {
+            data: {
+              goodType: 'LIVE',
+              bizId: this.params.groupId
+            }
+          }
+        )
+        const userInfo = this.userInfo
+        orderStatus.orderType = 'LIVE'
+        orderStatus.videoInfo = {
+          courseGroupId: userInfo.id,
+          courseGroupName: userInfo.lessonName,
+          coursePrice: userInfo.lessonPrice,
+          teacherName: userInfo.username || `游客${userInfo.teacherId || ''}`,
+          teacherId: userInfo.teacherId,
+          avatar: userInfo.avatar,
+          courseInfo: this.detailList
+        }
+        const result = res.data
+        if (result) {
+          Dialog.confirm({
+            title: '提示',
+            message: '您有一个未支付的订单，是否继续支付？',
+            confirmButtonColor: '#269a93',
+            cancelButtonText: '取消订单',
+            confirmButtonText: '继续支付'
+          })
+            .then(async () => {
+              orderStatus.orderInfo = {
+                orderNo: result.orderNo,
+                actualPrice: result.actualPrice,
+                payStatus: true
+              }
+              this.routerTo()
+            })
+            .catch(() => {
+              Dialog.close()
+              // 只用取消订单，不用做其它处理
+              this.cancelPayment(result.orderNo)
+            })
+        } else {
+          this.routerTo()
+        }
+      } catch {}
+    },
+    routerTo() {
       this.$router.push({
         path: '/orderDetail',
         query: {
@@ -76,6 +114,15 @@ export default defineComponent({
           courseGroupId: this.params.groupId
         }
       })
+    },
+    async cancelPayment(orderNo: string) {
+      try {
+        await request.post('/api-student/userOrder/orderCancel', {
+          data: {
+            orderNo
+          }
+        })
+      } catch {}
     }
   },
   render() {

src/views/order-detail/index.tsx

@@ -18,22 +18,26 @@ import iconTips from '@common/images/icon_tips.png'
 import Payment from './payment'
 import ColHeader from '@/components/col-header'
 import { state } from '@/state'
+import { orderStatus } from './orderStatus'
+import request from '@/helpers/request'
 
 export default defineComponent({
   name: 'order-detail',
   data() {
     const query = this.$route.query
-    console.log(query)
     return {
       orderType: query.orderType,
       agreeStatus: false,
       popupShow: false,
       paymentStatus: false,
-      orderPrice: 0, // 支付金额
-      orderInfo: {
-        orderNo: '',
-        actualPrice: 0
-      }
+      orderPrice: 0 // 支付金额
+    }
+  },
+  unmounted() {
+    orderStatus.orderInfo = {
+      orderNo: '',
+      actualPrice: 0,
+      payStatus: false
     }
   },
   methods: {
@@ -55,19 +59,23 @@ export default defineComponent({
       }
       // return
       let result: any
-      if (this.$refs.orderVideo && this.orderType == 'VIDEO') {
-        result = await (this as any).$refs.orderVideo.onSubmit()
-        console.log(result)
-      } else if (this.$refs.orderLive && this.orderType == 'LIVE') {
-        result = await (this as any).$refs.orderLive.onSubmit()
-      }
-
-      if (result) {
-        this.orderInfo = {
-          orderNo: result.orderNo,
-          actualPrice: result.actualPrice
-        }
+      if (orderStatus.orderInfo.orderNo) {
+        orderStatus.orderInfo.payStatus = true
         this.paymentStatus = true
+      } else {
+        if (this.$refs.orderVideo && this.orderType == 'VIDEO') {
+          result = await (this as any).$refs.orderVideo.onSubmit()
+        } else if (this.$refs.orderLive && this.orderType == 'LIVE') {
+          result = await (this as any).$refs.orderLive.onSubmit()
+        }
+        if (result) {
+          orderStatus.orderInfo = {
+            orderNo: result.orderNo,
+            actualPrice: result.actualPrice,
+            payStatus: false
+          }
+          this.paymentStatus = true
+        }
       }
     }
   },
@@ -137,7 +145,10 @@ export default defineComponent({
           safeAreaInsetBottom
           style={{ minHeight: '30%' }}
         >
-          <Payment v-model={this.paymentStatus} orderInfo={this.orderInfo} />
+          <Payment
+            v-model={this.paymentStatus}
+            orderInfo={orderStatus.orderInfo}
+          />
         </Popup>
       </div>
     )

src/views/order-detail/orderStatus.ts

@@ -3,5 +3,11 @@ type orderType = 'VIDEO' | 'LIVE' | 'PRACTICE' | 'GOODS' | 'VIP' | 'MUSIC'
 export const orderStatus = reactive({
   orderType: '' as orderType, // 购买类型
   liveInfo: {} as any, // 直播购买信息
-  videoInfo: {} as any // 视频购买信息
+  videoInfo: {} as any, // 视频购买信息
+  orderInfo: {
+    // 订单信息
+    orderNo: '',
+    actualPrice: 0,
+    payStatus: true
+  }
 })

src/views/order-detail/payment/index.tsx

@@ -21,6 +21,7 @@ import styles from './index.module.less'
 interface IOrderInfo {
   orderNo: string | number
   actualPrice: string | number
+  payStatus: boolean
 }
 
 export default defineComponent({
@@ -78,13 +79,23 @@ export default defineComponent({
     async onSubmit() {
       // 支付...
       try {
-        const res = await request.post('/api-student/userOrder/orderPay', {
-          data: {
-            orderNo: this.orderInfo.orderNo,
-            payChannel: this.payType
-          }
-        })
-        console.log(res)
+        let res: any
+
+        if (this.orderInfo.payStatus) {
+          res = await request.post('/api-student/userOrder/orderPaytoPaying', {
+            data: {
+              orderNo: this.orderInfo.orderNo
+            }
+          })
+        } else {
+          res = await request.post('/api-student/userOrder/orderPay', {
+            data: {
+              orderNo: this.orderInfo.orderNo,
+              payChannel: this.payType
+            }
+          })
+        }
+        // console.log(res)
         postMessage({
           api: 'paymentOrder',
           content: {
@@ -98,9 +109,11 @@ export default defineComponent({
           duration: 3000,
           loadingType: 'spinner'
         })
+        Toast.clear()
+        this.$emit('update:modelValue', false)
         // 唤起支付时状态
-        listenerMessage('paymentOperation', (res: any) =>
-          this.paymentOperation(res)
+        listenerMessage('paymentOperation', (result: any) =>
+          this.paymentOperation(result)
         )
       } catch {}
     },