fb/fb-app/pages/complain/add/add.vue

<template>
	<view class="wrap">
		<view>
			<u-navbar title="云食堂" :border-bottom="false">
			</u-navbar>
		</view>
		<u-form :model="model" ref="uForm" :errorType="errorType">
			<view class="weui-cells weui-cells_after-title">
					<view class="canteen-select">
						<u-input :border="border" type="select" :select-open="selectShow" v-model="model.canteen" placeholder="请选择食堂" @click="selectShow = true"></u-input>
						<u-select mode="single-column" :list="selectList" v-model="selectShow" @confirm="selectConfirm"></u-select>
					</view>
					<view class="weui-cells__title">问题和意见</view>
					<view class="weui-cells weui-cells_after-title">
						<view class="weui-cell">
							<view class="weui-cell__bd">
								<u-input type="textarea" height="368" @input="inputArea()" border="true" placeholder="请填写10个字以上的问题描述以便我们提供更好的帮助"  :maxlength="maxinput" v-model="model.remark" />
								<view class="weui-textarea-counter">{{inputlength}}/{{maxinput}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="page__bd">
					<view class="weui-cells">
						<view class="weui-cell">
							<view class="weui-cell__bd">
								<view class="weui-uploader">
									<view class="weui-uploader__hd">
										<view class="weui-uploader__title">图片（选填，提供问题截图）</view>
										<view class="weui-uploader__info">{{files.length}}/{{maxfileCount}}</view>
									</view>
									<view class="weui-uploader__bd">
										<view class="weui-uploader__files" id="uploaderFiles">
											<u-upload ref="uUpload" @on-remove="removeFile" :header='header' :action="action" :max-count="maxfileCount" @on-list-change="changeFile"></u-upload>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="button-wrapper">
					<u-button type="primary" @click="submit" shape="square" :disabled="disabled" >提交</u-button>
				</button>
				</view>
		</u-form>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import _config from 'config.js';
	export default {
		data() {
			return {
				selectShow: false,
				//食堂对象
				canteenObj: {},
				selectList: [],
				model: {
					canteen: '',
					canteenId: '',
					remark: '',
					img: ''
				},
				imgArr: [],
				files: [],
				maxfileCount: 4,
				maxinput: 100,
				inputlength: 0,
				disabled: true,
				action: _config.serverUpload,
				header: {
					authorization: '',
				}
			}
		},
		methods: {
			selectConfirm(e) {
				this.model.canteen = '';
				e.map((val, index) => {
					this.model.canteenId= val.value;
					this.model.canteen += this.model.canteen == '' ? val.label : '-' + val.label;
				})
			},
			inputArea() {
				this.inputlength = this.model.remark.length;
				if(this.model.remark.length>0){
					this.disabled= false;
				}else{
					this.disabled= true;
				}
			},
			changeFile(lists, name) {
				this.files= lists;
			},
			submit() {
				this.imgArr=[];
				//有文件执行上传
				if(this.files.length >0){
					// 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
					this.$refs.uUpload.lists.filter(val => {
						if(val.progress == 100){
							this.imgArr.push(val.response.url);
						}
					})
					// 如果您不需要进行太多的处理，直接如下即可
					// files = this.$refs.uUpload.lists;
					console.log(this.imgArr);
				}
				//提交
				this.model.img = this.imgArr.join(",");
				this.$u.api.addComplain(this.model).then((res) => {
					if(res.code == 200){
						this.$refs.uToast.show({
							title: '反馈成功',
							type: 'success'
						})
						setTimeout(()=>{
							this.$u.route({
								type:'navigateBack',
								delta: 1
							});
						},1000)
					}
				})	
				
			},
			//删除文件，如果有成功的，调用服务器删除
			removeFile(index, lists, name) {
				/* if(lists[index].progress== 100){
					console.log(lists[index].response.data);
					this.$u.api.delFile(lists[index].response.data).then((res) => {
						if(res.code == 200){
							
						}
					})	
				} */
			},
		},
		onReady() {
			this.canteenObj=  uni.getStorageSync('canteenObj');
			this.header.authorization= this.vuex_token;
			for(var key in this.canteenObj){
				this.selectList.push({"value":key,"label":this.canteenObj[key]});
			}
			console.log("数据：",this.selectList[0]);
			//默认选中第一个食堂
			this.selectConfirm([this.selectList[0]]);
		}
	}
</script>

<style lang="scss" scoped>
.canteen-select u-input {
    width: 206rpx;
}

</style>