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: '',
	reasonForReporting: '',
	particulars: '',
	videoPictureUrl: '',
	coverUrl: ''
})
// 列表数据
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 getList() {
	// 
	api.video.myWorks({
		query: {
			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({
		type: 1,
		success: rs => {
			form.videoPictureUrl = rs.value
		}
	})
}

/**
 * 删除多媒体
 * @param {Number} index 列表下标
 * @param {String} key 操作的键
 */
function removeMedia(key) {
	util.alert({
		content: '确认要删除吗？',
	}).then(rs => {
		if (key == 'videoId') {
			form.videoId = null
			form.coverUrl = null
		}
		if (key == 'videoPictureUrl') form.videoPictureUrl = null
	})
}

// 视频举报
function handleSubmit() {
	// 
	const data = {
		...form
	}

	// 验证必填项
	if (reportIndex == '') {
		util.alert('请选择举报理由')
		return
	}
	if (!data.particulars) {
		util.alert('详细描述不能为空')
		return
	}
	if (data.particulars.length > 100) {
		util.alert('详细描述自述超过100')
		return
	}
	if (!data.videoPictureUrl) {
		util.alert('请上传举报图片')
		return
	}
	if (!data.videoId) {
		util.alert('请选择举报视频')
		return
	}
 
	data.reasonForReporting = reportList[reportIndex.value].name

	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,
		})
	})
}

// 选中视频信息
function videoInfo(param) {
	console.log('选中视频信息', param);
	form.videoId = param.videoId;
	form.coverUrl = param.coverUrl;
}
</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.particulars" placeholder="请详细填写，以提高举报成功率。" />
				</view>

				<view class="hint mt10 tar f20">{{ form.particulars.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 v-if="!form.videoPictureUrl" class="item upload fmid pr mr20 br10" @click="uploadImg">
							<uni-icons type="plusempty" color="#D8D8D8" size="100rpx" />
						</view>

						<view v-else class="imgs item mr20 br10">
							<image class="br10" :src="form.videoPictureUrl" mode="aspectFill" />
							<view class="close">
								<uni-icons type="clear" size="30rpx" color="red"
									@click="removeMedia('videoPictureUrl')" />
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="line mtb50 uploadBox">
				<view class="key">选择视频</view>

				<view class="list pr mt20">
					<view v-if="!form.coverUrl" class="item fmid oh br10" @click="$refs.select.open()">
						<uni-icons type="plusempty" color="#D8D8D8" size="100rpx" />
					</view>

					<view v-else class="item pr br10">
						<image :src="form.coverUrl" mode="aspectFill" />

						<view class="close">
							<uni-icons type="clear" size="30rpx" color="red" @click="removeMedia('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" @videoInfo="videoInfo" 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>