zhibo/pages_shopping/live/complaint.vue

<template>
	<view>
		<view class="mt60 p34">
			<view class="color#{$5} ">投诉对象</view>
			<view class="align-center mt30 mb50">
				<image class="w100 h100 mr30" style="border-radius: 50%;" src="/static/images/logo.png"></image>
				<text>芳华惠选</text>
			</view>
		</view>
		<view class="container" >
			<view class="formbox">
				<view class="formbox-title">{{ text }}</view>
				<view class="form">
					<u-form labelPosition="top" labelWidth='auto' :model="formdata" :rules="rules" ref="uForm"
						errorType="toast">
						<u-form-item label=" " prop="complaintContent">
							<u--textarea v-model="formdata.complaintContent" border="none" :clearable="true"
								placeholder="请填写反馈内容" count maxlength='200'></u--textarea>
						</u-form-item>
						<view class="box">
							<u-form-item label="图片(最多9张)">
								<view class="imgitem">
									<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1"
										:maxCount="9"></u-upload>
								</view>
							</u-form-item>
						</view>
					</u-form>
				</view>
				<view class="footer-btn">
					<button class="submit-btn" @click="submit">提交</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	// complaintRecord
	import {
		getTypeTree,
		loginByMp
	} from "@/api/course.js"
	export default {
		data() {
			return {
				menuButtonH: 45,
				pageIndex: 0,
				list: [],
				feedbackItems: [],
				userId: '',
				// courseId: '',
				// videoId: '',
				formdata: {
					complaintContent: ""
				},
				rules: {
					complaintContent: [{
						required: true,
						message: '投诉反馈内容不能为空',
						trigger: ["change", "blur"]
					}]
				},
				text: '',
				templateId: 0,
				user: {},
				isLastChild: 0,
				isLogin: false,
				fileList1: [],
				code: ''
			};
		},
		// computed: {
		// 	...mapGetters(['coureLogin']),
		// },
		// watch: {
		// 	coureLogin: {
		// 		immediate: true, // 页面一进入就检查一次
		// 		handler(val) {
		// 			if (val == 2) {
		// 				console.log("AppToken失效，请重新登录")
		// 				this.isLogin = false
		// 				this.goLogin()
		// 			}
		// 		}
		// 	}
		// },
		onLoad(option) {
			this.text=option.selectText
			// this.userId = option.userId || ''
			// this.courseId = option.courseId || ''
			// this.videoId = option.videoId || ''
			// this.projectCode = option.projectCode || ''
			// uni.$on('usercode', (data) => {
			// 	if (data) {
			// 		this.code = data.code
			// 		this.goLogin(data)
			// 	}
			// })
			// this.utils.getDomain({projectCode:this.projectCode}).then(res=>{
			// 	if(res.code == 200) {
			// 		uni.setStorageSync('addressUrl',res.addressUrl)
			// 		this.utils.isLoginCourseAuto().then(
			// 			res => {
			// 				if(res){
			// 					this.isLogin = true
			// 					this.getMenuButton()
			// 					this.getList()
			// 				} else{
			// 					this.isLogin = false
			// 					this.goLogin()
			// 				}
			// 			},
			// 			rej => {}
			// 		);
			// 	}
			// })
		},
		onUnload() {
			uni.$off('usercode')
		},
		methods: {
			getMenuButton() {
				const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
				this.menuButtonH = menuButtonInfo.height
			},
			goBack() {
				// 返回上一层逻辑
				if (this.pageIndex == 0) {
					uni.navigateBack();
				} else {
					this.pageIndex--;
					this.formdata = {
						complaintContent: ""
					}
					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
						}
					}

				}
			},
			findGrandparentOrAllData(data, targetId) {
				// 递归函数，用于查找目标节点的父级节点
				function findParent(node, targetId) {
					if (!node || !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++
			// 		let children = this.feedbackItems[index].childrenType || [];
			// 		this.templateId = this.feedbackItems[index].complaintTypeId
			// 		this.formdata = {
			// 			complaintContent: ""
			// 		}
			// 		this.text = this.feedbackItems[index].complaintTypeName
			// 		if (children.length > 0) {
			// 			this.isLastChild = 0
			// 			this.feedbackItems = children
			// 			this.templateId = this.feedbackItems[0].complaintTypeId
			// 		} else {
			// 			this.isLastChild = 1
			// 			this.formdata = {
			// 				complaintContent: ""
			// 			}
			// 			setTimeout(() => {
			// 				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
			// 		}
			// 	})
			// },
			submit() {
				if (this.fileList1.some(item => item.status == 'uploading')) {
					uni.showToast({
						title: '等待图片上传中',
						icon: 'none'
					})
					return
				}
				var images = [];
				this.fileList1.forEach(function(element) {
					images.push(element.url)
				});
				this.$refs.uForm.validate().then(res => {
					if (res) {
						uni.showModal({
							title: '',
							content: '我们已收到您的反馈，谢谢',
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
									uni.navigateBack()
								} else if (res.cancel) {
									uni.navigateBack()
								}
							}
						});
					}
				})
			},
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				const projectCode = uni.getStorageSync('projectCode')
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: uni.getStorageSync('addressUrl_' + projectCode) +
						'/app/common/uploadOSS', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						success: (res) => {
							setTimeout(() => {
								console.log(JSON.parse(res.data).url)
								resolve(JSON.parse(res.data).url)
							}, 1000)
						}
					});
				})
			},
			// goLogin(data) {
			// 	if (!this.projectCode) {
			// 		uni.showToast({
			// 			title: '链接有误',
			// 			icon: 'none'
			// 		});
			// 		return
			// 	}
			// 	this.loginFsUserWx(data)
			// 	return
			// 	this.utils.getProvider().then(provider => {
			// 		console.log('当前的环境商', provider)
			// 		if (!provider) {
			// 			reject()
			// 		}
			// 		uni.login({
			// 			provider: provider,
			// 			success: async loginRes => {
			// 				console.log(loginRes)
			// 				uni.getUserInfo({
			// 					provider: provider,
			// 					success: (infoRes) => {
			// 						uni.showToast({
			// 							title: '处理中...',
			// 							icon: 'loading'
			// 						});
			// 						loginByMp({
			// 							code: loginRes.code,
			// 							encryptedData: infoRes.encryptedData,
			// 							iv: infoRes.iv,
			// 							appId: getApp().globalData.appId
			// 						}).then(res => {
			// 							uni.hideLoading();
			// 							if (res.code == 200) {
			// 								this.$store.commit('setCoureLogin', 1);
			// 								uni.setStorageSync(this.utils
			// 									.TOKEN_KEYAuto, res.token);
			// 								uni.setStorageSync('auto_userInfo',
			// 									JSON.stringify(res.user));
			// 								this.userId = res.user.userId || ''
			// 								this.isLogin = true
			// 								this.getMenuButton()
			// 								this.getList()
			// 							} else {
			// 								uni.showToast({
			// 									title: res.msg,
			// 									icon: 'none'
			// 								});
			// 							}
			// 						}).catch(err => {
			// 							uni.hideLoading();
			// 							uni.showToast({
			// 								icon: 'none',
			// 								title: "登录失败,请重新登录",
			// 							});
			// 						});
			// 					}
			// 				});
			// 			}
			// 		})
			// 	}).catch(err => {})
			// },
			// H5授权绑定关系
			// async loginFsUserWx(data) {
			// 	if (data) {
			// 		let token = uni.getStorageSync('TOKEN_WEXIN');
			// 		let user = uni.getStorageSync('userInfo')

			// 		uni.setStorageSync(this.utils.TOKEN_KEYAuto, token);
			// 		uni.setStorageSync('auto_userInfo', JSON.stringify(user));
			// 		this.userId = user.userId || ''
			// 		this.isLogin = true
			// 		this.getMenuButton()
			// 		this.getList()
			// 	} else {
			// 		uni.setStorageSync('H5course', {
			// 			companyId: this.urlOption.companyId,
			// 			companyUserId: this.urlOption.companyUserId,
			// 			type: 1, //1自动，其他手动
			// 		})
			// 		uni.showLoading({
			// 			title: '加载中'
			// 		});

			// 		try {
			// 			await this.utils.getDomain({
			// 				projectCode: this.projectCode
			// 			}); // code 换成你的业务标识
			// 			await this.utils.getConfigKey();
			// 			uni.navigateTo({
			// 				url: '/pages_course/webview?H5course=' + uni.getStorageSync('H5course')
			// 			})
			// 		} catch (err) {
			// 			console.error('初始化失败', err);
			// 			uni.showToast({
			// 				title: '请求失败',
			// 				icon: 'none'
			// 			});
			// 		} finally {
			// 			uni.hideLoading();
			// 		}
			// 	}
			// }
		}
	};
</script>

<style scoped lang="scss">
	
	.container {
		background-color: #fff;
	}

	.formbox-title {
		padding-bottom: 30rpx;
		border-bottom: 1px solid #f4f4f4;
	}

	.formbox {
		border-top: 1px solid #f4f4f4;
		padding: 30rpx;
	}

	.box {
		padding-bottom: 24rpx;
		border-top: 1px solid #f4f4f4;

		.imgitem {
			padding-top: 20rpx;
		}
	}

	.footer-btn {
		margin-top: 50rpx;
	}

	.submit-btn {
		width: 50%;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		font-size: 30rpx;
		font-family: PingFang SC;
		color: #FFFFFF;
		background: rgb(0, 178, 106);
		border-radius: 16rpx;
		border: 1rpx solid;
		margin-bottom: 30rpx;

		&::after {
			border: none;
		}
	}

	.back-btn {
		color: #bbb;
		background: transparent;
		border-radius: 16rpx;
		border: 1rpx solid #999;
	}

	.header-nav {
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		background-color: #fff;
		box-sizing: border-box;
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;

		.header-title {
			flex: 1;
			text-align: center;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 15px;
			color: #000;
			box-sizing: border-box;
		}
	}

	.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;
	}

	.title {
		background-color: #f4f4f4;
	}
</style>