Merge branch 'master' of http://git.dayaedu.com/lex/colexiu-project

dist/assets/arrow-legacy.c72c6a83.js

@@ -1 +0,0 @@
-System.register([],(function(A){"use strict";return{execute:function(){A("a","data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAAPlJREFUWEft2LENAiEUBuB3tlaUOIyJK1gwgreAA9BZOcHlmttBK9dxBhJzuRgSCxtN4P0/kgg1kC8/JLxHJ5WPrnKfNKD2hFqCP0lwGIbDsizWGHNyzj20iG/rk494HMfNPM/316YXY8yeiUwGeu9X1tqbiOxKIJOBETVN0zqEcBWRLRuZBSyJzAaWQqqAJZBqIBsJATKRMCALCQUykHAgGkkBIpE04Afkue/7Y0px8b9A1HtNSRCFi1cBDkTi4EA0Dgpk4GBAFg4CZOLUQDZOBSyBywaWwmUBq287q2/cY+xVf32klEqIufC3GIF636MBtYm2BLUJPgHTXfIpPDsbwQAAAABJRU5ErkJggg==")}}}));

dist/assets/arrow.15dbd454.js

@@ -1 +0,0 @@
-var A="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAAPlJREFUWEft2LENAiEUBuB3tlaUOIyJK1gwgreAA9BZOcHlmttBK9dxBhJzuRgSCxtN4P0/kgg1kC8/JLxHJ5WPrnKfNKD2hFqCP0lwGIbDsizWGHNyzj20iG/rk494HMfNPM/316YXY8yeiUwGeu9X1tqbiOxKIJOBETVN0zqEcBWRLRuZBSyJzAaWQqqAJZBqIBsJATKRMCALCQUykHAgGkkBIpE04Afkue/7Y0px8b9A1HtNSRCFi1cBDkTi4EA0Dgpk4GBAFg4CZOLUQDZOBSyBywaWwmUBq287q2/cY+xVf32klEqIufC3GIF636MBtYm2BLUJPgHTXfIpPDsbwQAAAABJRU5ErkJggg==";export{A as a};

dist/assets/icon_teacher-legacy.51535f30.js

@@ -1 +0,0 @@
-System.register([],(function(e){"use strict";return{execute:function(){e("i","./assets/icon_teacher.2d942bf5.png")}}}));

dist/assets/icon_teacher.c6352c6e.js

@@ -1 +0,0 @@
-var e="./assets/icon_teacher.2d942bf5.png";export{e as i};

dist/assets/index-legacy.77319788.js

@@ -1 +0,0 @@
-System.register(["./icon_teacher-legacy.51535f30.js","./index-legacy.3815dd14.js"],(function(e){"use strict";var t,s,r,i,n;return{setters:[function(e){t=e.i},function(e){s=e.d,r=e.c,i=e.bt,n=e.a}],execute:function(){e("I",s({name:"item",props:{item:{type:Object,default:function(){return{}}}},render:function(){var e=this.item;return r("div",{class:"border border-[#f5f5f5] rounded-sm w-[262px] h-[302px] m-auto overflow-hidden relative hover:shadow-md transition-all"},[e.subjectName&&r("div",{class:"absolute top-2 right-3 bg-black/40 text-white text-sm rounded-sm px-3 h-7 flex items-center justify-center z-10"},[e.subjectName]),r(i,{class:"w-full h-[175px] align-middle",fit:"cover",src:e.backgroundPic},null),r("div",{class:"mx-2.5 py-3.5 border-b border-b-[#F2F2F2]"},[r("div",{class:"text-lg leading-none font-medium whitespace-nowrap overflow-hidden text-ellipsis"},[e.courseGroupName]),r("div",{class:"text-sm text-[#999] pt-2.5"},[e.studentCount,n("人已购买")])]),r("div",{class:"mx-2.5 py-4 flex items-center justify-between"},[r("div",{class:"flex items-center"},[r(i,{class:"w-[22px] h-[22px] align-middle rounded-full overflow-hidden mr-2","object-fit":"cover",src:e.avatar||t},null),r("span",null,[e.teacherName])]),r("div",{class:"font-medium text-[15px] leading-5 text-[#2DC7AA]"},[n("￥"),e.coursePrice,n("/"),e.courseNum,n("课时")])])])}}))}}}));

dist/assets/index.22da0c6f.js

@@ -1 +0,0 @@
-import{a as b}from"./arrow.15dbd454.js";import{s as l,a as t}from"./index.70c31038.js";import{a as u,h as o}from"./scrollbar.min.99dc8f1a.js";import{v,b as r}from"./index.6a2548ee.js";import{M as c}from"./index.f1a74811.js";import{d as w,s as m,r as h,o as L,c as s,a as i,b as n}from"./index.aaf7861d.js";import"./index2.32660482.js";import"./index2.a5f61fbf.js";var x=w({name:"musicLibrary",components:{albumItem:u,videoDetailItem:v,musicLIstItem:c,hotSearch:o,silder:m,searchInput:l,banner:r},setup(){const e=h({albumList:[],musicList:[]}),d=async()=>{try{const a=await n.post("/api-website/open/music/album/list",{data:{albumStatus:1,page:1,rows:10}});e.albumList=a.data.rows}catch(a){console.log(a)}},p=async()=>{try{const a=await n.post("/api-website/open/music/sheet/list",{data:{albumStatus:"PASS",page:1,rows:5,state:1}});e.musicList=a.data.rows}catch(a){console.log(a)}};return L(()=>{d(),p()}),()=>s("div",null,[s(r,null,null),s("div",{class:"bg-white"},[s("div",{class:t.w1200},[s("div",{class:t.section},[s(l,null,null),s(o,{type:"search"},null),s("h5",{class:t.hotAlbum},[i("\u70ED\u95E8\u4E13\u8F91")]),s("div",{class:t.albumList},[e.albumList.map(a=>s(u,{detail:a},null))])])])]),s("div",null,[s("div",{class:t.w1200},[s("div",{class:t.section},[s("div",{class:t.videoNav},[s("h5",null,[i("\u70ED\u95E8\u4E50\u8C31")]),s("div",{class:t.wrapRight},[s("span",null,[i("\u66F4\u591A")]),s("img",{class:t.arrow,src:b,alt:""},null)])]),s("div",{class:t.musicList},[e.musicList.map(a=>s(c,{item:a},null))])])])]),s(m,null,null)])}});export{x as default};

dist/assets/index.2e23371e.css

@@ -1 +0,0 @@
-._itemWrap_jyqhb_1{width:386px;margin-bottom:20px;margin-right:20px;border-radius:4px;background-color:#fff}._itemWrap_jyqhb_1:nth-child(3n){margin-right:0}._itemWrap_jyqhb_1 ._detaile_jyqhb_11{width:387px;height:216px}._itemWrap_jyqhb_1 ._itemBottom_jyqhb_15{display:flex;flex-direction:row;align-items:center;padding:12px;justify-content:space-between}._itemWrap_jyqhb_1 ._itemBottom_jyqhb_15 ._itemBottomL_jyqhb_22{display:flex;flex-direction:row;align-items:center}._itemWrap_jyqhb_1 ._itemBottom_jyqhb_15 ._itemBottomL_jyqhb_22 ._itemHead_jyqhb_27{width:28px;height:28px;vertical-align:bottom;margin-right:10px}._itemWrap_jyqhb_1 ._itemBottom_jyqhb_15 ._itemBottomL_jyqhb_22 ._itemTitle_jyqhb_33{color:#333;font-weight:500;font-size:16px;line-height:22px}._itemWrap_jyqhb_1 ._itemBottom_jyqhb_15 ._itemBottomL_jyqhb_22 ._line_jyqhb_39{width:1px;height:10px;border:1px solid #d3d3d3;margin:0 10px}._itemWrap_jyqhb_1 ._itemBottom_jyqhb_15 ._itemBottomL_jyqhb_22 ._course_jyqhb_45{color:#666;font-size:16px;line-height:22px}._itemWrap_jyqhb_1 ._itemBottom_jyqhb_15 ._buy_jyqhb_50{color:#ff802c;font-size:16px;line-height:22px}._mySwiper_6zppy_1{min-height:300px;cursor:pointer}._mySwiper_6zppy_1 /deep/ ._swiper-slide_6zppy_5{min-height:300px}.mySwiper:hover .myprev,.mySwiper:hover .mynext{visibility:visible!important}.myprev,.mynext{width:40px;height:72px;background:rgba(0,0,0,.26);border-radius:20px;position:absolute;top:50%;margin-top:calc(0px - (var(--swiper-navigation-size) / 2));z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color, var(--swiper-theme-color));visibility:hidden}.myprev img,.mynext img{width:20px;height:20px}.myprev{left:130px}.mynext{right:130px}.mynext img{transform:rotate(180deg)}

dist/assets/index.37326187.js

@@ -1 +0,0 @@
-import{i as a}from"./icon_teacher.c6352c6e.js";import{d as i,c as e,bt as r,a as s}from"./index.aaf7861d.js";var l=i({name:"item",props:{item:{type:Object,default:()=>({})}},render(){const t=this.item;return e("div",{class:"border border-[#f5f5f5] rounded-sm w-[262px] h-[302px] m-auto overflow-hidden relative hover:shadow-md transition-all"},[t.subjectName&&e("div",{class:"absolute top-2 right-3 bg-black/40 text-white text-sm rounded-sm px-3 h-7 flex items-center justify-center z-10"},[t.subjectName]),e(r,{class:"w-full h-[175px] align-middle",fit:"cover",src:t.backgroundPic},null),e("div",{class:"mx-2.5 py-3.5 border-b border-b-[#F2F2F2]"},[e("div",{class:"text-lg leading-none font-medium whitespace-nowrap overflow-hidden text-ellipsis"},[t.courseGroupName]),e("div",{class:"text-sm text-[#999] pt-2.5"},[t.studentCount,s("\u4EBA\u5DF2\u8D2D\u4E70")])]),e("div",{class:"mx-2.5 py-4 flex items-center justify-between"},[e("div",{class:"flex items-center"},[e(r,{class:"w-[22px] h-[22px] align-middle rounded-full overflow-hidden mr-2","object-fit":"cover",src:t.avatar||a},null),e("span",null,[t.teacherName])]),e("div",{class:"font-medium text-[15px] leading-5 text-[#2DC7AA]"},[s("\uFFE5"),t.coursePrice,s("/"),t.courseNum,s("\u8BFE\u65F6")])])])}});export{l as I};

dist/assets/index.67ea5e53.css

@@ -1 +0,0 @@
-._pagination-container_8qru8_1{background:#fff;padding:24px 16px 32px;width:100%;display:flex;flex-direction:row;justify-content:center}._pagination-container_8qru8_1._hidden_8qru8_9{display:none}

dist/assets/index.70c31038.js

@@ -1 +0,0 @@
-import{d as o,r as i,o as r,c as e,E as _,l as p,F as u,b as d}from"./index.aaf7861d.js";import{E as m,a as l}from"./index2.32660482.js";const b="_mySwiper_1x8nc_1",w="_title_1x8nc_7",v="_w1200_1x8nc_11",x="_section_1x8nc_15",h="_hotAlbum_1x8nc_18",S="_titleWrap_1x8nc_25",y="_dotImg_1x8nc_33",g="_albumList_1x8nc_44",L="_videoList_1x8nc_52",f="_videoNav_1x8nc_59",j="_wrapRight_1x8nc_72",W="_arrow_1x8nc_80",E="_myTab_1x8nc_85";var C={mySwiper:b,"swiper-slide":"_swiper-slide_1x8nc_4",title:w,w1200:v,section:x,hotAlbum:h,titleWrap:S,dotImg:y,albumList:g,videoList:L,videoNav:f,wrapRight:j,arrow:W,myTab:E};const I="_wrap_1q257_1",q="_inputSelect_1q257_4",A="_selectWrap_1q257_113",N="_line_1q257_118";var a={wrap:I,inputSelect:q,selectWrap:A,line:N},F=o({name:"searchInput",props:{title:{type:String,default:""}},setup(c,V){const s=i({title:c.title,search:"",subject:"",subjectList:[]}),n=async()=>{try{const t=await d.get("/api-website/open/subject/subjectSelect",{});s.subjectList=t.data}catch(t){console.log(t)}};return r(()=>{n()}),()=>e(u,null,[e("div",{class:a.wrap},[e(_,{modelValue:s.search,"onUpdate:modelValue":t=>s.search=t,placeholder:"\u641C\u4E00\u641C\u4F60\u60F3\u7EC3\u4E60\u7684\u66F2\u76EE",class:a.inputSelect},{prepend:()=>e("div",{class:a.selectWrap},[e(m,{modelValue:s.subject,"onUpdate:modelValue":t=>s.subject=t,placeholder:"\u8BF7\u9009\u62E9\u58F0\u90E8",style:"width: 115px","popper-class":"subSelect"},{default:()=>[e(l,{label:"Restaurant",value:"1"},null),e(l,{label:"Order No.",value:"2"},null),e(l,{label:"Tel",value:"3"},null)],suffix:()=>e("div",{class:a.san},null)}),e("div",{class:a.line},null)]),append:()=>e(p,{style:{color:"#2DC7AA",font:"20px"},icon:"Search"},null)})])])}});export{C as a,F as s};

dist/assets/index.f1a74811.js

@@ -1 +0,0 @@
-import{a as r}from"./arrow.15dbd454.js";import{d as i,c as t,a as n}from"./index.aaf7861d.js";var _="./assets/icon.c76ae863.png";const l="_itemWrap_1tjqy_1",m="_left_1tjqy_23",u="_imgWrap_1tjqy_28",p="_textWrap_1tjqy_33",g="_authorInfo_1tjqy_45",h="_icon_1tjqy_50",d="_authorName_1tjqy_56",y="_tagList_1tjqy_61",v="_tag_1tjqy_61",f="_right_1tjqy_74",j="_touchButton_1tjqy_80",q="_vip_1tjqy_90",W="_free_1tjqy_94",I="_charge_1tjqy_98",N="_arrow_1tjqy_102";var a={itemWrap:l,left:m,imgWrap:u,textWrap:p,authorInfo:g,icon:h,authorName:d,tagList:y,tag:v,right:f,touchButton:j,vip:q,free:W,charge:I,arrow:N},L="./assets/music.24d07fa6.png";const c={CHARGE:"\u70B9\u64AD",FREE:"\u514D\u8D39",VIP:"VIP"};var x=i({name:"musicLIstItem",props:{item:{type:Object,default:()=>({})},onClick:{type:Function,default:e=>{}}},setup(e){const s=e.item;return console.log(s),()=>{var o;return t("div",{onClick:()=>{e.onClick(s)}},[t("div",{class:a.itemWrap},[t("div",{class:a.left},[t("div",{class:a.imgWrap},[t("img",{src:L,alt:""},null)]),t("div",{class:a.textWrap},[t("p",null,[s.musicSheetName,t("span",null,[n("\u4F5C\u66F2: "),s.composer])]),t("div",{class:a.authorInfo},[t("img",{class:a.icon,src:s.addUserAvatar||_,alt:""},null),t("span",{class:a.authorName},[s.addName]),t("div",{class:a.tagList},[t("div",{class:a.tag},[s.subjectNames])])])])]),t("div",{class:a.right},[t("div",{class:[a.touchButton,a[(o=s.chargeType)==null?void 0:o.toLocaleLowerCase()]]},[c[s.chargeType]?c[s.chargeType]:"\u70B9\u64AD"]),t("img",{class:a.arrow,src:r,alt:""},null)])])])}}});export{x as M,_ as i};

dist/assets/searchdetail.e310bf63.js

@@ -1 +0,0 @@
-import{s as o,a as e}from"./index.70c31038.js";import{h as c,a as n}from"./scrollbar.min.99dc8f1a.js";import{d as b,s as d,r as p,o as w,c as s,b as u,au as h,av as m}from"./index.aaf7861d.js";import"./index2.32660482.js";import"./index2.a5f61fbf.js";import"./arrow.15dbd454.js";var r=b({name:"searchdetail",components:{hotSearch:c,silder:d,searchInput:o,albumItem:n},setup(){const l=p({albumList:[],musicList:[]}),i=async()=>{try{const a=await u.post("/api-website/open/music/album/list",{data:{albumStatus:1,page:1,rows:10}});l.albumList=a.data.rows}catch(a){console.log(a)}};return w(()=>{i()}),()=>s("div",null,[s("div",{class:"bg-white"},[s("div",{class:e.w1200},[s("div",{class:e.section},[s("div",{class:e.albumList},[l.albumList.map(a=>s(n,{detail:a},null))])])])])])}}),A=b({name:"searchdetail",components:{hotSearch:c,silder:d,searchInput:o,searchAlbum:r},setup(){const l=p({albumList:[],musicList:[]}),i=async()=>{try{const t=await u.post("/api-website/open/music/album/list",{data:{albumStatus:1,page:1,rows:10}});l.albumList=t.data.rows}catch(t){console.log(t)}},a=async()=>{try{const t=await u.post("/api-website/open/music/sheet/list",{data:{albumStatus:"PASS",page:1,rows:5,state:1}});l.musicList=t.data.rows}catch(t){console.log(t)}};return w(()=>{i(),a()}),()=>s("div",null,[s("div",{class:"bg-white"},[s("div",{class:e.w1200},[s("div",{class:e.section},[s(o,null,null),s(c,{type:"search"},null),s(h,{class:e.myTab},{default:()=>[s(m,{label:"\u4E13\u8F91",name:"album"},{default:()=>[s(r,null,null)]}),s(m,{label:"\u4E50\u8C31",name:"music"},null)]})])])])])}});export{A as default};

dist/index.html

@@ -34,8 +34,8 @@
     <!-- windows phone 点击无高光 -->
     <meta name="msapplication-tap-highlight" content="no" />
     <title>酷乐秀</title>
-    <script type="module" crossorigin src="./assets/index.aaf7861d.js"></script>
-    <link rel="stylesheet" href="./assets/index.93f527f1.css">
+    <script type="module" crossorigin src="./assets/index.f06d32fc.js"></script>
+    <link rel="stylesheet" href="./assets/index.92f844fa.css">
     <script type="module">try{import("_").catch(()=>1);}catch(e){}window.__vite_is_dynamic_import_support=true;</script>
     <script type="module">!function(){if(window.__vite_is_dynamic_import_support)return;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>
   </head>
@@ -44,7 +44,7 @@
     <div id="app"></div>
     
     <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.9d1caf39.js"></script>
-    <script nomodule id="vite-legacy-entry" data-src="./assets/index-legacy.3815dd14.js">System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'))</script>
+    <script nomodule id="vite-legacy-polyfill" src="./assets/polyfills-legacy.bc45a728.js"></script>
+    <script nomodule id="vite-legacy-entry" data-src="./assets/index-legacy.bb126a0d.js">System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'))</script>
   </body>
 </html>

src/components/albumItem/index.tsx

@@ -1,4 +1,4 @@
-import { defineComponent,toRefs, reactive, onMounted, ref  } from 'vue'
+import { defineComponent, toRefs, reactive, onMounted, ref } from 'vue'
 
 import classes from './index.module.less'
 import hold from './images/hold.png'
@@ -33,12 +33,16 @@ export default defineComponent({
   },
   setup(props) {
     const state = reactive({
-      detail:props.detail
+      detail: props.detail
     })
     return () => (
       <>
         <div class={classes.itemWrap}>
-          <img src={state.detail.albumCoverUrl?state.detail.albumCoverUrl:hold} alt="" class={classes.hold} />
+          <img
+            src={state.detail.albumCoverUrl ? state.detail.albumCoverUrl : hold}
+            alt=""
+            class={classes.hold}
+          />
           <h2>{state.detail.albumName}</h2>
           <div class={classes.itemBottom}>
             <div class={classes.itemBottomL}>

src/components/col-calendar/index.tsx

@@ -0,0 +1,9 @@
+import { defineComponent } from 'vue'
+import styles from './index.module.less'
+
+export default defineComponent({
+  name: 'col-calendar',
+  render() {
+    return <></>
+  }
+})

src/components/col-cropper copy/cropper.tsx

@@ -0,0 +1,230 @@
+import { defineComponent } from 'vue'
+import styles from './index.module.less'
+import { VueCropper } from 'vue-cropper'
+import umiRequest from 'umi-request'
+import 'vue-cropper/dist/index.css'
+import {
+  ElButton,
+  ElCol,
+  ElDialog,
+  ElIcon,
+  ElImage,
+  ElMessage,
+  ElRow
+} from 'element-plus'
+import { CirclePlus, Remove } from '@element-plus/icons-vue'
+import iconRate from '../col-upload/images/icon_rate.png'
+import request from '@/helpers/request'
+
+export default defineComponent({
+  name: 'cropper',
+  props: {
+    cropperNo: {
+      type: Function,
+      default: (data: any) => {}
+    },
+    cropperOk: {
+      type: Function,
+      default: (data: any) => {}
+    },
+    bucket: {
+      type: String,
+      default: 'daya'
+    }
+  },
+  data() {
+    return {
+      ossUploadUrl: 'https://ks3-cn-beijing.ksyuncs.com/' + this.bucket,
+      dataObj: {
+        policy: '',
+        signature: '',
+        key: '',
+        KSSAccessKeyId: '',
+        acl: 'public-read',
+        name: ''
+      },
+      visible: false,
+      img: null,
+      options: {
+        img: '', //裁剪图片的地址
+        autoCrop: true, //是否默认生成截图框
+        autoCropWidth: 180, //默认生成截图框宽度
+        autoCropHeight: 180, //默认生成截图框高度
+        fixedBox: true, //是否固定截图框大小 不允许改变
+        full: false,
+        enlarge: 1, // 是否按照截图框比例输出 默认为1
+        previewsCircle: true, //预览图是否是原圆形
+        centerBox: true,
+        outputType: 'png',
+        title: '修改头像',
+        name: null // 文件名称
+      },
+      previews: {} as any,
+      url: {
+        upload: '/sys/common/saveToImgByStr'
+      },
+      submitLoading: false
+    }
+  },
+  methods: {
+    edit(record: any) {
+      const { options } = this
+      this.visible = true
+      this.options = Object.assign({}, options, record)
+      console.log(this.options)
+    },
+    /**
+     * 取消截图
+     */
+    cancelHandel() {
+      this.visible = false
+      this.cropperNo()
+    },
+    /**
+     * 确认截图
+     */
+    okHandel() {
+      ;(this as any).$refs.cropperRef.getCropBlob(async data => {
+        // this.submitLoading = true
+        // context.emit('cropper-ok', data)
+        console.log(data, 'data')
+        this.visible = false
+        this.cropperOk(data, this.options)
+      })
+    },
+    //转成blob
+    blobToFile(Blob: any, fileName: any) {
+      //兼容IE
+      Blob.lastModifiedDate = new Date()
+      Blob.name = fileName
+      return Blob
+    },
+    base64ToFile(urlData: any, fileName: any) {
+      let arr = urlData.split(',')
+      let mime = arr[0].match(/:(.*?);/)[1]
+      let bytes = atob(arr[1]) // 解码base64
+      let n = bytes.length
+      let ia = new Uint8Array(n)
+      while (n--) {
+        ia[n] = bytes.charCodeAt(n)
+      }
+      return new File([ia], fileName, { type: mime })
+    },
+    //移动框的事件
+    realTime(data: any) {
+      this.previews = data
+    },
+    //图片缩放
+    changeScale(num: number) {
+      num = num || 1
+      ;(this as any).$refs.cropperRef.changeScale(num)
+    },
+    //向左旋转
+    rotateLeft() {
+      ;(this as any).$refs.cropperRef.rotateLeft()
+    },
+    //向右旋转
+    rotateRight() {
+      ;(this as any).$refs.cropperRef.rotateRight()
+    }
+  },
+  render() {
+    return (
+      <ElDialog
+        modelValue={this.visible}
+        onUpdate:modelValue={val => (this.visible = val)}
+        appendToBody
+        title={this.options.title}
+        closeOnClickModal={false}
+        width={'800px'}
+        v-slots={{
+          footer: () => (
+            <span class="dialog-footer !text-center block">
+              <ElButton
+                onClick={this.cancelHandel}
+                disabled={this.submitLoading}
+              >
+                取消
+              </ElButton>
+              <ElButton
+                type="primary"
+                onClick={this.okHandel}
+                loading={this.submitLoading}
+              >
+                保 存
+              </ElButton>
+            </span>
+          )
+        }}
+      >
+        <ElRow>
+          <ElCol xs={24} md={12} style={{ width: '350px' }}>
+            <VueCropper
+              ref="cropperRef"
+              img={this.options.img}
+              info={true}
+              autoCrop={this.options.autoCrop}
+              autoCropWidth={this.options.autoCropWidth}
+              full={this.options.full}
+              outputType={this.options.outputType}
+              autoCropHeight={this.options.autoCropHeight}
+              fixedBox={this.options.fixedBox}
+              enlarge={this.options.enlarge}
+              onRealTime={this.realTime}
+              style={{ height: '350px' }}
+            />
+            <div class="flex pt-2">
+              <div
+                onClick={() => {
+                  this.changeScale(1)
+                }}
+                class="mr-2 cursor-pointer"
+                title="放大"
+              >
+                <ElIcon size={30} color="#333">
+                  <CirclePlus />
+                </ElIcon>
+              </div>
+              <div
+                onClick={() => {
+                  this.changeScale(-1)
+                }}
+                class="mr-2 cursor-pointer"
+                title="缩小"
+              >
+                <ElIcon size={30} color="#333">
+                  <Remove />
+                </ElIcon>
+              </div>
+              <div
+                onClick={this.rotateRight}
+                title="向右旋转"
+                class="cursor-pointer"
+              >
+                <img src={iconRate} class="w-[30px] h-[30px]" />
+              </div>
+            </div>
+          </ElCol>
+          <ElCol xs={24} md={12} style={{ height: '350px' }}>
+            <div class={styles.previewImg}>
+              <span>预览图片</span>
+              <div
+                class={
+                  this.options.previewsCircle
+                    ? styles['avatar-upload-preview']
+                    : styles['avatar-upload-preview_range']
+                }
+                style={{
+                  width: this.options.autoCropWidth + 'px',
+                  height: this.options.autoCropHeight + 'px'
+                }}
+              >
+                <ElImage src={this.previews.url} style={this.previews.img} />
+              </div>
+            </div>
+          </ElCol>
+        </ElRow>
+      </ElDialog>
+    )
+  }
+})

src/components/col-cropper copy/index.module.less

@@ -0,0 +1,85 @@
+.uploadSection {
+  width: 156px;
+  height: 106px;
+  background: #f8faf9;
+  border-radius: 4px;
+  border: 1px solid rgba(45, 199, 170, 0.26);
+  font-size: 14px;
+  color: #2dc7aa;
+  line-height: 20px;
+}
+
+.uploadClass {
+  height: 106px;
+  width: 100%;
+
+  :global {
+    .el-loading-spinner {
+      margin-top: -43px;
+      height: 106px;
+    }
+  }
+}
+
+.avatar-upload-preview_range,
+.avatar-upload-preview {
+  width: 180px;
+  height: 180px;
+  box-shadow: 0 0 4px #ccc;
+  overflow: hidden;
+  img {
+    background-color: #f7f7f7;
+    height: 100%;
+  }
+}
+.avatar-upload-preview_range {
+  border-radius: 0;
+}
+.previewImg {
+  padding-left: 50px;
+  padding-top: 10px;
+  & > span {
+    display: block;
+    color: #212121;
+    font-size: 16px;
+    padding-bottom: 15px;
+  }
+}
+.operation {
+  font-size: 24px;
+  display: flex;
+  align-items: center;
+  margin-top: 20px;
+  & > i {
+    margin-left: 12px;
+    cursor: pointer;
+  }
+  .icon-rate {
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    background: url('./images/icon_rate.png') no-repeat center;
+    background-size: contain;
+  }
+}
+.vue-cropper {
+  border-radius: 5px;
+  overflow: hidden;
+}
+:deep(.el-dialog) {
+  margin-bottom: 10vh;
+  .el-dialog__header {
+    // background: #363d55;
+    background: #fff;
+    padding: 15px 20px 15px;
+    .el-dialog__title {
+      color: #212121;
+    }
+    .el-dialog__headerbtn .el-dialog__close {
+      color: #212121;
+    }
+  }
+  .el-dialog__body {
+    padding-top: 0;
+  }
+}

src/components/col-cropper copy/index.tsx

@@ -0,0 +1,272 @@
+import { ElImage, ElMessage, ElUpload } from 'element-plus'
+import { defineComponent } from 'vue'
+import styles from './index.module.less'
+import iconUpload from '../col-upload/images/icon_upload.png'
+import Cropper from './cropper'
+import request from '@/helpers/request'
+import umiRequest from 'umi-request'
+
+export default defineComponent({
+  name: 'col-cropper',
+  props: {
+    modelValue: {
+      type: String,
+      default: ''
+    },
+    options: {
+      // 裁切需要参数
+      type: Object,
+      default: {
+        autoCrop: true, //是否默认生成截图框
+        enlarge: 1, //  图片放大倍数
+        autoCropWidth: 200, //默认生成截图框宽度
+        autoCropHeight: 200, //默认生成截图框高度
+        fixedBox: true, //是否固定截图框大小 不允许改变
+        previewsCircle: true, //预览图是否是原圆形
+        title: '上传图片'
+      }
+    },
+    // 显示图片原始图片
+    showSize: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    bucket: {
+      type: String,
+      default: 'daya'
+    },
+    size: {
+      type: Number,
+      default: 5 // 默认5M
+    },
+    accept: {
+      type: String,
+      default: 'images/*'
+    },
+    tips: {
+      type: String,
+      default: '请上传图片'
+    },
+    extraTips: {
+      type: String,
+      default: '图片最大不能超过5MB'
+    },
+    cropUploadSuccess: {
+      type: Function,
+      default: (data: string) => {}
+    }
+  },
+  data() {
+    return {
+      isStopRun: false,
+      loading: false,
+      ossUploadUrl: 'https://ks3-cn-beijing.ksyuncs.com/' + this.bucket,
+      dataObj: {
+        policy: '',
+        signature: '',
+        key: '',
+        KSSAccessKeyId: '',
+        acl: 'public-read',
+        name: ''
+      },
+      data: null as any
+    }
+  },
+  methods: {
+    onDelete() {
+      // 删除图片
+      this.$emit('update:modelValue', '')
+    },
+
+    change(info: any) {
+      this.loading = true
+      const options = this.options
+      console.log(info)
+      this.getBase64(info.raw, (imageUrl: any) => {
+        const target = Object.assign({}, options, {
+          img: imageUrl,
+          name: info.raw.name // 上传文件名
+        })
+        ;(this as any).$refs.CropperModal.edit(target)
+      })
+    },
+    //从本地选择文件
+    async handleChange(options: any) {
+      // console.log(info, 1212)
+      // return
+      // if (this.isStopRun) {
+      //   return
+      // }
+      // this.loading = true
+      // const options = this.options
+      // this.getBase64(info.file, (imageUrl: any) => {
+      //   const target = Object.assign({}, options, {
+      //     img: imageUrl,
+      //     name: info.file.name // 上传文件名
+      //   })
+      //   ;(this as any).$refs.CropperModal.edit(target)
+      // })
+      // const options: any = this.options
+      const fileName =
+        (options.name ? options.name.split('.')[0] : +new Date()) + '.png'
+      try {
+        let key = new Date().getTime() + fileName
+        let obj = {
+          filename: fileName,
+          bucketName: this.bucket,
+          postData: {
+            filename: fileName,
+            acl: 'public-read',
+            key: key,
+            unknowValueField: []
+          }
+        }
+        const res = await request.post('/api-website/getUploadSign', {
+          data: obj
+        })
+        this.dataObj = {
+          policy: res.data.policy,
+          signature: res.data.signature,
+          key: key,
+          KSSAccessKeyId: res.data.kssAccessKeyId,
+          acl: 'public-read',
+          name: fileName
+        }
+
+        let formData = new FormData()
+        for (let key in this.dataObj) {
+          formData.append(key, this.dataObj[key])
+        }
+        formData.append('file', this.blobToFile(this.data, fileName), fileName)
+        await umiRequest(this.ossUploadUrl, {
+          method: 'POST',
+          data: formData
+        })
+        console.log(this.ossUploadUrl + '/' + key)
+        const uploadUrl = this.ossUploadUrl + '/' + key
+        // this.cropperOk(uploadUrl)
+        this.$emit('update:modelValue', uploadUrl)
+      } catch (err: any) {
+        ElMessage.error(err)
+      } finally {
+        // this.submitLoading = false
+        // this.cancelHandel()
+      }
+    },
+    //转成blob
+    blobToFile(Blob: any, fileName: any) {
+      //兼容IE
+      Blob.lastModifiedDate = new Date()
+      Blob.name = fileName
+      return Blob
+    },
+    // 上传之前 格式与大小校验
+    beforeUpload(file) {
+      this.isStopRun = false
+      var fileType = file.type
+      if (fileType.indexOf('image') < 0) {
+        ElMessage.warning('请上传图片')
+        this.isStopRun = true
+        return false
+      }
+      // const isJpgOrPng = this.acceptArray.includes(file.type)
+      // if (!isJpgOrPng) {
+      //   ElMessage.error('你上传图片格式不正确!')
+      //   this.isStopRun = true
+      // }
+      console.log(this.size)
+      const size = this.size || 0
+      const isLtSize = file.size < size * 1024 * 1024
+      if (!isLtSize) {
+        ElMessage.error('图片大小不能超过' + this.size + 'MB!')
+        this.isStopRun = true
+      }
+      return isLtSize
+    },
+    error() {
+      this.remove()
+      this.loading = false
+    },
+    remove() {
+      this.onDelete()
+    },
+    //获取服务器返回的地址
+    handleCropperSuccess(data: any, options: any) {
+      //将返回的数据回显
+      // this.loading = false
+      // console.log(data, 'success')
+      // this.$emit('update:modelValue', data)
+      // this.cropUploadSuccess(data)
+      // this.$emit('cropUploadSuccess', data)
+      // console.log(this.modelValue, 'modelValue')
+      this.data = data
+      // this.handleChange(options)
+      // console.log((this as any).$refs.uploadRef)
+      ;(this as any).$refs.uploadRef.submit()
+    },
+    // 取消上传
+    handleCropperClose() {
+      this.loading = false
+      this.remove()
+    },
+    getBase64(img, callback) {
+      const reader = new FileReader()
+      reader.addEventListener('load', () => callback(reader.result))
+      reader.readAsDataURL(img)
+    }
+  },
+  render() {
+    return (
+      <div class={[styles.colUpload, 'w-full']}>
+        <ElUpload
+          disabled={this.disabled}
+          showFileList={false}
+          accept={this.accept}
+          beforeUpload={this.beforeUpload}
+          // @ts-ignore
+          onChange={this.change}
+          httpRequest={this.handleChange}
+          // limit={1}
+          ref="uploadRef"
+        >
+          <div
+            ref="uploadDom"
+            class={[styles.uploadClass, 'w-full']}
+            style={{ height: '106px' }}
+          >
+            {this.modelValue ? (
+              <ElImage
+                src={this.modelValue}
+                fit="cover"
+                class={styles.uploadSection}
+              />
+            ) : (
+              <div
+                class={[
+                  styles.uploadSection,
+                  'flex items-center flex-col justify-center'
+                ]}
+              >
+                <img src={iconUpload} class="w-8 h-7 mb-3" />
+                <p>{this.tips}</p>
+              </div>
+            )}
+          </div>
+        </ElUpload>
+
+        <p class="text-3 text-[#999999] leading-6 pt-1">{this.extraTips}</p>
+
+        <Cropper
+          ref="CropperModal"
+          bucket={this.bucket}
+          cropperNo={this.handleCropperClose}
+          cropperOk={this.handleCropperSuccess}
+        />
+      </div>
+    )
+  }
+})

src/components/col-cropper-1/cropper.tsx

@@ -0,0 +1,271 @@
+import { defineComponent } from 'vue'
+import styles from './index.module.less'
+import { VueCropper } from 'vue-cropper'
+import umiRequest from 'umi-request'
+import 'vue-cropper/dist/index.css'
+import {
+  ElButton,
+  ElCol,
+  ElDialog,
+  ElIcon,
+  ElImage,
+  ElMessage,
+  ElRow
+} from 'element-plus'
+import { CirclePlus, Remove } from '@element-plus/icons-vue'
+import iconRate from '../col-upload/images/icon_rate.png'
+import request from '@/helpers/request'
+
+export default defineComponent({
+  name: 'cropper',
+  props: {
+    cropperNo: {
+      type: Function,
+      default: (data: any) => {}
+    },
+    cropperOk: {
+      type: Function,
+      default: (data: any) => {}
+    },
+    bucket: {
+      type: String,
+      default: 'daya'
+    }
+  },
+  data() {
+    return {
+      ossUploadUrl: 'https://ks3-cn-beijing.ksyuncs.com/' + this.bucket,
+      dataObj: {
+        policy: '',
+        signature: '',
+        key: '',
+        KSSAccessKeyId: '',
+        acl: 'public-read',
+        name: ''
+      },
+      visible: false,
+      img: null,
+      options: {
+        img: '', //裁剪图片的地址
+        autoCrop: true, //是否默认生成截图框
+        autoCropWidth: 180, //默认生成截图框宽度
+        autoCropHeight: 180, //默认生成截图框高度
+        fixedBox: true, //是否固定截图框大小 不允许改变
+        full: false,
+        enlarge: 1, // 是否按照截图框比例输出 默认为1
+        previewsCircle: true, //预览图是否是原圆形
+        centerBox: true,
+        outputType: 'png',
+        title: '修改头像',
+        name: null // 文件名称
+      },
+      previews: {} as any,
+      url: {
+        upload: '/sys/common/saveToImgByStr'
+      },
+      submitLoading: false
+    }
+  },
+  methods: {
+    edit(record: any) {
+      const { options } = this
+      this.visible = true
+      this.options = Object.assign({}, options, record)
+      console.log(this.options)
+    },
+    /**
+     * 取消截图
+     */
+    cancelHandel() {
+      this.visible = false
+      this.cropperNo()
+    },
+    /**
+     * 确认截图
+     */
+    okHandel() {
+      ;(this as any).$refs.cropperRef.getCropBlob(async data => {
+        this.submitLoading = true
+        const options: any = this.options
+        const fileName =
+          (options.name ? options.name.split('.')[0] : +new Date()) + '.png'
+        try {
+          let key = new Date().getTime() + fileName
+          let obj = {
+            filename: fileName,
+            bucketName: this.bucket,
+            postData: {
+              filename: fileName,
+              acl: 'public-read',
+              key: key,
+              unknowValueField: []
+            }
+          }
+          const res = await request.post('/api-website/getUploadSign', {
+            data: obj
+          })
+          this.dataObj = {
+            policy: res.data.policy,
+            signature: res.data.signature,
+            key: key,
+            KSSAccessKeyId: res.data.kssAccessKeyId,
+            acl: 'public-read',
+            name: fileName
+          }
+
+          let formData = new FormData()
+          for (let key in this.dataObj) {
+            formData.append(key, this.dataObj[key])
+          }
+          formData.append('file', this.blobToFile(data, fileName), fileName)
+          await umiRequest(this.ossUploadUrl, {
+            method: 'POST',
+            data: formData
+          })
+          console.log(this.ossUploadUrl + '/' + key)
+          const uploadUrl = this.ossUploadUrl + '/' + key
+          this.cropperOk(uploadUrl)
+        } catch (err: any) {
+          ElMessage.error(err)
+        } finally {
+          this.submitLoading = false
+          this.cancelHandel()
+        }
+      })
+    },
+    //转成blob
+    blobToFile(Blob: any, fileName: any) {
+      //兼容IE
+      Blob.lastModifiedDate = new Date()
+      Blob.name = fileName
+      return Blob
+    },
+    base64ToFile(urlData: any, fileName: any) {
+      let arr = urlData.split(',')
+      let mime = arr[0].match(/:(.*?);/)[1]
+      let bytes = atob(arr[1]) // 解码base64
+      let n = bytes.length
+      let ia = new Uint8Array(n)
+      while (n--) {
+        ia[n] = bytes.charCodeAt(n)
+      }
+      return new File([ia], fileName, { type: mime })
+    },
+    //移动框的事件
+    realTime(data: any) {
+      this.previews = data
+    },
+    //图片缩放
+    changeScale(num: number) {
+      num = num || 1
+      ;(this as any).$refs.cropperRef.changeScale(num)
+    },
+    //向左旋转
+    rotateLeft() {
+      ;(this as any).$refs.cropperRef.rotateLeft()
+    },
+    //向右旋转
+    rotateRight() {
+      ;(this as any).$refs.cropperRef.rotateRight()
+    }
+  },
+  render() {
+    return (
+      <ElDialog
+        modelValue={this.visible}
+        onUpdate:modelValue={val => (this.visible = val)}
+        appendToBody
+        title={this.options.title}
+        closeOnClickModal={false}
+        width={'800px'}
+        v-slots={{
+          footer: () => (
+            <span class="dialog-footer !text-center block">
+              <ElButton
+                onClick={this.cancelHandel}
+                disabled={this.submitLoading}
+              >
+                取消
+              </ElButton>
+              <ElButton
+                type="primary"
+                onClick={this.okHandel}
+                loading={this.submitLoading}
+              >
+                保 存
+              </ElButton>
+            </span>
+          )
+        }}
+      >
+        <ElRow>
+          <ElCol xs={24} md={12} style={{ width: '350px' }}>
+            <VueCropper
+              ref="cropperRef"
+              img={this.options.img}
+              info={true}
+              autoCrop={this.options.autoCrop}
+              autoCropWidth={this.options.autoCropWidth}
+              full={this.options.full}
+              outputType={this.options.outputType}
+              autoCropHeight={this.options.autoCropHeight}
+              fixedBox={this.options.fixedBox}
+              enlarge={this.options.enlarge}
+              onRealTime={this.realTime}
+              style={{ height: '350px' }}
+            />
+            <div class="flex pt-2">
+              <div
+                onClick={() => {
+                  this.changeScale(1)
+                }}
+                class="mr-2 cursor-pointer"
+                title="放大"
+              >
+                <ElIcon size={30} color="#333">
+                  <CirclePlus />
+                </ElIcon>
+              </div>
+              <div
+                onClick={() => {
+                  this.changeScale(-1)
+                }}
+                class="mr-2 cursor-pointer"
+                title="缩小"
+              >
+                <ElIcon size={30} color="#333">
+                  <Remove />
+                </ElIcon>
+              </div>
+              <div
+                onClick={this.rotateRight}
+                title="向右旋转"
+                class="cursor-pointer"
+              >
+                <img src={iconRate} class="w-[30px] h-[30px]" />
+              </div>
+            </div>
+          </ElCol>
+          <ElCol xs={24} md={12} style={{ height: '350px' }}>
+            <div class={styles.previewImg}>
+              <span>预览图片</span>
+              <div
+                class={
+                  this.options.previewsCircle
+                    ? styles['avatar-upload-preview']
+                    : styles['avatar-upload-preview_range']
+                }
+                style={{
+                  width: this.options.autoCropWidth + 'px',
+                  height: this.options.autoCropHeight + 'px'
+                }}
+              >
+                <ElImage src={this.previews.url} style={this.previews.img} />
+              </div>
+            </div>
+          </ElCol>
+        </ElRow>
+      </ElDialog>
+    )
+  }
+})

src/components/col-cropper-1/index.module.less

@@ -0,0 +1,85 @@
+.uploadSection {
+  width: 156px;
+  height: 106px;
+  background: #f8faf9;
+  border-radius: 4px;
+  border: 1px solid rgba(45, 199, 170, 0.26);
+  font-size: 14px;
+  color: #2dc7aa;
+  line-height: 20px;
+}
+
+.uploadClass {
+  height: 106px;
+  width: 100%;
+
+  :global {
+    .el-loading-spinner {
+      margin-top: -43px;
+      height: 106px;
+    }
+  }
+}
+
+.avatar-upload-preview_range,
+.avatar-upload-preview {
+  width: 180px;
+  height: 180px;
+  box-shadow: 0 0 4px #ccc;
+  overflow: hidden;
+  img {
+    background-color: #f7f7f7;
+    height: 100%;
+  }
+}
+.avatar-upload-preview_range {
+  border-radius: 0;
+}
+.previewImg {
+  padding-left: 50px;
+  padding-top: 10px;
+  & > span {
+    display: block;
+    color: #212121;
+    font-size: 16px;
+    padding-bottom: 15px;
+  }
+}
+.operation {
+  font-size: 24px;
+  display: flex;
+  align-items: center;
+  margin-top: 20px;
+  & > i {
+    margin-left: 12px;
+    cursor: pointer;
+  }
+  .icon-rate {
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    background: url('./images/icon_rate.png') no-repeat center;
+    background-size: contain;
+  }
+}
+.vue-cropper {
+  border-radius: 5px;
+  overflow: hidden;
+}
+:deep(.el-dialog) {
+  margin-bottom: 10vh;
+  .el-dialog__header {
+    // background: #363d55;
+    background: #fff;
+    padding: 15px 20px 15px;
+    .el-dialog__title {
+      color: #212121;
+    }
+    .el-dialog__headerbtn .el-dialog__close {
+      color: #212121;
+    }
+  }
+  .el-dialog__body {
+    padding-top: 0;
+  }
+}

src/components/col-cropper-1/index.tsx

@@ -0,0 +1,427 @@
+// import { ElImage, ElMessage, ElUpload } from 'element-plus'
+import { defineComponent } from 'vue'
+import styles from './index.module.less'
+import iconUpload from '../col-upload/images/icon_upload.png'
+// import Cropper from './cropper'
+import { VueCropper } from 'vue-cropper'
+import umiRequest from 'umi-request'
+import 'vue-cropper/dist/index.css'
+import {
+  ElButton,
+  ElCol,
+  ElDialog,
+  ElIcon,
+  ElImage,
+  ElMessage,
+  ElUpload,
+  ElRow
+} from 'element-plus'
+import { CirclePlus, Remove } from '@element-plus/icons-vue'
+import iconRate from '../col-upload/images/icon_rate.png'
+import request from '@/helpers/request'
+
+export default defineComponent({
+  name: 'col-cropper',
+  props: {
+    modelValue: {
+      type: String,
+      default: ''
+    },
+    options: {
+      // 裁切需要参数
+      type: Object,
+      default: {
+        autoCrop: true, //是否默认生成截图框
+        enlarge: 1, //  图片放大倍数
+        autoCropWidth: 200, //默认生成截图框宽度
+        autoCropHeight: 200, //默认生成截图框高度
+        fixedBox: true, //是否固定截图框大小 不允许改变
+        previewsCircle: true, //预览图是否是原圆形
+        title: '上传图片'
+      }
+    },
+    // 显示图片原始图片
+    showSize: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    bucket: {
+      type: String,
+      default: 'daya'
+    },
+    size: {
+      type: Number,
+      default: 5 // 默认5M
+    },
+    accept: {
+      type: String,
+      default: 'images/*'
+    },
+    tips: {
+      type: String,
+      default: '请上传图片'
+    },
+    extraTips: {
+      type: String,
+      default: '图片最大不能超过5MB'
+    },
+    cropUploadSuccess: {
+      type: Function,
+      default: (data: string) => {}
+    }
+  },
+  data() {
+    return {
+      isStopRun: false,
+      loading: false,
+      ossUploadUrl: 'https://ks3-cn-beijing.ksyuncs.com/' + this.bucket,
+      dataObj: {
+        policy: '',
+        signature: '',
+        key: '',
+        KSSAccessKeyId: '',
+        acl: 'public-read',
+        name: ''
+      },
+      visible: false,
+      img: null,
+      optionsList: {
+        img: '', //裁剪图片的地址
+        autoCrop: true, //是否默认生成截图框
+        autoCropWidth: 180, //默认生成截图框宽度
+        autoCropHeight: 180, //默认生成截图框高度
+        fixedBox: false, //是否固定截图框大小 不允许改变
+        full: false,
+        enlarge: 1, // 是否按照截图框比例输出 默认为1
+        previewsCircle: true, //预览图是否是原圆形
+        centerBox: true,
+        outputType: 'png',
+        title: '修改头像',
+        name: null // 文件名称
+      },
+      previews: {} as any,
+      url: {
+        upload: '/sys/common/saveToImgByStr'
+      },
+      submitLoading: false
+    }
+  },
+  methods: {
+    onDelete() {
+      // 删除图片
+      this.$emit('update:modelValue', '')
+    },
+    //从本地选择文件
+    async handleChange(info: any) {
+      if (this.isStopRun) {
+        return
+      }
+      this.loading = true
+      const options = this.options
+      this.getBase64(info.file, (imageUrl: any) => {
+        const target = Object.assign({}, options, {
+          img: imageUrl,
+          name: info.file.name // 上传文件名
+        })
+        // ;(this as any).$refs.CropperModal.edit(target)
+        this.edit(target)
+      })
+    },
+    // 上传之前 格式与大小校验
+    beforeUpload(file) {
+      this.isStopRun = false
+      var fileType = file.type
+      if (fileType.indexOf('image') < 0) {
+        ElMessage.warning('请上传图片')
+        this.isStopRun = true
+        return false
+      }
+      // const isJpgOrPng = this.acceptArray.includes(file.type)
+      // if (!isJpgOrPng) {
+      //   ElMessage.error('你上传图片格式不正确!')
+      //   this.isStopRun = true
+      // }
+      console.log(this.size)
+      const size = this.size || 0
+      const isLtSize = file.size < size * 1024 * 1024
+      if (!isLtSize) {
+        ElMessage.error('图片大小不能超过' + this.size + 'MB!')
+        this.isStopRun = true
+      }
+      return isLtSize
+    },
+    error() {
+      this.remove()
+      this.loading = false
+    },
+    remove() {
+      this.onDelete()
+    },
+    //获取服务器返回的地址
+    handleCropperSuccess(data: any) {
+      //将返回的数据回显
+      this.loading = false
+      console.log(data, 'success')
+      this.$emit('update:modelValue', data)
+      // this.cropUploadSuccess(data)
+      // this.$emit('cropUploadSuccess', data)
+      // console.log(this.modelValue, 'modelValue')
+    },
+    // 取消上传
+    handleCropperClose() {
+      this.loading = false
+      this.remove()
+    },
+    getBase64(img, callback) {
+      const reader = new FileReader()
+      reader.addEventListener('load', () => callback(reader.result))
+      reader.readAsDataURL(img)
+    },
+    edit(record: any) {
+      const { options } = this
+      this.visible = true
+      this.optionsList = Object.assign({}, options, record)
+      console.log(this.options)
+    },
+    /**
+     * 取消截图
+     */
+    cancelHandel() {
+      this.visible = false
+      // this.cropperNo()
+      this.loading = false
+      this.remove()
+    },
+    /**
+     * 确认截图
+     */
+    okHandel() {
+      ;(this as any).$refs.cropperRef.getCropBlob(async data => {
+        this.submitLoading = true
+        const options: any = this.options
+        const fileName =
+          (options.name ? options.name.split('.')[0] : +new Date()) + '.png'
+        try {
+          let key = new Date().getTime() + fileName
+          let obj = {
+            filename: fileName,
+            bucketName: this.bucket,
+            postData: {
+              filename: fileName,
+              acl: 'public-read',
+              key: key,
+              unknowValueField: []
+            }
+          }
+          const res = await request.post('/api-website/getUploadSign', {
+            data: obj
+          })
+          this.dataObj = {
+            policy: res.data.policy,
+            signature: res.data.signature,
+            key: key,
+            KSSAccessKeyId: res.data.kssAccessKeyId,
+            acl: 'public-read',
+            name: fileName
+          }
+
+          let formData = new FormData()
+          for (let key in this.dataObj) {
+            formData.append(key, this.dataObj[key])
+          }
+          formData.append('file', this.blobToFile(data, fileName), fileName)
+          await umiRequest(this.ossUploadUrl, {
+            method: 'POST',
+            data: formData
+          })
+          console.log(this.ossUploadUrl + '/' + key)
+          const uploadUrl = this.ossUploadUrl + '/' + key
+          // this.cropperOk(uploadUrl)
+          this.$emit('update:modelValue', uploadUrl)
+        } catch (err: any) {
+          ElMessage.error(err)
+        } finally {
+          this.submitLoading = false
+          this.cancelHandel()
+        }
+      })
+    },
+    //转成blob
+    blobToFile(Blob: any, fileName: any) {
+      //兼容IE
+      Blob.lastModifiedDate = new Date()
+      Blob.name = fileName
+      return Blob
+    },
+    base64ToFile(urlData: any, fileName: any) {
+      let arr = urlData.split(',')
+      let mime = arr[0].match(/:(.*?);/)[1]
+      let bytes = atob(arr[1]) // 解码base64
+      let n = bytes.length
+      let ia = new Uint8Array(n)
+      while (n--) {
+        ia[n] = bytes.charCodeAt(n)
+      }
+      return new File([ia], fileName, { type: mime })
+    },
+    //移动框的事件
+    realTime(data: any) {
+      this.previews = data
+    },
+    //图片缩放
+    changeScale(num: number) {
+      num = num || 1
+      ;(this as any).$refs.cropperRef.changeScale(num)
+    },
+    //向左旋转
+    rotateLeft() {
+      ;(this as any).$refs.cropperRef.rotateLeft()
+    },
+    //向右旋转
+    rotateRight() {
+      ;(this as any).$refs.cropperRef.rotateRight()
+    }
+  },
+  render() {
+    return (
+      <div class={[styles.colUpload, 'w-full']}>
+        <ElUpload
+          disabled={this.disabled}
+          showFileList={false}
+          accept={this.accept}
+          beforeUpload={this.beforeUpload}
+          // @ts-ignore
+          httpRequest={this.handleChange}
+          // limit={1}
+          ref="uploadRef"
+        >
+          <div
+            ref="uploadDom"
+            class={[styles.uploadClass, 'w-full']}
+            style={{ height: '106px' }}
+          >
+            {this.modelValue ? (
+              <ElImage
+                src={this.modelValue}
+                fit="cover"
+                class={styles.uploadSection}
+              />
+            ) : (
+              <div
+                class={[
+                  styles.uploadSection,
+                  'flex items-center flex-col justify-center'
+                ]}
+              >
+                <img src={iconUpload} class="w-8 h-7 mb-3" />
+                <p>{this.tips}</p>
+              </div>
+            )}
+          </div>
+        </ElUpload>
+
+        <p class="text-3 text-[#999999] leading-6 pt-1">{this.extraTips}</p>
+
+        <ElDialog
+          modelValue={this.visible}
+          onUpdate:modelValue={val => (this.visible = val)}
+          appendToBody
+          title={this.options.title}
+          closeOnClickModal={false}
+          width={'800px'}
+          v-slots={{
+            footer: () => (
+              <span class="dialog-footer !text-center block">
+                <ElButton
+                  onClick={this.cancelHandel}
+                  disabled={this.submitLoading}
+                >
+                  取消
+                </ElButton>
+                <ElButton
+                  type="primary"
+                  onClick={this.okHandel}
+                  loading={this.submitLoading}
+                >
+                  保 存
+                </ElButton>
+              </span>
+            )
+          }}
+        >
+          <ElRow>
+            <ElCol xs={24} md={12} style={{ width: '350px' }}>
+              <VueCropper
+                ref="cropperRef"
+                img={this.optionsList.img}
+                info={true}
+                autoCrop={this.optionsList.autoCrop}
+                autoCropWidth={this.optionsList.autoCropWidth}
+                full={this.optionsList.full}
+                outputType={this.optionsList.outputType}
+                autoCropHeight={this.optionsList.autoCropHeight}
+                fixedBox={this.optionsList.fixedBox}
+                enlarge={this.optionsList.enlarge}
+                onRealTime={this.realTime}
+                style={{ height: '350px' }}
+              />
+              <div class="flex pt-2">
+                <div
+                  onClick={() => {
+                    this.changeScale(1)
+                  }}
+                  class="mr-2 cursor-pointer"
+                  title="放大"
+                >
+                  <ElIcon size={30} color="#333">
+                    <CirclePlus />
+                  </ElIcon>
+                </div>
+                <div
+                  onClick={() => {
+                    this.changeScale(-1)
+                  }}
+                  class="mr-2 cursor-pointer"
+                  title="缩小"
+                >
+                  <ElIcon size={30} color="#333">
+                    <Remove />
+                  </ElIcon>
+                </div>
+                <div
+                  onClick={this.rotateRight}
+                  title="向右旋转"
+                  class="cursor-pointer"
+                >
+                  <img src={iconRate} class="w-[30px] h-[30px]" />
+                </div>
+              </div>
+            </ElCol>
+            <ElCol xs={24} md={12} style={{ height: '350px' }}>
+              <div class={styles.previewImg}>
+                <span>预览图片</span>
+                <div
+                  class={
+                    this.optionsList.previewsCircle
+                      ? styles['avatar-upload-preview']
+                      : styles['avatar-upload-preview_range']
+                  }
+                  style={{
+                    width: this.optionsList.autoCropWidth + 'px',
+                    height: this.optionsList.autoCropHeight + 'px'
+                  }}
+                >
+                  <ElImage src={this.previews.url} style={this.previews.img} />
+                </div>
+              </div>
+            </ElCol>
+          </ElRow>
+        </ElDialog>
+      </div>
+    )
+  }
+})

src/components/col-cropper/cropper.tsx

@@ -21,7 +21,7 @@ export default defineComponent({
   props: {
     cropperNo: {
       type: Function,
-      default: () => {}
+      default: (data: any) => {}
     },
     cropperOk: {
       type: Function,

src/components/col-cropper/index.tsx

@@ -120,7 +120,7 @@ export default defineComponent({
       this.loading = false
       console.log(data, 'success')
       this.$emit('update:modelValue', data)
-      // this.cropUploadSuccess(data)
+      this.cropUploadSuccess(data)
       // this.$emit('cropUploadSuccess', data)
       // console.log(this.modelValue, 'modelValue')
     },

src/components/col-header/index.tsx

@@ -18,16 +18,16 @@ export default defineComponent({
         { name: '下载', href: '/downLoad', current: false }
       ],
       navPath: ['', '/musicLibrary', '', '', '/downLoad'],
-      isTop:false
+      isTop: false
     }
   },
   mounted() {
-    window.addEventListener("scroll", (e) => {
+    window.addEventListener('scroll', e => {
       //函数体
       let scrollTop =
-        document.documentElement.scrollTop | document.body.scrollTop;
-      scrollTop > 0 ? (this.isTop = true) : (this.isTop = false);
-    });
+        document.documentElement.scrollTop | document.body.scrollTop
+      scrollTop > 0 ? (this.isTop = true) : (this.isTop = false)
+    })
   },
   watch: {
     $route(res: any) {
@@ -41,9 +41,10 @@ export default defineComponent({
   render() {
     return (
       <>
-      {/* <div class='wall' style={{height:70px;}}></div> */}
-      <div class={["headerSection",this.isTop?'':'top']} >
-
+        {/* <div class="wall h-[70px]"></div> */}
+        <div
+          class={['headerSection backdrop-blur-sm', this.isTop ? '' : 'top']}
+        >
           <div class="flex items-center h-full">
             <div class="logoWrap">
               <img class="w-full" src={logo} alt="" />
@@ -83,7 +84,7 @@ export default defineComponent({
             </ElButton>
           </div>
         </div>
-        </>
+      </>
     )
   }
 })

src/components/col-upload-video/index.module.less

@@ -27,7 +27,15 @@
 }
 
 .fileUpload {
+  .uploadClass {
+    position: relative;
+    display: flex;
+    width: 96px;
+  }
   :global {
+    .el-upload {
+      justify-content: flex-start;
+    }
     .el-upload--text {
       @apply w-full;
     }
@@ -35,7 +43,7 @@
     .el-loading-spinner {
       display: flex;
       align-items: center;
-      height: 42px !important;
+      height: 40px !important;
       justify-content: center;
       margin-top: -20px !important;
       svg {
@@ -47,6 +55,10 @@
   }
 }
 
+.disabled .uploadClass {
+  cursor: not-allowed !important;
+}
+
 .uploadClass {
   height: 106px;
   width: 100%;

src/components/col-upload-video/index.tsx

@@ -32,6 +32,10 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
+    limit: {
+      type: Number,
+      default: 1
+    },
     size: {
       type: Number,
       default: 50 // 默认5M
@@ -48,6 +52,10 @@ export default defineComponent({
     extraTips: {
       type: String,
       default: '视频最大不能超过50MB'
+    },
+    multipleModel: {
+      type: Function,
+      default: (data: any) => {}
     }
   },
   data() {
@@ -62,15 +70,32 @@ export default defineComponent({
         name: ''
       },
       fileList: [] as any,
+      tempUrls: {} as any,
+      responseList: [] as any, // 请求成功之后的数据
+      btnLoading: false,
       loading: null as any
     }
   },
   methods: {
-    handleSuccess() {
+    handleSuccess(response: any, uploadFile: any, uploadFiles: any) {
       this.loading?.close()
-      let url = this.ossUploadUrl + '/' + this.dataObj.key
 
-      this.$emit('update:modelValue', url)
+      // 多文件上传，每个文件上传成功后，将文件的url添加到fileList
+      console.log(this.fileList, 'fileList')
+      console.log(response, uploadFile, uploadFiles, 'response')
+      if (this.multiple) {
+        if (uploadFile.status === 'success') {
+          this.responseList.push(this.tempUrls[uploadFile.uid])
+        }
+        // 说明已经上传完成
+        if (uploadFiles.length === this.responseList.length) {
+          this.btnLoading = false
+          this.multipleModel(this.responseList)
+        }
+      } else {
+        let url = this.ossUploadUrl + '/' + this.dataObj.key
+        this.$emit('update:modelValue', url)
+      }
     },
     handleRemove() {
       console.log('remove')
@@ -78,10 +103,11 @@ export default defineComponent({
     handleChange() {
       console.log('handleChange')
     },
-    handleProgress() {
-      console.log('handleProgress')
+    handleProgress(e) {
+      console.log('handleProgress', e)
     },
     handleError() {
+      this.btnLoading = false
       this.loading?.close()
     },
     async beforeUpload(file: any) {
@@ -112,14 +138,17 @@ export default defineComponent({
           return false
         }
       }
-      this.loading = ElLoading.service({
-        target: this.$refs.uploadDom as HTMLElement,
-        lock: true,
-        fullscreen: false,
-        text: '上传中...',
-        background: 'rgba(0, 0, 0, 0.7)'
-      })
-      console.log(this.loading)
+      if (this.multiple) {
+        this.btnLoading = true
+      } else {
+        this.loading = ElLoading.service({
+          target: this.$refs.uploadDom as HTMLElement,
+          lock: true,
+          fullscreen: false,
+          text: '上传中...',
+          background: 'rgba(0, 0, 0, 0.7)'
+        })
+      }
       try {
         let fileName = file.name.replaceAll(' ', '_')
         let key = new Date().getTime() + fileName
@@ -144,14 +173,21 @@ export default defineComponent({
           acl: 'public-read',
           name: fileName
         }
+        this.tempUrls[file.uid] = this.ossUploadUrl + '/' + this.dataObj.key
       } catch (e) {
-        this.loading.close()
+        this.btnLoading = false
+        this.loading?.close()
       }
     },
     fileName(name = '') {
       return name.split('/').pop()
     },
-    handleExceed() {}
+    handleExceed(e: any) {
+      if (e.length > this.limit) {
+        ElMessage.error(`一次性最多只能上传${this.limit}个文件`)
+        return false
+      }
+    }
   },
   render() {
     return (
@@ -171,21 +207,29 @@ export default defineComponent({
           beforeUpload={this.beforeUpload}
           onExceed={this.handleExceed}
           ref="uploadRef"
+          multiple={this.multiple}
+          limit={this.limit}
+          class={[
+            this.multiple && styles.fileUpload,
+            this.disabled && styles.disabled
+          ]}
         >
           <div
             ref="uploadDom"
             class={[styles.uploadClass, 'w-full']}
-            style={{ height: '106px' }}
+            style={{ height: this.multiple ? '40px' : '106px' }}
           >
             {this.modelValue ? (
-              <ElImage
-                src={this.modelValue}
-                fit="cover"
+              <video
+                ref="videoUpload"
+                crossorigin="anonymous"
                 class={styles.uploadSection}
+                src={this.modelValue}
+                // poster={iconUploadPoster}
               />
             ) : this.multiple ? (
-              <ElButton size="large" type="primary">
-                点击上传
+              <ElButton size="large" type="primary" loading={this.btnLoading}>
+                {this.btnLoading ? '上传中...' : '点击上传'}
               </ElButton>
             ) : (
               <div

src/components/col-upload/index.tsx

@@ -39,6 +39,10 @@ export default defineComponent({
     extraTips: {
       type: String,
       default: '图片最大不能超过5MB'
+    },
+    onChange: {
+      type: Function,
+      default: () => {}
     }
   },
   data() {
@@ -62,6 +66,7 @@ export default defineComponent({
       let url = this.ossUploadUrl + '/' + this.dataObj.key
       console.log(url)
       this.$emit('update:modelValue', url)
+      this.onChange(url)
     },
     handleRemove() {
       console.log('remove')

src/helpers/request.ts

@@ -1,6 +1,6 @@
 import { extend } from 'umi-request'
 import cleanDeep from 'clean-deep'
-import { browser, getAuth } from '@/helpers/utils'
+import { browser, getAuth, removeAuth } from '@/helpers/utils'
 import { postMessage } from './native-message'
 import { ElMessage } from 'element-plus'
 
@@ -80,6 +80,7 @@ request.interceptors.response.use(
       }
 
       if (data.code === 403) {
+        removeAuth()
         // window.location.href = location.origin
         ElMessage.error('登录已过期，请重新登录')
       }

src/router/routes-admin.ts

@@ -29,7 +29,7 @@ export default [
     meta: {
       title: '谱库',
       index: 2
-    },
+    }
   },
   {
     path: '/searchdetail',
@@ -105,6 +105,17 @@ export default [
         meta: { title: '直播课', index: 3 }
       },
       {
+        path: '/userInfo/liveOperation',
+        name: 'userInfoLiveOperation',
+        component: () => import('@/views/user-info/live-operation'),
+        meta: {
+          title: '直播课',
+          index: 4,
+          hidden: true,
+          activeMenu: 'userInfoLiveClass'
+        }
+      },
+      {
         path: '/userInfo/videoClass',
         name: 'userInfoVideoClass',
         component: () => import('@/views/user-info/video-class'),
@@ -139,5 +150,25 @@ export default [
         }
       }
     ]
+  },
+  {
+    path: '/studentInfo',
+    name: 'studentInfo',
+    component: () => import('@/views/student-info'),
+    redirect: '/studentInfo/myScore',
+    children: [
+      {
+        path: '/studentInfo/myScore',
+        name: 'studentInfoMyScore',
+        component: () => import('@/views/student-info/my-score'),
+        meta: { title: '我的曲谱', index: 5 }
+      },
+      {
+        path: '/studentInfo/myFollow',
+        name: 'studentInfoMyFollow',
+        component: () => import('@/views/student-info/my-follow'),
+        meta: { title: '我关注的老师', index: 5, hidden: true }
+      }
+    ]
   }
 ]

src/views/student-info/components/item/index.tsx

@@ -0,0 +1,42 @@
+import { ElImage } from 'element-plus'
+import { defineComponent } from 'vue'
+import pan from '../../images/pan.png'
+import start from '../../images/start.png'
+import hold from '../../images/hold.png'
+
+export default defineComponent({
+  name: 'item',
+  props: {
+    item: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  render() {
+    const item = this.item
+    return (
+      <div class="rounded-sm w-[168px] cursor-pointer overflow-hidden relative transition-all">
+        <ElImage
+          class="w-full h-[168px] align-middle"
+          fit="cover"
+          src={item.albumCoverUrl || hold}
+        />
+
+        <div class="text-lg text-black whitespace-nowrap text-ellipsis overflow-hidden py-1">
+          {item.albumName}
+        </div>
+
+        <div class="flex justify-between text-sm text-[#999]">
+          <div class="flex items-center">
+            <img src={pan} class="w-[18px] h-[18px] mr-1" />
+            <span>{item.musicSheetCount}首</span>
+          </div>
+          <div class="flex items-center ">
+            <img src={start} class="w-[18px] h-[18px] mr-1" />
+            <span>{item.albumFavoriteCount}收藏</span>
+          </div>
+        </div>
+      </div>
+    )
+  }
+})

src/views/student-info/components/user-menu/index.module.less

@@ -0,0 +1,49 @@
+.menuItem {
+  .icon1 {
+    background: url('./images/1.png') no-repeat center;
+    background-size: contain;
+  }
+  .icon2 {
+    background: url('./images/2.png') no-repeat center;
+    background-size: contain;
+  }
+  .icon3 {
+    background: url('./images/3.png') no-repeat center;
+    background-size: contain;
+  }
+  .icon4 {
+    background: url('./images/4.png') no-repeat center;
+    background-size: contain;
+  }
+  .icon5 {
+    background: url('./images/5.png') no-repeat center;
+    background-size: contain;
+  }
+  &.active,
+  &:hover {
+    background: url('./images/menu_active.png') no-repeat left center;
+    background-size: contain;
+    @apply text-white;
+
+    .icon1 {
+      background: url('./images/1-active.png') no-repeat center;
+      background-size: contain;
+    }
+    .icon2 {
+      background: url('./images/2-active.png') no-repeat center;
+      background-size: contain;
+    }
+    .icon3 {
+      background: url('./images/3-active.png') no-repeat center;
+      background-size: contain;
+    }
+    .icon4 {
+      background: url('./images/4-active.png') no-repeat center;
+      background-size: contain;
+    }
+    .icon5 {
+      background: url('./images/5-active.png') no-repeat center;
+      background-size: contain;
+    }
+  }
+}

src/views/student-info/components/user-menu/index.tsx

@@ -0,0 +1,63 @@
+import { defineComponent } from 'vue'
+import { RouterLink } from 'vue-router'
+import styles from './index.module.less'
+
+export const getAssetsHomeFile = (fileName: string) => {
+  const path = `./images/${fileName}`
+  const modules = import.meta.globEager('./images/*')
+  return modules[path].default
+}
+// 个人中心默认地址
+const defaultRoute = 'studentInfo'
+
+export default defineComponent({
+  name: 'user-menu',
+  data() {
+    return {}
+  },
+  computed: {
+    activeRoute() {
+      return this.$route.name
+    },
+    acitveMenuRoute() {
+      return this.$route.meta.activeMenu
+    },
+    menuList() {
+      const hasRoute = this.$router.hasRoute(defaultRoute)
+      // 判断是否有个人中心的菜单
+      if (!hasRoute) {
+        return
+      }
+      const allRouter = this.$router.getRoutes()
+      const userInfoRouter = allRouter.find(item => item.name === defaultRoute)
+      const list: any = []
+      userInfoRouter?.children.forEach((item: any) => {
+        if (!item.meta.hidden) {
+          list.push(item)
+        }
+      })
+      return list
+    }
+  },
+  render() {
+    return (
+      <div class="bg-white rounded-[6px] text-center py-6 px-[18px] flex items-center flex-col">
+        {this.menuList.map((item: any) => (
+          <RouterLink
+            to={item.path}
+            class={[
+              'py-2 px-6 mb-1.5 flex items-center text-base text-[#666] w-full last:mb-0 cursor-pointer',
+              styles.menuItem,
+              (item.name === this.activeRoute ||
+                item.name === this.acitveMenuRoute) &&
+                styles.active
+            ]}
+          >
+            <i class={['w-7 h-7 mr-3.5', styles['icon' + item.meta.index]]}></i>
+            {item.meta.title}
+          </RouterLink>
+        ))}
+      </div>
+    )
+  }
+})

src/views/student-info/components/users/index.tsx

@@ -0,0 +1,52 @@
+import { defineComponent } from 'vue'
+import iconTeacher from '@/common/images/icon_teacher.png'
+import { ElTag } from 'element-plus'
+import { state } from '@/state'
+import { userInfo } from 'os'
+import { getUserType } from '@/helpers/utils'
+
+export default defineComponent({
+  name: 'users',
+  computed: {
+    userInfo() {
+      return state.user.data
+    }
+  },
+  render() {
+    return (
+      <div class="bg-white rounded-[6px] text-center pt-[30px] pb-8 flex items-center flex-col">
+        <img src={iconTeacher} class="w-[68px] h-[68px] rounded-full" />
+
+        <p class="text-[#1A1A1A] text-lg pt-4">{this.userInfo.username}</p>
+
+        <div class="text-[14px] text-[#666] flex items-center justify-center">
+          <span
+            class={[
+              'flex items-center justify-center leading-6',
+              getUserType() === 'STUDENT' && 'cursor-pointer'
+            ]}
+            onClick={() => {
+              if (getUserType() === 'STUDENT') {
+                this.$router.push('/studentInfo/myFollow')
+              }
+            }}
+          >
+            关注
+            {getUserType() === 'TEACHER' ? (
+              <b class="text-black text-xl pl-1 pb-[2px]">
+                {this.userInfo.fansNum || 0}
+              </b>
+            ) : (
+              <b class="text-black text-xl pl-1 pb-[2px]">
+                {this.userInfo.starTeacherNum || 0}
+              </b>
+            )}
+          </span>
+          {/* <span class="pl-3 flex items-center justify-center leading-6">
+            帖子<b class="text-black text-xl pl-1 pb-[2px]">124</b>
+          </span> */}
+        </div>
+      </div>
+    )
+  }
+})

src/views/student-info/index.tsx

@@ -0,0 +1,21 @@
+import { defineComponent, render } from 'vue'
+import { RouterView } from 'vue-router'
+import UserMenu from './components/user-menu'
+import Users from './components/users'
+
+export default defineComponent({
+  name: 'user-info',
+  render() {
+    return (
+      <div class="w-[1200px] mt-[100px] mb-14 min-h-full m-auto text-[#333] flex">
+        <div class="w-56 mr-4">
+          <Users class="mb-3 user-shadow" />
+          <UserMenu class="user-shadow" />
+        </div>
+        <div class="w-[960px] bg-white rounded-[6px] user-shadow">
+          <RouterView></RouterView>
+        </div>
+      </div>
+    )
+  }
+})