提交 bd8030d0 authored 作者: lihuihui's avatar lihuihui

修改bug

上级 1464d4f3
<template> <template>
<video ref="videoPlayer" class="video-js"></video> <div style="width:812;height:443px;position: relative;">
<video ref="videoPlayer" class="video-js vjs-default-skin vjs-big-play-centered vjs-16-9"></video>
</div>
</template> </template>
<script> <script>
......
...@@ -23,10 +23,10 @@ if (props.url?.indexOf('.pdf') !== -1 || props.url?.indexOf('.txt') !== -1) { ...@@ -23,10 +23,10 @@ if (props.url?.indexOf('.pdf') !== -1 || props.url?.indexOf('.txt') !== -1) {
<iframe <iframe
v-if="isShowType === 1" v-if="isShowType === 1"
width="812" width="812"
height="433" height="450"
:src="`https://view.officeapps.live.com/op/view.aspx?src=${props.url}`" :src="`https://view.officeapps.live.com/op/view.aspx?src=${props.url}`"
></iframe> ></iframe>
<embed width="812" height="433" :src="props.url" v-else-if="isShowType === 2" /> <embed width="812" height="450" :src="props.url" v-else-if="isShowType === 2" />
<video v-else-if="isShowType === 3" width="812" height="433" controls id="video"> <video v-else-if="isShowType === 3" width="812" height="433" controls id="video">
<source :src="props.url" /> <source :src="props.url" />
</video> </video>
......
...@@ -3,7 +3,22 @@ import { getCategoryList } from '@/api/base' ...@@ -3,7 +3,22 @@ import { getCategoryList } from '@/api/base'
export function useGetCategoryList() { export function useGetCategoryList() {
const list = ref([]) const list = ref([])
getCategoryList({ type: 'tree' }).then((res: any) => { getCategoryList({ type: 'tree' }).then((res: any) => {
list.value = res.data list.value = res.data.filter((item: any) => {
if (parseInt(item.status)) {
item.children = detailChild(item.children)
}
return parseInt(item.status)
}) })
})
const detailChild = (child: any) => {
if (!child) return []
return child.filter((item: any) => {
if (parseInt(item.status)) {
item.children = detailChild(item.children)
}
return parseInt(item.status)
})
}
return { list } return { list }
} }
\ No newline at end of file
...@@ -164,6 +164,10 @@ const protocol = ref(false) ...@@ -164,6 +164,10 @@ const protocol = ref(false)
</template> </template>
<style lang="scss"> <style lang="scss">
.upload-box { .upload-box {
// min-width: 400px;
.el-progress__text{
transform: translate(20px, -5px);
}
position: relative; position: relative;
.app-upload-btn { .app-upload-btn {
position: relative; position: relative;
...@@ -302,6 +306,7 @@ const protocol = ref(false) ...@@ -302,6 +306,7 @@ const protocol = ref(false)
} }
} }
.upload-video { .upload-video {
width: 500px;
display: flex; display: flex;
align-items: center; align-items: center;
.upload-btn { .upload-btn {
......
...@@ -159,6 +159,9 @@ const protocol = ref(false) ...@@ -159,6 +159,9 @@ const protocol = ref(false)
<style lang="scss"> <style lang="scss">
.upload-box { .upload-box {
position: relative; position: relative;
.el-progress__text{
transform: translate(20px, -5px);
}
.app-upload-btn { .app-upload-btn {
position: relative; position: relative;
z-index: 99; z-index: 99;
......
...@@ -34,13 +34,13 @@ getLessonDetails({ id: id }).then((res: any) => { ...@@ -34,13 +34,13 @@ getLessonDetails({ id: id }).then((res: any) => {
</script> </script>
<template> <template>
<AppCard title="课件资源信息"> <AppCard title="教案资源信息">
<Operation :data="lessonDetails"></Operation> <Operation :data="lessonDetails"></Operation>
<ViewTop :data="lessonDetails"></ViewTop> <ViewTop :data="lessonDetails"></ViewTop>
<ViewCenter v-if="Object.keys(lessonDetails).length" :data="lessonDetails"></ViewCenter> <ViewCenter v-if="Object.keys(lessonDetails).length" :data="lessonDetails"></ViewCenter>
<ViewBottom></ViewBottom> <ViewBottom></ViewBottom>
</AppCard> </AppCard>
<AppCard title="课件资源关联使用课程"> <AppCard title="教案资源关联使用课程">
<AppList v-bind="listOptions" ref="appList" stripe> <AppList v-bind="listOptions" ref="appList" stripe>
<template #table-img="{ row }"> <template #table-img="{ row }">
<img :src="row.img" style="width: 100px;display:block;"> <img :src="row.img" style="width: 100px;display:block;">
......
...@@ -159,6 +159,9 @@ const protocol = ref(false) ...@@ -159,6 +159,9 @@ const protocol = ref(false)
<style lang="scss"> <style lang="scss">
.upload-box { .upload-box {
position: relative; position: relative;
.el-progress__text{
transform: translate(20px, -5px);
}
.app-upload-btn { .app-upload-btn {
position: relative; position: relative;
z-index: 99; z-index: 99;
......
...@@ -36,13 +36,13 @@ getOtherDetails({ id: id }).then((res: any) => { ...@@ -36,13 +36,13 @@ getOtherDetails({ id: id }).then((res: any) => {
</script> </script>
<template> <template>
<AppCard title="课件资源信息"> <AppCard title="其他资源信息">
<Operation :data="otherDetails"></Operation> <Operation :data="otherDetails"></Operation>
<ViewTop :data="otherDetails"></ViewTop> <ViewTop :data="otherDetails"></ViewTop>
<ViewCenter v-if="Object.keys(otherDetails).length" :data="otherDetails"></ViewCenter> <ViewCenter v-if="Object.keys(otherDetails).length" :data="otherDetails"></ViewCenter>
<ViewBottom></ViewBottom> <ViewBottom></ViewBottom>
</AppCard> </AppCard>
<AppCard title="课件资源关联使用课程"> <AppCard title="其他资源关联使用课程">
<AppList v-bind="listOptions" ref="appList" stripe> <AppList v-bind="listOptions" ref="appList" stripe>
<template #table-img="{ row }"> <template #table-img="{ row }">
<img :src="row.img" style="width: 100px;display:block;"> <img :src="row.img" style="width: 100px;display:block;">
......
...@@ -7,8 +7,8 @@ const videoOptions = $computed(() => { ...@@ -7,8 +7,8 @@ const videoOptions = $computed(() => {
</script> </script>
<template> <template>
<div class="center-video-box"> <div class="center-video-box">
<div style=" width:812px; height:433px;padding-bottom: 20px;"> <div style="width:812px; height:433px;padding-bottom: 20px;">
<AppVideoPlayer style="width:812px; height:433px;" :options="videoOptions"></AppVideoPlayer> <AppVideoPlayer :options="videoOptions"></AppVideoPlayer>
</div> </div>
<div class="right-statistics"> <div class="right-statistics">
<div class="stat-item"> <div class="stat-item">
......
...@@ -20,14 +20,14 @@ const defaultProps = { ...@@ -20,14 +20,14 @@ const defaultProps = {
} }
// 资源出处 tab触发 // 资源出处 tab触发
const tabValue = ref('1') const tabValue: any = ref('1')
const appList = ref() const appList = ref()
const tabChange = () => { const tabChange = () => {
appList.value.refetch() appList.value.refetch()
} }
// 列表切换 // 列表切换
const isCard = ref(false) const isCard = ref(true)
// table 数据 // table 数据
const listOptions = $computed(() => { const listOptions = $computed(() => {
...@@ -66,6 +66,7 @@ const listOptions = $computed(() => { ...@@ -66,6 +66,7 @@ const listOptions = $computed(() => {
{ label: '审核状态', prop: 'audit_status_name', align: 'center' }, { label: '审核状态', prop: 'audit_status_name', align: 'center' },
{ label: '更新人', prop: 'updated_operator_name', align: 'center' }, { label: '更新人', prop: 'updated_operator_name', align: 'center' },
{ label: '更新人部门', prop: 'organ_id_name', align: 'center' }, { label: '更新人部门', prop: 'organ_id_name', align: 'center' },
// { label: '部门共享', prop: 'table-share', align: 'center' },
{ label: '更新日期', prop: 'updated_time', align: 'center' }, { label: '更新日期', prop: 'updated_time', align: 'center' },
{ label: '操作', slots: 'table-operate', align: 'center', width: 200 } { label: '操作', slots: 'table-operate', align: 'center', width: 200 }
] ]
...@@ -95,7 +96,7 @@ const typeFilter = () => { ...@@ -95,7 +96,7 @@ const typeFilter = () => {
<AppList v-bind="listOptions" ref="appList"> <AppList v-bind="listOptions" ref="appList">
<template #header-aside></template> <template #header-aside></template>
<template #table-cover="{ row }"> <template #table-cover="{ row }">
<div style="background:#ccc"> <div style="background: #ccc">
<el-icon :size="50" color="#fff" v-if="row.cover == ''"> <el-icon :size="50" color="#fff" v-if="row.cover == ''">
<PictureFilled></PictureFilled> <PictureFilled></PictureFilled>
</el-icon> </el-icon>
...@@ -129,7 +130,11 @@ const typeFilter = () => { ...@@ -129,7 +130,11 @@ const typeFilter = () => {
<router-link v-permission="'v1-resource-video-update'" :to="`/resource/video/update?id=${row.id}`"> <router-link v-permission="'v1-resource-video-update'" :to="`/resource/video/update?id=${row.id}`">
<el-button plain>编辑</el-button> <el-button plain>编辑</el-button>
</router-link> </router-link>
<router-link v-if="row.status == '1'" v-permission="'v1-resource-video-view'" :to="`/resource/video/view?id=${row.id}`"> <router-link
v-if="row.status == '1'"
v-permission="'v1-resource-video-view'"
:to="`/resource/video/view?id=${row.id}`"
>
<el-button type="primary" plain>查看</el-button> <el-button type="primary" plain>查看</el-button>
</router-link> </router-link>
</el-space> </el-space>
......
...@@ -38,10 +38,10 @@ const defaultProps = { ...@@ -38,10 +38,10 @@ const defaultProps = {
let swiperCovers: [{ id: string; url: string }[]] = $ref([[]]) let swiperCovers: [{ id: string; url: string }[]] = $ref([[]])
// 获取封面 // 获取封面
getCoverList().then(res => { getCoverList().then(res => {
const filtersData = res.data.list.filter((i:any) => i.type === '1') const filtersData = res.data.list.filter((i: any) => i.type === '1')
let index = 0 let index = 0
while(index < filtersData.length) { while (index < filtersData.length) {
swiperCovers.push(filtersData.slice(index, index += 8)); swiperCovers.push(filtersData.slice(index, (index += 8)))
} }
swiperCovers.forEach((item: any, index: number) => { swiperCovers.forEach((item: any, index: number) => {
if (item.length === 0) { if (item.length === 0) {
...@@ -53,6 +53,7 @@ getCoverList().then(res => { ...@@ -53,6 +53,7 @@ getCoverList().then(res => {
// 获取swiper 自定义左右切换按钮 // 获取swiper 自定义左右切换按钮
let swiper = ref() let swiper = ref()
const swiperChange = (type?: string) => { const swiperChange = (type?: string) => {
console.log(swiperChange, 'index')
type === 'prev' ? swiper.value.prev() : swiper.value.next() type === 'prev' ? swiper.value.prev() : swiper.value.next()
} }
const swiperItemHandle = (url: string) => { const swiperItemHandle = (url: string) => {
...@@ -126,6 +127,15 @@ const uploadVideo = (data: any) => { ...@@ -126,6 +127,15 @@ const uploadVideo = (data: any) => {
form.data.source_id = data.videoId form.data.source_id = data.videoId
form.data.name = data.name form.data.name = data.name
} }
let isSwiperBtn = $ref(0)
const watchSwiper = (index: number) => {
if (!index) {
isSwiperBtn = 0
} else {
swiperCovers.length === index + 1 ? isSwiperBtn = 1 : isSwiperBtn = 2
}
}
</script> </script>
<template> <template>
...@@ -139,6 +149,7 @@ const uploadVideo = (data: any) => { ...@@ -139,6 +149,7 @@ const uploadVideo = (data: any) => {
</el-form-item> </el-form-item>
<el-form-item label="视频分类:" prop="classification"> <el-form-item label="视频分类:" prop="classification">
<el-tree-select <el-tree-select
:render-after-expand="false"
:props="defaultProps" :props="defaultProps"
style="width: 100%" style="width: 100%"
v-model="form.data.classification" v-model="form.data.classification"
...@@ -146,7 +157,13 @@ const uploadVideo = (data: any) => { ...@@ -146,7 +157,13 @@ const uploadVideo = (data: any) => {
/> />
</el-form-item> </el-form-item>
<el-form-item label="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;知识点:"> <el-form-item label="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;知识点:">
<el-input placeholder="请输入该视频相关知识点,多个知识点请使用“,”分隔" v-model="form.data.knowledge_points" :rows="2" type="textarea" maxlength="100" /> <el-input
placeholder="请输入该视频相关知识点,多个知识点请使用“,”分隔"
v-model="form.data.knowledge_points"
:rows="2"
type="textarea"
maxlength="100"
/>
</el-form-item> </el-form-item>
<el-form-item label="&nbsp;&nbsp;视频封面:"> <el-form-item label="&nbsp;&nbsp;视频封面:">
<div class="video-cover"> <div class="video-cover">
...@@ -157,7 +174,7 @@ const uploadVideo = (data: any) => { ...@@ -157,7 +174,7 @@ const uploadVideo = (data: any) => {
<div v-else class="cover-img" :style="`background-image:url(${form.data.cover})`"></div> <div v-else class="cover-img" :style="`background-image:url(${form.data.cover})`"></div>
</div> </div>
<div class="video-cover_right"> <div class="video-cover_right">
<UploadImg v-model="form.data.cover"></UploadImg> <UploadImg accept=".jpg,.jpeg,.gif,.png" v-model="form.data.cover" ></UploadImg>
<div class="list"> <div class="list">
<div class="item"> <div class="item">
<img <img
...@@ -192,7 +209,14 @@ const uploadVideo = (data: any) => { ...@@ -192,7 +209,14 @@ const uploadVideo = (data: any) => {
</div> </div>
<div class="swiper-box"> <div class="swiper-box">
<div class="block text-center" v-if="swiperCovers.length"> <div class="block text-center" v-if="swiperCovers.length">
<el-carousel height="202px" :autoplay="false" arrow="never" trigger="click" ref="swiper"> <el-carousel
@change="watchSwiper"
height="202px"
:autoplay="false"
arrow="never"
trigger="click"
ref="swiper"
>
<el-carousel-item v-for="(item, index) in swiperCovers" :key="index" class="cover-list"> <el-carousel-item v-for="(item, index) in swiperCovers" :key="index" class="cover-list">
<div <div
@click="swiperItemHandle(cItem.url)" @click="swiperItemHandle(cItem.url)"
...@@ -204,8 +228,8 @@ const uploadVideo = (data: any) => { ...@@ -204,8 +228,8 @@ const uploadVideo = (data: any) => {
</el-carousel-item> </el-carousel-item>
</el-carousel> </el-carousel>
</div> </div>
<el-icon class="arrow left" @click="swiperChange('prev')"><ArrowLeftBold /></el-icon> <el-icon v-if="isSwiperBtn != 0" class="arrow left" @click="swiperChange('prev')"><ArrowLeftBold /></el-icon>
<el-icon class="arrow right" @click="swiperChange('next')"><ArrowRightBold /></el-icon> <el-icon v-if="isSwiperBtn != 1" class="arrow right" @click="swiperChange('next')"><ArrowRightBold /></el-icon>
</div> </div>
</el-form-item> </el-form-item>
</el-form> </el-form>
...@@ -254,7 +278,7 @@ const uploadVideo = (data: any) => { ...@@ -254,7 +278,7 @@ const uploadVideo = (data: any) => {
// // height: 100%; // // height: 100%;
// display: block; // display: block;
// } // }
.cover-img{ .cover-img {
width: 208px; width: 208px;
height: 130px; height: 130px;
background-size: cover; background-size: cover;
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论