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

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-semibold 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">
          {!this.btnStatus && (
            <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={['flex justify-between', !this.btnStatus && 'mt-8']}>
            <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-semibold 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-semibold 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-semibold 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>
    )
  }
})