GuangYuYuan-app/pages/join/feedback.vue

<template>
	<view class="complain">
		<view class="content">
			<view class="title">
				投诉类型
			</view>
			<view class="select" v-for="(item,index) in list" :key="index" @click="selectType(item,index)">
				{{item.info}}
				<image src="../../static/other/select.png" mode="" v-if="currentIndex === index"></image>
				<image src="../../static/other/no_select.png" mode="" v-else></image>
			</view>
		</view>
		<view class="content">
			<view class="title">
				问题描述
			</view>
			<view class="select">
				<textarea v-model="form.description" placeholder="您的反馈将帮助我们改善服务品质,期待您的反馈"></textarea>
			</view>
		</view>
		<view class="content">
			<view class="title">
				投诉商户
			</view>
			<view class="select">
				<input type="text" v-model="form.name" placeholder="请输入您要投诉的商户姓名" />
				<u-select v-model="show" :list="citylist" @confirm="confirm"></u-select>
			</view>
			<view class="city" @click="selectCity" v-if="form.deptName == ''">
				所在城市
			</view>
			<view class="city" v-else>
				{{form.deptName}}
			</view>
		</view>
		<view class="content">
			<view class="title">
				手机号码
			</view>
			<view class="select">
				<input v-model="form.phone" placeholder="请输入您的手机号码,以便我们及时联系您"></input>
			</view>
		</view>
		<view class="content">
			<view class="title">
				添加图片
			</view>
			<view class="select">
				<u-upload :action="uploadUrl" :max-count="2" :file-list="LifeList" @on-success="handleUploadSuccess"
					@on-remove="handleUploadRemove" :header="header"></u-upload>
			</view>
		</view>
		<view class="btn_box">
			<view class="btn" @click="submit">
				提交
			</view>
		</view>
	</view>
</template>

<script>
	import {
		complain,
		getCityList,complaintEnum
	} from '../../api/index'
	export default {
		data() {
			return {
				list: [],
				citylist: [],
				city: '',
				currentIndex: '',
				describe: '',
				jsName: '',
				LifeList: [],
				photograph: [],
				show: false,
				// uploadUrl: 'https://test.baoxianzhanggui.com/nightFragrance/common/upload',
				uploadUrl:'https://city.baoxianzhanggui.com/nightFragrance/common/upload',
				urlImg: [],
				form: {
					description: '',
					complaintType: '',
					name: '',
					photograph: '',
					deptName: '',
					phone:'',
					deptId: null
				},
				token: ''
			}
		},
		methods: {
			selectType(item, index) {
				this.currentIndex = index
				this.form.complaintType = item.desc
			},
			handleUploadSuccess(response) {
				this.photograph.push(response.fileName)
			},
			handleUploadRemove(index) {
				this.urlImg.splice(index, 1);
				this.form.photograph.splice(index, 1)
			},
			selectCity() {
				this.show = true
			},
			confirm(e) {
				this.form.deptName = e[0].label
				this.form.deptId = e[0].value
			},
			submit() {
				console.log(this.form)
				this.form.photograph = this.photograph.toString()
				if (this.form.complaintType == '') {
					uni.showToast({
						title: '请选择投诉类型',
						icon: 'none'
					})
					return
				} else {

					complain(this.form).then(res => {
						console.log(res)
						if (res.data.code == 200){
							uni.showToast({
								title: '提交成功',
								icon: 'none'
							})
							uni.navigateBack()
						}else{
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					})
				}
			},
			complaintEnum(){
				complaintEnum().then(res => {
					this.list = res.data.data
				})
			},
			getCity() {
				getCityList().then(res => {
					this.citylist = res.data.data.map(({
						deptId,
						deptName
					}) => ({
						value: deptId,
						label: deptName
					}))
				});
			}
		},
		onShow() {
			// this.token =
			// 	'eyJhbGciOiJIUzUxMiJ9.eyJ0ZjoiOiJiN2UyOTU5NC0wNjE0LTQ2MWUtOThmYy1hMGJlYWNjYjExZWUifQ.SYH2TuRT-DVjzbW2moz6pgkItmsOsUEbh8jENZlCM9RV0AUEMFq9P7HEtuVa1LXWts1k3ss1VD1rpMrnr_9EFA'
			// uni.setStorageSync('access-token',
			// 	'eyJhbGciOiJIUzUxMiJ9.eyJ0ZjoiOiJiN2UyOTU5NC0wNjE0LTQ2MWUtOThmYy1hMGJlYWNjYjExZWUifQ.SYH2TuRT-DVjzbW2moz6pgkItmsOsUEbh8jENZlCM9RV0AUEMFq9P7HEtuVa1LXWts1k3ss1VD1rpMrnr_9EFA'
			// 	)
			this.getCity()
			this.complaintEnum()
		},
		computed: {
			header() {
				return {
					Authorization: `tf: ${this.token}`, // 携带Token的请求头
				};
			},
		},
		mounted() {
			// 在页面加载时获取Token，可以从本地缓存中获取
			this.token = uni.getStorageSync('access-token'); // 假设token保存在本地缓存中
		},
	}
</script>

<style lang="scss" scoped>
	.complain {
		width: 100%;
		height: 100%;
		background: linear-gradient(to right, #fcfdff, #b1fffc);
		padding-top: 20px;
		overflow-y: auto;
		padding-bottom: 100px;

		.content {
			width: 95%;
			margin: 10px auto;
			background-color: #fff;
			border-radius: 10px;
			padding: 20rpx;
			box-sizing: border-box;
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

			.title {
				width: 100%;
				background-color: #f7f7f7;
				margin: 0 auto;
				padding: 10rpx 0px;
				text-align: center;
				border-radius: 10px;
			}

			.select {
				width: 100%;
				display: flex;
				justify-content: space-between;
				margin: 20px 0px;

				image {
					width: 40rpx;
					height: 40rpx;
				}

				textarea {
					width: 100%;
					height: 100px;
					background-color: #f7f7f7;
					padding: 10px;
					border-radius: 10px;
				}

				input {
					width: 100%;
					background-color: #f7f7f7;
					padding: 10px;
					border-radius: 10px;
					font-size: 24rpx;
				}

			}

			.city {
				width: 100%;
				font-size: 24rpx;
				box-sizing: border-box;
				background-color: #f7f7f7;
				margin: 0 auto;
				padding: 10px;
				// text-align: left;
				border-radius: 10px;
			}
		}

		.btn_box {
			width: 100%;
			height: 60px;
			background-color: #fff;
			position: fixed;
			bottom: 0px;

			.btn {
				width: 40%;
				height: 40px;
				text-align: center;
				background: linear-gradient(to right, #35c99d, #27aea7);
				margin: 20rpx auto;
				line-height: 40px;
				border-radius: 10px;
				color: #fcfdff;
			}
		}
	}
</style>