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">
					<view class="radio" v-for="(item,index) in typename" :key="index" @click="firstShopTypeRidio(item)" :class="firsttype==item.value?'active':''">
						<label class="iconfont" :class="firsttype==item.value?'icon-yixuanze':'icon-weixuanze'"></label>{{item.name}}
					</view>
				</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="info-title">资质</view>
				<view class="uploadImage">
					 <!-- <view class="form-upload-image"  >
						   <image class="upload-img" src="https://admin-b.caimei365.com/userfiles/1/images/photo/2020/11/15.jpg" alt=""  @click="showViewerbigImage()"></image>
						   <i class="iconfont icon-shanchu1" @click="deleteMedicalImage()"></i>
					 </view> -->
					 <view class="formLine-file" >
						   <input ref="medicalPracticeLicenseImg1" class="file" type="file" accept="image/png,image/jpeg,image/gif,image/jpg"  @change="uploadzizhiImageFn">
						   <view class="file-zizhi"></view>
					  </view>
				</view>
			</view>
			
		</view>
		
		<view class="wrap-image">
			<view class="row">
				<view class="info-title">资质证明</view>
			</view>
			
		</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'}
				]
				
			}
		},
		methods:{
			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;
		}
		.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;
			.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;}
	 .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;
			 }
			 .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{
		.info-title{
			padding-left: 24rpx;
			font-size: $font-size-28;
			color: #999999;
		} 
	 }
</style>