yanzong_qianduan/pages/news1/feedback.vue

<template>
	<view>
		<view class="order-tab">
			<view :class="OrderType==0?'tab action':'tab'" @click="onOrderTab(0)">
				<text>我要反馈</text>
				<text class="line"></text>
			</view>
			<view :class="OrderType==1?'tab action':'tab'" @click="onOrderTab(1)">
				<text>反馈公示</text>
				<text class="line"></text>
			</view>
			<view :class="OrderType==2?'tab action':'tab'" @click="onOrderTab(2)">
				<text>我的反馈</text>
				<text class="line"></text>
			</view>

		</view>
		<view class="section1" v-if="OrderType==0">
			<u-form :model="form" ref="uForm">
				<view class="section1Item">

					<u-form-item label="反馈类型" label-width="150">
						<u-radio-group v-model="form.type">
							<u-radio active-color="#FF4434" v-for="(item, index) in checkboxList1" :key="index"
								:name="item.name">
								{{item.name}}
							</u-radio>
						</u-radio-group>

					</u-form-item>
					<u-form-item label="反馈类型" label-width="150">
						<u-radio-group v-model="form.shop">
							<u-radio active-color="#FF4434" v-for="(item, index) in checkboxList2" :key="index"
								:name="item.name">
								{{item.name}}
							</u-radio>
						</u-radio-group>

					</u-form-item>
					<u-form-item label="门店" label-width="150" @click="typeShow = true">
						<u-input v-model="form.shopText" placeholder="请选择门店" type="select" @click="typeShow = true" />
						<u-action-sheet :list="shopList" :cancel-btn="false" v-model="typeShow"
							@click="actionSheetCallback"></u-action-sheet>
					</u-form-item>
					<u-form-item label="投诉内容" label-width="150" label-position="top">
						<u-input v-model="form.comment" class="textarea" placeholder="请填写投诉内容" type="textarea" />
					</u-form-item>
					<u-upload :fileList="finishImageList" :previewFullImage="true" @afterRead="afterRead" :maxCount="8"
						width="180" height="180" upload-text="上传照片" @delete="deletePic" name="1" multiple></u-upload>


				</view>
				<view class="section1Item" style="margin-top:20rpx;">
					<u-form-item label="您的称呼" label-width="150">
						<u-input placeholder="请填写" v-model="form.name" />
					</u-form-item>
					<u-form-item label="手机号码" label-width="150">
						<u-input placeholder="请填写" v-model="form.phone" />
					</u-form-item>
				</view>
			</u-form>
			<view class="introContent">
				<view class="introText">温馨提示</view>
				<view class="introText">1.工作人员将于1小时内与您联系解决您的问题(工作时间为周一至周日09:00~21:30)</view>
				<view class="introText">2.有效投诉奖励：最高奖励200元现金/代金券</view>
			</view>
			<view class="submitBtn" @click="submit">
				提交
			</view>
		</view>
		<view class="section2" v-if="OrderType==1">
			<view class="feedShow" v-for="(item,index) in feedBackList" :key="index">
				<view class="feedbackItem">
					<view class="statusfb">
						<text v-if="item.status==0">待处理</text>
						<text v-if="item.status==1">已完成</text>
					</view>
					<view class="feedbackContent">
						<view class="fbTitle">
							<view class="fbFlag">
								<text v-if="item.type==1">投诉</text>
								<text v-if="item.type==2">建议</text>
								<text v-if="item.type==3">表扬</text>
							</view>
							<view class="fbTitleText">
								{{item.store_name}}
							</view>
						</view>
						<u-read-more show-height="150" color="#9E9E9E" :toggle="true" close-text="展开">
							<rich-text :nodes="item.content"></rich-text>
						</u-read-more>
						<view class="timefb">
							{{item.created_at}}
						</view>

					</view>
					<view class="feedbackResult">
						<u-collapse>
							<u-collapse-item title="处理结果">
								<u-form :model="item" ref="item">
									<u-form-item label="处理时间" label-width="150" prop="time">
										{{item.replay_at}}
									</u-form-item>
									<u-form-item label="反馈内容" label-width="150" prop="feedback">
										{{item.content}}
									</u-form-item>
								</u-form>
							</u-collapse-item>

						</u-collapse>
					</view>
				</view>

			</view>
		</view>
		<view class="section2" v-if="OrderType==2">
			<view class="feedShow" v-for="(item,index) in feedBackList" :key="index">
				<view class="feedbackItem">
					<view class="feedbackResult">
						<u-collapse>
							<u-collapse-item :open="true" title="处理结果">
								<u-form :model="item" ref="item">
									<u-form-item label="处理时间" label-width="150" prop="time">
										{{item.replay_at}}
									</u-form-item>
									<u-form-item label="反馈内容" label-width="150" prop="feedback">
										{{item.content}}
									</u-form-item>
								</u-form>
							</u-collapse-item>

						</u-collapse>

					</view>
				</view>

			</view>
			<!-- <view class="empty">
				<image src="/static/news1/feedbackempty.png" mode="widthFix"></image>
				<view class="emptytext">
					还没有反馈内容
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	import * as feedback from '@/api/feedback'
	export default {
		data() {
			return {
				OrderType: 0,
				shop_id: '',
				form: {
					type: '',
					shop: '',
					shopText: '',
					comment: '',
					name: '',
					phone: ''

				},
				feedBackList: [],
				page: 1,
				checkboxList1: [{
						name: '投诉',
						val: 1
					},
					{
						name: '建议',
						val: 2
					},
					{
						name: '表扬',
						val: 3
					}
				],
				checkboxList2: [{
						name: '门店'
					},
					{
						name: '其他'
					},
				],
				typeShow: false,
				shopList: [],
				//照片
				finishImageList: [],
				result: {}
			};
		},
		onShow() {
			this.getShopList()
		},
		onLoad(params) {

		},
		methods: {
			getShopList() {
				const that = this
				that.shopList = []
				return new Promise((resolve, reject) => {
					feedback.shopList()
						.then(res => {
							if (res.data.length > 0) {
								for (var i = 0; i < res.data.length; i++) {
									let obj = {
										text: res.data[i].shop_name,
										id: res.data[i].shop_id
									}
									that.shopList.push(obj)
								}
							}
						})
						.catch(reject)
				})
			},
			submit() {
				const that = this
				let params = {
					shop_id: that.shop_id,
					type: that.form.type,
					object_type: that.form.shop,
					content: that.form.comment
				}
				return new Promise((resolve, reject) => {
					feedback.add(params)
						.then(res => {
							that.$toast(res.message)
						})
						.catch(reject)
				})
			},

			/**
			 * 订单tab点击
			 */
			onOrderTab(type) {
				this.OrderType = type;
				if (type != 0) {
					this.getFeedBack(type)
				}

			},
			getFeedBack(type) {
				// 获取我的反馈信息
				const that = this
				let params = {
					is_my: '',
					page: that.page
				}
				params.is_my = type == 1 ? 0 : 1
				return new Promise((resolve, reject) => {
					feedback.list(params)
						.then(res => {
							if (res.status == 200) {
								that.feedBackList = res.data.list.data
							}
						})
						.catch(reject)
				})
			},
			actionSheetCallback(index) {
				console.log(index,this.shopList)
				this.form.shopText = this.shopList[index].text;
				this.shop_id = this.shopList[index].id
			},
			// 新增图片
			async afterRead(event) {

				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)

					if (JSON.parse(result).code == 1) {
						let item = this[`fileList${event.name}`][fileListLen]
						this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
							status: 'success',
							message: '',
							url: result
						}))
						fileListLen++
					} else {
						this[`fileList${event.name}`].splice(fileListLen, 1)
					}

				}

			},
			//上传照片
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: this.baseUrl+'/api/common/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test',
							token:getToken()
						},
						success: (res) => {
							if(JSON.parse(res.data).code==1){
								setTimeout(() => {
									this.finishImageList.push({url:JSON.parse(res.data).data.fullurl,path:JSON.parse(res.data).data.url})
									resolve(res.data)
								}, 1000)
							}else{
								uni.$u.toast(JSON.parse(res.data).msg)

								resolve(res.data)
							}
						},
						fail: (res) => {
							console.log(res,"rrr")
						}
					});
				})
			},
			//删除图片
			deletePic(event) {

				this.finishImageList.splice(event.index, 1)
			},
		}
	}
</script>

<style scoped lang="scss">
	page {
		min-height: 100%;
		width: 100%;
		background-color: #F7F8FA;

	}

	/* 订单tab */
	.order-tab {

		position: fixed;
		left: 0;
		top: 0;
		z-index: 10;
		display: flex;
		align-items: center;
		width: 100%;
		height: 100rpx;
		background-color: #FFFFFF;

		.tab {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			flex: 1;
			height: 80%;

			text {
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
			}
		}

		.action {
			text {
				color: #FF4D4D;
				line-height: 19px;

			}

			.line {
				position: absolute;
				left: 50%;
				bottom: 0;
				width: 32rpx;
				height: 6rpx;
				background: #FF4D4D;
				transform: translate(-50%, 0);
				border-radius: 32px 32px 32px 32px;

			}
		}
	}

	.section1 {
		border: 1px solid transparent;


		.section1Item {
			background-color: #fff;
			border-radius: 4px 4px 4px 4px;
			margin: 120rpx 30rpx 30rpx 30rpx;
			padding: 10rpx 40rpx;
		}

		::v-deep .u-form-item--left__content__label {
			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			color: #373737;
		}

		::v-deep .u-border-bottom:after {
			border: none;
		}

		.textarea {
			height: 250rpx;
			background: #F7F8FA;
			border-radius: 3px 3px 3px 3px;
			opacity: 1;

		}

		::v-deep .u-input__textarea {
			padding: 26rpx;
		}

		.introContent {
			margin-top: 16rpx;
			margin: 16rpx 30rpx 30rpx 30rpx;

			.introText {
				font-size: 24rpx;
				color: #C5C6C8;
				margin-top: 16rpx;
				line-height: 40rpx;
			}

		}

		.submitBtn {
			height: 100rpx;
			background: linear-gradient(180deg, #FE7E71 0%, #FF4434 100%);
			border-radius: 52px 52px 52px 52px;
			opacity: 1;
			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			margin: 32rpx 30rpx 30rpx 30rpx;
			text-align: center;
			line-height: 100rpx;
		}
	}

	.section2 {
		min-height: 100%;
		padding: 120rpx 30rpx 30rpx 30rpx;

		.feedShow {
			padding: 30rpx;
			border-radius: 4px 4px 4px 4px;
			background-color: #fff;
			margin-bottom: 16rpx;
		}

		.feedbackItem {
			position: relative;
			margin-bottom: 30rpx;
			// border:1px solid yellow;

			.statusfb {
				position: absolute;
				right: 0;
				width: 92rpx;
				height: 44rpx;
				line-height: 44rpx;
				text-align: center;
				background-color: #EEFAF6;
				font-size: 26rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #2DC37F;
				top: 40rpx;
			}

			.feedbackContent {
				padding-bottom: 30rpx;
				border-bottom: 1px solid #A0A0A0;

				.fbTitle {
					display: flex;
					align-items: center;
					width: calc(100% - 100rpx);

					.fbFlag {
						// width: 54rpx;
						// height: 44rpx;
						// line-height: 44rpx;
						background: #FFFFFF;
						border-radius: 3px;
						opacity: 1;
						padding: 5rpx;
						border: 1px solid #FF4D4D;
						font-size: 26rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						color: #FF4D4D;
						flex-shrink: 1;
					}

					.fbTitleText {
						flex: 1;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						color: #000;
						font-size: 500;
						margin-left: 20rpx;
					}

				}

				.timefb {
					color: #A0A0A0;
				}
			}

			.feedbackResult {
				::v-deep .u-form-item--left__content__label {
					color: #A6A6A6;
				}

				::v-deep .u-border-bottom:after {
					border: none;
				}

				::v-deep .u-form-item__body {
					align-items: baseline;
				}

				::v-deep .u-form-item--right__content__slot {
					line-height: 36rpx;
				}

			}


		}

		.empty {
			text-align: center;
			position: relative;
			top: 150rpx;

			image {
				width: 210rpx;
				height: auto;
			}

			.emptytext {
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #717171;

			}
		}

	}
</style>