<!-- 课程详情 --- 专区 -->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
    <meta charset="UTF-8">
    <title>专区</title>
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=0.5, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>
    <meta http-equiv="Pragma" content="no-cache"/>
    <meta http-equiv="Expires" content="0"/>
    <meta name="sharetitle" content=""/>
    <meta name="sharedesc" content=""/>
    <meta name="sharepic" content=""/>
    <!--    <meta name="shareurl" :content="" />-->

    <script src="/static/js/jquery-3.5.1.min.js?v=" +Math.random()></script>
    <script src="/static/js/common.js?v=" +Math.random()></script>
    <script>
        document.write('<link href="/static/css/web/course/course-prefecture-list.css?v=' + Math.random() + '" rel="stylesheet" type="text/css"/>');
    </script>
    <link rel="stylesheet" href="/static/css/swiper-bundle.min.css">
    <link rel="stylesheet" href="/web/css/common.css">
    <link rel="stylesheet" href="/static/css/web/course/page.css">
    <link rel="stylesheet" href="/static/css/web/comment.css">
    <link href="/static/web/js/layer.css" rel="stylesheet">
    <link href="/web/css/new.css" rel="stylesheet"/>
    <script src="/static/js/swiper-bundle.min.js"></script>
    <script src="/static/js/ucenter.js?v=" +Math.random()></script>
    <script src="/static/web/js/layer.js"></script>
    <script src="/static/js/wxLogin.js?v=" +Math.random()></script>
    <script src="/static/js/md5.js?v=" +Math.random()></script>
    <script type="text/javascript" src="/static/js/checkysrz.js"></script>
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?0305f34866fc4fe377f1bec6dc84d92f";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
})();
</script>
</head>
<body>
<div class="container">
    <div th:include="web/common::common-header-web"></div>
    <div th:include="web/common::common-conMusic"></div>
    <div>
        <link href="/static/css/html5/common.css" rel="stylesheet" type="text/css"/>
    </div>

    <input type="hidden" th:value="${id}" id="id" class="id">
    <input type="hidden" value="" id="memToken" class="memToken">


    <div class="page-loading" v-if="!pageLoaded">
        <div></div>
        <div></div>
    </div>

    <template v-else>
        <div class="page-container">
            <div class="banner-container">
                <div class="leftcss">
                    <div class="swiper-container" v-if="ad.length > 0">
                        <div class="swiper-wrapper">
                            <div v-for="(item,i) in ad" class="swiper-slide">
                                <img @click="gotoAdHtml(item.rcmdUrl)" :src="item.rcmdImgpath"
                                     style="width:700px;height: 300px">
                            </div>
                        </div>
                        <div class="swiper-pagination"></div>
                    </div>
                    <img v-else width="100%" height="100%" :src="'http://files.qkyxzx.com/' + info.coverImg" alt="">
                </div>
                <div class="rightcss">
                    <div class="title">{{info.title}}</div>
                    <div class="description">
                        <div class="description-item">
                            <i></i>
                            <span v-if="info.studyNumTOW>9999">{{(info.studyNumTOW / 10000).toFixed(2)}}万人次学习</span>
                            <span v-else>{{info.studyNumTOW||0}}人次学习</span>
                        </div>
                        <div class="description-item">
                            <i></i>
                            <span>{{info.totalClassHours}}讲</span>
                        </div>
                    </div>

                    <div class="price-container">
                        <p v-if="info.price != 0" class="price-wrap">
                            <span>￥</span>{{info.price}}
                        </p>
                        <p v-else class="price-wrap">
                            {{info.point}}<span>积分</span>
                        </p>
                    </div>

                    <button v-if="(info.isBuy == 0 && info.isSell == 0) && ((info.price==0 &&info.pointFlag==0) || (info.price==0 && info.pointFlag==1 && info.point==0))"
                            class="buy-btn" @click="addFreeBuyApi">免费领取
                    </button>

                    <button v-else-if="(info.isBuy == 0 && info.isSell == 0) && (info.pointFlag==1 && info.point > 0) "
                            class="buy-btn" @click="toPay">立即购买
                    </button>
                    <button v-else-if="(info.isBuy == 0 && info.isSell == 0) && (info.price>0)" class="buy-btn"
                            @click="toPay">立即购买
                    </button>
                    <button :title="collect ? '已收藏，可在我的收藏中查看' : ''" type="button" class="collect-btn"
                            :class="collect ? 'collected' : ''" @click="collectFn()">
                        <img class="collectImg" :src="collectImgSrc"/>
                        {{collect ? '已收藏' : '收藏'}}
                    </button>
                </div>
            </div>
            <div class="main-container">
                <div class="main-left">
                    <!-- Tab -->
                    <div class="tab-container">
                        <div tabId="1" v-for="(item,i) in cata" :class="{active : item.id == activeId}"
                             @click="chooseTab(i)"
                             class="tab-item">{{item.name}}
                        </div>
                    </div>
                    <!-- Tab Content -->
                    <transition-group name="fade" tag="div">
                        <!-- Tab Content ====== 目录 ======= -->
                        <div class="tab-content" v-show="transLoaded && activeId === 1" v-if="list.length > 0"
                             key="tab-dir">
                            <template v-for="(item, i) in list">
                                <div class="course-card" @click="courseDetails(item.id)" v-if="list[i]">
                                    <img :src="'http://files.qkyxzx.com/'+item.coverImg" :alt="item.title"
                                         class="course-card-cover">
                                    <p class="course-card-title">{{item.title}}</p>
                                    <div class="course-card-footer">
                                        <p class="course-card-desc" v-if="item.studyNumTOW>9999">{{item.totalClassHours}}讲 · {{(item.studyNumTOW / 10000).toFixed(2)}}万人次学习</p>
                                        <p class="course-card-desc" v-else>{{item.totalClassHours}}讲 · {{item.studyNumTOW||0}}人次学习</p>
                                        <p class="course-card-price"
                                           v-if="item.isBuy == 0 && item.pointFlag == 0 && item.price > 0">
                                            <span>￥</span>{{item.price}}
                                        </p>
                                        <p class="course-card-price"
                                           v-if="item.isBuy == 0 && (item.pointFlag == 1 || item.pointFlag == 0) && item.point == 0">
                                            免费</p>
                                        <p class="course-card-price"
                                           v-if="item.isBuy == 0 && item.pointFlag == 1 && item.point > 0">{{ item.point
                                            }}<span>积分</span></p>
                                    </div>
                                </div>
                            </template>
                        </div>

                        <!-- Tab Content ====== 详情 ======= -->
                        <div class="tab-content" v-show="transLoaded && activeId === 2" v-html="info.details"
                             key="tab-detail"></div>
                        <!--     评论  -->
                        <div key="comment" class="tab-content" v-show="transLoaded && activeId === 3">
                            <comment :list="comments"></comment>
                        </div>
                    </transition-group>
                </div>
                <!-- 右侧：加入圈子、广告、咨询推荐 -->
                <div class="right-content-container">
                    <div class="in_main_rightbox" style="margin: 20px">
                        <!--加入圈子-->
                        <div class="joinus">
                            <div class="tjtitle">加入圈子</div>
                            <div class="joinbox">
                                <div class="joinlistbox" v-for="(item,i) in queryQrCode">
                                    <div class="qunnamne">{{item.name}}</div>
                                    <div class="joinbtn">加入</div>
                                    <div class="qewmbox">
                                        <div class="qewmpic"><img :src="item.qrImg"></div>
                                        <div class="qewmright">
                                            <span class="qunliaotitle">扫码加入群聊</span>
                                            <span class="qunliaotext">进群请备注一下您的姓名、城市、职称</span>
                                        </div>
                                        <div class="clear"></div>
                                    </div>
                                    <div class="clear"></div>
                                </div>
                            </div>
                        </div>

                        <!--广告位置-->
                        <div class="adboxright">
                            <img src="/static/web/img/adtest.jpeg">
                        </div>

                        <!--资讯推荐-->
                        <div class="zixunlistbox">
                            <div class="haveckgd">
                                <div class="tjtitle">资讯推荐</div>
                                <a class="lookmore" href="/view/index?from=web" target="_blank">查看更多</a>
                                <div class="clear"></div>
                            </div>
                            <div class="zxtjbox" v-if="consulting.length > 0">
                                <div class="zxlisttext">
                                    <a class="zxtjtextbox" v-for="(item,i) in consulting"
                                       :href="'/view/detail?from=web&artId=' + item.rcmdObjId" target="_blank">
                                        <span class="zxtjlistnu threelist">{{ i+1 }}</span>
                                        <div class="zxtjlistbitle">
                                            <div class="zxtitle">{{item.rcmdTitle}}</div>
                                            <div class="zxdatabox">
                                                <span>{{item.author}}</span>
                                                <span>{{item.click}}阅读</span>
                                            </div>
                                        </div>
                                        <div class="clear"></div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </template>
    <!--底部公共区域-->
    <div th:include="web/common::common-bottom-web"></div>
    <!--返回顶部-->
    <div th:include="web/common::common-back-web"></div>

</div>

</body>
<script src="/static/js/vue.js"></script>
<script type="text/javascript" src="/static/js/jquery.cookie.js"></script>
<script type="text/javascript" src="/static/js/checkysrz.js"></script>
<script src="/web/js/common.js"></script>

<script>
    document.write('<script src="/static/js/web/course/course-prefecture-list.js?v=' + Math.random() + '"><\/script\>');
</script>
<script>
    document.write('<script src="/static/js/web/comment.js?v=' + Math.random() + '"><\/script\>');
</script>
<script src="/web/js/common.js"></script>

<script src="/static/js/jweixin-1.0.0.js"></script>
<script src="/static/js/wxshare.js?version=20220630"></script>
</html>


<!--<div class="layerform" id="smrz" style="display: none">-->
<!--    <div class="layertitle">实名认证</div>-->
<!--    <p class="redtxt">注:应国家相关法律要求,请认真填写信息,同时方便我们给您邮寄学习资料</p>-->
<!--    <form class="writeform">-->

<!--        <div>-->
<!--            <label>真实姓名：</label><span><input id="userName" placeholder="请输入真实姓名" type="text"/></span></div>-->
<!--        <div>-->
<!--            <label>性别：</label><span><span class="magic-radiobox"><input id="r1" class="magic-radio"-->
<!--                                                                        name="sex"-->
<!--                                                                        type="radio" value="1">-->
<!--            <label for="r1">男</label>&nbsp;&nbsp;&nbsp;-->
<!--            <input id="r2" checked class="magic-radio" name="sex" type="radio" value="2">-->
<!--            <label for="r2">女</label> </span></span></div>-->

<!--        <div>-->
<!--            <label>证件号码：</label><span><input id="card" placeholder="请输入证件号码" type="text"/></span></div>-->
<!--        <div>-->
<!--            <label>从业经验：</label><span><select id="experience">-->
<!--            <option value="-1">请选择</option>-->
<!--									<option value="1">1-3年</option>-->
<!--									<option value="2">3-5年</option>-->
<!--									<option value="3">3-5年</option>-->
<!--									<option value="4">3-5年</option>-->
<!--									<option value="5">3-5年</option>-->
<!--        </select></span></div>-->

<!--        <div>-->
<!--            <label>单位名称：</label><span><input id="unitName" placeholder="请输入" type="text"/></span></div>-->
<!--        <div>-->
<!--            <label>科室名称：</label><span><input id="department" placeholder="请输入" type="text"/></span></div>-->
<!--        <div>-->
<!--            <label>单位详细地址：</label><span><input id="address" placeholder="请输入单位详细地址" type="text"/></span></div>-->


<!--        <div>-->
<!--            <label></label><span>-->
<!--            <button class="ysrzbtn" name="Abutton1" id="submitInfo" type="button">提交信息-->
<!--            </button></span></div>-->
<!--    </form>-->
<!--</div>-->

<!--预约直播后提示用户关注服务号会给推送消息-->
<!--<div class="layerform" id="ysrz" style="display: none">-->
<!--    <div class="layertitle">医师信息</div>-->
<!--    <form class="writeform">-->
<!--        <div><label><i>*</i>职称1：</label><span>-->
<!--            <select id="professional" name="Select1"> </select>-->
<!--        </span></div>-->
<!--        <div><label><i>*</i>职称2：</label><span>-->
<!--            <select id="professionalTwo" name="Select1">-->
<!--                <option value=''>请选择</option>-->
<!--            </select>-->
<!--        </span></div>-->
<!--        <div><label><i>*</i>职务：</label><span>-->
<!--            <select id="post" name="Select1"></select>-->
<!--        </span></div>-->
<!--        <div><label><i>*</i>执业编码：</label><span>-->
<!--            <input id="businessLicense" name="Text1" type="text" placeholder="请输入医师执业资格证书编码"/>-->
<!--        </span></div>-->
<!--        <div><label></label><span>-->
<!--            <button name="Abutton1" type="button" id="submitInformation"-->
<!--                    class="ysrzbtn">提交信息</button>-->
<!--        </span></div>-->

<!--    </form>-->
<!--</div>-->

<!--预约直播后提示用户关注服务号会给推送消息-->
<!--<div class="layerform" id="wjdc" style="display: none">-->
<!--    <div class="layertitle">问卷调查</div>-->
<!--    <form class="writeform" id="writeform">-->

<!--    </form>-->
<!--</div>-->


<!--直播报名需要采集的信息-->
<div class="caijbox" style="display: none">
    <div class="caijialert">
        <div class="tijiaoform">
            <span class="caijititle">信息采集</span>
            <input type="text" name="" placeholder="信息采集">
            <input type="text" name="" placeholder="信息采集">
            <input type="text" name="" placeholder="信息采集">
            <input type="text" name="" placeholder="信息采集">
        </div>
        <div class="tijiaobtn">信息提交</div>
        <span class="closebtn">关闭</span>
    </div>
</div>


<!--视频播放完问题弹窗-->
<div class="layerform" id="wd" style="display: none">
    <div class="layertitle">问答</div>
    <form class="writeform">
        <div><label><i>*</i>您是否学会本课程，为什么？</label>
            <span style="display:block;">
                <input id="sfxh" name="Text1" type="text" placeholder="请输入答案"/>
            </span>
        </div>
        <div><label></label><span>
            <button type="button" id="submitWd"
                    class="ysrzbtn">提交</button>
        </span></div>
    </form>
</div>
<!--认证信息公共部分-->
<div th:include="web/common::common-authentication"></div>
<script type="text/javascript" src="/static/js/web/authentication.js"></script>
