caimei-applets-caimei/supplier/pages/user/information.vue

<template name='information'>
	<view class="container">
		<view class="wrap-info">
			<view class="row">
				<view class="info-title">基本信息</view>
			</view>
			<view class="info-from">
				<view class="label">公司名称</view>
				<input class="row-input" type="text" placeholder="请与营业执照的注册名称保持一致" maxlength="6"/>
			</view>
			<view class="info-from">
				<view class="label">公司简称</view>
				<input class="row-input" type="text" placeholder="请输入公司简称" maxlength="6"/>
			</view>
			<view class="info-from">
				<view class="label">公司地址</view>
				<view class="row-input" @click="showMulLinkageThreePicker">
					 <text :class="addressData.address === '请选择公司所在地区' ? 'none' : ''">
					 	{{addressData.address}}
					 </text>	
					 <text class="iconfont icon-xiayibu"></text>
				</view> 
			</view>
			<textarea value="" placeholder="请填写详细地址，如街道/小区/门牌等" maxlength="50" class="address-details"/>
			<view class="info-from">
				<view class="label">联系人</view>
				<input class="row-input" type="text" placeholder="请输入联系人姓名" maxlength="6"/>
			</view>
			<view class="info-from">
				<view class="label">邮箱</view>
				<input class="row-input" type="text" placeholder="请输入邮箱地址 " maxlength="6"/>
			</view>
			 <text class="info-email">邮箱可用作登录账号，请使用公司邮箱或法人邮箱</text>
			<view class="info-from">
				<view class="label">固定电话</view>
				<input class="row-input" type="text" placeholder="请在号码前加区 " maxlength="6"/>
			</view>
			<view class="info-from">
				<view class="label">传真</view>
				<input class="row-input" type="text" placeholder="请输入公司传真号 " maxlength="6"/>
			</view>
			<view class="info-from">
				<view class="label">法人代表</view>
				<input class="row-input" type="text" placeholder="请输入公司法人代表姓名 " maxlength="6"/>
			</view>
			<view class="info-from">
				<view class="label">注册资本</view>
				<input class="row-input" type="text" placeholder="请填写公司注册资本 " maxlength="6"/>
			</view>
			<view class="info-from">
				<view class="label">公司性质</view>
				<input class="row-input" type="text" placeholder="请填写公司性质 " maxlength="6"/>
			</view>
			<view class="info-from">
				<view class="label">年营业额</view>
				<input class="row-input" type="text" placeholder="请输入公司年营业额  " maxlength="6"/>
			</view>
		</view>
		
		<view class="wrap-content">
			<view class="row">
				<view class="info-title">经营信息</view>	
			</view>
			<view class="info-from" style="border: 0;">
				<view class="label">公司类型</view>
				<view class="row-input ShopTyperadio">
				 <radio-group>
					 <label class="radio" v-for="(item, index) in typename" :key="item.value" @click="firstShopTypeRidio(item)">
						 <radio :value="item.value" color='#E15616'/>{{item.name}}
					 </label>
				 </radio-group>
				 </view>
			</view>
			<view class="secondTyperadio"  v-if="isfirstShow" >
				 <view class="radio" v-for="(item,index) in secondtype" :key="index" @click="secondypeRidio(item)" :class="secontype==item.value?'active':''">
				 	<view class="secondRadio">{{item.name}}</view>
				 </view>
			</view>
			<view class="zizhi" v-if="issecondshow">
				<view class="info2-title zizhi-title">资质</view>
				<view class="uploadImage">
					 <view class="form-upload-image"  v-if="params.medicalPracticeLicenseImg1!=''">
						   <image class="upload-img" :src="params.medicalPracticeLicenseImg1" alt="" ></image>
						   <view class="iconfont icon-shanchu1" @click="deleteMedicalImage()"></view>
					 </view>
					 <view class="formLine-file" @click="uploadzizhiImageFn" v-else>
						   <view class="file-zizhi"></view>
					  </view>
					  <view class="form-upload-tips">
						  <text class="iconfont icon-wenhao"></text>
						  <view class="wen-tips">点击图片可放大图片</view>
					  </view>
				</view>
			</view>
			<view class="business">
				<view class="info2-title business-title">主营内容</view>
				<view class="business-info">
					 <checkbox-group class="row-group">
								<label class="diyBox second" v-for="(item, index) in mentuzCampNullList" :key="item.value">
									<checkbox :value="item.value"  :class="{on: item.checked}" v-model="shopMainPros" ></checkbox>
									<view class="row-text">{{item.name}}</view>
								</label>
					 </checkbox-group>
					 <view class="addbusiness">
					 	<input class="row-input other" type="text" placeholder="请输入自定义项目"  @blur="onBlurInput" maxlength="5"/>
					 	<button type="default" class="button" @click.stop="addCustomItem">确认添加</button>
					 </view>
				</view>
			</view>
			<view class="business">
				<view class="info2-title business-title">经营范围</view>
				<view class="business-info">
					   <checkbox-group class="row-group">
							<label class="row-input" v-for="(item, index) in Scopelist" :key="item.value">
								<checkbox :value="item.value"  :class="{on: item.checked}"  v-model="shopScope"></checkbox>
								<view class="row-text">{{item.name}}</view>
							</label>
					   </checkbox-group>
					 <view class="addbusiness">
					 	<input class="row-input other" type="text" placeholder="请输入自定义经营范围"  @blur="onBlurInput" maxlength="5"/>
					 	<button type="default" class="button" @click.stop="shopScopeAdd">确认添加</button>
					 </view>
				</view>
			</view>
			<view class="info">
				<view class="info2-title">公司介绍</view>
				 <textarea placeholder="公司简介会在公司介绍页面展示，有助于机构更好的了解您， 建议从个人规模、代理产品、机构服务、荣誉资质这4方面进行介绍" name="textarea"/>
			</view>
			<view class="info">
				<view class="info2-title">主打系列商品说明</view>
				 <textarea placeholder="请输入主打系列商品说明" name="textarea"/>
			</view>
		</view>
		
		<view class="wrap-image">
			<view class="row">
				<view class="info-title">资质证明</view>
			</view>
			<view class="info-from">
				<view class="label Code">营业执照编号</view>
				<input class="row-input Code" v-model.trim="params.socialCreditCode" type="text" placeholder="请输入公司营业执照编号" maxlength="18"/>
			</view>
			<view class="zizhi">
				<view class="info2-title zizhi-title">营业执照图片</view>
				<view class="uploadImage">
					 <view class="form-upload-image"  v-if="params.businessLicenseImage!=''">
						   <image class="upload-img" :src="params.businessLicenseImage" @click="showViewerImageFn()" ></image>
						   <view class="iconfont icon-shanchu1" @click="deleteBusinessImage()"></view>
					 </view>
					 <view class="formLine-file" @click="uploadBusinessLicenseImageFn" v-else>
						   <view class="file-biss iconImage"></view>
					  </view>
				</view>
			</view>
			<view class="zizhi">
				<view class="info2-title zizhi-title">公司LOGO</view>
				<view class="uploadImage">
					 <view class="form-upload-image"  v-if="params.logo!=''">
						   <image class="upload-img" :src="params.logo" alt="" @click="showViewerImageFn1()"></image>
						   <view class="iconfont icon-shanchu1"  @click="deletelogoImage()"></view>
					 </view>
					 <view class="formLine-file" @click="uploadlogoImageFn" v-else>
						   <view class="file-logo iconImage"></view>
					  </view>
				</view>
			</view>
			<view class="zizhi">
				<view class="info2-title zizhi-title">生产许可证</view>
				<view class="uploadImage">
					 <view class="form-upload-image"  v-if="params.productionLicence!=''">
						   <image class="upload-img" :src="params.productionLicence" alt="" @click="showViewerImageFn2()"></image>
						   <view class="iconfont icon-shanchu1" @click="deleteproducImage()"></view>
					 </view>
					 <view class="formLine-file" @click="uploadproductionLicenceImageFn" v-else>
						   <view class="file-produce iconImage"></view>
					  </view>
				</view>
			</view>
			<view class="zizhi">
				<view class="info2-title zizhi-title">卫生许可证</view>
				<view class="uploadImage">
					 <view class="form-upload-image"  v-if="params.hygienicLicense!=''">
						   <image class="upload-img" :src="params.hygienicLicense" alt="" @click="showViewerImageFn3()"></image>
						   <view class="iconfont icon-shanchu1" @click="deletehygienicImage()"></view>
					 </view>
					 <view class="formLine-file" @click="uploadhygienicLicenseImageFn" v-else>
						   <view class="file-health iconImage"></view>
					  </view>
				</view>
			</view>
			<view class="zizhi">
				<view class="info2-title zizhi-title">税务许可证</view>
				<view class="uploadImage">
					 <view class="form-upload-image"  v-if="params.taxLicense!=''">
						   <image class="upload-img" :src="params.taxLicense" alt="" @click="showViewerImageFn4()"></image>
						   <view class="iconfont icon-shanchu1" @click="deletaxImage()"></view>
					 </view>
					 <view class="formLine-file" @click="uploadtaxLicenseImageFn" v-else>
						   <view class="file-tax iconImage"></view>
					  </view>
				</view>
			</view>
			<view class="zizhi">
				<view class="info2-title zizhi-title hoor">荣誉证书</view>
				<view class="uploadImage list-image">
					<view class="formLine-file" @click="uploadHonorImageFn" v-if="HonorImagesList.length<5" >
							<view class="file-tax iconImage"></view>
					 </view>
					 <view class="form-upload-image" v-for="(item, index) in HonorImagesList" :key="index">
						   <image class="upload-img" :src="item" alt="" @click="showViewerImageFn5()"></image>
						   <view class="iconfont icon-shanchu1" @click="removeGoodsImagesFn(index)"></view>
					 </view>
				</view>
			</view>
			<view class="zizhi">
				<view class="info2-title zizhi-title hoor">产品证书</view>
				<view class="uploadImage list-image">
					<view class="formLine-file" @click="uploadproductImageFn" v-if="productImagesList.length<5" >
							<view class="file-tax iconImage"></view>
					 </view>
					 <view class="form-upload-image" v-for="(item, index) in productImagesList" :key="index">
						   <image class="upload-img" :src="item" alt="" @click="showViewerImageFn6()"></image>
						   <view class="iconfont icon-shanchu1" @click="removeproductImagesFn(index)"></view>
					 </view>
				</view>
			</view>
		</view>
		<view class="wrap-Btn">
			<button type="default" class="confirmBbtn" @click="shopSubmit">确定</button>
		</view>
		<mpvue-city-picker :themeColor="themeColor"
							ref="mpvueCityPicker" 
						    :pickerValueDefault="cityPickerValueDefault"
							@onCancel="onCancel" 
							@onConfirm="onConfirm">
		</mpvue-city-picker>
	</view>
</template>

<script>
	import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue'
	import { uploadFileImage } from "@/api/utils.js"
	import { mapState,mapMutations } from 'vuex';
	export default{
		name:'information',
		components:{
			mpvueCityPicker,
		},
		data(){
			return{
				isShowInput:false,
				firsttype:0,
				secontype:0,
				isfirstShow:false,
				issecondshow:false,
				addressData:{
					address:'请选择公司所在地区',
					townID:'',			//区ID
					cityID:'',			//区ID
					provinceID:'',		//区ID
					addressDetail: '',	//地址
				},
				typename:[
					{name:'医疗',value:'1'},
					{name:'非医疗',value:'2'}
				],
				secondtype:[
					{name:'一类器械',value:'1'},
					{name:'二类器械',value:'2'},
					{name:'三类器械',value:'3'},
					{name:'其它',value:'4'}
				],
				mentuzCampNullList:[
					{value:'1',name:'产品'},
					{value:'2',name:'仪器'},
					{value:'3',name:'服务'}
				],
				Scopelist:[
					{value:'1',name:'仪器护理类'},
					{value:'2',name:'护肤品类'},
					{value:'3',name:'纹绣类'},
					{value:'4',name:'美体内衣'},
					{value:'5',name:'整形耗材'},
					{value:'6',name:'国际品牌'},
					{value:'7',name:'美胸类'},
					{value:'8',name:'健康保健类'},
					{value:'9',name:'面膜类'},
					{value:'10',name:'抗衰老'},
					{value:'11',name:'生殖保养'},
					{value:'12',name:'健康养生'},
					{value:'13',name:'纤体减肥'}
				],
				shopMainPros:[],
				shopScope:[],
				params:{
					medicalPracticeLicenseImg1:'',//三级器械/医疗执照
					socialCreditCode:'',//营业执照编号
					businessLicenseImage:'',//营业执照
					logo:'',//公司logo
					productionLicence:'',//生产
					hygienicLicense:'',//卫生
					taxLicense:'',//税务
					certificateHonor:'',//荣誉
					productCertification:'',//产品
				},
				HonorImagesList:[],
				productImagesList:[],
			}
		},
		methods:{
			uploadproductImageFn(event){//产品证书
					 uploadFileImage().then(res =>{
						 this.productImagesList.push(JSON.parse(res.data).data);
						 this.params.productCertification =this.productImagesList.toString()+',';
					 })
			       },
			 uploadHonorImageFn(event){//荣誉证书上传
					 uploadFileImage().then(res =>{
						 this.HonorImagesList.push(JSON.parse(res.data).data);
						 this.params.certificateHonor =this.HonorImagesList.toString()+',';
					 })
			        },
			 uploadlogoImageFn(event){//上传公司logo
					uploadFileImage().then(res =>{
						this.params.logo = JSON.parse(res.data).data;
					})
			},
			uploadproductionLicenceImageFn(event){//上传生产
					uploadFileImage().then(res =>{
						this.params.productionLicence = JSON.parse(res.data).data;
					})
			},
			 uploadhygienicLicenseImageFn(event){//上传卫生
					uploadFileImage().then(res =>{
						this.params.hygienicLicense = JSON.parse(res.data).data;
					})
			},
			 uploadtaxLicenseImageFn(event){//上传税务
				   uploadFileImage().then(res =>{
					this.params.taxLicense = JSON.parse(res.data).data;
				   })
			},
			uploadBusinessLicenseImageFn(event){//上传营业执照图片
					uploadFileImage().then(res =>{
						this.params.businessLicenseImage = JSON.parse(res.data).data;
					})
			},
			uploadzizhiImageFn(event){//上传医疗图片
					uploadFileImage().then(res =>{
						this.params.medicalPracticeLicenseImg1 = JSON.parse(res.data).data;
					})
			},
			 removeGoodsImagesFn(index){//删除荣誉图片
					this.HonorImagesList.splice(index,1);
					this.params.certificateHonor = this.HonorImagesList.toString()+',';
				 },
			removeproductImagesFn(index){//删除产品图片
				this.productImagesList.splice(index,1);
				this.params.productCertification = this.productImagesList.toString()+',';
			 },
			deletaxImage(){//删除卫生
			      this.params.taxLicense = '';
			   },
			 deletehygienicImage(){//删除卫生
				this.params.hygienicLicense = '';
			},
			deleteproducImage(){//删除生产
				this.params.productionLicence = '';
			},
			 deletelogoImage(){//删除logo图片
				this.params.logo = '';
			},
			 deleteBusinessImage(){//删除营业执照图片
				this.params.businessLicenseImage = '';
			},
			 deleteMedicalImage(){//删除商品图片
			   this.medicalPracticeLicenseImg1 = '';
			 },
			secondypeRidio(item){
				this.secontype = item.value;
				if (item.value==3){
				this.issecondshow = true;
				}else {
				 this.issecondshow = false;
				}
			},
			firstShopTypeRidio(item){
				this.firsttype = item.value;
				if (item.value==1){
				this.isfirstShow = true;
				}else {
				 this.isfirstShow = false;
				}
			},
			showMulLinkageThreePicker() {//三级地址联动
				this.isShowInput = true
				this.$refs.mpvueCityPicker.show()
				},
			onConfirm(e) {//获取选择的地址信息
				console.log('地址',e);
				this.addressData.address = e.name;
				this.addressData.townID = e.townCode;
				this.addressData.cityID = e.cityCode;
				this.addressData.provinceID = e.provinceCode;
				this.secondParams.townId = this.addressData.townID;
				this.secondParams.address = this.addressData.address;
			},
			onConfirmbrand(e){
				this.brandname = e.name;
			},
		}
	}
</script>

<style  lang="scss">
	.row{
		line-height: 80rpx;
		background: #f7f7f7;
		padding: 0 24rpx;
		.info-title{
			font-size: $font-size-30;
			color: $text-color;
			font-weight: bold;
		}
	}
	.info-from{
		width: 702rpx;
		height: 90rpx;
		line-height: 90rpx;
		border-bottom: 2rpx solid #e1e1e1;
		margin: auto;
		position: relative;
		.label{
			width: 112rpx;
			text-align: left;
			font-size: $font-size-28;
			color: #666666;
			line-height: 90rpx;
			float: left;
			&.Code{
				width: 170rpx;
			}
		}
		.row-input{
			width: 520rpx;
			padding-left:10rpx;
			font-size: $font-size-28;
			color: $text-color;
			line-height: 90rpx;
			float: left;
			height: 90rpx;
			margin-left: 50rpx;
			&.Code{
				width: 470rpx;
			}
			.icon-xiayibu{
				position: absolute;
				right: 0;
				color: #b2b2b2;
			}
			.none{
				color: #b2b2b2;
			}
		}
	}
	.address-details{
		height: 146rpx;
		border-bottom: 2rpx solid #e1e1e1;
		width: 702rpx;
		margin: auto;
		font-size: $font-size-28;
		padding-top: 20rpx;
	}
	 input[type="text"]::placeholder,textarea::placeholder {color: #b2b2b2;font-size: $font-size-28;}
	 .info-email{
		 color: #fea785;
		 font-size: $font-size-20;
		 padding-left: 24rpx ;
	 }
	 .ShopTyperadio{
		 overflow: hidden;
		 height: auto;
		 border: 0;
		 .radio{
			 float: left;
			 margin-right: 60rpx;
			 .iconfont{
				 margin-right: 10rpx;
				 font-size: $font-size-36;
			 }
			 .icon-weixuanze{
				 color: #b2b2b2;
			 }
			 .icon-yixuanze{
				  color: $color-system;
			 }
		 }
	 }
	 .active{
		 color: $color-system;
	 }
	 .secondTyperadio{
		 overflow: hidden;
		 height: auto;
		 padding: 0 24rpx;
		 margin-bottom: 20rpx;
		 color: #999999;
		 .radio{
				float: left;
				margin-right: 20rpx;
				.secondRadio{
					 border: 2rpx solid #e1e1e1;
					 padding: 0 30rpx;
					 text-align: center;
					 line-height: 42rpx;
					 font-size: $font-size-26;
					 border-radius: 21rpx;
				}
			}
	 }
	 .zizhi{
		 .uploadImage{
			 padding: 0 24rpx;
			 &.list-image{
				 overflow: hidden;
				 display: flex;
				 overflow-x: auto;
				 padding-top: 20rpx;
				 .formLine-file{
					 float: left;
				 }
				 .form-upload-image{
					  float: left;
					  -webkit-flex-shrink: 0;
					  flex-shrink: 0;
					  position: relative;
					  display: inline-block;
					  margin: 0 15rpx;
				 }
			 }
			 .form-upload-image{
				 width: 256rpx;
				 height:180rpx; 
				 position: relative;
				 .upload-img{
					 width: 100%;
					 height: 100%;
				 }
				 .icon-shanchu1{
					position: absolute;
					top: -20rpx;
					right:-15rpx;
					color: #f94b4b;
					font-size: $font-size-36;
				}
			 }
			 .formLine-file{
					width: 270rpx;
					height: 200rpx;
					display: inline-block;
				 .file-zizhi{
					background: url('https://admin-b.caimei365.com/userfiles/1/images/photo/2020/11/icon-zizhi.png') no-repeat;
					width: 270rpx;
					height: 200rpx;
				 }
				 .iconImage{
					width: 256rpx;
					height:180rpx; 
					&.file-biss{
						background: url('https://admin-b.caimei365.com/userfiles/1/images/photo/2020/11/icon-business(1).png') no-repeat;
						}
					&.file-logo{
						background: url('https://admin-b.caimei365.com/userfiles/1/images/photo/2020/11/icon-logo.png') no-repeat;
						}
					&.file-produce{
						background: url('https://admin-b.caimei365.com/userfiles/1/images/photo/2020/11/icon-produce.png') no-repeat;
						}
					&.file-health{
						background: url('https://admin-b.caimei365.com/userfiles/1/images/photo/2020/11/icon-health.png') no-repeat;
						}
					&.file-tax{
						background: url('https://admin-b.caimei365.com/userfiles/1/images/photo/2020/11/icon-tax.png') no-repeat;
						}
					&.file-honor{
						background: url('https://admin-b.caimei365.com/userfiles/1/images/photo/2020/11/icon-honor.png') no-repeat;
						}
					&.file-product{
						background: url('https://admin-b.caimei365.com/userfiles/1/images/photo/2020/11/icon-product.png') no-repeat;
						}
						
				 }
			 }
			 .form-upload-tips{
				 display: inline-block;
				 vertical-align: top;
				 position: relative;

				 .icon-wenhao{
					font-size: 41rpx;
					 color:#1890f9 ;
				 }
				 .wen-tips{
						width: 360rpx;
					     height: 64rpx;
					     line-height: 64rpx;
					     text-align: center;
					     color: #FFF;
					     font-size: 28rpx;
					     background-color: #1890f9;
					     position: absolute;
					     bottom: -80rpx;
					     left: -4rpx;
					     border-radius: 2rpx;
						 display: none ;
				 }
				 .wen-tips:before {
				     content: '';
				     width: 0px;
				     height: 0px;
				     border-width: 20rpx;
				     border-style: solid;
				     border-color: transparent transparent #1890f9 transparent;
				     position: absolute;
				     top: -35rpx;
				     left: 10rpx;
				 }
				 .form-upload-tips:hover .wen-tips{display: block;}
			 }
		 }
	 }
	 .business{overflow: hidden;}
	 .business-info{
		 float: left;
		 margin-left: 60rpx;
		 width: 550rpx;
		 }
	 .info2-title{
	 	padding: 0 0 24rpx 24rpx;
	 	font-size: $font-size-28;
	 	color: #666666;
		&.zizhi-title{
			padding: 24rpx;	
			 &.hoor{padding: 24rpx 24rpx 0 24rpx;}
			 }
			 &.business-title{
			 float: left;
		 }
		 
	 }
	 .addbusiness{
		 margin: 20rpx 0;
		 .other{
			 width: 350rpx;
			 height: 64rpx;
			 border: 2rpx solid #b2b2b2;
			 border-radius: 45rpx;
			 text-align: center;
			 line-height: 64rpx;
			 padding-left: 10rpx;
			 font-size: 28rpx;
			 display: inline-block;
		 }
		 .button{
			 width: 160rpx;
			 height: 64rpx;
			 text-align: center;
			 line-height: 64rpx;
			 display: inline-block;
			 color: $color-system;
			 background:#ffe6dc ;
			 margin-left: 15rpx;
			 border-radius: 45rpx;
		 }
	 }
	 .row-group{
		 .row-text{
		 	display: inline-block;
		 }
		 .row-input{
			width: 50%;
			display: inline-block;
			margin-bottom: 10rpx;
		 }
		 .diyBox{
			margin-right: 60rpx;
		 }
		 
	 }
	 radio .wx-radio-input{
		 border-radius: 50%;
		 width: 36rpx; 
		 height: 36rpx;
	 }
	 checkbox .wx-checkbox-input{
	   border-radius: 50%;
	   width: 36rpx; 
	   height: 36rpx;
	 }
	 /* 选中后的 背景样式 */
	 checkbox .wx-checkbox-input.wx-checkbox-input-checked{
	   background: #E15616;
	 }
	 checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{
	   border-radius: 50%;
	    border: 2rpx solid #e15616;
	   width: 36rpx;
	   height: 36rpx;
	   line-height: 36rpx;
	   text-align: center;
	   font-size:24rpx; 
	   color:#fff;
	   background: transparent;
	   transform:translate(-50%, -50%) scale(1);
	   -webkit-transform:translate(-50%, -50%) scale(1);
	 }
	 .info{
		 margin: 20rpx 0;
		 textarea{
			width: 680rpx;
			height: 200rpx; 
			border: 2rpx solid #b2b2b2;
			border-radius: 6rpx;
			font-size: $font-size-28;
			padding: 10rpx;
			margin: auto;
			line-height: 48rpx;
		 }
	 }
	 .wrap-Btn{
		 margin:100rpx auto;
		 .confirmBbtn{
			 width: 600rpx;
			 height: 90rpx;
			 line-height: 90rpx;
			 text-align: center;
			color: #fff;
			background:$btn-confirm;
			border-radius: 45rpx;
		 }
	 }
</style>