rtim/pages/user/courseFeedback.vue

<template>
	<view>
		<view class="container" v-if="formInfo&&formInfo.length>0">
			<view class="list-item title">投诉原因：{{ text }}</view>
		</view>
		<view class="formbox" v-if="formInfo&&formInfo.length>0">
			<u-form labelPosition="left" labelWidth='80' :model="formdata" :rules="rules" ref="uForm" errorType="toast">
				<u-form-item :required="item.isRequire == 1" :label="item.name" :prop="item.desc"
					v-for="(item,i) in formInfo" :key="i">
					<template v-if="item.type=='文本框'">
						<u-input v-model="formdata[item.desc]" border="none" :clearable="true"
							:placeholder="'请填写'+item.name"></u-input>
					</template>
					<template v-if="item.type=='图片'">
						<view class="imgitem">
							<u-upload :key="(imgdata[item.desc] && imgdata[item.desc].key) || 1" :fileList="(imgdata[item.desc] && Array.isArray(imgdata[item.desc])) ? imgdata[item.desc] : []" @afterRead="afterRead" @delete="deletePic"
								:name="item.desc" multiple :maxCount="9">
							</u-upload>
						</view>
					</template>
				</u-form-item>
			</u-form>
			<view class="footer-btn">
				<button class="submit-btn" @click="submit">提交</button>
				<button class="submit-btn back-btn" @click="goBack">返回</button>
			</view>
		</view>
		<view class="container" v-else>
			<view class="list-item title">请选择投诉原因</view>
			<view class="list-item" v-for="(item, index) in feedbackItems" :key="item.complaintTypeId || index"
				@click="handleClick(item,index)">
				<view>{{ item.complaintTypeName }}</view>
				<uni-icons type="right" size="20" color="rgba(0,0,0,.3)" v-if="formInfo.length==0 && item.childrenType && item.childrenType.length > 0"></uni-icons>
			</view>
			<view class="list-item" v-if="pageIndex!=0&&formInfo.length==0" @click="goBack">
				返回上一层
			</view>
		</view>
	</view>
</template>

<script>
	import { getTypeTree, complaintRecord } from "@/api/user.js"
	import { addReportTalent, addReportVideo } from "@/api/expert.js"
	export default {
		data() {
			return {
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				menuButtonH: 45,
				pageIndex: 0,
				list: [],
				feedbackItems: [],
				userId: '',
				courseId: '',
				videoId: '',
				formInfo: [],
				formdata: {},
				imgdata: {},
				rules: {},
				text: '',
				templateId: 0,
				user: {},
				isLastChild: 0,
				type:null,
				talentId:null,
			};
		},
		onLoad(options) {
			if(!this.$isLogin()){
				uni.navigateTo({
					url: '/pages/auth/loginIndex'
				})
				return;
			}
			this.user = this.$getUserInfo()
			this.getList();
			if(options.courseId){
				this.courseId=options.courseId
				this.videoId=uni.getStorageSync('videoId')
			}
		},
		onReady() {
			//onReady 为uni-app支持的生命周期之一
			// this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			goBack() {
				// 返回上一层逻辑
				if (this.pageIndex == 0) {
					uni.navigateBack();
				} else {
					this.pageIndex--;
					this.formInfo = []
					this.rules = {}
					this.formdata = {}
					this.imgdata = {}
					if (this.isLastChild == 1) {
						this.isLastChild = 0
					} else {
						if (this.pageIndex == 0) {
							this.feedbackItems = this.list
							this.templateId = 0
						} else {
							const list = this.findGrandparentOrAllData(this.list, this.templateId)
						this.feedbackItems = list.childrenType || []
						this.templateId = list.complaintTypeId || 0
						}
					}

				}
			},
			findGrandparentOrAllData(data, targetId) {
				// 递归函数，用于查找目标节点的父级节点
				function findParent(node, targetId) {
					if (!node || !node.childrenType || !Array.isArray(node.childrenType)) return null;

					for (let child of node.childrenType) {
						if (child.complaintTypeId === targetId) {
							return node; // 找到目标节点的父级节点
						}

						const result = findParent(child, targetId); // 递归查找子节点
						if (result) return result;
					}

					return null;
				}

				// 遍历顶层节点，查找目标节点的父级和祖父级节点
				for (let root of data) {
					if (root.complaintTypeId === targetId) {
						return data; // 如果目标节点是顶层节点，返回所有数据
					}

					const parent = findParent(root, targetId); // 查找目标节点的父级节点
					if (parent) {
						const grandparent = findParent(root, parent.complaintTypeId); // 查找父级节点的父级节点
						return grandparent || data; // 如果找到祖父节点返回祖父节点，否则返回所有数据
					}
				}

				return data; // 如果没有找到目标节点，返回所有数据
			},
			handleClick(item, index) {
				if (this.isLastChild == 1) return
				if (this.pageIndex >= 0) {
					this.pageIndex++
					const currentItem = this.feedbackItems[index];
					let children = currentItem.childrenType || [];
					this.templateId = currentItem.complaintTypeId
					this.formInfo = []
					this.rules = {}
					this.formdata = {}
					this.imgdata = {}
					this.text = currentItem.complaintTypeName
					if (children.length > 0) {
						// 有子类型，继续显示子类型列表
						this.isLastChild = 0
						this.feedbackItems = children
					} 
					else {
						// 没有子类型，显示表单（最后一级）
						this.isLastChild = 1
							const rules = {};
							const formdata = {};
						
						if (currentItem.description) {
							// 如果有description，解析并使用
							this.formInfo = JSON.parse(currentItem.description);
						} else {
							// 如果没有description，使用默认表单（至少有一个内容输入框）
							this.formInfo = [{
								name: '投诉内容',
								desc: 'content',
								type: '文本框',
								isRequire: 1
							},
							{
								name: '上传图片',
								desc: 'urls',
								type: '图片',
								isRequire: 0
							},
							];
						}
						
						// 遍历formInfo中的每个对象，初始化表单数据和验证规则
							this.formInfo.forEach(descObj => {
								const {
									isRequire,
									desc,
									name,
									type
								} = descObj;
								formdata[desc] = ""
								if (type == '图片') {
								// 确保图片上传组件默认展示，初始化 imgdata
								if (!this.imgdata[desc]) {
									this.imgdata[desc] = []
								}
								if (!this.imgdata[desc].key) {
									this.imgdata[desc].key = 1
								}
								}
								// 如果isRequire为"1"，则添加到rules中
								if (isRequire == 1) {
									rules[desc] = [{
										required: true,
										message: name + '不能为空',
										trigger: ["change", "blur"]
									}];
								}
							});
						
							this.rules = rules
							this.formdata = formdata;
							console.log("qxj  formdata",this.formdata);
							setTimeout(() => {
							if (this.$refs.uForm) {
								this.$refs.uForm.setRules(this.rules);
							}
							}, 200)
					}
				}
			},
			getList() {
				getTypeTree().then(res => {
					if (res.code == 200) {
						this.list = res.data
						this.pageIndex = 0
						this.feedbackItems = this.list
					} else {
						this.list = []
					}
				})
			},
			submit() {
				const imgs = this.convertArrayToString(this.imgdata)
				this.formdata = {
					...this.formdata,
					...imgs
				};
				this.$refs.uForm.validate().then(res => {
					if (res) {
							this.doComplaint();
					}
				})
			},
			doReportTalent(){  //举报达人
				if(!!this.formdata.content){
					this.formdata.reportDesc=this.formdata.content;
				}
				const param = {
					talentId: this.talentId,
					type: 2,
					templateId: this.templateId,
					...this.formdata
				}
				uni.showLoading({
					title:""
				});
				addReportTalent(param).then(res => {
					uni.hideLoading();
					if (res.code == 200) {
						uni.showModal({
							title: '',
							content: '我们已收到您的反馈，谢谢',
							showCancel: false,
							success: (res) => {
								this.formInfo = []
								this.rules = {}
								this.formdata = {}
								this.imgdata = {}
								this.text = ''
								this.templateId = 0
								this.isLastChild = 0
								this.pageIndex = 0
								this.feedbackItems = this.list
							}
						});
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				},
				rej => {
					uni.hideLoading();
				});
							
			},
			doReportVideo(){  //举报短视频
		    	if(!!this.formdata.content){
		    		this.formdata.reportDesc=this.formdata.content;
		    	}
				const param = {
					videoId: this.videoId,
					type: 2,
					templateId: this.templateId,
					...this.formdata
				}
				addReportVideo(param).then(res => {
					if (res.code == 200) {
						uni.showModal({
							title: '',
							content: '我们已收到您的反馈，谢谢',
							showCancel: false,
							success: (res) => {
								this.formInfo = []
								this.rules = {}
								this.formdata = {}
								this.imgdata = {}
								this.text = ''
								this.templateId = 0
								this.isLastChild = 0
								this.pageIndex = 0
								this.feedbackItems = this.list
							}
						});
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
					
			},
			doComplaint(){
				// 构建符合新接口的参数结构
				const param = {
					complaintContent: this.formdata.content || "",
					complaintTypeId: this.templateId || 0,
					complaintUrl: this.formdata.urls || "",
					courseId: this.courseId ? parseInt(this.courseId) : 0,
					userId: this.user.userId ? parseInt(this.user.userId) : 0,
					videoId: this.videoId ? parseInt(this.videoId) : 0
				}
				complaintRecord(param).then(res => {
					if (res.code == 200) {
						uni.showModal({
							title: '',
							content: '我们已收到您的反馈，谢谢',
							showCancel: false,
							success: (res) => {
								this.formInfo = []
								this.rules = {}
								this.formdata = {}
								this.imgdata = {}
								this.text = ''
								this.templateId = 0
								this.isLastChild = 0
								this.pageIndex = 0
								this.feedbackItems = this.list
							}
						});
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
											
			},
			
			
			
			convertArrayToString(obj) {
				const result = {};
				for (const key in obj) {
					if (obj.hasOwnProperty(key)) {
						const value = obj[key];
						// 如果值是数组，则将其转换为逗号分隔的字符串
						if (Array.isArray(value)) {
							result[key] = value.filter(item => item.status == 'success').map(it => it.url).join(
								","); // 使用逗号分隔数组元素
						} else {
							result[key] = value; // 保持原样
						}
					}
				}
				return result;
			},
			deletePic(event) {
				const fieldName = event.name;
				const index = event.index;

				if (this.imgdata[fieldName] && Array.isArray(this.imgdata[fieldName])) {
					this.imgdata[fieldName].splice(index, 1);
				}
				this.$forceUpdate()
				this.imgdata[fieldName].key --
			},
			async afterRead(event) {
				const fieldName = event.name;

				if (!this.imgdata[fieldName]) {
					this.imgdata[fieldName] = [];
					this.imgdata[fieldName].key = 1
				}

				let lists = Array.isArray(event.file) ? event.file : [event.file];
				for (let i = 0; i < lists.length; i++) {
					this.imgdata[fieldName].push({
						...lists[i],
						status: 'uploading',
						message: '上传中...'
					});
					this.$forceUpdate()
					this.imgdata[fieldName].key ++
					// 调用上传方法
					const result = await this.uploadFilePromise(lists[i].url);
					if (result.code == 200) {
						this.imgdata[fieldName][this.imgdata[fieldName].length - 1] = {
							...this.imgdata[fieldName][this.imgdata[fieldName].length - 1],
							url: result.url,
							status: 'success',
							message: ''
						};
						this.$forceUpdate()
						this.imgdata[fieldName].key ++
					} else {
						this.imgdata[fieldName][this.imgdata[fieldName].length - 1] = {
							...this.imgdata[fieldName][this.imgdata[fieldName].length - 1],
							status: 'fail',
							message: '上传失败'
						};
						this.$forceUpdate()
						this.imgdata[fieldName].key ++
						uni.showToast({
							title: '上传失败',
							icon: 'error'
						});
					}
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: uni.getStorageSync('requestPath') + '/app/common/uploadOSS', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							resolve(JSON.parse(res.data))
						},
						fail: (err) => {
							uni.showToast({
								title: '上传失败',
								icon: 'error'
							})
						}
					});
				})
			}
		}
	};
</script>

<style scoped lang="scss">
	.formbox {
		background-color: #fff;
		padding: 0 30rpx;
	}

	.footer-btn {
		width: 100%;
		box-sizing: border-box;
		padding: 32rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.back-btn {
		margin-top: 40rpx;
		color: #FF5C03 !important;
		background: #fff !important;
		border: 1rpx solid #FF5C03;
	}

	.submit-btn {
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		background: #FF5C03;
		border-radius: 44rpx;
		border: 1rpx solid #FF5C03;

		&::after {
			border: none;
		}
	}

	.arrow-left {
		position: absolute;
		left: 24rpx;
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
	}

	.list-item {
		background-color: #fff;
		padding: 24rpx;
		border-bottom: 1rpx solid #f4f4f4;
		font-size: 15px;
		color: #333;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.title {
		color: rgba(0, 0, 0, .5);
		background-color: transparent;
		border-top: 1rpx solid #f4f4f4;
	}

	.imgitem {
		display: flex;
		align-items: center;
		justify-content: flex-start;

		.icon {
			min-width: 30rpx;
			margin-right: 15rpx;
			width: 30rpx;
			height: 30rpx;
		}
	}
</style>