{extend name="public/container"}
{block name="title"}{$title}{/block}
{block name="head_top"}
<link rel="stylesheet" type="text/css" href="{__WAP_PATH}zsff/css/video-js.min.css"/>
<script src="{__WAP_PATH}zsff/js/video.min.js"></script>
<script src="{__WAP_PATH}zsff/js/zh-CN.js"></script>
<style>
    body{padding-bottom:1rem;}
    .thematic-details{background-color:#f5f5f5;}
    .video-js .vjs-big-play-button{top: 50%;left: 50%;transform: translate(-50%,-50%);}
    .layui-layer-shade{background-image: url("/wap/first/zsff/images/close.png")!important;background-repeat: no-repeat!important;background-size: 0.8rem 0.8rem;background-position: 50% 88%;}
    .navCon{position: relative;padding: 0 0.3rem;}
    .swiper-details .swiper-nav .free{position:absolute;font-size: 0.2rem;color: #fff;left:67%;top: 0;margin-top: -0.5rem;animation: stone linear 1s infinite alternate;-webkit-animation: free linear 1s infinite alternate;}
    .swiper-details .swiper-nav .free .freeCon{width:1.1rem;height:0.4rem;border-radius:0.05rem;background-color:#ea2f2f;position:relative;left:0.5rem}
    .swiper-details .swiper-nav .free .freeCon:after{content: "";width: 0;height: 0;border-left: 0.1rem solid transparent;border-right: 0.1rem solid transparent;border-top: 0.13rem solid #ea2f2f;position:absolute;bottom: -0.1rem;left: 50%;margin-left: -0.1rem;}
    @keyframes free
    {
        from {transform:scale(1);}
        to {transform:scale(0.9);}
    }
    @-webkit-keyframes stone
    {
        from {transform:scale(1);}
        to {transform:scale(0.9);}
    }
    /*这里开始*/
    .video_footer_img{width:0.4rem;height:0.4rem;margin-right:auto;margin-left:auto;}
    .video_footer_img img{width: 100%;height: 100%;display: block;}
    .video_footer_img2{width:0.4rem;height:0.4rem;margin-right:auto;margin-left:auto;}
    .video_footer_img2 img{width: 100%;height: 100%;display: block;}
    .video_footer_tit{font-weight:400;font-size: 0.18rem;line-height:.36rem;color: #666;}
    .video_footer_left{width:.9rem;height:1rem;line-height:1rem;text-align:center;}
    .video_footer_left .cont{display:inline-block;vertical-align:middle;font-weight:400;font-size:.18rem;line-height:.36rem;color:#666;}
    .video_footer_btn{-webkit-flex:1;flex:1;height: 0.76rem;border-radius:37px;}
    .video_footer_btn_left{width: 50%;height: 100%;border-radius:37px 0px 0px 37px;background:linear-gradient(90deg,rgba(248,162,1,1) 0%,rgba(255,186,37,1) 100%);}
    .video_footer_btn_right{width: 50%;height: 100%;border-radius:0px 37px 37px 0px;background:linear-gradient(90deg,rgba(64,157,255,1) 0%,rgba(30,133,251,1) 100%);}
    .video_footer_btn_left_pic{font-size: 0.28rem;line-height:.22rem; color: #fff;text-align: center;}
    .video_footer_btn_left_num{font-size: 0.2rem;line-height:.2rem; color: #fff;text-align: center;}
    .video_footer_btn_left_pic + .video_footer_btn_left_num{margin-top:.09rem;}
    footer .video_footer_btn .on{width: 100% !important;border-radius: 37px !important;}
    video{width: 100%}
    .labelItem {
        font-size: 0.24rem;
        color: #999;
        font-weight: 400;
        background-color: #F2F8FF;
        padding: 0.04rem 0.1rem;
        border-radius: 0.06rem;
        color: #2C8EFF;
    }
    .catalogue{background-color:#fff;}
    .video-listn{background-color:#fff;}
    .teacher{margin-top:.16rem;background-color:#fff;}
    .teacher .teacher-hd{padding:.2rem .3rem 0;font-weight:bold;font-size:.3rem;line-height:.42rem;color:#333;}
    .teacher .teacher-bd{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;padding:.28rem .3rem .3rem;}
    .teacher .teacher-bd .img{width:1.1rem;height:1.1rem;border-radius:50%;object-fit:cover;}
    .teacher .teacher-bd .text{-webkit-box-flex:1;-webkit-flex:1;flex:1;min-width:0;margin-right:.08rem;margin-left:.2rem;}
    .teacher .teacher-bd .name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:bold;font-size:.3rem;line-height:.42rem;color:#282828;}
    .teacher .teacher-bd .label{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;margin-top:.06rem;}
    .teacher .teacher-bd .label .cell{height:.34rem;padding:0 .12rem;border-radius:.04rem;background-color:#fff7e6;font-size:.22rem;line-height:.34rem;color:#feb720;}
    .teacher .teacher-bd .label .cell ~ .cell{margin-left:.1rem;}
    .teacher .teacher-bd .attr{margin-top:.09rem;font-size:.22rem;line-height:.37rem;color:#385270;}
    .teacher .teacher-bd .knowledge{font-size:.2rem;color:#999;}
    .teacher-section {
        margin-top: 0.14rem;
        background-color: #fff;
    }

    .teacher-table {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
        height: 1.5rem;
    }

    .teacher-table .item {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        flex: 1;
        position: relative;
        min-width: 0;
        font-size: 0.24rem;
        text-align: center;
        color: #999999;
    }

    .teacher-table .item:last-child::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        width: 0.02rem;
        height: 0.4rem;
        background-color: #e8e8e8;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    .teacher-table >div:last-child > div:first-child {
        margin-bottom: 0.06rem;
    }

    .teacher-table .num {
        font-size: 0.38rem;
        color: #333333;
    }

    .teacher-table img {
        width: 0.5rem;
        height: 0.5rem;
        border: 0.06rem solid #FFFFFF;
        border-radius: 50%;
        margin-left: -0.15rem;
        box-sizing: border-box;
        vertical-align: middle;
    }

    .teacher-detail {
        padding: 0 0.3rem 0.3rem;
    }

    .teacher-detail a {
        display: block;
        padding: 0.3rem;
        border-radius: 0.04rem;
        background-color: #f9fafc;
    }

    .teacher-detail .knowledge {
        color: #666666;
    }

    .teacher-detail .detail-hd {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
    }

    .teacher-detail .detail-hd .head {
        width: 0.9rem;
        height: 0.9rem;
        border-radius: 50%;
        overflow: hidden;
    }

    .teacher-detail .detail-hd img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .teacher-detail .detail-hd .text {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        flex: 1;
        min-width: 0;
        margin: 0 0.18rem;
        font-weight: bold;
        font-size: 0.3rem;
        color: #282828;
    }

    .teacher-detail .detail-hd span {
        display: inline-block;
        height: 0.34rem;
        padding: 0 0.12rem;
        border-radius: 0.04rem;
        background-color: #FFF7E6;
        font-weight: normal;
        font-size: 0.22rem;
        line-height: 0.34rem;
        color: #FEB720;
    }

    .teacher-detail .detail-bd {
        margin-top: 0.2rem;
        font-size: 0.26rem;
        line-height: 0.38rem;
        color: #666666;
    }

    .scroll-section {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
        margin-top: 0.14rem;
        background-color:rgba(255,186,37,0.3);
        font-size: 0.24rem;
    }

    .scroll-section .label {
        width: 2rem;
        padding-left: 0.75rem;
        background: url("data:image/png;base64,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") 0.3rem center/0.26rem 0.22rem no-repeat;
        color: #E93323;
    }

    .scroll-section .swiper-container {
        position: relative;
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        flex: 1;
        min-width: 0;
        height: 0.62rem;
        padding-left: 0.16rem;
        line-height: 0.62rem;
    }

    .scroll-section .swiper-container::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        width: 1px;
        height: 0.24rem;
        border-left: 1px solid #999999;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }
</style>
{/block}
{block name="content"}
<div v-cloak id="app" class="thematic-details">
    {if !$subscribe}
    <div class="follow acea-row row-between-wrapper" v-if="topFocus">
        <div class="picTxt">点击“立即关注”即可关注公众号</div>
        <div>
            <div class="followBnt" @click="is_code=true">立即关注</div>
            <span class="iconfont iconguanbi2" @click="topFocus = false"></span>
        </div>
    </div>
    {/if}
    <!--分享拼团专题展示-->
    <div class="initiate-group2" v-if="is_partake">
        <div class="list acea-row row-center-wrapper">
            <div class="pictrue">
                <img src="{__WAP_PATH}zsff/images/king.png" class="king">
                <img :src="pinkInfo.pinkT.avatar">
            </div>
            <div class="pictrue" v-for="item in pinkInfo.pinkAll"><img :src="item.avatar"></div>
            <div class="pictrue" v-for="item in pinkInfo.count"><img src="{__WAP_PATH}zsff/images/symbol.png"></div>
        </div>
        <div class="tiptime">还差{{pinkInfo.count}}人，和我们一起参加吧</div>
        <div class="tiptime tiptime2">剩余时间<span class="time" v-if="pinkInfo.pinkT">{{pinkInfo.pinkT.difftime.hour}}:
                {{pinkInfo.pinkT.difftime.minute}}: {{pinkInfo.pinkT.difftime.second}}</span></div>
    </div>
    <!--END-->
    <div class="swiper-details">
        <div class="banner slider-banner">
            <ul class="swiper-wrapper" v-cloak="">
                <li class="swiper-slide" v-for="swiper in swiperlist">
                    <img :src="swiper" />
                </li>
            </ul>
            <div class="swiper-pagination"></div>
        </div>
        <div class="successTip" v-if="barrageStatus == true">
            <div class="picTxt acea-row row-middle" v-for="(item,index) in Barragelist" v-show="num==index?true:false">
                <div class="pictrue"><img :src="item.avatar"></div>
                <div class="acea-row row-middle" style="flex: 1;overflow: hidden;white-space: nowrap;">
                    <div class="name line1">{{item.nickname}}</div>
                    <div v-text="item.status_name" style="flex: 1;overflow: hidden;text-overflow: ellipsis;"></div>
                </div>
            </div>
        </div>
        <div class="swiper">
            <div class="name" v-text="special.title" style="padding:0.2rem 0.3rem 0;font-size:0.36rem;line-height:0.48rem;color:#333333;">加载中</div>
            <div class="swiper-int">
                <div class="swiper-int-top">
                    <div class="swiper-int-top-left">
                        <div v-if="special.label.length" class="attr">
                            <div v-for="item in special.label">{{item}}</div>
                        </div>
                    </div>
                    <div class="acea-row row-middle">
                        <div class="pin-money" v-if="is_pay==false && is_partake==false">
                            <span class="price">￥<b>{{ special.is_pink ? special.pink_money : special.money }}</b></span>
                            <span class="vip-price">￥{{ special.member_money }}</span>
                            <img class="vip-price-icon" src="{__WAP_PATH}zsff/images/vip.png">
                            <!--                        <span class="total" v-if="special.type != 4">共{{count}}节</span>-->
                        </div>
                        <div class="pin-money" v-else v-show="is_pay==false">拼课价<span class="money">￥{{special.pink_money}}</span></div>
                        <!--                    <div class="collect">已有{{special.browse_count + 1}}人学习</div>-->
                    </div>
                </div>
                <div class="collect" @click="collect">
                    <div :class="['knowledge', special.collect ? 'iconshoucang2' : 'iconshoucang11']"></div>
                    <div>{{special.collect ? '已收藏': '收藏'}}</div>
                </div>
            </div>
<!--            <div class="peopleNum acea-row row-middle line1" v-if="pinkUser.length">-->
<!--                <div class="pictrue">-->
<!--                    <img v-for="(item,key) in pinkUser" :src="item.avatar">-->
<!--                </div>-->
<!--                <div class="text">{{pinkUser.length}}人参加</div>-->
<!--            </div>-->
        </div>
        <div class="pinTip2 acea-row row-between-wrapper" v-if="is_pay || isMember && special.member_pay_type==0">
            <div class="reminder line1">和小伙伴一起学习，有老师答疑哦~</div>
            <div class="chatBnt acea-row row-center-wrapper" @click=" open = false ">加入群聊</div>
        </div>
        <!-- 拼团 -->
<!--        <div class="pinTip line1" v-if="pinkIngList.length && is_pay==false">以下小伙伴正在发起团购，您可以直接参加</div>-->
        <div v-if="pinkIngList.length && is_pay==false" class="scroll-section">
            <div class="label">已拼{{ scrollData.length }}件</div>
            <div id="scroll" class="swiper-container">
                <div class="swiper-wrapper">
                    <div v-for="(item, index) in scrollData" :key="index" class="swiper-slide">{{ item.nickname }}拼团成功</div>
                </div>
            </div>
        </div>
        <div class="list" v-if="pinkIngList.length && is_pay==false">
            <div class="item acea-row row-middle" v-for="item in pinkIngList">
                <div class="pictrue"><img :src="item.avatar"></div>
                <div class="name line1" v-html="item.nickname"></div>
                <div class="left">
                    <div>还差<span>{{item.num}}人</span>成团</div>
                    <div class="time">剩余{{item.difftime.hour}}:{{item.difftime.minute}}:{{item.difftime.second}}</div>
                </div>
                <a class="acea-row row-center-wrapper link" :href="getAttendUrl(item.id,item.cid)">
                    去参团
                    <span class="knowledge iconxiangyou"></span>
                </a>
            </div>
        </div>
        <div class="teacher-section">
            <div class="teacher-table">
                <div class="item">
                    <div class="num">{{ count }}</div>
                    <div>总节数</div>
                </div>
                <div class="item">
                    <div>
                        <template v-for="(item, index) in record">
                            <img v-if="index < 5" :key="index" :src="item.avatar">
                        </template>
                    </div>
                    <div>已有<span style="font-weight:bold;font-size:0.28rem;vertical-align:middle;">{{ record.length }}</span>人学习</div>
                </div>
            </div>
            <div v-if="lecturer" class="teacher-detail">
                <a :href="$h.U({c:'special',a:'teacher_detail'})+'?id=' + special.lecturer_id">
                    <div class="detail-hd">
                        <div class="head">
                            <img :src="lecturer.lecturer_head">
                        </div>
                        <div class="text">
                            <div>{{ lecturer.lecturer_name }}</div>
                            <div v-if="lecturer.label.length">
                                <template v-for="(item, index) in lecturer.label">
                                    <span v-if="index < 3" :key="index">{{ item }}</span>
                                </template>
                            </div>
                        </div>
                        <div class="knowledge iconxiangyou"></div>
                    </div>
                    <div class="detail-bd">{{ lecturer.explain }}</div>
                </a>
            </div>
        </div>
        <div class="swiper-nav" ref="list">
            <div class="navCon acea-row row-middle">
                <div v-if="special.type == 5" class="item" :class="active==index?'on':''" v-for="(nav,index) in cloumnNavlist" @click=" active = index">
                    {{nav.title}}
                </div>
                <div v-if="special.type == 4" class="item" :class="active==index?'on':''" v-for="(nav,index) in liveNavlist" @click=" active = index">
                    {{nav.title}}
                </div>
                <div v-if="special.type != 5 && special.type != 4" class="item" :class="active==index?'on':''" v-for="(nav,index) in otherNavlist" @click=" active = index">
                    {{nav.title}}
                </div>
            </div>
        </div>
        <!-- 通用详情 -->
        <div class="swiper-conter" v-show="active==0" v-html="special.content"></div>
        <!-- 专题目录/专栏目录 -->
        <div v-show="active==1 && special.type != 4">
            <div ref="list">
                <!-- 专栏目录 -->
                <ul v-if="special.type === 5" class="parent-catalogue">
                    <template v-for="(item, index) in otherTaskList">
                        <li :key="item.id" :class="{ active: item.active }" @click="show(item)">
                            <div class="parent-title">
                                <div class="name">{{item.title}}</div>
                                <div :class="[item.active ? 'iconxiangshang' : 'iconxiangxia', 'knowledge']"></div>
                            </div>
                            <ul v-if="item.special_task.length" class="catalogue">
                                <li v-for="(itm, idx) in item.special_task" :key="itm.id" :class="{ gray: itm.taskTrue }" @click="play(itm)">
                                    <div class="image">
                                        <img v-if="item.type === 1" class="img" src="{__WAP_PATH}zsff/images/media1.png">
                                        <img v-else-if="item.type === 2" class="img" src="{__WAP_PATH}zsff/images/media2.png">
                                        <img v-else-if="item.type === 3 || item.type === 4" class="img" src="{__WAP_PATH}zsff/images/media3.png">
                                    </div>
                                    <div class="title">{{idx < 9 ? '0' + (idx + 1) : idx + 1}} | {{itm.title}}</div>
                                    <template v-if="itm.is_free">
                                        <div v-if="itm.pay_status" class="knowledge iconsuozi"></div>
                                        <div v-else class="knowledge iconziyuan2"></div>
                                    </template>
                                    <div v-else class="free">免费</div>
                                </li>
                            </ul>
                        </li>
                    </template>
                </ul>
                <!-- 专题目录 -->
                <ul v-else class="catalogue">
                    <li v-for="(item, index) in otherTaskList" :key="item.id" :class="{ gray: item.taskTrue }" @click="play(item)">
                        <div class="image">
                            <img v-if="item.type === 1" class="img" src="{__WAP_PATH}zsff/images/media1.png">
                            <img v-else-if="item.type === 2" class="img" src="{__WAP_PATH}zsff/images/media2.png">
                            <img v-else-if="item.type === 3 || item.type === 4" class="img" src="{__WAP_PATH}zsff/images/media3.png">
                        </div>
                        <div class="title">{{index < 9 ? '0' + (index + 1) : index + 1}} | {{item.title}}</div>
                        <template v-if="item.is_free">
                            <div v-if="item.pay_status" class="knowledge iconsuozi"></div>
                            <div v-else class="knowledge iconziyuan2"></div>
                        </template>
                        <div v-else class="free">免费</div>
                    </li>
                </ul>
            </div>
            <p class="loading-line" style="background-color: #ffffff" v-cloak="">
                <span v-show="otherLoading==true" class="fa fa-spinner loadingpic" style="font-size: 0.4rem"></span>
                <span v-text="otherLoadTitle">加载更多</span>
            </p>
        </div>
        <!-- 直播回放目录 -->
        <div v-if="special.type === 4 && active" class="replay-directory">
            <ul v-if="liveTaskList.length">
                <li v-for="(item, index) in liveTaskList" :key="index" :class="{ active: RecordId === item.RecordId }" class="item" @click="playBackRecord(item.RecordId)">
                    <div class="label">回放</div>
                    <div class="name">{{ index | serial }} | {{item.playback_name ? item.playback_name : special.title }}</div>
                    <div></div>
                </li>
            </ul>
            <div class="foot">
                <span v-show="liveLoading" class="fa fa-spinner loadingpic"></span>
            </div>
        </div>
        <div class="video-list" v-show="active==2 && special.type == 5" style="-webkit-overflow-scrolling: touch;">
            <div v-if="columnTaskList.length && active==2" ref="list">
                <div class="video-listn" style="padding:0.3rem 0;">
                    <div class="item acea-row row-between-wrapper" v-for="vo in otherTaskList" @click="play(vo)">
                        <div class="pictrue" @click="play(vo)" style="position: relative">
                            <img :src="vo.image">
                            <div class="label">{{specialType[vo.type]}}</div>
                        </div>
                        <div class="underline">
                            <div class="text acea-row row-between row-column">
                                <div class="name line1" v-text="vo.title" @click="play(vo)"></div>
                                <div v-if="vo.label.length" class="attr">
                                    <div v-for="item in vo.label">{{item}}</div>
                                </div>
                                <template v-if="special.pay_type">
                                    <template v-if="vo.pay_status">
                                        <template v-if="isMember">
                                            <div v-if="vo.member_pay_type" class="price">
                                                ￥{{vo.member_money === '0.00' ? vo.money : vo.member_money}}</div>
                                            <div v-else class="free">去学习</div>
                                        </template>
                                        <div v-else class="price">￥<span>{{vo.money}}</span></div>
                                        </template>
                                     <div v-else class="free">去学习</div>
                                </template>
                                <div v-else class="free">去学习</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <p class="loading-line" style="background-color: #ffffff">
                <span v-show="columnLoading==true" class="fa fa-spinner loadingpic" style="font-size: 0.4rem"></span>
            </p>
        </div>
    </div>
    <footer class="acea-row row-middle" ref="storeMenu" v-if="is_pay==false && is_partake==false && is_gift==false && isPink==false">
        <a class="link" href="{:Url('wap/index/index')}">
            <div class="cont">
                <img src="{__WAP_PATH}zsff/images/special01.png">
                <div>首页</div>
            </div>
        </a>
        <a class="link" href="javascript:;" @click="customerService">
            <div class="cont">
                <img src="{__WAP_PATH}zsff/images/special02.png">
                <div>客服</div>
            </div>
        </a>
        <a v-if="(special.pay_type == 1 && special.type == 4) || special.money > 0" class="link" href="javascript:;"
            @click="OpenPay(1)">
            <div class="cont">
                <img src="{__WAP_PATH}zsff/images/special03.png">
                <div>送朋友</div>
            </div>
        </a>
        <div class="wrap">
            <div class="video_footer_btn acea-row" :class="special.pay_type == 1 ? '': 'item2'">
                <div class="video_footer_btn_left acea-row row-column row-center-wrapper" v-if="(special.is_pink && ((special.member_pay_type == 1 && isMember == 1) || isMember == 0))" @click="OpenPay(3)">
                    <span class="video_footer_btn_left_pic">￥{{special.pink_money}}</span>
                    <span class="video_footer_btn_left_num">{{special.pink_number}}人团</span>
                </div>
                <div class="video_footer_btn_right acea-row" :class="(special.is_pink == 0 || (special.is_pink && isMember == 1 && special.member_pay_type == 0)) ? 'on':''" v-if="special.type == 4">
                    <span class="acea-row row-center-wrapper video_footer_btn_left_pic" style="flex: 1;" @click="OpenPay(6)" v-if="special.pay_type == 0 || (special.member_pay_type == 0 && isMember) || is_pay">进入直播间</span>
                    <span class="acea-row row-center-wrapper video_footer_btn_left_pic" style="flex: 1;" @click="OpenPay(2)" v-if="isMember == 1 && special.member_pay_type == 1">￥{{special.member_money}}</span>
                    <span class="acea-row row-center-wrapper video_footer_btn_left_pic" style="flex: 1;" @click="OpenPay(2)" v-if="isMember == 0 && special.pay_type == 1">￥{{special.money}}</span>
                </div>

                <div class="video_footer_btn_right acea-row" :class="(special.is_pink == 0 || (special.is_pink && isMember == 1 && special.member_pay_type == 0)) ? 'on':''" v-if="special.type != 4">
                    <span v-if="special.pay_type == 0 || (special.member_pay_type == 0 && isMember) || is_pay" @click="OpenPay(5)" class="acea-row row-center-wrapper video_footer_btn_left_pic" style="flex: 1;">免费学习</span>
                    <span v-if="isMember == 1 && special.member_pay_type == 1" @click="OpenPay(2)" class="acea-row row-center-wrapper video_footer_btn_left_pic" style="flex: 1;">￥{{special.member_money}}</span>
                    <span v-if="isMember == 0 && special.pay_type == 1" @click="OpenPay(2)" class="acea-row row-center-wrapper video_footer_btn_left_pic" style="flex: 1;">￥{{special.money}}</span>
                </div>
            </div>
        </div>
    </footer>
    <footer class="acea-row row-wrap-all" ref="storeMenu" v-if="is_pay==true && is_partake==false && is_gift==false && paid && isPink==false">
        <a class="link" href="{:Url('wap/index/index')}">
            <div class="cont">
                <img src="{__WAP_PATH}zsff/images/special01.png">
                <div>首页</div>
            </div>
        </a>
        <a class="link" href="javascript:;" @click="customerService">
            <div class="cont">
                <img src="{__WAP_PATH}zsff/images/special02.png">
                <div>客服</div>
            </div>
        </a>
        <a v-if="(special.pay_type == 1 && special.type == 4) || special.money > 0" class="link" href="javascript:;" @click="OpenPay(1)">
            <div class="cont">
                <img src="{__WAP_PATH}zsff/images/special03.png">
                <div>送朋友</div>
            </div>
        </a>
        <div class="wrap">
            <div class="video_footer_btn acea-row">
                <div class="video_footer_btn_right acea-row row-column row-center-wrapper on" v-if="special.type != 4" @click="OpenPay(5)">
                    <span class="video_footer_btn_left_pic">去学习</span>
                </div>
                <div class="video_footer_btn_right acea-row row-column row-center-wrapper on" v-if="special.type == 4" @click="OpenPay(6)">
                    <span class="video_footer_btn_left_pic">进入直播间</span>
                </div>
            </div>
        </div>
    </footer>
    <footer class="acea-row row-wrap-all" v-if="isPink" ref="storeMenu">
        <a class="link" href="{:Url('wap/index/index')}">
            <div class="cont">
                <img src="{__WAP_PATH}zsff/images/special01.png">
                <div>首页</div>
            </div>
        </a>
        <a class="link" href="javascript:;" @click="customerService">
            <div class="cont">
                <img src="{__WAP_PATH}zsff/images/special02.png">
                <div>客服</div>
            </div>
        </a>
        <a class="link" href="javascript:;" @click="OpenPay(1)">
            <div class="cont">
                <img src="{__WAP_PATH}zsff/images/special03.png">
                <div>送朋友</div>
            </div>
        </a>
        <div class="wrap">
            <div class="video_footer_btn acea-row">
                <a class="video_footer_btn_right acea-row row-column row-center-wrapper on" :href="goPink()">
                    <span class="video_footer_btn_left_pic">查看拼课详情</span>
                </a>
            </div>
        </div>
    </footer>
    <footer class="acea-row row-wrap-all" v-if="is_partake" ref="storeMenu">
        <a class="link" href="{:Url('wap/index/index')}">
            <div class="cont">
                <img src="{__WAP_PATH}zsff/images/special01.png">
                <div>首页</div>
            </div>
        </a>
        <a class="link" href="javascript:;" @click="customerService">
            <div class="cont">
                <img src="{__WAP_PATH}zsff/images/special02.png">
                <div>客服</div>
            </div>
        </a>
        <div class="wrap">
            <div class="video_footer_btn acea-row item2">
                <a class="video_footer_btn_left acea-row row-column row-center-wrapper" :href="getPartakePinkUrl()">
                    <span class="video_footer_btn_left_pic">开团</span>
                </a>
                <div class="video_footer_btn_right acea-row row-column row-center-wrapper" @click="OpenPay(3)">
                    <span class="video_footer_btn_left_pic">参团</span>
                </div>
            </div>
        </div>
    </footer>
    <footer class="acea-row row-middle" v-if="is_gift" ref="storeMenu">
        <a class="link" href="{:Url('wap/index/index')}">
            <div class="cont">
                <img src="{__WAP_PATH}zsff/images/special01.png">
                <div>首页</div>
            </div>
        </a>
        <a class="link" href="javascript:;" @click="customerService">
            <div class="cont">
                <img src="{__WAP_PATH}zsff/images/special02.png">
                <div>客服</div>
            </div>
        </a>
        <div class="wrap">
            <div class="video_footer_btn acea-row">
                <div class="video_footer_btn_right acea-row row-column row-center-wrapper on" @click="OpenPay(4)">
                    <span class="video_footer_btn_left_pic">领取课程</span>
                </div>
            </div>
        </div>
    </footer>
    <div class="groupCode" :hidden="open">
        <div class="code"><img :src="special.service_code"></div>
        <div class="codeTip">长按扫一扫<br>加客服好友进群哦</div>
    </div>
    <div class="mask" style="align-items:center;display: flex;" v-show="is_code" @click="is_code=false">
        <img :src="wechat_qrcode" alt="" style="width: 5rem;height: 5rem;margin: 0 auto;">
    </div>
    <div class="mask" @touchmove.prevent :hidden="open" @click="open=true"></div>
    <payment @change="changeVal" :payment="payment" :money="money" :special_id="special.id" :iswechat="isWechat" :isYue="is_yue" :now_money="now_money" :isAlipay="is_alipay" :link_pay_uid="link_pay_uid" :pay_type_num="pay_type_num" :pink-id="pinkId"></payment>
    <enter :appear="appear" @change="changeVal" :url="url" :site_name="site_name"></enter>
    <div class="password" :class="password?'on':''">
        <div class="title">请输入密码</div>
        <input type="password" v-model="qr_password" autocomplete="off">
        <input type="hidden" v-model="studio_pwd" autocomplete="off">
        <div class="psdBnt" @click="goLive">确定</div>
    </div>
    <div class="mask" v-show="password" @touchmove.prevent @click="password = false "></div>
</div>
{/block}
{block name='foot'}
<script type="text/javascript">
    var swiperlist={$swiperlist},special={$special},record={$record},count={$count},pinkUser={$pinkUser},pinkIngList={$pinkIngList},pinkId={$pinkId},
        orderId='{$orderId ? $orderId : ""}',link_pay_uid={$link_pay_uid},wechat_qrcode='{$code_url}',is_yue={$is_yue ? 'true' : 'false'},is_alipay={$is_alipay ? 'true' : 'false'},
        isWechat={$isWechat ? 'true' : 'false'},isPay={$isPay ? 'true':'false'},partake={$partake},gift={$gift},now_money={$now_money},
        link_pay={$link_pay},isPink={$isPink ? 'true':'false'},BarrageShowTime={$BarrageShowTime ? $BarrageShowTime : 5},
        barrage_index={$barrage_index ? $barrage_index : 0},uid={$userInfo['uid'] ? $userInfo['uid']:0},liveInfo={$liveInfo},site_name = '{$Auth_site_name}',isMember={$is_member};
    window.overallShare = false;
        require(['vue', 'helper', 'store', 'special-type', 'reg-verify', '{__WAP_PATH}zsff/js/payment.js', '{__WAP_PATH}zsff/js/enter.js', '{__WAP_PATH}zsff/js/shortcut.js'], function (Vue, $h, app, specialType) {
            new Vue({
                el: '#app',
                filters: {
                    serial: function (value) {
                        return value < 9 ? '0' + (value + 1) : value + 1;
                    }
                },
                data: {
                    parentActive: 0,
                    site_name: site_name,
                    RecordId: '',
                    count: count,
                    special: special,
                    pinkUser: pinkUser,
                    swiperlist: swiperlist,
                    pinkIngList: pinkIngList,
                    otherTaskList: [],
                    columnTaskList: [],
                    liveTaskList: [],
                    cloumnNavlist: [{ 'title': '详情' }, { 'title': '目录' }, { 'title': '套餐' }],
                    otherNavlist: [{ 'title': '详情' }, { 'title': '目录' }],
                    liveNavlist: [{ 'title': '直播介绍' }, { 'title': '回放目录' }],
                    active: 0,
                    open: true,
                    payment: true,
                    appear: true,
                    is_pay: isPay,
                    isMember: isMember,
                    otherLoading: false,
                    columnLoading: false,
                    liveLoading: false,
                    otherLoadend: false,
                    columnLoadend: false,
                    liveLoadend: false,
                    otherLoaded:false,
                    columnLoaded:false,
                    liveLoaded:false,
                    pay_type_num: -1,
                    pinkId: pinkId || 0,
                    pinkInfo: {
                        pinkT: {
                            difftime: { hour: "00", minute: "00", second: "00" }
                        }
                    },
                    Barragelist: [],
                    otherLoadTitle: '上拉加载更多',
                    columnLoadTitle: '上拉加载更多',
                    liveLoadTitle: '上拉加载更多',
                    money: special.money,
                    where: {
                        page: 1,
                        limit: 10,
                        special_id: special.id || 0,
                        source_id: 0,
                    },
                    orderId: null,
                    is_partake: false,
                    is_gift: false,
                    paid: isPay,
                    link_pay_uid: 0,
                    wechat_qrcode: wechat_qrcode,
                    is_code: false,
                    isWechat: isWechat,
                    is_live: special.is_live,
                    url: isWechat ? $h.U({ c: 'index', a: 'login' }) : $h.U({ c: 'login', a: 'phone_check' }),
                    isPink: isPink,
                    barrageStatus: true,
                    num: barrage_index,
                    stream_name: liveInfo.stream_name || '',
                    password: false,
                    liveInfo: liveInfo,
                    qr_password: '',
                    studio_pwd: liveInfo.studio_pwd,
                    is_alipay: is_alipay, //支付宝是否开启
                    is_yue: is_yue, //余额是否开启
                    now_money: now_money, //余额
                    lecturer: null,
                    specialType: specialType,
                    topFocus: true,
                    record: record,
                    scrollData: []
                },
                watch: {
                    active: function (n) {
                        var that = this;
                        if (n == 1 && that.special.type != 4 && that.special.type != 5) {
                            this.getCourseList();
                        }
                        if (n == 1 && that.special.type == 4) {
                            this.getLiveTask();
                        }
                    }
                },
                created: function () {
                    this.CountDown({ name: 'pinkIngList', time_name: "stop_time" });
                    this.getLecturer();
                },
                mounted: function () {
                    var that = this;
                    this.$nextTick(function () {
                        $h.EventUtil.listenTouchDirection(document, function () {
                            if (this.active == 1) {
                                if (this.special.type == 4) {
                                    this.getLiveTask();
                                } else if (this.special.type == 5) {
                                    this.getCourseList();
                                }
                            } else if (this.active == 2) {
                                this.getCourseList();
                            }
                        }.bind(this));
                        mapleWx($jssdk(), function () {
                            this.onMenuShareAll({
                                title: that.special.title,
                                desc: that.special.abstract,
                                imgUrl: that.special.image,
                                link: location.href.indexOf('?') == -1 ? location.href + '?spread_uid=' + uid : location.href + '&spread_uid=' + uid,
                            });
                        });
                        $('.swiper-conter').append('<div style="height:1.5rem"></div>');
                        setTimeout(function () {
                            new Swiper('.banner', {
                                pagination: '.swiper-pagination',
                                paginationClickable: false,
                                autoplay: 2500,
                                speed: 1000,
                                autoplayDisableOnInteraction: false,
                                observer: true,
                                observeParents: true,
                            });
                        }, 500);
                        switch (location.hash) {
                            case '#tash':
                                if (that.special.type != 4) that.active = 1;
                                $('body,html').animate({ scrollTop: $(that.$refs.list).offset().top }, 800);
                                break;
                            case '#act1':
                                that.active = 0;
                                $('body,html').animate({ scrollTop: $(that.$refs.list).offset().top }, 800);
                                break;
                            case '#act2':
                                if (that.special.type != 4) that.active = 1;
                                $('body,html').animate({ scrollTop: $(that.$refs.list).offset().top }, 800);
                                break;
                            case '#partake':
                                that.is_partake = true;
                                break;
                            case '#gift':
                                that.is_gift = true;
                                break;
                            case '#link_pay':
                                that.link_pay_uid = link_pay_uid;
                                break;
                        }
                        if (partake) that.is_partake = true;
                        if (gift) that.is_gift = true;
                        if (link_pay) that.link_pay_uid = link_pay_uid;
                        that.barrage();
                    });
                    switch (this.special.type) {
                        case 5:
                            this.getCourseList();
                            this.getCloumnTask();
                            break;
                        case 4:
                            this.getLiveTask();
                            break;
                        case 1:
                        case 2:
                        case 3:
                        case 6:
                            this.getCourseList();
                            break;
                    }
                    if (that.pinkId) {
                        app.baseGet($h.U({ c: 'special', a: 'get_pink_info', q: { pinkId: that.pinkId } }), function (res) {
                            that.pinkInfo = res.data.data;
                            that.CountDown({ name: 'pinkInfo.pinkT', time_name: 'stop_time' });
                        }, function (msg) {
                            $h.showMsg(msg, function () {
                                window.location.href = $h.U({ c: 'special', a: 'details', q: { id: that.special.id } });
                            });
                        });
                    }
                    app.baseGet($h.U({ c: 'special', a: 'groupLists', q: { special_id: special.id } }), function (res) {
                        console.log('123456',res);
                        that.scrollData = res.data.data;
                        that.$nextTick(function () {
                            new Swiper('#scroll', {
                                direction: "vertical",
                                speed: 1000,
                                autoplay: 2500,
                                loop: true,
                                observer: true,
                                observeParents: true,
                                autoplayDisableOnInteraction: false
                            });
                        });
                    }, function (err) {
                        console.log(err);
                    });
                    var width = $('.swiper-conter').width();
                    $('.video-ue').each(function (index) {
                        var id = "video-ue-" + index, videoUrl = $(this).attr('src');
                        $(this).attr('id', id);
                        $(this).children('video').attr('src', videoUrl);
                        $(this).append("<source src='" + videoUrl + "' type='video/mp4' />")
                        $(this).addClass("video-js");
                        videojs(id, {}, function () {
                            this.width(width);
                            this.src(videoUrl);
                        });
                    });
                },
                methods: {
                    show: function(item) {
                        item.active = !item.active
                    },
                    // 讲师详情
                    getLecturer: function () {
                        var that = this;
                        $h.loadFFF();
                        app.baseGet($h.U({
                            c: 'Special',
                            a: 'lecturerDetails',
                            q: {
                                id: that.special.lecturer_id
                            }
                        }), function (res) {
                            var obj = res.data.data;
                            $h.loadClear();
                            that.lecturer = obj;
                        });
                    },
                    goLive: function () {
                        if (!this.qr_password) return $h.showMsg('请输入密码');
                        if (this.qr_password != this.studio_pwd) return $h.showMsg('密码不正确');
                        document.cookie = this.stream_name + "studio_pwd" + "=" + this.studio_pwd + ";expires=7200" + ";path=/";
                        console.log(this.stream_name + "stuido_pwd" + "=" + this.studio_pwd);
                        window.location.href = $h.U({ c: 'live', a: 'index', q: { stream_name: this.stream_name } });
                    },
                    barrage: function () {
                        var that = this;
                        if (typeof BarrageShowTime == 'string') BarrageShowTime = parseInt(BarrageShowTime);
                        BarrageShowTime = BarrageShowTime * 1000;
                        app.baseGet($h.U({ c: 'special', a: 'get_barrage_list', q: { special_id: special.id } }), function (res) {
                            that.$set(that, 'Barragelist', res.data.data);
                            that.Barragelist=that.Barragelist || [];
                            var len = that.Barragelist.length;
                            if (!len) return;
                            setInterval(function () {
                                that.num= that.num +1;
                                that.num= that.num >= len ? 0 : that.num;
                                that.num= that.num < 0 ? 0 : that.num;
                                that.barrageStatus = !that.barrageStatus;
                                app.baseGet($h.U({ c: 'special', a: 'set_barrage_index', q: { index: that.num } }));
                            }, BarrageShowTime);
                        });
                    },
                    goPink: function () {
                        return $h.U({ c: 'special', a: 'order_pink', q: { pink_id: pinkId } });
                    },
                    follow: function () {
                        return $h.openImage(wechat_qrcode);
                    },
                    getPartakePinkUrl: function () {
                        return $h.U({ c: 'special', a: 'details', q: { id: this.special.id } });
                    },
                    pay_order: function (data) {
                        this.orderId = data.result.orderId || '';
                        switch (data.status) {
                            case "PAY_ERROR": case 'ORDER_EXIST': case 'ORDER_ERROR':
                                this.extendOrder(data.msg);
                                break;
                            case 'WECHAT_PAY':
                                this.wechatPay(data.result.jsConfig);
                                break;
                            case 'SUCCESS':
                                this.successOrder(data.msg);
                                break;
                            case 'ZHIFUBAO_PAY':
                                window.location.href = $h.U({ c: 'Alipay', a: 'index', q: { info: data.result, params: 'special' } });
                                break;
                        }
                    },
                    wechatPay: function (config) {
                        var that = this;
                        mapleWx($jssdk(), function () {
                            this.chooseWXPay(config, function () {
                                that.successOrder();
                            }, {
                                fail: that.extendOrder,
                                cancel: that.extendOrder
                            });
                        });
                    },
                    successOrder: function (msg) {
                        var that = this;
                        $h.showMsg({
                            title: msg ? msg : '支付成功',
                            icon: 'success',
                            success: function () {
                                switch (parseInt(that.pay_type_num)) {
                                    case 1:
                                        window.location.href = $h.U({ c: 'special', a: 'gift_special', q: { orderId: that.orderId } });
                                        break;
                                    case 2:
                                        that.paid = true;
                                        that.is_pay = true;
                                        that.payment = true;
                                        that.updateMaterialStatus();
                                        break;
                                    case 3:
                                        window.location.href = $h.U({ c: 'special', a: 'pink', q: { orderId: that.orderId } });
                                        break;
                                }
                            }
                        });
                    },
                    updateMaterialStatus:function(){
                        var that=this;
                        that.otherLoading=false;
                        that.otherLoaded=false;
                        that.where.page=1;
                        that.$set(that, 'otherTaskList', []);
                        that.getCourseList();
                    },
                    extendOrder: function (msg) {
                        var that = this;
                        var msg = msg ? msg : '支付失败';
                        $h.showMsg({
                            title: typeof msg == 'object' ? '支付失败' : msg,
                            success: function () {
                                if (that.orderId) app.baseGet($h.U({ c: 'special', a: 'del_order', q: { orderId: that.orderId } }));
                            }
                        })
                    },
                    play: function (item) {
                        if (item.pay_status == 1 && this.is_pay == false) return $h.showMsg('请先购买~');
                        if (item.is_pay == 2) {
                            this.password = true;
                            this.studio_pwd = item.studio_pwd;
                            this.stream_name = item.stream_name;
                            return;
                        }
                        var that = this;
                        if (that.special.type == 5) {
                            switch (that.active) {
                                case 1:
                                    this.goPlayTsak(item);
                                    break;
                                case 2:
                                    location.href = $h.U({ c: "special", a: "details", q: { id: item.id } });
                                    break;
                            }
                        } else {
                            this.goPlayTsak(item);
                        }
                    },
                    //获取课程列表
                    getCourseList: function () {
                        var that = this;
                        if (this.otherLoading) return;
                        if (this.otherLoaded) return;
                        this.otherLoadTitle = '';
                        this.otherLoading = true;
                        app.baseGet($h.U({ c: 'special', a: 'get_course_list', q: this.where }), function (res) {
                            var data = res.data.data,
                                list = data.list || [],
                                taskList = [];
                            list.forEach(function (item, index) {
                                item.active = index ? false : true;
                            })
                            taskList = $h.SplitArray(list, that.otherTaskList);
                            that.where.page = data.page;
                            that.otherLoaded = list.length < that.where.limit;
                            that.otherLoadTitle = that.otherLoaded ? '我也是有底线的' : '上拉加载更多';
                            that.otherLoading = false;
                            that.$set(that, 'otherTaskList', taskList);
                            that.$nextTick(function () {
                                that.bScrollInit();
                            });
                        }, function (res) {
                            that.otherLoading = false;
                            that.otherLoadTitle = '加载更多';
                        });
                    },
                    //获取专栏专题素材列表
                    getCloumnTask: function () {
                        var that = this;
                        if (this.columnLoading) return;
                        if (this.columnLoaded) return;
                        this.columnLoadTitle = '';
                        this.columnLoading = true;
                        app.baseGet($h.U({ c: 'special', a: 'get_cloumn_task', q: this.where }), function (res) {
                            var data = res.data.data;
                            var list = data.list || [];
                            var taskList = $h.SplitArray(list, that.columnTaskList);
                            that.where.page = data.page;
                            that.columnLoaded = list.length < that.where.limit;
                            that.columnLoadTitle = that.columnLoaded ? '我也是有底线的' : '上拉加载更多';
                            that.columnLoading = false;
                            that.$set(that, 'columnTaskList', taskList);
                            that.$nextTick(function () {
                                that.bScrollInit();
                            });
                        }, function (res) {
                            that.columnLoading = false;
                            that.columnLoadTitle = '加载更多';
                        });
                    },
                    //获取直播回放
                    getLiveTask: function () {
                        var that = this;
                        if (this.liveLoading) return;
                        if (this.liveLoaded) return;
                        this.liveLoadTitle = '';
                        this.liveLoading = true;
                        app.baseGet($h.U({ c: 'live', a: 'get_live_record_list', q: { special_id: that.special.id,page:that.where.page,limit:that.where.limit } }), function (res) {
                            var data = res.data.data.data;
                            var list = data || [];
                            var taskList = $h.SplitArray(list, that.liveTaskList);
                            that.where.page = that.where.page + 1;
                            that.liveLoaded = list.length < that.where.limit;
                            that.liveLoadTitle = that.liveLoaded ? '我也是有底线的' : '上拉加载更多';
                            that.liveLoading = false;
                            that.$set(that, 'liveTaskList', taskList);
                            that.$nextTick(function () {
                                that.bScrollInit();
                            });
                        }, function (res) {
                            that.liveLoading = false;
                            that.liveLoadTitle = '加载更多';
                        });
                    },
                    //播放素材
                    goPlayTsak: function (item) {
                        var that = this;
                        app.baseGet($h.U({ c: 'special', a: 'get_task_link', q: { task_id: item.id, special_id: item.special_id } }), function (res) {
                            if (that.special.type == 4) {
                                window.location.href = $h.U({ c: 'live', a: 'index', q: { stream_name: item.stream_name, special_id: item.special_id, live_id: item.live_id } });
                            } else {
                                app.baseGet($h.U({ c: 'special', a: 'play_num', q: { task_id: item.id, special_id: item.special_id } }),function (res) {
                                  if(res.data.code==200){
                                     if (that.special.type == 1 || item.type==1) {
                                        window.location.href = $h.U({ c: "special", a: "task_text_info", q: { id: item.id, specialId: item.special_id } });
                                      } else {
                                        window.location.href = $h.U({ c: "special", a: "task_info", q: { id: item.id, specialId: item.special_id } });
                                      }
                                  }else{
                                      return $h.showMsg('更新数据有误！');
                                  }
                                });
                            }
                        }, function (err) {
                            return $h.pushMsgOnce(err);
                        })
                    },
                    //滑动底部加载
                    bScrollInit: function () {
                        var that = this;
                        $h.EventUtil.listenTouchDirection(document, function () {
                            if (that.special.type == 5) {
                                that.columnLoading == false && that.getCloumnTask();
                            } else {
                                that.otherLoading == false && that.getCourseList();
                            }
                        }, false);
                    },
                    //获取参加拼团跳转链接
                    getAttendUrl: function (pink_id, special_id) {
                        return $h.U({ c: 'special', a: 'details', q: { id: special_id, pinkId: pink_id } }) + '#partake';
                    },
                    //收藏和取消收藏
                    collect: function () {
                        app.baseGet($h.U({ c: 'special', a: 'collect', q: { id: this.special.id } }), function (res) {
                            if (this.special.collect)
                                $h.pushMsgOnce('取消收藏成功');
                            else
                                $h.pushMsgOnce('收藏成功');
                            this.special.collect = this.special.collect ? false : 1;
                        }.bind(this));
                    },
                    customerService:function(){
                        app.baseGet($h.U({ c: 'index', a: 'user_login' }), function (res) {
                            window.location.href = $h.U({ c: 'service', a: 'service_list' });
                        }.bind(this), function (res) {
                            this.appear = false;
                        }.bind(this));
                    },
                    //打开支付插件,并检测登录状态,没有登录,打开登录插件
                    OpenPay: function (is_pink) {
                        this.pay_type_num = is_pink;
                        app.baseGet($h.U({ c: 'index', a: 'user_login' }), function (res) {
                            switch (is_pink) {
                                case 1:
                                    this.money = (this.isMember && this.special.member_pay_type == 1) ? this.special.member_money : this.special.money;
                                    this.payment = false;
                                    break;
                                case 2:
                                    if (this.isMember) {
                                        this.money = this.special.member_pay_type ? this.special.member_money : 0;
                                    } else {
                                        this.money = this.special.money;
                                    }
                                    this.payment = false;
                                    break;
                                case 3:
                                    this.money = this.special.pink_money;
                                    this.payment = false;
                                    break;
                                case 4:
                                    this.payment = true;
                                    app.baseGet($h.U({ c: 'special', a: 'receive_gift', q: { orderId: orderId } }), function (res) {
                                        $h.showMsg({
                                            title: res.data.msg,
                                            icon: 'success',
                                            success: function () {
                                                window.location.href = $h.U({ c: 'index', c: 'index' });
                                            }
                                        })
                                    });
                                    break;
                                case 5:
                                    location.hash = '#tash';
                                    $('body,html').animate({ scrollTop: $(this.$refs.list).offset().top }, 800);
                                    this.is_pay = true;
                                    this.paid = false;
                                    this.active = 1;
                                    break;
                                case 6:
                                    if (this.liveInfo.studio_pwd && this.special.pay_type == 2) {
                                        this.password = true;
                                    } else {
                                        window.location.href = $h.U({
                                            c: 'live',
                                            a: 'index',
                                            q: { stream_name: this.stream_name, record_id: this.RecordId }
                                        });
                                    }
                                    break;
                            }
                        }.bind(this), function (res) {
                            this.appear = false;
                        }.bind(this));
                    },
                    ReceiveGift: function () {
                        var that = this;
                        if (!orderId) return;
                        app.baseGet($h.U({ c: 'special', a: 'receive_gift', q: { orderId: orderId } }), function (res) {
                            $h.showMsg({
                                title: res.data.msg,
                                icon: 'success',
                                success: function () {
                                    window.location.href = $h.U({ c: 'index', a: 'index' });
                                }
                            })
                        });
                    },
                    //关闭登录
                    loginClose: function (value) {
                        this.appear = value;
                    },
                    //关闭支付
                    payClose: function (value) {
                        this.payment = value;
                    },
                    //登录完成回调事件
                    logComplete: function () {
                        var that=this;
                        that.appear = true;
                        app.baseGet($h.U({ c: 'special', a: 'isMember' }), function (res) {
                            var isMember=res.data.data.is_member;
                            that.isMember=isMember;
                            that.now_money=res.data.data.now_money;
                            switch (that.pay_type_num) {
                                case 1:
                                    that.money = (isMember && that.special.member_pay_type == 1) ? that.special.member_money : that.special.money;
                                    break;
                                case 2:
                                    if (isMember) {
                                        that.money = that.special.member_pay_type ? that.special.member_money : 0;
                                    } else {
                                        that.money = that.special.money;
                                    }
                                    break;
                                case 3:
                                    that.money = that.special.pink_money;
                                    break;
                            }
                        });
                        if (that.pay_type_num != 4) that.payment = false;
                        if (that.pay_type_num == 6) that.payment = true;
                    },
                    //所有插件回调处理事件
                    changeVal: function (opt) {
                        if (typeof opt != 'object') opt = {};
                        var action = opt.action || '';
                        var value = opt.value || '';
                        this[action] && this[action](value);
                    },
                    CountDown: function (opt, that) {
                        if (typeof opt != 'object') opt = {};
                        var name = opt.name || '', value = null, that = that ? that : this;
                        if (name.indexOf('.') === -1)
                            value = that[name];
                        else {
                            var nameArray = name.split('.');
                            value = that[nameArray[0]][nameArray[1]];
                        }
                        var tiem = opt.time || 1000, timeName = opt.time_name || 'datatime', strName = { hour: "00", minute: "00", second: "00" },
                            outputName = opt.output || 'difftime';
                        if (!name) return false;
                        if (value === undefined) return false;
                        opt.nowTime = function () {
                            if (Array.isArray(value)) {
                                for (var i = 0; i < value.length; i++) {
                                    var intDiff = value[i][timeName] - Date.parse(new Date()) / 1000;//获取数据中的时间戳的时间差；
                                    var days = 0, hour = 0, minute = 0, second = 0;
                                    if (intDiff > 0) {
                                        hour = Math.floor(intDiff / (60 * 60)) - (days * 24);
                                        minute = Math.floor(intDiff / 60) - (hour * 60);
                                        second = Math.floor(intDiff) - (hour * 60 * 60) - (minute * 60);
                                        if (hour <= 9) hour = '0' + hour;
                                        if (minute <= 9) minute = '0' + minute;
                                        if (second <= 9) second = '0' + second;
                                        strName = {
                                            hour: hour,
                                            minute: minute,
                                            second: second
                                        };
                                    } else {
                                        strName = {
                                            hour: "00",
                                            minute: "00",
                                            second: "00"
                                        };
                                    }
                                    value[i][outputName] = strName;
                                }
                                that.$set(that, name, value);
                            } else {
                                var intDiff = value[timeName] - Date.parse(new Date()) / 1000;
                                var days = 0, hour = 0, minute = 0, second = 0;
                                if (intDiff > 0) {
                                    hour = Math.floor(intDiff / (60 * 60)) - (days * 24);
                                    minute = Math.floor(intDiff / 60) - (hour * 60);
                                    second = Math.floor(intDiff) - (hour * 60 * 60) - (minute * 60);
                                    if (hour <= 9) hour = '0' + hour;
                                    if (minute <= 9) minute = '0' + minute;
                                    if (second <= 9) second = '0' + second;
                                    strName = {
                                        hour: hour,
                                        minute: minute,
                                        second: second
                                    };
                                } else {
                                    strName = {
                                        hour: "00",
                                        minute: "00",
                                        second: "00"
                                    };
                                }
                                if (name.indexOf('.') === -1)
                                    that.$set(that[name], outputName, strName);
                                else {
                                    var nameArray = name.split('.');
                                    that.$set(that[nameArray[0]][nameArray[1]], outputName, strName);
                                }
                            }
                        };
                        opt.nowTime();
                        setInterval(opt.nowTime, tiem);
                    },
                    //播放回放
                    playBackRecord: function (item) {
                        this.RecordId = item;
                        this.OpenPay(6);
                    },
                },
            });
        })

</script>
{/block}