<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>