Merge branch 'ETA1.0.8'

package.json

@@ -16,6 +16,7 @@
     "lodash": "^4.17.21",
     "normalize.css": "^8.0.1",
     "vue": "^3.3.4",
+    "vue-qr": "^4.0.9",
     "vue-router": "^4.0.12"
   },
   "devDependencies": {

src/api/trainingVideoApi.js

@@ -0,0 +1,38 @@
+import {get,post} from './index'
+
+/**
+ * 获取分类列表
+ */
+export function apiClassifyList(params){
+    return get('/training_video/classify/tree',params)
+}
+/**
+ * 获取标签列表
+ */
+export function apiTagList(params){
+    return get('/training_video/tag/list',params)
+}
+/**
+ * 获取视频列表
+ * @param {Object} params 
+ * @param {Number} params.page_size
+ * @param {Number} params.current_index
+ * @param {String} params.keyword
+ * @param {Boolean} params.is_new 是否最新：true-是；false-否
+ * @param {Boolean} params.is_hot 是否最热：true-是；false-否
+ * @param {Number} params.classify_id
+ * @param {String} params.tag_ids 标签IDs, 英文逗号拼接
+ */
+export function apiVideoList(params){
+    return get('/training_video/video/page_list',params)
+}
+/**
+ * 获取视频详情
+ * @param {Object} params 
+ * @param {String} params.video_code
+ * @param {String} params.business_code
+ * @returns 
+ */
+export function apiVideoDetail(params){
+    return get('/training_video/video/detail',params)
+}

src/assets/css/style.scss

@@ -4,4 +4,20 @@ li {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
+}
+
+.word-ellipsis{
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+}
+
+.simple-center{
+    display: flex;
+    align-items: center;
+}
+
+.simple-between{
+    display:flex;
+    justify-content:space-between;
 }

src/layouts/Index.vue

@@ -4,10 +4,20 @@
 <template>
     <div class="layout-wrap">
         <div class="header">
-            <div class="logo">
-                <img src="~@/assets/img/logo.png"/>
-            </div>
-            <div class="title">{{ $route.meta.title }}</div>
+            <template v-if="!['/video/detail','/video/list'].includes($route.path)">
+                <div class="logo">
+                    <img src="~@/assets/img/logo.png"/>
+                </div>
+                <div class="title">{{ $route.meta.title }}</div>
+            </template>
+            <template v-else>
+                <div class="logo-video">
+                    <img src="~@/assets/img/logo2.png"/>
+                </div>
+                <div class="title-video">
+                    <img src="~@/assets/img/title-icon.png" v-if="$route.path==='/video/list'"/>
+                    {{ $route.meta.title }}</div>
+            </template>
             <!-- teleport -->
             <div class="layout-header-other"></div>
         </div>
@@ -40,6 +50,22 @@
         .title{
             font-size: 18px;
         }
+        .logo-video{
+            margin-left: 100px;
+            width:100px;
+        }
+        .title-video{
+            margin-left: 70px;
+            margin-right: auto;
+            display: flex;
+            align-items: center;
+            img{
+                margin-right: 10px;
+            }
+        }
+        @media screen and (max-width:650px){
+            display: none;
+        }
     }
 }
 </style>

src/router/index.js

@@ -22,6 +22,22 @@ const routes=[
                     title: "ETA投研系统更新日志",
                 },
             },
+            {
+                path:"/video/list",
+                name:"VideoList",
+                component:() => import("@/views/trainingVideo/List.vue"),
+                meta:{
+                    title:"培训课程"
+                }
+            },
+            {
+                path:"/video/detail",
+                name:"VideoDetail",
+                component:() => import("@/views/trainingVideo/Detail.vue"),
+                meta:{
+                    title:""
+                }
+            },
         ]
     },
     {

src/views/trainingVideo/Detail.vue

@@ -0,0 +1,192 @@
+<script setup>
+import { onMounted , onUnmounted , ref,reactive, onDeactivated} from 'vue';
+import {apiVideoDetail} from '@/api/trainingVideoApi';
+import { useRoute} from "vue-router";
+import vueQr from 'vue-qr/src/packages/vue-qr.vue';
+import { ElMessage } from 'element-plus';
+
+const route = useRoute()
+let videoData = ref({})
+let qrCodeUrl = ref('')
+let offsetWidth = ref(0)
+
+function getVideoDetail(){
+    const {video_code,bus_code}=route.query
+    apiVideoDetail({
+        video_code,
+        bus_code
+    }).then(res=>{
+        if(res.code!==200) return
+        videoData.value = res.data
+        getQrCodeUrl()
+    })
+}
+function getQrCodeUrl(){
+    qrCodeUrl.value = window.location.href
+}
+async function copyLink(){
+    if(navigator.clipboard&&window.isSecureContext){
+         try{
+            await navigator.clipboard.writeText(qrCodeUrl.value)
+            ElMessage({message:'复制链接成功',type:'success'})
+        }catch(err){
+            console.log(err);
+            ElMessage({message:'复制链接失败',type:'error'})
+        }
+    }else{
+        const input = document.createElement('input')
+        input.setAttribute('readonly','readonly')
+        input.value = qrCodeUrl.value
+        document.body.appendChild(input)
+        input.select();
+        document.execCommand('copy');
+        document.body.removeChild(input);
+        ElMessage({message:'复制链接成功',type:'success'})
+    }
+}
+
+function changeOffsetWidth(){
+    offsetWidth.value = document.body.offsetWidth
+}
+
+onMounted(()=>{
+    getVideoDetail()
+    changeOffsetWidth()
+    window.addEventListener('resize',changeOffsetWidth)
+})
+onUnmounted(()=>{
+    window.removeEventListener('resize',changeOffsetWidth)
+})
+
+</script>
+
+<template>
+    <div class="video-detail-wrap">
+        <div class="video-main-box" v-show="route.query.video_code&&offsetWidth>650">
+            <h3 class="video-title">{{videoData.Title}}</h3>
+            <div class="video-box">
+                <video :src="videoData.VideoUrl" controls></video>
+            </div>
+            <div class="video-info-box">
+                <div class="simple-between">
+                    <div class="tag-box">
+                        <span class="tag-item" v-for="tag in videoData.Tags" :key="tag.TagId">{{tag.TagName}}</span>
+                    </div>
+                    <el-popover
+                        placement="bottom-start"
+                        :width="200"
+                        trigger="click"
+                    >
+                        <template #reference>
+                            <div class="share-btn simple-center"><el-icon style="margin-right: 5px;"><Share /></el-icon>分享</div>
+                        </template>
+                        <div class="pop-box">
+                            <div class="copy-link simple-center" style="cursor: pointer;" @click="copyLink">
+                                <el-icon style="margin-right: 5px;"><Link /></el-icon>复制链接
+                            </div>
+                            <div class="code-scan">
+                                <p><img src="~@/assets/img/icon/wx_icon.svg"> 微信扫一扫</p>
+                                <div class="qr-code" style="text-align:center;">
+                                    <vueQr :text="qrCodeUrl" :size="120" :margin="0" v-if="qrCodeUrl"></vueQr>
+                                </div>
+                            </div>
+                        </div>
+                    </el-popover>
+                </div>
+                <div class="simple-center" style="margin-top: 20px;">
+                    <span>{{videoData.PublishTime}}</span>
+                    <span class="simple-center"><el-icon style="margin: 0 5px 0 15px;"><VideoPlay /></el-icon>{{videoData.ViewTotal}}</span>
+                </div>
+                <p class="introduce">{{videoData.Introduce}}</p>
+            </div>
+        </div>
+        <div class="video-mobile-box" v-show="route.query.video_code&&offsetWidth<=650">
+            <div class="video-box">
+                <video :src="videoData.VideoUrl" controls></video>
+            </div>
+            <h4 class="video-title">{{videoData.Title}}</h4>
+            <div class="tag-box">
+                <span class="tag-item" v-for="tag in videoData.Tags" :key="tag.TagId">{{tag.TagName}}</span>
+            </div>
+            <div class="simple-between" style="margin-top: 20px;">
+                <span class="simple-center"><el-icon style="margin-right:5px;"><VideoPlay /></el-icon>{{videoData.ViewTotal}}</span>
+                <span>{{videoData.PublishTime}}</span>
+            </div>
+            <p class="introduce">{{videoData.Introduce}}</p>
+        </div>
+        <div v-if="!route.query.video_code">
+            暂无视频信息
+        </div>
+
+    </div>
+</template>
+
+<style scoped lang="scss">
+.video-detail-wrap{
+    background-color:#F2F6FA;
+    height: calc(100vh - 60px);
+    box-sizing: border-box;
+    padding:10px;
+    @media screen and (max-width:650px){
+        padding: 0;
+        height: 100vh;
+        /* margin-top: -60px; */
+    }
+    .video-title{
+        margin:0 0 20px 0;
+    }
+    .video-box{
+        text-align: center;
+        background-color: #D9D9D9;
+        video{
+            /* width:100%; */
+            height:500px;
+            outline: none;
+        }
+    }
+    .introduce{
+        color: #999999;
+    }
+    .tag-item,.share-btn{
+        box-sizing: border-box;
+        padding:6px;
+        background-color: #ECF2FE;
+        color:#0052D9;
+        border-radius: 4px;
+        margin-right: 10px;
+    }
+    .video-main-box{
+        max-width: 1520px;
+        background-color: #fff;
+        margin: 0 auto;
+        box-sizing: border-box;
+        padding:40px 130px;
+        height:calc(100vh - 60px - 20px);
+        overflow-y: auto;
+        .video-info-box{
+            margin:20px 0;
+            .share-btn{
+                margin-right: 0;
+                cursor: pointer;
+            }
+        }
+    }
+    .video-mobile-box{
+        width:100%;
+        height: 100%;
+        background-color: #fff;
+        box-sizing: border-box;
+        padding: 10px;
+        .video-box{
+            background-color: transparent;
+            video{
+                width:100%;
+                height: auto;
+            }
+        }
+        .video-title{
+            margin-top: 20px;
+        }
+    }
+}
+</style>

src/views/trainingVideo/List.vue

@@ -0,0 +1,401 @@
+<script setup>
+import { computed, nextTick, onMounted , ref , watch} from 'vue';
+import { useRoute , useRouter} from "vue-router";
+import {apiClassifyList,apiTagList,apiVideoList} from '@/api/trainingVideoApi';
+import { ArrowLeftBold, ArrowRightBold, Search } from '@element-plus/icons-vue';
+import zhCn from 'element-plus/dist/locale/zh-cn.mjs';
+const route = useRoute()
+const router = useRouter()
+let classifyList = ref([]) //分类列表
+let choosedClassify = ref({ClassifyId:0}) //所选分类
+let choosedSubClassify = ref({ClassifyId:0}) //所选二级分类
+let isClassifyListExpand = ref(false) //分类列表是否展开
+let tagList = ref([]) //标签列表
+let choosedTags = ref([]) //所选标签
+let isTagListExpand = ref(false) //标签列表是否展开
+let videoList = ref([]) //视频列表
+let total = ref(0) //视频总数
+let currentIndex = ref(1) //列表页
+let keyword = ref('') //搜索词
+let selectValue = ref('New') //select筛选项
+
+let classifyWidth = 0 //分类列表宽度
+let tagWidth = 0 //标签列表宽度
+let boxWidth = 0 //列表父级的宽度
+
+let beforeMounted = ref(false)
+
+function getClassifyList(){
+    apiClassifyList().then(res=>{
+        if(res.code!==200) return 
+        classifyList.value = res.data&&res.data.List||[]
+        nextTick(()=>{
+            classifyWidth = document.querySelector(".classify-box .list").scrollWidth
+        })
+    })
+
+}
+
+function getTagList(){
+    apiTagList().then(res=>{
+        if(res.code!==200) return 
+        tagList.value = res.data||[]
+        nextTick(()=>{
+            tagWidth = document.querySelector(".tag-box .list").scrollWidth
+        })
+        
+    })
+}
+
+function changeClassify(classify,type){
+    if(type==='sub'){
+        choosedSubClassify.value = classify
+        choosedClassify.value = classifyList.value.find(i=>i.ClassifyId===classify.ParentId)
+    }else{
+        choosedClassify.value = classify
+        choosedSubClassify.value = {ClassifyId:0}
+    }
+    handleCurrentChange(1)
+}
+
+function changeTags(tag){
+    const {TagId} = tag
+    const index = choosedTags.value.findIndex(i=>i.TagId===TagId)
+    if(index!==-1){
+        choosedTags.value.splice(index,1)
+    }else{
+        choosedTags.value.push(tag)
+    }
+}
+watch(
+    ()=>choosedTags.value.length,
+    ()=>{
+        handleCurrentChange(1)
+    }
+)
+
+let currentClassifyId = computed(()=>{
+    return choosedSubClassify.value.ClassifyId||choosedClassify.value.ClassifyId
+})
+
+
+
+function getVideoList(){
+    apiVideoList({
+        page_size:15,
+        current_index:currentIndex.value,
+        keyword:keyword.value,
+        is_new:selectValue.value==='New',
+        is_hot:selectValue.value==='Hot',
+        classify_id:currentClassifyId.value,
+        tag_ids:choosedTags.value.map(i=>i.TagId).join(',')
+    }).then(res=>{
+        if(res.code!==200) return
+        if(res.data){
+            videoList.value = res.data.list||[]
+            total.value = res.data.page.total||0
+        }
+    })
+}
+function changePage(type){
+    const page = currentIndex.value
+    if(type==='minus'){
+        if(page===1) return 
+        handleCurrentChange(page-1)
+    }
+    if(type==='add'){
+        if(page===Math.ceil(total.value/15)) return 
+        handleCurrentChange(page+1)
+    }
+}
+function handleCurrentChange(page){
+    currentIndex.value = page
+    getVideoList()
+}
+
+function gotoVideoDetail(video){
+    const { VideoCode } = video
+    const {bus_code} = route.query
+    router.push({
+        path:'/video/detail',
+        query:{
+            video_code:VideoCode,
+            bus_code:bus_code||''
+        }
+    })
+}
+
+onMounted(()=>{
+    getClassifyList()
+    getTagList()
+    getVideoList()
+    beforeMounted.value = true
+    boxWidth = document.querySelector(".select").offsetWidth
+})
+
+
+</script>
+
+<template>
+    <div class="video-list-wrap">
+        <div class="select-wrap">
+            <div class="classify-box select">
+                <span style="align-self:flex-start;white-space: nowrap;padding-top: 8px;">分类:</span>
+                <div class="list" :class="{'expand':isClassifyListExpand}">
+                    <span class="list-item" :class="{'active':choosedClassify.ClassifyId===0}"
+                        @click="changeClassify({ClassifyId:0})">全部</span>
+                    <el-popover v-for="item in classifyList" :key="item.ClassifyId" :width="220">
+                        <div class="sub-list" v-if="item.Children.length">
+                            <span class="list-item" :class="{'active':choosedSubClassify.ClassifyId===subItem.ClassifyId}"
+                                v-for="subItem in item.Children" :key="subItem.ClassifyId"
+                                @click="changeClassify(subItem,'sub')">
+                                {{subItem.ClassifyName}}</span>
+                        </div>
+                        <template #reference>
+                            <span class="list-item" :class="{'active':choosedClassify.ClassifyId===item.ClassifyId}"
+                                @click="changeClassify(item)">{{item.ClassifyName}}
+                            </span>
+                        </template>
+                    </el-popover>
+                    
+                </div>
+                <div class="expand-btn" v-show="boxWidth<=classifyWidth" @click="isClassifyListExpand = !isClassifyListExpand">
+                    {{isClassifyListExpand?'收起':'展开'}}
+                    <el-icon :class="{'expand':isClassifyListExpand}"><ArrowRightBold /></el-icon>
+                </div>
+            </div>
+            <div class="tag-box select">
+                <span style="align-self:flex-start;white-space: nowrap;padding-top: 8px;">标签:</span>
+                <div class="list" :class="{'expand':isTagListExpand}">
+                    <span class="list-item" :class="{'active':choosedTags.length===0}"
+                        @click="choosedTags = []">全部</span>
+                    <span class="list-item" :class="{'active':choosedTags.findIndex(i=>i.TagId===item.TagId)!==-1}"
+                        v-for="item in tagList" :key="item.TagId" @click="changeTags(item)">{{item.TagName}}</span>
+                </div>
+                <div class="expand-btn" v-show="boxWidth<=tagWidth" @click="isTagListExpand = !isTagListExpand">
+                    {{isTagListExpand?'收起':'展开'}}
+                    <el-icon :class="{'icon-expand':isTagListExpand}"><ArrowRightBold /></el-icon>
+                </div>
+            </div>
+        </div>
+        <div class="select-box">
+            <!-- <el-select v-model="selectValue" placeholder="Select" size="large" @change="handleCurrentChange(1)">
+                <el-option label="最新" value="New"/>
+                <el-option label="最热" value="Hot"/>
+            </el-select> -->
+            <el-radio-group v-model="selectValue" size="large" @change="handleCurrentChange(1)" fill="#0052D9">
+                <el-radio-button label="New">最新</el-radio-button>
+                <el-radio-button label="Hot">最热</el-radio-button>
+            </el-radio-group>
+            <span class="path" style="margin-left: 20px;">
+                <span>{{choosedClassify.ClassifyName||''}}
+                    <span v-if="choosedSubClassify.ClassifyId">/</span>
+                    {{choosedSubClassify.ClassifyName||''}}
+                </span>
+            </span>
+            <div class="quick-pagination">
+                <span>{{currentIndex}}/{{Math.ceil(total/15)}}</span>
+                <el-icon @click="changePage('minus')"><ArrowLeftBold /></el-icon>
+                <el-icon @click="changePage('add')"><ArrowRightBold /></el-icon>
+
+            </div>
+        </div>
+        <div class="list-wrap">
+            <div class="list-box">
+                <div class="list-item" v-for="item in videoList" :key="item.VideoId" @click="gotoVideoDetail(item)">
+                    <div class="list-image" :style="{background:`no-repeat top/contain url('${item.CoverImg}')`}"></div>
+                    <h4 class="word-ellipsis">{{item.Title}}</h4>
+                    <div class="tag-box">
+                        <span class="tag-item" v-for="tag in item.Tags" :key="tag.TagId">{{tag.TagName}}</span>
+                    </div>
+                    <p class="word-ellipsis" style="color:#999999;text-overflow: ellipsis;">{{item.Introduce}}&nbsp;</p>
+                    <div class="other">
+                        <span>{{item.PublishTime}}</span>
+                        <el-icon style="margin-left: auto;margin-right:5px;"><VideoPlay /></el-icon>{{item.ViewTotal}}
+                    </div>
+                </div>
+                <div class="empty-hint" v-if="videoList.length===0" style="width:100%;text-align: center;color: #999999;">
+                    <img src="~@/assets/img/nodata.png" alt="" style="width: 200px;"/>
+                    <p>{{keyword?`没有找到与“${keyword}”相关的课程`:'暂无课程'}}</p>
+                </div>
+            </div>
+        </div>
+        
+        <div class="page-box">
+            <el-config-provider :locale="zhCn">
+                <el-pagination
+                    v-model:current-page="currentIndex"
+                    layout="total,->,prev,pager,next,jumper" 
+                    :page-size="15" 
+                    :total="total"
+                    @current-change="handleCurrentChange"
+                >
+                </el-pagination>
+            </el-config-provider>
+            
+        </div>
+        <!-- teleport search -->
+        <Teleport to=".layout-header-other" v-if="beforeMounted">
+            <div class="search-box">
+                <el-input placeholder="搜索感兴趣的视频课程" size="large" clearable style="width:280px;"
+                :prefix-icon="Search" v-model.trim="keyword" @input="handleCurrentChange(1)"></el-input>
+            </div>
+        </Teleport>
+    </div>
+</template>
+
+<style scoped lang="scss">
+.video-list-wrap{
+   /*  padding:30px 120px 30px 120px; */
+    box-sizing: border-box;
+    background-color:#F2F6FA;
+    height: calc(100vh - 60px);
+    display: flex;
+    flex-direction: column;
+    .select-wrap{
+        background-color: #fff;
+        padding:30px 120px;
+    }
+    .select{
+        display: flex;
+        margin-bottom:20px;
+        position:relative;
+        &:last-child{
+            margin-bottom: 0;
+        }
+        .expand-btn{
+            position: absolute;
+            left:100%;
+            top:0;
+            bottom: 0;
+            padding:8px;
+            /* background-color: #F2F6FA; */
+            /* border: 1px solid gray; */
+            white-space: nowrap;
+            font-size: 14px;
+            cursor: pointer;
+            .el-icon{
+                font-size: 14px;
+                color:#0052D9;
+                vertical-align: bottom;
+            }
+        }
+        .icon-expand{
+            transform: rotate(90deg);
+        }
+        .list{
+            flex:1;
+            display: flex;
+            flex-wrap: nowrap;
+            overflow-x: hidden;
+            margin-left: 15px;
+            gap: 10px;
+            /* height:35px; */
+            &.expand{
+                flex-wrap: wrap;
+            }
+            .list-item{
+                box-sizing: border-box;
+                padding: 8px;
+                background-color: #fff;
+                border-radius: 4px;
+                white-space: nowrap;
+                cursor: pointer;
+                &.active,&:hover{
+                    color:#fff;
+                    background-color:#0052D9;
+                }
+            }
+        }
+    }
+    .select-box{
+        padding:0 120px;
+        margin-top: 20px;
+        display: flex;
+        align-items: center;
+        :deep(.el-radio-button__inner:hover){
+            color: #0052D9 !important;
+        }
+        .quick-pagination{
+            margin-left: auto;
+            font-size: 14px;
+            .el-icon{
+                margin-left: 10px;
+                cursor: pointer;
+            }
+        }
+    }
+    .list-wrap{
+        padding:20px 120px;
+        flex: 1;
+        background-color: #f2f6fa;
+        overflow-y: auto;
+    }
+    .list-box{
+        overflow-y: auto;
+        width:100%;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 20px;
+        box-sizing: border-box;
+        .list-item{
+            width:19%;
+            min-width: 225px;
+            box-sizing: border-box;
+            padding:10px;
+            background-color: #fff;
+            border-radius:8px;
+            cursor: pointer;
+            .list-image{
+                width:100%;
+                height:0;
+                padding-bottom:67%;
+            }
+            h4{
+                margin:10px 0;
+            }
+            .tag-box{
+                .tag-item{
+                    background-color: #ECF2FE;
+                    color:#0052D9;
+                    padding:4px;
+                    text-align: center;
+                    margin-right:10px;
+                    border-radius: 4px;
+                }
+            }
+            .other{
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+            }
+
+        }
+    }
+    .page-box{
+        background-color: #fff;
+        box-sizing: border-box;
+        padding:12px 120px;
+
+    }
+}
+.el-popper{
+    .sub-list{
+        padding: 5px;
+        display: flex;
+        flex-wrap: wrap;
+        .list-item{
+            box-sizing: border-box;
+            padding: 8px;
+            background-color: #fff;
+            border-radius: 4px;
+            white-space: nowrap;
+            cursor: pointer;
+            &.active,&:hover{
+                color:#fff;
+                background-color:#0052D9;
+            }
+        }
+    }
+}
+</style>