jiuyiUniapp/jiuyi2/pages/index/report.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>