hbj_app/pages/mine/advice/advice.vue

<template>
	<view>
		<!-- 自定义导航栏 -->
		<u-navbar bgColor="#ffffff" :placeholder="true" titleStyle="font-weight:600" title="提升建议" :autoBack="true">
			<!-- <view slot="right" @click="applyWork"><u-icon name="plus-circle" color="#2979ff" size="26"></u-icon></view> -->
			<view slot="right" style="display: flex;" @click="gotoHistory()">
				<svgImage name="history" width="50rpx" height="50rpx"></svgImage>
			</view>
		</u-navbar>
		<uni-forms :model="questionForm" ref="questionForm" :rules="rules">
			<uni-forms-item class="texteara" name="suggestionContent">
				<uni-easyinput type="textarea" :inputBorder="false" :border="true"
					v-model="questionForm.suggestionContent" placeholder="    请详细描述您的优化建议(140字以内)"
					style="height: 261.3rpx;" />
			</uni-forms-item>
			<view class="pic">
				<view class="title">请提供建议的截图或图片(选填)</view>
				<uni-forms-item><u-upload :fileList="fileList" auto-upload @delete="deletePic"
						@afterRead="getImage"></u-upload></uni-forms-item>
			</view>
			<!-- <view class="phone">
				<uni-forms-item label="手机号"><uni-easyinput v-model="questionForm.phone" :inputBorder="false" :border="true" placeholder="请输入手机号" /></uni-forms-item>
			</view> -->
		</uni-forms>
		<view class="contentinfo">
			<view>问题提交后，我们会尽快处理~</view>
			<view>工作人员会在工作日9:30~18:00集中进行处理</view>
			<view>最晚会在24小时内回复您，感谢您的理解</view>
		</view>
		<view class="submit" @click="addFrom()">提交</view>
	</view>
</template>

<script>
	import config from '@/config.js';
	import {
		getToken
	} from '@/utils/auth.js';
	import {
		addSuggestionReply
	} from '@/api/advice/tishengjianyi.js';
	export default {
		data() {
			return {
				questionForm: {
					suggestionContent: '',
					pic: ''
				},
				fileList: [],
				rules: {
					// 对name字段进行必填验证
					suggestionContent: {
						rules: [{
							required: true,
							errorMessage: '请输入优化建议'
						}]
					}
				}
			};
		},
		methods: {
			// 跳转历史
			gotoHistory() {
				this.$tab.navigateTo('/pages/mine/advice/advicedeailt/advicedeailt');
			},
			//确定提交
			addFrom() {
				this.$refs.questionForm
					.validate()
					.then(res => {
						//把图片数组对象中的id，转成逗号隔开的字符串,赋值给from表单
						this.questionForm.pic = this.fileList
							.map(item => {
								return item.id;
							})
							.join(',');
						addSuggestionReply(this.questionForm).then(res => {
							this.questionForm = {
								suggestionContent: '',
								pic: ''
							};
							this.fileList = [];
							this.$tab.navigateTo('/pages/mine/advice/advicedeailt/advicedeailt');
							this.$modal.msg('提交成功');
						});
					})
					.catch(err => {
						this.$modal.msg('请输入优化建议');
					});
			},

			// 删除图片
			deletePic(event) {
				//删除本地
				this[`fileList${event.name}`].splice(event.index, 1);
			},
			// 图片上传结果
			async getImage(event) {
				console.log('event', 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: '',
							id: result
						})
					);
					fileListLen++;
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: `${config.baseUrlImg}/filemanage/upload1`, // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						header: {
							Authorization: 'Bearer ' + getToken()
						},
						formData: {
							isFullDir: false,
							classify: '1',
							dir: '/inspectionPic'
						},
						success: res => {
							let result = JSON.parse(res.data);
							console.log('result', result);
							setTimeout(() => {
								resolve(result.data.id);
							}, 1000);
						}
					});
				});
			}
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #fff;
		padding: 0 30rpx;
		box-sizing: border-box;

		// 优化建议
		.texteara {
			/deep/.uni-forms-item__content {
				background: #f5f6fa;
				border-radius: 20rpx;
				overflow: hidden;
				height: 261rpx;
			}

			/deep/.uni-textarea-textarea {
				padding-left: 20rpx !important;
			}

			/deep/.uni-easyinput__content-textarea {
				position: relative;
				overflow: hidden;
				flex: 1;
				line-height: 1.5;
				font-size: 14px;
				padding-top: 6px;
				padding-bottom: 10px;
				height: 261rpx;
				min-height: 261rpx;
				width: auto;
			}

			/deep/.uni-easyinput__placeholder-class {
				font-family: Noto Sans S Chinese;
				font-weight: 400;
				font-size: 28rpx;
				color: #666666;
				line-height: 40rpx;
			}
		}

		// 图片
		.pic {
			background: #f5f6fa;
			border-radius: 20rpx;
			padding: 28rpx;

			.title {
				font-family: Noto Sans S Chinese;
				font-weight: 400;
				font-size: 28rpx;
				color: #666666;
				line-height: 40rpx;
				border-bottom: 2rpx solid #e6e6e6;
				padding-bottom: 28rpx;
				margin-bottom: 20rpx;
			}

			/deep/.u-upload__button {
				background: #dadde6;
				border-radius: 10rpx;
			}

			/deep/.u-icon__icon {
				color: #c2bdbd !important;
			}
		}

		.phone {
			margin-top: 40rpx;
			height: 90rpx;
			background: #f5f6fa;
			border-radius: 20rpx;
			padding: 19rpx 28rpx;
		}

		.contentinfo {
			// width: 503rpx;
			margin-top: 40rpx;
			height: 105rpx;
			font-family: Noto Sans S Chinese;
			font-weight: 400;
			font-size: 26rpx;
			color: #b3b3b3;
			line-height: 40rpx;
		}

		.submit {
			position: relative;
			height: 109rpx;
			background: linear-gradient(0deg, #2a86ff, #8fbcff);
			line-height: 109rpx;
			top: 200rpx;
			// bottom: 80rpx;
			width: 80%;
			text-align: center;
			margin: 0 auto;
			border-radius: 50rpx;
			color: #fff;
			font-size: 30rpx;
		}
	}
</style>