deming/pageE/more/WriteComments.vue

<template>
	<view class="write-complaints">
		<view class="main-container">
			<textarea auto-height placeholder="发表您的意见吧，我们会做得更好" maxlength="200" v-model="text" />
			<u-upload 
				ref="uUpload"
				:custom-btn="true" 
				:max-count="count"
				:action="action"
				:auto-upload="false"
				:header="header"
				:form-data="formData"
				:name="name"
				@on-uploaded="setImageList"
				@on-error="uploadError"
			>
				<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
					<image src="../static/mine/27.png"></image>
				</view>
			</u-upload>
		</view>
		<view class="write-btn" @click="submit">发表意见</view>
		<u-toast ref="uToast" />
	</view>
</template>
<script>
export default {
	data() {
		return {
			action: this.$u.http.config.baseUrl + '/Upload/uploadfile',
			count: 4, // 最大图片数量
			text: '',
			header: {
				"authorization": 'Bearer' + " " + uni.getStorageSync('token')
			},
			name: 'common',　// 与formData name 一样
			formData: {
				name: 'common', // 其他图片
			},
			imageList: [],
			debounce: true,
		}
	},
	onShow() {
		this.debounce = true;
	},
	methods: {
		submit() {
			if(!this.debounce) return;
			this.debounce = false;
			this.$refs.uUpload.upload();
		},
		uploadError() {
			this.debounce = true;
		},
		setImageList(lists) {
			// console.log(lists);
			let imageList = [];
			lists.forEach(res => {
				if(res.response.errCode == 0) imageList.push(res.response.data.file_name);
			})
			// console.log(imageList);
			this.imageList = imageList;
			this.writeFeedback();
		},
		verifyContent() {
			if(this.$u.test.isEmpty(this.text)) {
				this.$u.toast('内容不可为空');
				return false;
			}
			return true;
		},
		writeFeedback() {
			if(!this.verifyContent()) return false;
			this.$u.api.writeFeedback({ 
				fb_content: this.text,
				fb_images: this.imageList,
			}).then(res => {
				if(res.errCode == 0) {
					this.$refs.uToast.show({
						title: res.message,
						duration: 2000,
						callback:() => {
							this.$u.route({
								type: "navigateBack",
								url: '/pageE/more/Complaints',
							})
						}
					})
				} else {
					this.debounce = true;
					this.$u.toast(res.message);
				}
			})
		},
	},
}
</script>
<style lang="scss" scoped>
.write-complaints {
	min-height: calc(100vh - var(--window-top));
	background-color: #ECECEC;
	.main-container {
		background-color: #ffffff;
		padding: 30rpx;
		textarea {
			width: 100% !important;
			margin-bottom: 60rpx;
		}
		.slot-btn {
			width: 140rpx;
			height: 140rpx;
			background: rgba(236,236,236,1);
			border-radius: 10rpx;
			text-align: center;
			> image {
				margin-top: 48rpx;
				width: 54rpx;
				height: 49rpx;
			}
		}
	}
	.write-btn {
		margin: 120rpx auto 0;
		width: 690rpx;
		height: 98rpx;
		background: rgba(255,120,15,1);
		border-radius: 46rpx;
		font-size: 36rpx;
		color: rgba(255,255,255,1);
		text-align: center;
		line-height: 98rpx;
	}
}
</style>