yusheng-h5/pages/feedback/feedback.vue

<template>
	<view class="view-page">
		<headerHeight bgColor="#fff" />
		<navBar :navTitle="footerIndex ? '反馈列表' : '反馈问题'" bgColor="#fff">
		</navBar>
		<view class="container" v-if="!errorPage">
			<view v-if="footerIndex === 0">
				<view class="">
					<view class="title font-32 color-3 font-w500">
						问题描述
					</view>
					<view class="textarea-view">
						<textarea v-model="description" placeholder-style="color:#666" placeholder="请输入问题描述" />
					</view>
				</view>
				<view class="" style="margin-top: 24rpx;">
					<view class="title font-32 color-3 font-w500">
						问题截图（选填）
					</view>
					<view class="textarea-view">
						<uploadImage @changeImageList="successUpload" ref="uploadImage"></uploadImage>
					</view>
				</view>
				<view class="" style="margin-top: 24rpx;">
					<view class="title font-32 color-3 font-w500">
						联系电话（选填）
					</view>
					<view class="textarea-view">
						<input v-model="phone" class="uni-input" type="number" placeholder="请输入联系电话" />
					</view>
				</view>
				<view class="flex-line confirm-view">
					<view class="confirm-button color-3 font-28" @click="submit">
						提交
					</view>
				</view>
			</view>
			<view v-if="footerIndex === 1">
				<view v-if="dataList && dataList.length">
					<view class="feed-box" v-for="item in dataList" :key="item.id">
						<view class="box-top-line">
							<view v-if="item.image" class="new-box-image">
								<img :src="item.image" alt="" />
							</view>
							<view :class="item.image ? 'ml-20 text-content-image' : 'text-content'">
								<view class="color-6 font-28 multi-line w-fill">
									{{item.content}}
								</view>
								<view class="font-24 color-9 mt-24">
									{{item.updatetime}}
								</view>
								<!-- -->
								<img v-if="item.is_deal === 2"
									style="width: 100rpx;height: 100rpx;position: absolute; right: 5%;bottom: 2%;"
									:src="icon" alt="" />
							</view>
						</view>
					</view>

				</view>
				<uni-load-more :status="loading ? 'loading' : noMore ? 'noMore' : 'more'" />
			</view>
		</view>
		<view v-else class="">
			暂无身份信息
		</view>
		<view class="footer flex-line">
			<view class="footer-button flex-line" @click="operate(index)" v-for="(item,index) in footerList"
				:key="index">
				<view class="icon">
					<uni-icons :type="item.icon" :color="footerIndex === index ? $config.BASR_COLOR : '#333'"
						size="20"></uni-icons>
				</view>
				<view :class="footerIndex === index ? 'active' : ''" class="title ml-6 color-3 font-28 font-w400">
					{{item.title}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uploadImage from '@/component/uploadImage.vue'
	import headerHeight from '@/component/headerHeight.vue';
	import navBar from '@/component/nav.vue';
	import http from '@/until/http.js';
	import logo from '@/static/image/logo.png';
	import Icon from '@/static/image/help/yichuli.png'
	export default {
		components: {
			headerHeight,
			navBar,
			uploadImage
		},
		data() {
			return {
				logo,
				icon: Icon,
				footerList: [{
						title: '意见反馈',
						icon: 'mail-open'
					},
					{
						title: '我的反馈',
						icon: 'person'
					}
				],
				pageConfig: {
					pageSize: 5,
					currentPage: 1,
					total: 0
				},
				footerIndex: 0,
				loading: false,
				errorPage: false,
				total: 0,
				last_page: 0,
				page: 1,
				limit: 10,
				dataList: [],
				phone: '',
				description: '',
				uploadResult: "", // 上传结果
				noMore: true
			}
		},
		onLoad(options) {
			const {
				id
			} = options
			uni.setStorageSync('token', id)
			this.errorPage = id ? false : true
		},
		onReachBottom() {
			if (!this.loading && !this.noMore) {
				this.getUserFeedList()
			}
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			successUpload(list) {
				const imageList = list.map(ele => {
					return ele.tempFilePath
				})
				if (imageList && imageList.length) {
					this.uploadResult = imageList.join(',')
				} else {
					this.uploadResult = ""
				}
			},
			operate(index) {
				if (index) {
					this.pageConfig.currentPage = 1
					this.dataList = []
					this.getUserFeedList()
				}
				setTimeout(() => {
					this.footerIndex = index
				}, 500)
			},
			async getUserFeedList() {
				await http.get('/api/Suggest/my_suggest', {
					token: uni.getStorageSync('token'),
					page: this.pageConfig.currentPage,
					page_limit: this.pageConfig.pageSize
				}).then(response => {
					const {
						data,
						code
					} = response
					if (code) {
						this.pageConfig.total = data.count
						this.loading = false
						const newData = data.list || []
						if (newData.length === 0) {
							this.noMore = true
							return
						}
						this.dataList = [...this.dataList, ...newData]
						this.pageConfig.currentPage++
						if (this.dataList.length === this.pageConfig.total) {
							this.noMore = true
							return
						}
					}
				})
			},
			submit() {
				if (!uni.getStorageSync('token')) {
					uni.showToast({
						title: "暂无用户身份信息",
						icon: 'none'
					});
					return
				}
				if (this.description === '') {
					uni.showToast({
						title: "请输入问题描述",
						icon: 'none'
					});
					return
				}
				const parameter = {
					token: uni.getStorageSync('token'),
					image: this.uploadResult,
					content: this.description,
					tell: this.phone
				}
				uni.showLoading({
					title: '提交中',
					mask: true
				})
				http.post('/api/Suggest/create_suggest', parameter).then(response => {
					const {
						data,
						code
					} = response
					if (code) {
						setTimeout(() => {
							uni.hideLoading()
							uni.showToast({
								title: "提交成功",
								icon: 'none',
								mask: true
							});
							this.description = ''
							this.phone = ''
							this.uploadResult = ""
							this.$refs.uploadImage.clearImage()
							this.operate(1)
						}, 1000)
					} else {
						uni.showToast({
							title: "提交失败",
							icon: 'none'
						});
						uni.hideLoading()
					}

				}).catch(error => {
					uni.showToast({
						title: "提交失败",
						icon: 'none'
					});
					uni.hideLoading()
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.view-page {
		// padding: 32rpx;
		width: 100vw;
		min-height: 100vh;
		background-color: #F8F8F8;

		.text-content-image {
			width: calc(100% - 260rpx);
			position: relative;
			display: inline-flex;
			flex-wrap: wrap;
			align-content: space-between;
		}

		.text-content {
			width: 100%;
			position: relative;
			display: inline-flex;
			flex-wrap: wrap;
			align-content: space-between;
		}

		.footer {
			width: 100%;
			height: 98rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -6rpx 8rpx 0rpx rgba(222, 222, 222, 0.25);
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			width: 100%;
			justify-content: space-around;

			.footer-button {
				.icon {
					width: 48rpx;
					height: 48rpx;
				}

				.title {}
			}

			.active {
				color: var(--primary-color);
			}
		}

		.status-bar {
			background-color: #fff;
		}

		.nav {
			padding: 32rpx;
			width: calc(100% - 64rpx);
			justify-content: start;
			background-color: #fff;

			.icon-image {
				width: 48rpx;
				height: 48rpx;
			}

			.title {
				width: calc(100% - 48rpx);
				text-align: center;
			}
		}

		.container {
			padding: 24rpx 32rpx;

			.feed-box {
				padding: 24rpx;
				background-color: #fff;
				border-radius: 22rpx;
				margin-bottom: 24rpx;
				width: calc(100% - 48rpx);

				.box-top-line {
					width: 100%;
					display: inline-flex;
					justify-content: flex-start;
					position: relative;
				}

				.new-box-image {
					width: 240rpx;
					height: 184rpx;
					border-radius: 12rpx;

					img {
						border-radius: 12rpx;
					}
				}
			}

			.title {
				margin-bottom: 24rpx;
			}

			.textarea-view {
				padding: 24rpx;
				background-color: #fff;
				border-radius: 22rpx;

				.image-upload {
					width: 200rpx;
					height: 200rpx;
					border-radius: 20rpx;
				}
			}

			.confirm-view {
				justify-content: center;
				margin: 48rpx 0;
				width: 100%;

				.confirm-button {
					width: 600rpx;
					height: 84rpx;
					background: var(--primary-color);
					font-size: var(--font-button-size);
					color: var(--font-button-color);
					border-radius: 106rpx;
					display: inline-flex;
					justify-content: center;
					align-items: center;
				}
			}

		}
	}
</style>