365 lines
7.3 KiB
Vue
365 lines
7.3 KiB
Vue
<script setup>
|
|
/**
|
|
* 视频举报
|
|
*/
|
|
import {
|
|
ref,
|
|
reactive,
|
|
computed,
|
|
getCurrentInstance
|
|
} from 'vue'
|
|
import {
|
|
onLoad,
|
|
} from '@dcloudio/uni-app'
|
|
// 工具库
|
|
import util from '@/common/js/util';
|
|
// api
|
|
import api from '@/api/index.js'
|
|
// 视频菜单
|
|
import videoMenu from '@/components/index/videoMenu.vue';
|
|
|
|
const {
|
|
proxy
|
|
} = getCurrentInstance()
|
|
// 举报列表
|
|
const reportList = reactive([{
|
|
name: '发布不正当的内容或信息',
|
|
},
|
|
{
|
|
name: '传播涩情资源',
|
|
},
|
|
{
|
|
name: '冒充他人',
|
|
},
|
|
{
|
|
name: '涉嫌诈骗',
|
|
},
|
|
{
|
|
name: '侵犯权益',
|
|
},
|
|
{
|
|
name: '其他',
|
|
}
|
|
])
|
|
// 举报下标
|
|
const reportIndex = ref('')
|
|
// 表单
|
|
const form = reactive({
|
|
userId: '',
|
|
videoId: [],
|
|
reason: '',
|
|
context: '',
|
|
pic: [],
|
|
})
|
|
// 列表数据
|
|
const list = reactive({
|
|
data: [],
|
|
pageSize: 10,
|
|
pageNum: 1,
|
|
total: 0,
|
|
})
|
|
// 已选择的视频列表
|
|
const videos = computed(() => {
|
|
let result = form.videoId.map(item => {
|
|
return list.data.find(node => node.videoId == item) || {}
|
|
})
|
|
return result
|
|
})
|
|
|
|
onLoad((option) => {
|
|
// 被举报的用户id
|
|
if (option.userId) form.userId = option.userId
|
|
// 获取列表
|
|
getList()
|
|
})
|
|
|
|
/**
|
|
* 选择举报列表
|
|
* @param {Object} ev 携带参数
|
|
*/
|
|
function handleReportList(ev) {
|
|
const index = ev.detail.value
|
|
if (reportIndex.value === index) return
|
|
reportIndex.value = index
|
|
}
|
|
|
|
// 刷新列表
|
|
function refreshList() {
|
|
list.pageNum = 1
|
|
list.total = 0
|
|
getList()
|
|
}
|
|
|
|
// 获取更多列表
|
|
function getMoreList() {
|
|
if (list.data.length >= list.rows) return
|
|
list.pageNum++
|
|
getList()
|
|
}
|
|
|
|
// 获取列表
|
|
function getList() {
|
|
//
|
|
api.video.myVideoList({
|
|
query: {
|
|
isDraft: 0,
|
|
userId: form.userId,
|
|
pageSize: list.pageSize,
|
|
pageNum: list.pageNum,
|
|
}
|
|
}).then(rs => {
|
|
if (rs.code == 200) {
|
|
if (list.pageNum == 1) list.data.length = []
|
|
list.data.push(...rs.rows.map(item => {
|
|
item.format_videoUrl = util.format_url(item.videoUrl, 'video')
|
|
item.format_imageUrl = util.format_url(item.imageUrl, 'img')
|
|
return item
|
|
}))
|
|
list.total = rs.total
|
|
return
|
|
}
|
|
util.alert({
|
|
content: rs.msg,
|
|
showCancel: false,
|
|
})
|
|
})
|
|
}
|
|
|
|
// 上传图片
|
|
function uploadImg() {
|
|
util.upload_image({
|
|
value: form.pic,
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 删除多媒体
|
|
* @param {Number} index 列表下标
|
|
* @param {String} key 操作的键
|
|
*/
|
|
function removeMedia(index, key) {
|
|
util.alert({
|
|
content: '确认要删除吗？',
|
|
}).then(rs => {
|
|
if (rs.confirm) form[key].splice(index, 1)
|
|
})
|
|
}
|
|
|
|
// 视频举报
|
|
function handleSubmit() {
|
|
//
|
|
const data = {
|
|
...form
|
|
}
|
|
|
|
// 验证必填项
|
|
if (reportIndex == '') {
|
|
util.alert('请选择举报理由')
|
|
return
|
|
}
|
|
if (!data.context) {
|
|
util.alert('详细描述不能为空')
|
|
return
|
|
}
|
|
if (data.context.length > 100) {
|
|
util.alert('详细描述自述超过100')
|
|
return
|
|
}
|
|
if (!data.pic[0]) {
|
|
util.alert('请上传举报图片')
|
|
return
|
|
}
|
|
if (!data.videoId[0]) {
|
|
util.alert('请选择举报视频')
|
|
return
|
|
}
|
|
|
|
//
|
|
data.reason = reportList[reportIndex.value].name
|
|
data.pic = data.pic.map(node => {
|
|
node = util.replace_url('node')
|
|
return node
|
|
}).join(',')
|
|
data.videoId = data.videoId.join(',')
|
|
|
|
api.video.reportVideo({
|
|
data: data,
|
|
}).then(rs => {
|
|
if (rs.code == 200) {
|
|
util.alert('举报成功，请等待后台审核')
|
|
setTimeout(() => {
|
|
uni.navigateBack()
|
|
}, 500)
|
|
return
|
|
}
|
|
util.alert({
|
|
content: rs.msg,
|
|
showCancel: false,
|
|
})
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<view class="appbw">
|
|
<!-- 表单 -->
|
|
<view class="form plr50 c333 f28">
|
|
<view class="line df aic mtb20">
|
|
<view class="key mr20">举报理由</view>
|
|
<picker class="f1" :range="reportList" rangeKey="name" @change="handleReportList">
|
|
<view class="inputBox ptb10 plr10">
|
|
<text v-if="reportList[reportIndex]">{{reportList[reportIndex].name}}</text>
|
|
<text v-else class="placeholderStyle">请选择举报理由</text>
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
|
|
<view class="line mtb50">
|
|
<view class="key">详细描述</view>
|
|
|
|
<view class="inputBox mt20 ptb15 plr15">
|
|
<textarea v-model="form.context" placeholder="请详细填写，以提高举报成功率。" />
|
|
</view>
|
|
|
|
<view class="hint mt10 tar f20">{{form.context.length}}/100</view>
|
|
</view>
|
|
|
|
<view class="line mtb50 uploadBox">
|
|
<view class="key">上传照片</view>
|
|
|
|
<view class="uploads pr">
|
|
<view class="cartoon pa">
|
|
<image src="/static/uploadCartoon.png" mode="aspectFit" />
|
|
</view>
|
|
|
|
<view class="imgList images mt20">
|
|
<view class="item upload fmid pr mr20 br10" @click="uploadImg">
|
|
<uni-icons type="plusempty" color="#D8D8D8" size="100rpx" />
|
|
</view>
|
|
|
|
<view class="imgs item mr20 br10" v-for="(item,index) in form.pic" :key="index">
|
|
<image class="br10" :src="item" mode="aspectFill" />
|
|
<view class="close">
|
|
<uni-icons type="clear" size="30rpx" color="red" @click="removeMedia(index,'pic')" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="line mtb50 uploadBox">
|
|
<view class="key">选择视频</view>
|
|
|
|
<view class="list pr mt20">
|
|
<view class="item fmid oh br10" @click="$refs.select.open()">
|
|
<uni-icons type="plusempty" color="#D8D8D8" size="100rpx" />
|
|
</view>
|
|
|
|
<view class="item pr br10" v-for="(item,index) in videos" :key="index">
|
|
<image :src="item.format_imageUrl" mode="aspectFill" />
|
|
|
|
<view class="close">
|
|
<uni-icons type="clear" size="30rpx" color="red" @click="removeMedia(index,'videoId')" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="fill" style="height: 180rpx;"></view>
|
|
|
|
<view class="footer plr30 bfff shadow">
|
|
<view class="btn lg focus" @click="handleSubmit">举报</view>
|
|
</view>
|
|
|
|
<!-- 选择 -->
|
|
<uni-popup ref="select" type="bottom">
|
|
<view class="selectAlt popBot">
|
|
<view class="product mt30 bfff">
|
|
<view class="header rows ptb20 plr20">
|
|
<view class="title plr30 c333 f34">
|
|
<text>作品</text>
|
|
<text class="ml10">{{list.total}}</text>
|
|
</view>
|
|
|
|
<view class="fmid c999 f28" @click="refreshList">
|
|
<uni-icons type="refreshempty" color="" />
|
|
<text>刷新</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 视频菜单 -->
|
|
<scroll-view scroll-y="true" class="scroll">
|
|
<videoMenu :list="list.data" v-model:ids="form.videoId" mode="checkbox" />
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
// 表单
|
|
.form {
|
|
|
|
.hint {
|
|
color: #a7a7a7;
|
|
}
|
|
}
|
|
|
|
// 上传图片
|
|
.uploadBox {
|
|
|
|
//
|
|
.uploads {
|
|
.cartoon {
|
|
top: 0;
|
|
right: -100rpx;
|
|
width: 530rpx;
|
|
height: 249rpx;
|
|
}
|
|
}
|
|
|
|
// 上传图片
|
|
.images .item {
|
|
width: 150rpx;
|
|
height: 150rpx;
|
|
background-color: #F3F3F5;
|
|
}
|
|
|
|
// 列表
|
|
.list {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
grid-gap: 20rpx;
|
|
|
|
// 列表
|
|
.item {
|
|
height: 290rpx;
|
|
background-color: #F1F1F1;
|
|
|
|
// 关闭
|
|
.close {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
transform: translate(50%, -50%);
|
|
z-index: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 作品数量
|
|
.product {
|
|
.scroll {
|
|
height: 80vh;
|
|
}
|
|
}
|
|
</style> |