talk_appAmin/pages/Friend/violationreporting.vue

<!-- 违规举报 -->
<template>


	<view>
		<up-toast ref="uToastRef"></up-toast>
		<up-cell-group title-bg-color="rgb(243, 244, 246)">
		</up-cell-group>
	</view>

	<view style="
		position: fixed;
		top: 0rpx;
		left: 0rpx;
		bottom: 0rpx;
		right: 0rpx;
		background-color: #ffffff;
		z-index: -1;
	"></view>

	<navbar_neadVue title="违规举报"></navbar_neadVue>

	<view v-show="IsNext">
		<view class="boxtop">
			<text>请选择您要举报得问题，帮助我们准确处理</text>
		</view>
		<view class="boxcontent">
			<view v-for="(item,index) in arr" :key="index">
				<view class="boxc" @click="HaveIsClick(item.id)">
					<text class="box-text">{{item.title}}</text>
					<image v-if="item.id == IsClick" class="box-image" src="../../static/images/sign/isH.png"></image>
					<image v-else class="box-image" src="../../static/images/sign/IsHave.png"></image>
				</view>
			</view>
			<view class="but" @click="goNext()">
				<text>下一步</text>
			</view>
		</view>
	</view>


	<view v-show="!IsNext">
		<view class="next-viewtitle">
			<text>举报原因：{{IsClickTitle}}</text>
		</view>
		<view class="next-viewtitle">
			<text>举报描述（必填）</text>
		</view>
		<view class="next-input">
			<textarea @input="SumVlaue()" maxlength="200" placeholder-class="inputcolor"
				placeholder="请您详细描述举报原因，您的描述越详细越有利于我们的判断，可以更好的帮助我们准确处理。" id="many" v-model="textareavalue"></textarea>

			<text>{{textsum}}/200</text>
		</view>



		<view class="next-viewtitle">
			<text>上传照片（必填）</text>
		</view>

		<view class="next-image">
			<!-- 	<image src="../../static/images/sign/add.png"></image>
			<view>
				<text class="next-bot-text">(0/3)</text>
			</view> -->
			<view>
				<up-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" deletable
					style="margin-left: 42rpx;" name="6" multiple :deletable="true" :maxCount="3">
					<image src="../../static/images/sign/add.png" mode="widthFix" class="imageup"></image>
					<view>
						<text class="next-bot-text">({{fileList1.length}}/3)</text>
					</view>

				</up-upload>

			</view>
		</view>

		<view class="but" @click="NextButton()">
			<text>提交</text>
		</view>

	</view>

</template>

<script setup>
	import {
		reactive,
		ref,
		getCurrentInstance
	} from 'vue';
	import navbar_neadVue from '../common/navbar/navbar_nead.vue';
	import Logger from 'qiniu-js/esm/logger';
	import {
		listFriendReport,
		getFriendReport,
		delFriendReport,
		addFriendReport,
		updateFriendReport
	} from "@/api/signln/FriendReport/FriendReport";
	const IsNext = ref(true);
	const arr = reactive([{
			id: 1,
			title: "色情低俗"
		},
		{
			id: 2,
			title: "违法犯罪"
		},
		{
			id: 3,
			title: "辱骂、引战、拉仇恨"
		},
		{
			id: 4,
			title: "涉政言行不当"
		},
		{
			id: 5,
			title: "虚假信息"
		},
		{
			id: 6,
			title: "涉嫌诈骗"
		},
		{
			id: 7,
			title: "侵犯著作、商标、名誉、隐私、专利权"
		},
		{
			id: 8,
			title: "其他"
		},

	])

	const list = ref([{
		type: 'error',
		icon: false,
		title: '',
		message: "",
		iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
	}])
	// 方法
	const uToastRef = ref(null)

	function showToast(params) {
		uToastRef.value.show({
			...params,
			complete() {
				params.url && uni.navigateTo({
					url: params.url
				});
			}
		});
	}

	// 表示选中的
	// const IsClick = reactive([])
	const IsClick = ref(0);
	const IsClickTitle = ref("");
	// 选中的函数
	function HaveIsClick(id) {
		console.log(id)
		IsClick.value = id;
	}

	//下一步
	function goNext() {
		if (IsClick.value == 0) {
			uni.showToast({
				title: '必须选中一个',
				//将值设置为 success 或者直接不用写icon这个参数
				//显示持续时间为 2秒
				duration: 2000
			})
		} else {
			IsClickTitle.value = arr.find(item => item.id == IsClick.value).title;
			IsNext.value = !IsNext.value;
		}
	}

	// 
	const textareavalue = ref("");
	const textsum = ref(0);

	//计算字数
	function SumVlaue() {
		textsum.value = textareavalue.value.length;
	}

	// 提交
	function NextButton() {
		// TODO 提交前的校验
		var ls = list.value[0];
		if (IsClickTitle.value.length == 0) {
			return;
		}
		if (textareavalue.value.length === 0) {
			ls.message = "举报原因不能为空";
			showToast(ls);
			return;
		}
		if (fileList1.value.length === 0) {
			ls.message = "图片上传";
			showToast(ls);
			return;
		}


		uni.showToast({
			title: '提交成功',
			//将值设置为 success 或者直接不用写icon这个参数
			//显示持续时间为 2秒
			duration: 1000
		})
		uni.navigateBack({
			delta: 1
		});

		console.log(fileList1.value)
		console.log(uploadQiNiuDomain)
	}




	const fileList1 = ref([]);
	import config1 from "@/config";
	const uploadQiNiuDomain = config1.uploadQiNiuDomain;

	const {
		proxy
	} = getCurrentInstance();

	// 删除图片
	const deletePic = (event) => {
		fileList1.value.splice(event.index, 1);
	};

	// 新增图片
	const afterRead = async (event) => {
		// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
		let lists = [].concat(event.file);
		let fileListLen = fileList1.value.length;
		lists.map((item) => {
			fileList1.value.push({
				...item,
				status: 'uploading',
				message: '上传中',
			});
		});
		for (let i = 0; i < lists.length; i++) {
			const result = await uploadFilePromise(lists[i].url);
			let item = fileList1.value[fileListLen];
			fileList1.value.splice(fileListLen, 1, {
				...item,
				status: 'success',
				message: '',
				url: result,
			});
			fileListLen++;
		}
	};

	const uploadFilePromise = (url) => {
		return new Promise((resolve, reject) => {
			let a = uni.uploadFile({
				url: uploadQiNiuDomain, // 仅为示例，非真实的接口地址
				filePath: url,
				name: 'file',
				formData: {
					user: 'test',
				},
				success: (res) => {
					setTimeout(() => {
						resolve(res.data.data);
					}, 1000);
				},
			});
		});
	};
</script>

<style scoped>
	@import '../../pages/common/navbar/navbar.css';

	.boxtop {
		width: 750rpx;
		height: 72rpx;
		background: #f4f5f6;
	}

	.boxtop>text {
		font-weight: Regular;
		width: 456rpx;
		height: 24rpx;
		font-size: 24rpx;
		text-align: left;
		color: #999999;
		display: block;
		line-height: 72rpx;
		margin-left: 32rpx;
	}

	.boxcontent {
		background-color: #ffffff;
	}


	.boxc {
		width: 750rpx;
		height: 76rpx;
	}

	.box-text {
		font-weight: Regular;
		/* width: 112rpx; */
		height: 28rpx;
		font-size: 28rpx;
		text-align: left;
		color: #000000;
		margin-left: 32rpx;
		line-height: 76rpx;
	}

	.box-image {
		width: 32rpx;
		height: 32rpx;
		float: right;
		margin-right: 32rpx;
		margin-top: 24rpx;
	}

	.but {
		width: 686rpx;
		height: 88rpx;
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		background: #c0f0ec;
		position: absolute;
		bottom: 92rpx;
		left: 32rpx;
	}

	.but>text {
		font-weight: Regular;
		width: 92rpx;
		height: 31rpx;
		font-size: 30rpx;
		text-align: center;
		color: #00CCBE;
		display: block;
		margin: auto;
		line-height: 88rpx;
	}

	.next-viewtitle {
		margin-top: 48rpx;
		margin-left: 32rpx;
	}

	.next-viewtitle>text {
		font-weight: Regular;
		width: 221rpx;
		height: 31rpx;
		font-size: 30rpx;
		text-align: left;
		color: #000000;
	}

	.next-input {
		width: 686rpx;
		height: 280rpx;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		background: #f4f5f6;
		margin-top: 23rpx;
		margin-left: 32rpx;
		box-sizing: border-box;
	}

	.next-input>textarea {
		width: 638rpx;
		height: 200rpx;
		padding-left: 24rpx;
		padding-top: 23rpx;
		font-size: 24rpx;
		text-align: left;
		color: #999999;
	}

	.next-input>text {
		font-weight: Regular;
		width: 55rpx;
		height: 19rpx;
		font-size: 20rpx;
		text-align: left;
		color: #999999;
		display: block;
		margin-top: 12rpx;
		float: right;
		margin-right: 32rpx;
	}

	:deep(.inputcolor) {
		font-weight: Regular;
		width: 638rpx;
		height: 200rpx;
		font-size: 24rpx;
		text-align: left;
		color: #999999;
	}

	.next-image {
		width: 220rpx;
		height: 220rpx;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		background: #f4f5f6;
		margin-left: 32rpx;
		margin-top: 23rpx;
		display: inline;
	}

	.imageup {
		width: 78rpx;
		height: 66rpx;
		display: block;
		float: left;
		margin-left: 71rpx;
		margin-top: 57rpx;
	}

	.next-image>image {
		width: 78rpx;
		height: 66rpx;
		display: block;
		float: left;
		margin-left: 71rpx;
		margin-top: 57rpx;
	}

	.next-bot-text {
		font-weight: Regular;
		width: 65rpx;
		height: 29rpx;
		font-size: 30rpx;
		text-align: left;
		color: #999999;

		display: block;
		float: left;
		margin-left: 75rpx;
		/* margin-top: 11rpx; */
	}
</style>