yiliangyiyun-app/pages/grain_pulse/editcompany.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>
			<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 :file-list="fileList" 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" @on-preview='onPreview' 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 :file-list="fileList1" 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" -->
			<view style='padding-bottom:10px;' class="modular">
				<view class="title Medium">企业概况</view>
				<!-- <u-input v-model="value" :type="type"  :height="height" :auto-height="autoHeight" placeholder="请输入企业概况，如经营项目、产品类型、企业规模等，不超过300个字" /> -->
				<textarea value="" placeholder="请输入企业概况，如经营项目、产品类型、企业规模等，不超过300个字" class="areaText Regular"
					v-model="deptList.companyContant" placeholder-style="color:#AFB3BF"/>
				<view class="title Regular">添加标签（标签应突出企业特色，最多6个）</view>
				<view style='flex-wrap:wrap;width: 100%;' class="flex ">
					<view class="forLists" v-for="(item,index) in label" :Key="index">
						<u-tag :text="item" mode="dark" class="forList Medium" shape="circle" :show="show"
							:closeable="closeable" color="#22C572" @close="closeForList(index)" />
					</view>
					
				</view>
				<u-tag v-if='label.length<6' text="+" mode="plain" shape="circle" :show="show1" color="#2E2E2D" bg-color="#FFFFFF"
						border-color="#F9F9FA" class="add" @click="add"></u-tag>
				<view class="addinput addlabel flex" v-if="inputShow">
					<u-input class='label' v-model="value" type="type" border focus v-if="inputShow"
					 placeholder="请输入标签内容，不超过6个字" />
					<u-button :type="types" class="inputOk" shape="circle" @click="addinput">确定</u-button>
				</view>
			</view>
			<view style='padding-bottom:10px;' class="modular">
				<view class="title Regular">场地照片（图片清晰，最多9张）</view>
				<upload  :form-data="{companyId: pcUserInfo.compId,
							modelId: '',
							vesselId: ''}" :file-list="fileList2" class="upload" ref="upload" :action="action" :max-count="9"
					:size-type="['compressed']" @on-success="getImgUrl2" @on-remove="onRemove"
					@on-uploaded="isAdd = true" ></upload>
			</view>
			<view  style='padding-bottom:10px;' class="modular">
				<view class="title Medium">联系方式</view>
				<view v-for="(item,index) in Persons">
					<view class="information flex">
						<view class="xinxi">
							<u-form-item label="姓名" label-width="30%" class="Regular" label-position="top"
								style="font-size: 28rpx; color: #71747C;" :border-bottom="topBorder">
								<u-input v-model="item.contacts" class="Regular" placeholder="请输入姓名" />
							</u-form-item>
						</view>
						<view class="xinxi">
							<u-form-item label="电话" label-width="30%" class="Regular" label-position="top"
								style="font-size: 28rpx; color: #71747C;" :border-bottom="topBorder">
								<u-input maxlength="15" type="digit" v-model="item.contactsPhone" class="Regular" placeholder="请输入电话" />
							</u-form-item>
						</view>
						<div class="del" @click="delPerson(index)">
							<span style="font-size: 46rpx; color: #22C572;">×</span>
						</div>
					</view>
				</view>
				<view class="addPerson" @click="addPerson">
					<image src="../../static/img/liangmai/jia@3x.png" mode=""
						style="width: 26rpx;height: 26rpx;top: 2rpx;"></image>
					添加联系人
				</view>
			</view>
			<view class="modular">
				<u-form-item label="邮箱" label-width="30%" class="title Regular">
					<u-input v-model="deptList.email" input-align="right" class="write Regular" placeholder="请输入电子邮箱" />
				</u-form-item>
				<u-form-item label="传真" label-width="30%" class="title Regular" :border-bottom="topBorder">
					<u-input v-model="deptList.fax" input-align="right" class="write Regular" placeholder="请输入传真号" />
				</u-form-item>
			</view>
			<u-button @click="submit" class="commit" type="success">提交</u-button>
		</u-form>
	</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,
				pcUserInfo :uni.getStorageSync('pcUserInfo'),
				maxSize: 50 * 1024 * 1024, //限制文件大小 50M
				btnLoading: false,
				isAdd: true,
				uploadOptions: {
					"text": "上传封面图片",
					"bgc": ""
				},
				errorType: ['message'],
				uploadOptions1: {
					"text": "上传营业执照",
					"bgc": ""
				},
				fileList:[],
				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",
				label: [],
				closeable: true,
				show: true,
				show1: true,
				types: "",
				inputShow: false,
				value: "", //临时标签内容字段 后期更换
				action: 'https://www.zthymaoyi.com/upload/admin',
				fileList1: [],
				imgList: [],
				fileList2: [],
				Persons: [{contacts:'',contactsPhone:''}],
				topBorder: false,
			}
		},
		onLoad(options) {
			if(options.id){
				this.id=options.id
			}
			this.getList()
			
		},
		onShow() {
			console.log(uni.getStorageSync('position'))
			if(uni.getStorageSync('position')!=''){
				this.position=uni.getStorageSync('position')
				this.position.city=this.position.city.toString()
			}
			// if(this.$store.state.enter){
			// 	this.deptList.compName=this.$store.state.enter.compName
			// 	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
			// 				}
			// 			}
			// 		}
			// 	}
			// 	if(this.$store.state.enter.companyProfile){
			// 		this.deptList.companyProfile=this.$store.state.enter.companyProfile
			// 	}
			// }
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		methods: {
			onPreview(res,list){
				console.log(res,list,11111)
			},
			getImgUrl(res) {
				console.log(res)
				this.deptList.attachmentAddress = res.data.appendixPath
			},
			getList(){
				this.isLoadMore=true
					this.$api.doRequest('get','/settledCompanyInfo/getSettledCompanyInfo',{id:this.id}).then(res => {
					if(res.data.code==200){
						this.isLoadMore=false
						this.deptList=res.data.data
						this.position.latitude=this.deptList.latitude
						this.position.longitude=this.deptList.longitude
						this.position.province=this.deptList.province
						this.position.city=this.deptList.city
						this.position.district=this.deptList.area
						this.mainBusinessType=this.deptList.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
								}
							}
						}
						this.fileList=[{url:this.deptList.attachmentAddress}]
						this.fileList1=[{url:this.deptList.licenseAddress}]
						console.log(this.fileList)
						if(this.deptList.label.indexOf(',')!=-1){
							this.label=this.deptList.label.split(',')
						}else{
							this.label=[this.deptList.label]
						}
						if(this.deptList.sitePhotoAddress.indexOf(',')!=-1){
							this.imgList=this.deptList.sitePhotoAddress.split(',')
						}else{
							this.imgList=[this.deptList.sitePhotoAddress]
						}
						
						console.log("this.imgList",this.imgList)
						for(var i=0;i<this.imgList.length;i++){
							if(this.imgList[i]){
								this.fileList2.push({url:this.imgList[i]})
							}
						}
						this.Persons=this.deptList.settledCompanyContacts
					}
				})
			},
			naviageToPage(item) {
				// console.log(this.enter)
				var data={
					compName:this.deptList.compName,
					title:this.deptList.title,
					mainBusinessType:this.mainBusinessType.toString(),
					companyProfile:this.deptList.companyProfile,
					id:this.id
				}
				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()
			},
			upload() {
				uni.navigateTo({
					url: `/`
				})
			},
			perfect() {
				this.show=false
				uni.navigateTo({
					url: `/pages/grain_pulse/perfect?deptList=`+JSON.stringify(this.deptList)
				})
			},
			add() {
				if (this.label.length >= 6) {
					this.inputShow = false
				} else {
					this.inputShow = true
				}
			},
			getImgUrl2(res) {
				console.log(res)
				this.imgList.push(res);
			},
			addinput() {
				if (!this.value) {
					this.$api.msg('标签内容不能为空')
					return
				}
				if (this.value.length < 2 || this.value.length > 6) {
					this.$api.msg('标签内容输入有误')
					return
				}
				this.label.push(this.value)
				this.value = ""
				this.inputShow = false
			},
			addPerson() {
				this.Persons.push({
					name: "",
					phone: "",
				})
			},
			delPerson(index) {
				this.Persons.splice(index, 1)
			},
			closeForList(index) {
				this.label.splice(index, 1)
			},
			onRemove(e) {
				this.imgList.splice(e, 1)
			},
			uploadSuccess(e) {
				this.imgList.push(e.url)
			},
			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
				
				let re = /^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
					for(var i=0;i<this.Persons.length;i++){
						if(this.Persons[i].contacts.length<2||this.Persons[i].contacts.length>10){
							this.$api.msg('联系人姓名2-10个字')
							return
						}
						if(this.Persons[i].contactsPhone.length<2||this.Persons[i].contactsPhone.length>15){
							this.$api.msg('联系人电话7-15位数字')
							return
						}
					}
					// if(!re.test(this.deptList.email)){
					// 	this.$api.msg('邮箱输入错误')
					// 	return
					// }
					// if(this.deptList.fax && (this.deptList.fax.length<6||this.deptList.fax.length>20)){
					// 	this.$api.msg('传真输入错误')
					// 	return
					// }
					this.deptList.label=this.label.toString()
					this.deptList.sitePhotoAddress=this.imgList.toString()
					this.deptList.settledCompanyContacts=this.Persons
				uni.showModal({
					content: "详尽的企业信息有助于客户了解您的企业，是否确定提交？",
					showCancel: true,
					confirmText: '确定',
					success: function(res) {
						if (res.confirm) {
							that.$api.doRequest('post','/settledCompanyInfo/api/editSettledCompanyInfo',that.deptList).then(res => {
								if(res.data.code==200){
									that.$api.msg('提交成功')
									uni.navigateBack({
										
									})
								}else{
									
									that.$api.msg(res.data.message)
								}
							})
						}
					},
				})
			}
		}
	}
</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;
	}
.forList{
    height: 32px;
    background-color: #F4FAF8;
    padding: 10px 15px;
    color: #22C572;
    margin-left: 12px;
    text-align: center;
}
	.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;
	}
	.label{
		padding-right:30px;
		border:none;
	}
		.title {
			margin-left: 20rpx;
			color: #333333;
			line-height: 70rpx;
		}
	
		.write {
			margin-right: 20px;
			color: #71747C;
		}
	
		.modular {
			background-color: #FFFFFF;
			border-radius: 12px;
			margin-top: 10px;
		}
	
		.areaText {
			width: 83%;
			padding: 30rpx;
			border: 2rpx solid #F9F9FA;
			background-color: #F9F9FA;
			margin: 10rpx auto 20rpx;
			border-radius: 20rpx;
			color: #AFB3BF;
			font-size: 28rpx;
		}
	
		.add {
			padding: 15rpx 30rpx;
			width: 120rpx;
			height: 65rpx;
			text-align: center;
			margin-left: 24rpx;
			font-size: 30rpx;
			font-weight: 600;
			margin-bottom: 10rpx;
			border:1px solid #DCDDDC;
		}
	
		.forLists {
			margin-bottom: 10rpx;
		}
	
		.addinput {
			width: 70%;
			margin: 20rpx auto;
			border-radius: 50rpx;
		}
	.addlabel{
		background:#F6F6F6;
		position:relative;
		border-radius: 50rpx;height: 70rpx;font-size: 10px;
		padding-right:40px;
		line-height: 52rpx;
		margin-bottom:10px;
	}
		.inputOk {
			width: 100rpx;
			border-radius: 40rpx;
			background-color: #22C572;
			color: #FFFFFF;
			height:70rpx;
			border: none;
			position:absolute;
			right:0;
		}
		.picture {
			width: 144rpx;
			height: 144rpx;
			border: 4rpx dashed #AFB3BF;
		}
	
		.upload {
			text-align: center;
			margin: 0px 0;
			margin-bottom: 10px;
		}
	
		.addPerson {
			width: 230rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			border: 2rpx solid #979797;
			border-radius: 40rpx;
			margin: 20rpx auto 20rpx;
		}
	
		.information {
			background-color: #F4FAF8;
			width: 96%;
			height: 180rpx;
			margin: 0 auto;
			border: 1rpx dashed #22C572;
			border-radius: 10rpx;
			margin-top: 30rpx;
		}
	
		.xinxi {
			margin-left: 70rpx;
		}
	
		.del {
			justify-content: flex-end;
			margin: 10rpx 20rpx 0 0;
		}
</style>