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.problemDescribe" placeholder-class="app-placeholder" class="textarea"></textarea>
				</view>
				<view class="footer"><text>可输入字数</text><text>{{saveObj.problemDescribe.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:3},{name:'其他',value:9}]
				},
				upFileUrls : [],//上传的图片地址
				saveObj:{
					problemType : 9,//问题类型（1投诉吐槽，2功能异常，3体验问题，4功能建议，9其他 ）
					problemDescribe : "",//问题描述
					filesUrl : "",//相关图片地址
					contactWay : "",//联系方式(手机号或者邮箱)
				}
			}
		},
		methods: {
			onTag(item,index){
				this.types.index = this.types.index==index ? -1 : index;
				this.saveObj.problemType = 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(res)
						console.log(JSON.stringify(res.tempFilePaths));
						uni.uploadFile({
									url: _this.$config.url.request+"userApi/upFile", //仅为示例，非真实的接口地址
									filePath: res.tempFilePaths[0],
									name: 'file',
									formData: {
										'user': 'test',//额外参数
									},
									success: (uploadFileRes) => {
										var upObj = JSON.parse(uploadFileRes.data);
										var tem = {
											temUrl : res.tempFilePaths[0],
											url : upObj.fileUrl
										}
										_this.upFileUrls.push(tem);
										console.log(upObj);
									}
								});
					}
				});
				
			},
			//保存意见反馈
			saveFeeback(){
				if(this.types.index == -1){
					this.$app.popup.alert("请选择一个问题。","温馨提示");
					return;
				}
				if(!this.saveObj.problemDescribe){
					this.$app.popup.alert("请填写您意见或建议。","温馨提示");
					return;
				}
				if(this.saveObj.problemDescribe.length > 500){
					this.$app.popup.alert("问题描述只能填写500字以内。","温馨提示");
					return;
				}
				this.saveObj.filesUrl = this.upFileUrls.map(obj=>obj.url).join(",");
				var obj = this.saveObj;
				this.$api.base("post","/userApi/addUserFeedback",obj,{}).then(res=>{
					console.log("设备信息：",res)
					this.$app.popup.confirm("感谢您的反馈。","温馨提示",{showCancel:false}).then(cRes=>{
						this.$app.url.back()
					})
				})
			}
		
		}
	}
</script>

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