合并

dist/assets/home-layout-center-legacy.4d3669d7.js

@@ -1 +1,5 @@
+<<<<<<<< HEAD:dist/assets/home-layout-center-legacy.4d3669d7.js
 !function(){function e(e,t,n,r,o,s,u){try{var a=e[s](u),c=a.value}catch(i){return void n(i)}a.done?t(c):Promise.resolve(c).then(r,o)}System.register(["./ResizeObserver.es-legacy.a00a8dbb.js","./index-legacy.2de41ec0.js","./auth-legacy.712e3a9c.js","./routes-common-legacy.4db4e205.js"],(function(t){"use strict";var n,r,o,s,u,a,c,i,f,l;return{setters:[function(e){n=e.d,r=e.g,o=e.u,s=e.p,u=e.i,a=e.j,c=e.C,i=e.F},function(e){f=e.a,l=e.b},function(){},function(){}],execute:function(){t("default",n({name:"home-layout-center",data:function(){return{status:!1}},mounted:function(){this.getUserInfo()},methods:{getUserInfo:function(){var t,n=this;return(t=regeneratorRuntime.mark((function e(){var t,a,c;return regeneratorRuntime.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.prev=0,e.next=3,f.post("/api-auth/smsLogin",{requestType:"form",data:{clientId:"student",clientSecret:"student",phone:r.orchestraInfo.phone,token:r.orchestraInfo.token,isSurportRegister:!0}});case 3:return t=e.sent,a=t.data.authentication,o(a.token_type+" "+a.access_token),s({api:"setCache",content:{key:"h5-colexiu-token",value:a.token_type+" "+a.access_token}}),e.next=9,f.get("/api-student/student/queryUserInfo",{initRequest:!0});case 9:c=e.sent,u(c.data),n.$router.push("/home"),e.next=17;break;case 14:e.prev=14,e.t0=e.catch(0),n.status=!0;case 17:case"end":return e.stop()}}),e,null,[[0,14]])})),function(){var n=this,r=arguments;return new Promise((function(o,s){var u=t.apply(n,r);function a(t){e(u,o,s,a,c,"next",t)}function c(t){e(u,o,s,a,c,"throw",t)}a(void 0)}))})()}},render:function(){return a(i,null,[this.status?a("div",{class:l.error},[a(c,{type:"notFond",classImgSize:"CERT",tips:"加载失败，请稍后重试",buttonText:"重新加载",plain:!0,onClick:this.getUserInfo},null)]):a("div",null,null)])}}))}}}))}();
+========
+!function(){function e(e,t,n,r,o,s,u){try{var a=e[s](u),c=a.value}catch(i){return void n(i)}a.done?t(c):Promise.resolve(c).then(r,o)}System.register(["./ResizeObserver.es-legacy.eb2579c3.js","./index-legacy.ae07600a.js","./auth-legacy.3d68a276.js","./routes-common-legacy.0bbc87e3.js"],(function(t){"use strict";var n,r,o,s,u,a,c,i,f,l;return{setters:[function(e){n=e.d,r=e.g,o=e.u,s=e.p,u=e.i,a=e.j,c=e.C,i=e.F},function(e){f=e.a,l=e.b},function(){},function(){}],execute:function(){t("default",n({name:"home-layout-center",data:function(){return{status:!1}},mounted:function(){this.getUserInfo()},methods:{getUserInfo:function(){var t,n=this;return(t=regeneratorRuntime.mark((function e(){var t,a,c;return regeneratorRuntime.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.prev=0,e.next=3,f.post("/api-auth/smsLogin",{requestType:"form",data:{clientId:"student",clientSecret:"student",phone:r.orchestraInfo.phone,token:r.orchestraInfo.token,isSurportRegister:!0}});case 3:return t=e.sent,a=t.data.authentication,o(a.token_type+" "+a.access_token),s({api:"setCache",content:{key:"h5-colexiu-token",value:a.token_type+" "+a.access_token}}),e.next=9,f.get("/api-student/student/queryUserInfo",{initRequest:!0});case 9:c=e.sent,u(c.data),n.$router.push("/home"),e.next=17;break;case 14:e.prev=14,e.t0=e.catch(0),n.status=!0;case 17:case"end":return e.stop()}}),e,null,[[0,14]])})),function(){var n=this,r=arguments;return new Promise((function(o,s){var u=t.apply(n,r);function a(t){e(u,o,s,a,c,"next",t)}function c(t){e(u,o,s,a,c,"throw",t)}a(void 0)}))})()}},render:function(){return a(i,null,[this.status?a("div",{class:l.error},[a(c,{type:"notFond",classImgSize:"CERT",tips:"加载失败，请稍后重试",buttonText:"重新加载",plain:!0,onClick:this.getUserInfo},null)]):a("div",null,null)])}}))}}}))}();
+>>>>>>>> iteration-20240715:dist/assets/home-layout-center-legacy.6edf2adb.js

dist/assets/home-layout-center-legacy.6edf2adb.js

@@ -0,0 +1,5 @@
+<<<<<<<< HEAD:dist/assets/home-layout-center-legacy.4d3669d7.js
+!function(){function e(e,t,n,r,o,s,u){try{var a=e[s](u),c=a.value}catch(i){return void n(i)}a.done?t(c):Promise.resolve(c).then(r,o)}System.register(["./ResizeObserver.es-legacy.a00a8dbb.js","./index-legacy.2de41ec0.js","./auth-legacy.712e3a9c.js","./routes-common-legacy.4db4e205.js"],(function(t){"use strict";var n,r,o,s,u,a,c,i,f,l;return{setters:[function(e){n=e.d,r=e.g,o=e.u,s=e.p,u=e.i,a=e.j,c=e.C,i=e.F},function(e){f=e.a,l=e.b},function(){},function(){}],execute:function(){t("default",n({name:"home-layout-center",data:function(){return{status:!1}},mounted:function(){this.getUserInfo()},methods:{getUserInfo:function(){var t,n=this;return(t=regeneratorRuntime.mark((function e(){var t,a,c;return regeneratorRuntime.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.prev=0,e.next=3,f.post("/api-auth/smsLogin",{requestType:"form",data:{clientId:"student",clientSecret:"student",phone:r.orchestraInfo.phone,token:r.orchestraInfo.token,isSurportRegister:!0}});case 3:return t=e.sent,a=t.data.authentication,o(a.token_type+" "+a.access_token),s({api:"setCache",content:{key:"h5-colexiu-token",value:a.token_type+" "+a.access_token}}),e.next=9,f.get("/api-student/student/queryUserInfo",{initRequest:!0});case 9:c=e.sent,u(c.data),n.$router.push("/home"),e.next=17;break;case 14:e.prev=14,e.t0=e.catch(0),n.status=!0;case 17:case"end":return e.stop()}}),e,null,[[0,14]])})),function(){var n=this,r=arguments;return new Promise((function(o,s){var u=t.apply(n,r);function a(t){e(u,o,s,a,c,"next",t)}function c(t){e(u,o,s,a,c,"throw",t)}a(void 0)}))})()}},render:function(){return a(i,null,[this.status?a("div",{class:l.error},[a(c,{type:"notFond",classImgSize:"CERT",tips:"加载失败，请稍后重试",buttonText:"重新加载",plain:!0,onClick:this.getUserInfo},null)]):a("div",null,null)])}}))}}}))}();
+========
+!function(){function e(e,t,n,r,o,s,u){try{var a=e[s](u),c=a.value}catch(i){return void n(i)}a.done?t(c):Promise.resolve(c).then(r,o)}System.register(["./ResizeObserver.es-legacy.eb2579c3.js","./index-legacy.ae07600a.js","./auth-legacy.3d68a276.js","./routes-common-legacy.0bbc87e3.js"],(function(t){"use strict";var n,r,o,s,u,a,c,i,f,l;return{setters:[function(e){n=e.d,r=e.g,o=e.u,s=e.p,u=e.i,a=e.j,c=e.C,i=e.F},function(e){f=e.a,l=e.b},function(){},function(){}],execute:function(){t("default",n({name:"home-layout-center",data:function(){return{status:!1}},mounted:function(){this.getUserInfo()},methods:{getUserInfo:function(){var t,n=this;return(t=regeneratorRuntime.mark((function e(){var t,a,c;return regeneratorRuntime.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.prev=0,e.next=3,f.post("/api-auth/smsLogin",{requestType:"form",data:{clientId:"student",clientSecret:"student",phone:r.orchestraInfo.phone,token:r.orchestraInfo.token,isSurportRegister:!0}});case 3:return t=e.sent,a=t.data.authentication,o(a.token_type+" "+a.access_token),s({api:"setCache",content:{key:"h5-colexiu-token",value:a.token_type+" "+a.access_token}}),e.next=9,f.get("/api-student/student/queryUserInfo",{initRequest:!0});case 9:c=e.sent,u(c.data),n.$router.push("/home"),e.next=17;break;case 14:e.prev=14,e.t0=e.catch(0),n.status=!0;case 17:case"end":return e.stop()}}),e,null,[[0,14]])})),function(){var n=this,r=arguments;return new Promise((function(o,s){var u=t.apply(n,r);function a(t){e(u,o,s,a,c,"next",t)}function c(t){e(u,o,s,a,c,"throw",t)}a(void 0)}))})()}},render:function(){return a(i,null,[this.status?a("div",{class:l.error},[a(c,{type:"notFond",classImgSize:"CERT",tips:"加载失败，请稍后重试",buttonText:"重新加载",plain:!0,onClick:this.getUserInfo},null)]):a("div",null,null)])}}))}}}))}();
+>>>>>>>> iteration-20240715:dist/assets/home-layout-center-legacy.6edf2adb.js

dist/assets/home-layout-center.34a70498.js

@@ -1 +1,5 @@
+<<<<<<<< HEAD:dist/assets/home-layout-center.34a70498.js
 import{d as r,g as s,u,p as i,i as c,j as e,C as l,F as p}from"./ResizeObserver.es.24b5ac75.js";import{a,b as h}from"./index.ced9b05c.js";import"./auth.93c7978c.js";import"./routes-common.85787a9f.js";var g=r({name:"home-layout-center",data(){return{status:!1}},mounted(){this.getUserInfo()},methods:{async getUserInfo(){try{const o=await a.post("/api-auth/smsLogin",{requestType:"form",data:{clientId:"student",clientSecret:"student",phone:s.orchestraInfo.phone,token:s.orchestraInfo.token,isSurportRegister:!0}}),{authentication:t}=o.data;u(t.token_type+" "+t.access_token),i({api:"setCache",content:{key:"h5-colexiu-token",value:t.token_type+" "+t.access_token}});const n=await a.get("/api-student/student/queryUserInfo",{initRequest:!0});c(n.data),this.$router.push("/home")}catch{this.status=!0}}},render(){return e(p,null,[this.status?e("div",{class:h.error},[e(l,{type:"notFond",classImgSize:"CERT",tips:"\u52A0\u8F7D\u5931\u8D25\uFF0C\u8BF7\u7A0D\u540E\u91CD\u8BD5",buttonText:"\u91CD\u65B0\u52A0\u8F7D",plain:!0,onClick:this.getUserInfo},null)]):e("div",null,null)])}});export{g as default};
+========
+import{d as r,g as s,u,p as i,i as c,j as e,C as l,F as p}from"./ResizeObserver.es.78a052b8.js";import{a,b as h}from"./index.d81c3e84.js";import"./auth.d46848d0.js";import"./routes-common.2bb53520.js";var g=r({name:"home-layout-center",data(){return{status:!1}},mounted(){this.getUserInfo()},methods:{async getUserInfo(){try{const o=await a.post("/api-auth/smsLogin",{requestType:"form",data:{clientId:"student",clientSecret:"student",phone:s.orchestraInfo.phone,token:s.orchestraInfo.token,isSurportRegister:!0}}),{authentication:t}=o.data;u(t.token_type+" "+t.access_token),i({api:"setCache",content:{key:"h5-colexiu-token",value:t.token_type+" "+t.access_token}});const n=await a.get("/api-student/student/queryUserInfo",{initRequest:!0});c(n.data),this.$router.push("/home")}catch{this.status=!0}}},render(){return e(p,null,[this.status?e("div",{class:h.error},[e(l,{type:"notFond",classImgSize:"CERT",tips:"\u52A0\u8F7D\u5931\u8D25\uFF0C\u8BF7\u7A0D\u540E\u91CD\u8BD5",buttonText:"\u91CD\u65B0\u52A0\u8F7D",plain:!0,onClick:this.getUserInfo},null)]):e("div",null,null)])}});export{g as default};
+>>>>>>>> iteration-20240715:dist/assets/home-layout-center.b16b7fb4.js

dist/assets/home-layout-center.b16b7fb4.js

@@ -0,0 +1,5 @@
+<<<<<<<< HEAD:dist/assets/home-layout-center.34a70498.js
+import{d as r,g as s,u,p as i,i as c,j as e,C as l,F as p}from"./ResizeObserver.es.24b5ac75.js";import{a,b as h}from"./index.ced9b05c.js";import"./auth.93c7978c.js";import"./routes-common.85787a9f.js";var g=r({name:"home-layout-center",data(){return{status:!1}},mounted(){this.getUserInfo()},methods:{async getUserInfo(){try{const o=await a.post("/api-auth/smsLogin",{requestType:"form",data:{clientId:"student",clientSecret:"student",phone:s.orchestraInfo.phone,token:s.orchestraInfo.token,isSurportRegister:!0}}),{authentication:t}=o.data;u(t.token_type+" "+t.access_token),i({api:"setCache",content:{key:"h5-colexiu-token",value:t.token_type+" "+t.access_token}});const n=await a.get("/api-student/student/queryUserInfo",{initRequest:!0});c(n.data),this.$router.push("/home")}catch{this.status=!0}}},render(){return e(p,null,[this.status?e("div",{class:h.error},[e(l,{type:"notFond",classImgSize:"CERT",tips:"\u52A0\u8F7D\u5931\u8D25\uFF0C\u8BF7\u7A0D\u540E\u91CD\u8BD5",buttonText:"\u91CD\u65B0\u52A0\u8F7D",plain:!0,onClick:this.getUserInfo},null)]):e("div",null,null)])}});export{g as default};
+========
+import{d as r,g as s,u,p as i,i as c,j as e,C as l,F as p}from"./ResizeObserver.es.78a052b8.js";import{a,b as h}from"./index.d81c3e84.js";import"./auth.d46848d0.js";import"./routes-common.2bb53520.js";var g=r({name:"home-layout-center",data(){return{status:!1}},mounted(){this.getUserInfo()},methods:{async getUserInfo(){try{const o=await a.post("/api-auth/smsLogin",{requestType:"form",data:{clientId:"student",clientSecret:"student",phone:s.orchestraInfo.phone,token:s.orchestraInfo.token,isSurportRegister:!0}}),{authentication:t}=o.data;u(t.token_type+" "+t.access_token),i({api:"setCache",content:{key:"h5-colexiu-token",value:t.token_type+" "+t.access_token}});const n=await a.get("/api-student/student/queryUserInfo",{initRequest:!0});c(n.data),this.$router.push("/home")}catch{this.status=!0}}},render(){return e(p,null,[this.status?e("div",{class:h.error},[e(l,{type:"notFond",classImgSize:"CERT",tips:"\u52A0\u8F7D\u5931\u8D25\uFF0C\u8BF7\u7A0D\u540E\u91CD\u8BD5",buttonText:"\u91CD\u65B0\u52A0\u8F7D",plain:!0,onClick:this.getUserInfo},null)]):e("div",null,null)])}});export{g as default};
+>>>>>>>> iteration-20240715:dist/assets/home-layout-center.b16b7fb4.js

dist/assets/item.5e321eb3.js

@@ -0,0 +1 @@
+import{d as c,j as o,A as t,bA as d}from"./ResizeObserver.es.78a052b8.js";import{C as n}from"./index.87dd27a5.js";import{I as r}from"./index.4461c33e.js";import{f as _}from"./cart.f2ed296e.js";const i="_shopOrder_gd5fj_1",g="_goodsList_gd5fj_7",a="_payTime_gd5fj_10",l="_payStatus_gd5fj_14",p="_paySuccess_gd5fj_17",f="_cellGroup_gd5fj_20",u="_goodsImg_gd5fj_25",m="_goodsContainer_gd5fj_31",j="_goodsTitle_gd5fj_34",C="_model_gd5fj_39",y="_goodsPrice_gd5fj_45",b="_num_gd5fj_49",I="_btnList_gd5fj_55",S="_price_gd5fj_63",v="_coupon_gd5fj_71",T="_sureGoods_gd5fj_75",G="_field_gd5fj_81",h="_returnDes_gd5fj_91",L="_confirmReceipt_gd5fj_100",P="_bottomCell_gd5fj_105",A="_sectionCell_gd5fj_112",x="_orderSn_gd5fj_117",O="_iconChecked_gd5fj_121";var s={shopOrder:i,goodsList:g,payTime:a,payStatus:l,paySuccess:p,cellGroup:f,goodsImg:u,goodsContainer:m,goodsTitle:j,model:C,goodsPrice:y,num:b,btnList:I,price:S,coupon:v,sureGoods:T,field:G,"btn-group":"_btn-group_gd5fj_88",returnDes:h,confirmReceipt:L,bottomCell:P,sectionCell:A,orderSn:x,iconChecked:O},V=c({name:"GoodItem",props:{item:{type:Object,default:{}}},setup({item:e}){return()=>o(n,{center:!0},{icon:()=>o(r,{class:s.goodsImg,src:e.productPic,fit:"cover"},null),default:()=>o("div",{class:s.goodsContainer},[o("div",{class:[s.goodsTitle,"van-ellipsis"]},[e.productName]),o("div",{class:s.model},[_(e.productAttr)]),o("div",{class:s.goodsPrice},[o("span",{class:s.price},[o("i",null,[t("\xA5")]),d(e.productPrice)]),o("span",{class:s.num},[t("x"),e.productQuantity||e.productCount])])])})}});export{V as I,s};

dist/assets/item.7e571da2.css

@@ -1 +0,0 @@
-._shopOrder_1n7p9_1{--van-nav-bar-text-color: #666666}._shopOrder_1n7p9_1 .van-tab__panel{min-height:calc(100vh - var(--van-tabs-line-height) - var(--van-nav-bar-height) - 1.2rem)}._goodsList_1n7p9_7{margin-top:.32rem}._payTime_1n7p9_10{font-size:.34667rem;color:#666}._payStatus_1n7p9_14{color:#ff4e19}._paySuccess_1n7p9_17{color:var(--van-primary)}._cellGroup_1n7p9_20{margin:.32rem .37333rem;border-radius:.26667rem;overflow:hidden}._goodsImg_1n7p9_25{width:2.66667rem;height:2.66667rem;border-radius:.21333rem;overflow:hidden}._goodsContainer_1n7p9_31{margin-left:.26667rem}._goodsTitle_1n7p9_34{font-size:.42667rem;color:#333;line-height:.58667rem}._model_1n7p9_39{font-size:.37333rem;color:#999;line-height:.53333rem;padding:.16rem 0 .26667rem}._goodsPrice_1n7p9_45{display:flex;justify-content:space-between}._goodsPrice_1n7p9_45 ._num_1n7p9_49{font-size:.32rem;font-weight:500;color:#666;line-height:.45333rem}._btnList_1n7p9_55{display:flex;align-items:center;justify-content:flex-end}._btnList_1n7p9_55 .van-button+.van-button{margin-left:.26667rem}._price_1n7p9_63{color:#ff4e19;font-size:.42667rem}._price_1n7p9_63 i{font-size:.32rem;font-style:normal}._coupon_1n7p9_71{font-size:.32rem;color:#ff4e19}._sureGoods_1n7p9_75{padding-right:.32rem;font-size:.32rem;color:#999;line-height:.45333rem}._field_1n7p9_81{margin:0 .69333rem .34667rem;border:.02667rem solid #dedede;width:auto;border-radius:.26667rem;overflow:hidden}._btn-group_1n7p9_88{padding:0 15% .32rem}._returnDes_1n7p9_91{color:#666;font-size:.37333rem;margin-right:auto}._confirmReceipt_1n7p9_96{font-size:.32rem;color:#999;margin-right:.50667rem}

dist/index.html

@@ -97,6 +97,17 @@
             _T_));
     })(Object);
   </script>
+<<<<<<< HEAD
+=======
+  <script type="module" crossorigin src="./assets/index.d81c3e84.js"></script>
+  <link rel="modulepreload" href="./assets/ResizeObserver.es.78a052b8.js">
+  <link rel="modulepreload" href="./assets/auth.d46848d0.js">
+  <link rel="modulepreload" href="./assets/routes-common.2bb53520.js">
+  <link rel="stylesheet" href="./assets/ResizeObserver.es.6e083b37.css">
+  <link rel="stylesheet" href="./assets/auth.f09b6d78.css">
+  <link rel="stylesheet" href="./assets/index.820e7d12.css">
+  <script type="module">!function(){try{new Function("m","return import(m)")}catch(o){console.warn("vite: loading legacy build because dynamic import is unsupported, syntax error above should be ignored");var e=document.getElementById("vite-legacy-polyfill"),n=document.createElement("script");n.src=e.src,n.onload=function(){System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'))},document.body.appendChild(n)}}();</script>
+>>>>>>> iteration-20240715
 </head>
 
 <body>
@@ -105,7 +116,11 @@
   <!-- <script type="module" src="/src/teacher/main.ts"></script> -->
   <script nomodule>!function(){var e=document,t=e.createElement("script");if(!("noModule"in t)&&"onbeforeload"in t){var n=!1;e.addEventListener("beforeload",(function(e){if(e.target===t)n=!0;else if(!e.target.hasAttribute("nomodule")||!n)return;e.preventDefault()}),!0),t.type="module",t.src=".",e.head.appendChild(t),t.remove()}}();</script>
   <script nomodule id="vite-legacy-polyfill" src="./assets/polyfills-legacy.d15f7bf4.js"></script>
+<<<<<<< HEAD
   <script nomodule id="vite-legacy-entry" data-src="./assets/index-legacy.2de41ec0.js">System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'))</script>
+=======
+  <script nomodule id="vite-legacy-entry" data-src="./assets/index-legacy.ae07600a.js">System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'))</script>
+>>>>>>> iteration-20240715
 </body>
 
 </html>

dist/teacher.html

@@ -94,6 +94,15 @@
             _T_));
     })(Object);
   </script>
+<<<<<<< HEAD
+=======
+  <script type="module" crossorigin src="./assets/teacher.764c7387.js"></script>
+  <link rel="modulepreload" href="./assets/ResizeObserver.es.78a052b8.js">
+  <link rel="modulepreload" href="./assets/routes-common.2bb53520.js">
+  <link rel="stylesheet" href="./assets/ResizeObserver.es.6e083b37.css">
+  <link rel="stylesheet" href="./assets/teacher.ded4b243.css">
+  <script type="module">!function(){try{new Function("m","return import(m)")}catch(o){console.warn("vite: loading legacy build because dynamic import is unsupported, syntax error above should be ignored");var e=document.getElementById("vite-legacy-polyfill"),n=document.createElement("script");n.src=e.src,n.onload=function(){System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'))},document.body.appendChild(n)}}();</script>
+>>>>>>> iteration-20240715
 </head>
 
 <body>
@@ -101,7 +110,11 @@
   
   <script nomodule>!function(){var e=document,t=e.createElement("script");if(!("noModule"in t)&&"onbeforeload"in t){var n=!1;e.addEventListener("beforeload",(function(e){if(e.target===t)n=!0;else if(!e.target.hasAttribute("nomodule")||!n)return;e.preventDefault()}),!0),t.type="module",t.src=".",e.head.appendChild(t),t.remove()}}();</script>
   <script nomodule id="vite-legacy-polyfill" src="./assets/polyfills-legacy.d15f7bf4.js"></script>
+<<<<<<< HEAD
   <script nomodule id="vite-legacy-entry" data-src="./assets/teacher-legacy.1449aed3.js">System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'))</script>
+=======
+  <script nomodule id="vite-legacy-entry" data-src="./assets/teacher-legacy.c4947851.js">System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'))</script>
+>>>>>>> iteration-20240715
 </body>
 
 </html>

dist/tenant.html

@@ -52,9 +52,15 @@
             _T_));
     })(Object);
   </script>
+<<<<<<< HEAD
   <script type="module" crossorigin src="./assets/tenant.306e566e.js"></script>
   <link rel="modulepreload" href="./assets/ResizeObserver.es.24b5ac75.js">
   <link rel="modulepreload" href="./assets/auth.93c7978c.js">
+=======
+  <script type="module" crossorigin src="./assets/tenant.6309f8aa.js"></script>
+  <link rel="modulepreload" href="./assets/ResizeObserver.es.78a052b8.js">
+  <link rel="modulepreload" href="./assets/auth.d46848d0.js">
+>>>>>>> iteration-20240715
   <link rel="stylesheet" href="./assets/ResizeObserver.es.6e083b37.css">
   <link rel="stylesheet" href="./assets/auth.f09b6d78.css">
   <link rel="stylesheet" href="./assets/tenant.d44cc3f0.css">
@@ -67,7 +73,11 @@
   <!-- <script type="module" src="/src/teacher/main.ts"></script> -->
   <script nomodule>!function(){var e=document,t=e.createElement("script");if(!("noModule"in t)&&"onbeforeload"in t){var n=!1;e.addEventListener("beforeload",(function(e){if(e.target===t)n=!0;else if(!e.target.hasAttribute("nomodule")||!n)return;e.preventDefault()}),!0),t.type="module",t.src=".",e.head.appendChild(t),t.remove()}}();</script>
   <script nomodule id="vite-legacy-polyfill" src="./assets/polyfills-legacy.d15f7bf4.js"></script>
+<<<<<<< HEAD
   <script nomodule id="vite-legacy-entry" data-src="./assets/tenant-legacy.5850aa4a.js">System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'))</script>
+=======
+  <script nomodule id="vite-legacy-entry" data-src="./assets/tenant-legacy.dbae8b24.js">System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'))</script>
+>>>>>>> iteration-20240715
 </body>
 
 </html>

src/components/col-share/share-item.tsx

@@ -53,7 +53,7 @@ export default defineComponent({
       } else if (this.shareType === 'mall') {
         return '这件商品挺不错！推荐给你～'
       } else if (this.shareType === 'vip') {
-        return '小酷Ai智能陪练VIP！推荐给你~'
+        return '小酷Ai智能陪练！推荐给你~'
       } else if (this.shareType === 'album') {
         return '更多曲目扫码下载酷乐秀查看'
       } else {

src/constant/index.ts

@@ -34,7 +34,16 @@ export const memberType = {
   MONTH: '月度会员',
   QUARTERLY: '季度会员',
   YEAR_HALF: '半年会员',
-  YEAR: '年度会员'
+  YEAR: '年度会员',
+  PERPETUAL: '永久会员'
+}
+
+export const memberSimpleType = {
+  MONTH: '月度',
+  QUARTERLY: '季度',
+  YEAR_HALF: '半年',
+  YEAR: '年度',
+  PERPETUAL: '永久'
 }
 
 export const courseType = {

src/helpers/request.ts

@@ -88,7 +88,7 @@ request.interceptors.response.use(
       throw new Error(msg)
     }
     const data = await res.clone().json()
-    const otherCode = [200, 0, 999, 5004]
+    const otherCode = [200, 0, 999, 5004, 998]
     if (!otherCode.includes(data.code)) {
       let msg = data.msg || data.message || '处理失败，请重试'
       if (initRequest) {

src/student/teacher-dependent/model/teacher-header.module.less

@@ -1,355 +1,398 @@
-.headerContent {
-  padding-top: 40px;
-  padding-bottom: 20px;
-  min-height: 100px;
-  position: relative;
-}
-.teacherContent {
-  display: flex;
-  justify-content: space-between;
-  flex-shrink: 0;
-}
-.teacherIcon {
-  position: relative;
-  margin-top: -38px;
-  line-height: 0;
-  .avatar {
-    position: relative;
-    width: 78px;
-    height: 78px;
-    box-sizing: border-box;
-    border: 2px solid #fff;
-    background-color: #fff;
-  }
-  .avatarActive {
-    border-color: #ffe0b9;
-    background-color: #ffe0b9;
-  }
-  .teacherIconVip {
-    position: absolute;
-    bottom: 0;
-    right: -30px;
-    width: 46px;
-    height: 20px;
-  }
-}
-.teacherInfo {
-  display: flex;
-  align-items: center;
-  padding: 14px 0;
-  .teacherInfoName {
-    font-size: 20px;
-    font-weight: 500;
-    color: #1a1a1a;
-    // line-height: 22px;
-    max-width: 150px;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-  & > img {
-    margin-left: 10px;
-    width: 39px;
-    height: 16px;
-  }
-}
-.teacherHonor {
-  display: flex;
-  align-items: center;
-  font-size: 12px;
-  line-height: 16px;
-  color: #666;
-  font-weight: 500;
-  padding-bottom: 12px;
-  padding-top: 10px;
-  .score {
-    margin-left: 25px;
-  }
-}
-
-.headerCount {
-  width: calc(100% - 28px);
-  padding: 12px;
-  margin: 0 auto;
-  background-color: #fff;
-  border-radius: 10px;
-  box-sizing: border-box;
-}
-
-.teacherOperation {
-  :global {
-    .van-button {
-      height: 28px;
-    }
-  }
-
-  .btn {
-    padding: 3px 12px 1px;
-    min-width: 62px;
-  }
-  .btnStar {
-    color: #f18400;
-    border-color: #f18400;
-  }
-}
-
-.subjectSection {
-  margin-right: 10px;
-  // height: 18px;
-  max-width: 68px;
-  box-sizing: content-box;
-}
-
-.teacher-bottom {
-  padding: 30px 0 0 0;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-.followFans {
-  padding-top: 10px !important;
-}
-
-.teacher-data {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-
-  .teacher-data_item {
-    font-size: 14px;
-    color: #333333;
-    position: relative;
-    span {
-      font-weight: 500;
-      color: #000000;
-      font-size: 20px;
-      margin-left: 5px;
-    }
-    &::after {
-      content: ' ';
-      display: inline-block;
-      position: absolute;
-      right: 0px;
-      top: 2px;
-      width: 1px;
-      height: 16px;
-      background: #ebebeb;
-    }
-    &:first-child {
-      padding-right: 15px;
-      margin-right: 15px;
-    }
-    &:last-child {
-      &::after {
-        display: none;
-      }
-    }
-  }
-}
-
-.iconVip {
-  width: 34px !important;
-  margin-right: 5px;
-}
-
-.iconOther {
-  margin-left: 6px;
-  width: 18px;
-  height: 18px;
-}
-
-.teacher-info {
-  margin-left: 8px;
-  .teacher-name {
-    font-size: 18px;
-    font-weight: 500;
-    color: #1a1a1a;
-    padding-bottom: 6px;
-    display: flex;
-    justify-content: space-between;
-    .teacherCert {
-      display: flex;
-      align-items: center;
-    }
-
-    .teacherLast {
-      display: inline-block;
-      max-width: 120px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-  }
-}
-
-.subjectList::-webkit-scrollbar {
-  display: none; /* Chrome Safari */
-}
-.subjectList {
-  overflow: auto;
-  width: 255px;
-  // height: 18px;
-  display: flex;
-  flex-wrap: nowrap;
-}
-
-.piNameSubject {
-  display: flex;
-  align-items: center;
-
-  .subject {
-    display: flex;
-    align-items: center;
-    margin-left: 4px;
-    background: #effbf9;
-    border-radius: 8px;
-    font-size: 12px;
-    line-height: 16px;
-    color: #2dc7aa;
-    padding: 0 5px;
-    white-space: nowrap;
-    &:first-child {
-      margin-left: 0;
-    }
-  }
-}
-
-.rTitle {
-  display: flex;
-  align-items: center;
-  &::before {
-    margin-right: 8px;
-    content: ' ';
-    display: inline-block;
-    width: 4px;
-    height: 14px;
-    background: #2dc7aa;
-    border-radius: 3px;
-  }
-}
-
-.liveTag {
-  position: absolute;
-  bottom: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  line-height: 16px;
-  background: #ff6363;
-  border-radius: 20px;
-  text-align: center;
-  color: #fff;
-  font-size: 10px;
-  font-weight: 500;
-  padding: 2px 0;
-  width: 60%;
-  z-index: 10;
-}
-
-.teacherName {
-  display: inline-block;
-  flex: 1;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 100px;
-}
-
-.teacherIcons {
-  display: flex;
-  align-items: center;
-}
-.teaherPopup {
-  background: transparent;
-  width: 276px;
-  overflow: initial;
-}
-.teacherIconWrap {
-  padding: 50px 22px 22px 22px;
-  background-color: #fff;
-  border-radius: 0 0 10px 10px;
-  margin-top: -25px;
-}
-.teacherIconItem {
-  margin-bottom: 16px;
-  .teacherIconItemTop {
-    display: flex;
-    align-items: center;
-    margin-bottom: 10px;
-  }
-  :global {
-    .van-image {
-      margin-right: 8px;
-      width: 24px;
-      height: 24px;
-    }
-  }
-  .teacherIconTitle {
-    font-size: 16px;
-    font-weight: bold;
-    color: #333;
-  }
-  .teacherIconDes {
-    font-size: 12px;
-    line-height: 16px;
-    font-weight: 400;
-    padding-left: 3px;
-    color: #666;
-  }
-}
-.closeIcon {
-  position: absolute;
-  bottom: -54px;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 0.96rem;
-  height: 0.96rem;
-}
-.liveList {
-  padding: 12px 0;
-  .headerFollow {
-    margin-bottom: 12px;
-    .teacherIcon {
-      margin: 0 10px 0 0;
-    }
-    .score {
-      margin-left: 10px;
-    }
-    .teacherIconVip {
-      left: 50%;
-      right: initial;
-      transform: translateX(-50%);
-      bottom: -6px;
-    }
-    .liveTag {
-      // bottom: -30px;
-      width: 80%;
-    }
-    .avatar {
-      width: 60px;
-      height: 60px;
-    }
-    .piNameSubject {
-      align-items: flex-start;
-    }
-    .subjectList {
-      flex-wrap: wrap;
-    }
-    .subject {
-      margin: 2px 5px 3px 0;
-    }
-    .teacher-bottom {
-      padding-top: 24px;
-    }
-    .unlinkeBtn {
-      font-size: 12px;
-      color: #ff6363;
-      border: 1px solid #ff6363;
-      padding: 5px 10px;
-      border-radius: 20px;
-    }
-  }
-}
-.followContainer {
-  display: flex;
-  align-items: flex-start;
-}
+.headerContent {
+  padding-top: 40px;
+  padding-bottom: 20px;
+  min-height: 100px;
+  position: relative;
+}
+
+.teacherContent {
+  display: flex;
+  justify-content: space-between;
+  flex-shrink: 0;
+}
+
+.teacherIcon {
+  position: relative;
+  margin-top: -38px;
+  line-height: 0;
+
+  .avatar {
+    position: relative;
+    width: 78px;
+    height: 78px;
+    box-sizing: border-box;
+    border: 2px solid #fff;
+    background-color: #fff;
+  }
+
+  .avatarActive {
+    border-color: #F0AF88;
+    background-color: #F0AF88;
+  }
+
+  .teacherIconVip {
+    position: absolute;
+    bottom: 0;
+    right: -12px;
+    width: 39px;
+    height: 18px;
+  }
+}
+
+.teacherInfo {
+  display: flex;
+  align-items: center;
+  padding: 14px 0;
+
+  .teacherInfoName {
+    font-size: 20px;
+    font-weight: 500;
+    color: #1a1a1a;
+    // line-height: 22px;
+    max-width: 150px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  &>img {
+    margin-left: 10px;
+    width: 39px;
+    height: 16px;
+  }
+}
+
+.teacherHonor {
+  display: flex;
+  align-items: center;
+  font-size: 12px;
+  line-height: 16px;
+  color: #666;
+  font-weight: 500;
+  padding-bottom: 12px;
+  padding-top: 10px;
+
+  .score {
+    margin-left: 25px;
+  }
+}
+
+.headerCount {
+  width: calc(100% - 28px);
+  padding: 12px;
+  margin: 0 auto;
+  background-color: #fff;
+  border-radius: 10px;
+  box-sizing: border-box;
+}
+
+.teacherOperation {
+  :global {
+    .van-button {
+      height: 28px;
+    }
+  }
+
+  .btn {
+    padding: 3px 12px 1px;
+    min-width: 62px;
+  }
+
+  .btnStar {
+    color: #f18400;
+    border-color: #f18400;
+  }
+}
+
+.subjectSection {
+  margin-right: 10px;
+  // height: 18px;
+  max-width: 68px;
+  box-sizing: content-box;
+}
+
+.teacher-bottom {
+  padding: 30px 0 0 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.followFans {
+  padding-top: 10px !important;
+}
+
+.teacher-data {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  .teacher-data_item {
+    font-size: 14px;
+    color: #333333;
+    position: relative;
+
+    span {
+      font-weight: 500;
+      color: #000000;
+      font-size: 20px;
+      margin-left: 5px;
+    }
+
+    &::after {
+      content: ' ';
+      display: inline-block;
+      position: absolute;
+      right: 0px;
+      top: 2px;
+      width: 1px;
+      height: 16px;
+      background: #ebebeb;
+    }
+
+    &:first-child {
+      padding-right: 15px;
+      margin-right: 15px;
+    }
+
+    &:last-child {
+      &::after {
+        display: none;
+      }
+    }
+  }
+}
+
+.iconVip {
+  width: 34px !important;
+  margin-right: 5px;
+}
+
+.iconOther {
+  margin-left: 6px;
+  width: 18px;
+  height: 18px;
+}
+
+.teacher-info {
+  margin-left: 8px;
+
+  .teacher-name {
+    font-size: 18px;
+    font-weight: 500;
+    color: #1a1a1a;
+    padding-bottom: 6px;
+    display: flex;
+    justify-content: space-between;
+
+    .teacherCert {
+      display: flex;
+      align-items: center;
+    }
+
+    .teacherLast {
+      display: inline-block;
+      max-width: 120px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+}
+
+.subjectList::-webkit-scrollbar {
+  display: none;
+  /* Chrome Safari */
+}
+
+.subjectList {
+  overflow: auto;
+  width: 255px;
+  // height: 18px;
+  display: flex;
+  flex-wrap: nowrap;
+}
+
+.piNameSubject {
+  display: flex;
+  align-items: center;
+
+  .subject {
+    display: flex;
+    align-items: center;
+    margin-left: 4px;
+    background: #effbf9;
+    border-radius: 8px;
+    font-size: 12px;
+    line-height: 16px;
+    color: #2dc7aa;
+    padding: 0 5px;
+    white-space: nowrap;
+
+    &:first-child {
+      margin-left: 0;
+    }
+  }
+}
+
+.rTitle {
+  display: flex;
+  align-items: center;
+
+  &::before {
+    margin-right: 8px;
+    content: ' ';
+    display: inline-block;
+    width: 4px;
+    height: 14px;
+    background: #2dc7aa;
+    border-radius: 3px;
+  }
+}
+
+.liveTag {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  line-height: 16px;
+  background: #ff6363;
+  border-radius: 20px;
+  text-align: center;
+  color: #fff;
+  font-size: 10px;
+  font-weight: 500;
+  padding: 2px 0;
+  width: 60%;
+  z-index: 10;
+}
+
+.teacherName {
+  display: inline-block;
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100px;
+}
+
+.teacherIcons {
+  display: flex;
+  align-items: center;
+}
+
+.teaherPopup {
+  background: transparent;
+  width: 276px;
+  overflow: initial;
+}
+
+.teacherIconWrap {
+  padding: 50px 22px 22px 22px;
+  background-color: #fff;
+  border-radius: 0 0 10px 10px;
+  margin-top: -25px;
+}
+
+.teacherIconItem {
+  margin-bottom: 16px;
+
+  .teacherIconItemTop {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+  }
+
+  :global {
+    .van-image {
+      margin-right: 8px;
+      width: 24px;
+      height: 24px;
+    }
+  }
+
+  .teacherIconTitle {
+    font-size: 16px;
+    font-weight: bold;
+    color: #333;
+  }
+
+  .teacherIconDes {
+    font-size: 12px;
+    line-height: 16px;
+    font-weight: 400;
+    padding-left: 3px;
+    color: #666;
+  }
+}
+
+.closeIcon {
+  position: absolute;
+  bottom: -54px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 0.96rem;
+  height: 0.96rem;
+}
+
+.liveList {
+  padding: 12px 0;
+
+  .headerFollow {
+    margin-bottom: 12px;
+
+    .teacherIcon {
+      margin: 0 10px 0 0;
+    }
+
+    .score {
+      margin-left: 10px;
+    }
+
+    .teacherIconVip {
+      left: 50%;
+      right: initial;
+      transform: translateX(-50%);
+      bottom: -6px;
+    }
+
+    .liveTag {
+      // bottom: -30px;
+      width: 80%;
+    }
+
+    .avatar {
+      width: 60px;
+      height: 60px;
+    }
+
+    .piNameSubject {
+      align-items: flex-start;
+    }
+
+    .subjectList {
+      flex-wrap: wrap;
+    }
+
+    .subject {
+      margin: 2px 5px 3px 0;
+    }
+
+    .teacher-bottom {
+      padding-top: 24px;
+    }
+
+    .unlinkeBtn {
+      font-size: 12px;
+      color: #ff6363;
+      border: 1px solid #ff6363;
+      padding: 5px 10px;
+      border-radius: 20px;
+    }
+  }
+}
+
+.followContainer {
+  display: flex;
+  align-items: flex-start;
+}

src/student/teacher-dependent/model/teacher-header.tsx

@@ -1,313 +1,331 @@
-import { Button, Cell, Icon, Image, Popup, Rate, Toast } from 'vant'
-import { defineComponent } from 'vue'
-import styles from './teacher-header.module.less'
-import { postMessage } from '@/helpers/native-message'
-import iconTeacher from '@common/images/icon_teacher.png'
-import request from '@/helpers/request'
-import IconXueli from '@common/images/icon-xueli.png'
-import IconJiaozi from '@common/images/icon-jiaozi.png'
-import IconChat from '../images/icon-chat.png'
-
-export const getAssetsHomeFile = (fileName: string) => {
-  const path = `../images/${fileName}`
-  const modules = import.meta.globEager('../images/*')
-  return modules[path].default
-}
-
-export default defineComponent({
-  name: 'teacher-header',
-  props: {
-    userInfo: {
-      type: Object,
-      default: {}
-    },
-    teacherId: {
-      type: String || Number,
-      default: ''
-    }
-  },
-  data() {
-    return {
-      iconShow: false
-    }
-  },
-  computed: {
-    subjectNameList() {
-      const userInfo: any = this.userInfo
-      const subjectName = userInfo.subjectName
-      return subjectName ? subjectName.split(',') : []
-    },
-    starGrade() {
-      const { starGrade } = this.userInfo as any
-      return Number(starGrade) || 0
-    }
-  },
-  methods: {
-    async onStart() {
-      // 关注与取消关注
-      try {
-        const star = this.userInfo.isStar ? 0 : 1
-        await request.get('/api-student/teacher/starOrUnStar', {
-          params: {
-            userId: this.teacherId,
-            starStatus: star
-          }
-        })
-        // const str = star ? '关注成功' : '已取消关注'
-        this.userInfo.isStar = star
-        let count = star ? this.userInfo.fansNum + 1 : this.userInfo.fansNum - 1
-        this.userInfo.fansNum = count <= 0 ? 0 : count
-        // Toast(str)
-      } catch {
-        //
-      }
-    },
-    // 检验是否有对应徽章
-    checkBadge(type: string) {
-      // tag : 老师点亮图标
-      // STYLE:个人风采
-      // VIDEO：视频课
-      // LIVE：直播课，
-      // MUSIC：曲目 逗号隔开
-      let status = false
-      const { userInfo } = this
-      switch (type) {
-        case 'STYLE':
-        case 'VIDEO':
-        case 'LIVE':
-        case 'MUSIC':
-          if (userInfo.tag) {
-            status = userInfo.tag.indexOf(type) > -1
-          }
-          break
-        case 'VIP':
-          status = userInfo.isVip > 0
-          break
-        default:
-          status = false
-          break
-      }
-      return status
-    },
-
-    openTeacherIcon() {
-      this.iconShow = true
-    }
-  },
-  render() {
-    const iconList = [
-      {
-        icon: 'cert_active.png',
-        title: '演奏Mlog达人',
-        des: '个人风采中上传老师风采视频并通过审核'
-      },
-      {
-        icon: 'video_active.png',
-        title: '教学视频达人',
-        des: '发布您制作的教学视频课程并通过审核'
-      },
-      {
-        icon: 'live_active.png',
-        title: '直播up达人',
-        des: '达到开通直播权限标准并开通直播功能'
-      },
-      {
-        icon: 'music_active.png',
-        title: '乐谱歌单达人',
-        des: '上传您制作的乐谱并通过审核'
-      }
-    ]
-    return (
-      <>
-        <div class={styles.headerContent}>
-          <div class={styles.headerCount}>
-            <div class={styles.teacherContent}>
-              <div
-                class={styles.teacherIcon}
-                onClick={() => {
-                  // 判断是否在直播中
-                  if (this.userInfo.liveing === 1) {
-                    postMessage({
-                      api: 'joinLiveRoom',
-                      content: {
-                        roomId: this.userInfo.roomUid,
-                        teacherId: this.userInfo.userId
-                      }
-                    })
-                  }
-                }}
-              >
-                {/* iy */}
-                <Image
-                  class={[
-                    styles.avatar,
-                    this.checkBadge('VIP') && styles.avatarActive
-                  ]}
-                  round
-                  src={this.userInfo.heardUrl || iconTeacher}
-                  fit="cover"
-                />
-
-                {this.userInfo.liveing === 1 && (
-                  <p class={styles.liveTag}>直播中</p>
-                )}
-
-                <Image
-                  class={styles.teacherIconVip}
-                  src={
-                    this.checkBadge('VIP')
-                      ? getAssetsHomeFile('vip_active.png')
-                      : getAssetsHomeFile('vip_default.png')
-                  }
-                />
-              </div>
-              <div class={styles.teacherOperation}>
-                <Button
-                  type="primary"
-                  size="small"
-                  plain
-                  round
-                  class={[
-                    styles.btn,
-                    this.userInfo.isStar ? styles.btnStar : ''
-                  ]}
-                  onClick={this.onStart}
-                >
-                  {/* {!this.userInfo.isStar && <Icon name="plus" />} */}
-
-                  {this.userInfo.isStar ? '已关注' : '关注'}
-                </Button>
-                <Button
-                  type="primary"
-                  size="small"
-                  round
-                  style={{ marginLeft: '5px' }}
-                  class={styles.btn}
-                  icon={IconChat}
-                  onClick={() => {
-                    postMessage({
-                      api: 'joinChatGroup',
-                      content: {
-                        type: 'single', // single 单人 multi 多人
-                        id: this.userInfo.imUserId
-                        // id: this.teacherId
-                      }
-                    })
-                  }}
-                >
-                  {/* <Icon name={} size="16" style={{ marginRight: '3px' }} /> */}
-                  聊天
-                </Button>
-              </div>
-            </div>
-            <div class={styles.teacherInfo}>
-              <div class={styles.teacherInfoName}>
-                {this.userInfo.username || `游客${this.userInfo.userId || ''}`}
-              </div>
-              {this.userInfo.degreeFlag ? <img src={IconXueli} /> : null}
-              {this.userInfo.teacherFlag ? <img src={IconJiaozi} /> : null}
-            </div>
-            <div class={styles.teacherHonor}>
-              <div>勋章：</div>
-              <div class={styles.teacherIcons} onClick={this.openTeacherIcon}>
-                <Image
-                  class={styles.iconOther}
-                  src={
-                    this.checkBadge('STYLE')
-                      ? getAssetsHomeFile('cert_active.png')
-                      : getAssetsHomeFile('cert_default.png')
-                  }
-                />
-                <Image
-                  class={styles.iconOther}
-                  src={
-                    this.checkBadge('VIDEO')
-                      ? getAssetsHomeFile('video_active.png')
-                      : getAssetsHomeFile('video_default.png')
-                  }
-                />
-                <Image
-                  class={styles.iconOther}
-                  src={
-                    this.checkBadge('LIVE')
-                      ? getAssetsHomeFile('live_active.png')
-                      : getAssetsHomeFile('live_default.png')
-                  }
-                />
-                <Image
-                  class={styles.iconOther}
-                  src={
-                    this.checkBadge('MUSIC')
-                      ? getAssetsHomeFile('music_active.png')
-                      : getAssetsHomeFile('music_default.png')
-                  }
-                />
-              </div>
-              <div class={styles.score}>评分：</div>
-              <div class={styles.level}>
-                {this.starGrade ? (
-                  <Rate
-                    readonly
-                    modelValue={this.starGrade}
-                    iconPrefix="iconfont"
-                    color="#FFC459"
-                    void-icon="star_default"
-                    icon="star_active"
-                    size={15}
-                  />
-                ) : (
-                  <span style={{ fontSize: '12px', color: '#999999' }}>
-                    暂无评分
-                  </span>
-                )}
-              </div>
-            </div>
-            <div class={styles.piNameSubject}>
-              <Image
-                class={styles.subjectSection}
-                src={getAssetsHomeFile('icon_subject.png')}
-                fit="contain"
-              />
-              <div class={styles.subjectList}>
-                {this.subjectNameList.map((item: any) => (
-                  <span class={styles.subject}>{item}</span>
-                ))}
-              </div>
-            </div>
-            <div class={styles['teacher-bottom']}>
-              <div class={styles['teacher-data']}>
-                <div class={styles['teacher-data_item']}>
-                  粉丝 <span>{this.userInfo.fansNum || 0}</span>
-                </div>
-                <div class={styles['teacher-data_item']}>
-                  已上课时 <span>{this.userInfo.expTime || 0}</span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <Popup class={styles['teaherPopup']} v-model:show={this.iconShow}>
-          <Image src={getAssetsHomeFile('teacher-icon.png')} />
-          <div class={styles.teacherIconWrap}>
-            {iconList.map(n => {
-              return (
-                <div class={styles.teacherIconItem}>
-                  <div class={styles.teacherIconItemTop}>
-                    <Image src={getAssetsHomeFile(n.icon)} />
-                    <div class={styles.teacherIconTitle}>{n.title}</div>
-                  </div>
-                  <div class={styles.teacherIconDes}>{n.des}</div>
-                </div>
-              )
-            })}
-          </div>
-          <Image
-            onClick={() => (this.iconShow = false)}
-            class={styles.closeIcon}
-            src={getAssetsHomeFile('icon-close.png')}
-          />
-        </Popup>
-      </>
-    )
-  }
-})
+import { Button, Cell, Icon, Image, Popup, Rate, Toast } from 'vant'
+import { defineComponent } from 'vue'
+import styles from './teacher-header.module.less'
+import { postMessage } from '@/helpers/native-message'
+import iconTeacher from '@common/images/icon_teacher.png'
+import request from '@/helpers/request'
+import IconXueli from '@common/images/icon-xueli.png'
+import IconJiaozi from '@common/images/icon-jiaozi.png'
+import IconChat from '../images/icon-chat.png'
+
+export const getAssetsHomeFile = (fileName: string) => {
+  const path = `../images/${fileName}`
+  const modules = import.meta.globEager('../images/*')
+  return modules[path].default
+}
+
+export default defineComponent({
+  name: 'teacher-header',
+  props: {
+    userInfo: {
+      type: Object,
+      default: () => ({})
+    },
+    teacherId: {
+      type: String || Number,
+      default: ''
+    }
+  },
+  emits: ['star'],
+  data() {
+    return {
+      iconShow: false
+    }
+  },
+  computed: {
+    subjectNameList() {
+      const userInfo: any = this.userInfo
+      const subjectName = userInfo.subjectName
+      return subjectName ? subjectName.split(',') : []
+    },
+    starGrade() {
+      const { starGrade } = this.userInfo as any
+      return Number(starGrade) || 0
+    }
+  },
+  methods: {
+    async onStart() {
+      // 关注与取消关注
+      try {
+        const star = this.userInfo.isStar ? 0 : 1
+        await request.get('/api-student/teacher/starOrUnStar', {
+          params: {
+            userId: this.teacherId,
+            starStatus: star
+          }
+        })
+        // const str = star ? '关注成功' : '已取消关注'
+        // this.userInfo.isStar = star
+        const count = star
+          ? this.userInfo.fansNum + 1
+          : this.userInfo.fansNum - 1
+        // this.userInfo.fansNum = count <= 0 ? 0 : count
+        this.$emit('star', {
+          isStar: star,
+          fansNum: count <= 0 ? 0 : count
+        })
+
+        // Toast(str)
+      } catch {
+        //
+      }
+    },
+    // 检验是否有对应徽章
+    checkBadge(type: string) {
+      // tag : 老师点亮图标
+      // STYLE:个人风采
+      // VIDEO：视频课
+      // LIVE：直播课，
+      // MUSIC：曲目 逗号隔开
+      let status = false
+      const { userInfo } = this
+      switch (type) {
+        case 'STYLE':
+        case 'VIDEO':
+        case 'LIVE':
+        case 'MUSIC':
+          if (userInfo.tag) {
+            status = userInfo.tag.indexOf(type) > -1
+          }
+          break
+        case 'VIP':
+          status = userInfo.userVip?.vipType === 'VIP'
+          break
+        case 'SVIP':
+          status =
+            userInfo.userVip?.vipType === 'SVIP' ||
+            userInfo.userVip?.vipType === 'PERMANENT_SVIP'
+          break
+        default:
+          status = false
+          break
+      }
+      return status
+    },
+
+    openTeacherIcon() {
+      this.iconShow = true
+    }
+  },
+  render() {
+    const iconList = [
+      {
+        icon: 'cert_active.png',
+        title: '演奏Mlog达人',
+        des: '个人风采中上传老师风采视频并通过审核'
+      },
+      {
+        icon: 'video_active.png',
+        title: '教学视频达人',
+        des: '发布您制作的教学视频课程并通过审核'
+      },
+      {
+        icon: 'live_active.png',
+        title: '直播up达人',
+        des: '达到开通直播权限标准并开通直播功能'
+      },
+      {
+        icon: 'music_active.png',
+        title: '乐谱歌单达人',
+        des: '上传您制作的乐谱并通过审核'
+      }
+    ]
+    return (
+      <>
+        <div class={styles.headerContent}>
+          <div class={styles.headerCount}>
+            <div class={styles.teacherContent}>
+              <div
+                class={styles.teacherIcon}
+                onClick={() => {
+                  // 判断是否在直播中
+                  if (this.userInfo.liveing === 1) {
+                    postMessage({
+                      api: 'joinLiveRoom',
+                      content: {
+                        roomId: this.userInfo.roomUid,
+                        teacherId: this.userInfo.userId
+                      }
+                    })
+                  }
+                }}
+              >
+                {/* iy */}
+                <Image
+                  class={[
+                    styles.avatar,
+                    (this.checkBadge('SVIP') || this.checkBadge('VIP')) &&
+                      styles.avatarActive
+                  ]}
+                  round
+                  src={this.userInfo.heardUrl || iconTeacher}
+                  fit="cover"
+                />
+
+                {this.userInfo.liveing === 1 && (
+                  <p class={styles.liveTag}>直播中</p>
+                )}
+
+                {(this.checkBadge('SVIP') || this.checkBadge('VIP')) && (
+                  <Image
+                    class={styles.teacherIconVip}
+                    src={
+                      this.checkBadge('SVIP')
+                        ? getAssetsHomeFile('svip_active.png')
+                        : this.checkBadge('VIP')
+                        ? getAssetsHomeFile('vip_active.png')
+                        : ''
+                    }
+                  />
+                )}
+              </div>
+              <div class={styles.teacherOperation}>
+                <Button
+                  type="primary"
+                  size="small"
+                  plain
+                  round
+                  class={[
+                    styles.btn,
+                    this.userInfo.isStar ? styles.btnStar : ''
+                  ]}
+                  onClick={this.onStart}
+                >
+                  {/* {!this.userInfo.isStar && <Icon name="plus" />} */}
+
+                  {this.userInfo.isStar ? '已关注' : '关注'}
+                </Button>
+                <Button
+                  type="primary"
+                  size="small"
+                  round
+                  style={{ marginLeft: '5px' }}
+                  class={styles.btn}
+                  icon={IconChat}
+                  onClick={() => {
+                    postMessage({
+                      api: 'joinChatGroup',
+                      content: {
+                        type: 'single', // single 单人 multi 多人
+                        id: this.userInfo.imUserId
+                        // id: this.teacherId
+                      }
+                    })
+                  }}
+                >
+                  {/* <Icon name={} size="16" style={{ marginRight: '3px' }} /> */}
+                  聊天
+                </Button>
+              </div>
+            </div>
+            <div class={styles.teacherInfo}>
+              <div class={styles.teacherInfoName}>
+                {this.userInfo.username || `游客${this.userInfo.userId || ''}`}
+              </div>
+              {this.userInfo.degreeFlag ? <img src={IconXueli} /> : null}
+              {this.userInfo.teacherFlag ? <img src={IconJiaozi} /> : null}
+            </div>
+            <div class={styles.teacherHonor}>
+              <div>勋章：</div>
+              <div class={styles.teacherIcons} onClick={this.openTeacherIcon}>
+                <Image
+                  class={styles.iconOther}
+                  src={
+                    this.checkBadge('STYLE')
+                      ? getAssetsHomeFile('cert_active.png')
+                      : getAssetsHomeFile('cert_default.png')
+                  }
+                />
+                <Image
+                  class={styles.iconOther}
+                  src={
+                    this.checkBadge('VIDEO')
+                      ? getAssetsHomeFile('video_active.png')
+                      : getAssetsHomeFile('video_default.png')
+                  }
+                />
+                <Image
+                  class={styles.iconOther}
+                  src={
+                    this.checkBadge('LIVE')
+                      ? getAssetsHomeFile('live_active.png')
+                      : getAssetsHomeFile('live_default.png')
+                  }
+                />
+                <Image
+                  class={styles.iconOther}
+                  src={
+                    this.checkBadge('MUSIC')
+                      ? getAssetsHomeFile('music_active.png')
+                      : getAssetsHomeFile('music_default.png')
+                  }
+                />
+              </div>
+              <div class={styles.score}>评分：</div>
+              <div class={styles.level}>
+                {this.starGrade ? (
+                  <Rate
+                    readonly
+                    modelValue={this.starGrade}
+                    iconPrefix="iconfont"
+                    color="#FFC459"
+                    void-icon="star_default"
+                    icon="star_active"
+                    size={15}
+                  />
+                ) : (
+                  <span style={{ fontSize: '12px', color: '#999999' }}>
+                    暂无评分
+                  </span>
+                )}
+              </div>
+            </div>
+            <div class={styles.piNameSubject}>
+              <Image
+                class={styles.subjectSection}
+                src={getAssetsHomeFile('icon_subject.png')}
+                fit="contain"
+              />
+              <div class={styles.subjectList}>
+                {this.subjectNameList.map((item: any) => (
+                  <span class={styles.subject}>{item}</span>
+                ))}
+              </div>
+            </div>
+            <div class={styles['teacher-bottom']}>
+              <div class={styles['teacher-data']}>
+                <div class={styles['teacher-data_item']}>
+                  粉丝 <span>{this.userInfo.fansNum || 0}</span>
+                </div>
+                <div class={styles['teacher-data_item']}>
+                  已上课时 <span>{this.userInfo.expTime || 0}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <Popup class={styles['teaherPopup']} v-model:show={this.iconShow}>
+          <Image src={getAssetsHomeFile('teacher-icon.png')} />
+          <div class={styles.teacherIconWrap}>
+            {iconList.map(n => {
+              return (
+                <div class={styles.teacherIconItem}>
+                  <div class={styles.teacherIconItemTop}>
+                    <Image src={getAssetsHomeFile(n.icon)} />
+                    <div class={styles.teacherIconTitle}>{n.title}</div>
+                  </div>
+                  <div class={styles.teacherIconDes}>{n.des}</div>
+                </div>
+              )
+            })}
+          </div>
+          <Image
+            onClick={() => (this.iconShow = false)}
+            class={styles.closeIcon}
+            src={getAssetsHomeFile('icon-close.png')}
+          />
+        </Popup>
+      </>
+    )
+  }
+})

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

@@ -93,7 +93,14 @@ export default defineComponent({
         <img class={styles.bgImg} src={this.userInfo.heardUrl} />
         <div class={styles.bg}></div>
         <div class={styles.teacherHeader}>
-          <TeacherHeader userInfo={this.userInfo} teacherId={this.teacherId} />
+          <TeacherHeader
+            userInfo={this.userInfo}
+            teacherId={this.teacherId}
+            onStar={(val: any) => {
+              this.userInfo.isStar = val.isStar
+              this.userInfo.fansNum = val.fansNum
+            }}
+          />
         </div>
         <Tabs
           color="var(--van-primary)"

src/student/trade/list/index.tsx

@@ -23,6 +23,7 @@ import dayjs from 'dayjs'
 import ColResult from '@/components/col-result'
 import { orderStatus } from '@/views/order-detail/orderStatus'
 import { tradeOrder } from '../tradeOrder'
+import { state } from '@/state'
 
 export default defineComponent({
   name: 'list',
@@ -152,6 +153,11 @@ export default defineComponent({
           `/api-student/userOrder/detailByOrderNo/${item.orderNo}`
         )
         const result = res.data
+        const orderDetailList = result.orderDetailList || []
+        orderDetailList.forEach((item: any) => {
+          item.vipEndDays = state.user.data?.userVip?.vipEndDays || 0 // 会员剩余天数
+        })
+
         tradeOrder(result, () => {
           this.$router.push({
             path: '/orderDetail',
@@ -164,7 +170,6 @@ export default defineComponent({
     }
   },
   render() {
-    console.log(this.height, 'height')
     return (
       <div class={styles.tradeList}>
         <Sticky position="top" offsetTop={this.height}>

src/student/trade/tradeOrder.ts

@@ -84,6 +84,7 @@ export const formatOrderDetail = async (item: any, amount?: IAmount) => {
       break
     }
     case 'VIP':
+    case 'SVIP':
       {
         try {
           const res = await getVipDetail(item.id)
@@ -92,15 +93,16 @@ export const formatOrderDetail = async (item: any, amount?: IAmount) => {
             goodName: item.goodName,
             id: item.id,
             title: memberType[res.period] || '',
+            vipEndDays: item.vipEndDays,
             // 判断是否有优惠金额
             price: amount?.couponAmount
               ? Number(
-                  (
-                    res.salePrice -
-                    amount.couponAmount +
-                    amount.discountPrice
-                  ).toFixed(2)
-                )
+                (
+                  res.salePrice -
+                  amount.couponAmount +
+                  amount.discountPrice
+                ).toFixed(2)
+              )
               : res.salePrice || item.actualPrice,
             startTime: dayjs(res.startTime).format('YYYY-MM-DD'),
             endTime: dayjs(res.endTime).format('YYYY-MM-DD')

src/teacher/piano-room/class-arrangement/create-class/index.tsx

@@ -28,7 +28,7 @@ export default defineComponent({
     },
     onBack: {
       type: Function,
-      default: () => () => {}
+      default: () => () => ({})
     }
   },
   setup(props) {
@@ -48,13 +48,13 @@ export default defineComponent({
     })
     const getList = async (date?: Date) => {
       const tempDate = date || dayjs().add(1, 'day').toDate()
-      let params = {
+      const params = {
         day: dayjs(tempDate).format('DD'),
         month: dayjs(tempDate).format('MM'),
         year: dayjs(tempDate).format('YYYY')
       }
       try {
-        let res = await request.post(
+        const res = await request.post(
           '/api-teacher/courseSchedule/createLiveCourseCalendar',
           {
             data: {
@@ -66,12 +66,14 @@ export default defineComponent({
           }
         )
         const result = res.data || []
-        let tempObj = {}
+        const tempObj = {}
         result.forEach((item: any) => {
           tempObj[item.date] = item
         })
         data.calendarList = tempObj
-      } catch {}
+      } catch {
+        //
+      }
     }
 
     const onSelectDay = (res: any) => {
@@ -85,7 +87,7 @@ export default defineComponent({
     }
     const showSelectList = computed(() => {
       // 显示时间
-      let list = [...data.selectList]
+      const list = [...data.selectList]
       list.forEach((item: any) => {
         item.title =
           dayjs(item.startTime).format('YYYY-MM-DD') +
@@ -133,7 +135,7 @@ export default defineComponent({
     }
     const onComfirm = async () => {
       if (selectType.value === 'noEnough') {
-        let times = [] as any
+        const times = [] as any
         data.selectList.forEach((item: any) => {
           times.push({
             startTime: item.startTime,
@@ -175,7 +177,7 @@ export default defineComponent({
       const timeList = data.selectList
       const n = classInfo.studentIds.length
       try {
-        let { code, data } = await request.post(
+        const { code, data } = await request.post(
           '/api-teacher/courseSchedule/arrangeCourse',
           {
             data: {
@@ -193,19 +195,32 @@ export default defineComponent({
         )
         if (code === 200) {
           confirmShow.value = false
-
-          setTimeout(() => {
-            Toast({
-              icon: 'success',
-              message: '排课成功',
-              duration: 1500,
-              onClose: () => {
-                router.back()
-              }
-            })
-          }, 100)
+          if (data) {
+            setTimeout(() => {
+              Toast({
+                message: data,
+                duration: 1500,
+                onClose: () => {
+                  router.back()
+                }
+              })
+            }, 100)
+          } else {
+            setTimeout(() => {
+              Toast({
+                icon: 'success',
+                message: '排课成功',
+                duration: 1500,
+                onClose: () => {
+                  router.back()
+                }
+              })
+            }, 100)
+          }
         }
-      } catch (error) {}
+      } catch (error) {
+        //
+      }
     }
     return () => {
       return (

src/teacher/share-page/share-vip/index.module.less

@@ -3,12 +3,14 @@
   position: relative;
   background-color: #fff;
 
+
   .intro {
     background: url('../images/share-vip-tips.png') no-repeat center;
     background-size: contain;
     height: 142px;
     font-size: 14px;
     color: #bb6e3a;
+
     p {
       padding: 45px 25px 0;
       text-align: justify;
@@ -18,20 +20,37 @@
 
   .shareBanner {
     width: 100%;
+    font-size: 0;
   }
 
   .memberContainer {
     position: relative;
-    margin-top: 15px;
-    padding: 0 14px 25px;
+    // margin-top: 15px;
+    // padding: 0 14px 25px;
     z-index: 99;
+    overflow: hidden;
+  }
+
+  .iconTitle {
+    width: 258px;
+    height: 28px;
+    margin: 18px auto 17px;
+    display: block;
+  }
+
+  .iconEquity {
+    margin: 0 16px;
+    width: calc(100% - 32px);
   }
+
   .memberItem {
     padding-top: 20px;
+
     .title {
       font-size: 16px;
       color: #333333;
       font-weight: 500;
+
       span {
         color: #f7b500;
       }
@@ -42,9 +61,11 @@
     display: flex;
     justify-content: space-between;
     flex-wrap: wrap;
+
     .function_item__content {
       height: 100%;
     }
+
     .function_item {
       width: 80px;
       padding: 12px 0;
@@ -54,15 +75,19 @@
       background-color: #faefe3;
       text-align: center;
     }
+
     .function_text {
       font-size: 12px;
       color: #814014;
       line-height: 16px;
     }
   }
+
   .system-list::-webkit-scrollbar {
-    display: none; /* Chrome Safari */
+    display: none;
+    /* Chrome Safari */
   }
+
   .system-list {
     width: 100%;
     overflow-x: auto;
@@ -75,6 +100,7 @@
     padding-bottom: 10px;
     margin-bottom: 10px;
   }
+
   .system-item {
     display: flex;
     flex-direction: column;
@@ -88,42 +114,48 @@
     border-radius: 12px;
     border: 1px solid #e5e5e5;
     margin-right: 10px;
+
     .title {
       font-size: 14px;
       font-weight: 500;
       color: #333333;
       line-height: 20px;
     }
+
     .price {
       color: #dc9362;
       font-size: 25px;
       line-height: 1.5;
+
       span {
         font-size: 16px;
       }
     }
+
     .originalPrice {
       color: #937059;
       font-size: 13px;
     }
 
     &.active {
-      background: linear-gradient(
-        215deg,
-        #ffe7c4 0%,
-        rgba(250, 211, 156, 0.21) 100%
-      );
+      background: linear-gradient(215deg,
+          #ffe7c4 0%,
+          rgba(250, 211, 156, 0.21) 100%);
       border: 1px solid #b1652e;
       position: relative;
+
       .title {
         color: #814014;
       }
+
       .price {
         color: #b1652e;
       }
+
       .originalPrice {
         color: #937059;
       }
+
       &::before {
         content: '\e728';
         font: 14px/1 'vant-icon';
@@ -164,9 +196,10 @@
     left: 0;
     background: rgba(0, 0, 0, 0.5);
     z-index: 9999;
+
     img {
       width: 88%;
       margin: 0 6%;
     }
   }
-}
+}

src/teacher/share-page/share-vip/index.tsx

@@ -10,6 +10,9 @@ import { shareCall, initJumpNativePage } from '../share'
 import { browser } from '@/helpers/utils'
 import { postMessage } from '@/helpers/native-message'
 import qs from 'query-string'
+import iconTitle from './images/icon-title-3.png'
+import equityBg from './images/icon-equity-bg.png'
+import ColSticky from '@/components/col-sticky'
 
 export const getAssetsHomeFile = (fileName: string) => {
   const path = `../../../views/member-center/images/${fileName}`
@@ -54,16 +57,16 @@ export default defineComponent({
   },
   async mounted() {
     try {
-      const res = await request.post(
-        `/api-teacher/open/memberPriceSettings/vipPermissions`
-      )
-      const result = res.data || []
-      this.functionList = result.map((item: any) => {
-        return {
-          title: item.paramName,
-          icon: getAssetsHomeFile(`${item.paramValue}.png`)
-        }
-      })
+      // const res = await request.post(
+      //   `/api-teacher/open/memberPriceSettings/vipPermissions`
+      // )
+      // const result = res.data || []
+      // this.functionList = result.map((item: any) => {
+      //   return {
+      //     title: item.paramName,
+      //     icon: getAssetsHomeFile(`${item.paramValue}.png`)
+      //   }
+      // })
 
       if (this.activityId) {
         const active = await request.post(
@@ -94,7 +97,7 @@ export default defineComponent({
       <div class={styles['member-center']}>
         <Image src={shareBanner} class={styles.shareBanner} />
         <div class={styles.memberContainer}>
-          <div class={[styles.intro]}>
+          {/* <div class={[styles.intro]}>
             <p>
               酷乐秀会员可使用包括平台提供的所有训练乐谱，并专享“
               <b>小酷Ai</b>
@@ -114,25 +117,29 @@ export default defineComponent({
                 ))}
               </div>
             </div>
-          )}
+          )} */}
+          <img src={iconTitle} class={styles.iconTitle} />
+          <img src={equityBg} class={styles.iconEquity} />
         </div>
-        <div
-          class={['btnGroup']}
-          style={{ paddingTop: '12px', position: 'relative' }}
-        >
-          {this.discount === 1 && (
-            <div class={styles.tagDiscount}>专属优惠</div>
-          )}
-          <Button
-            block
-            round
-            type="primary"
-            onClick={this.onShare}
-            color="linear-gradient(220deg, #DFA164 0%, #FAC87E 100%)"
+        <ColSticky position="bottom">
+          <div
+            class={['btnGroup']}
+            style={{ paddingTop: '12px', position: 'relative' }}
           >
-            下载小酷Ai开始练习吧！
-          </Button>
-        </div>
+            {this.discount === 1 && (
+              <div class={styles.tagDiscount}>专属优惠</div>
+            )}
+            <Button
+              block
+              round
+              type="primary"
+              onClick={this.onShare}
+              color="linear-gradient(220deg, #DFA164 0%, #FAC87E 100%)"
+            >
+              下载小酷Ai开始练习吧！
+            </Button>
+          </div>
+        </ColSticky>
 
         {this.wxStatus && (
           <div

src/teacher/teacher-dependent/model/teacher-header.module.less

@@ -1,355 +1,398 @@
-.headerContent {
-  padding-top: 40px;
-  min-height: 100px;
-  position: relative;
-}
-.teacherContent {
-  display: flex;
-  // justify-content: space-between;
-  flex-shrink: 0;
-}
-.teacherIcon {
-  position: relative;
-  margin-top: -38px;
-  line-height: 0;
-  .avatar {
-    position: relative;
-    width: 78px;
-    height: 78px;
-    box-sizing: border-box;
-    border: 2px solid #fff;
-    background-color: #fff;
-  }
-  .avatarActive {
-    border-color: #ffe0b9;
-    background-color: #ffe0b9;
-  }
-  .teacherIconVip {
-    position: absolute;
-    bottom: 0;
-    right: -30px;
-    width: 46px;
-    height: 20px;
-  }
-}
-.teacherInfo {
-  display: flex;
-  align-items: center;
-  // padding: 14px 0;
-  padding-left: 46px;
-  .teacherInfoName {
-    font-size: 20px;
-    font-weight: 500;
-    color: #1a1a1a;
-    // line-height: 22px;
-    max-width: 150px;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-  & > img {
-    margin-left: 10px;
-    width: 39px;
-    height: 16px;
-  }
-}
-.teacherHonor {
-  display: flex;
-  align-items: center;
-  font-size: 12px;
-  line-height: 16px;
-  color: #666;
-  font-weight: 500;
-  padding-bottom: 12px;
-  padding-top: 10px;
-  .score {
-    margin-left: 25px;
-  }
-}
-
-.headerCount {
-  width: calc(100% - 28px);
-  padding: 12px;
-  margin: 0 auto;
-  background-color: #fff;
-  border-radius: 10px;
-  box-sizing: border-box;
-}
-
-.teacherOperation {
-  :global {
-    .van-button {
-      height: 28px;
-    }
-  }
-
-  .btn {
-    padding: 3px 12px 1px;
-    min-width: 62px;
-  }
-  .btnStar {
-    color: #f18400;
-    border-color: #f18400;
-  }
-}
-
-.subjectSection {
-  margin-right: 10px;
-  // height: 18px;
-  max-width: 68px;
-  box-sizing: content-box;
-}
-
-.teacher-bottom {
-  padding: 30px 0 0 0;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-.followFans {
-  padding-top: 10px !important;
-}
-
-.teacher-data {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-
-  .teacher-data_item {
-    font-size: 14px;
-    color: #333333;
-    position: relative;
-    span {
-      font-weight: 500;
-      color: #000000;
-      font-size: 20px;
-      margin-left: 5px;
-    }
-    &::after {
-      content: ' ';
-      display: inline-block;
-      position: absolute;
-      right: 0px;
-      top: 2px;
-      width: 1px;
-      height: 16px;
-      background: #ebebeb;
-    }
-    &:first-child {
-      padding-right: 15px;
-      margin-right: 15px;
-    }
-    &:last-child {
-      &::after {
-        display: none;
-      }
-    }
-  }
-}
-
-.iconVip {
-  width: 34px !important;
-  margin-right: 5px;
-}
-
-.iconOther {
-  margin-left: 6px;
-  width: 18px;
-  height: 18px;
-}
-
-.teacher-info {
-  margin-left: 8px;
-  .teacher-name {
-    font-size: 18px;
-    font-weight: 500;
-    color: #1a1a1a;
-    padding-bottom: 6px;
-    display: flex;
-    justify-content: space-between;
-    .teacherCert {
-      display: flex;
-      align-items: center;
-    }
-
-    .teacherLast {
-      display: inline-block;
-      max-width: 120px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-  }
-}
-
-.subjectList::-webkit-scrollbar {
-  display: none; /* Chrome Safari */
-}
-.subjectList {
-  overflow: auto;
-  width: 255px;
-  // height: 18px;
-  display: flex;
-  flex-wrap: nowrap;
-}
-
-.piNameSubject {
-  display: flex;
-  align-items: center;
-
-  .subject {
-    display: flex;
-    align-items: center;
-    margin-left: 4px;
-    background: #effbf9;
-    border-radius: 8px;
-    font-size: 12px;
-    line-height: 16px;
-    color: #2dc7aa;
-    padding: 0 5px;
-    white-space: nowrap;
-    &:first-child {
-      margin-left: 0;
-    }
-  }
-}
-
-.rTitle {
-  display: flex;
-  align-items: center;
-  &::before {
-    margin-right: 8px;
-    content: ' ';
-    display: inline-block;
-    width: 4px;
-    height: 14px;
-    background: #2dc7aa;
-    border-radius: 3px;
-  }
-}
-
-.liveTag {
-  position: absolute;
-  bottom: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  line-height: 16px;
-  background: #ff6363;
-  border-radius: 20px;
-  text-align: center;
-  color: #fff;
-  font-size: 10px;
-  font-weight: 500;
-  padding: 2px 0;
-  width: 60%;
-  z-index: 10;
-}
-
-.teacherName {
-  display: inline-block;
-  flex: 1;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 100px;
-}
-
-.teacherIcons {
-  display: flex;
-  align-items: center;
-}
-.teaherPopup {
-  background: transparent;
-  width: 276px;
-  overflow: initial;
-}
-.teacherIconWrap {
-  padding: 50px 22px 22px 22px;
-  background-color: #fff;
-  border-radius: 0 0 10px 10px;
-  margin-top: -25px;
-}
-.teacherIconItem {
-  margin-bottom: 16px;
-  .teacherIconItemTop {
-    display: flex;
-    align-items: center;
-    margin-bottom: 10px;
-  }
-  :global {
-    .van-image {
-      margin-right: 8px;
-      width: 24px;
-      height: 24px;
-    }
-  }
-  .teacherIconTitle {
-    font-size: 16px;
-    font-weight: bold;
-    color: #333;
-  }
-  .teacherIconDes {
-    font-size: 12px;
-    line-height: 16px;
-    font-weight: 400;
-    padding-left: 3px;
-    color: #666;
-  }
-}
-.closeIcon {
-  position: absolute;
-  bottom: -54px;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 0.96rem;
-  height: 0.96rem;
-}
-.liveList {
-  padding: 12px 0;
-  .headerFollow {
-    margin-bottom: 12px;
-    .teacherIcon {
-      margin: 0 10px 0 0;
-    }
-    .score {
-      margin-left: 10px;
-    }
-    .teacherIconVip {
-      left: 50%;
-      right: initial;
-      transform: translateX(-50%);
-      bottom: -6px;
-    }
-    .liveTag {
-      // bottom: -30px;
-      width: 80%;
-    }
-    .avatar {
-      width: 60px;
-      height: 60px;
-    }
-    .piNameSubject {
-      align-items: flex-start;
-    }
-    .subjectList {
-      flex-wrap: wrap;
-    }
-    .subject {
-      margin: 2px 5px 3px 0;
-    }
-    .teacher-bottom {
-      padding-top: 24px;
-    }
-    .unlinkeBtn {
-      font-size: 12px;
-      color: #ff6363;
-      border: 1px solid #ff6363;
-      padding: 5px 10px;
-      border-radius: 20px;
-    }
-  }
-}
-.followContainer {
-  display: flex;
-  align-items: flex-start;
-}
+.headerContent {
+  padding-top: 40px;
+  min-height: 100px;
+  position: relative;
+}
+
+.teacherContent {
+  display: flex;
+  // justify-content: space-between;
+  flex-shrink: 0;
+}
+
+.teacherIcon {
+  position: relative;
+  margin-top: -38px;
+  line-height: 0;
+
+  .avatar {
+    position: relative;
+    width: 78px;
+    height: 78px;
+    box-sizing: border-box;
+    border: 2px solid #fff;
+    background-color: #fff;
+  }
+
+  .avatarActive {
+    border-color: #F0AF88;
+    background-color: #F0AF88;
+  }
+
+  .teacherIconVip {
+    position: absolute;
+    bottom: 0;
+    right: -12px;
+    width: 39px;
+    height: 18px;
+  }
+}
+
+.teacherInfo {
+  display: flex;
+  align-items: center;
+  // padding: 14px 0;
+  padding-left: 46px;
+
+  .teacherInfoName {
+    font-size: 20px;
+    font-weight: 500;
+    color: #1a1a1a;
+    // line-height: 22px;
+    max-width: 150px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  &>img {
+    margin-left: 10px;
+    width: 39px;
+    height: 16px;
+  }
+}
+
+.teacherHonor {
+  display: flex;
+  align-items: center;
+  font-size: 12px;
+  line-height: 16px;
+  color: #666;
+  font-weight: 500;
+  padding-bottom: 12px;
+  padding-top: 10px;
+
+  .score {
+    margin-left: 25px;
+  }
+}
+
+.headerCount {
+  width: calc(100% - 28px);
+  padding: 12px;
+  margin: 0 auto;
+  background-color: #fff;
+  border-radius: 10px;
+  box-sizing: border-box;
+}
+
+.teacherOperation {
+  :global {
+    .van-button {
+      height: 28px;
+    }
+  }
+
+  .btn {
+    padding: 3px 12px 1px;
+    min-width: 62px;
+  }
+
+  .btnStar {
+    color: #f18400;
+    border-color: #f18400;
+  }
+}
+
+.subjectSection {
+  margin-right: 10px;
+  // height: 18px;
+  max-width: 68px;
+  box-sizing: content-box;
+}
+
+.teacher-bottom {
+  padding: 30px 0 0 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.followFans {
+  padding-top: 10px !important;
+}
+
+.teacher-data {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  .teacher-data_item {
+    font-size: 14px;
+    color: #333333;
+    position: relative;
+
+    span {
+      font-weight: 500;
+      color: #000000;
+      font-size: 20px;
+      margin-left: 5px;
+    }
+
+    &::after {
+      content: ' ';
+      display: inline-block;
+      position: absolute;
+      right: 0px;
+      top: 2px;
+      width: 1px;
+      height: 16px;
+      background: #ebebeb;
+    }
+
+    &:first-child {
+      padding-right: 15px;
+      margin-right: 15px;
+    }
+
+    &:last-child {
+      &::after {
+        display: none;
+      }
+    }
+  }
+}
+
+.iconVip {
+  width: 34px !important;
+  margin-right: 5px;
+}
+
+.iconOther {
+  margin-left: 6px;
+  width: 18px;
+  height: 18px;
+}
+
+.teacher-info {
+  margin-left: 8px;
+
+  .teacher-name {
+    font-size: 18px;
+    font-weight: 500;
+    color: #1a1a1a;
+    padding-bottom: 6px;
+    display: flex;
+    justify-content: space-between;
+
+    .teacherCert {
+      display: flex;
+      align-items: center;
+    }
+
+    .teacherLast {
+      display: inline-block;
+      max-width: 120px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+}
+
+.subjectList::-webkit-scrollbar {
+  display: none;
+  /* Chrome Safari */
+}
+
+.subjectList {
+  overflow: auto;
+  width: 255px;
+  // height: 18px;
+  display: flex;
+  flex-wrap: nowrap;
+}
+
+.piNameSubject {
+  display: flex;
+  align-items: center;
+
+  .subject {
+    display: flex;
+    align-items: center;
+    margin-left: 4px;
+    background: #effbf9;
+    border-radius: 8px;
+    font-size: 12px;
+    line-height: 16px;
+    color: #2dc7aa;
+    padding: 0 5px;
+    white-space: nowrap;
+
+    &:first-child {
+      margin-left: 0;
+    }
+  }
+}
+
+.rTitle {
+  display: flex;
+  align-items: center;
+
+  &::before {
+    margin-right: 8px;
+    content: ' ';
+    display: inline-block;
+    width: 4px;
+    height: 14px;
+    background: #2dc7aa;
+    border-radius: 3px;
+  }
+}
+
+.liveTag {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  line-height: 16px;
+  background: #ff6363;
+  border-radius: 20px;
+  text-align: center;
+  color: #fff;
+  font-size: 10px;
+  font-weight: 500;
+  padding: 2px 0;
+  width: 60%;
+  z-index: 10;
+}
+
+.teacherName {
+  display: inline-block;
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100px;
+}
+
+.teacherIcons {
+  display: flex;
+  align-items: center;
+}
+
+.teaherPopup {
+  background: transparent;
+  width: 276px;
+  overflow: initial;
+}
+
+.teacherIconWrap {
+  padding: 50px 22px 22px 22px;
+  background-color: #fff;
+  border-radius: 0 0 10px 10px;
+  margin-top: -25px;
+}
+
+.teacherIconItem {
+  margin-bottom: 16px;
+
+  .teacherIconItemTop {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+  }
+
+  :global {
+    .van-image {
+      margin-right: 8px;
+      width: 24px;
+      height: 24px;
+    }
+  }
+
+  .teacherIconTitle {
+    font-size: 16px;
+    font-weight: bold;
+    color: #333;
+  }
+
+  .teacherIconDes {
+    font-size: 12px;
+    line-height: 16px;
+    font-weight: 400;
+    padding-left: 3px;
+    color: #666;
+  }
+}
+
+.closeIcon {
+  position: absolute;
+  bottom: -54px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 0.96rem;
+  height: 0.96rem;
+}
+
+.liveList {
+  padding: 12px 0;
+
+  .headerFollow {
+    margin-bottom: 12px;
+
+    .teacherIcon {
+      margin: 0 10px 0 0;
+    }
+
+    .score {
+      margin-left: 10px;
+    }
+
+    .teacherIconVip {
+      left: 50%;
+      right: initial;
+      transform: translateX(-50%);
+      bottom: -6px;
+    }
+
+    .liveTag {
+      // bottom: -30px;
+      width: 80%;
+    }
+
+    .avatar {
+      width: 60px;
+      height: 60px;
+    }
+
+    .piNameSubject {
+      align-items: flex-start;
+    }
+
+    .subjectList {
+      flex-wrap: wrap;
+    }
+
+    .subject {
+      margin: 2px 5px 3px 0;
+    }
+
+    .teacher-bottom {
+      padding-top: 24px;
+    }
+
+    .unlinkeBtn {
+      font-size: 12px;
+      color: #ff6363;
+      border: 1px solid #ff6363;
+      padding: 5px 10px;
+      border-radius: 20px;
+    }
+  }
+}
+
+.followContainer {
+  display: flex;
+  align-items: flex-start;
+}

src/teacher/teacher-dependent/model/teacher-header.tsx

@@ -1,256 +1,266 @@
-import { Button, Cell, Icon, Image, Popup, Rate, Toast } from 'vant'
-import { defineComponent } from 'vue'
-import styles from './teacher-header.module.less'
-import { postMessage } from '@/helpers/native-message'
-import iconTeacher from '@common/images/icon_teacher.png'
-import IconXueli from '@common/images/icon-xueli.png'
-import IconJiaozi from '@common/images/icon-jiaozi.png'
-
-export const getAssetsHomeFile = (fileName: string) => {
-  const path = `../images/${fileName}`
-  const modules = import.meta.globEager('../images/*')
-  return modules[path].default
-}
-
-export default defineComponent({
-  name: 'teacher-header',
-  props: {
-    userInfo: {
-      type: Object,
-      default: {}
-    },
-    teacherId: {
-      type: String || Number,
-      default: ''
-    }
-  },
-  data() {
-    return {
-      iconShow: false
-    }
-  },
-  computed: {
-    subjectNameList() {
-      const userInfo: any = this.userInfo
-      const subjectName = userInfo.subjectName
-      return subjectName ? subjectName.split(',') : []
-    },
-    starGrade() {
-      const { starGrade } = this.userInfo as any
-      return Number(starGrade) || 0
-    }
-  },
-  methods: {
-    // 检验是否有对应徽章
-    checkBadge(type: string) {
-      // tag : 老师点亮图标
-      // STYLE:个人风采
-      // VIDEO：视频课
-      // LIVE：直播课，
-      // MUSIC：曲目 逗号隔开
-      let status = false
-      const { userInfo } = this
-      switch (type) {
-        case 'STYLE':
-        case 'VIDEO':
-        case 'LIVE':
-        case 'MUSIC':
-          if (userInfo.tag) {
-            status = userInfo.tag.indexOf(type) > -1
-          }
-          break
-        case 'VIP':
-          status = userInfo.isVip > 0
-          break
-        default:
-          status = false
-          break
-      }
-      return status
-    },
-
-    openTeacherIcon() {
-      this.iconShow = true
-    }
-  },
-  render() {
-    const iconList = [
-      {
-        icon: 'cert_active.png',
-        title: '演奏Mlog达人',
-        des: '个人风采中上传老师风采视频并通过审核'
-      },
-      {
-        icon: 'video_active.png',
-        title: '教学视频达人',
-        des: '发布您制作的教学视频课程并通过审核'
-      },
-      {
-        icon: 'live_active.png',
-        title: '直播up达人',
-        des: '达到开通直播权限标准并开通直播功能'
-      },
-      {
-        icon: 'music_active.png',
-        title: '乐谱歌单达人',
-        des: '上传您制作的乐谱并通过审核'
-      }
-    ]
-    return (
-      <>
-        <div class={styles.headerContent}>
-          <div class={styles.headerCount}>
-            <div class={styles.teacherContent}>
-              <div
-                class={styles.teacherIcon}
-                onClick={() => {
-                  // 判断是否在直播中
-                  if (this.userInfo.liveing === 1) {
-                    postMessage({
-                      api: 'joinLiveRoom',
-                      content: {
-                        roomId: this.userInfo.roomUid,
-                        teacherId: this.userInfo.userId
-                      }
-                    })
-                  }
-                }}
-              >
-                {/* iy */}
-                <Image
-                  class={[
-                    styles.avatar,
-                    this.checkBadge('VIP') && styles.avatarActive
-                  ]}
-                  round
-                  src={this.userInfo.heardUrl || iconTeacher}
-                  fit="cover"
-                />
-
-                {this.userInfo.liveing === 1 && (
-                  <p class={styles.liveTag}>直播中</p>
-                )}
-
-                <Image
-                  class={styles.teacherIconVip}
-                  src={
-                    this.checkBadge('VIP')
-                      ? getAssetsHomeFile('vip_active.png')
-                      : getAssetsHomeFile('vip_default.png')
-                  }
-                />
-              </div>
-              <div class={styles.teacherInfo}>
-                <div class={styles.teacherInfoName}>
-                  {this.userInfo.username ||
-                    `游客${this.userInfo.userId || ''}`}
-                </div>
-                {this.userInfo.degreeFlag ? <img src={IconXueli} /> : null}
-                {this.userInfo.teacherFlag ? <img src={IconJiaozi} /> : null}
-              </div>
-            </div>
-
-            <div class={styles.teacherHonor}>
-              <div>勋章：</div>
-              <div class={styles.teacherIcons} onClick={this.openTeacherIcon}>
-                <Image
-                  class={styles.iconOther}
-                  src={
-                    this.checkBadge('STYLE')
-                      ? getAssetsHomeFile('cert_active.png')
-                      : getAssetsHomeFile('cert_default.png')
-                  }
-                />
-                <Image
-                  class={styles.iconOther}
-                  src={
-                    this.checkBadge('VIDEO')
-                      ? getAssetsHomeFile('video_active.png')
-                      : getAssetsHomeFile('video_default.png')
-                  }
-                />
-                <Image
-                  class={styles.iconOther}
-                  src={
-                    this.checkBadge('LIVE')
-                      ? getAssetsHomeFile('live_active.png')
-                      : getAssetsHomeFile('live_default.png')
-                  }
-                />
-                <Image
-                  class={styles.iconOther}
-                  src={
-                    this.checkBadge('MUSIC')
-                      ? getAssetsHomeFile('music_active.png')
-                      : getAssetsHomeFile('music_default.png')
-                  }
-                />
-              </div>
-              <div class={styles.score}>评分：</div>
-              <div class={styles.level}>
-                {this.starGrade ? (
-                  <Rate
-                    readonly
-                    modelValue={this.starGrade}
-                    iconPrefix="iconfont"
-                    color="#FFC459"
-                    void-icon="star_default"
-                    icon="star_active"
-                    size={15}
-                  />
-                ) : (
-                  <span style={{ fontSize: '12px', color: '#999999' }}>
-                    暂无评分
-                  </span>
-                )}
-              </div>
-            </div>
-            <div class={styles.piNameSubject}>
-              <Image
-                class={styles.subjectSection}
-                src={getAssetsHomeFile('icon_subject.png')}
-                fit="contain"
-              />
-              <div class={styles.subjectList}>
-                {this.subjectNameList.map((item: any) => (
-                  <span class={styles.subject}>{item}</span>
-                ))}
-              </div>
-            </div>
-            <div class={styles['teacher-bottom']}>
-              <div class={styles['teacher-data']}>
-                <div class={styles['teacher-data_item']}>
-                  粉丝 <span>{this.userInfo.fansNum || 0}</span>
-                </div>
-                <div class={styles['teacher-data_item']}>
-                  已上课时 <span>{this.userInfo.expTime || 0}</span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <Popup class={styles['teaherPopup']} v-model:show={this.iconShow}>
-          <Image src={getAssetsHomeFile('teacher-icon.png')} />
-          <div class={styles.teacherIconWrap}>
-            {iconList.map(n => {
-              return (
-                <div class={styles.teacherIconItem}>
-                  <div class={styles.teacherIconItemTop}>
-                    <Image src={getAssetsHomeFile(n.icon)} />
-                    <div class={styles.teacherIconTitle}>{n.title}</div>
-                  </div>
-                  <div class={styles.teacherIconDes}>{n.des}</div>
-                </div>
-              )
-            })}
-          </div>
-          <Image
-            onClick={() => (this.iconShow = false)}
-            class={styles.closeIcon}
-            src={getAssetsHomeFile('icon-close.png')}
-          />
-        </Popup>
-      </>
-    )
-  }
-})
+import { Button, Cell, Icon, Image, Popup, Rate, Toast } from 'vant'
+import { defineComponent } from 'vue'
+import styles from './teacher-header.module.less'
+import { postMessage } from '@/helpers/native-message'
+import iconTeacher from '@common/images/icon_teacher.png'
+import IconXueli from '@common/images/icon-xueli.png'
+import IconJiaozi from '@common/images/icon-jiaozi.png'
+
+export const getAssetsHomeFile = (fileName: string) => {
+  const path = `../images/${fileName}`
+  const modules = import.meta.globEager('../images/*')
+  return modules[path].default
+}
+
+export default defineComponent({
+  name: 'teacher-header',
+  props: {
+    userInfo: {
+      type: Object,
+      default: {}
+    },
+    teacherId: {
+      type: String || Number,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      iconShow: false
+    }
+  },
+  computed: {
+    subjectNameList() {
+      const userInfo: any = this.userInfo
+      const subjectName = userInfo.subjectName
+      return subjectName ? subjectName.split(',') : []
+    },
+    starGrade() {
+      const { starGrade } = this.userInfo as any
+      return Number(starGrade) || 0
+    }
+  },
+  methods: {
+    // 检验是否有对应徽章
+    checkBadge(type: string) {
+      // tag : 老师点亮图标
+      // STYLE:个人风采
+      // VIDEO：视频课
+      // LIVE：直播课，
+      // MUSIC：曲目 逗号隔开
+      let status = false
+      const { userInfo } = this
+      switch (type) {
+        case 'STYLE':
+        case 'VIDEO':
+        case 'LIVE':
+        case 'MUSIC':
+          if (userInfo.tag) {
+            status = userInfo.tag.indexOf(type) > -1
+          }
+          break
+        case 'VIP':
+          status = userInfo.userVip?.vipType === 'VIP'
+          break
+        case 'SVIP':
+          status =
+            userInfo.userVip?.vipType === 'SVIP' ||
+            userInfo.userVip?.vipType === 'PERMANENT_SVIP'
+          break
+        default:
+          status = false
+          break
+      }
+      return status
+    },
+
+    openTeacherIcon() {
+      this.iconShow = true
+    }
+  },
+  render() {
+    const iconList = [
+      {
+        icon: 'cert_active.png',
+        title: '演奏Mlog达人',
+        des: '个人风采中上传老师风采视频并通过审核'
+      },
+      {
+        icon: 'video_active.png',
+        title: '教学视频达人',
+        des: '发布您制作的教学视频课程并通过审核'
+      },
+      {
+        icon: 'live_active.png',
+        title: '直播up达人',
+        des: '达到开通直播权限标准并开通直播功能'
+      },
+      {
+        icon: 'music_active.png',
+        title: '乐谱歌单达人',
+        des: '上传您制作的乐谱并通过审核'
+      }
+    ]
+    return (
+      <>
+        <div class={styles.headerContent}>
+          <div class={styles.headerCount}>
+            <div class={styles.teacherContent}>
+              <div
+                class={styles.teacherIcon}
+                onClick={() => {
+                  // 判断是否在直播中
+                  if (this.userInfo.liveing === 1) {
+                    postMessage({
+                      api: 'joinLiveRoom',
+                      content: {
+                        roomId: this.userInfo.roomUid,
+                        teacherId: this.userInfo.userId
+                      }
+                    })
+                  }
+                }}
+              >
+                {/* iy */}
+                <Image
+                  class={[
+                    styles.avatar,
+                    (this.checkBadge('SVIP') || this.checkBadge('VIP')) &&
+                      styles.avatarActive
+                  ]}
+                  round
+                  src={this.userInfo.heardUrl || iconTeacher}
+                  fit="cover"
+                />
+
+                {this.userInfo.liveing === 1 && (
+                  <p class={styles.liveTag}>直播中</p>
+                )}
+
+                {(this.checkBadge('SVIP') || this.checkBadge('VIP')) && (
+                  <Image
+                    class={styles.teacherIconVip}
+                    src={
+                      this.checkBadge('SVIP')
+                        ? getAssetsHomeFile('svip_active.png')
+                        : this.checkBadge('VIP')
+                        ? getAssetsHomeFile('vip_active.png')
+                        : ''
+                    }
+                  />
+                )}
+              </div>
+              <div class={styles.teacherInfo}>
+                <div class={styles.teacherInfoName}>
+                  {this.userInfo.username ||
+                    `游客${this.userInfo.userId || ''}`}
+                </div>
+                {this.userInfo.degreeFlag ? <img src={IconXueli} /> : null}
+                {this.userInfo.teacherFlag ? <img src={IconJiaozi} /> : null}
+              </div>
+            </div>
+
+            <div class={styles.teacherHonor}>
+              <div>勋章：</div>
+              <div class={styles.teacherIcons} onClick={this.openTeacherIcon}>
+                <Image
+                  class={styles.iconOther}
+                  src={
+                    this.checkBadge('STYLE')
+                      ? getAssetsHomeFile('cert_active.png')
+                      : getAssetsHomeFile('cert_default.png')
+                  }
+                />
+                <Image
+                  class={styles.iconOther}
+                  src={
+                    this.checkBadge('VIDEO')
+                      ? getAssetsHomeFile('video_active.png')
+                      : getAssetsHomeFile('video_default.png')
+                  }
+                />
+                <Image
+                  class={styles.iconOther}
+                  src={
+                    this.checkBadge('LIVE')
+                      ? getAssetsHomeFile('live_active.png')
+                      : getAssetsHomeFile('live_default.png')
+                  }
+                />
+                <Image
+                  class={styles.iconOther}
+                  src={
+                    this.checkBadge('MUSIC')
+                      ? getAssetsHomeFile('music_active.png')
+                      : getAssetsHomeFile('music_default.png')
+                  }
+                />
+              </div>
+              <div class={styles.score}>评分：</div>
+              <div class={styles.level}>
+                {this.starGrade ? (
+                  <Rate
+                    readonly
+                    modelValue={this.starGrade}
+                    iconPrefix="iconfont"
+                    color="#FFC459"
+                    void-icon="star_default"
+                    icon="star_active"
+                    size={15}
+                  />
+                ) : (
+                  <span style={{ fontSize: '12px', color: '#999999' }}>
+                    暂无评分
+                  </span>
+                )}
+              </div>
+            </div>
+            <div class={styles.piNameSubject}>
+              <Image
+                class={styles.subjectSection}
+                src={getAssetsHomeFile('icon_subject.png')}
+                fit="contain"
+              />
+              <div class={styles.subjectList}>
+                {this.subjectNameList.map((item: any) => (
+                  <span class={styles.subject}>{item}</span>
+                ))}
+              </div>
+            </div>
+            <div class={styles['teacher-bottom']}>
+              <div class={styles['teacher-data']}>
+                <div class={styles['teacher-data_item']}>
+                  粉丝 <span>{this.userInfo.fansNum || 0}</span>
+                </div>
+                <div class={styles['teacher-data_item']}>
+                  已上课时 <span>{this.userInfo.expTime || 0}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <Popup class={styles['teaherPopup']} v-model:show={this.iconShow}>
+          <Image src={getAssetsHomeFile('teacher-icon.png')} />
+          <div class={styles.teacherIconWrap}>
+            {iconList.map(n => {
+              return (
+                <div class={styles.teacherIconItem}>
+                  <div class={styles.teacherIconItemTop}>
+                    <Image src={getAssetsHomeFile(n.icon)} />
+                    <div class={styles.teacherIconTitle}>{n.title}</div>
+                  </div>
+                  <div class={styles.teacherIconDes}>{n.des}</div>
+                </div>
+              )
+            })}
+          </div>
+          <Image
+            onClick={() => (this.iconShow = false)}
+            class={styles.closeIcon}
+            src={getAssetsHomeFile('icon-close.png')}
+          />
+        </Popup>
+      </>
+    )
+  }
+})

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

@@ -1,88 +1,88 @@
-import ColHeader from '@/components/col-header'
-import { defineComponent } from 'vue'
-import styles from './teacher-home.module.less'
-import Single from './components/single'
-import request from '@/helpers/request'
-import { listenerMessage } from '@/helpers/native-message'
-import { useEventListener, useWindowScroll } from '@vueuse/core'
-import TeacherHeader from './model/teacher-header'
-import { useRect } from '@vant/use'
-
-export default defineComponent({
-  name: 'teacherHome',
-  data() {
-    // 先取session中的数据，没有再取参数，默认为老师风采
-    const tabs = sessionStorage.getItem('teacherHomeTabs') || ''
-    const query = this.$route.query
-    return {
-      teacherId: query.teacherId as string,
-      tabs: tabs || query.tabs || 'single',
-      userInfo: {} as any,
-      background: 'rgba(55, 205, 177, 0)',
-      headColor: '#fff',
-      height: 'auto' as any,
-      backIconColor: 'white',
-      homeContaiterHeight: ''
-    }
-  },
-  async created() {},
-  async mounted() {
-    this.getTeacherDetail()
-    // 监听页面返回
-    listenerMessage('webViewOnResume', () => {
-      this.getTeacherDetail()
-    })
-    useEventListener(document, 'scroll', evt => {
-      const { y } = useWindowScroll()
-      // this.background = `rgba(255, 255, 255, ${y.value / 100})`
-      // console.log(y.value) 142
-      if (y.value > 52) {
-        this.headColor = '#000'
-        this.background = '#fff'
-        this.backIconColor = 'black'
-      } else {
-        this.background = 'transparent'
-        this.headColor = '#fff'
-        this.backIconColor = 'white'
-      }
-    })
-  },
-  methods: {
-    async getTeacherDetail() {
-      try {
-        const res = await request.get('/api-student/teacher/queryTeacherHome', {
-          params: {
-            userId: this.teacherId
-          }
-        })
-        this.userInfo = res.data
-      } catch {}
-    }
-  },
-  render() {
-    return (
-      <div class={styles['teacher-record']}>
-        <div ref="headers">
-          <ColHeader
-            background={this.background}
-            border={false}
-            color={this.headColor}
-            backIconColor={this.backIconColor as any}
-            onHeaderBack={() => {
-              this.$nextTick(() => {
-                const { height } = useRect((this as any).$refs.headers)
-                this.height = height
-              })
-            }}
-          />
-        </div>
-        <img class={styles.bgImg} src={this.userInfo.heardUrl} />
-        <div class={styles.bg}></div>
-        <div class={styles.teacherHeader}>
-          <TeacherHeader userInfo={this.userInfo} teacherId={this.teacherId} />
-        </div>
-        <Single userInfo={this.userInfo} />
-      </div>
-    )
-  }
-})
+import ColHeader from '@/components/col-header'
+import { defineComponent } from 'vue'
+import styles from './teacher-home.module.less'
+import Single from './components/single'
+import request from '@/helpers/request'
+import { listenerMessage } from '@/helpers/native-message'
+import { useEventListener, useWindowScroll } from '@vueuse/core'
+import TeacherHeader from './model/teacher-header'
+import { useRect } from '@vant/use'
+
+export default defineComponent({
+  name: 'teacherHome',
+  data() {
+    // 先取session中的数据，没有再取参数，默认为老师风采
+    const tabs = sessionStorage.getItem('teacherHomeTabs') || ''
+    const query = this.$route.query
+    return {
+      teacherId: query.teacherId as string,
+      tabs: tabs || query.tabs || 'single',
+      userInfo: {} as any,
+      background: 'rgba(55, 205, 177, 0)',
+      headColor: '#fff',
+      height: 'auto' as any,
+      backIconColor: 'white',
+      homeContaiterHeight: ''
+    }
+  },
+  async created() {},
+  async mounted() {
+    this.getTeacherDetail()
+    // 监听页面返回
+    listenerMessage('webViewOnResume', () => {
+      this.getTeacherDetail()
+    })
+    useEventListener(document, 'scroll', evt => {
+      const { y } = useWindowScroll()
+      // this.background = `rgba(255, 255, 255, ${y.value / 100})`
+      // console.log(y.value) 142
+      if (y.value > 52) {
+        this.headColor = '#000'
+        this.background = '#fff'
+        this.backIconColor = 'black'
+      } else {
+        this.background = 'transparent'
+        this.headColor = '#fff'
+        this.backIconColor = 'white'
+      }
+    })
+  },
+  methods: {
+    async getTeacherDetail() {
+      try {
+        const res = await request.get('/api-student/teacher/queryTeacherHome', {
+          params: {
+            userId: this.teacherId
+          }
+        })
+        this.userInfo = res.data
+      } catch {}
+    }
+  },
+  render() {
+    return (
+      <div class={styles['teacher-record']}>
+        <div ref="headers">
+          <ColHeader
+            background={this.background}
+            border={false}
+            color={this.headColor}
+            backIconColor={this.backIconColor as any}
+            onHeaderBack={() => {
+              this.$nextTick(() => {
+                const { height } = useRect((this as any).$refs.headers)
+                this.height = height
+              })
+            }}
+          />
+        </div>
+        <img class={styles.bgImg} src={this.userInfo.heardUrl} />
+        <div class={styles.bg}></div>
+        <div class={styles.teacherHeader}>
+          <TeacherHeader userInfo={this.userInfo} teacherId={this.teacherId} />
+        </div>
+        <Single userInfo={this.userInfo} />
+      </div>
+    )
+  }
+})

src/tenant/music/coursewarePlay/index.tsx

@@ -201,15 +201,23 @@ export default defineComponent({
           }
         }
 
-        list.push({
-          ...material,
-          iframeRef: null,
-          videoEle: null,
-          tabName: name,
-          autoPlay: false, //加载完成是否自动播放
-          isprepare: false, // 视频是否加载完成
-          isRender: false // 是否渲染了
-        })
+        material.iframeRef = null
+        material.videoEle = null
+        material.tabName = name
+        material.autoPlay = false //加载完成是否自动播放
+        material.isprepare = false // 视频是否加载完成
+        material.isRender = false // 是否渲染了
+
+        list.push(material)
+        // list.push({
+        //   ...material,
+        //   iframeRef: null,
+        //   videoEle: null,
+        //   tabName: name,
+        //   autoPlay: false, //加载完成是否自动播放
+        //   isprepare: false, // 视频是否加载完成
+        //   isRender: false // 是否渲染了
+        // })
       }
       return list
     }

src/tenant/music/music-detail/imageFunction.ts

@@ -80,15 +80,15 @@ export const addMusicTitle = (canvas, info) => {
 
   // 小水印画布大小
   water.width = canvas.width
-  water.height = canvas.height + 30
+  water.height = canvas.height + 40
   const waterCtx = water.getContext('2d') as CanvasRenderingContext2D
   waterCtx.fillStyle = '#fff'
-  waterCtx.fillRect(0, 0, canvas.width, canvas.height + 70)
-  waterCtx.font = `40pt Calibri`
+  waterCtx.fillRect(0, 0, canvas.width, canvas.height + 40)
+  waterCtx.font = `26pt Calibri`
   waterCtx.fillStyle = '#000'
   waterCtx.textAlign = 'center'
-  waterCtx.drawImage(canvas, 0, 70)
-  waterCtx.fillText(info.title, canvas.width / 2, 120)
+  waterCtx.drawImage(canvas, 0, 40)
+  waterCtx.fillText(info.title, canvas.width / 2, 80)
   return water
 }
 

src/views/adapay/payment/index.tsx

@@ -121,7 +121,13 @@ export default defineComponent({
       // 不管接口是否报错,都返回
       emit('update:modelValue', false)
 
-      !noBack && router.go(-1)
+      if (!noBack) {
+        if (browser().isApp) {
+          postMessage({ api: 'goBack' })
+        } else {
+          router.go(-1)
+        }
+      }
       emit('backOut')
     }
     const onSubmit = async () => {

src/views/creation/index-share.tsx

@@ -10,7 +10,9 @@ import {
 // import Regions from 'wavesurfer.js/dist/plugins/regions.js';
 import styles from './index.module.less'
 import { Cell, Image, List, Popup, Slider } from 'vant'
-import iconMember from './images/icon-member.png'
+// import iconMember from './images/icon-member.png'
+import iconVip from './images/icon-vip.png'
+import iconSVip from './images/icon-svip.png'
 import iconZan from './images/icon-zan.png'
 import iconZanActive from './images/icon-zan-active.png'
 import iconZ from './images/icon-z.png'
@@ -347,8 +349,12 @@ export default defineComponent({
               <div class={styles.userInfo}>
                 <p class={styles.name}>
                   <span>{state.musicDetail.username}</span>
-                  {state.musicDetail.vipFlag && (
-                    <img src={iconMember} class={styles.iconMember} />
+                  {state.musicDetail.vipType === 'VIP' && (
+                    <img src={iconVip} class={styles.iconMember} />
+                  )}
+                  {(state.musicDetail.vipType === 'SVIP' ||
+                    state.musicDetail.vipType === 'PERMANENT_SVIP') && (
+                    <img src={iconSVip} class={styles.iconMember} />
                   )}
                 </p>
                 <p class={styles.sub}>

src/views/creation/index.module.less

@@ -228,6 +228,7 @@
     margin-right: 10px;
     border-radius: 50%;
     overflow: hidden;
+    flex-shrink: 0;
   }
 
   .userInfo {

src/views/creation/index.tsx

@@ -7,7 +7,9 @@ import { Button, Cell, Dialog, Image, List, Popup, Slider, Toast } from 'vant'
 import iconDownload from './images/icon-download.png'
 import iconShare from './images/icon-share.png'
 import iconDelete from './images/icon-delete.png'
-import iconMember from './images/icon-member.png'
+// import iconMember from './images/icon-member.png'
+import iconVip from './images/icon-vip.png'
+import iconSVip from './images/icon-svip.png'
 import iconZan from './images/icon-zan.png'
 import iconZanActive from './images/icon-zan-active.png'
 import iconPlay from './images/icon-play.png'
@@ -354,8 +356,12 @@ export default defineComponent({
               <div class={styles.userInfo}>
                 <p class={styles.name}>
                   <span>{state.musicDetail?.username}</span>
-                  {state.musicDetail.vipFlag && (
-                    <img src={iconMember} class={styles.iconMember} />
+                  {state.musicDetail.vipType === 'VIP' && (
+                    <img src={iconVip} class={styles.iconMember} />
+                  )}
+                  {(state.musicDetail.vipType === 'SVIP' ||
+                    state.musicDetail.vipType === 'PERMANENT_SVIP') && (
+                    <img src={iconSVip} class={styles.iconMember} />
                   )}
                 </p>
                 <p class={styles.sub}>

src/views/goods-order/after-sale.tsx

@@ -1,420 +1,450 @@
-import ColHeader from '@/components/col-header'
-import ColResult from '@/components/col-result'
-import request from '@/helpers/request'
-import { state } from '@/state'
-import {
-  ActionSheet,
-  Button,
-  Cell,
-  CellGroup,
-  Dialog,
-  Field,
-  Image,
-  List,
-  Tab,
-  Tabs,
-  Toast
-} from 'vant'
-import { defineComponent } from 'vue'
-import Item from './item'
-import styles from './index.module.less'
-
-const returnState = {
-  0: '待处理',
-  1: '退货中',
-  2: '已完成',
-  3: '已拒绝'
-}
-type good = {
-  description: string
-  memberUsername: string
-  orderId: number
-  orderSn: string
-  productAttr: string
-  productBrand: string
-  productCount: number
-  productId: number
-  productName: string
-  productPic: string
-  productPrice: number
-  productRealPrice: number
-  proofPics: string
-  returnName: string
-  returnPhone: string
-  orderItemId: string
-}
-
-export default defineComponent({
-  name: 'after-sale',
-  data() {
-    return {
-      active: '0',
-      list: [],
-      dataShow: false, // 判断是否有数据
-      loading: false,
-      finished: false,
-      show: false,
-      kmsShow: false,
-      params: {
-        pageNum: 1,
-        pageSize: 20
-      },
-
-      returnGood: {} as good,
-      reason: '', // 退货原因
-      returnOrderSn: '', // 退货快递单号
-      returnGoodId: 0 // 退货申请服务单号
-    }
-  },
-  watch: {
-    active() {
-      this.init()
-      this.getList()
-    }
-  },
-  mounted() {
-    this.getList()
-  },
-  methods: {
-    init() {
-      this.params.pageNum = 1
-      this.finished = false
-      this.list = []
-    },
-
-    async getList() {
-      //避免重复请求
-      console.log(this.loading, this.finished)
-      if (this.loading && this.finished) {
-        return
-      }
-      this.loading = true
-      let res: any
-      if (this.active === '0') {
-        // 可退货列表
-        res = await this.getIsReturnOrderList()
-      } else {
-        // 退货申请列表
-        res = await this.getReturnList()
-      }
-      if (res && res.code === 200 && res.data.list) {
-        let data = res.data
-        if (Array.isArray(data.list)) {
-          let list = [] as any
-          // 过滤一个订单里面所有商品都申请了退货
-          for (let i = 0; i < data.list.length; i++) {
-            if (data.list[i].orderItemList) {
-              let isHave =
-                data.list[i].orderItemList.findIndex(n => n.returnStatus < 0) >
-                -1
-              if (isHave) {
-                list.push(data.list[i])
-              }
-            } else {
-              list.push(data.list[i])
-            }
-          }
-          this.list = this.list.concat(this.list, list)
-        }
-        // this.list = [].concat(this.list, res.data.list)
-
-        this.params.pageNum = res.data.pageNum + 1
-      }
-      this.finished = this.params.pageNum >= res?.data?.totalPage
-      this.loading = false
-    },
-
-    //获取可退货列表
-    async getIsReturnOrderList(): Promise<object> {
-      try {
-        let res = await request.get('/api-mall-portal/order/list', {
-          params: {
-            ...this.params,
-            status: '1,2,3'
-          }
-        })
-        return res
-      } catch (error) {}
-      return {}
-    },
-
-    // 获取退货申请
-    async getReturnList(): Promise<object> {
-      try {
-        let res = await request.post('/api-mall-portal/returnApply/list', {
-          data: {
-            ...this.params,
-            status: this.active === '1' ? '0,1' : '2,3'
-          }
-        })
-        return res
-      } catch (error) {}
-      return {}
-    },
-
-    // 设置退货参数
-    setReturnParams(item: any, n: any): void {
-      this.returnGood.memberUsername = state.user.data.username
-      this.returnGood.orderId = item.id
-      this.returnGood.orderSn = item.orderSn
-      this.returnGood.productAttr = n.productAttr
-      this.returnGood.productBrand = n.productBrand
-      this.returnGood.productCount = n.productQuantity
-      this.returnGood.productId = n.productId
-      this.returnGood.productName = n.productName
-      this.returnGood.productPic = n.productPic
-      this.returnGood.productPrice = n.productPrice
-      this.returnGood.productRealPrice = n.productPrice
-      this.returnGood.proofPics = ''
-      this.returnGood.returnName = item.receiverName
-      this.returnGood.returnPhone = item.receiverPhone
-      this.returnGood.orderItemId = n.id
-      console.log(this.returnGood)
-    },
-    // 退商品
-    async setReturnShop(): Promise<void> {
-      if (!this.reason) {
-        Toast('请填写退货原因!')
-        return
-      }
-      try {
-        let res = await request.post('/api-mall-portal/returnApply/create', {
-          data: {
-            ...this.returnGood,
-            reason: this.reason
-          }
-        })
-        if (res.code === 200) {
-          Toast({
-            message: '退货申请成功',
-            icon: 'success'
-          })
-          setTimeout(() => {
-            this.show = false
-            this.reason = ''
-            this.returnOrderSn = ''
-            this.active = '1'
-          }, 500)
-        }
-      } catch (error) {}
-      this.returnGood = {} as good
-    },
-
-    // 填写快递单号
-    async setReturnApplySn(): Promise<void> {
-      if (!this.returnOrderSn) {
-        Toast('请填写退货快递单号')
-        return
-      }
-
-      try {
-        let { code, data } = await request.post(
-          '/api-mall-portal/returnApply/deliverySn',
-          {
-            data: {
-              deliverySn: this.returnOrderSn,
-              id: this.returnGoodId
-            }
-          }
-        )
-        if (code === 200) {
-          this.returnOrderSn = ''
-          this.kmsShow = false
-          this.init()
-          this.getList()
-        }
-      } catch (error) {}
-    },
-    //撤销申请
-    deleteReturnApply(): void {
-      Dialog.confirm({
-        title: '提示',
-        message: '是否撤销退货申请?',
-        confirmButtonText: '撤销',
-        confirmButtonColor: 'var(--van-primary)'
-      }).then(async () => {
-        try {
-          let { code, data } = await request.post(
-            '/api-mall-portal/returnApply/delete/' + this.returnGoodId
-          )
-          if (code === 200) {
-            this.init()
-            this.getList()
-          }
-        } catch (err) {}
-      })
-    }
-  },
-  render() {
-    const tabs = [
-      { name: '0', title: '全部' },
-      { name: '1', title: '处理中' },
-      { name: '2', title: '已处理' }
-    ]
-    return (
-      <div class={styles.shopOrder}>
-        <ColHeader />
-
-        <Tabs
-          v-model:active={this.active}
-          color="var(--van-primary)"
-          lineWidth={28}
-          animated
-          swipeable
-        >
-          {tabs.map(tab => (
-            <Tab name={tab.name} title={tab.title}>
-              {this.list.length ? (
-                <List
-                  loading={this.loading}
-                  finished={this.finished}
-                  finishedText=" "
-                  class={[styles.goodsList]}
-                  onLoad={this.getList}
-                >
-                  {this.active === tab.name &&
-                    this.list.map((item: any) => (
-                      <>
-                        {item.orderItemList && item.orderItemList.length ? (
-                          item.orderItemList.map((n: any) => (
-                            <CellGroup class={styles.cellGroup}>
-                              <Item item={n} />
-                              <Cell
-                                center
-                                v-slots={{
-                                  default: () => (
-                                    <div class={styles.btnList}>
-                                      {this.active === '0' &&
-                                      n.returnStatus < 0 && (item.status == 3 ? (item.afterSale == 0) : true) ? (
-                                        <Button
-                                          size="small"
-                                          round
-                                          type="primary"
-                                          onClick={() => {
-                                            this.show = true
-                                            this.setReturnParams(item, n)
-                                          }}
-                                        >
-                                          退货申请
-                                        </Button>
-                                      ) : null}
-                                      {n.returnStatus >= 0 ? (
-                                        <div>{returnState[n.returnStatus]}</div>
-                                      ) : null}
-                                    </div>
-                                  )
-                                }}
-                              ></Cell>
-                            </CellGroup>
-                          ))
-                        ) : (
-                          <CellGroup class={styles.cellGroup}>
-                            <Cell
-                              title={item.createTime}
-                              titleClass={styles.payTime}
-                              value={returnState[item.status]}
-                              // valueClass={}
-                            ></Cell>
-                            <Item item={item} />
-                            <Cell
-                              center
-                              v-slots={{
-                                default: () => (
-                                  <div class={styles.btnList}>
-                                    {item.status === 1 && !item.deliverySn ? (
-                                      <Button
-                                        size="small"
-                                        round
-                                        onClick={() => {
-                                          this.returnGoodId = item.id
-                                          this.kmsShow = true
-                                        }}
-                                      >
-                                        填写退货快递单号
-                                      </Button>
-                                    ) : null}
-                                    {item.status <= 1 ? (
-                                      <Button
-                                        size="small"
-                                        round
-                                        type="primary"
-                                        onClick={() => {
-                                          this.returnGoodId = item.id
-                                          this.deleteReturnApply()
-                                        }}
-                                      >
-                                        撤销申请
-                                      </Button>
-                                    ) : null}
-                                    {item.status === 2 ? (
-                                      <div class={styles.returnDes}>
-                                        该商品金额已于 {item.handleTime}{' '}
-                                        原路退还
-                                      </div>
-                                    ) : item.status === 3 ? (
-                                      <div class={styles.returnDes}>
-                                        拒绝原因: {item.handleNote}
-                                      </div>
-                                    ) : null}
-                                  </div>
-                                )
-                              }}
-                            ></Cell>
-                          </CellGroup>
-                        )}
-                      </>
-                    ))}
-                </List>
-              ) : (
-                <ColResult
-                  btnStatus={false}
-                  classImgSize="SMALL"
-                  tips="暂无数据"
-                />
-              )}
-            </Tab>
-          ))}
-        </Tabs>
-
-        <ActionSheet v-model:show={this.show} title="退货原因">
-          <div style={{ paddingTop: '15px' }}>
-            <Field
-              class={[styles.field]}
-              placeholder="请输入退货原因"
-              type="textarea"
-              rows={3}
-              v-model={this.reason}
-            />
-          </div>
-          <div class={styles['btn-group']}>
-            <Button
-              type="primary"
-              block
-              round
-              onClick={() => this.setReturnShop()}
-            >
-              确定
-            </Button>
-          </div>
-        </ActionSheet>
-        <ActionSheet v-model:show={this.kmsShow} title="填写退货快递单号">
-          <Field
-            v-model={this.returnOrderSn}
-            class={[styles.field]}
-            placeholder="请输入退货快递单号"
-          />
-          <div class={styles['btn-group']}>
-            <Button
-              type="primary"
-              block
-              round
-              onClick={() => this.setReturnApplySn()}
-            >
-              确定
-            </Button>
-          </div>
-        </ActionSheet>
-      </div>
-    )
-  }
-})
+import ColHeader from '@/components/col-header'
+import ColResult from '@/components/col-result'
+import request from '@/helpers/request'
+import { state } from '@/state'
+import {
+  ActionSheet,
+  Button,
+  Cell,
+  CellGroup,
+  Dialog,
+  Field,
+  Image,
+  List,
+  Tab,
+  Tabs,
+  Toast
+} from 'vant'
+import { defineComponent } from 'vue'
+import Item from './item'
+import styles from './index.module.less'
+
+const returnState = {
+  0: '待处理',
+  1: '退货中',
+  2: '已完成',
+  3: '已拒绝'
+}
+type good = {
+  description: string
+  memberUsername: string
+  orderId: number
+  orderSn: string
+  productAttr: string
+  productBrand: string
+  productCount: number
+  productId: number
+  productName: string
+  productPic: string
+  productPrice: number
+  productRealPrice: number
+  proofPics: string
+  returnName: string
+  returnPhone: string
+  orderItemId: string
+}
+
+export default defineComponent({
+  name: 'after-sale',
+  data() {
+    return {
+      active: '0',
+      list: [],
+      dataShow: false, // 判断是否有数据
+      loading: false,
+      finished: false,
+      show: false,
+      kmsShow: false,
+      params: {
+        pageNum: 1,
+        pageSize: 20
+      },
+
+      returnGood: {} as good,
+      reason: '', // 退货原因
+      returnOrderSn: '', // 退货快递单号
+      returnGoodId: 0 // 退货申请服务单号
+    }
+  },
+  watch: {
+    active() {
+      this.init()
+      this.getList()
+    }
+  },
+  mounted() {
+    this.getList()
+  },
+  methods: {
+    init() {
+      this.params.pageNum = 1
+      this.finished = false
+      this.list = []
+    },
+
+    async getList() {
+      //避免重复请求
+      console.log(this.loading, this.finished)
+      if (this.loading && this.finished) {
+        return
+      }
+      this.loading = true
+      let res: any
+      if (this.active === '0') {
+        // 可退货列表
+        res = await this.getIsReturnOrderList()
+      } else {
+        // 退货申请列表
+        res = await this.getReturnList()
+      }
+      if (res && res.code === 200 && res.data.list) {
+        const data = res.data
+        if (Array.isArray(data.list)) {
+          const list = [] as any
+          // 过滤一个订单里面所有商品都申请了退货
+          for (let i = 0; i < data.list.length; i++) {
+            if (data.list[i].orderItemList) {
+              const isHave =
+                data.list[i].orderItemList.findIndex(n => n.returnStatus < 0) >
+                -1
+              if (isHave) {
+                list.push(data.list[i])
+              }
+            } else {
+              list.push(data.list[i])
+            }
+          }
+          this.list = this.list.concat(this.list, list)
+        }
+        // this.list = [].concat(this.list, res.data.list)
+
+        this.params.pageNum = res.data.pageNum + 1
+      }
+      this.finished = this.params.pageNum >= res?.data?.totalPage
+      this.loading = false
+    },
+
+    //获取可退货列表
+    async getIsReturnOrderList(): Promise<object> {
+      try {
+        const res = await request.get('/api-mall-portal/order/list', {
+          params: {
+            ...this.params,
+            status: '1,2,3'
+          }
+        })
+        return res
+      } catch (error) {}
+      return {}
+    },
+
+    // 获取退货申请
+    async getReturnList(): Promise<object> {
+      try {
+        const res = await request.post('/api-mall-portal/returnApply/list', {
+          data: {
+            ...this.params,
+            status: this.active === '1' ? '0,1' : '2,3'
+          }
+        })
+        return res
+      } catch (error) {}
+      return {}
+    },
+
+    // 设置退货参数
+    setReturnParams(item: any, n: any): void {
+      this.returnGood.memberUsername = state.user.data.username
+      this.returnGood.orderId = item.id
+      this.returnGood.orderSn = item.orderSn
+      this.returnGood.productAttr = n.productAttr
+      this.returnGood.productBrand = n.productBrand
+      this.returnGood.productCount = n.productQuantity
+      this.returnGood.productId = n.productId
+      this.returnGood.productName = n.productName
+      this.returnGood.productPic = n.productPic
+      this.returnGood.productPrice = n.productPrice
+      this.returnGood.productRealPrice = n.productPrice
+      this.returnGood.proofPics = ''
+      this.returnGood.returnName = item.receiverName
+      this.returnGood.returnPhone = item.receiverPhone
+      this.returnGood.orderItemId = n.id
+      console.log(this.returnGood)
+    },
+    // 退商品
+    async setReturnShop(): Promise<void> {
+      if (!this.reason) {
+        Toast('请填写退货原因!')
+        return
+      }
+      try {
+        const res = await request.post('/api-mall-portal/returnApply/create', {
+          data: {
+            ...this.returnGood,
+            reason: this.reason
+          }
+        })
+        if (res.code === 200) {
+          Toast({
+            message: '退货申请成功',
+            icon: 'success'
+          })
+          setTimeout(() => {
+            this.show = false
+            this.reason = ''
+            this.returnOrderSn = ''
+            this.active = '1'
+          }, 500)
+        }
+      } catch (error) {}
+      this.returnGood = {} as good
+    },
+
+    // 填写快递单号
+    async setReturnApplySn(): Promise<void> {
+      if (!this.returnOrderSn) {
+        Toast('请填写退货快递单号')
+        return
+      }
+
+      try {
+        const { code, data } = await request.post(
+          '/api-mall-portal/returnApply/deliverySn',
+          {
+            data: {
+              deliverySn: this.returnOrderSn,
+              id: this.returnGoodId
+            }
+          }
+        )
+        if (code === 200) {
+          this.returnOrderSn = ''
+          this.kmsShow = false
+          this.init()
+          this.getList()
+        }
+      } catch (error) {}
+    },
+    //撤销申请
+    deleteReturnApply(): void {
+      Dialog.confirm({
+        title: '提示',
+        message: '是否撤销退货申请?',
+        confirmButtonText: '撤销',
+        confirmButtonColor: 'var(--van-primary)'
+      }).then(async () => {
+        try {
+          const { code, data } = await request.post(
+            '/api-mall-portal/returnApply/delete/' + this.returnGoodId
+          )
+          if (code === 200) {
+            this.init()
+            this.getList()
+          }
+        } catch (err) {}
+      })
+    }
+  },
+  render() {
+    const tabs = [
+      { name: '0', title: '可退商品' },
+      { name: '1', title: '处理中' },
+      { name: '2', title: '已处理' }
+    ]
+    return (
+      <div class={styles.shopOrder}>
+        <ColHeader />
+
+        <Tabs
+          v-model:active={this.active}
+          color="var(--van-primary)"
+          lineWidth={28}
+          animated
+          swipeable
+        >
+          {tabs.map(tab => (
+            <Tab name={tab.name} title={tab.title}>
+              {this.list.length ? (
+                <List
+                  loading={this.loading}
+                  finished={this.finished}
+                  finishedText=" "
+                  class={[styles.goodsList]}
+                  onLoad={this.getList}
+                >
+                  {this.active === tab.name &&
+                    this.list.map((item: any) => (
+                      <>
+                        {item.orderItemList && item.orderItemList.length ? (
+                          item.orderItemList.map((n: any) => (
+                            <CellGroup class={styles.cellGroup}>
+                              <Cell
+                                title={item.createTime}
+                                titleClass={styles.payTime}
+                                // value={returnState[item.status]}
+                                // valueClass={}
+                              ></Cell>
+                              <Item item={n} />
+                              <Cell
+                                center
+                                class={styles.bottomCell}
+                                v-slots={{
+                                  title: () => <>订单编号：{n.orderSn}</>,
+                                  default: () => (
+                                    <div class={styles.btnList}>
+                                      {this.active === '0' &&
+                                      n.returnStatus < 0 &&
+                                      (item.status == 3
+                                        ? item.afterSale == 0
+                                        : true) ? (
+                                        <Button
+                                          size="small"
+                                          round
+                                          onClick={() => {
+                                            this.show = true
+                                            this.setReturnParams(item, n)
+                                          }}
+                                        >
+                                          退货申请
+                                        </Button>
+                                      ) : null}
+                                      {n.returnStatus >= 0 ? (
+                                        <div>{returnState[n.returnStatus]}</div>
+                                      ) : null}
+                                    </div>
+                                  )
+                                }}
+                              ></Cell>
+                            </CellGroup>
+                          ))
+                        ) : (
+                          <CellGroup class={styles.cellGroup}>
+                            <Cell
+                              title={item.createTime}
+                              titleClass={styles.payTime}
+                              value={returnState[item.status]}
+                              // valueClass={}
+                            ></Cell>
+                            <Item item={item} />
+                            <Cell
+                              center
+                              v-slots={{
+                                default: () => (
+                                  <div class={styles.sectionCell}>
+                                    {item.status !== 2 && item.status !== 3 && (
+                                      <div class={styles.orderSn}>
+                                        订单编号：{item.orderSn}
+                                      </div>
+                                    )}
+                                    <div class={styles.btnList}>
+                                      {item.status === 1 && !item.deliverySn ? (
+                                        <Button
+                                          size="small"
+                                          round
+                                          onClick={() => {
+                                            this.returnGoodId = item.id
+                                            this.kmsShow = true
+                                          }}
+                                        >
+                                          填写退货快递单号
+                                        </Button>
+                                      ) : null}
+                                      {item.status <= 1 ? (
+                                        <Button
+                                          size="small"
+                                          round
+                                          type="primary"
+                                          onClick={() => {
+                                            this.returnGoodId = item.id
+                                            this.deleteReturnApply()
+                                          }}
+                                        >
+                                          撤销申请
+                                        </Button>
+                                      ) : null}
+                                      {item.status === 2 ? (
+                                        <div class={styles.returnSection}>
+                                          <div class={styles.orderSn}>
+                                            订单编号：{item.orderSn}
+                                          </div>
+                                          <div class={styles.returnDes}>
+                                            <i class={styles.iconChecked}></i>
+                                            该商品金额已于 {
+                                              item.handleTime
+                                            }{' '}
+                                            原路退还
+                                          </div>
+                                        </div>
+                                      ) : item.status === 3 ? (
+                                        <div class={styles.returnSection}>
+                                          <div class={styles.orderSn}>
+                                            订单编号：{item.orderSn}
+                                          </div>
+                                          <div class={styles.returnDes}>
+                                            拒绝原因: {item.handleNote}
+                                          </div>
+                                        </div>
+                                      ) : null}
+                                    </div>
+                                  </div>
+                                )
+                              }}
+                            ></Cell>
+                          </CellGroup>
+                        )}
+                      </>
+                    ))}
+                </List>
+              ) : (
+                <ColResult
+                  btnStatus={false}
+                  classImgSize="SMALL"
+                  tips="暂无数据"
+                />
+              )}
+            </Tab>
+          ))}
+        </Tabs>
+
+        <ActionSheet v-model:show={this.show} title="退货原因">
+          <div style={{ paddingTop: '15px' }}>
+            <Field
+              class={[styles.field]}
+              placeholder="请输入退货原因"
+              type="textarea"
+              rows={3}
+              v-model={this.reason}
+            />
+          </div>
+          <div class={styles['btn-group']}>
+            <Button
+              type="primary"
+              block
+              round
+              onClick={() => this.setReturnShop()}
+            >
+              确定
+            </Button>
+          </div>
+        </ActionSheet>
+        <ActionSheet v-model:show={this.kmsShow} title="填写退货快递单号">
+          <Field
+            v-model={this.returnOrderSn}
+            class={[styles.field]}
+            placeholder="请输入退货快递单号"
+          />
+          <div class={styles['btn-group']}>
+            <Button
+              type="primary"
+              block
+              round
+              onClick={() => this.setReturnApplySn()}
+            >
+              确定
+            </Button>
+          </div>
+        </ActionSheet>
+      </div>
+    )
+  }
+})

src/views/goods-order/index.module.less

@@ -1,119 +1,165 @@
-.shopOrder {
-  --van-nav-bar-text-color: #666666;
-  :global {
-    .van-tab__panel {
-      min-height: calc(100vh - var(--van-tabs-line-height) - var(--van-nav-bar-height) - 45px);
-    }
-  }
-}
-
-.goodsList {
-  margin-top: 12px;
-}
-
-.payTime {
-  font-size: 13px;
-  color: #666666;
-}
-.payStatus {
-  color: #ff4e19;
-}
-.paySuccess {
-  color: var(--van-primary);
-}
-
-.cellGroup {
-  margin: 12px 14px;
-  border-radius: 10px;
-  overflow: hidden;
-}
-
-.goodsImg {
-  width: 100px;
-  height: 100px;
-  border-radius: 8px;
-  overflow: hidden;
-}
-
-.goodsContainer {
-  margin-left: 10px;
-}
-
-.goodsTitle {
-  font-size: 16px;
-  color: #333333;
-  line-height: 22px;
-}
-
-.model {
-  font-size: 14px;
-  color: #999999;
-  line-height: 20px;
-  padding: 6px 0 10px 0;
-}
-
-.goodsPrice {
-  display: flex;
-  justify-content: space-between;
-
-  .num {
-    font-size: 12px;
-    font-weight: 500;
-    color: #666666;
-    line-height: 17px;
-  }
-}
-
-.btnList {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  :global {
-    .van-button + .van-button {
-      margin-left: 10px;
-    }
-  }
-}
-
-.price {
-  color: #ff4e19;
-  font-size: 16px;
-  i {
-    font-size: 12px;
-    font-style: normal;
-  }
-}
-.coupon{
-  font-size: 12px;
-  color: #ff4e19;
-}
-
-.sureGoods {
-  padding-right: 12px;
-  font-size: 12px;
-  color: #999999;
-  line-height: 17px;
-}
-
-.field {
-  margin: 0 26px 13px;
-  border: 1px solid #dedede;
-  width: auto;
-  border-radius: 10px;
-  overflow: hidden;
-}
-
-.btn-group {
-  padding: 0 15% 12px;
-}
-.returnDes {
-  color: #666;
-  font-size: 14px;
-  margin-right: auto;
-}
-
-.confirmReceipt{
-  font-size: 12px;
-  color: #999;
-  margin-right: 19px;
-}
+.shopOrder {
+  --van-nav-bar-text-color: #666666;
+
+  :global {
+    .van-tab__panel {
+      min-height: calc(100vh - var(--van-tabs-line-height) - var(--van-nav-bar-height) - 45px);
+    }
+  }
+}
+
+.goodsList {
+  margin-top: 12px;
+}
+
+.payTime {
+  font-size: 13px;
+  color: #666666;
+}
+
+.payStatus {
+  color: #ff4e19;
+}
+
+.paySuccess {
+  color: var(--van-primary);
+}
+
+.cellGroup {
+  margin: 12px 14px;
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+.goodsImg {
+  width: 100px;
+  height: 100px;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.goodsContainer {
+  margin-left: 10px;
+}
+
+.goodsTitle {
+  font-size: 16px;
+  color: #333333;
+  line-height: 22px;
+}
+
+.model {
+  font-size: 14px;
+  color: #999999;
+  line-height: 20px;
+  padding: 6px 0 10px 0;
+}
+
+.goodsPrice {
+  display: flex;
+  justify-content: space-between;
+
+  .num {
+    font-size: 12px;
+    font-weight: 500;
+    color: #666666;
+    line-height: 17px;
+  }
+}
+
+.btnList {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+
+  :global {
+    .van-button+.van-button {
+      margin-left: 10px;
+    }
+  }
+}
+
+.price {
+  color: #ff4e19;
+  font-size: 16px;
+
+  i {
+    font-size: 12px;
+    font-style: normal;
+  }
+}
+
+.coupon {
+  font-size: 12px;
+  color: #ff4e19;
+}
+
+.sureGoods {
+  padding-right: 12px;
+  font-size: 12px;
+  color: #999999;
+  line-height: 17px;
+}
+
+.field {
+  margin: 0 26px 13px;
+  border: 1px solid #dedede;
+  width: auto;
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+.btn-group {
+  padding: 0 15% 12px;
+}
+
+.returnDes {
+  font-size: 13px;
+  color: #1FBD9F;
+  padding-top: 8px;
+  margin-right: auto;
+  display: flex;
+  align-items: center;
+  line-height: 1;
+}
+
+.confirmReceipt {
+  font-size: 12px;
+  color: #999;
+  margin-right: 19px;
+}
+
+
+.bottomCell {
+  :global {
+    .van-cell__title {
+      font-size: 13px;
+      color: #AAAAAA;
+    }
+
+    .van-cell__value {
+      flex: 0 auto;
+    }
+  }
+}
+
+.sectionCell {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  .orderSn {
+    font-size: 13px;
+    color: #AAAAAA;
+  }
+
+  .iconChecked {
+    flex-shrink: 0;
+    background: url('@/common/images/icon_checkbox.png') no-repeat center;
+    background-size: contain;
+    width: 13px;
+    height: 13px;
+    margin-right: 4px;
+    display: inline-block;
+  }
+}

src/views/goods-order/index.tsx

@@ -1,232 +1,235 @@
-import ColHeader from '@/components/col-header'
-import ColResult from '@/components/col-result'
-import request from '@/helpers/request'
-import { Button, Cell, CellGroup, Dialog, Image, List, Tab, Tabs } from 'vant'
-import { defineComponent } from 'vue'
-import styles from './index.module.less'
-import { orderState } from '@/views/shop-mall/shop-mall'
-import { cartConfirm } from '@/views/cart/cart'
-import Item from './item'
-import AfterSaleBtns from './components/after-sale-btns'
-import { useEventTracking } from '@/helpers/hooks'
-
-export default defineComponent({
-  name: 'shop-order',
-  data() {
-    return {
-      active: 0,
-      list: [],
-      dataShow: true, // 判断是否有数据
-      loading: false,
-      finished: false,
-      params: {
-        search: '',
-        groupStatus: 'APPLY',
-        page: 1,
-        rows: 20
-      },
-      page: {
-        pageNum: 1,
-        pageSize: 20
-      },
-    }
-  },
-  watch: {
-    active(val) {
-      this.init()
-      this.getList()
-    }
-  },
-  mounted(){
-    useEventTracking('订单')
-  },
-  methods: {
-    init() {
-      this.page.pageNum = 1
-      this.finished = false
-      this.list = []
-      this.dataShow = true
-    },
-    async getList() {
-      if (this.loading || this.finished) {
-        return
-      }
-      this.loading = true
-      try {
-        let { code, data } = await request.get('/api-mall-portal/order/list', {
-          params: {
-            ...this.page,
-            status:
-              this.active === 0 ? '0,6' : this.active === 1 ? '1,2' : '3,4'
-          }
-        })
-
-        if (code === 200 && data.list) {
-          this.page.pageNum += 1
-          this.list = [].concat(this.list as any, data.list)
-        }
-        if (this.list.length >= data.total) {
-          this.finished = true
-        }
-
-        if (this.list.length === 0) {
-          this.dataShow = false
-        }
-      } catch (error) {
-        this.finished = true
-        this.dataShow = false
-      }
-      this.loading = false
-    },
-    onClickRight() {
-      this.$router.push('/afterSale')
-    },
-
-    async cancelOrder(item: any) {
-      let dialog = await Dialog.confirm({
-        title: '提示',
-        message: '确认取消订单?',
-        confirmButtonText: '取消订单',
-        confirmButtonColor: 'var(--van-primary)'
-      })
-      if (dialog === 'confirm') {
-        let { code, data } = await request.post(
-          '/api-mall-portal/order/cancelUserOrder',
-          { params: { orderId: item.id } }
-        )
-        if (code === 200) {
-          this.init()
-          this.getList()
-        }
-      }
-    },
-    payOrder(item: any) {
-      cartConfirm.orderInfo = item
-      this.$router.push({ path: '/cartConfirmAgin' })
-    },
-
-    // 再来一单
-    async onAginOrder(item: any) {
-      try {
-        let res = await request.post('/api-mall-portal/order/oneOrder', {
-          params: {
-            orderId: item.id
-          }
-        })
-        let { code, data } = res
-        if (code === 200) {
-          cartConfirm.calcAmount = data.calcAmount
-          cartConfirm.cartPromotionItemList = data.cartPromotionItemList
-          cartConfirm.memberReceiveAddressList = data.memberReceiveAddressList
-          this.$router.push({
-            path: '/cartConfirm'
-          })
-        }
-        console.log(res)
-      } catch (error) {
-      }
-    },
-
-    // 确认收货
-    async onConfirmReceipt(item: any) {
-      let dialog = await Dialog.confirm({
-        title: '提示',
-        message: '确认收货?',
-        confirmButtonText: '收货',
-        confirmButtonColor: 'var(--van-primary)'
-      })
-      if (dialog === 'confirm') {
-        let res = await request.post(
-          '/api-mall-portal/order/confirmReceiveOrder',
-          { params: { orderId: item.id } }
-        )
-        if (res.code === 200) {
-          this.init()
-          this.getList()
-        }
-      }
-    }
-  },
-  render() {
-    const tabs = [
-      { name: 0, title: '待支付' },
-      { name: 1, title: '待收货' },
-      { name: 2, title: '已完成' }
-    ]
-
-    return (
-      <div class={styles.shopOrder}>
-        <ColHeader
-          ref="colHeader"
-          class="header"
-          rightText="售后服务"
-          onClickRight={this.onClickRight}
-        />
-        <Tabs
-          v-model:active={this.active}
-          color="var(--van-primary)"
-          lineWidth={28}
-          animated
-          swipeable
-        >
-          {tabs.map(tab => (
-            <Tab name={tab.name} title={tab.title}>
-              {this.active === tab.name && this.dataShow ? (
-                <List
-                  loading={this.loading}
-                  finished={this.finished}
-                  finishedText=" "
-                  class={[styles.goodsList]}
-                  onLoad={this.getList}
-                >
-                  {this.list.map((item: any) => (
-                    <>
-                      <CellGroup
-                        class={styles.cellGroup}
-                        onClick={() => {
-                          this.$router.push({
-                            path: '/shopOrderDetail',
-                            query: { id: item.id }
-                          })
-                        }}
-                      >
-                        <Cell
-                          title={item.createTime}
-                          titleClass={styles.payTime}
-                          value={orderState[item.status]}
-                          valueClass={
-                            [0, 4, 5, 6].includes(item.status)
-                              ? styles.payStatus
-                              : styles.paySuccess
-                          }
-                        ></Cell>
-                        {item.orderItemList && item.orderItemList.length
-                          ? item.orderItemList.map((n: any) => (
-                              <Item item={n} />
-                            ))
-                          : null}
-                        <AfterSaleBtns
-                          item={item}
-                          onCancelOrder={this.cancelOrder}
-                          onPayOrder={this.payOrder}
-                          onConfirmReceipt={this.onConfirmReceipt}
-                          onAginOrder={this.onAginOrder}
-                        />
-                      </CellGroup>
-                    </>
-                  ))}
-                </List>
-              ) : (
-                <ColResult
-                  btnStatus={false}
-                  classImgSize="SMALL"
-                  tips="暂无订单"
-                />
-              )}
-            </Tab>
-          ))}
-        </Tabs>
-      </div>
-    )
-  }
-})
+import ColHeader from '@/components/col-header'
+import ColResult from '@/components/col-result'
+import request from '@/helpers/request'
+import { Button, Cell, CellGroup, Dialog, Image, List, Tab, Tabs } from 'vant'
+import { defineComponent } from 'vue'
+import styles from './index.module.less'
+import { orderState } from '@/views/shop-mall/shop-mall'
+import { cartConfirm } from '@/views/cart/cart'
+import Item from './item'
+import AfterSaleBtns from './components/after-sale-btns'
+import { useEventTracking } from '@/helpers/hooks'
+
+export default defineComponent({
+  name: 'shop-order',
+  data() {
+    return {
+      active: 0,
+      list: [],
+      dataShow: true, // 判断是否有数据
+      loading: false,
+      finished: false,
+      params: {
+        search: '',
+        groupStatus: 'APPLY',
+        page: 1,
+        rows: 20
+      },
+      page: {
+        pageNum: 1,
+        pageSize: 20
+      }
+    }
+  },
+  watch: {
+    active(val) {
+      this.init()
+      this.getList()
+    }
+  },
+  mounted() {
+    useEventTracking('订单')
+  },
+  methods: {
+    init() {
+      this.page.pageNum = 1
+      this.finished = false
+      this.list = []
+      this.dataShow = true
+    },
+    async getList() {
+      if (this.loading || this.finished) {
+        return
+      }
+      this.loading = true
+      try {
+        const { code, data } = await request.get(
+          '/api-mall-portal/order/list',
+          {
+            params: {
+              ...this.page,
+              status:
+                this.active === 0 ? '0,6' : this.active === 1 ? '1,2' : '3,4'
+            }
+          }
+        )
+
+        if (code === 200 && data.list) {
+          this.page.pageNum += 1
+          this.list = [].concat(this.list as any, data.list)
+        }
+        if (this.list.length >= data.total) {
+          this.finished = true
+        }
+
+        if (this.list.length === 0) {
+          this.dataShow = false
+        }
+      } catch (error) {
+        this.finished = true
+        this.dataShow = false
+      }
+      this.loading = false
+    },
+    onClickRight() {
+      this.$router.push('/afterSale')
+    },
+
+    async cancelOrder(item: any) {
+      const dialog = await Dialog.confirm({
+        title: '提示',
+        message: '确认取消订单?',
+        confirmButtonText: '取消订单',
+        confirmButtonColor: 'var(--van-primary)'
+      })
+      if (dialog === 'confirm') {
+        const { code, data } = await request.post(
+          '/api-mall-portal/order/cancelUserOrder',
+          { params: { orderId: item.id } }
+        )
+        if (code === 200) {
+          this.init()
+          this.getList()
+        }
+      }
+    },
+    payOrder(item: any) {
+      cartConfirm.orderInfo = item
+      this.$router.push({ path: '/cartConfirmAgin' })
+    },
+
+    // 再来一单
+    async onAginOrder(item: any) {
+      try {
+        const res = await request.post('/api-mall-portal/order/oneOrder', {
+          params: {
+            orderId: item.id
+          }
+        })
+        const { code, data } = res
+        if (code === 200) {
+          cartConfirm.calcAmount = data.calcAmount
+          cartConfirm.cartPromotionItemList = data.cartPromotionItemList
+          cartConfirm.memberReceiveAddressList = data.memberReceiveAddressList
+          this.$router.push({
+            path: '/cartConfirm'
+          })
+        }
+        console.log(res)
+      } catch (error) {}
+    },
+
+    // 确认收货
+    async onConfirmReceipt(item: any) {
+      const dialog = await Dialog.confirm({
+        title: '提示',
+        message: '确认收货?',
+        confirmButtonText: '收货',
+        confirmButtonColor: 'var(--van-primary)'
+      })
+      if (dialog === 'confirm') {
+        const res = await request.post(
+          '/api-mall-portal/order/confirmReceiveOrder',
+          { params: { orderId: item.id } }
+        )
+        if (res.code === 200) {
+          this.init()
+          this.getList()
+        }
+      }
+    }
+  },
+  render() {
+    const tabs = [
+      { name: 0, title: '待支付' },
+      { name: 1, title: '待收货' },
+      { name: 2, title: '已完成' }
+    ]
+
+    return (
+      <div class={styles.shopOrder}>
+        <ColHeader
+          ref="colHeader"
+          class="header"
+          rightText="售后服务"
+          onClickRight={this.onClickRight}
+        />
+        <Tabs
+          v-model:active={this.active}
+          color="var(--van-primary)"
+          lineWidth={28}
+          animated
+          swipeable
+        >
+          {tabs.map(tab => (
+            <Tab name={tab.name} title={tab.title}>
+              {this.active === tab.name && this.dataShow ? (
+                <List
+                  loading={this.loading}
+                  finished={this.finished}
+                  finishedText=" "
+                  class={[styles.goodsList]}
+                  onLoad={this.getList}
+                >
+                  {this.list.map((item: any) => (
+                    <>
+                      <CellGroup
+                        class={styles.cellGroup}
+                        border={false}
+                        onClick={() => {
+                          this.$router.push({
+                            path: '/shopOrderDetail',
+                            query: { id: item.id }
+                          })
+                        }}
+                      >
+                        <Cell
+                          title={item.createTime}
+                          titleClass={styles.payTime}
+                          value={orderState[item.status]}
+                          valueClass={
+                            [0, 4, 5, 6].includes(item.status)
+                              ? styles.payStatus
+                              : styles.paySuccess
+                          }
+                        ></Cell>
+                        {item.orderItemList && item.orderItemList.length
+                          ? item.orderItemList.map((n: any) => (
+                              <Item item={n} />
+                            ))
+                          : null}
+                        <AfterSaleBtns
+                          item={item}
+                          onCancelOrder={this.cancelOrder}
+                          onPayOrder={this.payOrder}
+                          onConfirmReceipt={this.onConfirmReceipt}
+                          onAginOrder={this.onAginOrder}
+                        />
+                      </CellGroup>
+                    </>
+                  ))}
+                </List>
+              ) : (
+                <ColResult
+                  btnStatus={false}
+                  classImgSize="SMALL"
+                  tips="暂无订单"
+                />
+              )}
+            </Tab>
+          ))}
+        </Tabs>
+      </div>
+    )
+  }
+})

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

@@ -0,0 +1,37 @@
+.member_insteres {
+  padding: 0 16px;
+
+  .title {
+    height: 28px;
+    text-align: center;
+    padding: 16px 0;
+
+    img {
+      height: inherit;
+      width: auto;
+    }
+  }
+
+  img {
+    width: 100%;
+  }
+
+  .intro {
+    img {
+      margin-bottom: 4px;
+
+      &:last-child {
+        margin-bottom: 0px;
+      }
+    }
+  }
+
+  .introVip {
+    line-height: 0;
+
+    img {
+      margin-bottom: 0;
+
+    }
+  }
+}

src/views/member-center/components/member-interes/index.tsx

@@ -0,0 +1,65 @@
+import { defineComponent } from 'vue'
+import styles from './index.module.less'
+import title1 from '../../new-images/icon-title-1.png'
+import title2 from '../../new-images/icon-title-2.png'
+import title3 from '../../new-images/icon-title-3.png'
+import iconEquity from '../../new-images/icon-equity-bg.png'
+import sVip1 from '../../new-images/svip-fun-1.png'
+import sVip2 from '../../new-images/svip-fun-2.png'
+import sVip3 from '../../new-images/svip-fun-3.png'
+import sVip4 from '../../new-images/svip-fun-4.png'
+import sVipQuestion from '../../new-images/svip-question-bg.png'
+import vip1 from '../../new-images/vip-fun-1.png'
+import vip2 from '../../new-images/vip-fun-2.png'
+import vip3 from '../../new-images/vip-fun-3.png'
+import vipQuestion from '../../new-images/vip-question-bg.png'
+
+export default defineComponent({
+  name: 'member-insteres',
+  props: {
+    type: {
+      type: String,
+      default: 'VIP'
+    }
+  },
+  setup(props) {
+    return () => (
+      <div class={styles.member_insteres}>
+        <div class={styles.title}>
+          <img src={title3} />
+        </div>
+
+        <img src={iconEquity} />
+
+        <div class={styles.title}>
+          <img src={title1} />
+        </div>
+
+        {props.type === 'SVIP' ? (
+          <div class={styles.intro}>
+            <img src={sVip1} />
+            <img src={sVip2} />
+            <img src={sVip3} />
+            <img src={sVip4} />
+          </div>
+        ) : (
+          <div class={[styles.intro, styles.introVip]}>
+            <img src={vip1} />
+            <img src={vip2} />
+            <img src={vip3} />
+          </div>
+        )}
+
+        <div class={styles.title}>
+          <img src={title2} />
+        </div>
+
+        {props.type === 'SVIP' ? (
+          <img src={sVipQuestion} />
+        ) : (
+          <img src={vipQuestion} />
+        )}
+      </div>
+    )
+  }
+})

src/views/member-center/index copy.tsx

@@ -0,0 +1,419 @@
+import ColHeader from '@/components/col-header'
+import { Button, Cell, Icon, Image, Popup, Toast } from 'vant'
+import { defineComponent } from 'vue'
+import styles from './index.module.less'
+import request from '@/helpers/request'
+import { setLogin, state } from '@/state'
+import iconStudent from '@common/images/icon_student.png'
+import iconTeacher from '@common/images/icon_teacher.png'
+import iconGift from './images/icon_gift.png'
+import iconShare from '../music/album/icon_share2.svg'
+import iconDiscount from './images/icon_discount.png'
+import iconMemberLogo from './images/member_logo.png'
+import { orderStatus } from '@/views/order-detail/orderStatus'
+import dayjs from 'dayjs'
+import { memberType } from '@/constant'
+import { moneyFormat } from '@/helpers/utils'
+import ColShare from '@/components/col-share'
+
+export const getAssetsHomeFile = (fileName: string) => {
+  const path = `./images/${fileName}`
+  const modules = import.meta.globEager('./images/*')
+  return modules[path].default
+}
+
+export default defineComponent({
+  name: 'MemberCenter',
+  data() {
+    const query = this.$route.query
+    return {
+      activityId: query.activityId,
+      recomUserId: query.recomUserId,
+      apiSuffix:
+        state.platformType === 'STUDENT' ? '/api-student' : '/api-teacher',
+      agreeStatus: false,
+      functionList: [],
+      memberList: [],
+      selectMember: {} as any,
+      params: {
+        page: 1,
+        rows: 20
+      },
+      discountTeacher: {
+        avatar: '',
+        discount: 0,
+        username: ''
+      },
+      shareStatus: false,
+      shareUrl: '',
+      shareDiscount: 0 // 是否有优惠活动
+    }
+  },
+  computed: {
+    userInfo() {
+      const users = state.user.data
+      return {
+        username: users?.username,
+        phone: users?.phone,
+        avatar: users?.heardUrl,
+        id: users?.userId,
+        memberRankSettingId: users?.memberRankSettingId,
+        isVip: users?.isVip,
+        membershipDays: users?.membershipDays,
+        membershipEndTime: users?.membershipEndTime
+      }
+    }
+  },
+  async mounted() {
+    try {
+      const userInfo = await request.get(
+        state.platformType === 'TEACHER'
+          ? '/api-teacher/teacher/queryUserInfo'
+          : '/api-student/student/queryUserInfo'
+      )
+      setLogin(userInfo.data)
+
+      const res = await request.post(
+        `${this.apiSuffix}/memberPriceSettings/vipPermissions`
+      )
+      const result = res.data || []
+      this.functionList = result.map((item: any) => {
+        return {
+          title: item.paramName,
+          icon: getAssetsHomeFile(`${item.paramValue}.png`)
+        }
+      })
+
+      const setting = await request.post(
+        `${this.apiSuffix}/memberPriceSettings/list`,
+        {
+          data: {
+            activityId: Number(this.activityId),
+            userId: this.recomUserId
+          }
+        }
+      )
+      const { list, ...more } = setting.data
+      this.discountTeacher = {
+        ...more
+      }
+      const settingResult = list || []
+      let settingList: any = []
+      settingResult.forEach((item: any) => {
+        const tempItem = {
+          title: '',
+          salePrice: item.salePrice,
+          originalPrice: item.originalPrice,
+          period: item.period,
+          id: item.id,
+          discount: item.discount,
+          discountPrice: item.discountPrice,
+          status: false
+        }
+
+        tempItem.title = memberType[item.period]
+
+        item.period !== 'DAY' && settingList.push(tempItem)
+      })
+
+      settingList = settingList ? settingList.reverse() : []
+      if (settingList.length > 0) {
+        settingList[0].status = true
+        this.selectMember = settingList[0]
+      }
+      console.log(settingList)
+      this.memberList = settingList
+    } catch {}
+  },
+  methods: {
+    async onShare() {
+      try {
+        const res = await request.post('/api-teacher/open/vipProfit', {
+          data: {
+            userId: this.userInfo.id
+          }
+        })
+
+        this.shareUrl = `${location.origin}/teacher#/shareVip?recomUserId=${this.userInfo.id}&userType=${state.platformType}`
+        // 判断是否有我分享的编号
+        if (res.data && res.data.activityId) {
+          this.shareUrl = this.shareUrl + '&activityId=' + res.data.activityId
+        }
+        this.shareStatus = true
+        this.shareDiscount = res.data.discount || 0
+        // let url =
+        //   location.origin +
+        //   `/accompany/colexiu-share.html?id=${moreData.value.id}&recomUserId=${state.user.data?.userId}`
+        // // 判断是否有活动
+        // if (res.data.discount === 1) {
+        //   url += `&activityId=${res.data.activityId}`
+        // }
+        // shareDiscount.value = res.data.discount || 0
+        // shareUrl.value = url
+        // isMore.value = false
+        // shareStatus.value = true
+        return
+      } catch {}
+    },
+    calcSalePrice(item: any) {
+      // discount
+      if (item.discount === 1) {
+        const tempPrice = Number(
+          (item.salePrice - item.discountPrice).toFixed(2)
+        )
+        return tempPrice >= 0 ? tempPrice : 0
+      }
+      return item.salePrice
+    },
+    onSubmit() {
+      const member: any = this.selectMember
+      // 判断是否有会员
+      const startTime = this.userInfo.isVip
+        ? dayjs(this.userInfo.membershipEndTime).toDate()
+        : new Date()
+      let endTime = new Date()
+      if (member.period === 'MONTH') {
+        endTime = dayjs(startTime).add(1, 'month').toDate()
+      } else if (member.period === 'QUARTERLY') {
+        endTime = dayjs(startTime).add(3, 'month').toDate()
+      } else if (member.period === 'YEAR_HALF') {
+        endTime = dayjs(startTime).add(6, 'month').toDate()
+      } else if (member.period === 'YEAR') {
+        endTime = dayjs(startTime).add(1, 'year').toDate()
+      }
+
+      orderStatus.orderObject.orderType = 'VIP'
+      orderStatus.orderObject.orderName = '小酷Ai' + member.title
+      orderStatus.orderObject.orderDesc = '小酷Ai' + member.title
+      orderStatus.orderObject.actualPrice = this.calcSalePrice(member)
+      orderStatus.orderObject.recomUserId = this.recomUserId
+      orderStatus.orderObject.activityId = this.activityId
+      orderStatus.orderObject.orderNo = ''
+      orderStatus.orderObject.orderList = [
+        {
+          orderType: 'VIP',
+          goodsName: '小酷Ai' + member.title,
+          id: member.id,
+          title: member.title,
+          price: this.calcSalePrice(member),
+          startTime: dayjs(startTime).format('YYYY-MM-DD'),
+          endTime: dayjs(endTime).format('YYYY-MM-DD'),
+          recomUserId: this.recomUserId
+        }
+      ]
+      this.$router.push({
+        path: '/orderDetail',
+        query: {
+          orderType: 'VIP'
+        }
+      })
+    }
+  },
+  render() {
+    return (
+      <div class={styles['member-center']}>
+        <ColHeader
+          background="#ffe5cc"
+          v-slots={{
+            right: () => (
+              <div class={styles.shareBtn} onClick={this.onShare}>
+                <Image src={iconShare} />
+                分享
+              </div>
+            )
+          }}
+        />
+        <div class={styles.member_container}>
+          <Cell
+            class={styles.userMember}
+            labelClass={styles.timeRemaining}
+            v-slots={{
+              icon: () => (
+                <div class={styles.userImgSection}>
+                  <Image
+                    class={styles.userImg}
+                    src={this.userInfo.avatar || iconStudent}
+                    fit="cover"
+                  />
+                </div>
+              ),
+              title: () => (
+                <div class={styles.userInfo}>
+                  <span class={styles.name}>{this.userInfo.username}</span>
+                  {!!this.userInfo.isVip && (
+                    <Image
+                      class={styles.level}
+                      src="https://oss.dayaedu.com/daya/202107/ScSTL1D.png"
+                    />
+                  )}
+                  <span
+                    class={styles.phone}
+                    v-html={`（${this.userInfo.phone}）`}
+                  ></span>
+                </div>
+              ),
+              label: () => (
+                <div class={styles.member_time}>
+                  {this.userInfo.isVip ? (
+                    <div>
+                      会员权益有效期剩余
+                      <span class={styles.remaining}>
+                        {this.userInfo.membershipDays}
+                      </span>
+                      天
+                    </div>
+                  ) : !this.userInfo.isVip &&
+                    this.userInfo.membershipEndTime ? (
+                    <div>您的会员已过期，续费后会员权益可继续使用</div>
+                  ) : (
+                    <div>亲，您还不是会员哦~</div>
+                  )}
+                </div>
+              )
+            }}
+          ></Cell>
+        </div>
+
+        <div class={styles.memberContainer}>
+          <div class={styles.memberItem}>
+            <div class={styles.title}>
+              会员<span>VIP</span>
+            </div>
+
+            {/* 判断是否有推荐老师 */}
+            {this.discountTeacher.discount == 1 && (
+              <div class={styles.memberDiscount}>
+                <Image
+                  src={this.discountTeacher.avatar || iconTeacher}
+                  class={styles.discountAvatar}
+                />
+
+                <span class={styles.discountName}>
+                  {this.discountTeacher.username}老师的专属优惠～
+                </span>
+
+                <Image src={iconGift} class={styles.discountGift} />
+              </div>
+            )}
+
+            <div class={styles['system-list']}>
+              {this.memberList.map((item: any) => (
+                <div
+                  class={[styles['system-item'], item.status && styles.active]}
+                  onClick={() => {
+                    this.memberList.forEach((item: any) => {
+                      item.status = false
+                    })
+                    item.status = true
+                    this.selectMember = item
+                  }}
+                >
+                  {item.period === 'YEAR' && (
+                    <span class={[styles.bat]}>优惠</span>
+                  )}
+
+                  <div class={styles.discountItem}>
+                    {item.discount == 1 && <img src={iconDiscount} />}
+                  </div>
+                  <p class={styles.title}>{item.title}</p>
+                  <p class={styles.price}>
+                    <span>￥</span>
+                    {moneyFormat(this.calcSalePrice(item), '0,0[.]00')}
+                  </p>
+                  <del class={styles.originalPrice}>
+                    ￥{moneyFormat(item.originalPrice, '0,0[.]00')}
+                  </del>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <div class={[styles.intro]}>
+            <p>
+              酷乐秀会员可使用包括平台提供的所有训练乐谱，并专享“
+              <b>小酷Ai</b>
+              ”八大核心功能，孩子在家就能轻松完成乐器自主规范练习。
+            </p>
+          </div>
+
+          {this.functionList.length > 0 && (
+            <div class={styles.memberItem}>
+              <div class={styles.title}>会员功能</div>
+
+              <div class={styles.member_function}>
+                {this.functionList.map((item: any) => (
+                  <div class={styles.function_item}>
+                    <Icon name={item.icon} size={34} />
+                    <div class={styles.function_text} v-html={item.title}></div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* <ColProtocol
+            v-model={this.agreeStatus}
+            showHeader
+            style={{ paddingLeft: 0, paddingRight: 0, marginBottom: '64px' }}
+          /> */}
+        </div>
+        <div class={styles.btnGroup}>
+          <div class={styles.priceSection}>
+            支付金额：
+            <div class={styles.price}>
+              <span class={styles.priceUnit}>￥</span>
+              <span class={styles.priceNum}>
+                {(this as any).$filters.moneyFormat(
+                  this.calcSalePrice(this.selectMember) || 0
+                )}
+              </span>
+            </div>
+            {this.selectMember?.discount == 1 && (
+              <div class={[styles.discountItem, styles.discountBuy]}>
+                <img src={iconDiscount} />
+              </div>
+            )}
+          </div>
+          <Button
+            color="linear-gradient(220deg, #DFA164 0%, #FAC87E 100%)"
+            round
+            class={styles.btn}
+            onClick={this.onSubmit}
+          >
+            {this.userInfo.isVip ? (
+              <>立即续费</>
+            ) : !this.userInfo.isVip && this.userInfo.membershipEndTime ? (
+              <>立即续费</>
+            ) : (
+              <>立即支付</>
+            )}
+          </Button>
+        </div>
+
+        <Popup
+          v-model:show={this.shareStatus}
+          style={{ background: 'transparent' }}
+        >
+          <ColShare
+            teacherId={this.userInfo.id}
+            shareUrl={this.shareUrl}
+            shareType="vip"
+            shareLength={2}
+          >
+            <div class={styles.shareVip}>
+              {this.shareDiscount === 1 && (
+                <div class={styles.tagDiscount}>专属优惠</div>
+              )}
+
+              <img class={styles.icon} src={iconMemberLogo} />
+              <div class={styles.info}>
+                <h4 class="van-multi-ellipsis--l2">小酷Ai会员</h4>
+                <p>海量曲谱、智能评测，专为器乐学习者量身打造</p>
+              </div>
+            </div>
+          </ColShare>
+        </Popup>
+      </div>
+    )
+  }
+})

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

@@ -0,0 +1,437 @@
+.member-center {
+  background-color: #ffe5cc;
+  min-height: 100vh;
+  position: relative;
+
+  :global {
+    .van-nav-bar {
+      background-color: transparent;
+    }
+  }
+
+  .member_container {
+    padding: 10px 14px 0;
+
+    .title {
+      display: flex;
+      align-items: center;
+      font-size: 16px;
+      line-height: 28px;
+      font-weight: 500;
+      color: #333333;
+
+      &::before {
+        content: ' ';
+        width: 4px;
+        height: 17px;
+        background: #01c1b5;
+        display: inline-block;
+        margin-right: 7px;
+        border-radius: 8px;
+      }
+    }
+  }
+
+  .level {
+    width: 18px;
+    height: 16px;
+  }
+
+  .userMember {
+    background: url('./images/member_bg.png') no-repeat center #534754;
+    background-size: cover;
+    width: auto;
+    border-radius: 10px;
+    padding: 20px 12px 30px;
+
+    .userImgSection {
+      background-color: transparent;
+      margin-right: 12px;
+    }
+
+    .userImg {
+      padding: 2px;
+      border: 1px solid #feecd2;
+      border-radius: 50%;
+      vertical-align: middle;
+      overflow: hidden;
+
+      img {
+        width: 46px;
+        height: 46px;
+        border-radius: 50%;
+      }
+    }
+
+    .userInfo {
+      display: flex;
+      align-items: center;
+      color: #fff;
+      padding-bottom: 5px;
+
+      .name {
+        font-size: 18px;
+        padding-right: 5px;
+        max-width: 100px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .phone {
+        font-size: 14px;
+      }
+    }
+
+    .timeRemaining {
+      margin-top: 0;
+      font-size: 14px;
+      color: #c0c0c0;
+
+      .remaining {
+        color: #f7b500;
+        padding: 0 5px;
+      }
+    }
+
+    .member_time {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+  }
+
+  .intro {
+    background: url('./images/tip_bg.png') no-repeat center;
+    background-size: contain;
+    height: 142px;
+    font-size: 14px;
+    color: #bb6e3a;
+
+    p {
+      padding: 45px 25px 0;
+      text-align: justify;
+      line-height: 22px;
+    }
+  }
+
+  .memberContainer {
+    // height: calc(100vh - 196px);
+    // overflow-y: auto;
+    background-color: #fff;
+    border-radius: 18px 18px 0px 0px;
+    position: relative;
+    margin-top: -15px;
+    padding: 0 14px 75px;
+    z-index: 99;
+  }
+
+  .memberItem {
+    padding-top: 20px;
+
+    .title {
+      font-size: 16px;
+      color: #333333;
+      font-weight: 500;
+
+      span {
+        color: #f7b500;
+      }
+    }
+  }
+
+  .member_function {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+
+    .function_item__content {
+      height: 100%;
+    }
+
+    .function_item {
+      width: 80px;
+      padding: 12px 0;
+      margin-top: 8px;
+      border-radius: 8px;
+      overflow: hidden;
+      background-color: #faefe3;
+      text-align: center;
+    }
+
+    .function_text {
+      font-size: 12px;
+      color: #814014;
+      line-height: 16px;
+    }
+  }
+
+  .system-list::-webkit-scrollbar {
+    display: none;
+    /* Chrome Safari */
+  }
+
+  .system-list {
+    width: 100%;
+    overflow-x: auto;
+    overflow-y: hidden;
+    display: flex;
+    position: relative;
+    user-select: none;
+    box-sizing: content-box;
+    padding-top: 16px;
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+  }
+
+  .system-item {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    flex: 1 0 auto;
+    width: 96px;
+    min-height: 120px;
+    box-sizing: border-box;
+    background: #ffffff;
+    border-radius: 12px;
+    border: 1px solid #e5e5e5;
+    margin-left: 10px;
+
+    .bat {
+      position: absolute;
+      top: -1px;
+      left: -1px;
+      padding: 2px 5px 1px;
+      background: linear-gradient(90deg, #FF7878 0%, #FF4343 100%);
+      border-radius: 11px 10px 10px 0px;
+      font-size: 12px;
+      font-weight: 600;
+      color: #FFFFFF;
+      line-height: 17px;
+    }
+
+    &:first-child {
+      margin-left: 0;
+    }
+
+    .title {
+      font-size: 14px;
+      font-weight: 500;
+      color: #333333;
+      line-height: 20px;
+    }
+
+    .price {
+      color: #dc9362;
+      font-size: 25px;
+      line-height: 1.5;
+
+      span {
+        font-size: 16px;
+      }
+    }
+
+    .originalPrice {
+      color: #937059;
+      font-size: 13px;
+    }
+
+    &.active {
+      background: linear-gradient(215deg,
+          #ffe7c4 0%,
+          rgba(250, 211, 156, 0.21) 100%);
+      border: 1px solid #b1652e;
+      position: relative;
+
+      .title {
+        color: #814014;
+      }
+
+      .price {
+        color: #b1652e;
+      }
+
+      .originalPrice {
+        color: #937059;
+      }
+
+      &::before {
+        content: '\e728';
+        font: 14px/1 'vant-icon';
+        color: #fff;
+        background-color: #b1652e;
+        width: 27px;
+        height: 18px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: absolute;
+        top: -1px;
+        right: -1px;
+        border-radius: 0 12px 0 12px;
+      }
+
+      .bat {
+        background: linear-gradient(270deg, rgba(255, 255, 255, 0.33) 0%, rgba(254, 234, 205, 0.33) 100%);
+        border-radius: 11px 10px 10px 0px;
+        border: 1px solid rgba(177, 101, 46, 0.33);
+        border-left: 0;
+        border-top: 0;
+        color: #B1652E;
+      }
+    }
+  }
+
+  .btnGroup {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 100;
+    background-color: #fff;
+    display: flex;
+    align-items: center;
+    padding: 12px 16px;
+    justify-content: space-between;
+    border-top: 1px solid #f0f0f0;
+
+    .btn {
+      padding: 0 22px;
+      color: #7a3104 !important;
+    }
+
+    .priceSection {
+      display: flex;
+      align-items: center;
+      font-size: 16px;
+      color: #1a1a1a;
+
+      .price {
+        font-size: 18px;
+        font-weight: bold;
+        color: #ff3535;
+
+        .priceUnit {
+          font-size: 14px;
+        }
+      }
+    }
+  }
+}
+
+.memberDiscount {
+  margin-top: 16px;
+  position: relative;
+  background: url('./images/discount_bg.png') no-repeat center;
+  background-size: contain;
+  display: flex;
+  align-items: center;
+  height: 44px;
+  font-size: 16px;
+  color: #ff7100;
+  line-height: 18px;
+
+  .discountAvatar {
+    margin-left: 15px;
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    overflow: hidden;
+    border: 1px solid #ffaf59;
+  }
+
+  .discountName {
+    padding-left: 30px;
+    max-width: 200px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .discountGift {
+    position: absolute;
+    right: 26px;
+    top: 7px;
+    width: 29px;
+    height: 29px;
+  }
+}
+
+.discountItem {
+  height: 14px;
+  padding-bottom: 2px;
+
+  img {
+    height: 100%;
+  }
+}
+
+.discountBuy {
+  height: 18px;
+  padding-bottom: 0;
+  margin-left: 8px;
+}
+
+.shareBtn {
+  display: flex;
+  align-items: flex-start;
+  color: #666;
+  font-size: 14px;
+  line-height: 20px !important;
+
+  :global(.van-image) {
+    width: 18px;
+    height: 18px;
+    margin-right: 6px;
+  }
+}
+
+.shareVip {
+  position: relative;
+  margin-top: 50px;
+  display: flex;
+  flex: 1;
+  align-items: center;
+  padding: 11px 6px 11px;
+  background: #ffffff;
+  border-radius: 10px;
+
+  .icon {
+    width: 36px;
+    height: 36px;
+    border-radius: 10px;
+  }
+
+  .info {
+    margin-left: 6px;
+    flex: 1;
+    word-break: break-all;
+
+    >h4 {
+      color: var(--music-list-item-title-color);
+      font-size: 14px;
+      font-weight: 600;
+    }
+
+    >p {
+      color: var(--music-list-item-mate-color);
+      line-height: 17px;
+    }
+  }
+}
+
+.tagDiscount {
+  position: absolute;
+  top: -23px;
+  left: 15px;
+  padding: 0 10px;
+  height: 23px;
+  background: linear-gradient(180deg, #ffb635 0%, #ff4e18 100%);
+  border-radius: 8px 8px 0px 0px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #ffffff;
+  line-height: 24px;
+}

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

@@ -1,342 +1,326 @@
-.member-center {
-  background-color: #ffe5cc;
+.memberCenter {
   min-height: 100vh;
-  position: relative;
+  background: url('./new-images/icon-banner.png') no-repeat top center;
+  background-size: contain;
+  box-sizing: border-box;
 
   :global {
-    .van-nav-bar {
-      background-color: transparent;
-    }
-  }
-
-  .member_container {
-    padding: 10px 14px 0;
-
-    .title {
-      display: flex;
-      align-items: center;
-      font-size: 16px;
-      line-height: 28px;
-      font-weight: 500;
-      color: #333333;
-
-      &::before {
-        content: ' ';
-        width: 4px;
-        height: 17px;
-        background: #01c1b5;
-        display: inline-block;
-        margin-right: 7px;
-        border-radius: 8px;
-      }
+    .van-nav-bar__left .van-icon {
+      color: #000000;
     }
   }
 
-  .level {
-    width: 18px;
+  .shareBtn {
+    width: 16px;
     height: 16px;
   }
+}
 
-  .userMember {
-    background: url('./images/member_bg.png') no-repeat center #534754;
-    background-size: cover;
-    width: auto;
-    border-radius: 10px;
-    padding: 20px 12px 30px;
+.userSection {
+  position: absolute;
+  top: 10px;
+  left: 16px;
+  display: flex;
+  align-items: flex-start;
 
-    .userImgSection {
-      background-color: transparent;
-      margin-right: 12px;
-    }
+  .userImgSection {
+    position: relative;
+    width: 48px;
+    height: 48px;
+    margin-right: 13px;
+    flex-shrink: 0;
 
     .userImg {
-      padding: 2px;
-      border: 1px solid #feecd2;
+      width: 48px;
+      height: 48px;
       border-radius: 50%;
-      vertical-align: middle;
       overflow: hidden;
+      border: 1px solid #F2F6F7;
+    }
+
+    .showMemeber {
+      position: absolute;
+      bottom: 1px;
+      right: -3px;
+      width: 18px;
+      height: 18px;
 
-      img {
-        width: 46px;
-        height: 46px;
-        border-radius: 50%;
-      }
     }
 
-    .userInfo {
-      display: flex;
-      align-items: center;
-      color: #fff;
-      padding-bottom: 5px;
-
-      .name {
-        font-size: 18px;
-        padding-right: 5px;
-        max-width: 100px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
+    &.userVip {
+      .showMemeber {
+        background: url('./new-images/icon-vip-disabled.png') no-repeat center;
+        background-size: contain;
       }
 
-      .phone {
-        font-size: 14px;
+      &.isVip {
+        .userImg {
+          border: 1px solid #F0AF88;
+        }
+
+        .showMemeber {
+          background: url('./new-images/icon-vip.png') no-repeat center;
+          background-size: contain;
+        }
       }
     }
 
-    .timeRemaining {
-      margin-top: 0;
-      font-size: 14px;
-      color: #c0c0c0;
+    &.userSVip {
+      .showMemeber {
+        background: url('./new-images/icon-svip-disabled.png') no-repeat center;
+        background-size: contain;
+      }
+
+      &.isVip {
+        .userImg {
+          border: 1px solid #F0AF88;
+        }
 
-      .remaining {
-        color: #f7b500;
-        padding: 0 5px;
+        .showMemeber {
+          background: url('./new-images/icon-svip.png') no-repeat center;
+          background-size: contain;
+        }
       }
     }
+  }
 
-    .member_time {
+  .userInfo {
+    padding-top: 5px;
+    max-width: 175px;
+
+    .userName {
       display: flex;
       align-items: center;
-      justify-content: space-between;
+      padding-bottom: 4px;
     }
-  }
 
-  .intro {
-    background: url('./images/tip_bg.png') no-repeat center;
-    background-size: contain;
-    height: 142px;
-    font-size: 14px;
-    color: #bb6e3a;
+    .name {
+      font-weight: 500;
+      font-size: 18px;
+      color: #000000;
+      max-width: 90px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .phone {
+      font-size: 13px;
+      color: #777777;
+    }
+
+    .member_time {
+      font-size: 12px;
+      color: #777777;
+      line-height: 17px;
 
-    p {
-      padding: 45px 25px 0;
-      text-align: justify;
-      line-height: 22px;
+      span {
+        color: #FF623A;
+      }
     }
   }
+}
 
-  .memberContainer {
-    // height: calc(100vh - 196px);
-    // overflow-y: auto;
-    background-color: #fff;
-    border-radius: 18px 18px 0px 0px;
-    position: relative;
-    margin-top: -15px;
-    padding: 0 14px 75px;
-    z-index: 99;
+.memberContainer {
+  position: relative;
+  padding-top: 100px;
+
+  .showBrid {
+    position: absolute;
+    right: 0;
+    top: -17px;
+    display: inline-block;
+    width: 129px;
+    height: 144px;
+    background: url('./new-images/icon-banner-brid.png') no-repeat center;
+    background-size: contain;
   }
+}
 
-  .memberItem {
-    padding-top: 20px;
 
-    .title {
-      font-size: 16px;
-      color: #333333;
-      font-weight: 500;
+.shareVip {
+  position: relative;
+  margin-top: 50px;
+  display: flex;
+  flex: 1;
+  align-items: center;
+  padding: 11px 6px 11px;
+  background: #ffffff;
+  border-radius: 10px;
 
-      span {
-        color: #f7b500;
-      }
-    }
+  .icon {
+    width: 36px;
+    height: 36px;
+    border-radius: 10px;
   }
 
-  .member_function {
-    display: flex;
-    justify-content: space-between;
-    flex-wrap: wrap;
+  .info {
+    margin-left: 6px;
+    flex: 1;
+    word-break: break-all;
 
-    .function_item__content {
-      height: 100%;
+    >h4 {
+      color: var(--music-list-item-title-color);
+      font-size: 14px;
+      font-weight: 600;
     }
 
-    .function_item {
-      width: 80px;
-      padding: 12px 0;
-      margin-top: 8px;
-      border-radius: 8px;
-      overflow: hidden;
-      background-color: #faefe3;
-      text-align: center;
+    >p {
+      color: var(--music-list-item-mate-color);
+      line-height: 17px;
     }
+  }
+}
 
-    .function_text {
-      font-size: 12px;
-      color: #814014;
-      line-height: 16px;
-    }
+.tagDiscount {
+  position: absolute;
+  top: -23px;
+  left: 15px;
+  padding: 0 10px;
+  height: 23px;
+  background: linear-gradient(180deg, #ffb635 0%, #ff4e18 100%);
+  border-radius: 8px 8px 0px 0px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #ffffff;
+  line-height: 24px;
+}
+
+
+.memberSection {
+  position: relative;
+  z-index: 1;
+  background: linear-gradient(179deg, #FFFFFF 0%, #FFFFFF 45%, #BEF5D8 70%, #CDF7CB 100%);
+  border-radius: 16px 16px 0px 0px;
+  padding-bottom: 10px;
+}
+
+.member_tabs {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+
+  .member_tab {
+    flex: 1;
+    text-align: center;
+    padding: 12px 0;
+    cursor: pointer;
+    opacity: 0.3;
   }
 
-  .system-list::-webkit-scrollbar {
-    display: none;
-    /* Chrome Safari */
+  .member_tab_active {
+    opacity: 1;
   }
 
-  .system-list {
-    width: 100%;
-    overflow-x: auto;
-    overflow-y: hidden;
-    display: flex;
-    position: relative;
-    user-select: none;
-    box-sizing: content-box;
-    padding-top: 16px;
-    padding-bottom: 10px;
-    margin-bottom: 10px;
+  .icon_member {
+    display: inline-block;
+    width: 24px;
+    height: 24px;
+    margin-right: 6px;
   }
 
-  .system-item {
+  .icon_text {
     position: relative;
+    margin-top: 3px;
+  }
+
+  .bottom_line {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: -3px;
+    z-index: -1;
+    height: 7px;
+    width: 100%;
+    display: inline-block;
+  }
+
+  .top_tab {
     display: flex;
-    flex-direction: column;
     align-items: center;
     justify-content: center;
-    flex: 1 0 auto;
-    width: 96px;
-    min-height: 120px;
-    box-sizing: border-box;
-    background: #ffffff;
-    border-radius: 12px;
-    border: 1px solid #e5e5e5;
-    margin-left: 10px;
+    padding-bottom: 5px;
+  }
 
-    .bat {
-      position: absolute;
-      top: -1px;
-      left: -1px;
-      padding: 2px 5px 1px;
-      background: linear-gradient(90deg, #FF7878 0%, #FF4343 100%);
-      border-radius: 11px 10px 10px 0px;
-      font-size: 12px;
-      font-weight: 600;
-      color: #FFFFFF;
-      line-height: 17px;
+  .vip_member_tip {
+    width: 71px;
+    height: 14px;
+    background: url('./new-images/vip-bottom-tip.png') no-repeat center;
+    background-size: contain;
+    display: inline-block;
+  }
+
+  .top_tab_vip {
+    .icon_member {
+      background: url('./new-images/icon-vip.png') no-repeat center;
+      background-size: contain;
     }
 
-    &:first-child {
-      margin-left: 0;
+    .icon_text {
+      background: url('./new-images/icon-vip-text.png') no-repeat center;
+      background-size: contain;
+      width: 59px;
+      height: 15px;
     }
 
-    .title {
-      font-size: 14px;
-      font-weight: 500;
-      color: #333333;
-      line-height: 20px;
+    .bottom_line {
+      background: url('./new-images/icon-vip-bottom-line.png') no-repeat center;
+      background-size: contain;
     }
+  }
 
-    .price {
-      color: #dc9362;
-      font-size: 25px;
-      line-height: 1.5;
+  .svip_member_tip {
+    width: 122px;
+    height: 14px;
+    background: url('./new-images/svip-bottom-tip.png') no-repeat center;
+    background-size: contain;
+    display: inline-block;
+  }
 
-      span {
-        font-size: 16px;
-      }
+  .top_tab_svip {
+    .icon_member {
+      background: url('./new-images/icon-svip.png') no-repeat center;
+      background-size: contain;
     }
 
-    .originalPrice {
-      color: #937059;
-      font-size: 13px;
+    .icon_text {
+      background: url('./new-images/icon-svip-text.png') no-repeat center;
+      background-size: contain;
+      width: 68px;
+      height: 15px;
     }
 
-    &.active {
-      background: linear-gradient(215deg,
-          #ffe7c4 0%,
-          rgba(250, 211, 156, 0.21) 100%);
-      border: 1px solid #b1652e;
-      position: relative;
-
-      .title {
-        color: #814014;
-      }
-
-      .price {
-        color: #b1652e;
-      }
-
-      .originalPrice {
-        color: #937059;
-      }
-
-      &::before {
-        content: '\e728';
-        font: 14px/1 'vant-icon';
-        color: #fff;
-        background-color: #b1652e;
-        width: 27px;
-        height: 18px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        position: absolute;
-        top: -1px;
-        right: -1px;
-        border-radius: 0 12px 0 12px;
-      }
-
-      .bat {
-        background: linear-gradient(270deg, rgba(255, 255, 255, 0.33) 0%, rgba(254, 234, 205, 0.33) 100%);
-        border-radius: 11px 10px 10px 0px;
-        border: 1px solid rgba(177, 101, 46, 0.33);
-        border-left: 0;
-        border-top: 0;
-        color: #B1652E;
-      }
+    .bottom_line {
+      background: url('./new-images/icon-svip-bottom-line.png') no-repeat center;
+      background-size: contain;
     }
   }
 
-  .btnGroup {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    z-index: 100;
-    background-color: #fff;
+
+  .member_tab_single {
     display: flex;
     align-items: center;
-    padding: 12px 16px;
     justify-content: space-between;
-    border-top: 1px solid #f0f0f0;
-
-    .btn {
-      padding: 0 22px;
-      color: #7a3104 !important;
-    }
-
-    .priceSection {
-      display: flex;
-      align-items: center;
-      font-size: 16px;
-      color: #1a1a1a;
-
-      .price {
-        font-size: 18px;
-        font-weight: bold;
-        color: #ff3535;
-
-        .priceUnit {
-          font-size: 14px;
-        }
-      }
-    }
+    padding: 11px 16px 0;
   }
 }
 
 .memberDiscount {
-  margin-top: 16px;
+  margin: 10px 16px 0;
   position: relative;
-  background: url('./images/discount_bg.png') no-repeat center;
+  background: url('./new-images/icon-discount-bg.png') no-repeat center;
   background-size: contain;
   display: flex;
   align-items: center;
-  height: 44px;
-  font-size: 16px;
-  color: #ff7100;
+  height: 40px;
+  font-size: 14px;
+  color: #6B4429;
   line-height: 18px;
 
   .discountAvatar {
     margin-left: 15px;
-    width: 36px;
-    height: 36px;
+    width: 34px;
+    height: 34px;
     border-radius: 50%;
     overflow: hidden;
     border: 1px solid #ffaf59;
@@ -348,90 +332,399 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+
+    span {
+      color: #FF491A;
+    }
   }
 
   .discountGift {
     position: absolute;
-    right: 26px;
-    top: 7px;
-    width: 29px;
-    height: 29px;
+    right: 11px;
+    top: 0;
+    width: 40px;
+    height: 40px;
   }
 }
 
-.discountItem {
-  height: 14px;
-  padding-bottom: 2px;
+.btnGroup {
+  padding: 18px 15px;
+  background-color: #fff;
+
+  .btn {
+    border-radius: 12px;
+    font-weight: bold;
+    font-size: 18px;
+    color: #662610 !important;
+    line-height: 24px;
+  }
 
-  img {
-    height: 100%;
+  .btnDisabled {
+    opacity: .4;
   }
 }
 
-.discountBuy {
-  height: 18px;
-  padding-bottom: 0;
-  margin-left: 8px;
+
+.system_list_section {
+  // margin: 0 16px;
+}
+
+.system-list::-webkit-scrollbar {
+  display: none;
+  /* Chrome Safari */
 }
 
-.shareBtn {
+.system-list {
+  width: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
   display: flex;
-  align-items: flex-start;
-  color: #666;
-  font-size: 14px;
-  line-height: 20px !important;
+  position: relative;
+  user-select: none;
+  box-sizing: content-box;
+  padding-top: 15px;
 
-  :global(.van-image) {
-    width: 18px;
-    height: 18px;
-    margin-right: 6px;
+
+  &.list_two {
+    .system-item {
+      width: 141px;
+
+      &.active {
+        width: 191px;
+      }
+    }
   }
 }
 
-.shareVip {
+.system-item {
   position: relative;
-  margin-top: 50px;
   display: flex;
-  flex: 1;
+  flex-direction: column;
   align-items: center;
-  padding: 11px 6px 11px;
+  justify-content: flex-start;
+  flex: 1 0 auto;
+  width: 96px;
+  min-height: 120px;
+  box-sizing: border-box;
   background: #ffffff;
-  border-radius: 10px;
+  border-radius: 8px;
+  border: 1px solid #E7E7E7;
+  margin-left: 10px;
 
-  .icon {
-    width: 36px;
-    height: 36px;
-    border-radius: 10px;
+  &:first-child {
+    margin-left: 16px;
   }
 
-  .info {
-    margin-left: 6px;
-    flex: 1;
-    word-break: break-all;
+  &:last-child {
+    margin-right: 16px;
+  }
 
-    >h4 {
-      color: var(--music-list-item-title-color);
-      font-size: 14px;
-      font-weight: 600;
+
+  .discountTag {
+    // background: linear-gradient(180deg, #FF491A 0%, #FF9F7E 100%);
+    // color: #FFFFFF;
+    display: inline-block;
+    width: 48px;
+    height: 16px;
+    background: url('./new-images/icon_discount-round.png') no-repeat center;
+    background-size: contain;
+    margin-top: 1px;
+  }
+
+  &.discountItem {
+    .price {
+      padding: 0;
     }
+  }
 
-    >p {
-      color: var(--music-list-item-mate-color);
-      line-height: 17px;
+  .iconPermanent {
+    position: absolute;
+    left: -1px;
+    top: -7px;
+    width: 77px;
+    height: 20px;
+    background: url('./new-images/icon-permanent.png') no-repeat center;
+    background-size: contain;
+
+  }
+
+  .s_title {
+    font-weight: 500;
+    font-size: 13px;
+    color: #333333;
+    line-height: 18px;
+    padding-top: 25px;
+    width: 100%;
+    text-align: center;
+  }
+
+  .price {
+    font-family: DINAlternate-Bold, DINAlternate;
+    font-weight: bold;
+    font-size: 28px;
+    color: #333333;
+    padding: 6px 0 9px;
+
+    span {
+      font-size: 16px;
+      vertical-align: middle;
+    }
+  }
+
+  .originalPrice {
+    color: #999999;
+    font-size: 12px;
+    line-height: 16px;
+
+    &.originalPriceHide {
+      opacity: 0;
+    }
+  }
+
+  .extraTip {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    box-sizing: border-box;
+    background: #FFF5E0;
+    line-height: 21px;
+    font-weight: 500;
+    font-size: 12px;
+    color: #84520F;
+    text-align: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    padding: 2px 8px 1px;
+    border-radius: 0px 0px 7px 7px;
+  }
+
+  &.active {
+    border: 2px solid #0ED8B0;
+    background: linear-gradient(51deg, #E3F9F2 0%, #BCF8E5 100%);
+    width: 130px;
+
+    .iconPermanent {
+      left: -2px;
+    }
+
+    .extraTip {
+      background: #0ED8B0;
+      color: #FFFFFF;
+      font-weight: 500;
     }
   }
 }
 
-.tagDiscount {
-  position: absolute;
-  top: -23px;
-  left: 15px;
-  padding: 0 10px;
-  height: 23px;
-  background: linear-gradient(180deg, #ffb635 0%, #ff4e18 100%);
-  border-radius: 8px 8px 0px 0px;
-  font-size: 14px;
-  font-weight: 600;
-  color: #ffffff;
-  line-height: 24px;
+.list_one {
+  padding-top: 10px;
+
+  .system-item {
+    flex-direction: row;
+    justify-content: space-between;
+    padding: 0 20px;
+    width: calc(100% - 32px);
+    margin: 0 16px;
+    // margin: 0;
+    min-height: 81px;
+    border: 2px solid #0ED8B0;
+    background: linear-gradient(51deg, #E3F9F2 0%, #BCF8E5 100%);
+
+    .iconPermanent {
+      left: -2px;
+    }
+
+    .discountTag {
+      position: absolute;
+      left: -2px;
+      top: -2px;
+      background: url('./new-images/icon_discount.png') no-repeat center;
+      background-size: contain;
+      width: 48px;
+      height: 16px;
+      padding: 0;
+      margin: 0;
+      border-radius: 0;
+    }
+
+
+    .itemBg {
+      position: absolute;
+      right: 71px;
+      top: 0;
+      bottom: 0;
+      width: 100px;
+      background: url('./new-images/icon-svip-big-icon.png') no-repeat center;
+      background-size: contain;
+    }
+  }
+
+  .priceS {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+
+    .price {
+      color: #03A385;
+      padding-bottom: 0;
+      padding-top: 0;
+    }
+
+    .s_title {
+      padding-top: 4px;
+      padding-left: 10px;
+      font-weight: 500;
+      font-size: 15px;
+      color: #333333;
+      line-height: 21px;
+    }
+  }
+
+  .oneMaxNum {
+    margin-left: 4px;
+    display: inline-block;
+    background: linear-gradient(90deg, #BEFCE8 0%, #BFFAE8 100%);
+    border-radius: 2px;
+    font-size: 12px;
+    color: #03A385;
+    padding: 1px 2px;
+  }
+
+  .oneMaxNumPrice {
+    text-decoration: line-through;
+  }
+
+  .oneBtn {
+    position: relative;
+    z-index: 1;
+    width: 71px;
+    height: 30px;
+    background: url('./new-images/btn-svip.png') no-repeat center;
+    background-size: contain;
+    cursor: pointer;
+
+    &.onBtnRenew {
+      background: url('./new-images/btn-svip-review.png') no-repeat center;
+      background-size: contain;
+    }
+
+    &.onBtnDisbled {
+      opacity: .4;
+    }
+  }
+}
+
+.system_list_vip {
+  .system-item {
+    &.active {
+      border: 2px solid #FFDB66;
+      background: linear-gradient(90deg, #FFF7C4 0%, #FEF098 100%);
+      width: 130px;
+
+      .extraTip {
+        background-color: #FFDB66;
+      }
+    }
+  }
+
+  &.list_two {
+    .system-item {
+      width: 141px;
+
+      &.active {
+        width: 191px;
+      }
+    }
+  }
+
+  &.list_one {
+    .system-item {
+      background: linear-gradient(90deg, #FFF7C4 0%, #FEF098 100%);
+      border: 2px solid #FFDB66;
+
+
+      .itemBg {
+        background: url('./new-images/icon-vip-big-icon.png') no-repeat center;
+        background-size: contain;
+      }
+    }
+
+    .priceS {
+      .price {
+        color: #FF7452;
+      }
+    }
+
+    .oneMaxNum {
+      background: linear-gradient(90deg, #FEDA66 0%, #FEDA66 100%);
+      color: #FF7452;
+      text-decoration: line-through;
+    }
+
+    .oneBtn {
+      background: url('./new-images/btn-vip.png') no-repeat center;
+      background-size: contain;
+      cursor: pointer;
+
+      &.onBtnRenew {
+        background: url('./new-images/btn-vip-review.png') no-repeat center;
+        background-size: contain;
+      }
+    }
+  }
+}
+
+// 弹窗样式
+.dialogContainer {
+  width: 287px;
+  box-sizing: border-box;
+  background: #FFFFFF;
+  border-radius: 12px;
+  padding: 16px 24px 22px;
+  text-align: center;
+
+  .dialogTitle {
+    font-weight: 500;
+    font-size: 18px;
+    color: #333333;
+    line-height: 25px;
+  }
+
+  .dialogContent {
+    padding: 16px 0 21px;
+    font-size: 15px;
+    color: #777777;
+    line-height: 26px;
+  }
+
+  .dialogBtnGroup {
+    padding: 0 16px;
+  }
+
+  .dialogBtn {
+    font-weight: 500;
+    font-size: 16px;
+    color: #FFFFFF;
+    line-height: 22px;
+  }
+}
+
+.discountTips {
+  background: linear-gradient(203deg, rgba(254, 237, 197, 0.5) 0%, rgba(255, 198, 179, 0.5) 100%);
+  border-radius: 6px;
+  padding: 6px 3px 6px 8px;
+  // font-weight: 500;
+  font-size: 12px;
+  line-height: 17px;
+  color: #6B4429;
+  margin-top: 12px;
+  margin-left: 16px;
+  margin-right: 16px;
+
+  span {
+    color: #FF491A;
+  }
 }