Hooke / tswj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
2006acca 1 parent c4dbdedf

✨ feat(服务端): 视频审核页面，我的视频页面新增

Expand all
Inline Side-by-side
Showing 8 changed files with 361 additions and 9 deletions
<template>
<div class="video-wrapper" style="position: relative;">
<div v-if="status === 'PROCESS'" class="status">
<van-image v-if="item.status === 'ENABLE'" round width="6rem" height="6rem" style="vertical-align: bottom;"
:src="icon_enable" />
<van-image v-if="item.status === 'REFUSE'" round width="6rem" height="6rem" style="vertical-align: bottom;"
:src="icon_refuse" />
<van-image v-if="item.status === 'APPLY'" round width="6rem" height="6rem" style="vertical-align: bottom;"
:src="icon_apply" />
</div>
<div class="video-div" :id="'mui-player-' + item.case_id">
</div>
<div>
<div class="video-bar">
<van-row align="center">
<van-col span="8">
<van-image round width="2rem" height="2rem" style="vertical-align: middle;"
src="https://cdn.jsdelivr.net/npm/@vant/assets/cat.jpeg" />&nbsp;
<span style="font-size: 1.05rem; vertical-align: middle;">王忆慈</span>
</van-col>
<van-col span="16">
<div style="color: #999999; text-align: right;">杨浦民办科技幼稚园 ｜ 藏语</div>
</van-col>
</van-row>
</div>
</div>
<div v-if="status === 'PROCESS'" style="margin-top: 1rem;">
<div v-if="item.status === 'REFUSE'" style="padding: 0 1rem 1rem 1rem; font-size: 0.85rem;">
<p style="color: #999999; margin-bottom: 0.25rem;">老师留言：</p>
<p>下次我们继续加油，争取有更好的表现哦～</p>
</div>
</div>
<div class="book-intro">
<div id="book-intro" :class="{ 'van-multi-ellipsis--l3': isToggle }">
从前有一只小兔子，总是想要离家出走。有一天他对妈妈说：“我要跑走啦！”“如果你跑走了我就去追你，因为你是我的小宝贝呀！”妈妈说。
一场爱的捉迷藏就此展开了
</div>
<div v-if="hasToggle">
<div v-if="isToggle" @click="onToggle(false)" class="book-toggle-icon">展开&nbsp;
<van-icon style="vertical-align: middle;" size="0.9rem" :name="icon_down" />
</div>
<div v-else @click="onToggle(true)" class="book-toggle-icon">折叠&nbsp;
<van-icon style="vertical-align: middle;" size="0.9rem" :name="icon_up" />
</div>
</div>
</div>
<div v-if="status === 'PENDING'" class="van-hairline--top" style="padding: 0 1rem;">
<van-row>
<van-col offset="3" style="padding: 1rem;" @click="onRefuse()">
<div style="background: #B4B4B3; border-radius: 15px; color: #FFFFFF; padding: 0.25rem 0.8rem;">
<van-icon name="close" />&nbsp;不通过
</div>
</van-col>
<van-col style="padding: 1rem;" @click="onPass()">
<div style="background: #F9D95C; border-radius: 15px; color: #713610; padding: 0.25rem 1.5rem;">
<van-icon name="passed" />&nbsp;通过
</div>
</van-col>
</van-row>
</div>
</div>
<van-overlay :show="showNotice" z-index="1000">
<div class="wrapper" @click.stop>
<div class="block">
<div style="position: absolute; top: -2rem; right: 1rem; font-size: 1.5rem;"><van-icon name="close" color="#FFFFFF" @click="closeNotice" /></div>
<div class="van-hairline--bottom" style="color: #222222; font-size: 1.25rem; font-weight: bold; text-align: center; padding-bottom: 1rem;">作品审核建议</div>
<div>
<van-field v-model="message" rows="2" autosize label="" type="textarea" maxlength="200" placeholder="请填写您对小朋友的温馨鼓励" show-word-limit />
</div>
<div style="margin: 3rem 0;">
<my-button @on-click="onConfirm" type="primary">确定</my-button>
</div>
</div>
</div>
</van-overlay>
<van-dialog v-model:show="show" title="温馨提示" show-cancel-button confirmButtonColor="#F9D95C" @confirm="onPassConfirm">
<div style="padding: 1rem; text-align: center;">是否确认审核通过该视频 ？</div>
</van-dialog>
</template>
<script setup>
import icon_up from '@images/icon-guanbi@2x.png'
import icon_down from '@images/icon-zhankai@2x.png'
import icon_refuse from '@images/icon-jujue@2x.png'
import icon_apply from '@images/icon-shenhe@2x.png'
import icon_enable from '@images/icon-tongguo@2x.png'
import MyButton from '@/components/MyButton/index.vue'
import { ref, reactive, onMounted, nextTick, watch, onUpdated } from 'vue'
import 'mui-player/dist/mui-player.min.css'
import MuiPlayer from 'mui-player'
import _ from 'lodash';
import tools from '@/common/tool'
import { useRoute, useRouter } from 'vue-router'
const $route = useRoute();
const $router = useRouter();
// 判断是否显示简介的展开图标
const hasToggle = ref(false); // 判断是否有展开文字，默认没有
const isToggle = ref(true); // 判断展开状态，默认展开
const onToggle = (v) => { // 展开/折叠
isToggle.value = v
}
const showNotice = ref(false)
const onConfirm = () => {
showNotice.value = false;
}
const closeNotice = () => {
showNotice.value = false;
}
const show = ref(false);
const onRefuse = () => {
showNotice.value = true;
}
const onPass = () => {
show.value = true;
}
const onPassConfirm = () => { // 审核通过视频
console.warn('审核通过视频');
}
const message = ref('')
const props = defineProps({
item: Object,
status: String
})
onMounted(() => {
// 判断是否显示简介的展开图标
nextTick(() => {
hasToggle.value = tools.hasEllipsis('book-intro');
})
})
</script>
<script>
export default {
// props: ['item', 'status'],
data() {
return {
detail: {}
}
},
created() {
},
mounted() {
var mp = new MuiPlayer({
container: '#mui-player-' + this.item.case_id,
title: this.item.title,
src: this.item.video.url,
poster: this.item.cover.url,
autoFit: false,
videoAttribute: [ // 声明启用同层播放, 不让会自动全屏播放
{ attrKey: 'webkit-playsinline', attrValue: 'webkit-playsinline' },
{ attrKey: 'playsinline', attrValue: 'playsinline' },
{ attrKey: 'x5-video-player-type', attrValue: 'h5-page' },
]
})
this.detail = _.cloneDeep(this.item)
},
methods: {
setLike() {
this.detail.liked = !this.detail.liked
},
setComment() {
console.warn('跳转详情页，移动到留言页');
console.warn(this.detail.case_id);
}
}
}
</script>
<style lang="less" scoped>
.video-wrapper {
margin: 1rem;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.13);
.status {
position: absolute;
top: 0;
right: 0;
z-index: 999;
}
.video-div {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.video-bar {
color: #713610;
padding: 1rem;
padding-bottom: 0.5rem;
}
.book-intro {
padding: 1rem;
padding-top: 0;
.book-post {
color: #222222;
font-size: 1.25rem;
font-weight: bold;
}
#book-intro {
color: #333333;
margin-top: 0.25rem;
}
.book-toggle-icon {
text-align: right;
color: #713610;
font-size: 1rem;
}
}
}
.wrapper {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: auto;
text-align: center;
}
.block {
width: 80%;
// height: 25rem;
background-color: #fff;
border-radius: 10px;
padding: 1rem;
position: relative;
margin-top: 1rem;
margin-bottom: 5rem;
}
</style>
\ No newline at end of file
......@@ -12,7 +12,7 @@
<div class="sub">
<van-icon :name="icon_video" />&nbsp;&nbsp;<span>54个作品</span>
</div>
<div v-if="type === 'B'" class="upload" @click="onUpload(item)"> 上传视频 </div>
<div v-if="type === 'B'" class="upload" @click="onUpload(item)">上传视频</div>
</van-col>
</van-row>
</div>
......
import { createApp } from 'vue';
import { Button, Image as VanImage, Col, Row, Icon, Form, Field, CellGroup, ConfigProvider, Toast, Uploader, Empty, Tab, Tabs, Overlay, NumberKeyboard, Lazyload, List, PullRefresh, Popup, Picker, Sticky, Stepper, Tag, Swipe, SwipeItem } from 'vant';
import { Button, Image as VanImage, Col, Row, Icon, Form, Field, CellGroup, ConfigProvider, Toast, Uploader, Empty, Tab, Tabs, Overlay, NumberKeyboard, Lazyload, List, PullRefresh, Popup, Picker, Sticky, Stepper, Tag, Swipe, SwipeItem, Dialog } from 'vant';
import router from './router';
import App from './App.vue';
import axios from './utils/axios';
......@@ -35,6 +35,7 @@ app.use(Stepper);
app.use(Tag);
app.use(Swipe);
app.use(SwipeItem);
app.use(Dialog);
app.use(ConfigProvider);
......
This diff is collapsed. Click to expand it.
......@@ -238,10 +238,10 @@ export default [{
children: []
}, {
path: '/business/myVideo',
name: '视频审核',
name: '我的视频',
component: () => import('./views/business/myVideo.vue'),
meta: {
title: '视频审核'
title: '我的视频'
},
children: []
}, {
......
<template>
<div class=""></div>
<div class="">
<van-tabs v-model:active="active" sticky @click-tab="onClickTab" color="#F9D95C" background="#F7F7F7"
title-active-color="#222222" title-inactive-color="#777777">
<van-tab title="待审核" badge="24" :title-style="titleStyle">
<template v-if="!active">
<van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
<template v-for="item in dataList" :key="item" style="height: 3rem;">
<b-video-card :item="item" status="PENDING"></b-video-card>
</template>
</van-list>
</template>
</van-tab>
<van-tab title="已审核" :title-style="titleStyle">
<template v-if="active">
<van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
<template v-for="item in dataList1" :key="item" style="height: 3rem;">
<b-video-card :item="item" status="PROCESS"></b-video-card>
</template>
</van-list>
</template>
</van-tab>
</van-tabs>
</div>
</template>
<script setup>
import dataList from '@/mock/video_list'
import dataList1 from '@/mock/video_list1'
import BVideoCard from '@/components/BVideoCard/index.vue'
import { ref, reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import axios from '@/utils/axios';
......@@ -11,6 +37,39 @@ import { Toast } from 'vant';
const $route = useRoute();
const $router = useRouter();
const titleStyle = {
fontSize: '1rem'
}
const active = ref(0)
let tabStatus = ref('PENDING')
const onClickTab = () => {
console.warn(0);
}
// 处理书籍下作品列表
const list = ref([]);
const loading = ref(false);
const finished = ref(false);
const onLoad = () => {
// 异步更新数据
// setTimeout 仅做示例，真实场景中一般为 ajax 请求
setTimeout(() => {
for (let i = 0; i < 20; i++) {
list.value.push(list.value.length + 1);
}
// 加载状态结束
loading.value = false;
// 数据全部加载完成
if (list.value.length >= 100) {
finished.value = true;
}
}, 1000);
};
onMounted(() => {
})
......@@ -36,5 +95,10 @@ export default {
</script>
<style lang="less" scoped>
:global(.van-badge--top-right) {
right: -10px;
}
:global(.van-sticky--fixed) {
z-index: 1000;
}
</style>
\ No newline at end of file
......
<template>
<div class=""></div>
<div class="">
<van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
<template v-for="item in dataList" :key="item" style="height: 3rem;">
<b-video-card :item="item"></b-video-card>
</template>
</van-list>
</div>
</template>
<script setup>
import dataList from '@/mock/video_list'
import BVideoCard from '@/components/BVideoCard/index.vue'
import { ref, reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import axios from '@/utils/axios';
......@@ -11,6 +20,29 @@ import { Toast } from 'vant';
const $route = useRoute();
const $router = useRouter();
// 处理书籍下作品列表
const list = ref([]);
const loading = ref(false);
const finished = ref(false);
const onLoad = () => {
// 异步更新数据
// setTimeout 仅做示例，真实场景中一般为 ajax 请求
setTimeout(() => {
for (let i = 0; i < 20; i++) {
list.value.push(list.value.length + 1);
}
// 加载状态结束
loading.value = false;
// 数据全部加载完成
if (list.value.length >= 100) {
finished.value = true;
}
}, 1000);
};
onMounted(() => {
})
......
......@@ -92,6 +92,7 @@
<van-overlay :show="showNotice" z-index="1000">
<div class="wrapper" @click.stop>
<div class="block">
<div style="position: absolute; top: -2rem; right: 1rem; font-size: 1.5rem;"><van-icon name="close" color="#FFFFFF" @click="closeNotice" /></div>
<div>
<van-image width="100" height="100" :src="icon_notice" />
<p style="margin: 1rem; font-size: 1.15rem; font-weight: bold; color: #222222;">温馨提示</p>
......@@ -125,7 +126,7 @@ import icon_notice from '@images/que-tishi@2x.png'
import ShortcutFixed from '@/components/ShortcutFixed/index.vue'
import tools from '@/common/tool'
import { ref, reactive, onMounted } from 'vue'
import { ref, reactive, onMounted, nextTick } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import axios from '@/utils/axios';
import $ from 'jquery'
......@@ -181,7 +182,9 @@ const onConfirm = ({ selectedOptions }) => {
onMounted(() => {
// 判断是否显示简介的展开图标
hasToggle.value = tools.hasEllipsis('book-intro');
nextTick(() => {
hasToggle.value = tools.hasEllipsis('book-intro');
})
for (let index = 0; index < 20; index++) {
items.push({
id: index,
......@@ -402,5 +405,8 @@ export default {
background-color: #fff;
border-radius: 10px;
padding: 1rem;
position: relative;
margin-top: 1rem;
margin-bottom: 5rem;
}
</style>
\ No newline at end of file
......