更新

src/components/o-dialog/index.tsx

@@ -10,9 +10,16 @@ export default defineComponent({
       default: false
     },
     message: {
-      type: String,
+      type: String as PropType<string | Element>,
       default: ''
     },
+    /**
+     * 是否允许 message 内容中渲染 HTML
+     */
+    allowHtml: {
+      type: Boolean,
+      default: false
+    },
     title: {
       type: String,
       default: '提示'
@@ -62,6 +69,7 @@ export default defineComponent({
           marginTop: props.dialogMarginTop
         }}
         v-model:show={state.show}
+        allowHtml={props.allowHtml}
         message={props.message}
         messageAlign={props.messageAlign}
         confirmButtonText={props.confirmButtonText}

src/router/routes-student.ts

@@ -147,6 +147,14 @@ export default [
         meta: {
           title: '练习统计'
         }
+      },
+      {
+        path: '/my-instrument',
+        name: 'my-instrument',
+        component: () => import('@/student/my-instrument/index'),
+        meta: {
+          title: '乐器检查'
+        }
       }
     ]
   },
@@ -180,6 +188,14 @@ export default [
         }
       },
       {
+        path: '/preGoodsSuccess',
+        name: 'preGoodsSuccess',
+        component: () => import('@/student/music-group/pre-goods-apply/success'),
+        meta: {
+          title: ''
+        }
+      },
+      {
         path: '/orderDetail',
         name: 'orderDetail',
         component: () => import('@/student/music-group/pre-apply/order-detail'),

src/student/music-group/layout/login.tsx

@@ -38,7 +38,7 @@ export default defineComponent({
       wxAppId: '', //
       code: '', // 授权code码
       orchestraInfo: {} as any,
-
+      hasBuyInstruments: false, // 是否购买商品
       // 是否开启微信登录（测试使用）默认为false
       testIsWeixin: true,
       noPaymentList: [
@@ -73,6 +73,8 @@ export default defineComponent({
     }
 
     this.getDetails()
+
+    console.log(this.$route.query.returnUrl)
   },
   methods: {
     async getDetails() {
@@ -120,7 +122,7 @@ export default defineComponent({
       if (state.user.status === 'login' || state.user.status === 'error') {
         const { returnUrl, isRegister, ...rest } = this.$route.query
 
-        const newUrl =
+        let newUrl =
           window.location.origin +
           window.location.pathname +
           '#' +
@@ -129,8 +131,14 @@ export default defineComponent({
           qs.stringify({
             ...rest
           })
-        // 直接跳转到授权页面
+        // 判断是否购买的商品 - 只在商品购买乐团
+        if (this.hasBuyInstruments) {
+          newUrl = window.location.origin + window.location.pathname + '#/preGoodsSuccess?t=pay'
+          window.location.href = newUrl
+          return
+        }
         if (this.testIsWeixin) {
+          // 直接跳转到授权页面
           this.locationReplace(newUrl)
         } else {
           this.getAppIdAndCode(newUrl)
@@ -179,6 +187,15 @@ export default defineComponent({
         })
         setLogin(userCash.data)
 
+        // 判断是否是商品报名 - 先要判断是否已经购买商品
+        const { returnUrl, id } = this.$route.query
+        if (returnUrl === '/preGoodsApply') {
+          const registerInfo = await request.get(
+            '/api-student/orchestraRegister/registerStatus/' + id
+          )
+          this.hasBuyInstruments = registerInfo.data.hasBuyInstruments || false
+        }
+
         this.directNext()
       } catch {
         //

src/student/music-group/pre-apply/order-detail.tsx

@@ -384,13 +384,18 @@ export default defineComponent({
                           </span>
                         </h2>
                         <div class={styles.goodsPrice}>
-                          <Tag
-                            color="linear-gradient(135deg, #FF8C4A 0%, #FF531C 100%)"
-                            textColor="#fff"
-                            class={styles.brandName}
-                          >
-                            {goods.brandName}
-                          </Tag>
+                          {goods.goodsType === 'INSTRUMENT_INSPECT' ? (
+                            <span>1-2次/学期</span>
+                          ) : (
+                            <Tag
+                              color="linear-gradient(135deg, #FF8C4A 0%, #FF531C 100%)"
+                              textColor="#fff"
+                              class={styles.brandName}
+                            >
+                              {goods.brandName}
+                            </Tag>
+                          )}
+
                           <span
                             class={[
                               styles.goodsNums,

src/student/music-group/pre-goods-apply/index.module.less

@@ -313,7 +313,6 @@
   .goodsMemo {
     font-size: 13px;
     color: #777777;
-    line-height: 18px;
     padding-bottom: 4px;
   }
 
@@ -434,4 +433,9 @@
       font-weight: 600;
     }
   }
+}
+
+.inspectPopup {
+  width: calc(100% - 50px);
+  border-radius: 16px;
 }

src/student/music-group/pre-goods-apply/index.tsx

@@ -29,6 +29,7 @@ import request from '@/helpers/request'
 import { useRoute, useRouter } from 'vue-router'
 import { goWechatAuth, setLogout } from '@/state'
 import ODialog from '@/components/o-dialog'
+import InspectModal from './modal/inspect-modal'
 
 // 乐团交付，乐团停止或关闭，有新的交付团；则不允许报名
 const classList: any = []
@@ -41,9 +42,13 @@ export default defineComponent({
   setup() {
     const route = useRoute()
     const router = useRouter()
+
+    // 获取是否已经看过训练工具图片
+    const readToolImg = localStorage.getItem('read-tool-image')
     const state = reactive({
       code: '' as any, // 微信授权code码
       detail: {} as any, // 学员详情
+      toolImgStatus: readToolImg ? true : false,
       currentGrade: [
         { text: '一年级', value: 1 },
         { text: '二年级', value: 2 },
@@ -57,10 +62,12 @@ export default defineComponent({
       ], // 年级数组列表
       classList: classList,
       subjectList: [] as any, // 声部列表
+      instrumentsInspectionDescribe: '', // 配置信息
+      inspectPopupStatus: false, // 查看说明
       gradeStatus: false,
       classStatus: false,
       subjectStatus: false,
-      registerInfo: {}, // 乐团信息
+      registerInfo: {} as any, // 乐团信息
       goodsInfo: {} as any, // 商品
       textBookInfo: {} as any, // 教材
       inspectInfo: {} as any, // 乐器检查
@@ -71,7 +78,6 @@ export default defineComponent({
       details: [] as any, //
       pattern: /^1(3|4|5|6|7|8|9)\d{9}$/,
       nameReg: /^[\u4E00-\u9FA5]+$/,
-      subjectChangeStatus: false, // 更换声部时
       paymentType: '',
       musicPaymentType: '', // 乐团中对应支付方式
       dialogStatus: false,
@@ -80,7 +86,8 @@ export default defineComponent({
       orderInfo: {
         needPrice: 0,
         originalPrice: 0
-      }
+      },
+      submitStatus: false
     })
     const forms = reactive({
       username: null,
@@ -93,7 +100,9 @@ export default defineComponent({
       registerSubjectTxt: null, // 所在声部
       parentName: null,
       groupBuyType: '' as any,
-      phone: null as any
+      phone: null as any,
+      learningTools: null,
+      instrumentsBrand: null
     })
 
     // 获取乐团报名信息
@@ -109,6 +118,7 @@ export default defineComponent({
         const subjects: any = state.subjectList.find(
           (item: any) => item.value == detail.registerSubjectId
         )
+        state.instrumentsInspectionDescribe = subjects.instrumentsInspectionDescribe
         forms.username = detail.username
         forms.sex = detail.sex ? 1 : 0
         forms.currentGrade = detail.currentGrade
@@ -119,6 +129,14 @@ export default defineComponent({
         forms.registerSubjectTxt = subjects ? subjects.text : ''
         forms.parentName = detail.parentName
         forms.phone = detail.phone
+        forms.instrumentsBrand = detail.instrumentsBrand
+        forms.learningTools = detail.learningTools
+
+        if (detail.registerSubjectId) {
+          // 更新商品信息
+          await registerGoods()
+        }
+        forms.groupBuyType = detail.groupBuyType || 'GROUP_BUY'
       } catch (e) {
         //
         console.log(e)
@@ -166,8 +184,7 @@ export default defineComponent({
       }
     }
 
-    // 乐团报名
-    const onSubmit = async () => {
+    const onRegisterUser = async () => {
       try {
         const params: any = {
           orchestraId: route.query.id,
@@ -187,81 +204,97 @@ export default defineComponent({
           }
         })
 
+        if (forms.groupBuyType === 'SELF') {
+          router.push({
+            path: '/preGoodsSuccess'
+          })
+        }
+      } catch {
+        //
+      }
+    }
+
+    // 乐团报名
+    const onSubmit = async () => {
+      try {
+        if (forms.groupBuyType === 'SELF') {
+          state.submitStatus = true
+          return
+        }
+
         // 判断是否购买乐器
-        if (forms.groupBuyType === 'GROUP_BUY') {
-          // 重新计算金额
-          calcPrice()
-          const params: any = [] // 支付参数
+        // 乐器报名前先注册用户
+        await onRegisterUser()
+        // 重新计算金额
+        calcPrice()
+        const params: any = [] // 支付参数
+
+        // 学练工具
+        const vipYear = state.vipYearInfo
+        params.push({
+          goodsId: vipYear.goodsId,
+          goodsNum: 1,
+          goodsType: vipYear.goodsType,
+          paymentCashAmount: vipYear.currentPrice, // 现金支付金额
+          paymentCouponAmount: 0 // 优惠券金额
+        })
 
-          // 学练工具
-          const vipYear = state.vipYearInfo
-          params.push({
-            goodsId: vipYear.goodsId,
-            goodsNum: 1,
-            goodsType: vipYear.goodsType,
-            paymentCashAmount: vipYear.currentPrice, // 现金支付金额
-            paymentCouponAmount: 0 // 优惠券金额
-          })
+        // 商品
+        const goodsInfo = state.goodsInfo
+        params.push({
+          goodsId: goodsInfo.goodsId,
+          goodsNum: 1,
+          goodsType: goodsInfo.goodsType,
+          paymentCashAmount: goodsInfo.currentPrice, // 现金支付金额
+          paymentCouponAmount: 0 // 优惠券金额
+        })
 
-          // 商品
-          const goodsInfo = state.goodsInfo
-          params.push({
-            goodsId: goodsInfo.goodsId,
-            goodsNum: 1,
-            goodsType: goodsInfo.goodsType,
-            paymentCashAmount: goodsInfo.currentPrice, // 现金支付金额
-            paymentCouponAmount: 0 // 优惠券金额
-          })
+        // 教材
+        const textBookInfo = state.textBookInfo
+        params.push({
+          goodsId: textBookInfo.goodsId,
+          goodsNum: 1,
+          goodsType: textBookInfo.goodsType,
+          paymentCashAmount: textBookInfo.currentPrice, // 现金支付金额
+          paymentCouponAmount: 0 // 优惠券金额
+        })
 
-          // 教材
-          const textBookInfo = state.textBookInfo
+        // 检查
+        if (state.inspectStatus) {
+          const inspectInfo = state.inspectInfo
           params.push({
-            goodsId: textBookInfo.goodsId,
+            goodsId: inspectInfo.goodsId,
             goodsNum: 1,
-            goodsType: textBookInfo.goodsType,
-            paymentCashAmount: textBookInfo.currentPrice, // 现金支付金额
+            goodsType: inspectInfo.goodsType,
+            paymentCashAmount: inspectInfo.currentPrice, // 现金支付金额
             paymentCouponAmount: 0 // 优惠券金额
           })
+        }
 
-          // 检查
-          if (state.inspectStatus) {
-            const inspectInfo = state.inspectInfo
-            params.push({
-              goodsId: inspectInfo.goodsId,
-              goodsNum: 1,
-              goodsType: inspectInfo.goodsType,
-              paymentCashAmount: inspectInfo.currentPrice, // 现金支付金额
-              paymentCouponAmount: 0 // 优惠券金额
-            })
+        // 创建订单
+        const { data } = await request.post('/api-student/userPaymentOrder/executeOrder', {
+          hideLoading: false,
+          data: {
+            paymentType: state.musicPaymentType || state.paymentType,
+            bizId: route.query.id, // 乐团编号
+            orderType: 'ORCHESTRA',
+            paymentCashAmount: state.orderInfo.needPrice || 0,
+            paymentCouponAmount: 0,
+            goodsInfos: params,
+            orderName: '乐团报名缴费',
+            orderDesc: '乐团报名缴费'
           }
+        })
 
-          // 创建订单
-          const { data } = await request.post('/api-student/userPaymentOrder/executeOrder', {
-            hideLoading: false,
-            data: {
-              paymentType: state.musicPaymentType || state.paymentType,
-              bizId: route.query.id, // 乐团编号
-              orderType: 'ORCHESTRA',
-              paymentCashAmount: state.orderInfo.needPrice || 0,
-              paymentCouponAmount: 0,
-              goodsInfos: params,
-              orderName: '乐团报名缴费',
-              orderDesc: '乐团报名缴费'
-            }
-          })
-
-          console.log(data)
-          router.push({
-            path: '/orderDetail',
-            query: {
-              pm: 1, // h5乐团报名
-              config: JSON.stringify({ ...data.paymentConfig, paymentType: data.paymentType }),
-              orderNo: data.orderNo
-            }
-          })
-        } else {
-          //
-        }
+        console.log(data)
+        router.push({
+          path: '/orderDetail',
+          query: {
+            pm: 1, // h5乐团报名
+            config: JSON.stringify({ ...data.paymentConfig, paymentType: data.paymentType }),
+            orderNo: data.orderNo
+          }
+        })
       } catch {
         //
       }
@@ -339,6 +372,7 @@ export default defineComponent({
           if (item.goodsType === 'INSTRUMENTS') {
             const img = item.goodsUrl ? item.goodsUrl.split(',')[0] : ''
             state.goodsInfo = { ...item, goodsUrl: img }
+            state.instrumentsInspectionDescribe = item.instrumentsInspectionDescribe
           } else if (item.goodsType === 'TEXTBOOK') {
             const img = item.goodsUrl ? item.goodsUrl.split(',')[0] : ''
             state.textBookInfo = { ...item, goodsUrl: img }
@@ -530,18 +564,6 @@ export default defineComponent({
                   showToast('暂无报名声部')
                   return
                 }
-
-                // 切换订单时判断是否有支付中和已支付的订单，并且已注册过
-                // 判断学员所在乐团状态，如果在读则不允许更换声部（只能退团重新报名）
-                // 退团重新报名也不能更新声部
-                // if (
-                //   props.registerInfo?.registerStatus === 'LEARNING' ||
-                //   (props.registerInfo?.registerStatus === 'OUTOF_ORCHESTRA' &&
-                //     props.registerInfo?.orderNumber > 0)
-                // ) {
-                //   state.subjectChangeStatus = true
-                //   return
-                // }
                 state.subjectStatus = true
               }}
               rules={[{ required: true, message: '请选择声部' }]}
@@ -706,16 +728,34 @@ export default defineComponent({
 
                 <Cell>
                   {{
-                    icon: () => <img src={iconBao} class={styles.iconBao} />,
+                    icon: () => (
+                      <img
+                        src={iconBao}
+                        class={styles.iconBao}
+                        onClick={() => {
+                          if (state.instrumentsInspectionDescribe) state.inspectPopupStatus = true
+                        }}
+                      />
+                    ),
                     value: () => (
                       <div class={styles.baoContainer}>
                         <div class={styles.baoTitle}>下校检查乐器 1-2次/学期</div>
                         <div class={styles.baoPrice}>
-                          <p>
+                          <p
+                            onClick={() => {
+                              state.inspectStatus = !state.inspectStatus
+                              calcPrice()
+                            }}
+                          >
                             <span class={styles.prefix}>¥</span> {state.inspectInfo.currentPrice}
                             <span class={styles.suffix}>/年</span>
                           </p>
-                          <Checkbox v-model={state.inspectStatus}></Checkbox>
+                          <Checkbox
+                            v-model={state.inspectStatus}
+                            onClick={() => {
+                              calcPrice()
+                            }}
+                          ></Checkbox>
                         </div>
                       </div>
                     )
@@ -753,26 +793,28 @@ export default defineComponent({
               <CellGroup class={[styles.applyCellGroup, styles.self]} border={false}>
                 <div class={styles.toolImg}>
                   <Image
-                    src={'https://cloud-coach.ks3-cn-beijing.ksyuncs.com/1696816717584.png'}
+                    src={state.registerInfo?.instrumentPriceImg}
                     onClick={() => {
-                      showImagePreview([
-                        'https://cloud-coach.ks3-cn-beijing.ksyuncs.com/1696816717584.png'
-                      ])
+                      showImagePreview([state.registerInfo?.instrumentPriceImg])
+                      localStorage.setItem('read-tool-image', '1')
+                      state.toolImgStatus = true
                     }}
                   />
 
-                  <div class={styles.toolImgOverflow}>
-                    <Button
-                      onClick={() => {
-                        showImagePreview([
-                          'https://cloud-coach.ks3-cn-beijing.ksyuncs.com/1696816717584.png'
-                        ])
-                      }}
-                    >
-                      点击查看《乐团训练工具标准配置表》
-                    </Button>
-                    <img src={iconHead} class={styles.iconHead} />
-                  </div>
+                  {!state.toolImgStatus && (
+                    <div class={styles.toolImgOverflow}>
+                      <Button
+                        onClick={() => {
+                          showImagePreview([state.registerInfo?.instrumentPriceImg])
+                          localStorage.setItem('read-tool-image', '1')
+                          state.toolImgStatus = true
+                        }}
+                      >
+                        点击查看《乐团训练工具标准配置表》
+                      </Button>
+                      <img src={iconHead} class={styles.iconHead} />
+                    </div>
+                  )}
                 </div>
                 <Field
                   required
@@ -780,7 +822,7 @@ export default defineComponent({
                   labelAlign="top"
                   border={false}
                   placeholder="请填写您计划配置的乐器品牌"
-                  v-model={forms.parentName}
+                  v-model={forms.instrumentsBrand}
                   maxlength={30}
                   class={styles.toolInput}
                   rules={[{ required: true, message: '请填写您计划配置的乐器品牌' }]}
@@ -792,7 +834,7 @@ export default defineComponent({
                   border={false}
                   class={styles.toolInput}
                   placeholder="请填写您计划配置的AI学练工具品牌"
-                  v-model={forms.phone}
+                  v-model={forms.learningTools}
                   maxlength={30}
                   rules={[{ required: true, message: '请填写您计划配置的AI学练工具品牌' }]}
                 />
@@ -864,16 +906,40 @@ export default defineComponent({
               const selectedOption = val.selectedOptions[0]
               forms.registerSubjectId = selectedOption.value
               forms.registerSubjectTxt = selectedOption.text
+              console.log(selectedOption, 'selected')
               state.subjectStatus = false
 
               // 更新商品信息
               await registerGoods()
-
               forms.groupBuyType = 'GROUP_BUY'
             }}
           />
         </Popup>
 
+        {/* 声部 */}
+        <Popup v-model:show={state.inspectPopupStatus} round closeable class={styles.inspectPopup}>
+          <InspectModal describe={state.instrumentsInspectionDescribe} />
+        </Popup>
+
+        {/* 确认信息 */}
+        <ODialog
+          title="确认信息"
+          v-model:show={state.submitStatus}
+          message={
+            '<p style="text-align: left;">请确认您准备的乐器和AI学练工具符合<span style="color: #F67146;font-weight: bold;">《乐团训练工具标准配置表》</span></p>'
+          }
+          allowHtml
+          confirmButtonText="确认"
+          cancelButtonText="返回"
+          showCancelButton
+          onConfirm={() => {
+            onRegisterUser()
+          }}
+          onCancel={async () => {
+            state.submitStatus = false
+          }}
+        />
+
         <ODialog
           title="提示"
           v-model:show={state.dialogStatus}
@@ -883,7 +949,6 @@ export default defineComponent({
           showCancelButton
           onConfirm={() => {
             const paymentConfig = state.dialogConfig.paymentConfig
-
             router.push({
               path: '/orderDetail',
               query: {

src/student/music-group/pre-goods-apply/modal/inspect-modal.module.less

@@ -0,0 +1,24 @@
+.inspectModal {
+  width: 100%;
+  min-height: 20vh;
+
+  h2 {
+    padding-top: var(--van-popup-close-icon-margin);
+    text-align: center;
+    font-size: 17px;
+    font-weight: 600;
+    color: #131415;
+    line-height: 24px;
+  }
+
+  .content {
+    padding: 20px;
+    font-size: 14px;
+
+    :global {
+      img {
+        width: 100% !important;
+      }
+    }
+  }
+}

src/student/music-group/pre-goods-apply/modal/inspect-modal.tsx

@@ -0,0 +1,21 @@
+import { defineComponent } from 'vue'
+import styles from './inspect-modal.module.less'
+
+export default defineComponent({
+  name: 'inspect-modal',
+  props: {
+    describe: {
+      type: String,
+      default: ''
+    }
+  },
+  setup(props) {
+    return () => (
+      <div class={styles.inspectModal}>
+        <h2>乐器保障服务说明</h2>
+
+        <p class={styles.content} v-html={props.describe}></p>
+      </div>
+    )
+  }
+})

src/student/music-group/pre-goods-apply/success.module.less

@@ -0,0 +1,60 @@
+.successContainer {
+  text-align: center;
+  min-height: 100vh;
+  background-color: #fff;
+
+  .iconSuccess {
+    padding-top: 33px;
+    width: 72px;
+    height: 72px;
+  }
+
+  h2 {
+    padding-top: 30px;
+    font-size: 20px;
+    font-weight: 600;
+    color: #1A1A1A;
+    line-height: 28px;
+  }
+
+  p {
+    padding-top: 15px;
+    font-size: 14px;
+    color: #777777;
+    line-height: 20px;
+  }
+
+  .applyTip {
+    padding: 15px 34px;
+    text-align: left;
+  }
+
+  .downloadBtn {
+    margin-top: 40px;
+    height: 44px;
+    line-height: 44px;
+    background: #FF8057;
+    border-radius: 39px;
+    font-size: 18px;
+    font-weight: 600;
+    color: #FFFFFF;
+    border: none;
+    line-height: 25px;
+    width: 85%;
+  }
+}
+
+.wxpopup {
+  width: 100%;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 9999;
+
+  img {
+    width: 88%;
+    margin: 0 6%;
+  }
+}

src/student/music-group/pre-goods-apply/success.tsx

@@ -0,0 +1,100 @@
+import { defineComponent, onMounted, reactive } from 'vue'
+import styles from './success.module.less'
+import iconSuccess from './images/icon-success.png'
+import { Button, showToast } from 'vant'
+import { browser } from '@/helpers/utils'
+import { useRoute } from 'vue-router'
+import wxBg from '../../download/images/wx_bg.png'
+
+export default defineComponent({
+  name: 'apply-success',
+  setup() {
+    const route = useRoute()
+
+    const state = reactive({
+      wxStatus: false,
+      type: 'student',
+      buttonText: '下载管乐团学员端',
+      t: 'apply' as any
+    })
+
+    state.t = route.query.t
+    if (state.t === 'pay') {
+      document.title = '报名成功'
+    } else {
+      document.title = '信息提交成功'
+    }
+
+    const onDownload = () => {
+      if (browser().weixin) {
+        return
+      }
+
+      let urlIos = ''
+      let urlAndroid = ''
+      if (location.origin.indexOf('online.lexiaoya.cn') > -1) {
+        if (state.type === 'student') {
+          urlIos = 'https://apps.apple.com/cn/app/%E7%AE%A1%E4%B9%90%E5%9B%A2/id1671474346?uo=4 '
+          urlAndroid = 'https://appstore.ks3-cn-beijing.ksyuncs.com/gyt-student.apk'
+        } else if (state.type === 'teacher') {
+          urlIos =
+            'https://apps.apple.com/cn/app/%E7%AE%A1%E4%B9%90%E5%9B%A2%E4%BC%B4%E5%AD%A6%E7%AB%AF/id1670584741?uo=4'
+          urlAndroid = 'https://appstore.ks3-cn-beijing.ksyuncs.com/gyt-teacher.apk'
+        } else if (state.type === 'manage') {
+          urlIos =
+            'https://apps.apple.com/cn/app/%E7%AE%A1%E4%B9%90%E5%9B%A2%E7%AE%A1%E7%90%86%E7%AB%AF/id1671473981?uo=4'
+          urlAndroid = 'https://appstore.ks3-cn-beijing.ksyuncs.com/gyt-manager.apk'
+        }
+      } else {
+        if (state.type === 'student') {
+          urlIos = 'https://www.pgyer.com/2Wg2'
+          urlAndroid = 'https://www.pgyer.com/9NBz'
+        } else if (state.type === 'teacher') {
+          urlIos = 'https://www.pgyer.com/v5yB'
+          urlAndroid = 'https://www.pgyer.com/BQeE'
+        } else if (state.type === 'manage') {
+          urlIos = 'https://www.pgyer.com/DGrR'
+          urlAndroid = 'https://www.pgyer.com/TEWv'
+        }
+      }
+
+      if (browser().ios || /(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
+        urlIos && (window.location.href = urlIos)
+      } else if (/(Android)/i.test(navigator.userAgent)) {
+        window.location.href = urlAndroid
+      } else {
+        showToast('请用手机或移动设备打开')
+      }
+    }
+    return () => (
+      <div class={styles.successContainer}>
+        <img src={iconSuccess} class={styles.iconSuccess} />
+
+        <h2>{state.t === 'pay' ? '报名成功' : '信息提交成功！'}</h2>
+
+        <p class={state.t === 'pay' ? '' : styles.applyTip}>
+          {state.t === 'pay'
+            ? '您已完成乐团报名，请留意乐团开训通知'
+            : '您已完成信息提交，请收到开团信息后，才为学生准备相应工具。'}
+        </p>
+
+        {state.t === 'pay' && (
+          <Button class={styles.downloadBtn} onClick={onDownload}>
+            立即下载管乐团APP
+          </Button>
+        )}
+
+        {state.wxStatus && (
+          <div
+            class={styles.wxpopup}
+            onClick={() => {
+              state.wxStatus = false
+            }}
+          >
+            <img src={wxBg} alt="" />
+          </div>
+        )}
+      </div>
+    )
+  }
+})

src/student/my-instrument/index.module.less

@@ -0,0 +1,60 @@
+.myInstrument {
+  padding: 12px 13px;
+
+  :global {
+    .van-cell {
+      padding: 15px 14px 13px;
+      border-radius: 10px;
+    }
+  }
+
+  .goodsImg {
+    width: 85px;
+    height: 85px;
+    margin-right: 12px !important;
+  }
+
+  h2 {
+    font-size: 16px;
+    font-weight: 600;
+    color: #333333;
+    line-height: 22px;
+
+  }
+
+  .times {
+    padding: 6px 0 4px;
+    font-size: 13px;
+    color: #777777;
+    line-height: 18px;
+  }
+
+  .type {
+    display: flex;
+    align-items: center;
+    background: #F4F4F4;
+    border-radius: 6px;
+    padding: 6px;
+    font-size: 12px;
+    font-weight: 600;
+    color: #898989;
+
+    img {
+      width: 16px;
+      height: 17px;
+      margin-right: 2px;
+      padding-bottom: 2px;
+    }
+  }
+
+
+  .NOT_ACTIVATED {
+    background-color: #FFF6EF;
+    color: #F67146;
+  }
+
+  .ACTIVATED {
+    background-color: #EBFBE7;
+    color: #53BE7E;
+  }
+}

src/student/my-instrument/index.tsx

@@ -0,0 +1,114 @@
+import OEmpty from '@/components/o-empty'
+import { List, Image, Cell } from 'vant'
+import { defineComponent, onMounted, reactive } from 'vue'
+import styles from './index.module.less'
+import request from '@/helpers/request'
+import i1 from './images/1.png'
+import i2 from './images/2.png'
+import i3 from './images/3.png'
+
+export default defineComponent({
+  name: 'my-instrument',
+  setup() {
+    const state = reactive({
+      isLoading: false,
+      list: [] as any,
+      listState: {
+        dataShow: true, // 判断是否有数据
+        loading: false,
+        finished: false
+      },
+      params: {
+        page: 1,
+        rows: 20
+      }
+    })
+
+    // 班级列表
+    const getList = async () => {
+      try {
+        if (state.isLoading) return
+        state.isLoading = true
+        const res = await request.post('/api-student/userPaymentOrder/instrumentPage', {
+          data: {
+            ...state.params
+          }
+        })
+        state.listState.loading = false
+        const result = res.data || {}
+        // 处理重复请求数据
+        if (state.list.length > 0 && result.current === 1) {
+          return
+        }
+        const rows = result.rows || []
+        state.list = state.list.concat(rows)
+        state.listState.finished = result.current >= result.pages
+        state.params.page = result.current + 1
+        state.listState.dataShow = state.list.length > 0
+        state.isLoading = false
+      } catch {
+        state.listState.dataShow = false
+        state.listState.finished = true
+        state.isLoading = false
+      }
+    }
+
+    onMounted(async () => {
+      await getList()
+    })
+    return () => (
+      <div class={styles.myInstrument}>
+        {state.listState.dataShow ? (
+          <List
+            // v-model:loading={state.listState.loading}
+            finished={state.listState.finished}
+            finishedText=" "
+            onLoad={getList}
+            immediateCheck={false}
+          >
+            {state.list.map((item: any) => (
+              <Cell>
+                {{
+                  icon: () => <img src={item.instrumentUrl} class={styles.goodsImg} />,
+                  title: () => (
+                    <div class={styles.goodsInfo}>
+                      <h2>{item.instrumentName}</h2>
+                      <p class={styles.times}>购买时间：{item.buyTime}</p>
+                      {/* NOT_OPEN:未开通 NOT_ACTIVATED:未激活 ACTIVATED:已激活 INVALID:已失效 */}
+                      {item.instrumentStatus === 'ACTIVATED' && (
+                        <div class={[styles.type, styles[item.instrumentStatus]]}>
+                          {item.instrumentStatus === 'ACTIVATED' && <img src={i2} />}
+                          乐器保障服务中
+                        </div>
+                      )}
+                      {item.instrumentStatus === 'INVALID' && (
+                        <div class={[styles.type, styles[item.instrumentStatus]]}>
+                          {item.instrumentStatus === 'INVALID' && <img src={i3} />}
+                          乐器保障服务已失效
+                        </div>
+                      )}
+                      {item.instrumentStatus === 'NOT_OPEN' && (
+                        <div class={[styles.type, styles[item.instrumentStatus]]}>
+                          {item.instrumentStatus === 'NOT_OPEN' && <img src={i3} />}
+                          该乐器未开通乐器保障服务
+                        </div>
+                      )}
+                      {item.instrumentStatus === 'NOT_ACTIVATED' && (
+                        <div class={[styles.type, styles[item.instrumentStatus]]}>
+                          {item.instrumentStatus === 'NOT_ACTIVATED' && <img src={i1} />}
+                          乐器保障服务尚未激活
+                        </div>
+                      )}
+                    </div>
+                  )
+                }}
+              </Cell>
+            ))}
+          </List>
+        ) : (
+          <OEmpty btnStatus={false} tips="暂无乐器检查" />
+        )}
+      </div>
+    )
+  }
+})