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