Merge branch 'iteration-20240919' into online

src/components/col-header/modals/loganInfo.tsx

@@ -4,7 +4,8 @@ import {
   reactive,
   onMounted,
   ref,
-  nextTick
+  nextTick,
+  computed
 } from 'vue'
 import {
   ElTag,
@@ -71,6 +72,9 @@ export default defineComponent({
     })
     const route = useRoute()
     const router = useRouter()
+    const users = computed(() => {
+      return state.user.data
+    })
     onMounted(() => {
       nextTick(() => {
         setUser()
@@ -85,7 +89,7 @@ export default defineComponent({
       // LIVE：直播课，
       // MUSIC：曲目 逗号隔开
       let status = false
-      const userInfo = getUserInfo()
+      const userInfo = users.value
       switch (type) {
         case 'STYLE':
         case 'VIDEO':
@@ -110,7 +114,8 @@ export default defineComponent({
       return status
     }
     const setUser = () => {
-      states.user = getUserInfo()
+      states.user = users.value
+      console.log(users.value, 'users.value')
       states.userType = getUserType()
       if (states.user.userType) {
         if (
@@ -237,6 +242,7 @@ export default defineComponent({
 
     return {
       ...toRefs(states),
+      users,
       gotoPage,
       changeRoute,
       checkBadge,
@@ -306,7 +312,7 @@ export default defineComponent({
                         onClick={() => this.gotoFans('/userInfo/myFans')}
                       >
                         <p class={classes.dropdownItemTitle}>
-                          {this.user.fansNum || 0}
+                          {this.users.fansNum || 0}
                         </p>
                         <p class={classes.dropdownItemsubTitle}>粉丝</p>
                       </div>
@@ -315,7 +321,7 @@ export default defineComponent({
                         onClick={() => this.gotoFans('/userInfo/musicClass')}
                       >
                         <p class={classes.dropdownItemTitle}>
-                          {this.user.musicSheetNum || 0}
+                          {this.users.musicSheetNum || 0}
                         </p>
                         <p class={classes.dropdownItemsubTitle}>乐谱</p>
                       </div>

src/views/user-info/my-fans/index.module.less

@@ -0,0 +1,17 @@
+.removeBtn {
+    display: inline-block;
+  width: 76px;
+  background: #f2f2f2;
+  border-radius: 14px;
+  font-weight: 500;
+  font-size: 14px;
+  color: #1e2022;
+  line-height: 28px;
+  text-align: center;
+  cursor: pointer;
+  margin-top: 10px;
+  &:hover {
+    background: #2dc7aa;
+    color: #ffffff;
+  }
+}

src/views/user-info/my-fans/index.tsx

@@ -1,12 +1,14 @@
 import ColEmpty from '@/components/col-empty'
 import Pagination from '@/components/pagination'
 import request from '@/helpers/request'
-import { ElImage, ElSkeleton, ElSkeletonItem, ElTag } from 'element-plus'
+import { ElImage, ElMessage, ElMessageBox, ElSkeleton, ElSkeletonItem, ElTag } from 'element-plus'
 import { defineComponent } from 'vue'
+import styles from './index.module.less'
 
 import iconVip from '../images/icon_vip.png'
 import iconSvip from '../images/icon_svip.png'
 import iconVipDefault from '../images/icon_vip_default.png'
+import { getUserInfo } from '@/state'
 
 export default defineComponent({
   name: 'MyFans',
@@ -54,6 +56,22 @@ export default defineComponent({
           this.loading = false
         }, 200)
       }
+    },
+    onRemove(item: any) {
+      ElMessageBox.confirm(`确定移除该粉丝吗?`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(async () => {
+        try {
+          await request.post('/api-teacher/teacher/delFans/' + item.userId)
+          await getUserInfo()
+          ElMessage.success('移除成功')
+          this.pageInfo.page = 1
+          this.getList()
+          
+        } catch {}
+      })
     }
   },
   render() {
@@ -100,39 +118,32 @@ export default defineComponent({
                     <div class="bg-[#FFE7CF] absolute left-2.5 top-2.5 text-[#AB5400] text-xs py-0.5 px-2 rounded-[10px]">
                       学生
                     </div>
-                    <div class="flex flex-col items-center">
+                    <div class="flex flex-col items-center" style="position: relative">
                       <ElImage
                         src={item.avatar}
-                        class="w-12 h-12 rounded-full border-2 border-[#2DC7AA]"
+                        class={['w-12 h-12 rounded-full border-2 border-[#FFFFFF]', item.vipType !== 'NORMAL' ? item.vipType === 'VIP' ? 'border-[#FADA9B]' : 'border-[#F0AF88]' : '' ]}
                       />
                       {item.vipType && item.vipType !== 'NORMAL' && (
                         <ElImage
+                          style="position: absolute;bottom: -5px; height: 18px;"
                           src={item.vipType === 'VIP' ? iconVip : iconSvip}
-                          class="h-5 -mt-4"
+                          class="-mt-4"
+
                         />
                       )}
                     </div>
 
-                    <p class="text-base text-[#333] font-semibold leading-tight pb-5 pt-2 text-center max-w-[120px] whitespace-nowrap overflow-hidden text-ellipsis">
+                    <p class="text-base text-[#333] font-semibold leading-tight pb-1 pt-2 text-center max-w-[120px] whitespace-nowrap overflow-hidden text-ellipsis" title={item.userName}>
                       {item.userName}
                     </p>
                     <p class="h-6">
                       {item.subjectName && (
-                        <ElTag
-                          effect="dark"
-                          // size="small"
-                          color="#E0FEF9"
-                          round
-                          style={{
-                            borderColor: '#E0FEF9',
-                            color: '#1B967E',
-                            margin: '0 4px'
-                          }}
-                        >
-                          {item.subjectName}
-                        </ElTag>
+                        <span style="font-size: 12px;color: #777777;">{item.subjectName}</span>
                       )}
                     </p>
+                    <p>
+                      <span class={styles.removeBtn} onClick={() => this.onRemove(item)}>移除</span>
+                    </p>
                   </div>
                 </div>
               ))}