会员新逻辑

src/page-instrument/api.ts

@@ -48,8 +48,7 @@ export const studentQueryUserInfo = async () => {
         phone:data.phone,
         clientType:"STUDENT",
         id:data.id,
-        gender:"",
-        membershipEndTime: data.membershipEndTime
+        gender:""
       }
       return res
     }

src/page-instrument/component/the-music-list/index.module.less

@@ -147,17 +147,22 @@
         overflow: hidden;
         position: relative;
         flex-shrink: 0;
-        .iconType {
+        .lock{
             position: absolute;
-            width: 28px;
-            height: 14px;
-            right: 0;
-            top: 0;
-            z-index: 9;
-            border-top-right-radius: 8px !important;
-            &.VIP {
-                background: url('./imgs/icon-music-vip.png') no-repeat center;
-                background-size: contain;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0,0,0,.3);
+            z-index: 1;
+            &::after{
+                content: "";
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+                width: 13px;
+                height: 15px;
+                background: url("./imgs/lock.png") no-repeat;
+                background-size: 100% 100%;
             }
         }
     }
@@ -177,7 +182,6 @@
             display: flex;
             align-items: center;
             margin-top: 6px;
-            height: 14px;
             .usedNum{
                 display: flex;
                 align-items: center;
@@ -199,15 +203,34 @@
                 }
             }
             .author {
+                margin-left: 5px;
                 font-weight: 400;
                 font-size: 13px;
                 color: rgba(0,0,0,0.5);
-                line-height: 1;
+                line-height: 14px;
                 flex-grow: 1;
                 white-space: nowrap;
                 overflow: hidden;
                 text-overflow: ellipsis;
             }
+            .freeIcon{
+                padding: 0px 3px;
+                border-radius: 3px;
+                font-weight: 400;
+                font-size: 10px;
+                color: #01C1B5;
+                line-height: 14px;
+                border: 1px solid rgba(1,193,181,0.7);
+            }
+            .lockIcon{
+                padding: 0px 3px;
+                border-radius: 3px;
+                font-weight: 400;
+                font-size: 10px;
+                color: #D08C24;
+                line-height: 14px;
+                border: 1px solid rgba(208,140,36,0.7);
+            }
         }
     }
 }

src/page-instrument/component/the-music-list/list.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, onMounted, reactive, watch } from "vue";
+import { computed, defineComponent, onMounted, reactive, watch } from "vue";
 import styles from "./index.module.less";
 import { api_musicSheetPage } from "../../api";
 import state, { togglePlay } from "/src/state";
@@ -9,7 +9,7 @@ import searImg from "./imgs/searImg.png"
 import huoimg from "./imgs/huo.png"
 import emptyImg from "./imgs/empty.png"
 import { getQuery } from "/src/utils/queryString";
-import { vipData, isVip } from "../vip"
+import { vipData } from "../vip"
 
 export default defineComponent({
   name: "TheMusicList-list",
@@ -75,13 +75,8 @@ export default defineComponent({
     });
 
     const openAccomapina = (item: any) => {
-      // 学生端 没有开会员查看会员曲目
-      if(item.paymentType === "VIP" && state.systemType === "student" && !isVip.value){
-        vipData.show = true
-        return
-      }
-      // 学校查看会员曲目
-      if(item.paymentType === "VIP" && state.systemType === "web" && state.isSchool){
+      // 学生端 没有开会员查看会员曲目    // 学校查看会员曲目
+      if(item.useStatus === "LOCK" && vipVerify.value){
         vipData.show = true
         return
       }
@@ -111,6 +106,9 @@ export default defineComponent({
           ? (num / 10000).toFixed(1).replace(/\.0$/, '') + "万" 
           : num.toString();
     }
+    const vipVerify = computed(() => {
+      return state.systemType === "student" || (state.systemType === "web" && state.isSchool)
+    })
     return () => (
       <div class={styles.wrap}>
         <div class={[styles.searchBox,data.isFocus && styles.isFocus]}>
@@ -131,16 +129,26 @@ export default defineComponent({
             return (
               <div class={[styles.item, state.examSongId == item.id && styles.itemActive]} onClick={() => openAccomapina(item)}>
                 <div class={styles.titleImg}>
-                  <i class={[styles.iconType, styles[item.paymentType]]}></i>
+                  {
+                    item.useStatus==='LOCK'&&vipVerify.value && <div class={styles.lock}></div>
+                  }
                   <Image src={item.titleImg} class={styles.img} />
                 </div>
                 <div class={styles.content}>
-                  <p class={styles.name}>{item.musicSheetName}</p>
-                  {
-                    item.composer &&                   
+                  <div class={styles.name}>{item.musicSheetName}</div>
+                  {          
+                    ((["FREE","LOCK"].includes(item.useStatus)&&vipVerify.value) || item.composer) &&
                     <div class={styles.detail}>
                       {/* {item.usedNum && <div class={styles.usedNum}><img src={huoimg}/><div>{formatNumber(item.usedNum)}</div></div>} */}
-                      <p class={styles.author}>{item.composer}</p>
+                      {
+                        item.useStatus==='FREE'&&vipVerify.value && <div class={[styles.freeIcon]}>试用</div>
+                      }
+                      {
+                        item.useStatus==='LOCK'&&vipVerify.value && <div class={[styles.lockIcon]}>未解锁</div>
+                      }
+                      {
+                        item.composer && <div class={styles.author}>{item.composer}</div>
+                      }
                     </div>
                   }
                 </div>

src/page-instrument/component/vip/index.module.less

@@ -1,33 +1,54 @@
-.vip{
-  padding: 20px 30px;
-  padding-top: 30px;
-  min-width: 230px;
-  >img{
-    width: 161px;
-    margin: 0 auto 20px;
-    display: block;
-  }
-  >p{
-    margin: 0;
-    font-size: 14px;
-    color: #808080;
-    margin: 0 auto 20px;
-    text-align: center;
-  }
-  .btn{
-    font-size: 16px;
-    height: 40px;
-    line-height: 40px;
-    width: 100%;
-  }
-  &+i{
-    right: 10px;
-    top: 10px;
-  }
+.vipPopup {
+   :global {
+      .van-popup__close-icon {
+         color: #333333;
+         top: 23px;
+         right: 23px;
+         font-size: 20px;
+      }
+   }
+   .vip {
+      padding-bottom: 20px;
+      width: 295px;
+      .title {
+         height: 49px;
+         background: linear-gradient(to bottom, #defaff, #ffffff);
+         padding-bottom: 4px;
+         display: flex;
+         justify-content: center;
+         align-items: flex-end;
+         .tit {
+            font-weight: 500;
+            font-size: 18px;
+            color: #1a1a1a;
+            line-height: 25px;
+         }
+      }
+      .text {
+         margin-top: 16px;
+         padding: 0 20px;
+         font-weight: 400;
+         font-size: 16px;
+         color: #666666;
+         line-height: 26px;
+         text-align: center;
+      }
+      .btnCon{
+         margin-top: 25px;
+         display: flex;
+         justify-content: center;
+         :global{
+            .van-button{
+               width: 120px;
+               height: 40px;
+               border-radius: 20px;
+               font-weight: 500;
+               font-size: 16px;
+               & + .van-button{
+                  margin-left: 15px;
+               }
+            }
+         }
+      }
+   }
 }
-.vipPopup{
-  pointer-events: initial !important;
-  & *{
-    pointer-events: initial !important;
-  }
-}

src/page-instrument/component/vip/index.tsx

@@ -7,31 +7,25 @@ import dayjs from "dayjs"
 import { storeData } from "/src/store"
 import { postMessage } from "/src/utils/native-message"
 import { usePageVisibility } from "@vant/use"
-import { studentQueryUserInfo } from "/src/page-instrument/api"
+import { getMusicSheetDetail } from "/src/utils/baseApi"
 import { api_back } from "/src/helpers/communication"
 
 export const vipData = reactive({
    show: false
 })
 
-export const isVip = computed(() => {
-   return dayjs().isBefore(dayjs(storeData.user?.membershipEndTime))
-})
-
 export default defineComponent({
    name: "vip-popup",
    setup() {
       const getContent = computed(() => {
-         if (state.isHomeWork) {
-            return "您还不是团练宝会员，请开通服务后使用该功能"
-         } else if (state.isSchool) {
+         if (state.isSchool) {
             return "VIP曲目暂不可用"
          } else {
-            return "您尚未开通云练习服务，请联系乐团老师开通"
+            return "该曲目暂未解锁，解锁更多曲目，享受全新学习体验"
          }
       })
       onMounted(() => {
-         if (state.isHomeWork && !isVip.value && state.paymentType === "VIP") {
+         if (state.isHomeWork && state.paymentType === "LOCK") {
             vipData.show = true
          }
       })
@@ -71,13 +65,10 @@ export default defineComponent({
       const pageVisibility = usePageVisibility()
       watch(pageVisibility, value => {
          if (state.isHomeWork && value === "visible") {
-            if (!isVip.value) {
-               studentQueryUserInfo().then(res => {
+            if (state.paymentType === "LOCK") {
+               getMusicSheetDetail(state.examSongId).then(res => {
                   if (res.code === 200) {
-                     storeData.user.membershipEndTime = res?.data?.membershipEndTime
-                     if (isVip.value) {
-                        vipData.show = false
-                     }
+                     state.paymentType = res?.data?.useStatus
                   }
                })
             }
@@ -97,11 +88,18 @@ export default defineComponent({
                round
             >
                <div class={styles.vip}>
-                  <img src={TipsIcon} />
-                  <p>{getContent.value}</p>
-                  <Button class={styles.btn} round color="#01C1B5" onClick={hanldeOpen}>
-                     {state.isHomeWork ? "开通" : " 确定"}
-                  </Button>
+                  <div class={styles.title}>
+                     <div class={styles.tit}>温馨提示</div>
+                  </div>
+                  <div class={styles.text}>{getContent.value}</div>
+                  <div class={styles.btnCon}>
+                     <Button class={styles.btn} round onClick={handleClose}>
+                        取消
+                     </Button>
+                     <Button class={styles.btn} round color="#01C1B5" onClick={hanldeOpen}>
+                        {state.isHomeWork ? "开通" : " 确定"}
+                     </Button>
+                  </div>
                </div>
             </Popup>
          </>

src/state.ts

@@ -1713,7 +1713,7 @@ const setState = (data: any, index: number) => {
   state.appName = "COLEXIU";
   state.detailId = data.bizId;
   state.xmlUrl = data.xmlFileUrl;
-  state.paymentType = data.paymentType
+  state.paymentType = data.useStatus
   state.partIndex = index >= 0 ? index : 0;
   state.trackId = data.track;
   state.subjectId = data.subjectIds ? data.subjectIds.split(',')?.[0] : 0;

src/store.ts

@@ -5,8 +5,6 @@ type IUser = {
   nickname?: string;
   /** 真实姓名 */
   realName?: string;
-  /** 会员结束时间 */
-  membershipEndTime?: string;
   tenantId?: number;
   /** 声部名称 */
   subjectId?: any;

vite.config.ts

@@ -52,7 +52,7 @@ export default defineConfig({
     // https: true,
     proxy: {
       "^/instrument/.*": {
-        target: "https://test.gym.lexiaoya.cn",
+        target: "https://dev.gym.lexiaoya.cn",
         changeOrigin: true,
         rewrite: (path) => path.replace(/^\/instrument/, ""),
       },