资料

services/shop.service.js

@@ -54,4 +54,8 @@ export default class ShopService {
 	ShopCancelShipment (data = {}) {
 		return this.AjaxService.post({ url:'/supplier/cancelShipment', data, isLoading: true })
 	}
+	/* 资料信息-数据回显 */
+	shopInfo (data = {}) {
+		return this.AjaxService.post({ url:'/supplier/shopInfo', data, isLoading: true })
+	}
 }

supplier/pages/user/information.vue

@@ -64,10 +64,12 @@
 			<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>
+				 <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':''">
@@ -75,42 +77,157 @@
 				 </view>
 			</view>
 			<view class="zizhi" v-if="issecondshow">
-				<view class="info2-title">资质</view>
+				<view class="info2-title zizhi-title">资质</view>
 				<view class="uploadImage">
-					 <view class="form-upload-image"  v-if="medicalPracticeLicenseImg1!=''">
-						   <image class="upload-img" :src="medicalPracticeLicenseImg1" alt="" ></image>
+					 <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">主营内容</view>
+				<view class="info2-title business-title">主营内容</view>
 				<view class="business-info">
-					<view class="">
-					   <view v-for="(pro,index) in mentuzCampNullList" :key="index" class="diyBox second">
-						  <label class="iconfont icon-weixuanze"></label>{{pro.name}}
-					   </view>
-					 </view>
+					 <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"
@@ -158,16 +275,103 @@
 					{value:'2',name:'仪器'},
 					{value:'3',name:'服务'}
 				],
-				medicalPracticeLicenseImg1:'',
+				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:{
-			uploadzizhiImageFn(event){//上传商品图片
+			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.medicalPracticeLicenseImg1 = JSON.parse(res.data).data;
+						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 = '';
@@ -233,6 +437,9 @@
 			color: #666666;
 			line-height: 90rpx;
 			float: left;
+			&.Code{
+				width: 170rpx;
+			}
 		}
 		.row-input{
 			width: 520rpx;
@@ -243,6 +450,9 @@
 			float: left;
 			height: 90rpx;
 			margin-left: 50rpx;
+			&.Code{
+				width: 470rpx;
+			}
 			.icon-xiayibu{
 				position: absolute;
 				right: 0;
@@ -261,7 +471,7 @@
 		font-size: $font-size-28;
 		padding-top: 20rpx;
 	}
-	 input[type="text"]::placeholder,textarea::placeholder {color: #b2b2b2;}
+	 input[type="text"]::placeholder,textarea::placeholder {color: #b2b2b2;font-size: $font-size-28;}
 	 .info-email{
 		 color: #fea785;
 		 font-size: $font-size-20;
@@ -311,9 +521,26 @@
 	 .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: 270rpx;
-				 height: 200rpx;
+				 width: 256rpx;
+				 height:180rpx; 
 				 position: relative;
 				 .upload-img{
 					 width: 100%;
@@ -330,11 +557,74 @@
 			 .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;}
 			 }
 		 }
 	 }
@@ -342,21 +632,20 @@
 	 .business-info{
 		 float: left;
 		 margin-left: 60rpx;
-		 .diyBox{
-			 display: inline-block;
-			 margin-right: 60rpx;
-			 .iconfont{
-				 margin-right: 14rpx;
-				 color: #b2b2b2;
-				 font-size: $font-size-36;
-			 }
-		  }
+		 width: 550rpx;
 		 }
 	 .info2-title{
-	 	padding-left: 24rpx;
+	 	padding: 0 0 24rpx 24rpx;
 	 	font-size: $font-size-28;
 	 	color: #666666;
-		float: left;
+		&.zizhi-title{
+			padding: 24rpx;	
+			 &.hoor{padding: 24rpx 24rpx 0 24rpx;}
+			 }
+			 &.business-title{
+			 float: left;
+		 }
+		 
 	 }
 	 .addbusiness{
 		 margin: 20rpx 0;
@@ -380,8 +669,73 @@
 			 color: $color-system;
 			 background:#ffe6dc ;
 			 margin-left: 15rpx;
-			  border-radius: 45rpx;
+			 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>