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 c">

					<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-picker :range="shopList" range-key="text" @confirm="actionSheetCallback($event)"
							v-model="typeShow" mode="selector"></u-picker>
					</u-form-item>
					<u-form-item label="投诉内容" required label-width="150" label-position="top">
						<u-input v-model="form.comment" height="228" class="realAddr" placeholder="请填写投诉内容"
							type="textarea"></u-input>
					</u-form-item>
					<u-upload :action="action" :header="header" @on-uploaded="transferSuccess" @on-remove="transferRemove"
						width="180" height="180" :file-list="finishImageList" :custom-btn="true" max-count="6">
						<template v-slot:addBtn>
							<view class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
								<image :src="$picUrl + '/static/news/icon-upload.png'"></image>
								<view class="1">上传照片</view>
							</view>
						</template>
					</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-box">
				<view class="submitBtn" @click="submit">
					提交
				</view>
			</view>

		</view>
		<view class="section2" v-if="OrderType != 0 && 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 == 1">
								<text>投诉</text>
							</view>
							<view class="fbFlag fbFlag2" v-if="item.type == 2">
								<text>建议</text>
							</view>
							<view class="fbFlag fbFlag3" v-if="item.type == 3">
								<text>表扬</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 :nodes="item.content"></rich-text>
							<view v-if="item.file_path">
								<u-upload width="180" height="180" max-count="1" :file-list="item.file_paths" :deletable="false">
								</u-upload>
							</view>

						</u-read-more>
						<view class="timefb" v-if="OrderType == 1">
							<text>反馈人：</text> {{ item.user_name }}
						</view>
						<view class="timefb">
							<text>反馈时间：</text> {{ item.created_at }}
						</view>

					</view>
					<view class="feedbackResult" v-if="item.status">
						<u-collapse>
							<u-collapse-item :open="false" 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.OrderType != 0) {
			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)
			})
		},
		//接受上传返回的数据
		transferSuccess(list) {
			if (list.length > 0) {
				const {
					response
				} = list[0];
				if (response.status == 200) {
					uni.showToast({
						title: "上传成功"
					})
					let idList = []
					list.forEach(item => {
						idList.push(item.response.data.fileInfo.file_id)
					});
					this.image_id = idList.join(',');
				}
			}
		},
		transferRemove(file, fileList) {
			this.image_id = this.handleRemove(file, fileList);
		},
		handleRemove: function (file, fileList) {
			let idList = []
			fileList.forEach(item => {
				idList.push(item.response.data.fileInfo.file_id)
			});
			return idList.join(',')

		},
		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
						that.image_id = ""
						that.finishImageList = []
					})
					.catch(reject)
			})
		},

		/**
		 * 订单tab点击
		 */
		onOrderTab(type) {
			this.OrderType = type;
			this.pageNum = 1
			this.image_id = ""
			this.finishImageList = []
			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
							let end = res.data.list.data
							end.map(itme=>{
								if(itme.file_path){
									itme.file_paths = [] 
									let img_arr = itme.file_path.split(',')
									img_arr.map(src=>{
										itme.file_paths.push({
											url:src
										})
									}) 
								}
							}) 
							that.feedBackList = that.feedBackList.concat(end)
						}
					})
					.catch(reject)
			})
		},
		actionSheetCallback(index) {
			console.log(index, this.shopList)
			this.form.shopText = this.shopList[index].text;
			this.shop_id = this.shopList[index].id
		},

	}
}
</script>

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

}

.c {
	padding-top: 20rpx;
	overflow: hidden;

	.slot-btn {
		width: 180rpx;
		height: 180rpx;
		background: #F6F6F6;
		border-radius: 10rpx;
		border: 1px solid #C0C0C0;
		text-align: center;
		font-size: 28rpx;
		font-weight: 500;
		color: #6D6D6D;

		.l {
			line-height: 30rpx;
			margin-top: 10rpx;
		}

		image {
			width: 50rpx;
			height: 50rpx;
			display: block;
			margin: 0 auto;
			margin-top: 30rpx;
		}
	}
}

.realAddr {
	::v-deep .u-input {
		padding: 10rpx 22upx !important;
		background: #F7F8FA;
		border-radius: 6rpx !important;
	}

}

/* 订单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;
	}

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

	.introContent {
		margin: 16rpx 30rpx 30rpx 30rpx;
		padding-bottom: 160rpx;

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

	}

	.submitBtn-box {
		width: 100%;
		position: fixed;
		left: 0;
		z-index: 88;
		bottom: 0;
		padding: 30rpx 32rpx;
		background: #fafafa;
	}

	.submitBtn {
		height: 100rpx;
		background: linear-gradient(180deg, #FE7E71 0%, #FF4434 100%);
		border-radius: 52px 52px 52px 52px;
		opacity: 1;
		font-size: 32rpx;
		font-weight: 500;
		color: #FFFFFF;
		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;
					padding: 5rpx;
					border: 1px solid #FF4D4D;
					font-size: 26rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					color: #FF4D4D;
					flex-shrink: 1;
					margin-right: 20rpx;
				}

				.fbFlag2 {
					border: 1px solid #41B4EC;
					color: #41B4EC;
				}

				.fbFlag3 {
					border: 1px solid #2DC37F;
					color: #2DC37F
				}

				.fbTitleText {
					flex: 1;
					font-size: 28rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					color: #000;
					font-weight: bold;
				}

			}

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