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 : 'https://static.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">
			<view class="sup-h1"> <text class="line">公司资质</text> </view>
			<view class="sup-imgList clearfix">
				<view class="img" v-if="shopData.medicalPracticeLicense != null"
					><image
						:src="shopData.medicalPracticeLicense"
						@click="previewImg(shopData.medicalPracticeLicense)"
					></image
				></view>
				<view class="img" v-if="shopData.medicalPracticeLicenseImg1 != null"
					><image
						:src="shopData.medicalPracticeLicenseImg1"
						@click="previewImg(shopData.medicalPracticeLicenseImg1)"
					></image
				></view>
				<view class="img" v-if="shopData.medicalPracticeLicenseImg2 != null"
					><image
						:src="shopData.medicalPracticeLicenseImg2"
						@click="previewImg(shopData.medicalPracticeLicenseImg2)"
					></image
				></view>
				<view class="img" v-if="shopData.medicalPracticeLicenseImg3 != null"
					><image
						:src="shopData.medicalPracticeLicenseImg3"
						@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({ shopId: 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>