个人中心-意见反馈

一、页面结构搭建

1. 结构创建

2. 样式处理

   .feedback-title {
       margin: 30rpx;
       margin-bottom: 0;
       font-size: 28rpx;
       color: #666;
   }
   
   .feedback-content {
       margin: 30rpx;
       padding: 20rpx;
       box-sizing: border-box;
       border: 1px solid #eee;
       .feedback-textarea {
           font-size: 24rpx;
           width: 100%;
           height: 200rpx;
       }
   }
   
   .feedback-image-box {
       display: flex;
       flex-wrap: wrap;
       padding: 20rpx;
       .feedback-image-item {
           position: relative;
           width: 33.33%;
           height: 0;
           padding-top: 33.33%;
           box-sizing: border-box;
           .close-icon {
               @include flex(center);
               right: 0;
               top: 0;
               width: 44rpx;
               height: 44rpx;
               position: absolute;
               border-radius: 50%;
               z-index: 2;
               background-color: $base-color;
           }
           .image-box {
               @include flex(center);
               top: 10rpx;
               right: 10rpx;
               bottom: 10rpx;
               left: 10rpx;
               border: 1px solid #eee;
               border-radius: 10rpx;
               overflow: hidden;
               position: absolute;
               image {
                   width: 100%;
                   height: 100%;
               }
           }
       }
   }
   
   .feedback-button {
       margin: 0 30rpx;
       background-color: $base-color;
   }
   

二、新增图片操作

1. chooseImage参考地址：https://uniapp.dcloud.io/api/media/image?id=chooseimage (opens new window)

2. 为前端UI进行图片定义

     const count = 5 - this.imageList.length;
         uni.chooseImage({
           count,
           success: res => {
             const tempFilePaths = res.tempFilePaths;
             tempFilePaths.forEach((url, index) => {
               if (index < count) {
                 this.imageList.push({
                   url,
                   name: res.tempFiles[index].name
                 })
               }
             })
           }
         })
   

三、发送数据到云函数

1. 图片直传参考地址：https://uniapp.dcloud.io/uniCloud/storage?id=clouduploadfile (opens new window)

2. 收集图片上传成功之后的访问地址

    return this.imageList.map(item => {
           return new Promise(async resolve => {
             const result = await uniCloud.uploadFile({
               filePath: item.url,
               cloudPath: item.name
             })
             resolve(result.fileID)
           })
         })
   

3. 定义云函数

'use strict';
const db = uniCloud.database();
exports.main = async (event, context) => {
	const {
		userId,
		feedbackImageList,
		content
	} = event
	
	await db.collection('feedback').add({
		user_id:userId,
		feedbackImageList,
		content
	})
	return {
		code:0,
		data:{
			msg:"提交反馈成功"
		}
	}
};

四、用户头像修改

​ 获取修改头像内容，上传云函数 ，进行图片的修改，及原图片的删除操作

'use strict';
const db = uniCloud.database();
exports.main = async (event, context) => {
	const {
		userId,
		filePath
	} = event;
	
	const user = await db.collection('user').doc(userId).get()
	const oldImgList = user.data[0].avatar
	try {
		await uniCloud.deleteFile({
			fileList: [oldImgList],
		});
	}catch(e) {
		console.log(e)
	}
	 
	 await db.collection('user').doc(userId).update({
		avatar:filePath
	})

	//返回数据给客户端
	return {
		code: 0,
		data: {
			msg:"修改头像成功",
		}
	}
};

​