fude/pages/my/feedback.vue

<template>
	<view class="my">
		<navbar title="意见反馈" :isCenter="true" :back="true"></navbar>
		<view class="feedback">
			<u--textarea v-model="feedbackText" placeholder="客官~您对我们的服务还满意吗，请给予我们你的意见我们将会做的更好~" :autoHeight="true" border="none"></u--textarea>
		
			<u-upload
				:fileList="finishImageList"
				:previewFullImage="true" 
				@afterRead="afterRead"
				:maxCount="6" width="80" height="80"
				@delete="deletePic"
				name="1"
				multiple
			></u-upload>
		</view>
		<view class="contact">
			<view class="title">
				联系方式
			</view>
			<view class="phone">
				<u--input
				    placeholder="请输入您的联系电话"
				    border="surround"
				    v-model="phone"
				></u--input>
			</view>
		</view>
		<view class="submit" @click="setFeedBack">
			提交
		</view>
	</view>
</template>
<script>
import navbar from '@/components/navbar.vue'
import {getToken} from '@/common/auth.js'
import {setFeedBack} from '@/common/api.js'
export default{
	components:{navbar},
	data(){
		return{
		  fileList1: [],
		  phone:'',
		  feedbackText:'',
		  finishImageList:[]
		}
    },
    methods: {
		// 新增图片
		async afterRead(event) {
			// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file)
			let fileListLen = this[`fileList${event.name}`].length
			lists.map((item) => {
				this[`fileList${event.name}`].push({
					...item,
					status: 'uploading',
					message: '上传中'
				})
			})
			for (let i = 0; i < lists.length; i++) {
				const result = await this.uploadFilePromise(lists[i].url)
				
				if(JSON.parse(result).code==1){
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}else{
					this[`fileList${event.name}`].splice(fileListLen, 1)
				}
				
			}
			
		},
		//上传照片
		uploadFilePromise(url) {
			return new Promise((resolve, reject) => {
				let a = uni.uploadFile({
					url: this.baseUrl+'/api/common/upload', // 仅为示例，非真实的接口地址
					filePath: url,
					name: 'file',
					formData: {
						user: 'test',
						token:getToken()
					},
					success: (res) => {
						if(JSON.parse(res.data).code==1){
							setTimeout(() => {
								this.finishImageList.push({url:JSON.parse(res.data).data.fullurl,path:JSON.parse(res.data).data.url})
								resolve(res.data)
							}, 1000)
						}else{
							uni.$u.toast(JSON.parse(res.data).msg)
							
							resolve(res.data)
						}
					},
					fail: (res) => {
						console.log(res,"rrr")
					}
				});
			})
		},
	    //删除图片
		deletePic(event) {
			console.log(event)
			// this[`fileList${event.name}`].splice(event.index, 1)
			this.finishImageList.splice(event.index, 1)
		},
		setFeedBack(){
			let image;
			if(this.finishImageList.length>0){
				let arr = this.finishImageList.map(item=>{
					return item.path
				})
				image=arr.join(',')
			}else{
				image=''
			}
			
			
			if(!this.feedbackText){
				uni.$u.toast('请输入反馈内容')
				
				return;
			}
			let reg = /^1[3456789]\d{9}$/
			let result = reg.test(this.phone); 
			if(!result) {
				uni.$u.toast('请输入正确的手机号码')
				
				return false;
			}
			
			let params={
				content:this.feedbackText,
				mobile:this.phone,
				image:image
			}
			setFeedBack(params).then(res=>{
				
				if(res.code==1){
					uni.$u.toast('提交成功')
					setTimeout(()=>{
						uni.switchTab({
							url:'/pages/my/my'
						})
					},1500)
				}
			})
		}
		
    },
}
</script>
<style lang="scss" scoped>
.my{
	min-height: calc(100vh);
	background: #FFFFFF;
	position: relative;
}
.feedback{

	background: #F5F6F8;
	border-radius: 10rpx;
	margin:24rpx;
	padding:30rpx;
	/deep/.u-textarea{
		background: #F5F6F8;
		padding:0;
	}
	/deep/.u-textarea__field{
		height:300rpx !important;
	}
	/deep/.u-upload__button{
		border:1px solid #E5E7EA;
	}
}
.contact{
	margin:40rpx 24rpx;
	.title{
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #222222;
	}
	.phone{
		margin-top:23rpx;
		/deep/.u-input{
			padding:32rpx !important;
			background-color: #F5F6F8;
		}
	}
}
.submit{
	position: absolute;
	// width:100%;
	bottom:43rpx;
	left:24rpx;
	right:24rpx;
	height: 98rpx;
	background: #8EC31F;
	line-height: 98rpx;
	border-radius: 10rpx;
	font-size: 30rpx;
	font-family: Alibaba PuHuiTi;
	font-weight: 400;
	color: #FFFFFF;
	text-align: center;
}
/deep/.u-upload__deletable{
	height: 50rpx  !important;
	width: 50rpx  !important;
	z-index:999 !important;
	.u-icon__icon{
		font-size: 40rpx !important;
		line-height: 40rpx !important;
		
	}
}
</style>