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>
		
		<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,
				addressData:{
					address:'请选择公司所在地区',
					townID:'',			//区ID
					cityID:'',			//区ID
					provinceID:'',		//区ID
					addressDetail: '',	//地址
				},
			}
		},
		methods:{
			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: 440rpx;
			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 ;
	 }
</style>