caimei-applets-caimei/components/cm-module/supplier/supplierDetails.vue

<template name="supplier">
	<!-- 供应商信息 -->
	<view class="supplier clearfix">
		<view class="product-supplier" @click="goSupplier">
			<view class="logo"><img :src="shopData.logo ? shopData.logo : 'http://static-b.caimei365.com/app/img/icon/icon-shoplogo.png'" alt=""></view>
			<view class="main">
				<view class="name">{{ shopData.name }}</view>
				<view class="massgs">
					<view class="label">满意度:</view>
					<view class="p-stars">
						<uni-stars :stars="6" :iconClass="iconClass" :iconColor="iconColor" :fontSize="36" :widthInfo="176"></uni-stars>
					</view>
				</view>
			</view>
		</view>
		<view class="sup-msg massage-t">
			<view class="sup-conte">
				<view class="conte-l">
					<text class="tit-l">经营范围:</text>
				</view>
				<view class="conte-r" v-if="shopData.businessScopeArr.length>0">
					<text class="age" v-for="(item,idx) in shopData.businessScopeArr" :key="idx">{{item}}</text>
				</view>
				<view class="conte-r" v-else>
					<text class="tit">暂无</text>
				</view>
			</view>
		</view>
		<view class="sup-msg massage-t">
			<view class="sup-h1">
				<text class="line">公司介绍</text>
			</view>
			<view class="sup-p" :class="[shopData.info == null ? 'center' : '']">
				{{shopData.info ? shopData.info : '暂无内容' }}
			</view>
		</view>
		<view class="sup-msg massage-t">
			<view class="sup-h1">
				<text class="line">主打系列产品说明</text>
			</view>
			<view class="sup-p" :class="[shopData.productDesc == null ? 'center' : '']">
				{{shopData.productDesc == null ? '暂无内容' : shopData.productDesc}}
			</view>
		</view>
		<view class="sup-msg massage-t" v-if="shopData.businessLicense!=null">
			<view class="sup-h1">
				<text class="line">营业执照</text>
			</view>
			<view class="sup-img">
				<image :src="shopData.businessLicense" mode="aspectFill" @click="previewImg(shopData.businessLicense)"></image>
			</view>
		</view>
		<view class="sup-msg massage-t" v-if="shopData.medicalPracticeLicenseImg1!=null">
			<view class="sup-h1">
				<text class="line">公司资质</text>
			</view>
			<view class="sup-imgList clearfix">
				<view class="img"><image :src="shopData.medicalPracticeLicenseImg1" mode="" @click="previewImg(shopData.medicalPracticeLicenseImg1)"></image></view>
				<view class="img"><image :src="shopData.medicalPracticeLicenseImg2" mode="" @click="previewImg(shopData.medicalPracticeLicenseImg2)"></image></view>
				<view class="img"><image :src="shopData.medicalPracticeLicenseImg3" mode="" @click="previewImg(shopData.medicalPracticeLicenseImg3)"></image></view>
			</view>
		</view>
		<view class="sup-msg massage-t" v-if="shopData.certificate!=null">
			<view class="sup-h1">
				<text class="line">授权牌照</text>
			</view>
			<view class="sup-img">
				<image :src="shopData.certificate" mode="aspectFill" @click="previewImg(shopData.certificate)"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import uniGrader from '@/components/uni-grade/uni-grade.vue'
	export default{
		name:'supplier',
		components:{
			uniGrader
		},
		props:{
			shopId:{
				type:Number
			}
		},
		data() {
			return{
				shopData:{},
				iconClass:'icon-aixin',
				iconColor:'#ff9100',
			}
		},
		created() {
			this.GetSupplierHomeDeatils(this.shopId)
		},
		onLoad(){

		},
		methods:{
			previewImg(url){
				let mentuzArray = []
				mentuzArray.push(url)
				uni.previewImage({
					urls: mentuzArray,
					current: 0
				});
			},
			GetSupplierHomeDeatils(shopId){//供应商详情
				this.ShopService.GetSupplierHomeDeatils({supplierId:shopId}).then(response =>{
					this.shopData = response.data
					console.log(this.shopData)
				}).catch(error =>{
					this.$util.msg(error.msg,2000)
				})
			}
		},
		onShow(){
	
		}
	}
</script>

<style lang="scss">	
page{
	background: #FFFFFF;
}
.supplier{
	width: 100%;
	.sup-msg{
		width: 100%;
		padding: 24rpx 0;				
		.sup-h1{
			height: 80rpx;
			line-height: 80rpx;
			font-size: $font-size-28;
			color: $text-color;
			text-align: left;
			font-weight: bold;
			.line{
				position: relative;
			}
		}
	}
	.product-supplier{
		width: 100%;
		height: 140rpx;
		padding:30rpx 24rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;
		position: relative;
		box-sizing: border-box;
		.logo{
			width: 128rpx;
			height: 92rpx;
			float: left;
			border: 1px solid #efefef;
			border-radius: 6rpx;
			image{
				width: 100%;
				height: 100%;
				display: block;
				border-radius: 6rpx;
			}
		}
		.main{
			width: 470rpx;
			height: 92rpx;
			float: left;
			margin-left: 20rpx;
			.name{
				width: 100%;
				line-height: 46rpx;
				float: left;
				font-size: $font-size-28;
				color: $text-color;
				float: right;
				overflow: hidden;
				text-overflow:ellipsis;
				white-space: nowrap;
				text-align: left;
			}
			.massgs{
				width: 100%;
				line-height: 46rpx;
				float: left;
				font-size: $font-size-24;
				color: #999999;
				.label{
					float: left;
				}
				.p-stars{
					float: left;
					margin-left: 20rpx;
				}
			}
		}
	}
	.massage-t{
		width: 702rpx;
		padding:0 24rpx;
		height: auto;
		background: #FFFFFF;
		.sup-title{
			width: 100%;
			height: 40rpx;
			margin-top: 24rpx;
			text-align: left;
			display: inline-block;						
			line-height: 40rpx;
			font-size: $font-size-28;
			color: $text-color;
			.tit-l{
				width: 142rpx;
				display: inline-block;
			}
		}
		.sup-stars{
			width: 100%;
			height: 40rpx;
			margin-top: 24rpx;
			text-align: left;
			display: inline-block;						
			line-height: 40rpx;
			font-size: $font-size-28;
			color: $text-color;
			.tit-l{
				width: 114rpx;
				display: inline-block;
				text-align: right;
				float: left;
			}
			.p-stars{
				float: left;
				margin-left: 22rpx;
			}
		}
		.sup-conte{
			width: 100%;
			margin-top: 24rpx;
			.conte-l{
				width: 100%;
				margin-bottom: 15rpx;
				.tit-l{
					text-align: left;
					display: inline-block;						
					line-height: 40rpx;
					font-size: $font-size-28;
					color: $text-color;
					font-weight: bold;
				}
			}
			.conte-r{
				width: 100%;
				.age{
					display: inline-block;
					padding: 0 20rpx;
					background: #86b2fb;
					height: 42rpx;
					line-height: 42rpx;
					text-align: center;
					font-size: $font-size-24;
					color: #FFFFFF;
					border-radius: 6rpx;
					margin-right: 24rpx;
					margin-bottom: 24rpx;
				}
				.tit{
					font-size: $font-size-28;
					color: $text-color;
					line-height: 40rpx;
				}
			}
		}
		.sup-p{
			line-height: 48rpx;
			text-align: left;
			font-size: $font-size-28;
			color: #666666;
			text-indent: 40rpx;
			&.center{
				text-align: center;
			}
		}
		.sup-img{
			width: 100%;
			height: 542rpx;
			padding: 24rpx 0;
			image{
				width: 100%;
				height: 100%;
				display: block;
			}
		}
		.sup-imgList{
			width: 100%;
			height: auto;
			padding: 24rpx 0;
			.img{
				width: 340rpx;
				height: 260rpx;
				float: left;
				margin-right:22rpx;
				margin-bottom: 22rpx;
				&:nth-child(even){
					margin-right: 0;
				}
				image{
					width: 100%;
					height: 100%;
					display: block;
				}
			}
		}
	}
}
</style>