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

<template name="supplier">
	<!-- 供应商信息 -->
	<view class="supplier clearfix">
		<view class="sup-header">
			<view class="header-img">
				<image :src="shopData.logo" mode=""></image>
			</view>
			<view class="header-txt">
				<text>{{shopData.name}}</text>
			</view>
		</view>
		<view class="sup-msg massage-t">
			<view class="sup-h1">
				<text class="line">公司基本信息</text>
			</view>
			<view class="sup-title">
				<text class="tit-l">公司名称:</text>
				<text >{{shopData.name}}</text>
			</view>
			<view class="sup-stars">
				<text class="tit-l">满意度:</text>
				<view class="p-stars">
					<uni-stars :stars="6" :iconClass="iconClass" :iconColor="iconColor" :fontSize="44" :widthInfo="180"></uni-stars>
				</view>
			</view>
			<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.businessLicenseImage!=null">
			<view class="sup-h1">
				<text class="line">营业执照</text>
			</view>
			<view class="sup-img">
				<image :src="shopData.businessLicenseImage" mode="aspectFill" @click="previewImg(shopData.businessLicenseImage)"></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.authorizationCertificateImage!=null">
			<view class="sup-h1">
				<text class="line">授权牌照</text>
			</view>
			<view class="sup-img">
				<image :src="shopData.authorizationCertificateImage" mode="aspectFill" @click="previewImg(shopData.authorizationCertificateImage)"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import uniStars from '@/components/uni-stars/uni-stars.vue'
	export default{
		name:'supplier',
		components:{
			uniStars
		},
		props:{
			shopId:{
				type:Number
			}
		},
		data() {
			return{
				shopData:{},
				iconClass:'icon-xingxing',
				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">	
.supplier{
	background: #FFFFFF;
	width: 100%;
	.sup-msg{
		width: 100%;
		padding: 24rpx 0;				
		.sup-h1{
			height: 80rpx;
			line-height: 80rpx;
			font-size: $font-size-30;
			color: $text-color;
			text-align: left;
			border-bottom: 1px solid #EFEFEF;
			.line{
				position: relative;
				padding-left: 15rpx;
				&:after{
					content: '';
					width: 6rpx;
					height: 28rpx;
					background: #FFA347;
					position: absolute;
					left: 0;
					top: 6rpx;
				}						
			}
		}
	}
	.sup-header{
		height: 158rpx;
		width: 702rpx;
		padding: 28rpx 24rpx 24rpx 24rpx;
		display: flex;
		background: #FFFFFF;
		.header-img{
			width: 216rpx;
			height: 100%;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.header-txt{
			width:460rpx;
			display: flex;
			align-items: center;
			text{
				display: flex;
				flex: 1;
				margin-left: 26rpx;
				line-height: 40rpx;
				-o-text-overflow: ellipsis;
				text-overflow: ellipsis;
				display: -webkit-box;
				word-break: break-all;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				text-align: left;
				font-size: $font-size-30;
				color: $text-color;
				font-weight: bold;
			}
		}
	}
	.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;
			display: flex;
			.conte-l{
				width: 142rpx;
				.tit-l{
					text-align: left;
					display: inline-block;						
					line-height: 40rpx;
					font-size: $font-size-28;
					color: $text-color;
				}
			}
			.conte-r{
				width: 540rpx;
				.age{
					display: inline-block;
					padding: 0 20rpx;
					background: #FFF6E6;
					height: 42rpx;
					line-height: 42rpx;
					text-align: center;
					font-size: $font-size-24;
					color: #666666;
					border-radius: 6rpx;
					margin-right: 24rpx;
					margin-bottom: 24rpx;
				}
				.tit{
					font-size: $font-size-28;
					color: $text-color;
					line-height: 40rpx;
				}
			}
		}
		.sup-p{
			padding: 24rpx 0;
			line-height: 40rpx;
			text-align: left;
			font-size: $font-size-28;
			color: #666666;
			text-indent: 20rpx;
			&.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>