intelligentGroup/pageTwo/me/company.vue

<template>
	<view class="box fromClass">
		<view class="lanBox">
			<view class="lan border-bottom">
				<view class="left">公司名称<text class="redcolor">*</text></view>
				<view class="right">
					<input name="name" type="text" v-model="userInfo.name" placeholder="公司名称" />
				</view>
			</view>
			<view class="lan border-bottom">
				<view class="left">公司所在地区<text class="redcolor">*</text></view>
				<view class="right">
					<pickRegions @getRegion="handleGetRegion" class="regions" :isArea="true">
						<view class="city" v-if="userInfo.province">
							{{userInfo.province}}{{userInfo.city}}{{userInfo.area}}
						</view>
						<view v-else>请选择省/市/区</view>
						<uni-icons type="forward" size="20" color="#999"></uni-icons>
					</pickRegions>
				</view>
			</view>
			<view class="lan border-bottom">
				<view class="left">详细地址<text class="redcolor">*</text></view>
				<view class="right">
					<input name="name" type="text" v-model="userInfo.address" placeholder="单元楼栋" />
				</view>
			</view>

			<view class="lan border-bottom">
				<view class="left">公司职位<text class="redcolor">*</text></view>
				<view class="right">
					<input name="name" type="text" v-model="userInfo.pos" placeholder="公司职位" />
				</view>
			</view>
			<view class="lan border-bottom">
				<view class="left">公司logo</view>
				<view class="right logo" v-if="userInfo.logourl">
					<image :src="userInfo.logourl" class="headimage" mode="aspectFit" @click="handleimage(1)" />
					<uni-icons type="close" size="26" class="uni-icons" @click="userInfo.logourl=''"
						@click.stop></uni-icons>
				</view>
				<view class="right logo size20 bold" v-else @click="handleimage(1)">+</view>
			</view>
			<view class="lan border-bottom">
				<view class="left">公司电话<text class="redcolor">*</text></view>
				<view class="right">
					<input name="name" type="text" v-model="userInfo.mobile" placeholder="请输入" />
				</view>
			</view>
			<view class="lan border-bottom">
				<view class="left">企业年营收（万元）</view>
				<view class="right">
					<input name="name" type="digit" v-model="userInfo.yearlyincome" placeholder="请输入" />
				</view>
			</view>
			<view class="lan border-bottom">
				<view class="left">企业年税收（万元）</view>
				<view class="right">
					<input name="name" type="digit" v-model="userInfo.yearlytax" placeholder="请输入" />
				</view>
			</view>
			<view class="lan border-bottom">
				<view class="left">员工人数(人)</view>
				<view class="right">
					<input name="name" type="number" v-model="userInfo.staffcnt" placeholder="请输入" />
				</view>
			</view>
			<view class="lan border-bottom">
				<view class="left">企业介绍</view>
				<view class="right textarea">
					<textarea v-model="userInfo.desc" name="content" maxlength="-1"/>
				</view>
			</view>
			<view class="lan border-bottom">
				<view class="left">企业照片</view>
				<view class="picsImg">
					<view class="pics" v-for="(img,ind) in urlList" v-if="urlList.length">
						<image :src="img" mode="aspectFill" @click="handleimage(2)" />
						<uni-icons type="close" size="26" class="uni-icons" @click="handleDel(ind)"
							@click.stop></uni-icons>
					</view>
					<view v-if="urlList.length<4" @click="handleimage(2)" class="right pics size20">+</view>
					<text class="size12 c999 desc">最多可上传4张，大小不超过2M</text>
				</view>
			</view>

		</view>
		<view class="btn" @click="confirmInfo">保存</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import pickRegions from "@/uni_modules/pick-regions/pick-regions.vue"
	export default {
		data() {
			return {
				userInfo: {
					address: "",
					area: "",
					city: "",
					desc: "",
					logo: "",
					logourl: "",
					mobile: "",
					name: "",
					pics: [],
					pos: "",
					province: "",
					staffcnt: "",
					yearlyincome: "",
					yearlytax: ""
				},
				urlList: [],
				pathList: [],
			};
		},
		components: {
			pickRegions
		},
		computed: {
			...mapState(['user'])
		},
		onLoad() {
			let url = []
			let path = []
			this.userInfo = this.user.cominfo ? this.user.cominfo : {}
			if (this.user.cominfo && this.user.cominfo.pics.length) {
				this.user.cominfo.pics.forEach(item => {
					url.push(item.url)
					path.push(item.path)
				})
			}
			this.urlList = url
			this.pathList = path
			console.log("this.user", this.user)
		},
		methods: {
			// 提交
			confirmInfo() {
				let that = this
				if (!this.userInfo.name) {
					this.$tools.msg("请输入公司名称")
					return;
				}
				if (!this.userInfo.province) {
					this.$tools.msg("请选择公司所在地")
					return;
				}
				if (!this.userInfo.address) {
					this.$tools.msg("请输入公司详细地址")
					return;
				}
				if (!this.userInfo.pos) {
					this.$tools.msg("请输入公司职位")
					return;
				}
				// if (!this.userInfo.logourl) {
				// 	this.$tools.msg("请上传公司logo")
				// 	return;
				// }
				if (!this.userInfo.mobile) {
					this.$tools.msg("请输入公司电话")
					return;
				}
				this.userInfo.pics = this.pathList
				console.log("提交", this.userInfo)
				that.$model.getSubmitCom(this.userInfo).then(res => {
					if (res.code == 0) {
						that.$tools.msg("提交成功");
						that.$store.dispatch("getUserInfo")
						uni.navigateBack({
							delta: 2
						})
					} else {
						that.$tools.msg(res.message);
					}
				});
			},
			handleimage(ind) {
				let that = this
				let imgArr = []
				uni.chooseImage({
					count: ind == 1 ? 1 : 6, //默认9
					sourceType: ['album', 'camera'], //从相册选择
					success: function(res) {
						uni.showLoading({
							title: '识别中...'
						})
						imgArr.push(res.tempFilePaths)
						imgArr.forEach(ele => {
							ele.forEach(item => {
								that.$model.getUpLoadimg({
									uploadpath: item
								}).then(ress => {
									uni.hideLoading()
									if (ress.code == 0) {
										if (ind == 1) { //公司logo
											that.userInfo.logo = ress.data.path
											that.userInfo.logourl = ress.data.url
										} else { //企业照片
											that.urlList.push(ress.data.url)
											that.pathList.push(ress.data.path)
										}
									} else {
										that.$tools.msg("不支持该图像")
									}
								})
							})
						})
					}
				})
			},
			handleDel(ind) {
				let that = this
				that.urlList.splice(ind, 1)
				that.pathList.splice(ind, 1)
			},
			handleGetRegion(ite) {
				console.log("省市区", ite)
				this.userInfo.province = ite[0].name
				this.userInfo.city = ite[1].name
				this.userInfo.area = ite[2].name
			}
		},
	};
</script>

<style scoped="scoped" lang="scss">
	.right {

		/deep/picker,
		.regions {
			width: 100%;
		}
	}

	.logo {
		width: 145px !important;
		height: 52px !important;
		padding: 10px !important;
		justify-content: center;

		image {
			width: 100%;
			height: 100%;
		}

		uni-icons {
			background: #fff;
			border-radius: 50%;
			top: -15px !important;
			font-size: inherit !important;
		}
	}

	.picsImg {
		width: 100%;
		height: auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.pics {
		// width: 330rpx !important;
		// height: 147rpx !important;
		width: 208rpx !important;
		height: 208rpx !important;
		justify-content: center;
		padding: 0 !important;
		margin-top: 10px;
		float: left;
		border: 1px solid #dfdfdf;
		border-radius: 5px;
		position: relative;

		.uni-icons {
			background: #fff;
			border-radius: 50%;
			position: absolute;
			right: 0;
			top: -10px !important;
			font-size: inherit !important;
		}

		image {
			width: 100%;
			height: 100%;
		}
	}
</style>