yd_qycpfb/jp-mobile/pages/product/productAdd.vue

<template>
	<view>
		<cu-custom bgColor="bg-blue" :isBack="true" v-if="title == '发布产品供需'">
			<block slot="backText">返回</block>
			<block slot="content">发布产品供需</block>
		</cu-custom>
		<cu-custom bgColor="bg-blue" :isBack="true" v-if="title == '修改产品供需'">
			<block slot="backText">返回</block>
			<block slot="content">修改产品供需</block>
		</cu-custom>
		<cu-custom bgColor="bg-blue" :isBack="true" v-if="title == '查看产品供需'">
			<block slot="backText">返回</block>
			<block slot="content">查看产品供需</block>
		</cu-custom>
		
		<form @submit="formSubmit" class="cu-list menu">
			<view class="input1">
				<view class="title">
					供需类别
				</view>
						

				<picker class="title2" @change="bindPickerChange" :value="index" :range="parkList">
					<view class="input2">{{parkList[index]}}</view>
				</picker>

				
			</view>
										
			
			<view class="cu-form-group margin-top">
				<view class="title">
					{{t1}}
				</view>
				<input v-model="inputForm.des2" :placeholder="t1s" :disabled="ischeck"></input>
			</view>

			<view class="cu-form-group margin-top">
				<view class="title">
					{{t2}}
				</view>
				<input v-model="inputForm.des3" :placeholder="t2s" :disabled="ischeck"></input>
			</view>
			
					
			<view class="cu-form-group margin-top">
				<view class="title">
					{{t3}}
				</view>
				<textarea v-model="inputForm.des4" :placeholder="t3s" :disabled="ischeck"></textarea>
			</view>

			

			<view class="cu-form-group margin-top">
				<uni-file-picker style="margin-bottom: 10px;" limit="3" ref="picFile" v-model="picLists"
					fileMediatype="image" mode="grid" title="图片上传" :auto-upload="autoUpload" @select="select"
					@progress="progress" @success="success" @fail="fail" @delete="deleteFile"
					:imageStyles="imageStyles" :disabled="ischeck">
				</uni-file-picker>
			</view>

			
			<view style="height: 40rpx;"></view>
			<view class="padding-xl" v-if="!ischeck">
				<button form-type="submit" class="cu-btn block bg-blue margin-tb-sm lg">提交</button>
			</view>
		</form>
	</view>
</template>

<script>
	var graceChecker = require("@/common/graceChecker.js");
	import revenueListService from '@/api/revenue/revenueListService'
	import loginService from '@/api/auth/loginService.js'
	export default {
		onShow() {
			this.$auth.checkLogin()
		},
		data() {
			return {
				title: '发布产品供需',
				inputForm: {
					qyId:'0',
					id: '',
					des1: '1',
					des2: '',
					des3: '',
					des4: '',
					des6: '',			
				},
				t1: '产品名称',
				t1s: '请填写产品名称',
				t2: '产品产能',
				t2s: '请填写产品产能',
				t3: '详细描述',
				t3s: '请填写详细描述',
				
				autoUpload: false,
				picLists: [],
				picUrl: [],
				imageStyles: {
					width: 90,
					height: 90
				},
				parkList: [ "供", "需"],
				index:0,
				ischeck: false,
			}
		},
		created() {
			//this.getParkList()
		},
		mounted() {
			
		},
		async onLoad(query) {
			
			if (query && query.ischeck) {
				this.ischeck = true
				this.title = "查看楼宇信息";
			}
			if (query && query.id && !query.ischeck) {
				this.title = "修改楼宇信息";
			}
			if (query && query.id) {
				let {
					data
				} = await loginService.queryByIdBuild(query.id)
				console.log(data)
				if (data.pic != null) {
					data.pic = data.pic.split(",")
					var list = data.pic
					list.forEach(item => {
						this.picUrl.push({
							'url': item,
							'uuid': item
						})
						this.picLists.push({
							'url': item,
							'uuid': item
						})
					})
				} else {
					data.pic = []
				}
				this.inputForm = this.recover(this.inputForm, data)
			}
		},
		methods: {
			getParkList() {
				loginService.parkList({
					current: 1,
					size: 1000000,
				}).then(({
					data
				}) => {
					this.parkList = data.records.map((item) => {
						return {
							label: item.parkName,
							value: item.id
						}
					})
					console.log(this.parkList, '=============>')
				}).catch(e => {
					console.log(e)
				})
			},
			
			bindPickerChange: function(e) {
				if(e.detail.value==0){
					this.t1='产品名称';
					this.t1s= '请填写产品名称';
					this.t2= '产品产能';
					this.t2s= '请填写产品产能';
				}else{
					this.t1='需求名称';
					this.t1s= '请填写需求名称';
					this.t2= '需求数量';
					this.t2s= '请填写需求数量';
				}
								
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value;
				this.inputForm.des1=e.detail.value+1;
			},
			
			// 获取上传进度
			progress(e) {
				console.log('上传进度：', e)
			},
			// 上传成功
			success(e) {
				console.log('上传成功')
			},
			// 上传失败
			fail(e) {
				console.log('上传失败：', e)
			},
			deleteFile(e) {
				this.picUrl.splice(e.index, 1)
			},
			// 获取上传状态
			select(e) {
				console.log('选择文件：', e)
				var _this = this
				var i = 0
				upload()

				function upload() {
					if (i >= e.tempFiles.length) {
						return;
					}
					var item = e.tempFiles[i]
					uni.showLoading({
						title: "上传中",
						mask: true
					});
					uni.uploadFile({
						url: '/yd_qycpfb/file/upload?uploadPath=userdir', // 仅为示例，非真实的接口地址
						filePath: item.url,
						name: 'file',
						formData: {
							'fileName': item.name
						},
						header: {
							'token': _this.$auth.getUserToken()
						},
						success: (res) => {
							var data = res.data
							if (typeof data['error'] != "undefined") {
								uni.showToast({
									icon: 'none',
									title: '上传失败，请联系开发！'
								});
								_this.$refs.picFile.clearFiles(_this.picLists.length)
							} else {
								_this.picUrl.push({
									url: data,
									uuid: item.uuid
								})
								i++;
								upload()
							}
						},
						fail: () => {
							uni.hideLoading();
							uni.showToast({
								icon: 'none',
								title: '上传失败，请联系开发！'
							});
							_this.$refs.picFile.clearFiles(_this.picLists.length)
						},
						complete: function() {
							uni.hideLoading();
						}
					});
				}
			},
			formSubmit: function(e) {
				//定义表单规则
				var rule = [{
						name: "des2",
						checkType: "notnull",
						checkRule: "",
						errorMsg: "名称不能为空"
					},
				];
				//进行表单检查
				var formData = this.inputForm;
				var checkRes = graceChecker.check(formData, rule);
				console.log(checkRes, '===================>checkRes')
				if (checkRes) {
					uni.showLoading()
					this.inputForm.des6 = [];
					this.picUrl.forEach(item => {
						this.inputForm.des6.push(item.url)
					})
					this.inputForm.des6 = this.inputForm.des6.toString();
					
					loginService.productSave(this.inputForm).then(({
						data
					}) => {
						uni.showToast({
							title: "产品供需发布成功！",
							icon: "success"
						});
						uni.navigateTo({
							url: '/pages/product/productList?w=1'
						})
					}).catch((e) => {

					})

				} else {
					uni.showToast({
						title: graceChecker.error,
						icon: "none"
					});
				}
			}
		}
	}
</script>
<style>
	/* .file-title) {
	    font-size: 17px !important;
	} */
	input,textarea{
		color: #8799a3;
	}
	.input1{
		background-color: #ffffff;
		padding: 1upx 40upx;
		display: flex;
		align-items: center;
		padding-top: 20upx;
		border-bottom: 1px solid #eee;
	}
	.input1 .title {
		text-align: justify;
		padding-right: 30upx;
		font-size: 30upx;
		position: relative;
		height: 60upx;
		line-height: 60upx;
		border: ;
	}
	.title2{
		width: 75%;
		text-align: left;
	}
	.input2 {
		flex: 1;
		font-size: 30upx;
		color: #555;
		padding-right: 20upx;
	}
	.uni-input{
		
	}
</style>