Yizhan-app/pages/my/offerView.vue

<template>
	<view id="myapp" class="bodyA">
		<!-- 滚动区域 -->
		<view class="content">
			<view class="modeBox">
				<view class="modeTitle">填写人信息</view>
				<van-field v-model="form.dept" label="所属部门" placeholder="---" readonly></van-field>
				<van-field v-model="form.name" label="姓名" placeholder="---" readonly></van-field>
			</view>

			<view class="modeBox">
				<view class="modeTitle">请输入您的意见</view>
				<view class="tips" v-if="opinionFlag">请输入您的意见</view>
				<van-field class="fieldCol" v-model="form.opinion" rows="4" autosize type="textarea" maxlength="200"
					placeholder="请输入您的意见" show-word-limit @input="aaa"></van-field>
			</view>

			<view class="modeBox">
				<view class="modeTitle">请上传图片<span>(选填)</span></view>
				<view class="uploadImgMode">
					<!-- <van-uploader v-model="form.imgList" :after-read="afterRead" :max-count="1"
						accept="image/png, image/jpeg"></van-uploader> -->
					<upLoadImg :maxLength="1" @imgParams="imgParams"></upLoadImg>
				</view>
			</view>
		</view>
		<!-- 底部 -->
		<view class="footer">
			<van-button class="footerBtn" @click="submit">提交</van-button>
		</view>
	</view>
</template>

<script>
	import {
		feedback
	} from '@/common/api.js'
	import {
		callbackRequest
	} from '@/common/util.js'
	export default {
		data() {
			return {
				// code
				loadingFlag: '',
				loadingFlag_Tm: 'x',
				opinionFlag: false,
				form: {
					dept: '',
					name: '',
					opinion: '',
					imgList: [],
					uploadIcon: '../../static/common/cut.png'
				},
			};
		},
		mounted() {
			this.getUserInfo();
		},
		methods: {
			imgParams(v) {
				console.log(v);
				this.form.imgList = v
			},
			getUserInfo() {
				const that = this;
				let resData = uni.getStorageSync('userInfos')
				that.form.name = resData.realName
				that.form.dept = resData.departmentName
				// request.qryPersonalInfo({}, res => {
				// 	console.log(res);
				// 	if (res.returnCode == 1) {
				// 		let resData = res.returnData;
				// 		console.log(resData);
				// 		that.form.dept = resData.departmentName
				// 		that.form.name = resData.realName
				// 	}
				// })
			},
			// code
			aaa(e) {
				console.log('a1', e);
				let flag = true;
				flag = e ? true : false
				console.log(flag);
				this.opinionFlag = !flag;
			},
			submit() {
				console.log('a2', this.opinionFlag);
				console.log(this.form);
				this.loadingFlag_Tm = '';
				let form = this.form;
				// 意见校验
				if (form.opinion == '') {
					this.opinionFlag = true;
					return
				}
				// // 图片校验
				// if (form.imgList.length < 1) {
				//     this.uploadFlag = true
				//     return
				// }
				const that = this;
				let params = {
					method: feedback,
					imgBase: that.form.imgList != undefined && that.form.imgList.length > 0 ? that.form.imgList[0] :
						'',
					suggestionContent: that.form.opinion,
				}
				callbackRequest(params).then(res => {
					console.log(res);
					let msg;
					if (res.returnCode == 1) {
						setTimeout(() => {
							window.history.go(-1)
						}, 1999);
						msg = '提交成功'
					} else {
						msg = res.returnMsg
					}
					uni.showToast({
						title: msg,
						icon: 'none',
						duration: 2000
					})
					that.loadingFlag_Tm = 'x';
				})
				console.log('提交啦!!!');
			},
			afterRead(v) {
				console.log('x1');
				// this.uploadFlag = false
			},
			back() {
				// window.location.href = "index.html"
				window.history.go(-1)
			},
		},
	}
</script>

<style lang="less">
	.content {
		font-size: .38*74upx;
		color: #0e1a24;
	}

	.modeBox {
		background-color: #fff;
		padding: .4595*74upx .5405*74upx;
		margin-top: .3243*74upx;
	}

	.fieldCol {
		display: flex;
		flex-direction: column;
		background-color: #f2f6fa;

		padding: .3243*74upx !important;
		border-radius: .24*74upx;
	}

	.modeBox .modeTitle span {
		font-weight: normal;
		margin-left: .4054*74upx;
		color: #97a5b1;
	}

	.uploadImgMode {
		/* padding: 0 .3*74upx; */
		font-size: .36*74upx;
	}

	.modeBox .tips {
		color: red;
		padding-bottom: .2*74upx;
	}

	/* 重置vanField 样式 */
	/* input默认边框& textarea布局及样式 */
	.modeBox input {
		border: none;
	}

	.modeBox .van-cell {
		padding-left: .1081*74upx;
		padding-right: .1081*74upx;
	}

	.modeBox .van-cell:nth-child(2) {
		padding-top: 0;
	}

	.modeBox .van-cell:last-child {
		padding-bottom: 0;
	}

	.van-uploader__upload {
		width: 2.83*74upx;
		height: 2.83*74upx;
	}
</style>