caimei-applets-mcare/pages/goods/instrument-details.vue

<template>
	<view class="product">
		<custom-p   v-if="isHeaderPoduct"
					:systeminfo='systeminfo' 
					:navbar-data='nvabarData' 
					:headerBtnPosi ="headerBtnPosi" 
					:headerColor="headerColor" 
					:type="isShareType"
					:page='backPage'>
		</custom-p>
		<tui-skeleton v-if="skeletonShow" backgroundColor="#fafafa" borderRadius="10rpx" :isLoading	="true" :loadingType="5"></tui-skeleton>
		<view class="container-product tui-skeleton">
			<view class="product-top">
				<view class="banner-section">
					<uni-swiper-dot :info="productImage" :current="current" field="content" :mode="mode" >
						<swiper class="banner tui-banner tui-skeleton-rect"  @change="swiperChange" :duration='800' :autoplay="false" :circular="true" >
							<swiper-item v-for="(item, index) in productImage" :key="index" class="banner-item"> 
								<image :src="item" @click="previewImg(index)" class="product-img" />
							</swiper-item>
						</swiper>
						<view class="swiper__dots-box">
							<tui-tag padding="12rpx 24rpx" type="translucent" shape="circleLeft" size="32rpx" :scaleMultiple="0.82" originRight>{{ current + 1 }}/{{ productImage.length }}</tui-tag>
						</view>
					</uni-swiper-dot>
				</view>
				<view class="product-parameter" @click="showPopup">
					<view class="view">
						<text class="title">仪器信息</text>
						<text class="iconfont icon-xiangyou"></text>
					</view>
				</view>
				<view class="product-message clearfix">
					<view class="msg-pin clearfix"  v-for="(label, idx) in firstFloorList" :key="idx">
						<view class="label">{{ label.name }}:</view>
						<view class="label-li">
							<text>{{ label.content ? label.content : '暂无' }}</text>
						</view>
					</view>
				</view>			
			</view>
			<view class="product-details">
				<view  class="navbar">
					<view class="nav-item tui-skeleton-fillet" v-for="(tab, index) in crmDetailList" :key="index"  :class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">
						<text>{{ tab.name }}</text>
						<text class="line"></text>
					</view>
				</view>	
	
			</view>	
			<view class="product-details service" v-show="tabCurrentIndex == 0">
				<view class="content tui-banner product-rich-text tui-skeleton-rect">
					<mp-html :content="html" :tag-style="tagStyle" />
				</view>
			</view>	
			<view class="product-details service" v-show="tabCurrentIndex == 1">
				<view class="content service" v-if="crmDetailList[tabCurrentIndex].content">
					{{ crmDetailList[tabCurrentIndex].content ? crmDetailList[tabCurrentIndex].content : '' }}
				</view>
				<view class="content service">
					<view class="content-none">暂无内容</view>
				</view>
			</view>	
			<view class="product-details service" v-show="tabCurrentIndex == 2">
				<view class="content service" v-if="crmDetailList[tabCurrentIndex].content">
					{{ crmDetailList[tabCurrentIndex].content ? crmDetailList[tabCurrentIndex].content : '' }}
				</view>
				<view class="content service">
					<view class="content-none">暂无内容</view>
				</view>
			</view>	
			<view class="product-details recommend">
				<!-- 相关推荐 -->
				<view class="instrument-recommend-cell" v-for="(floor, index) in floorList" :key="index">
					<view class="title">
						<view class="title-tab">{{ floor.title }}</view>
					</view>
					<view class="content hot">
						<recommend :list="floor.floorData" v-if="isRequest"></recommend>
					</view>
				</view>
			</view>	
			<view class="product-details contact clearfix">
				<!-- 联系 -->
				<view class="instrument-contact-title">
					<image src="https://static.caimei365.com/app/img/icon/icon-title-bg.png" mode=""></image>
				</view>
				<view class="instrument-contact-cell">
					<view class="cell-icon">
						<image src="https://static.caimei365.com/app/img/icon/icon-kefus.png" mode=""></image>
					</view>
					<view class="cell-text">
						<view class="cell-text-p">0755-22907771转806</view>
						<view class="cell-text-p">15338851365</view>
					</view>
				</view>
				<view class="instrument-contact-cell">
					<view class="cell-icon">
						<image src="https://static.caimei365.com/app/img/icon/icon-phone.png" mode=""></image>
					</view>
					<view class="cell-text">
						<view class="cell-text-p">产品设备：18948339365</view>
						<view class="cell-text-p">商务合作：17318032647</view>
					</view>
				</view>
			</view>	
			<!-- 仪器信息 -->
			<tui-bottom-popup :radius="true" :show="popupShow" @close="hidePopup()">
				<view class="tui-popup-box clearfix">
					<view class="title">{{ secondFloorList[0].name }}</view>
					<view class="content">
						<view class="content-tr"  v-for="(item, index) in secondFloorList" :key="index">
							<view class="content-td">{{ item.name }}:</view>
							<view class="content-th">{{ item.content ? item.content : '暂无' }}</view>
						</view>
					</view>
					<view class="tui-right-flex tui-popup-btn" :style="{ paddingBottom :isIphoneX ? '68rpx' : '0rpx' }">
						<view class="tui-flex-1">
							<view class="tui-button" @click="hidePopup()">收起</view>
						</view>
					</view>
				</view>	
			</tui-bottom-popup>	
			<!-- 侧边 -->
			<scroll-top :isScrollTop="isScrollTop" :bottom="200"></scroll-top>
		</view>
	</view>
</template>

<script>
	import { mapState,mapMutations } from 'vuex'
	import authorize from '@/common/config/authorize.js'
	import customP from '@/components/cm-custom/custom-p.vue' 		 //自定义导航
	import recommend from "./components/instrument-recommend" //相关推荐
	import wxLogin from "@/common/config/wxLogin.js"
	import { productTagStyle } from '@/plugins/mp-html/config.js'
	var isPreviewImg;
	export default{
		components:{
			customP,
			recommend,
		},
		data(){
			return{			
				html:'<div style="text-align: center;color:#333333;">暂无内容</div>',
				tagStyle: productTagStyle,
				disabledTabNavList:[{name:'相关推荐'}],
				mode:'round',
				iconClass:'icon-aixin',
				iconColor:'#ff9100',
				specClass: '',//规格弹窗css类，控制开关动画
				isBtnType:'',
				isRequest:false,
				isScrollTop:false,
				current:0,
				isShareType:'',
				isHeaderPoduct:false,
				isRecommend:false,
				isRarameter:true,
				isService:false,
				isEvaluate:false,
				skeletonShow:true,
				tabCurrentIndex:0,
				userID:'',
				equipmentId:0,
				userIdentity:'',//用户类型
				productImage:[],
				floorList:[],
				secondFloorList:[],//仪器信息
				firstFloorList:[],//项目基本信息
				crmDetailList:[],//项目详情
				headerBtnPosi:	this.setHeaderBtnPosi(), //获取设备顶部胶囊高度
				systeminfo: this.setSysteminfo(),		 //获取设备信息
				isIphoneX:this.$store.state.isIphoneX,
				windowHeight: '',
				headerColor:false,
				backPage:1,
				nvabarData: {							 //顶部自定义导航
					showCapsule: 1, // 是否显示左上角图标   1表示显示    0表示不显示
					title: ''		// 导航栏 中间的标题
				},
				linkPath:'',
				popupShow:false,//参数弹窗
				description:''
			}
		},
		computed: {
			...mapState(['hasLogin','isWxAuthorize'])
		},
		onLoad(option) {
			this.equipmentId = option.id;//获取商品ID
			this.isShareType = option.type
			this.linkPath = option.path
			this.isHeaderPoduct = true
			if(option.page == 2){
				this.backPage = option.page
			}
			if(this.isShareType =='share'){
				wxLogin.wxLoginAuthorize()
			}
		},
		methods:{
			initData(){// 初始化商品详情查询
				this.ProductService.GetEquipmentDetails({equipmentId:this.equipmentId}).then(response =>{	
					let data = response.data 
					let pageMap = data.pageContentMap
					this.description = pageMap.description
					this.secondFloorList = pageMap.secondFloorList
					this.firstFloorList = pageMap.firstFloorList
					this.crmDetailList = pageMap.pcDetailList
					this.html = this.$api.adaptRichTextImg(this.crmDetailList[0].content)
					this.floorList = data.floorList
					this.skeletonShow = false
					this.productImage=[];
					this.productImage.push(data.image);
					console.log(this.productImage)
					this.isRequest = true
				}).catch(error =>{
					this.$util.msg(error.msg,2000);
				})
			},
			swiperChange(e) {//顶部商品图片切换
				const index = e.detail.current;
				this.current = index;
			},
			previewImg (index) {//顶部商品图片预览
				isPreviewImg = true
				let previewUrls = this.productImage
				uni.previewImage({
					current: index, 	//图片索引
					urls: previewUrls, //必须是http图片，本地图片无效
					longPressActions:''
				})
			},
			tabClick(index) {//商品详情&&供应商信息tab切换
				console.log(index)
				this.tabCurrentIndex = index;
				switch(index){
					case 1:
						this.isRarameter = true
						break;
					case 2:
						this.isService = true
						break;
					case 3:
						this.isRecommend = true
						break;
				}
			},
			setHeaderBtnPosi(){
				// 获得胶囊按钮位置信息
				let headerBtnPosi = uni.getMenuButtonBoundingClientRect();
				return headerBtnPosi
			},
			setSysteminfo(){
				let systeminfo;
				uni.getSystemInfo({ // 获取设备信息
					success: (res) => {
						systeminfo = res
					},
				})
				return systeminfo
			},
			showPopup(){
				this.popupShow = true
			},
			hidePopup(){
				this.popupShow = false
			}
		},
		onPageScroll(e){//实时获取到滚动的值
			if(e.scrollTop>50){
				this.headerColor = true
				this.nvabarData={							
					showCapsule: 1, 
					title: '商品详情', 		
				}
			}else{
				this.headerColor = false
				this.nvabarData={
					showCapsule: 1, 
					title: '', 		
				}
			}
			if(e.scrollTop>700){
				this.isScrollTop = true
			}else{
				this.isScrollTop = false
			}
		},
		onShareAppMessage(res){//分享转发
			if (res.from === 'button') {
		      // 来自页面内转发按钮
		    }
			return {
			  title: `${this.description}`,
			  path: `pages/goods/instrument-details?id=${this.equipmentId}`,
			  imageUrl:`${this.productImage[0]}`
			}
		},
		onShow() {
			this.$api.getStorage().then((resolve) => {
				this.userID = resolve.userId ? resolve.userId : '';	
				this.userIdentity = resolve.userIdentity ? resolve.userIdentity : 3
				if (isPreviewImg) {
					isPreviewImg = false;
					return;
				} else {
					this.initData();
				}
			}).catch(error =>{
				this.initData();
			})
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #FFFFFF;
	}
	.productRemarks{
		height: 36rpx;
		margin: 8rpx 0;
		width: 100%;
		float: left;
		.text{
			display: inline-block;
			padding: 0 18rpx;
			line-height: 32rpx;
			font-size: 20rpx;
			color: #FF2A2A;
			text-align: center;
			border-radius: 4rpx;
			background: #FFFFFF;
			border: 1px solid #FF2A2A;
			float: left;
			opacity: 0.8;
		}
	}
	.banner-section{
		width: 100%;
		height: 750rpx;
		position: relative;
	}	
	.banner{
		width: 100%;
		height: 750rpx;
		.product-img{
			width: 750rpx;
		}
		image {
			width: 100%;
			height: 100%;
		}
	}
	.swiper__dots-box{
		position: absolute;
		color: #fff;
		bottom: 30rpx;
		right: 0;
	}
	.product-message{
		width: 100%;
		height: auto;
		box-sizing: border-box;
		padding: 0 24rpx;
		margin-top: 24rpx;
		.msg-pin{
			width: 100%;
			height: auto;
			margin-bottom: 16rpx;
			.label{
				float: left;
				line-height: 48rpx;
				font-size: $font-size-28;
				color: #999999;
			}
			.label-li{
				width: 568rpx;
				float: left;
				line-height: 48rpx;
				font-size: $font-size-28;
				color: #333333;
				margin-left: 10rpx;
			}
		}
	}
	.product-parameter{
		width: 100%;
		height: 90rpx;
		padding: 0 24rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;
		position: relative;
		display: flex;
		margin-top: 24rpx;
		.view{
			width: 100%;
			height: 90rpx;
			background-color: #fef6f3;
			position: relative;
			display: flex;
			padding: 0 20rpx;
			.title{
				line-height: 90rpx;
				display: inline-block;
				float: left;
				font-size: $font-size-28;
				color: $color-system;
			}
			.icon-xiangyou{
				line-height: 90rpx;
				display: inline-block;
				position: absolute;
				width: 48rpx;
				top: 0;
				right: 0;
				color: $color-system;
			}
		}
	}
	.product-details {
		width: 100%;
		background: #FFFFFF;
		.content{
			&.service{
				text-align: justify;
				font-size: $font-size-26;
				color: #666666;
			}
			.content-none{
				width: 100%;
				height: 80rpx;
				line-height: 80rpx;
				font-size: $font-size-26;
				color: #999999;
				text-align: center;
			}
		}
		&.recommend{
			background-color: #F7F7F7;
			border-bottom: none;
			.title{
				.title-tab{
					background-color: #F7F7F7;
					color: $text-color;
					
				}
			}
		}
		&.contact{
			width: 100%;
			box-sizing: border-box;
			background-color: #FFFFFF;
			padding:24rpx;
			.instrument-contact-title{
				width: 100%;
				height: 40rpx;
				margin-bottom: 30rpx;
				image{
					width: 100%;
					height: 100%;
					display: block;
				}
			}
			.instrument-contact-cell{
				width: 100%;
				height: 72rpx;
				float: left;
				box-sizing: border-box;
				padding: 0 150rpx;
				margin-bottom: 24rpx;
				.cell-icon{
					width: 72rpx;
					height: 72rpx;
					float: left;
					image{
						width: 100%;
						height: 100%;
						display: block;
					}
				}
				.cell-text{
					width: 330rpx;
					height: 72rpx;
					float: left;
					box-sizing: border-box;
					padding-left: 15rpx;
					.cell-text-p{
						width: 100%;
						height: 36rpx;
						line-height: 36rpx;
						font-size: $font-size-24;
						color: $text-color;
						text-align: left;
						float: left;
					}
				}
			}
		}
		.title{
			width: 100%;
			box-sizing: border-box;
			padding: 0 24rpx;
			.title-tab{
				width: 100%;
				height: 100rpx;
				background: #fff;
				z-index: 10;
				font-size: $font-size-30;
				text-align: center;
				color: $text-color;
				line-height: 100rpx;
				font-weight: 600;
			}
			.title-msg{
				width: 100%;
				height: 236rpx;
				padding: 18rpx;
				background-color: rgba(225,86,22, 0.1);
				color: $color-system;
				box-sizing: border-box;
				margin-bottom: 30rpx;
				.tit{
					line-height: 46rpx;
					font-size: $font-size-24;
					text-align: left;
				}
				.txt{
					line-height: 38rpx;
					font-size: $font-size-20;
					text-align: justify;
				}
			}
		}
		.navbar {
			width: 702rpx;
			height: 96rpx;
			padding: 0 24rpx;
			background: #fff;
			z-index: 10;
			display: flex;
			border-top: 20rpx solid #F7F7F7;
			padding-bottom: 20rpx;
			&.fixed{
				position: fixed;
				left: 0;
			}
			.nav-item {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 96rpx;
				font-size: $font-size-28;
				color: $text-color;
				position: relative;
				float: left;
				position: relative;
				padding: 0 15rpx;
				margin-right: 20rpx;
				.line{
					width: 40rpx;
					height: 2px;
					border-radius: 1px;
					background: #FFFFFF;
					position: absolute;
					bottom: 0;
					left: 50%;
					margin-left: -20rpx;
				}
				&.current{
					color:$color-system;
					font-weight: bold;
					.line{
						background: $color-system;
					}
				}
			}
		}
		.content{
			width: 100%;
			background-color: #FFFFFF;
		}
	}
	.isLower{
		width: 100%;
		height: 116rpx;
		line-height: 116rpx;
		text-align: center;
		color: #000000;
		font-size: $font-size-32;
		font-weight: bold;
	}
	.uni-badge--small {
		-webkit-transform: scale(.8);
		-ms-transform: scale(.8);
		transform: scale(.8);
		-webkit-transform-origin: center center;
		-ms-transform-origin: center center;
		transform-origin: center center;
	}
	.uni-badge {
		font-family: 'Helvetica Neue', Helvetica, sans-serif;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		font-size: 12px;
		line-height: 1;
		display: inline-block;
		padding: 3px 6px;
		color: #333;
		border-radius: 100px;
		background-color: #f1f1f1;
	}
	.uni-badge-error {
		color: #fff;
		background-color: #dd524d;
	}
	.tui-popup-box {
		position: relative;
		box-sizing: border-box;
		min-height: 220rpx;
		padding:0rpx 55rpx;
		.title{
			font-size: $font-size-34;
			color: $text-color;
			line-height: 88rpx;
			text-align: center;
			float: left;
			width: 100%;
			height: 88rpx;
		}
		.content{
			width: 100%;
			height: auto;
			float: left;
			.content-tr{
				width: 100%;
				height: auto;
				line-height: 58rpx;
				display: flex;
				.content-td{
					display: flex;
					font-size: $font-size-28;
					color: #999999;
					line-height: 58rpx;
					text-align: left;
				}
				.content-th{
					display: flex;
					flex: 7;
					font-size: $font-size-28;
					color: #666666;
					line-height: 58rpx;
					text-align: left;
					padding-left: 20rpx;
					box-sizing: border-box;
				}
			}
		}
	}
	.tui-popup-btn {
		width: 100%;
		height: auto;
		float: left;
		margin-top: 24rpx;
		.tui-button{
			width: 100%;
			height: 88rpx;
			background: $btn-confirm;
			line-height: 88rpx;
			text-align: center;
			color: #FFFFFF;
			font-size: $font-size-28;
			border-radius: 44rpx;
		}
	}
	/*富文本样式*/
	rich-text.p{
		width: 702rpx !important;
		padding: 0 24rpx;
		text-align: justify;
	}
	rich-text.img{
		width: 100%;
		height: auto;
	}
</style>