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 content1-card">
				<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
			try {
				this.position = uni.getStorageSync('position');
			} catch (e) {
				// error
			}
			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.name) == -1) {
					this.mainBusinessType.push(item.name)
					item.checked = true
				} else {
					for (var i = 0; i < this.mainBusinessType.length; i++) {
						if (this.mainBusinessType[i] == item.name) {
							this.mainBusinessType.splice(i, 1)
						}
					}
					item.checked = false
				}
			},
			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.setStorage({
					key: 'setPosition',
					data: {},
					success: (res) => {}

				})
				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) {
										that.deptList.id = res.data.data
										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;
		width: 25%;
	}

	.title {
		color: #71747C;
	}

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

	.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: 100%;
		height: 138px;
		background: #F9F9FA;
		font-size: 13px;
		padding: 13px;
		border-radius: 5px;
		border: 1px solid #eeeeee;
	}

	.companyProfilecontent {
		position: absolute;
		bottom: 0px;
		right: 20px;
		font-size: 13px;
	}

	.content1-card {
		background: linear-gradient(202deg, #D0FAE6 0%, #FFFFFF 100%);
		height: 391rpx;
	}
</style>