recycapp/pages/feedback/index.vue

<template>
	<view class="content"> 
		<view class="question">
			<view class="questionLabel">问题描述</view>
			<u--textarea v-model="notesText" placeholder="请输入您要反馈的问题（10~500字以内）" style="background: #FFF;border: none"></u--textarea>
		</view>
		<view class="question">
			<view class="questionLabel" style="margin-bottom: 20rpx;">请提供问题的截图或照片（选填）</view>
			<u-upload
			    :fileList="fileList1"
			    @afterRead="afterRead"
			    @delete="deletePic"
			    name="1"
			    multiple
			    :maxCount="10"
			  ></u-upload>
		</view>
		<view class="contact flex-between">
			<view>联系方式</view>
			<input v-model="phoneNum" type="text" style="font-size: 28rpx;flex:1;text-align: right;" placeholder="请输入手机号" />
		</view>
		<view class="commitBtn flex-center" @click="feedback">提交</view>
		<view class="tip">您的反馈我们会尽快解决，但无法保证每一条都能及时反馈，如果有紧急咨询，请直接拨打客服电话:{{servicePhone}}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return { 
				info:'',
				fileList1: [],
				notesText: '',
				imgList: [],
				phoneNum: '',
				servicePhone: ''
			}
		}, 
		onLoad() {  
			this.servicePhone = uni.getStorageSync('servicePhone')
			
		}, 
		onReachBottom (){
			 
		},
		methods: {  
			feedback() {
				this.$api.feedback({
					content: this.notesText,
					contact: this.phoneNum,
					images: this.imgList
				},res=>{
					if(res.code == '1'){
						uni.showToast({ title: res.msg , icon: 'success' })
						setTimeout(()=>{
							uni.navigateBack({
							  delta: 1
							})
						}, 2000)
					}else{
						uni.showToast({ title: res.msg , icon: 'none' })
					}
				}) 
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1);
			},
			// 新增图片
			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);
				  let item = this[`fileList${event.name}`][fileListLen];
				  this[`fileList${event.name}`].splice(
					fileListLen,
					1,
					Object.assign(item, {
					  status: "success",
					  message: "",
					  url: result,
					})
				  );
				  fileListLen++;
				}
			},
			uploadFilePromise(url) {
				console.log(url, 'dfff')
				return new Promise((resolve, reject) => {
					this.$api.uploadImg(url,res=>{
						console.log(res,'=====')
						if(res.code == '1'){
							setTimeout(() => {
								resolve(res.data.data);
							}, 1000);
							// resolve(res.data);
							this.imgList= this.imgList.concat([res.data.full_url])
							console.log(res.data, this.imgList, '-----------')
						}else{ 
							uni.showToast({ title: res.msg , icon: 'fail' })
						}
					}) 
					console.log(this.imgList)
				 //  let a = uni.uploadFile({
					// url: "https://admin.dbcdq.cn/api/feedback/upload", // 仅为示例，非真实的接口地址
					// filePath: url,
					// name: "file",
					// formData: {
					//   user: "test",
					// },
					// success: (res) => {
					//   setTimeout(() => {
					// 	resolve(res.data.data);
					//   }, 1000);
					// },
				 //  });
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
	    // background: #fff;
		background: rgba(243,243,249,1);
	} 
	.content{
		padding:20px 35rpx;
		padding-bottom: 208rpx;
	}
	.aimg{
		width: 100%;
		height: 1040upx;
		margin-top: 10upx;
	} 
	.aimg image{height:100%;width:100%}
	.question{
		background: #fff;
		padding: 37rpx 35rpx;
		border-radius: 30rpx;
		margin-bottom: 20rpx;
		.questionLabel{
			border-bottom: 1rpx solid #DEDEDE;
			padding-bottom: 20rpx;
			margin-bottom: 10rpx;
		}
	}
	.contact{
		padding: 41rpx 34rpx;
		border-radius: 30rpx;
		background: #fff;
	}
	.commitBtn{
		width: 680rpx;
		height: 90rpx;
		background: linear-gradient(90deg, #FFAD38 0%, #FF884E 100%);
		border-radius: 10rpx;
		ont-weight: 500;
		font-size: 30rpx;
		color: #FFFFFF;
		margin-top: 214rpx;
	}
	.tip{
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
		line-height: 36rpx;
		margin-top: 42rpx;
	}
</style>