更新样式

src/components/col-empty/index.tsx

@@ -57,7 +57,8 @@ export default defineComponent({
           <ElButton
             type="primary"
             class="rounded-sm !px-12"
-            style={{ height: '38px' }}
+            round
+            style={{ height: '48px' }}
             onClick={() => {
               this.onDetail()
             }}

src/router/routes-admin.ts

@@ -193,6 +193,18 @@ export default [
         name: 'userInfoMyFans',
         component: () => import('@/views/user-info/my-fans'),
         meta: { title: '我的粉丝', index: 4, hidden: true, isdark: true }
+      },
+      {
+        path: '/userInfo/openLive',
+        name: 'userInfoOpenLive',
+        component: () => import('@/views/user-info/open-live'),
+        meta: {
+          title: '开通直播',
+          index: 4,
+          hidden: true,
+          activeMenu: 'userInfoLiveClass',
+          isdark: true
+        }
       }
     ]
   },

src/state.ts

@@ -8,6 +8,7 @@ export const state = reactive({
     status: 'init' as status,
     data: {} as any
   },
+  openLiveStatus: false,
   loginPopupStatus: false, // 登录弹窗状态
   loginPopupTimer: null as any // 登录弹窗定时器
 })

src/views/login/components/form/index.tsx

@@ -247,9 +247,7 @@ export default defineComponent({
             style={{ height: '48px', fontSize: '16px' }}
             round
           >
-            {this.type === 'teacher-login' || this.type === 'student-login'
-              ? '登 录'
-              : '注 册'}
+            {this.type === 'login' ? '登 录' : '注 册'}
           </ElButton>
         </ElFormItem>
 

src/views/login/components/qr-login/index.tsx

@@ -42,7 +42,6 @@ export default defineComponent({
   },
   async mounted() {
     try {
-      //
       const scanCode = sessionStorage.getItem('scanCode')
       if (scanCode) {
         this.scanCode = scanCode
@@ -50,15 +49,17 @@ export default defineComponent({
       } else {
         await this.getCode()
       }
-      console.log(this.loginType)
-      this.qrCode = `${getCodeBaseUrl(`/${this.loginType}`)}/#/scanLogin?code=${
+      const str = this.loginType === 'TEACHER' ? 'teacher' : 'student'
+      this.qrCode = `${getCodeBaseUrl(`/${str}`)}/#/scanLogin?code=${
         this.scanCode
       }`
       console.log(this.qrCode)
       state.loginPopupTimer = setInterval(async () => {
         await this.getList()
       }, 5000)
-    } catch {}
+    } catch {
+      //
+    }
   },
   methods: {
     async getCode() {

src/views/login/components/register/index.tsx

@@ -61,7 +61,7 @@ export default defineComponent({
         <div class={[styles.scanTxt, 'text-center']}>
           已有账号，
           <span
-            class="cursor-pointer"
+            class="cursor-pointer text-[#2DC7AA]"
             onClick={() => {
               this.onTypeChange('login')
             }}

src/views/student-info/my-follow/item.tsx

@@ -1,9 +1,17 @@
 import { defineComponent } from 'vue'
 import styles from './index.module.less'
 import iconTeacher from '@/common/images/icon_teacher.png'
-import { ElButton, ElImage, ElRate, ElTag } from 'element-plus'
+import {
+  ElButton,
+  ElImage,
+  ElMessage,
+  ElMessageBox,
+  ElRate,
+  ElTag
+} from 'element-plus'
 // import iconVip from '../images/icon_vip.png'
 import iconVip from '../../user-info/images/icon_vip.png'
+import request from '@/helpers/request'
 
 export default defineComponent({
   name: 'item',
@@ -11,6 +19,10 @@ export default defineComponent({
     item: {
       type: Object,
       default: {}
+    },
+    getList: {
+      type: Function,
+      default: () => {}
     }
   },
   computed: {
@@ -19,6 +31,25 @@ export default defineComponent({
       return subjectName.split(',')
     }
   },
+  methods: {
+    async onUnLike() {
+      // console.log(this.item)
+      ElMessageBox.confirm('确定取消关注吗？', '提示').then(async () => {
+        try {
+          await request.get('/api-website/student/starOrUnStar', {
+            params: {
+              userId: this.item.userId,
+              starStatus: 0
+            }
+          })
+          ElMessage.success('取消关注成功')
+          this.getList()
+        } catch {
+          //
+        }
+      })
+    }
+  },
   render() {
     const item = this.item
     return (
@@ -61,6 +92,7 @@ export default defineComponent({
             plain
             size="small"
             class="!bg-white !text-[#999999] hover:!text-[#FF8B00]"
+            onClick={this.onUnLike}
           >
             取消关注
           </ElButton>

src/views/student-info/my-follow/list.tsx

@@ -66,22 +66,6 @@ export default defineComponent({
             count={4}
             v-slots={{
               template: () => (
-                // <div class="basis-1/2">
-                //   <div class=" rounded-md bg-white py-4 px-[14px] mb-4 mx-2 flex items-center">
-                //     <ElSkeletonItem
-                //       variant="circle"
-                //       style={{ width: '54px', height: '54px' }}
-                //     ></ElSkeletonItem>
-
-                //     <div class="flex w-32 flex-col pl-2.5">
-                //       <ElSkeletonItem variant="h3"></ElSkeletonItem>
-                //       <ElSkeletonItem
-                //         variant="p"
-                //         style={{ width: '60%', marginTop: '6px' }}
-                //       ></ElSkeletonItem>
-                //     </div>
-                //   </div>
-                // </div>
                 <div class="w-[158px] rounded-[10px] pt-10 pb-7 mb-4 m-auto flex items-center justify-center flex-col user-shadow relative">
                   <ElSkeletonItem
                     variant="circle"
@@ -111,7 +95,7 @@ export default defineComponent({
             <div class="flex flex-wrap">
               {this.list.map((item: any) => (
                 <div class="basis-1/4">
-                  <Item item={item} />
+                  <Item item={item} getList={this.getList} />
                 </div>
               ))}
             </div>

src/views/user-info/components/open-member/index.tsx

@@ -0,0 +1,8 @@
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'open-member',
+  render() {
+    return <></>
+  }
+})

src/views/user-info/live-class/list.tsx

@@ -127,7 +127,7 @@ export default defineComponent({
               buttonVisibility={false}
               buttonText="立即开通"
               onDetail={() => {
-                this.$router.push('/teacherAuth')
+                this.$router.push('/userInfo/openLive')
               }}
             />
           )

src/views/user-info/open-live/index.module.less

@@ -0,0 +1,13 @@
+.openLive {
+  :global {
+    .el-dialog {
+      --el-dialog-border-radius: 18px !important;
+      --el-dialog-width: 488px;
+      background: url('./images/open_live-bg.png') no-repeat top center #fff;
+      background-size: contain;
+    }
+    .el-dialog__header {
+      padding: 0;
+    }
+  }
+}

src/views/user-info/open-live/index.tsx

@@ -0,0 +1,223 @@
+import request from '@/helpers/request'
+import { state } from '@/state'
+import { ElButton, ElDialog, ElMessage } from 'element-plus'
+import { defineComponent } from 'vue'
+import iconTips from './images/icon_tips.png'
+import liveBg from './images/live_bg.png'
+import liveClass from './images/live_class.png'
+import openLive from './images/open_live.png'
+import styles from './index.module.less'
+
+export default defineComponent({
+  name: 'open-live',
+  computed: {
+    users() {
+      return state.user.data
+    },
+    btnStatus() {
+      const users: any = this.users
+      const fansNum: number = this.fansNum
+      const expTime: number = this.overClassNum
+      return users?.fansNum >= fansNum && users?.expTime >= expTime
+    }
+  },
+  data() {
+    return {
+      fansNum: 0,
+      overClassNum: 0,
+      openStatus: false
+    }
+  },
+  async mounted() {
+    const liveFlag = state.user.data?.liveFlag
+    state.openLiveStatus = liveFlag === 1 ? true : false
+    try {
+      const res = await request.get(
+        '/api-website/sysConfig/queryByParamNameList',
+        {
+          params: {
+            paramNames: 'open_live_fans_num,open_list_over_class'
+          }
+        }
+      )
+      const result = res.data
+      result.forEach((item: any) => {
+        if (item.paramName === 'open_live_fans_num') {
+          this.fansNum = Number(item.paramValue)
+        } else if (item.paramName === 'open_list_over_class') {
+          this.overClassNum = Number(item.paramValue)
+        }
+      })
+
+      // 如果没有达人认证，则需要先去认证
+      // if (!state.user.data?.entryFlag) {
+      //   Dialog.alert({
+      //     message: '您尚未完成达人认证，达人认证后才可开通直播权限哦！',
+      //     confirmButtonColor: '#2DC7AA'
+      //   }).then(() => {
+      //     this.$router.replace('/teacherCert')
+      //   })
+      // }
+    } catch {
+      //
+    }
+  },
+  methods: {
+    async onOpenLive() {
+      try {
+        await request.get('/api-website/teacher/openLive', {})
+        // Toast('开通成功')
+        // ElMessage.success('开通成功')
+        this.openStatus = true
+      } catch {
+        //
+      }
+    },
+    getRate(target: any, rate: any) {
+      // this.users?.fansNum
+      // this.fansNum
+      if (rate > 0) {
+        return target / rate >= 1
+          ? '100%'
+          : `${((target / rate) * 100).toFixed(2)}%`
+      } else {
+        return '100%'
+      }
+    }
+  },
+  render() {
+    return (
+      <div class={styles.openLive}>
+        <div class="text-2xl font-medium text-black leading-none px-6 pt-5 pb-8 flex items-center justify-between">
+          <span>开通直播</span>
+
+          <ElButton
+            type="primary"
+            round
+            size="large"
+            disabled={!this.btnStatus}
+            onClick={this.onOpenLive}
+          >
+            开通直播
+          </ElButton>
+        </div>
+
+        <div class="px-6">
+          <div
+            class="py-3 px-[18px] rounded-lg text-sm text-[#E11212] flex items-center"
+            style={{
+              background: 'linear-gradient(139deg, #FFEEEE 0%, #FFDDDD 100%)'
+            }}
+          >
+            <img src={iconTips} class="w-[22px] h-[22px] mr-2.5" />
+            你尚未达到开通直播的条件！请立即去开通。
+          </div>
+
+          <div class="mt-8 flex justify-between">
+            <div
+              class="w-[334px] rounded-[10px] px-7 py-7"
+              style={{
+                boxShadow: '0px 2px 10px 0px rgba(0,0,0,0.1000)'
+              }}
+            >
+              <div class="flex justify-between items-center">
+                <span class="text-2xl text-[#666]">
+                  <i class="text-[#E32121]">*</i>粉丝数
+                </span>
+                <div class="text-2xl text-[#999] font-medium flex items-center">
+                  <span class="text-4xl text-black leading-none">
+                    {this.users?.fansNum}
+                  </span>
+                  <span>/</span>
+                  <span class="mt-1">{this.fansNum}</span>
+                </div>
+              </div>
+              <div class="relative h-3.5 mt-7">
+                <div class="absolute w-full h-full bg-[#E9E9E9] z-10 rounded-lg" />
+                <div
+                  class="absolute h-full bg-[#FFA449] z-20 rounded-lg"
+                  style={{
+                    width: this.getRate(this.users?.fansNum, this.fansNum)
+                  }}
+                />
+              </div>
+            </div>
+
+            <div
+              class="w-[334px] rounded-[10px] px-7 py-7"
+              style={{
+                boxShadow: '0px 2px 10px 0px rgba(0,0,0,0.1000)'
+              }}
+            >
+              <div class="flex justify-between items-center">
+                <span class="text-2xl text-[#666]">
+                  <i class="text-[#E32121]">*</i>课程数
+                </span>
+                <div class="text-2xl text-[#999] font-medium flex items-center">
+                  <span class="text-4xl text-black leading-none">
+                    {this.users?.expTime}
+                  </span>
+                  <span>/</span>
+                  <span class="mt-1">{this.overClassNum}</span>
+                </div>
+              </div>
+              <div class="relative h-3.5 mt-7">
+                <div class="absolute w-full h-full bg-[#E9E9E9] z-10 rounded-lg" />
+                <div
+                  class="absolute h-full bg-[#2DC7AA] z-20 rounded-lg"
+                  style={{
+                    width: this.getRate(this.users?.expTime, this.overClassNum)
+                  }}
+                />
+              </div>
+            </div>
+          </div>
+
+          <div class="mt-20">
+            <h2 class="text-2xl text-[#333] mb-4">直播</h2>
+            <div class="text-lg text-[#999]">
+              开通直播功能后，您可以创建自己的直播间开启直播。
+            </div>
+
+            <img src={liveBg} class="w-[422px] m-auto pt-16" />
+          </div>
+
+          <div class="mt-20 mb-14">
+            <h2 class="text-2xl text-[#333] mb-4">直播课</h2>
+            <div class="text-lg text-[#999]">
+              您可制定教学方案设置直播课程，学员购买后，您可在直播间对购买直播课的学员进行直播教学，直播课程无人数上限，可极大的提高课程收入。
+            </div>
+
+            <img src={liveClass} class="w-[422px] m-auto pt-16" />
+          </div>
+        </div>
+
+        <ElDialog
+          modelValue={this.openStatus}
+          onUpdate:modelValue={val => (this.openStatus = val)}
+          closeOnClickModal={false}
+          closeOnPressEscape={false}
+        >
+          <div class="text-center">
+            <img src={openLive} class="w-[290px] m-auto" />
+            <p class="text-xl font-medium text-[#333] pt-7 pb-8">
+              开通成功，快去创建直播课吧
+            </p>
+
+            <ElButton
+              type="primary"
+              round
+              class="!w-44 !h-12 m-auto"
+              onClick={() => {
+                this.openStatus = false
+                this.$router.replace('/userInfo/liveOperation?type=create')
+              }}
+            >
+              创建直播课
+            </ElButton>
+          </div>
+        </ElDialog>
+      </div>
+    )
+  }
+})