yiliangyiyun-app/pages/grain_pulse/enter.vue

<template>
	<view class="center">
		<image class='bg' src='../../static/img/liangmai/bg@3x.png'></image>
		<!-- 	<view class=""> -->
		<view class="back-btn cuIcon-back" @click="navBack"></view>
		<!-- <view class='title1'>入驻</view> -->
		<view class="titleUp">
			请完善入驻信息
		</view>
		<u-form class="forList">
			<view style='padding-bottom:20px;' class="modular">
				<u-form-item label="公司名称" label-width="30%" class="title Regular">
					<u-input maxlength='25' v-model="deptList.compName" input-align="right" class="write Medium"
						placeholder="请输入公司名称" />
				</u-form-item>
				<view>
					<view class="title Regular" style="margin-top: 15rpx;">主营类型（可多选，必须为真实经营类型）</view>
					<view v-for="(item,index) in management" class="choice">
						<!-- 	<u-tag :type="types[index] == null ? 'info' : types[index]" :text="item" show="show"
							@click="singleClick(index)"></u-tag> -->
						<view :class="!item.checked ? '' : 'types1'" class='types' @click="singleClick(item)">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>
			<view class="modular">
				<u-form-item label="标题" label-width="30%" prop="title" class="title Regular">
					<u-input maxlength="16" v-model="deptList.title" input-align="right" class="write Regular"
						placeholder="用于封面展示，2-16个字" />
				</u-form-item>
				<u-form-item label-position='top' label="公司简介" label-width="30%" class="title Regular">
					<!-- <u-input  input-align="right"  type="textarea"
						 /> -->
						 <view class='companyProfilewrap'>
							 <textarea class="write Regular companyProfile" 
							 maxlength="60" 
							 placeholder="请输入企业简介，如经营项目、产品类型、企业规模等，10-60个字"
							  v-model="deptList.companyProfile" name="" id="" cols="10" rows="3">
							  </textarea>
							  <view class='companyProfilecontent'>{{deptList.companyProfile.length}}/60个字</view>
						 </view>
						
				</u-form-item>
			</view>
			<view class="modular">
				<u-form-item label="上传坐标" label-width="30%" class="title Regular">
					<text @click='naviageToPage("/pages/grain_pulse/localtion/coordinate")'
						class="con-list Regular">{{position.longitude == undefined ? "未上传":'已上传'}}<text
							class='tip_text cuIcon-right'></text></text>
				</u-form-item>
				<u-form-item label="所在区域" label-width="30%" class="title Regular">
					<view style='text-align:right;width:100%;padding-right:10px;' v-if='position.province!=undefined'>
						{{position.province}}
					{{position.city}}
					{{position.district}}
					</view>
					<view style='text-align:right;width:100%;padding-right:10px;' v-if='position.pname!=undefined'>
						{{position.pname}}
					{{position.cityname}}
					{{position.adname}}
					</view>
					<view style='text-align:right;width:100%;padding-right:10px;' v-if='position.pname==undefined&&position.province==undefined'>
						未上传坐标
					</view>
				</u-form-item>
				<u-form-item label="详细地址" label-width="30%" class="title Regular">
					<u-input v-model="deptList.detailedAddress" input-align="right" class="write Regular"
						placeholder="如街道和门牌号，2-12个字" maxlength="12" />
				</u-form-item>
				<view>
					<view class="title Regular" style="margin-top: 15rpx;">上传图片</view>
					<view v-if="license1 != ''">
						<upload class="upload" ref="upload" :action="action" :max-size="maxSize" :max-count="1"
							:size-type="['compressed']" @on-success="getImgUrl" 
							 @on-uploaded="isAdd = true" :before-upload="filterFileType"
							:options="uploadOptions" customBorder='2px dashed #D8DEF7' customBtnFontSize="14" customBtnColor="#6A7282" :customBtnHeight='custombtnheight'
							 :customBtnWidth='custombtnwidth' customBack='#F9FAFE' :customBtnImage="custombtnimage" :customBtn='custombtn'
							  :custom="uploadCustom" ></upload>
					</view>
					<view v-if="license2 != ''">
						<upload class="upload" ref="upload" :action="action" :max-size="maxSize" :max-count="1"
							:size-type="['compressed']" @on-success="getImgUrl1"
							 @on-uploaded="isAdd = true" :before-upload="filterFileType"
							:options="uploadOptions1"  customBack='#FEF9FA' customBorder='2px dashed #F9D5DC' customBtnFontSize="14" customBtnColor="#6A7282" :customBtnHeight='custombtnheight'
							 :customBtnWidth='custombtnwidth' :customBtnImage="custombtnimage" :customBtn='custombtn'
							  :custom="uploadCustom" ></upload>
					</view>
				</view>
			</view>
			<!-- :disabled="true" -->
			<u-button @click="submit" class="commit" type="success">提交</u-button>
		</u-form>
		<view v-if="show == true">
			<u-popup v-model="show" mode="center" border-radius="20" width="560rpx" height="560rpx">
				<view class="successImg">
					<image src="../../static/img/liangmai/tijiaochenggong@3x.png" mode=""
						style="width: 180rpx;height: 180rpx;"></image>
				</view>
				<view class="successText">提交成功，等待平台审核。</view>
				<u-button type="success" style="width: 400rpx; margin: 20rpx auto; " shape="circle" @click="perfect">
					完善更多信息</u-button>
				<view style="color: #AFB3BF;text-align: center;" @click="navBack">返回</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import upload from '@/components/upload.vue';
	export default {
		components: {
			upload
		},
		name: "buy",
		data() {
			return {
				action: this.$uploadUrl,
				maxSize: 50 * 1024 * 1024, //限制文件大小 50M
				btnLoading: false,
				isAdd: true,
				uploadOptions: {
					"text": "上传封面图片",
					"bgc": ""
				},
				errorType: ['message'],
				uploadOptions1: {
					"text": "上传营业执照",
					"bgc": ""
				},
				mainBusinessType: [],
				uploadCustom: true,
				deptList: {
					compName:'',
					title:'',
					companyProfile:'',
					province:'',
					city:'',
					area:''
				},
				management: [{
						name: "粮库",
						checked: false
					},
					{
						name: "加工厂",
						checked: false
					},
					{
						name: "烘干塔",
						checked: false
					},
					{
						name: "饲料厂",
						checked: false
					},
					{
						name: "养殖场",
						checked: false
					},
					{
						name: "粮贸",
						checked: false
					},
					{
						name: "期货",
						checked: false
					},
				],
				types: [],
				show: false,
				// anNiuCss:"types",
				anNiuCss: [],
				position:{
					province:''
				},
				custombtn:true,
				custombtnimage:'../../static/img/liangmai/ic_shanchuan@3x.png',
				custombtnwidth:50,
				custombtnheight:50,
				license1: "../../static/img/authentication/business@3x.png",
				license2: "../../static/img/authentication/business@3x.png",

			}
		},
		onLoad(options) {
			
			if(options.position){
				this.position=JSON.parse(options.position)
				this.position.city=this.position.city.toString()
			}
		},
		onShow() {
			var that = this
			uni.getStorage({
				key: 'setPosition',
				success: (res) => {
					console.log(res.data)
					that.position = res.data
					that.position.longitude = res.data.location.split(',')[0];
					that.position.latitude = res.data.location.split(',')[1];
					
					console.log(that.position.longitude)
					console.log(that.position.latitude)
					// uni.removeStorage({
					// 	key: 'setLocaltion'
					// })
				},
			
			})
			if(this.$store.state.enter.companyProfile){
				this.deptList.companyProfile=this.$store.state.enter.companyProfile
			}
			if(this.$store.state.enter.compName){
				this.deptList.compName=this.$store.state.enter.compName
			}
			if(this.$store.state.enter.title){
				this.deptList.title=this.$store.state.enter.title
			}
			if(this.$store.state.enter.mainBusinessType){
				this.mainBusinessType=this.$store.state.enter.mainBusinessType.split(',')
				if(this.mainBusinessType.length>0){
					for(var i=0;i<this.management.length;i++){
						if(this.mainBusinessType.indexOf(this.management[i].name)!=-1){
							this.management[i].checked=true
						}
					}
				}
			}
			console.log(this.$store.state.enter)
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		methods: {
			getImgUrl(res) {
				console.log(res)
				this.deptList.attachmentAddress = res
			},
			naviageToPage(item) {
				// console.log(this.enter)
				var data={
					compName:this.deptList.compName,
					title:this.deptList.title,
					mainBusinessType:this.mainBusinessType.toString(),
					companyProfile:this.deptList.companyProfile,
				}
				console.log(this.$store)
				this.$store.commit('enterchange',data)
				// this.$store.dispatch('enterchange',data)
				// this.enterchange()
				var mainBusinessType=this.mainBusinessType.toString()
				uni.navigateTo({
					url: item
				})
				
			},
			getImgUrl1(res) {
				console.log(res)
				this.deptList.licenseAddress = res
			},
			singleClick(item) {
				if (this.mainBusinessType.indexOf(item) == -1) {
					this.mainBusinessType.push(item.name)
					item.checked = true
				}
			},
			filterFileType(index, lists) {
				if (lists[index].fileType != 'jpg' && lists[index].fileType != 'png' && lists[index].fileType != 'gif') {
					lists.splice(index, 1);
					// 当前文件不支持
					uni.showModal({
						title: '暂不支持当前图片类型',
						showCancel: false
					});
				} else {
					this.isAdd = false;
				}
			},
			navBack() {
				uni.navigateBack()
			},
			// navBack1() {
			// 	this.$api.doRequest('post', '/settledCompanyInfo/api/addSettledCompanyInfo', this.deptList).then(res => {
			// 		if (res.data.code == 200) {
			// 			var data={
			// 				compName:'',
			// 				title:'',
			// 				mainBusinessType:'',
			// 				companyProfile:'',
			// 			}
			// 			that.$store.commit('enterchange',data)
			// 			uni.switchTab({
			// 				url:'/pages/grain_pulse/home'
			// 			})
			// 		}
			// 	})
			// },
			upload() {
				uni.navigateTo({
					url: `/`
				})
			},
			perfect() {
				this.show=false
				uni.navigateTo({
					url: `/pages/grain_pulse/perfect?deptList=`+JSON.stringify(this.deptList)
				})
			},
			submit() {
				var that = this
				if (!this.deptList.compName) {
					this.$api.msg('公司名称不能为空')
					return
				}
				if (this.mainBusinessType.length==0) {
					this.$api.msg('至少选择一个主营类型')
					return
				}
				if (!this.deptList.title) {
					this.$api.msg('标题不能为空')
					return
				}
				if (!this.deptList.companyProfile) {
					this.$api.msg('企业简介不能为空')
					return
				}
				if (!this.position.longitude&&!this.position.latitude) {
					this.$api.msg('上传坐标不能为空')
					return
				}
				if (!this.deptList.detailedAddress) {
					this.$api.msg('详细地址不能为空')
					return
				}
				if (!this.deptList.attachmentAddress) {
					this.$api.msg('封面照片不能为空')
					return
				}
				if (!this.deptList.licenseAddress) {
					this.$api.msg('营业执照不能为空')
					return
				}
				if (this.deptList.compName.length<2||this.deptList.compName.length>25) {
					this.$api.msg('公司名称输入错误')
					return
				}
				if (this.deptList.title.length<2||this.deptList.title.length>16) {
					this.$api.msg('标题长度2-16个字')
					return
				}
				if (this.deptList.companyProfile.length<10||this.deptList.companyProfile.length>60) {
					this.$api.msg('简介长度10-60个字')
					return
				}
				if (this.deptList.detailedAddress.length<2||this.deptList.detailedAddress.length>12) {
					this.$api.msg('详细地址2-12个字')
					return
				}
				// this.show = true
				// return
				this.deptList.mainBusinessType=this.mainBusinessType.toString()
				this.deptList.longitude=this.position.longitude
				this.deptList.latitude=this.position.latitude
				if(this.position.province!=undefined){
					this.deptList.province=this.position.province
					this.deptList.city=this.position.city
					this.deptList.area=this.position.district
				}else if(this.position.pname!=undefined){
					this.deptList.province=this.position.pname
					this.deptList.city=this.position.cityname
					this.deptList.area=this.position.adname
				}
				
				this.deptList.createPhone=this.userInfo.phone
				uni.showModal({
					content: "确定提交企业信息？",
					showCancel: true,
					confirmText: '确定',
					success: function(res) {
						if (res.confirm) {
							uni.showLoading({
								title:"正在提交",
								mask:true
							})
							that.$api.doRequest('post','/settledCompanyInfo/api/addSettledCompanyInfo',that.deptList).then(res => {
								//成功后
								console.log("提交企业信息",res)
								if (res.data.code == 200) {
									var data={
										compName:'',
										title:'',
										mainBusinessType:'',
										companyProfile:'',
									}
									that.$store.commit('enterchange',data)
									that.show = true
								}
								uni.hideLoading()
							})
							.catch(res => {
								console.log("系统异常",res)
								uni.hideLoading()
								uni.showToast({
									title: "系统异常，请联系管理员",
									icon: 'none',
									duration: 2000
								})
							})
							
						}
					},
				})
			}
		}
	}
</script>

<style lang='scss' scoped>
	.center {
		padding: 10rpx 20rpx;
		width: 100vw;
		height: 100vh;
		overflow: scroll;
		position:relative;z-index:2;
	}
	.bg{
		position:absolute;
		width:100%;
		left: 0;
		top:0;
	}
	.c-row {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		padding: 20rpx 30rpx;
		position: relative;
	}

	.con-list {
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		flex: 1;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		flex-direction: column;
		line-height: 40rpx;
		text-align: right;
		padding-right: 20rpx;
		font-size: 14px;
	}

	.con-list input {
		font-size: 14px !important;
	}

	.back-btn {
		position: absolute;
		left: 40upx;
		z-index: 9999;
		padding-top: var(--status-bar-height);
		top: 40upx;
		font-size: 40upx;
		color: #fff;
	}

	.title1 {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: 40upx;
		padding-top: var(--status-bar-height);
		z-index: 9999;
		color: #fff;
		font-size: 36rpx;
	}

	.choice {
		margin-top: 10px;
		display: inline-block;
	}

	.title {
		color: #71747C;
	}

	.types {
		background-color: #F4FAF8;
		text-align: center;
		border-radius: 20px;
		margin-left: 5px;
		padding:8px 19px;
	}

	.types1 {
		background-color: #22C572;
		text-align: center;
		border-radius: 20px;
		color: #FFFFFF;
	}

	.write {
		margin-right: 20px;
		color: #71747C;
	}

	.commit {
		margin-top: 20px;
		border: 0px;
		border-radius: 20px;
	}

	.modular {
		background-color: #FFFFFF;
		border-radius: 10px;
		margin-top: 10px;
		position:relative;z-index:2;
		padding:0 12.5px;
	}

	.forList {
		margin-top: 20px;
	}

	.titleUp {
		color: #FFFFFF;
		font-size: 44rpx;
		margin-top: 80px;
		margin-left: 10px;
		position: relative;
		z-index:2;
	}

	.upload {
		text-align: center;
		margin: 20px 0;
		margin-bottom: 20px;
	}

	.popups {
		width: 280px;
		height: 290px;
		border-radius: 20px;
	}

	.successImg {
		width: 90px;
		height: 90px;
		margin: 30px auto;
	}

	.successText {
		text-align: center;
		margin: 0 auto;
		font-size: 16px;
	}
	.companyProfilewrap{
		position:relative;
		width:100%;
	}
	.companyProfile{
		width:90%;height:138px;
		background:#F9F9FA;
		font-size:13px;
		padding:13px;
		border-radius:5px;
	}
	.companyProfilecontent{
		position:absolute;
		bottom:10px;
		right:15px;
		font-size:13px;
	}
</style>