598 lines
14 KiB
Vue
598 lines
14 KiB
Vue
<script setup>
|
|
/**
|
|
* 发布视频
|
|
*/
|
|
|
|
import {
|
|
reactive,
|
|
getCurrentInstance,
|
|
ref
|
|
} from 'vue';
|
|
import {
|
|
onLoad,
|
|
} from '@dcloudio/uni-app'
|
|
// 工具库
|
|
import util from '@/common/js/util';
|
|
// api
|
|
import api from '@/api/index.js'
|
|
|
|
const {
|
|
proxy
|
|
} = getCurrentInstance()
|
|
|
|
class Form {
|
|
videoId = ''
|
|
// 视频地址
|
|
videoUrl = ''
|
|
// 缩略图
|
|
coverUrl = ''
|
|
// 标题
|
|
title = ''
|
|
// 正文
|
|
description = ''
|
|
// 话题
|
|
tags = ''
|
|
// 视频大小
|
|
videoSize = ''
|
|
// 视频时长
|
|
videoDuration = ''
|
|
// 视频状态 0草稿 1待审核 2审核失败 3已发布 4已下架
|
|
status = ''
|
|
}
|
|
// 发布视频
|
|
const form = reactive(new Form())
|
|
// 话题列表
|
|
let label = reactive({
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
list: [],
|
|
})
|
|
// 话题关键字
|
|
const labelKeyword = ref('')
|
|
// 已选择的话题列表
|
|
const labelSelect = reactive([])
|
|
// 用户列表
|
|
const userList = reactive({
|
|
data: [],
|
|
pageNum: 1,
|
|
pageSize: 20,
|
|
total: 0,
|
|
})
|
|
// 已选择的用户列表
|
|
const userSelect = reactive([])
|
|
// 用户关键字
|
|
const userKeyword = ref('')
|
|
|
|
//
|
|
onLoad((option) => {
|
|
// 视频id
|
|
if (option.videoId) {
|
|
form.videoId = option.videoId
|
|
// 获取标签 获取详情
|
|
Promise.all([getVideoDetail(), getLabel()]).then(rs => {
|
|
const detail = rs[0]
|
|
const labels = rs[1]
|
|
const users = rs[2]
|
|
console.log('release getDetail', detail)
|
|
// 视频地址
|
|
form.videoUrl = util.format_url(detail.videoUrl, 'video')
|
|
// 缩略图
|
|
form.imageUrl = util.format_url(detail.imageUrl, 'img')
|
|
// 标题
|
|
form.title = detail.title
|
|
// 正文
|
|
form.content = detail.content
|
|
// 0正常1草稿
|
|
form.isDraft = detail.isDraft
|
|
// 匹配话题id
|
|
// detail.talkId.split(',').forEach(node => {
|
|
// for (let i = 0; i < labelList.length; i++) {
|
|
// const item = labelList[i]
|
|
// if (node == item.id) labelSelect.push(item)
|
|
// }
|
|
// })
|
|
// 匹配用户id
|
|
detail.subscriber = detail.subscriber.split(',')
|
|
detail.subscriberId.split(',').forEach((item, index) => {
|
|
userSelect.push({
|
|
userId: item,
|
|
userNickname: detail.subscriber[index]
|
|
})
|
|
})
|
|
})
|
|
} else {
|
|
// 获取标签
|
|
getLabel()
|
|
}
|
|
})
|
|
|
|
// 获取视频详情
|
|
function getVideoDetail() {
|
|
return new Promise((resolve, reject) => {
|
|
api.video.getVideoById({
|
|
query: {
|
|
videoId: form.videoId,
|
|
}
|
|
}).then(rs => {
|
|
if (rs.code == 200) {
|
|
resolve(rs.data)
|
|
return
|
|
}
|
|
util.alert({
|
|
content: rs.msg,
|
|
showCancel: false,
|
|
})
|
|
})
|
|
})
|
|
}
|
|
|
|
// 上传图片
|
|
function uploadImg() {
|
|
util.upload_image({
|
|
value: form.coverUrl,
|
|
type: 1,
|
|
success: rs => {
|
|
form.coverUrl = rs.value
|
|
}
|
|
})
|
|
}
|
|
|
|
// 上传视频
|
|
function uploadVideo() {
|
|
util.upload_video({
|
|
success: rs => {
|
|
// 视频大小
|
|
form.videoSize = rs.size
|
|
// 宽
|
|
form.breadth = rs.width
|
|
// 高
|
|
form.height = rs.height
|
|
// 时长
|
|
form.videoDuration = rs.duration
|
|
// 路径
|
|
form.videoUrl = rs.value
|
|
}
|
|
})
|
|
}
|
|
|
|
// 刷新列表
|
|
function refreshLabel() {
|
|
label.pageNum = 1
|
|
label.total = 0
|
|
getLabel()
|
|
}
|
|
|
|
// 获取更多标签分类
|
|
function getMoreLabel() {
|
|
if (label.total <= label.list.length) return
|
|
label.pageNum++
|
|
getLabel()
|
|
}
|
|
|
|
// 获取标签分类
|
|
function getLabel() {
|
|
return new Promise((resolve, reject) => {
|
|
api.video.getLabel({
|
|
data: {
|
|
pageNum: label.pageNum,
|
|
pageSize: label.pageSize,
|
|
name: labelKeyword.value,
|
|
}
|
|
}).then(rs => {
|
|
if (rs.code == 200) {
|
|
const result = rs.rows
|
|
//
|
|
if (label.pageNum == 1) label.list.length = 0
|
|
|
|
// 标签列表输出
|
|
label.list.push(...result)
|
|
// 总数
|
|
label.total = rs.total
|
|
//
|
|
resolve(label.list)
|
|
|
|
// 结果
|
|
if (!result[0] && labelKeyword.value) {
|
|
util.alert({
|
|
content: `当前没有${labelKeyword.value}的话题，是否添加？`,
|
|
}).then(rs => {
|
|
if (rs.confirm) addLabel()
|
|
})
|
|
}
|
|
return
|
|
}
|
|
util.alert({
|
|
content: rs.msg,
|
|
showCancel: false,
|
|
})
|
|
})
|
|
})
|
|
}
|
|
|
|
// 添加标签
|
|
function addLabel() {
|
|
api.video.setLabel({
|
|
data: {
|
|
name: labelKeyword.value,
|
|
}
|
|
}).then(rs => {
|
|
if (rs.code == 200) {
|
|
label.list.length = 0
|
|
// 标签列表输出
|
|
label.list.push(rs.data)
|
|
label.total = 1
|
|
return
|
|
}
|
|
|
|
util.alert({
|
|
content: rs.msg,
|
|
showCancel: false
|
|
})
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 选择话题列表
|
|
* @param {Object} ev
|
|
* @param {Number} index 需要操作的下标
|
|
*/
|
|
function handleSelectLabel(ev, index) {
|
|
// 是否包含
|
|
const findIndex = labelSelect.findIndex(item => item.id == ev.id)
|
|
//
|
|
if (findIndex < 0) {
|
|
if (labelSelect.length >= 5) util.alert('最多上传5个')
|
|
else labelSelect.push(ev)
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 点击标签删除
|
|
* @param {Object} item
|
|
*/
|
|
function handleLabelSelectDel(item, index) {
|
|
labelSelect.splice(index, 1)
|
|
}
|
|
|
|
// 获取更多朋友列表
|
|
function getMoreUserList() {
|
|
if (userList.data.length >= userList.total) return
|
|
userList.pageNum++
|
|
getUserList()
|
|
}
|
|
|
|
// 获取朋友列表
|
|
function getUserList() {
|
|
return new Promise((resolve, reject) => {
|
|
api.video.searchFriendByName({
|
|
path: [userKeyword.value],
|
|
query: {
|
|
pageNum: userList.pageNum,
|
|
pageSize: userList.pageSize,
|
|
}
|
|
}).then(rs => {
|
|
if (rs.code == 200) {
|
|
if (userList.pageNum) userList.data.length = 0
|
|
// 追加朋友列表
|
|
userList.data.push(...rs.rows)
|
|
// 视频列表
|
|
userList.total = rs.total
|
|
resolve(userList.data)
|
|
return
|
|
}
|
|
util.alert({
|
|
content: rs.msg,
|
|
showCancel: false,
|
|
})
|
|
})
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 选择用户列表
|
|
* @param {Object} ev
|
|
* @param {Number} index 需要操作的下标
|
|
*/
|
|
function handleSelectUser(ev, index) {
|
|
// 是否包含
|
|
const findIndex = userSelect.findIndex(item => item.id == ev.id)
|
|
|
|
if (findIndex < 0) userSelect.push(ev)
|
|
}
|
|
|
|
/**
|
|
* 点击用户删除
|
|
* @param {Object} item
|
|
*/
|
|
function handleUserSelectDel(item, index) {
|
|
userSelect.splice(index, 1)
|
|
}
|
|
|
|
// 发布视频
|
|
function handleSubmit(status) {
|
|
const data = {
|
|
...form
|
|
}
|
|
// let fnName = 'saveVideo'
|
|
|
|
// // 如果是编辑
|
|
// if (form.videoId) {
|
|
// fnName = 'updateVideo'
|
|
// }
|
|
|
|
//视频状态 0草稿 1待审核 2审核失败 3已发布 4已下架
|
|
data.status = status ? status : 0
|
|
console.log('data', data)
|
|
|
|
// 验证必填项
|
|
if (!data.videoUrl) {
|
|
util.alert('视频不能为空')
|
|
return
|
|
}
|
|
if (!data.coverUrl) {
|
|
util.alert('封面不能为空')
|
|
return
|
|
}
|
|
|
|
if (data.status == 1) {
|
|
if (!data.title) {
|
|
util.alert('标题不能为空')
|
|
return
|
|
}
|
|
if (!data.description) {
|
|
util.alert('正文不能为空')
|
|
return
|
|
}
|
|
}
|
|
// 如果有选择的标签
|
|
if (labelSelect[0]) {
|
|
data.tags = labelSelect.map(item => item.id).join(',')
|
|
}
|
|
// if (userSelect[0]) {
|
|
// data.subscriberId = userSelect.map(item => item.userId).join(',')
|
|
// data.subscriber = userSelect.map(item => item.userNickname).join(',')
|
|
// }
|
|
|
|
// 发布
|
|
api.video.saveVideo({
|
|
data,
|
|
}).then(rs => {
|
|
if (rs.code == 200) {
|
|
util.alert({
|
|
content: data.status == 1 ? '视频发布成功，请等待后台审核' : '保存草稿成功',
|
|
showCancel: false,
|
|
confirmText: '我知道了',
|
|
}).then(rs => {
|
|
uni.navigateBack()
|
|
})
|
|
return
|
|
}
|
|
util.alert({
|
|
content: rs.msg,
|
|
showCancel: false,
|
|
})
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<view class="appbw">
|
|
<view class="form mtb30 mlr30 c666 f32">
|
|
<view class="line mtb20">
|
|
<view class="key">上传封面</view>
|
|
<view class="value mt20 imgList">
|
|
<view class="imgs wh200 br10" v-if="form.coverUrl">
|
|
<image :src="form.coverUrl" class="br10" mode="aspectFill" />
|
|
</view>
|
|
<view class="imgs wh200 upload fmid bfff br10" v-else @click="uploadImg">
|
|
<uni-icons type="plusempty" color="#E8E8E8" size="50rpx" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="line mtb20">
|
|
<view class="key">上传视频</view>
|
|
<view class="value mt20 imgList">
|
|
<view class="imgs wh200 br10" v-if="form.videoUrl">
|
|
<video :src="form.videoUrl" class="br10" />
|
|
</view>
|
|
<view class="imgs wh200 upload fmid bfff br10" v-else @click="uploadVideo">
|
|
<uni-icons type="plusempty" color="#E8E8E8" size="50rpx" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="main mtb20 plr20 br20">
|
|
<view class="title ptb20">
|
|
<input type="text" class="f32" placeholder="填写标题会有更多曝光率哦~" placeholder-class="placeholderStyle"
|
|
v-model="form.title" />
|
|
</view>
|
|
|
|
<view class="content ptb10">
|
|
<textarea class="textarea f32" v-model="form.description" placeholder="添加正文" />
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 标签 -->
|
|
<view class="labels items mt20 df fww c333 f28" v-if="labelSelect[0]">
|
|
<view class="item fmid mr20 mb20 plr20 bar" v-for="(item,index) in labelSelect" :key="index">
|
|
<view class="mr10">#{{item.name}}</view>
|
|
<uni-icons type="closeempty" size="28rpx" @click="handleLabelSelectDel(item,index)" />
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 用户 -->
|
|
<view class="labels items mt20 df fww c333 f28" v-if="userSelect[0]">
|
|
<view class="item fmid mr20 mb20 plr20 bar" v-for="(item,index) in userSelect" :key="index">
|
|
<view class="mr10">@{{item.userNickname}}</view>
|
|
<uni-icons type="closeempty" size="28rpx" @click="handleLabelSelectDel(item,index)" />
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 菜单 -->
|
|
<view class="menu df fww f28">
|
|
<view class="item mr20 ptb5 plr20 bar" @click="$refs.labelRef.open()">#话题</view>
|
|
<view class="item mr20 ptb5 plr20 bar" @click="$refs.userRef.open()">@用户</view>
|
|
<view class="item mr20 ptb5 plr20 bar" v-if="0">@地点</view>
|
|
</view>
|
|
|
|
<!-- 地点 -->
|
|
<view class="mtb20" v-if="0">
|
|
<view class="key rows">
|
|
<uni-icons type="location"></uni-icons>
|
|
<view class="f1">添加地点</view>
|
|
</view>
|
|
<view class="value mt20">
|
|
<scroll-view scroll-x="true" class="scroll wsn">
|
|
<view class="locate items df f24">
|
|
<view class="item mr20 ptb5 plr20 bar" v-for="(item,index) in 5" :key="index">北京天安门</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="fill" style="height: 150rpx;"></view>
|
|
|
|
<view class="footer rows plr30 bfff shadow">
|
|
<view class="btn bar lg disabled w180" @click="handleSubmit(0)">存草稿</view>
|
|
<view class="btn bar lg colourful f1 ml30" @click="handleSubmit(1)">发布作品</view>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<!-- 话题列表 -->
|
|
<uni-popup ref="labelRef" type="bottom">
|
|
<view class="selectionBox ptb20 plr20 bfff c999 f28">
|
|
<view class="title c333 f34 tac">话题列表</view>
|
|
<!-- 可选的列表 -->
|
|
<view class="mt20">
|
|
<scroll-view scroll-y="true" class="scroll" @scrolltolower="getMoreLabel">
|
|
<view class="selection">
|
|
<view class="option df aic" v-for="(item,index) in label.list" :key="index"
|
|
@click="handleSelectLabel(item,index)" :class="{
|
|
active: labelSelect.map(node => node.id).includes(item.id)
|
|
}">
|
|
<text class="thd f1">#{{item.name}}</text>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
|
|
<!-- 结果 -->
|
|
<view class="reult items mt20 df fww c333 f28" v-if="labelSelect[0]">
|
|
<view class="item fmid mr20 mb20 plr20 bar" v-for="(item,index) in labelSelect" :key="index">
|
|
<view class="mr10">#{{item.name}}</view>
|
|
<uni-icons type="closeempty" size="28rpx" @click="handleLabelSelectDel(item,index)" />
|
|
</view>
|
|
</view>
|
|
|
|
<!-- -->
|
|
<view class="editBox rows mt20 ptb10 plr20 br20">
|
|
<view class="c333 f28">#</view>
|
|
<input class="f1" type="text" v-model="labelKeyword" placeholder="输入你想选择的话题" />
|
|
<view class="" @click="refreshLabel">搜索</view>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
|
|
<!-- at用户列表 -->
|
|
<uni-popup ref="userRef" type="bottom">
|
|
<view class="selectionBox ptb20 plr20 bfff c999 f28">
|
|
<view class="title c333 f34 tac">@用户列表</view>
|
|
<!-- 可选的列表 -->
|
|
<view class="mt20">
|
|
<scroll-view scroll-y="true" class="scroll" @scrolltolower="getMoreUserList">
|
|
<view class="selection">
|
|
<view class="option df aic" v-for="(item,index) in userList.data" :key="index"
|
|
@click="handleSelectUser(item,index)" :class="{
|
|
active: userSelect.map(node => node.userId).includes(item.userId)
|
|
}">
|
|
<text class="thd f1">@{{item.userNickname}}</text>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
|
|
<!-- 结果 -->
|
|
<view class="reult items mt20 df fww c333 f28" v-if="userSelect[0]">
|
|
<view class="item fmid mr20 mb20 plr20 bar" v-for="(item,index) in userSelect" :key="index">
|
|
<view class="mr10">@{{item.userNickname}}</view>
|
|
<uni-icons type="closeempty" size="28rpx" @click="handleUserSelectDel(item,index)" />
|
|
</view>
|
|
</view>
|
|
|
|
<!-- -->
|
|
<view class="editBox rows mt20 ptb10 plr20 br20">
|
|
<view class="c333 f28">@</view>
|
|
<input class="f1" type="text" v-model="userKeyword" placeholder="输入你想选择的用户" />
|
|
<view class="" @click="getUserList">搜索</view>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
image,
|
|
video {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
//
|
|
.upload {
|
|
background-color: #F4F4F4;
|
|
}
|
|
|
|
// 背景
|
|
.main {
|
|
background-color: #F4F4F4;
|
|
|
|
// 内容
|
|
.content {
|
|
border-top: 2rpx solid #E5E5E5;
|
|
|
|
.textarea {
|
|
width: 100%;
|
|
height: 300rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 菜单
|
|
.menu {
|
|
.item {
|
|
background-color: #F4F4F4;
|
|
}
|
|
}
|
|
|
|
// 选项集合
|
|
.items {
|
|
.item {
|
|
background-color: #F4F4F4;
|
|
}
|
|
}
|
|
|
|
// 菜单选择列表
|
|
.selectionBox {
|
|
.scroll {
|
|
height: 420rpx;
|
|
|
|
.option {
|
|
box-sizing: border-box;
|
|
height: 60rpx;
|
|
border-bottom: 1rpx solid #E5E5E5;
|
|
|
|
// 被选择的
|
|
&.active {
|
|
background-color: #E5E5E5;
|
|
}
|
|
}
|
|
}
|
|
|
|
//
|
|
.editBox {
|
|
background-color: #F4F4F4;
|
|
}
|
|
}
|
|
</style> |