<template>
  <BaseContainer class="single-special">
    <NavBar :title="navTitle" />
    <view class="detail-wrap" v-if="special.id">
      <!-- 播放器 -->
      <view class="header" :style="{ height: playerHeight + 'px' }">
        <image :src="special.image" alt="封面" />
      </view>
      <view v-if="special_validity == -1" class="validity">
        <template v-if="special.validity">课程有效期为{{ special.validity }}天，过期后需重新购买哦！</template>
        <template v-else>课程永久有效哦！</template>
      </view>
      <view v-else-if="special_validity == 0" class="validity">课程永久有效哦！</view>
      <view v-else-if="special_validity > 0" class="validity">
        课程有效期剩余{{
        special_validity | formatValidity
        }}，过期后需重新购买哦！
      </view>
      <view class="special-attr">
        <view class="title">{{ special.title }}</view>
        <view class="label">
          <view v-for="(item, index) in special.label" :key="index">{{
            item
            }}</view>
        </view>
        <view class="money-button">
          <view class="money">
            <template v-if="special.pay_type">
              <view><span>￥</span>{{ special.money }}</view>
              <view>￥{{ special.member_money }}</view>
            </template>
            <view v-else>免费</view>
          </view>
          <view class="button" @click="handleCreateSharePoster">
            <i class="iconfont iconfenxiang"></i>
            <view>分享</view>
          </view>
          <view class="button" @click="collect">
            <i :class="[
              'iconfont',
              special.collect ? 'iconshoucang2' : 'iconshoucang11',
            ]"></i>
            <view>{{ special.collect ? "已收藏" : "收藏" }}</view>
          </view>
        </view>
      </view>
      <!-- 群聊 -->
      <view v-if="special.service_code" class="wechat">
        <view class="group-chat">
          <view>和小伙伴一起学习，有老师答疑哦~</view>
          <button type="button" @click="groupChartShow = true">加入群聊</button>
        </view>
      </view>
      <!-- 学习人数、讲师 -->
      <view class="learner-teacher">
        <view v-if="record.length" class="learner">
          <view>
            <image v-for="(item, index) in record" :key="index" :src="item.avatar" alt="" />
          </view>
          已有{{ recordCoujnt }}人学习
        </view>
        <navigator v-if="lecturer" class="teacher" :url="`/pages/merchant/teacher_detail?id=${special.lecturer_id}`">
          <view>
            <image :src="lecturer.lecturer_head" :alt="lecturer.lecturer_name" />
          </view>
          <view class="lecturer-body">
            <view>{{ lecturer.lecturer_name }}</view>
            <view v-if="lecturer.label.length" class="label">
              <view v-for="(item, index) in lecturer.label" :key="index">{{
                item
                }}</view>
            </view>
          </view>
          <i class="iconfont iconxiangyou"></i>
        </navigator>
      </view>
      <!-- 关联资料 -->
      <view v-if="specialDownload.length" class="material">
        <navigator v-for="item in specialDownload" :key="item.id" :url="`/pages/special/data_details?id=${item.id}`">
          <view>
            <image :src="item.image" alt="" mode="aspectFit" />
          </view>
          <view>
            <view>{{ item.title }}</view>
            <view v-if="item.pay_type" class="money">
              ￥<span>{{ item.money }}</span>
            </view>
            <view v-else>免费</view>
            <view>
              <view>{{ item.ficti + item.sales }}人已下载</view>
              <button type="button">去下载</button>
            </view>
          </view>
        </navigator>
      </view>
      <!-- 拼团人数 -->
      <view v-if="special.is_pink" class="group-buy">
        <view v-if="specialGroupLists.length" class="marquee">
          <i class="iconfont iconshengyinyinliang"></i>
          <view>已拼{{ specialGroupLists.length }}件</view>
          <view class="swiper-container">
            <view class="swiper-wrapper">
              <view v-for="(item, index) in specialGroupLists" :key="index" class="swiper-slide">
                {{ item.nickname }}拼团成功
              </view>
            </view>
          </view>
        </view>
        <view v-if="specialPinkLists.length" class="list">
          <view class="item" v-for="(item, index) in specialPinkLists" :key="index">
            <view>
              <image :src="item.avatar" alt="" />
            </view>
            <view>{{ item.nickname }}</view>
            <view>
              <view>
                还差<span>{{ item.num }}人</span>成团
              </view>
              <view>剩余 {{ item.duration | format }}</view>
            </view>
            <button type="button" @click="goPink(item.id, item.uid)">
              去拼单
            </button>
          </view>
        </view>
      </view>
      <!-- 拼团玩法 -->
      <view v-if="special.is_pink" class="group-way">
        <view class="way-title">拼团玩法</view>
        <view class="list">
          <view class="item">开团/参团</view>
          <view class="item">邀请好友</view>
          <view class="item">满员发货</view>
        </view>
      </view>
      <!-- 导航 -->
      <view class="tabbar">
        <view class="item" :class="{ on: tabActive === 1 }" @click="tabActive = 1">详情</view>
        <view class="item" v-if="specialTest1.length" :class="{ on: tabActive === 2 }" @click="tabActive = 2">
          练习
        </view>
        <view class="item" v-if="specialTest2.length" :class="{ on: tabActive === 3 }" @click="tabActive = 3">
          考试
        </view>
        <view class="item" v-if="comment_switch" :class="{ on: tabActive === 4 }" @click="tabActive = 4">
          评价({{ whole }})
        </view>
      </view>
      <!-- 详情 -->
      <mp-html v-if="tabActive === 1" container-style="padding: 30rpx;background: #ffffff;"
        :content="special.abstract"></mp-html>
      <!-- 练习 -->
      <view v-if="specialTest1.length && tabActive === 2" class="exercise">
        <view v-for="item in specialTest1" :key="item.id" class="item">
          <view class="title">
            <i v-if="!isPay" class="iconfont iconsuozi"></i>{{ item.title }}
          </view>
          <view class="group">
            <view class="progress">
              <view :style="{ width: item.rate + '%' }"></view>
            </view>
            <view>{{ item.rate }}%</view>
            <view>{{ item.answer }}人已答题</view>
            <button type="button" @click="goQuestion(item)">
              <i class="iconfont icon-19-lianxi"></i>练习
            </button>
          </view>
        </view>
      </view>
      <!-- 考试 -->
      <view v-if="specialTest2.length && tabActive === 3" class="question">
        <view class="item" v-for="item in specialTest2" :key="item.id">
          <view class="head">
            <view>
              <image :src="item.image" alt="" />
            </view>
            <view>
              <view class="title">{{ item.title }}</view>
              <view class="group">
                <view>共{{ item.item_number }}题</view>
                <button v-if="isPay" type="button" @click="goQuestion(item)">
                  <i class="iconfont icon-19-lianxi"></i>答题
                </button>
                <view v-else>
                  <i class="iconfont iconsuozi"></i>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- 评价 -->
      <view v-if="tabActive === 4" class="evaluate">
        <view>
          <view class="score">
            <view>
              <span>{{ score }}</span>分
            </view>
            <view>课程评分</view>
          </view>
          <button type="button" class="flex-center flex" @click="userEvaluate">我要评价</button>
        </view>
        <EvaluateList :evaluate-list="replyList" />
        <view v-if="evaluateFinished && replyList.length" class="finished">已全部加载完</view>
        <view v-if="evaluateFinished && !replyList.length" class="empty">
          <image :src="getImgPath('/wap/first/zsff/images/empty.png')" alt="暂无评价" />
          <view>暂无评价</view>
        </view>
      </view>
      <!-- 底部按钮 -->
      <view class="footer">
        <view class="button" @click="goHome">
          <image :src="getImgPath('/wap/first/zsff/images/home.png')" alt="首页" />
          <view>首页</view>
        </view>
             <!-- 抖音客服 -->
      <view class="link"  v-if="TOUTIAO_STATUS">
          <view class="cont">
            <view>        
              <button class="im"  open-type="im" :data-im-id="imId" bindim="imCallback"  binderror="onimError"> 
              <image :src="getImgPath('/wap/first/zsff/images/chat.png')" />
                客服</button>
            </view>
          </view>
        </view>
        <view class="button" @click="customerService" v-else>
          <image :src="getImgPath('/wap/first/zsff/images/chat.png')" alt="客服" />
          <view>客服</view>
        </view>
        <view class="button" @click="buy(1)">
          <image :src="getImgPath('/wap/first/zsff/images/link.png')" alt="送朋友" />
          <view>送朋友</view>
        </view>
        <view class="learn-btn">
          <button v-if="gift" type="button" @click="buy(4)">领取课程</button>
          <template v-else>
            <button v-if="isPay || (!special.member_pay_type && is_member)" type="button" class="flex flex-center"
              @click="buy(5)">
              {{
              special.pay_type || special.member_pay_type
              ? "去学习"
              : "免费学习"
              }}
            </button>
            <template v-else>
              <button v-if="special.profile.is_try" @click="handleTry">试{{ special.light_type === 2 ? '听' : '看'
                }}</button>
              <template v-if="special.is_pink">
                <button v-if="isPink" type="button">查看拼团</button>
                <template>
                  <view class="video_footer_btn_left acea-row row-column row-center-wrapper" @click="buy(3)">
                    <text class="video_footer_btn_left_pic">￥{{ special.pink_money }}</text>
                    <text class="video_footer_btn_left_num">{{ special.pink_number }}人团</text>
                  </view>
                  <!-- <button type="button" @click="buy(3)">
                    ￥{{ special.pink_money }}
                    <view>{{ special.pink_number }}人团</view>
                  </button> -->
                  <button type="button" @click="buy(2)" style="font-weight:600;">
                    ￥{{ is_member ? special.member_money : special.money }}
                    <view>单独购</view>
                  </button>
                </template>
              </template>
              <button v-else type="button" @click="buy(2)">立即购买</button>
            </template>
          </template>
        </view>
      </view>

      <!-- 遮罩层 -->
      <view :class="{
        mask:
          payDialogOpen ||
          shareShow ||
          groupChartShow ||
          dialogShow ||
          certificateImage,
      }" @touchmove.prevent @click="maskClick"></view>
      <!-- 支付弹窗 -->
      <PayDiaLog :open.sync="payDialogOpen" :money="parseFloat(money)" :now_money="nowMoney" :special_id="special.id"
        :link_pay_uid="link_pay_uid" :pay_type_num="pay_type_num" :pink-id="pinkId" :is-wechat="isWechat"
        :is-alipay="isAlipay" :is-balance="isBalance" :template-id="templateIds" :wxpay-h5="wxpayH5" @change="changeVal"
        :isMember="!!is_member" :memberMoney="Number(special.member_money)" :isMembership="true"
        @fatherMethod="fatherMethod" />
      <!-- 分享海报 -->
      <image v-if="shareImage && shareShow" class="share-dialog" :src="shareImage" alt="" />
      <!-- 加入群聊 -->
      <view v-if="groupChartShow" class="group-chart-dialog">
        <image :src="special.service_code" alt="" />
        <view>
          <view>长按扫码</view>
          <view>加客服好友进群</view>
        </view>
      </view>

      <!-- 评价弹窗 -->
      <EvaluateDialog :dialog-show="dialogShow" :rate-value="rateValue" :image-list="imageList"
        @rate-change="rateChange" @image-upload="imageUpload" @image-delete="imageDelete"
        @evaluate-submit="evaluateSubmit" />
      <!-- 兑换码 -->
      <view class="exchange-guide" v-if="isBatch && !isPay" @click="getexchange">
        <i class="iconfont iconicon-life-gift"></i> 兑换码 <i class="iconfont iconxiangyou"></i>
      </view>
      <!-- 完课证书 -->
      <image :src="certificateImage" v-if="certificateImage" class="certificate-image" alt="" />
      <!-- 弹幕 -->
      <view v-if="barrageList.length" class="barrage">
        <view>
          <image :src="barrageList[barrage_index].avatar" alt="" />
        </view>
        <view>
          {{ barrageList[barrage_index].nickname }}
          {{ barrageList[barrage_index].status_name }}
        </view>
      </view>

      <!-- 分享返佣 -->
      <RebateGuide v-if="rebateMoney" :rebate-money="rebateMoney" @rebate-action="rebateAction" />

      <TkiQrcode loadMake v-if="isQrcodeCanvasVisable" ref="qrcode" :showLoading="false" :val="qrcodeText"
        @result="handleQrcodeCreateSuccess" />
      <canvas canvas-id="poster" v-if="isPosterCanvasVisable" class="poster-canvas" />
    </view>
    <canvas canvas-id="poster2" v-if="isPosterCanvasVisable2" class="poster-canvas2" />
  </BaseContainer>
</template>

<script>
  import { getLecturer, getRebateAmount } from "@/api/auth";
  import {
    addLearningRecords,
    collectSpecial,
    // getBarrageList,
    getInspectData,
    getLearningRecords,
    getSingleSpecialDetail,
    getSpecialCertificate,
    getSpecialCertificateInfo,
    getSpecialMaterial,
    getSpecialPinkList,
    getSpecialReplyData,
    getSpecialReplyList,
    getSpecialTemplateIds,
    getTopicSpecialTestPaper,
    receiveGift,
    saveSpecialViewing,
    setBarrageIndex,
    validitySpecial,
    submitSpecialComment,
    getVideoPlayCredentials,
    aliPayApp,
    aliPayWap,
    delSpecialOrder,
  } from "@/api/special";
  import { getGroupList } from "@/api/special";
  import userInfoMixin from "@/mixins/userInfo";
  import EvaluateList from "@/components/EvaluateList/index.vue";
  import EvaluateDialog from "@/components/EvaluateDialog/index.vue";
  import PayDiaLog from "@/components/PayDialog/index.vue";
  import RebateGuide from "@/components/RebateGuide/index.vue";
  import dayjs from "dayjs";
  import mpHtml from "mp-html/dist/uni-app/components/mp-html/mp-html.vue";
  import posterMixin from "@/mixins/poster";
  import { getAuthInfo } from "@/api/auth";
  import { CUSTOMER_DETAIL_TYPE, CUSTOMER_SUPPORT_TYPE } from "@/constants/customer-type";

  export default {
    mixins: [userInfoMixin, posterMixin],
    components: {
      EvaluateList,
      EvaluateDialog,
      PayDiaLog,
      RebateGuide,
      mpHtml,
    },
    filters: {
      format(time, sibling) {
        let duration = dayjs.duration(time * 1000);
        let hours = duration.hours();
        let siblingHours = sibling ? dayjs.duration(sibling * 1000).hours() : 0;

        return dayjs({
          h: hours,
          m: duration.minutes(),
          s: duration.seconds(),
        }).format((hours || siblingHours ? "HH:" : "") + "mm:ss");
      },
      formatValidity(time) {
        let duration = dayjs.duration(Number(time), "seconds");
        let days = Math.floor(duration.asDays());
        let hours = duration.hours();
        let minutes = duration.minutes();
        return (
          (days ? days + "天" : "") +
          (hours ? hours + "小时" : "") +
          minutes +
          "分钟"
        );
      },
    },
    data() {
      const { screenWidth } = this.$util.getSystemInfo();
      const playerHeight = Math.floor((screenWidth * 9) / 16);
      return {
        navTitle: "",
        special: {},
        poster_image: "",
        site_url: "",
        site_name: "",
        isPay: false,
        is_member: false,
        gift: false,
        isBatch: false,
        isPink: false,
        barrageShowTime: 0,
        barrage_index: 0,
        barrageList: [],
        record: [], // 学习人员
        recordCoujnt: "", // 学习人数
        lecturer: null,
        specialGroupLists: [], // 拼团信息
        specialPinkLists: [], // 拼团人员
        tabActive: 1,
        specialTest1: [], // 关联练习
        specialTest2: [], // 关联考试
        evaluatePage: 1,
        evaluateLimit: 16,
        replyList: [], // 评价列表
        payDialogOpen: false, // 是否显示支付弹窗
        money: 0,
        nowMoney: 0,
        link_pay_uid: 0,
        pay_type_num: -1,
        pinkId: 0,
        isWechat: false,
        isAlipay: false,
        isBalance: false,
        templateIds: "", // 订阅模板id
        wxpayH5: false,
        shareImage: "",
        shareShow: false,
        groupChartShow: false,
        loginShow: false,
        score: 0,
        whole: 0,
        dialogShow: false,
        rateValue: 5,
        imageList: [],
        orderId: 0,
        evaluateLoading: false,
        evaluateFinished: false,
        playerHeight,
        currentTime: 0,
        duration: 0,
        certificateImage: "",
        specialDownload: [], // 关联资料
        comment_switch: false,
        special_validity: -1,
        tryShow: true,
        seeked: false,
        rebateMoney: 0,
        id: 0,
        isOpenWeixing: false,
        gift_uid: 0,
        gift_order_id: 0,
        gift: 0,
        spread_uid: 0,
        isPosterCanvasVisable2: false,
        TOUTIAO_STATUS:false,
        imId:''
      };
    },
    computed: {
      url() {
        return this.isWechat ? "/pages/index/login" : "/pages/login/phone_check";
      },
      range() {
        return Math.ceil((this.currentTime / this.duration) * 100);
      },
      shareQrcodeData() {
        return {
          spread_uid: this.userInfo?.uid,
          id: this.id,
        };
      },
    },
    onUnload() {
      clearInterval(this.timerFlag);
    },
    onShow() {
      if (this.isOpenWeixing && this.orderId) {
        this.$util.wxh5PayIsSuccess(this.orderId, 1, this);
        this.isOpenWeixing = false;
      }
      this.getData();
    },
    onLoad(options) {
      // const { id } = this.$util.mergeLaunchParams(options);

      let id = 0;
      const parmData = this.$util.mergeLaunchParams(options)
      if (parmData.id) id = parmData.id;
      if (parmData.goid) {
        this.gift = 1
        this.spread_uid = parmData.guid
        this.gift_order_id = parmData.goid
        this.gift_uid = parmData.guid
      }
      this.id = id;

      this.getData().then(() => {
        this.lecturerDetails();

        if (this.special.is_pink) {
          this.groupLists();
          this.pinkIngLists();
          this.getBarrageList();
        }

        if (this.comment_switch) {
          this.specialReplyData();
          this.specialReplyList();
        }

      });

      this.learningRecords();
      this.addLearningRecords();
      this.specialDataDownload();
      this.specialTestPaper(1);
      this.specialTestPaper(2);
      this.$util.checkLogin(this.inspect, '', 1);
      this.rebateAmount();
      this.validitySpecial();
      this.getAuthInfo();
      /* #ifdef MP-TOUTIAO */
      this.TOUTIAO_STATUS = true;
      /* #endif */
    },
    onReachBottom() {
      if (this.tabActive === 4) {
        this.specialReplyList();
      }
    },
    created() {
      //#ifdef MP-WEIXIN
      wx.showShareMenu({
        withShareTicket: true,
        menus: ['shareAppMessage', 'shareTimeline']
      });
      //#endif
    },
    // 分享朋友
    onShareAppMessage() {
      return { title: this.special.title, path: '/pages/special/details?id=' + this.special_id+'&spread_uid='+(this.userInfo.uid??0)  }
    },
    methods: {

      getexchange() {
        this.$util.checkLogin(() => {
          uni.navigateTo({
            url: `/pages/special/exchange?special_id=${this.id}`
          });
        }, true);
      },
      fatherMethod() {
        this.payDialogOpen = false;
      },
      handleTry: function () {
        this.$util.checkLogin(() => {
          this.$nextTick(() => {
            if (this.special.light_type === 1) {
              uni.navigateTo({
                url: "/pages/special/single_text_detail?try=1&id=" + this.id,
              });
            } else {
              uni.navigateTo({
                url: "/pages/special/single_con_detail?try=1&id=" + this.id,
              });
            }
          });
        })
      },
      async getAuthInfo() {
        const res = await getAuthInfo();
        const { nowMoney, isWechat, isAlipay, isBalance, wxpayH5 } = res.data;
        Object.assign(this, {
          nowMoney,
          isWechat,
          isAlipay,
          isBalance,
          wxpayH5,
        });
      },
      getData() {
        return getSingleSpecialDetail(this.id, this.gift_uid, this.gift_order_id, this.gift, this.spread_uid).then(({ data }) => {
          const {
            special,
            pinkId,
            isBatch,
            site_url,
            is_member,
            isPink,
            isPay,
            viewing_time,
            orderId,
            link_pay,
            gift,
            link_pay_uid,
            comment_switch,
            BarrageShowTime,
            barrage_index,
            d_im
          } = data;
          Object.assign(this, {
            navTitle: special.title,
            special: special.special,
            pinkId,
            isBatch,
            site_url,
            is_member,
            isPink,
            isPay,
            viewing_time,
            orderId,
            gift,
            link_pay_uid,
            comment_switch: !!comment_switch,
            BarrageShowTime,
            barrage_index: barrage_index || 0,
            imId:d_im
          });
        }).catch((err) => {
          this.$util.showMsg(err.msg);
          setTimeout(() => {
            // #ifndef MP
            uni.reLaunch({
              url: '/pages/index/index'
            })
            // #endif
            // #ifdef MP
            uni.navigateBack({
              fail: (err) => {
                uni.switchTab({
                  url: '/pages/index/index'
                });
              }
            })
            // #endif
          }, 2000);

        });
      },
      // 学习人数
      learningRecords() {
        getLearningRecords(this.id).then(({ data }) => {
          this.record = data.record;
          this.recordCoujnt = data.recordCoujnt;
        });
      },
      // 讲师信息
      lecturerDetails() {
        getLecturer(this.special.mer_id).then(({ data }) => {
          this.lecturer = data;
        });
      },
      // 拼团消息
      groupLists() {
        getGroupList(this.id).then(({ data }) => {
          this.specialGroupLists = data;
        });
      },
      // 拼团列表
      pinkIngLists() {
        getSpecialPinkList(this.id).then(({ data }) => {
          data.forEach((item) => {
            item.duration = 0;
            item.stop_time = item.stop_time * 1000;
          });
          this.specialPinkLists = data;
        });
      },
      // 练习、考试
      specialTestPaper(type) {
        getTopicSpecialTestPaper(this.id, type).then(({ data }) => {
          if (type === 1) {
            data.forEach((item) => {
              item.rate = Math.floor((item.done / item.item_number) * 100);
            });
          }
          this["specialTest" + type] = data;
        });
      },
      // 评价状态
      specialReplyData() {
        getSpecialReplyData(this.id).then(({ data }) => {
          this.score = data.score;
          this.whole = data.whole;
        });
      },
      // 评价列表
      async specialReplyList() {
        if (this.evaluateLoading || this.evaluateFinished) return;
        this.evaluateLoading = true;

        try {
          const { data } = await getSpecialReplyList(
            this.id,
            this.evaluatePage++,
            this.evaluateLimit
          );
          this.evaluateLoading = false;
          this.replyList = this.replyList.concat(data);
          this.evaluateFinished = this.evaluateLimit > data.length;
        } catch (err) {
          this.evaluateLoading = false;
        }
      },
      validitySpecial() {
        validitySpecial(this.id).then(({ data }) => {
          this.special_validity = data.validity;
        });
      },
      // 生成分享海报
      handleCreateSharePoster() {
        this.poster_image = this.special.poster_image;
        this.createSharePoster("special", {
            id: this.special_id,
              spread_uid: this.userInfo?.uid,
              url: 'pages/special/single_details'
            });
      },
      // 收藏、取消收藏
      collect() {
        this.$util.checkLogin(() => {
          collectSpecial(this.id).then(() => {
            this.special.collect = !this.special.collect;
            this.$util.showMsg(
              this.special.collect ? "收藏成功" : "取消收藏成功"
            );
          });
        }, true);
      },
      changeVal: function (opt) {
        if (typeof opt !== "object") {
          opt = {};
        }
        var action = opt.action || "";
        var value = opt.value || "";
        this[action] && this[action](value);
      },
      // 点击遮罩层
      maskClick() {
        this.shareShow = false;
        this.groupChartShow = false;
        this.dialogShow = false;
        this.certificateImage = "";
      },
      // 立即购买
      buy(type) {
        this.pay_type_num = type;
        this.$util.checkLogin(() => {
          switch (type) {
            case 1:
              if (!this.special.pay_type) {
                return this.$util.showMsg("免费的不可以赠送哦");
              }
              if (this.is_member && !this.special.member_pay_type) {
                return this.$util.showMsg("会员价免费的不可以赠送哦");
              }
              this.money = this.special.money;
              this.payDialogOpen = true;
              break;
            case 2:
              this.money = this.is_member
                ? this.special.member_money
                : this.special.money;
              this.payDialogOpen = true;
              break;
            case 3:
              this.money = this.special.pink_money;
              this.payDialogOpen = true;
              break;
            case 4:
              uni.showLoading({ mask: true });
              receiveGift(this.orderId)
                .then(({ msg }) => {
                  uni.hideLoading();
                  this.$util.showMsg(msg);
                  uni.navigateTo({
                    url: "/pages/special/grade_special",
                  });
                })
                .catch(({ msg }) => {
                  this.$util.showMsg(msg);
                  uni.hideLoading();
                });

              break;
            case 5:
              if (this.special.light_type === 1) {
                uni.navigateTo({
                  url: "/pages/special/single_text_detail?try=0&id=" + this.id,
                });
              } else {
                uni.navigateTo({
                  url: "/pages/special/single_con_detail?try=1&id=" + this.id,
                });
              }
              break;
            default:
              break;
          }
        }, true);
      },
      // 支付方式回调
      pay_order: function (data) {
        this.orderId = data.data.result.orderId || "";
        switch (data.data.status) {
          case "PAY_ERROR":
          case "ORDER_EXIST":
          case "ORDER_ERROR":
            this.extendOrder(data.msg);
            break;
          case "WECHAT_PAY":
            // this.wechatPay(data.data.result.jsConfig);
            this.$util.weixinAppPay(data.data.result.jsConfig,this);
            break;
          case "WECHAT_H5_PAY":
            this.payDialogOpen = false;
            this.$util.wechatH5Pay(data.data.result.jsConfig, this);
            break;
          case "WECHAT_ROUTINE_PAY":
            this.$util.wechatRoutinePay(data.data.result.jsConfig, this);
            break;
          case "SUCCESS":
            this.successOrder(data.msg);
            break;
          case "ZHIFUBAO_PAY":
            this.aliPay(data.data.result, "special");
            break;
          case 'TOUTIAO_PAY':
            this.$util.toutiaoPay(data.data.result.jsConfig, this);
            break;
          case 'KUAISHOU_PAY':
            this.$util.kuaishouPay(data.data.result.jsConfig, this);
            break;
        }
      },
      aliPay(msn, type) {
        this.$util.aliPay(msn, type, this);
      },
      // 微信支付
      wechatPay: function (config) {
        this.$util.weixinpay(config, this);
      },
      // 支付成功
      successOrder: function (msg) {
        this.$util.showMsg(msg ? msg : "支付成功");
        this.payDialogOpen = false;
        switch (parseInt(this.pay_type_num)) {
          case 1:
            uni.navigateTo({
              url: `/pages/special/gift_special?orderId=${this.orderId}`,
            });
            break;
          case 2:
            this.isPay = true;
            this.payment = true;
            break;
          case 3:
            uni.navigateTo({
              url: `/pages/special/pink?orderId=${this.orderId}`,
            });
            break;
        }

        validitySpecial(this.id).then((res) => {
          this.special_validity = res.data.validity;
        });
      },
      updateMaterialStatus() {
        this.otherLoading = false;
        this.otherLoaded = false;
        this.where.page = 1;
        this.$set(this, "otherTaskList", []);
        this.getCourseList();
      },
      // 支付未完成
      extendOrder: function (msg) {
        var that = this;
        if (typeof msg === "object") {
          if (msg.errMsg === "chooseWXPay:cancel") {
            msg = "微信支付取消";
          } else {
            msg = "支付失败";
          }
        } else {
          msg = "支付失败";
        }
        this.$util.showMsg(msg, "error");
        that.payDialogOpen = false;
        if (that.orderId) {
          delSpecialOrder(that.orderId).then((res) => {
          });
        }
      },
      // 评分
      rateChange(value) {
        this.rateValue = value;
      },
      // 上传图片
      imageUpload(path) {
        this.imageList.push(path);
      },
      // 删除图片
      imageDelete(index) {
        this.imageList.splice(index, 1);
      },
      // 提交评价
      async evaluateSubmit(text) {
        uni.showLoading({ mask: true });
        try {
          const { msg } = await submitSpecialComment(this.id, {
            satisfied_score: this.rateValue,
            comment: text.trim(),
            pics: this.imageList,
          });
          uni.hideLoading();

          this.$util.showMsg(msg);
          this.dialogShow = false;
          this.specialReplyData();
          this.evaluateFinished = false;
          this.evaluatePage = 1;
          this.replyList = [];
          this.specialReplyList();
        } catch (err) {
          uni.hideLoading();
          this.$util.showMsg(err.msg);
        }
      },
      // 我要评价
      userEvaluate() {
        this.$util.checkLogin(() => {
          if (!this.isPay) {
            return this.$util.showMsg("购买学习后既可进行评价");
          }
          this.dialogShow = true;
        }, true);
      },
      // 去练习、答题
      goQuestion(question) {
        this.$util.checkLogin(() => {
          if (question.is_pay || this.isPay) {
            let url =
              question.type === 1
                ? "/pages/topic/problem_index"
                : "/pages/special/question_index" + "?id=" + question.id;
            uni.navigateTo({
              url,
            });
          } else {
            this.payDialogOpen = true;
          }
        }, true);
      },
      // 客服
      customerService() {
        this.$util.goSupport(CUSTOMER_DETAIL_TYPE.GOOD, CUSTOMER_SUPPORT_TYPE.SPECIAL, this.id, this.special.mer_id);
      },
      // 首页
      goHome() {
        uni.switchTab({
          url: "/pages/index/index",
        });
      },

      // 控制栏自动隐藏
      onPlayerHideBar: function () {
        this.tryShow = true;
      },
      // 控制栏自动显示
      onPlayerShowBar: function () {
        this.tryShow = false;
      },

      showLoginPage() {
        this.$util.jumpLogin(this);
      },
      // 订阅通知模板id
      getTemplateIds() {
        getSpecialTemplateIds(this.pay_type_num, this.id).then(({ msg }) => {
          this.templateIds = msg;
        });
      },
      // 记录浏览人数
      addLearningRecords() {
        addLearningRecords(this.id);
      },
      // 去拼团
      goPink(id, uid) {
        if (uid === this.uid && this.isPink) {
          uni.navigateTo({
            url: `/pages/special/pink?orderId=${this.orderId}&is_help=0&special_id=${this.id}&pink_id=${this.pinkId}`,
          });
        } else {
          uni.navigateTo({
            url: `/pages/special/pink?orderId=${this.orderId}&is_help=1&special_id=${this.id}&pink_id=${id ? id : this.pinkId
              }`,
          });
        }
      },
      // 播放记忆
      viewing(currentTime) {
        saveSpecialViewing({
          special_id: this.id,
          task_id: 0,
          total: this.duration * 1e3,
          viewing_time: currentTime * 1e3,
          percentage: Math.floor((currentTime / this.duration) * 100),
        });
      },
      // 发放证书
      inspect() {
        getInspectData(this.id, 1).then(() => {
          uni.showModal({
            title: "提示",
            content: "恭喜您达到发放证书要求，是否领取？",
            okText: "领取",
            success: ({ confirm }) => {
              if (!confirm) return;
              this.getTheCertificate();
            },
          });
        });
      },
      // 领取证书
      getTheCertificate() {
        getSpecialCertificate(this.id).then(({ msg }) => {
          this.$util.showMsg("领取成功\n证书制作中...");
          this.viewCertificate(msg);
        });
      },
      // 证书信息
      viewCertificate(id) {
        getSpecialCertificateInfo(id).then(({ data }) => {
          // this.createCertificate(data);
          this.renderProductPoster2(data);
        });
      },
      // 加载图片
      loadImage: function (path) {
        return new Promise(function (resolve, reject) {
          var image = new Image();
          image.crossOrigin = "anonymous";
          image.src = path + "?" + new Date().getTime();
          image.onload = function () {
            resolve(image);
          };
          image.onerror = function () {
            reject("error-image");
          };
        });
      },
      // 制作证书
      async renderProductPoster2(data) {
        this.isPosterCanvasVisable2 = true
        let id = "poster2"
        let task1 = this.$util.getImagePath(data.certificate.background);
        let task2 = this.$util.getImagePath(data.certificate.qr_code);
        const [bgPath, codePath] = await Promise.all([task1, task2]);
        let WIDTH = 600;
        let HEIGHT = 850;
        let site_name = "知识付费"
        let context = uni.createCanvasContext(id);

        context.drawImage(bgPath, 0, 0);
        context.drawImage(codePath, 220, 557, 160, 160);

        context.fillStyle = "rgba(255, 255, 255, 0.8)";
        context.fillRect(220, 724, 160, 36);

        context.font = "bold 34px sans-serif";
        context.textAlign = "center";
        context.fillStyle = "#29466D";
        context.fillText(data.nickname, 300, 296);

        context.font = "24px sans-serif";
        context.fillText(
          "颁发时间：" +
          dayjs(data.add_time * 1000).format("YYYY.MM.DD"),
          300,
          490
        );

        context.font = "20px sans-serif";
        context.fillStyle = "#666666";
        context.fillText("长按二维码查看", 300, 748);

        context.font = "28px sans-serif";
        context.textAlign = "start";
        context.fillStyle = "#333333";

        let lineWidth = 0;
        let substringFrom = 0;
        let offsetTop = 364;
        for (let i = 0; i < data.certificate.explain.length; i++) {
          lineWidth += context.measureText(
            data.certificate.explain[i]
          ).width;
          if (lineWidth > 434) {
            context.fillText(
              data.certificate.explain.substring(substringFrom, i),
              83,
              offsetTop
            );
            lineWidth = 0;
            substringFrom = i;
            offsetTop += 50;
          }
          if (i == data.certificate.explain.length - 1) {
            context.fillText(
              data.certificate.explain.substring(substringFrom, i),
              83,
              offsetTop
            );
          }
        }
        context.draw(true, () => {
          uni.canvasToTempFilePath(
            {
              canvasId: id,
              fileType: "png",
              destWidth: WIDTH,
              destHeight: HEIGHT,
              success: (res) => {
                this.isPosterCanvasVisable2 = false
                uni.previewImage({
                  current: 0,
                  urls: [res.tempFilePath],
                })
                context = null;
              },
              fail: (err) => {
                this.isPosterCanvasVisable2 = false
                context = null;
              },
            }
          );
        });
      },
      createCertificate: function (certificate) {
        var vm = this;
        $h.loadFFF();
        Promise.all([
          this.loadImage(certificate.certificate.background),
          this.loadImage(certificate.certificate.qr_code),
        ])
          .then(function (images) {
            var canvas = document.createElement("canvas");
            var context = canvas.getContext("2d");

            canvas.width = images[0].width;
            canvas.height = images[0].height;

            context.drawImage(images[0], 0, 0);
            context.drawImage(images[1], 220, 557, 160, 160);

            context.fillStyle = "rgba(255, 255, 255, 1)";
            context.fillRect(220, 724, 160, 36);

            context.font = "20px sans-serif";
            context.textAlign = "center";
            context.fillStyle = "#666666";
            context.fillText("长按二维码查看", 300, 748);

            context.font = "bold 34px sans-serif";
            context.fillStyle = "#29466D";
            context.fillText(certificate.nickname, 300, 296);

            context.font = "24px sans-serif";
            context.fillText(
              "颁发时间：" +
              moment(certificate.add_time * 1000).format("YYYY.MM.DD"),
              300,
              481
            );

            context.font = "28px sans-serif";
            context.textAlign = "start";
            context.fillStyle = "#333333";

            for (
              var i = Math.ceil(certificate.certificate.explain.length % 16);
              i--;

            ) {
              context.fillText(
                certificate.certificate.explain.substr(i * 16, 16),
                83,
                i * 40 + 370
              );
            }

            this.certificateImage = canvas.toDataURL("image/jpeg");
            canvas = null;
          })
          .catch(function (err) { });
      },
      // 弹幕
      getBarrageList() {
        getBarrageList(this.id).then(({ data }) => {
          let barrageLen = 0;
          this.barrageList = data;
          barrageLen = this.barrageList.length;
          if (!barrageLen) {
            return;
          }
          this.timerFlag = setInterval(() => {
            this.barrage_index++;
            if (this.barrage_index >= barrageLen) {
              this.barrage_index = 0;
            }
            setBarrageIndex(this.barrage_index);
          }, this.barrageShowTime * 1000);
        });
      },
      // 关联资料
      specialDataDownload() {
        getSpecialMaterial(this.id).then(({ data }) => {
          this.specialDownload = data;
        });
      },
      // 获取返佣金额
      rebateAmount() {
        getRebateAmount(this.id).then(({ data }) => {
          this.rebateMoney = data.brokeragePrice;
        });
      },
      rebateAction(value) {
        switch (value) {
          case "close":
            this.rebateMoney = 0;
            break;
          case "share":
            this.handleCreateSharePoster();
            break;
        }
      },
    },
  };
</script>

<style>
  page {
    background-color: #f5f5f5;
  }
</style>

<style scoped lang="scss">
  /* 轻课程 */
  .wechat {
    background: #ffffff;
  }

  .validity {
    padding-left: 30rpx;
    background: url(getAssetsPath("/wap/first/zsff/images/validity.png")) center/cover no-repeat;
    font-size: 26rpx;
    line-height: 80rpx;
    color: #ff6b00;
    border-radius: 40rpx 40rpx 0 0;
    margin-top: -40rpx;
    position: relative;
  }

  .detail-wrap {
    padding-bottom: calc(100rpx + var(--safe-bottom));
  }

  .single-special .certificate-image {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 56;
    width: 600rpx;

    transform: translate(-50%, -50%);
  }

  .single-special .finished,
  .single-special .loading {
    font-size: 28rpx;
    line-height: 100rpx;
    text-align: center;
    color: #bbb;
  }

  .single-special .fa-spin {
    animation: fa-spin 1s infinite linear;
  }

  .single-special .empty {
    padding-top: 50rpx;
    padding-bottom: 50rpx;
    background-color: #ffffff;
    font-size: 28rpx;
    text-align: center;
    color: #bbb;
  }

  .single-special .empty image {
    display: block;
    width: 414rpx;
    height: 305rpx;
    margin: 0 auto;
    pointer-events: none;
  }

  .single-special .prism-player .prism-big-play-btn {
    left: 50% !important;
    bottom: 50% !important;

    transform: translate(-50%, 50%);
  }

  .single-special .prism-player .prism-info-display {
    box-sizing: border-box;
  }

  .single-special .header {
    position: relative;
    /* height: 420rpx; */
  }

  .single-special .header>image {
    display: block;
    width: 100%;
    height: 100%;

    object-fit: cover;
  }

  .single-special .header .try {
    position: absolute;
    right: 30rpx;
    bottom: 30rpx;
    z-index: 12;
    padding: 11rpx 16rpx 11rpx 14rpx;
    border-radius: 23rpx;
    background-color: rgba(0, 0, 0, 0.6);
    font-size: 22rpx;
    line-height: 1;
    color: #ffffff;
    cursor: pointer;
  }

  .single-special .header .try .iconfont {
    margin-right: 8rpx;
    font-size: 24rpx;
  }

  .single-special .special-attr {
    padding: 20rpx 30rpx 30rpx;
    background-color: #ffffff;
  }

  .single-special .special-attr .title {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 36rpx;
    color: #333;
  }

  .single-special .special-attr .label {
    display: flex;

    flex-wrap: wrap;
    margin-top: 20rpx;
  }

  .single-special .special-attr .label view {
    flex-shrink: 0;
    height: 40rpx;
    padding-right: 12rpx;
    padding-left: 12rpx;
    border-radius: 3rpx;
    background-color: rgba(44, 142, 255, 0.06);
    font-size: 24rpx;
    line-height: 40rpx;
    color: #2c8eff;
  }

  .single-special .special-attr .label view view {
    margin-left: 12rpx;
  }

  .single-special .special-attr .money-button {
    display: flex;

    align-items: flex-end;
  }

  .single-special .special-attr .money {
    flex: 1;

    display: flex;

    align-items: center;
    font-weight: bold;
    font-size: 36rpx;
    color: #ff6b00;
  }

  .single-special .special-attr .money text {
    font-size: 24rpx;
  }

  .single-special .special-attr .money view:nth-child(2) {
    padding-right: 46rpx;
    margin-left: 8rpx;
    background: url(getAssetsPath("/wap/first/zsff/images/vip.png")) right center/46rpx 21rpx no-repeat;
    font-size: 28rpx;
    color: #282828;
  }

  .single-special .special-attr .button {
    font-family: inherit;
    font-weight: normal;
    font-size: 26rpx;
    line-height: normal;
    color: #999999;
    text-align: center;
  }

  .single-special .special-attr .button+.button {
    width: 3em;
    margin-left: 40rpx;
  }

  .single-special .special-attr .iconfont {
    font-size: 40rpx;
  }

  .single-special .special-attr .iconshoucang2 {
    color: #ff6b00;
  }

  .single-special .special-attr .button view {
    margin-top: 12rpx;
  }

  .single-special .group-chat {
    display: flex;

    align-items: center;
    padding: 12rpx 30rpx;
    border-radius: 12rpx;
    margin: 0 20rpx;
    background-color: #e2efff;
    font-size: 26rpx;
    color: #2c8eff;
  }

  .single-special .group-chat view {
    flex: 1;
  }

  .single-special .group-chat button {
    padding: 5rpx 20rpx;
    border-radius: 23rpx;
    background-color: #2c8eff;
    font-family: inherit;
    font-weight: normal;
    font-size: 24rpx;
    color: #f5f5f5;
  }

  .single-special .learner-teacher {
    padding: 30rpx;
    background-color: #ffffff;
  }

  .single-special .learner-teacher .learner {
    display: flex;

    justify-content: center;

    align-items: center;
    padding-top: 6rpx;
    padding-bottom: 6rpx;
    font-size: 24rpx;
    line-height: normal;
    color: #666;
  }

  .single-special .learner-teacher .learner view {
    flex-shrink: 0;
    margin-right: 20rpx;
    font-size: 0;
  }

  .single-special .learner-teacher .learner image {
    width: 50rpx;
    height: 50rpx;
    border: 1px solid #ffffff;
    border-radius: 50%;

    box-sizing: border-box;
  }

  .single-special .learner-teacher .learner image image {
    margin-left: -13rpx;
  }

  .single-special .learner-teacher .learner+.teacher {
    margin-top: 30rpx;
  }

  .single-special .learner-teacher .teacher {
    display: flex;

    align-items: center;
    padding: 30rpx;
    border-radius: 4rpx;
    background-color: #f7f7f7;
  }

  .single-special .learner-teacher .teacher image {
    display: block;
    width: 90rpx;
    height: 90rpx;
    border-radius: 50%;
    background-color: #9d8585;

    object-fit: cover;
  }

  .lecturer-body {
    flex: 1;
    margin-left: 18rpx;
    font-weight: bold;
    font-size: 30rpx;
    color: #282828;
  }

  .single-special .learner-teacher .label {
    display: flex;
    margin-top: 4rpx;
  }

  .single-special .learner-teacher .label view {
    height: 34rpx;
    padding-right: 12rpx;
    padding-left: 12rpx;
    border-radius: 4rpx;
    background-color: #fff0e5;
    font-weight: normal;
    font-size: 22rpx;
    line-height: 34rpx;
    color: #ff6b00;
  }

  .single-special .learner-teacher .label view view {
    margin-left: 5rpx;
  }

  .single-special .learner-teacher .iconfont {
    font-size: 24rpx;
    color: #333;
  }

  .single-special .group-buy {
    margin-top: 14rpx;
    background-color: #ffffff;
  }

  .single-special .group-buy .marquee {
    display: flex;

    align-items: center;
    padding-left: 32rpx;
    background-color: #fff0e5;
    font-size: 24rpx;
    color: #ff6b00;
  }

  .single-special .group-buy .iconfont {
    margin-right: 20rpx;
    font-size: 22rpx;
  }

  .single-special .group-buy .swiper-container {
    flex: 1;
    height: 62rpx;
    padding-left: 20rpx;
    margin-left: 20rpx;
    font-size: 24rpx;
    line-height: 62rpx;
    color: #282828;
  }

  .single-special .group-buy .swiper-container::before {
    content: " ";
    position: absolute;
    top: 50%;
    left: 0;
    width: 1px;
    height: 30rpx;
    border-left: 1px solid #282828;

    box-sizing: border-box;

    transform: translateY(-50%);
  }

  .single-special .group-buy .list {
    padding-left: 30rpx;
  }

  .single-special .group-buy .item {
    display: flex;

    align-items: center;
    padding-top: 25rpx;
    padding-right: 30rpx;
    padding-bottom: 25rpx;
  }

  .single-special .group-buy .item+.item {
    border-top: 1px solid #f0f0f0;
  }

  .single-special .group-buy .item image {
    display: block;
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    background-color: #e93323;

    object-fit: cover;
  }

  .single-special .group-buy .item>view view {
    margin-left: 20rpx;
  }

  .single-special .group-buy .item>view:nth-child(2) {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 28rpx;
    color: #222;
  }

  .single-special .group-buy .item>view:nth-child(3) {
    text-align: right;
    font-size: 24rpx;
    color: #333;
  }

  .single-special .group-buy .item>view:nth-child(3) text {
    color: #ff6b00;
  }

  .single-special .group-buy .item>view:nth-child(3) view:last-child {
    font-size: 22rpx;
    color: #82848f;
  }

  .single-special .group-buy .item button {
    width: 140rpx;
    height: 50rpx;
    border-radius: 25rpx;
    margin-left: 35rpx;

    background: linear-gradient(90deg, #409dff 0%, #1e85fb 100%);
    font-size: 24rpx;
    color: #ffffff;
  }

  .single-special .group-buy>view:nth-child(3) {
    padding-top: 9rpx;
    padding-bottom: 24rpx;
    font-size: 24rpx;
    text-align: center;
    color: #282828;
  }

  .single-special .group-way {
    margin-top: 14rpx;
    background-color: #ffffff;
    font-size: 28rpx;
    color: #282828;
  }

  .single-special .group-way .way-title {
    height: 86rpx;
    padding-left: 30rpx;
    line-height: 86rpx;
  }

  .single-special .group-way .list {
    display: flex;

    align-items: center;
    height: 110rpx;
    padding-left: 30rpx;
    border-top: 1px solid #eee;
    font-size: 26rpx;
    counter-reset: ul;
  }

  .single-special .group-way .item {
    position: relative;
    padding-left: 34rpx;
  }

  .single-special .group-way .item ::before {
    counter-increment: ul;
    content: counter(ul);
    position: absolute;
    top: 50%;
    left: 0;
    width: 28rpx;
    height: 28rpx;
    border: 1px solid #282828;
    border-radius: 50%;

    box-sizing: border-box;

    transform: translateY(-50%);
    font-size: 22rpx;
    line-height: 28rpx;
    text-align: center;
  }

  .single-special .group-way .item:not(:last-child) {
    padding-right: 66rpx;
    margin-right: 40rpx;
    background: url(getAssetsPath("/wap/first/zsff/images/group-way.png")) right center/28rpx no-repeat;
  }

  .single-special .detail {
    padding: 30rpx;
    background-color: #ffffff;
  }

  .single-special .detail image {
    display: block;
    width: 100%;
  }

  .single-special .tabbar {
    position: relative;

    display: flex;
    height: 96rpx;
    padding-left: 5rpx;
    margin-top: 14rpx;

    box-sizing: border-box;
    background-color: #ffffff;

    box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.03);
    font-size: 30rpx;
    line-height: 96rpx;
    color: #999999;
  }

  .single-special .tabbar .item {
    position: relative;
    padding-right: 25rpx;
    padding-left: 25rpx;
    cursor: pointer;
  }

  .single-special .tabbar .item.on {
    font-weight: bold;
    font-size: 32rpx;
    color: #282828;
  }

  .single-special .tabbar .item.on::after {
    content: " ";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 44rpx;
    height: 4rpx;
    border-radius: 2rpx;
    background-color: #2c8eff;

    transform: translateX(-50%);
  }

  .single-special .exercise {
    padding: 30rpx;
    background-color: #ffffff;
  }

  .single-special .exercise .item {
    padding: 30rpx;
    border-radius: 12rpx;

    box-shadow: 0 3rpx 20rpx rgba(0, 0, 0, 0.07);
  }

  .single-special .exercise .item+.item {
    margin-top: 30rpx;
  }

  .single-special .exercise .title {
    font-size: 30rpx;
    color: #282828;
  }

  .single-special .exercise .title .iconfont {
    margin-right: 20rpx;
    font-size: 30rpx;
    color: #ccc;
  }

  .single-special .exercise .group {
    display: flex;

    align-items: center;
    margin-top: 30rpx;
    font-size: 22rpx;
    color: #999999;
  }

  .single-special .exercise .progress {
    width: 160rpx;
    height: 12rpx;
    border-radius: 6rpx;
    margin-right: 10rpx;
    background-color: #eee;
  }

  .single-special .exercise .progress view {
    height: 100%;
    border-radius: 6rpx;
    background-color: #2c8eff;
  }

  .single-special .exercise .group>view:nth-child(2) {
    width: 98rpx;
  }

  .single-special .exercise .group>view:nth-child(3) {
    flex: 1;
  }

  .single-special .exercise button {
    width: 120rpx;
    height: 42rpx;
    border-radius: 21rpx;
    background-color: #2c8eff;
    font-family: inherit;
    font-weight: normal;
    color: #ffffff;
  }

  .single-special .exercise button .iconfont {
    margin-right: 10rpx;
    font-size: 19rpx;
  }

  .single-special .question {
    padding: 30rpx;
    background-color: #ffffff;
  }

  .single-special .question .item {
    padding-right: 30rpx;
    padding-left: 30rpx;
    border-radius: 12rpx;

    box-shadow: 0 3rpx 20rpx rgba(0, 0, 0, 0.07);
  }

  .single-special .question .item .item {
    margin-top: 30rpx;
  }

  .single-special .question .head {
    display: flex;
    padding-top: 30rpx;
    padding-bottom: 30rpx;
  }

  .single-special .question image {
    display: block;
    width: 240rpx;
    height: 135rpx;
    border-radius: 10rpx;

    object-fit: cover;
  }

  .single-special .question .head>view:last-child {
    flex: 1;

    display: flex;

    flex-direction: column;

    justify-content: space-between;
    margin-left: 20rpx;
  }

  .single-special .question .title {
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 30rpx;
    color: #333;
  }

  .single-special .question .group {
    display: flex;

    justify-content: space-between;

    align-items: center;
    font-size: 22rpx;
    color: #ff6b00;
  }

  .single-special .question .iconfont {
    font-size: 30rpx;
    color: #ccc;
  }

  .single-special .question button {
    width: 120rpx;
    height: 42rpx;
    border-radius: 21rpx;
    background-color: #2c8eff;
    font-family: inherit;
    font-weight: normal;
    line-height: normal;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .single-special .question button .iconfont {
    margin-right: 10rpx;
    font-size: 19rpx;
    color: #ffffff;
  }

  .single-special .evaluate>view:first-child {
    display: flex;

    justify-content: space-between;

    align-items: center;
    padding: 33rpx 30rpx 13rpx;
    background-color: #ffffff;
  }

  .single-special .evaluate button {
    padding: 9rpx 28rpx;
    border-radius: 28rpx;

    background: linear-gradient(90deg, #409dff 0%, #1e85fb 100%);
    font-family: inherit;
    font-weight: normal;
    font-size: 26rpx;
    color: #ffffff;
  }

  .single-special .evaluate .score {
    display: flex;

    align-items: center;
    font-size: 28rpx;
    color: #ff6b00;
  }

  .single-special .evaluate .score text {
    margin-right: 5rpx;
    font-weight: bold;
    font-size: 44rpx;
  }

  .single-special .evaluate .score view:last-child {
    padding: 3rpx 25rpx;
    border-radius: 21rpx;
    margin-left: 15rpx;
    background-color: #f5f5f5;
    font-size: 24rpx;
    color: #999999;
  }

  .single-special .footer {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9;

    display: flex;
    height: 100rpx;

    height: calc(100rpx + var(--safe-bottom));
    padding-right: 30rpx;
    padding-left: 8rpx;
    border-top: 1px solid #eee;
    background-color: #ffffff;
    padding-bottom: var(--safe-bottom);
  }

  .single-special .footer>.button {
    width: 84rpx;
    font-family: inherit;
    font-weight: normal;
    font-size: 18rpx;
    color: #333;
    text-align: center;
  }

  .single-special .footer>.button:nth-child(3) {
    width: 98rpx;
  }

  .single-special .footer>.button image {
    display: block;
    width: 40rpx;
    height: 40rpx;
    margin: 16rpx auto 5rpx;
  }

  .learn-btn {
    flex: 1;
    align-self: center;

    display: flex;
    height: 76rpx;
    border-radius: 38rpx;
    margin-left: 26rpx;
    overflow: hidden;
  }

  .learn-btn button {
    flex: 1;
    min-width: 0;
    font-family: inherit;
    font-weight: normal;
    font-size: 28rpx;
    line-height: 76rpx;
    color: #ffffff;
  }

  .learn-btn button:first-child {
    background: linear-gradient(90deg, #ff6b00 0%, #ff9100 100%);
  }

  .learn-btn button:last-child {
    background: linear-gradient(90deg, #409dff 0%, #1e85fb 100%);
  }

  .learn-btn button view {
    font-size: 20rpx;
  }

  .single-special .audio-panel {
    display: flex;

    flex-direction: column;

    justify-content: center;
    height: 100%;
    border-bottom: 1px solid #f5f5f5;
    background-color: #ffffff;
  }

  .single-special .audio-panel image {
    display: block;
    width: 464rpx;
    height: 160rpx;
    margin: 0 auto;
    object-fit: contain;
    pointer-events: none;
  }

  .single-special .audio-panel .control {
    display: flex;

    align-items: center;
    padding-right: 30rpx;
    padding-left: 30rpx;
    margin-top: 40rpx;
  }

  .single-special .audio-panel .icon {
    font-size: 64rpx;
    color: #2c8eff;
  }

  .single-special .audio-panel .timeline {
    flex: 1;

    display: flex;

    align-items: center;
    margin-left: 30rpx;
    font-size: 28rpx;
    color: #2c8eff;
  }

  .single-special .audio-panel .track {
    flex: 1;
    height: 4rpx;
    border-radius: 2rpx;
    margin-right: 18rpx;
    margin-left: 18rpx;
    background-color: rgba(44, 142, 255, 0.2);
  }

  .single-special .audio-panel .range {
    position: relative;
    width: 0;
    height: 100%;
    border-radius: 2rpx;
    background-color: #2c8eff;
  }

  .single-special .audio-panel .thumb {
    position: absolute;
    top: 50%;
    left: 100%;
    width: 16rpx;
    height: 16rpx;
    border-radius: 50%;
    background-color: #2c8eff;

    transform: translate(-50%, -50%);
  }

  .single-special .share-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 1001;
    width: 600rpx;
    height: 960rpx;

    transform: translate(-50%, -50%);

    object-fit: cover;
  }

  .single-special .group-chart-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 56;
    width: 600rpx;
    padding-top: 100rpx;
    padding-bottom: 60rpx;
    border-radius: 30rpx;
    background-color: #ffffff;

    transform: translate(-50%, -50%);
    text-align: center;
  }

  .single-special .group-chart-dialog image {
    display: block;
    width: 354rpx;
    height: 354rpx;
    margin: 0 auto;
  }

  .single-special .barrage {
    position: fixed;
    top: 100rpx;
    left: 30rpx;

    display: flex;

    align-items: center;
    max-width: calc(100% - 60rpx);
    height: 48rpx;
    padding-right: 24rpx;
    padding-left: 4rpx;
    border-radius: 24rpx;
    background-color: rgba(0, 0, 0, 0.3);
    font-size: 24rpx;
    color: #ffffff;
  }

  .single-special .barrage image {
    display: block;
    width: 40rpx;
    height: 40rpx;
    border-radius: 50%;
    margin-right: 12rpx;

    object-fit: cover;
  }

  .single-special .barrage view:nth-child(2) {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .exchange-guide {
    position: fixed;
    top: 50%;
    right: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    height: 62rpx;
    padding-right: 21rpx;
    padding-left: 28rpx;
    border-top-left-radius: 31rpx;
    border-bottom-left-radius: 31rpx;
    background-color: #2c8eff;
    -webkit-box-shadow: 0 2rpx 10rpx rgba(76, 146, 226, 0.25);
    box-shadow: 0 2rpx 1rpx rgba(76, 146, 226, 0.25);
    font-size: 30rpx;
    line-height: normal;
    color: #ffffff;
  }

  .video_footer_btn_left {
    width: 35%;
    height: 100%;
    background: #ff6b00;
  }

  .video_footer_btn_left_pic {
    font-size: 28rpx;
    line-height: 22rpx;
    color: #ffffff;
    font-weight: 600;
    text-align: center;
  }

  .video_footer_btn_left_num {
    font-size: 20rpx;
    line-height: 20rpx;
    color: #ffffff;
    text-align: center;
  }

  .video_footer_btn_left_pic+.video_footer_btn_left_num {
    margin-top: 9rpx;
  }

  .poster-canvas2 {
    width: 1200rpx;
    height: 1700rpx;
  }
</style>