apply-assistant-v3/root/person/feedback.vue

<template>
	<view class="p-person-feedback g_w_all g_bg_f_5 g_pl_10 g_pt_16 g_pr_10 g_kuaishou" style="overflow: hidden">
		<!-- <view class="g_fs_16 g_mt_16 g_mb_16">问题类别</view> -->
		<view class="g_flex_row_start g_mb_16">
			<view class="g_flex_row_center flex_center g_w_60 g_h_30 g_fs_14 g_radius_15 g_mr_8" v-for="(item, index) in troubleList" :key="index" :class="troubleActive == index ? 'g_bg_main g_c_f' : 'g_bg_f g_c_3'" @click="troubleActive = index">{{ item }}</view>
		</view>
		<view class="g_pt_12 g_pl_16 g_pr_16 g_bg_f g_radius_8 g_position_rela" style="min-height: 188px">
			<u-input :maxlength="150" class="" v-model="submitInfo.desp" placeholder="请用简短文字描述您的问题..." :custom-style="{ fontSize: ' 16px', overflow: 'auto', maxHeight: '245px',lineHeight:'1.5' }" :clearable="false" type="textarea" :auto-height="true" :height="264" placeholder-style="color:#ccc;"></u-input>
			<view class="g_text_r g_fs_12">{{ submitInfo.desp.length }}/150</view>
		</view>
		<view class="g_mt_16">
			<view class="g_flex_row_start">
				<view v-for="(item, index) in imgList" class="g_position_rela" :class="index <= 2 ? 'g_mr_18' : ''" :key="index">
					<i class="iconfont icon-guanbi close" @click="delImg(index)"></i>

					<image :src="item" class="g_w_72 g_h_72 g_radius_8" />
				</view>
				<image v-if="imgList.length < 4" src="https://matripe-cms.oss-cn-beijing.aliyuncs.com/dailibaoming/my_uploadphotos.svg" class="g_w_72 g_h_72 g_radius_8" @click="uploadPhoto" hover-class="thover" />
			</view>
			<view class="g_fs_12 g_c_9 g_mt_8">上传照片截图，最多传4张（选填）</view>
		</view>
		<view class="g_flex_row_center g_mt_65">
			<g-button btnText='提交' type='primary' @clickBtn='submitDesp' />
		</view>
		<view class="g_c_sub g_mt_16 g_fs_14 g_text_c g_w_all g_fw_700" style="position: fixed; bottom: 56px; width: calc(100vw - 20px)" hover-class="thover" @click="goList">查看记录</view>
	</view>
</template>

<script>
export default {
	// 组件名称
	name: "",
	// 局部注册的组件
	components: {},
	// 组件参数 接收来自父组件的数据
	props: {},
	// 组件状态值
	data() {
		return {
			troubleList: ["投诉", "建议", "故障", "其他"],
			troubleActive: 0,
			submitInfo: {
				desp: "",
			},
			imgList: [],
		};
	},
	// 计算属性
	computed: {},
	// 侦听器
	watch: {},
	created() {},
	mounted() {},
	// 组件方法
	methods: {
		// 上传图片
		uploadPhoto() {
			let that = this;
			that.G.uploadImg((res) => {
				console.log(res);
				if (that.imgList.length < 4) {
					that.imgList.push(res.image);
					uni.hideLoading();
				} else {
					uni.showToast({
						title: "最多只能上传4张",
						icon: "none",
					});
				}
			});
		},
		/**
		 * 提交反馈
		 */
		submitDesp() {
			let that = this;
			console.log(that.submitInfo);

			let info = {
				content: that.submitInfo.desp,
				classify: that.troubleActive + 1,
				imgs: that.imgList.join(","),
			};
			if (!that.submitInfo.desp) {
				uni.showToast({
					title: "请输入需要反馈的内容",
					icon: "none",
				});
				return;
			}
			that.G.Post(that.api.person_feedback, info, (res) => {
				console.log(res);
				uni.showToast({
					title: "提交成功",
					icon: "none",
					success: function () {
						setTimeout(() => {
							uni.navigateBack({
								delta: 1,
							});
						}, 2000);
					},
				});
			});
		},
		// 删除图片
		delImg(ind) {
			this.imgList.splice(
				this.imgList.findIndex((item, index) => index == ind),
				1
			);
		},
		// 跳转记录列表
		goList() {
			uni.navigateTo({
				url: "/root/person/feedbackList",
			});
		},
	},
};
</script>

<style scoped>
.p-person-feedback {
	min-height: 100%;
}
.close {
	position: absolute;
	width: 18px;
	height: 18px;
	right: -6px;
	top: -6px;
	z-index: 99;
	background-color: #666;
	color: #fff;
	font-size: 8px;
	text-align: center;
	line-height: 18px;
	border-radius: 50%;
}
</style>