charge_miniapp/pages/feedback/feedback.vue

<template>
	<ax-body title="">
		<view class="page-background">
			<image src="@/static/img/my-bg.svg" mode="widthFix"></image>
		</view>
		<view class="body app-hide-scrollbar">
			<view class="top">
				<view class="app-flex-one">
					<view class="title">意见反馈</view>
					<view class="subtitle">感谢您的每一条建议或反馈~</view>
				</view>
				<view class="em" style="font-size: 14px;"
					@click="$app.url.goto('/pages/feedback-reply/feedback-reply')">查看反馈</view>
			</view>

			<view class="card form-type">
				<view class="lable required">请选择问题</view>
				<view class="content">
					<view v-for="(item, index) in types.data" :key="index" class="tag"
						:class="{ active: types.index == index }" @click="onTag(item, index)">{{ item.name }}</view>
				</view>
			</view>

			<view class="card form-describe">
				<view class="lable required">问题描述</view>
				<view class="content">
					<textarea placeholder="请输入描述内容" maxlength="500" v-model="saveObj.description"
						placeholder-class="app-placeholder" class="textarea"></textarea>
				</view>
				<view class="footer"><text>可输入字数</text><text>{{ saveObj.description.length }}/500</text></view>
			</view>

			<view class="card form-picture">
				<view class="lable">相关截图或图片</view>
				<view class="content">
					<view class="picture view" v-for="(item, index) in upFileUrls" :key="index">
						<view class="remove" @click="clearUpFile(item)"><text class="ax-iconblock i-cancel icon"></text>
						</view>
						<image :src="item.temUrl" class="image" mode="aspectFill"></image>
					</view>
					<view class="picture" v-if="upFileUrls.length < 4" @click="upFile()"><text
							class="ax-iconblock i-paizhao icon"></text><text class="name">点击上传</text></view>
				</view>
				<view class="footer"><text>上传问题截图可以让问题快速解决哦</text><text>{{ upFileUrls.length }}/4</text></view>
			</view>

			<view class="card form-contact">
				<view class="lable">联系方式</view>
				<view class="content">
					<input placeholder="手机号或邮箱以便我们回复您" v-model="saveObj.contactWay" placeholder-class="app-placeholder"
						class="input" />
				</view>
			</view>
			<view class="tips">咨询问题可以联系<text class="em">在线客服</text>哦</view>
			<button class="submit" @click="saveFeeback()">确认提交</button>
		</view>
	</ax-body>
</template>

<script>
export default {
	data() {
		return {
			types: {
				index: -1,
				data: [{ name: '投诉吐槽', value: 1 }, { name: '功能异常', value: 2 }, { name: '体验问题', value: 3 }, { name: '功能建议', value: 4 }, { name: '其他', value: 9 }]
			},
			upFileUrls: [],//上传的图片地址
			saveObj: {
				type: 9,//问题类型（1投诉吐槽，2功能异常，3体验问题，4功能建议，9其他 ）
				description: "",//问题描述
				images: "",//相关图片地址
				contactWay: "",//联系方式(手机号或者邮箱)
			}
		}
	},
	methods: {
		onTag(item, index) {
			this.types.index = this.types.index == index ? -1 : index;
			this.saveObj.type = this.types.data[this.types.index].value;
		},
		//删除上传的图片
		clearUpFile(item) {
			this.upFileUrls = this.upFileUrls.filter(obj => obj.temUrl != item.temUrl);
		},
		//上次图片
		upFile() {
			var _this = this;
			uni.chooseImage({
				count: 6, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album'], //从相册选择
				success: function (res) {
					console.log(JSON.stringify(res.tempFilePaths));
					uni.uploadFile({
						url: _this.$config.url.request + "api/v1/files",
						filePath: res.tempFilePaths[0],
						name: 'file',
						header: {
							'Authorization': "Bearer " + _this.$app.storage.get("ACCESS_TOKEN"),
							'Content-Type': 'multipart/form-data'
						},
						success: (uploadFileRes) => {
							var imgUrl = JSON.parse(uploadFileRes.data);
							var tem = {
								temUrl: res.tempFilePaths[0],
								url: imgUrl.data.url
							}
							_this.upFileUrls.push(tem);
							_this.saveObj.images = _this.upFileUrls.map(item => item.url).join(',');
						}
					});
				}
			});

		},
		//保存意见反馈
		saveFeeback() {
			if (this.types.index == -1) {
				this.$app.popup.alert("请选择一个问题。", "温馨提示");
				return;
			}
			if (!this.saveObj.description) {
				this.$app.popup.alert("请填写您意见或建议。", "温馨提示");
				return;
			}
			if (this.saveObj.description.length > 500) {
				this.$app.popup.alert("问题描述只能填写500字以内。", "温馨提示");
				return;
			}
			var obj = this.saveObj;
			this.$api.base("post", "/applet/v1/user/addUserFeedback", obj, {}).then(res => {
				this.$app.popup.confirm("感谢您的反馈。", "温馨提示", { showCancel: false }).then(cRes => {
					this.$app.url.back()
				})
			})
		}

	}
}
</script>

<style scoped>
@import url("feedback");
</style>