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="170">
						<u-radio-group v-model="form.type">
							<u-radio active-color="#FF4434" v-for="(item, index) in checkboxList1" :key="index"
								:name="item.val">
								{{ item.name }}
							</u-radio>
						</u-radio-group>

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

					</u-form-item>
					<u-form-item label="反馈类型" label-width="170" @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="投诉内容" required label-width="150" label-position="top">
						<u-input v-model="form.comment" class="textarea" placeholder="请填写投诉内容" type="textarea" />
					</u-form-item>
					<u-upload :action="action" :header="header" :fileList="finishImageList" :previewFullImage="true"
						@afterRead="afterRead" :maxCount="8" upload-text="上传照片" @delete="deletePic" name="1"
						multiple></u-upload>
				</view>
				<view class="section1Item" style="margin-top:20rpx;">
					<u-form-item label="您的称呼" label-width="170">
						<u-input placeholder="请输入您的称呼" v-model="form.user_name" />
					</u-form-item>
					<u-form-item label="手机号码" label-width="170">
						<u-input placeholder="请输入手机号" v-model="form.mobile" />
					</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 && feedBackList.length > 0">
			<view class="feedShow" v-for="(item, index) in feedBackList" :key="index">
				<view class="feedbackItem">
					<view class="feedbackContent">
						<view class="fbTitle">
							<view class="fbFlag" v-if="item.type != 0">
								<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.shop_name }}
							</view>
							<view class="statusfb">
								<text v-if="item.status == 0">待处理</text>
								<text v-if="item.status == 1">已完成</text>
							</view>
						</view>
						<u-read-more showHeight="160" textIndent="0" fontSize="26rpx" color="#9E9E9E" :toggle="true"
							close-text="展开">
							<rich-text v-if="index != 0" :nodes="item.content"></rich-text>
							<rich-text v-else
								nodes="投诉内容投诉内容投诉内容投诉内容投诉内容投诉内容投诉内容投诉内容投诉内容投诉内容投诉内容投诉内容投诉内容投诉内容投诉内容投诉内容投诉内容"></rich-text>
						</u-read-more>
						<view class="timefb">
							{{ item.created_at }}
						</view>

					</view>
					<view class="feedbackResult">
						<u-collapse>
							<u-collapse-item :open="true" title="处理结果">
								<u-form :model="item" ref="item" class="selfForm">
									<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.reply }}
									</u-form-item>
								</u-form>
							</u-collapse-item>
						</u-collapse>
					</view>
				</view>
			</view>
		</view>
		<view class="section2" v-if="OrderType == 2 && feedBackList.length > 0">
			<view class="feedShow" style="padding: 0;" v-for="(item, index) in feedBackList" :key="index">
				<view class="feedbackResult">
					<u-collapse>
						<u-collapse-item :open="true" title="处理结果">
							<u-form :model="item" ref="item" class="selfForm">
								<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.reply }}
								</u-form-item>
							</u-form>
						</u-collapse-item>
					</u-collapse>
				</view>
			</view>
		</view>
		<view class="empty" v-if="OrderType != 0 && total == 0">
			<u-empty text="暂无信息" mode="list"></u-empty>
		</view>
		<!-- <view class="empty" v-if="OrderType == 2">
			<image class="emptyImg" :src="$picUrl + '/static/news1/feedbackempty.png'" mode="widthFix"></image>
			<view class="emptytext">
				还没有反馈内容
			</view>
		</view> -->
	</view>
</template>

<script>
import Config from '@/core/config'
import * as feedback from '@/api/feedback'
export default {
	data() {
		return {
			action: '',
			header: '',
			OrderType: 0,
			shop_id: '',
			total: 1,
			form: {
				type: '',
				shop: '',
				shopText: '',
				comment: '',
				user_name: '',
				phone: ''

			},
			feedBackList: [], 
			checkboxList1: [{
				name: '投诉',
				val: 1
			},
			{
				name: '建议',
				val: 2
			},
			{
				name: '表扬',
				val: 3
			}
			],
			checkboxList2: [{
				name: '门店',
				val: 1
			},
			{
				name: '其他',
				val: 2
			},
			],
			typeShow: false,
			shopList: [],
			//照片
			finishImageList: [],
			result: {}
		};
	},
	onReady() {
		this.action = (Config.get('apiUrl') + 'upload/image').replace("index.php?s=/", "")
		this.header = {
			'Storeid': uni.getStorageSync('Store').storeInfo.store_id,
			'Access-Token': uni.getStorageSync('AccessToken'),
			'platform': "MP-WEIXIN",
		}
	},
	onShow() {
		this.getShopList()
	},
	onLoad(params) {

	},
	onReachBottom() {
		if (this.feedBackList.length <= this.total) {
			this.pageNum++;
			this.getFeedBack(this.OrderType)
		}
	},
	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
			if (that.form.comment == '') {
				uni.showToast({
					title: '请填写投诉内容！',
					icon: 'none',
					duration: 2000
				})
				return
			}
			if (this.form.mobile && (!/^\+?\d[\d -]{8,12}\d/.test(this.form.mobile))) {
				uni.showToast({
					title: '手机号格式不正确！',
					icon: 'none',
					duration: 2000
				})
				return
			}
			let params = {
				shop_id: that.shop_id,
				type: that.form.type,
				object_type: that.form.shop,
				content: that.form.comment,
				user_name: that.form.user_name,
				mobile: that.form.mobile,
				image_id: that.image_id
			}
			return new Promise((resolve, reject) => {
				feedback.add(params)
					.then(res => {
						that.$toast(res.message)
						that.shop_id = ''
						that.form = that.$options.data().form
					})
					.catch(reject)
			})
		},

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

		},
		getFeedBack(type) {
			// 获取我的反馈信息
			const that = this
			let params = {
				is_my: 0,
				page: that.pageNum
			}
			params.is_my = type == 1 ? 0 : 1
			return new Promise((resolve, reject) => {
				feedback.list(params)
					.then(res => {
						if (res.status == 200) {
							that.total = res.data.list.total 
							that.feedBackList =that.feedBackList.concat(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;

		}
	}
}

.selfForm {
	::v-deep .u-form-item {
		padding: 0;
	}
}

.section1 {
	border: 1px solid transparent;

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

	::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: 258rpx;
	// 	border-radius: 3px;
	// 	border: solid 1upx #F7F8FA;

	// }

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

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

		.introText {
			font-size: 26rpx;
			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 0;
		border-radius: 4px;
		background-color: #fff;
		margin-bottom: 16rpx;
	}

	.feedbackItem {
		position: relative;
		margin-bottom: 30rpx;

		.statusfb {
			position: absolute;
			top: 4rpx;
			right: -30rpx;
			width: 100rpx;
			height: 44rpx;
			line-height: 44rpx;
			text-align: center;
			border-radius: 22rpx 0 0 22rpx;
			background-color: #EEFAF6;
			font-size: 26rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			color: #2DC37F;
		}

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

			.fbTitle {
				position: relative;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 20rpx;

				// width: calc(100% - 100rpx); 
				.fbFlag {
					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;
					font-size: 28rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					color: #000;
					font-weight: bold;
					margin-left: 20rpx;
				}

			}

			.timefb {
				margin-top: 20rpx;
				font-size: 24rpx;
				color: #A0A0A0;
			}
		}




	}

	.feedbackResult {
		padding: 0 30rpx;

		::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 {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	height: calc(100vh - 102rpx);
}
</style>