| 
					
				 | 
			
			
				@@ -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> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    ) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+}) 
			 |