caimei-applets-caimei/components/module/productDetails/productDetails.vue

<template name="product">
	<!-- 商品详情顶部组件 -->
	<view class="product-content">
		<view class="banner-section">
			<uni-swiper-dot :info="productImage" :current="current" field="content" :mode="mode" >
				<swiper class="banner" circular @change="swiperChange" :autoplay="false" :circular="false" >
					<swiper-item v-for="(item, index) in productImage" :key="index" class="banner-item"> 
						<image :src="item" @tap="previewImg" />
					</swiper-item>
				</swiper>
				<view class="swiper__dots-box">
					<view v-for="(item,idx) in productImage" 
						  :key="idx" 
						  :class="[idx===current?'swiper__dots-long':'none']" 
						  :data-index="current" class="swiper__dots-item" />
				</view>
			</uni-swiper-dot>
		</view>
		<view class="product-wrap clearfix">
			<view class="wrap-top">
				<view class="p-title">
					{{_data.name}}
				</view>
				<view class="p-price">
					<text class="txt sm">￥</text>
					<text class="txt big">{{_data.retailPrice}}</text>
					<text class="txt sm">{{_data.smallMoney== '0'?'.00':_data.smallMoney}}</text>
				</view>
			</view>
			<view class="wrap-label">
				<view class="label-a" v-for="(label,index) in  _data.tagsList" :key="index">{{label}}</view>
			</view>
			<view class="wrap-info">
				<view class="info-viewL">
					<view class="info-f">品牌：<text>{{_data.brandName}}</text></view>
					<view class="info-f">库存：<text>{{_data.stock}}</text></view>
				</view>
				<view class="info-viewR">
					<view class="info-f">包装规格：<text>{{_data.unit}}</text></view>
					<view class="info-f">起订量：<text>{{_data.minBuyNumber}}</text></view>
				</view>
			</view>
			<view class="wrap-seve">
				<text>服务：</text>
				<text class="iconfont icon-dui"><text class="text">无忧退货</text></text>
				<text class="iconfont icon-dui"><text class="text">快速退款</text></text>
				<text class="iconfont icon-dui"><text class="text">正品保证</text></text>
			</view>
		</view>
		<!-- 底部按钮 -->
<!-- 		<bottom-menu 
				:cartCount='cartCount' 
				:disabled="productData.validFlag"  
				@showSpec='handleShowSpec'>
		</bottom-menu> -->
		<!--底部选择模态层弹窗组件 -->	
<!-- 		<popup-goods 
				ref="popupGoods" 
				:product ="product" 
				:retailPrice="retailPrice"
				:smallMoney="smallMoney"
				:number = "minBuyNumber"
				@numberChang='handlNumberChang'>
		</popup-goods> -->
	</view>
</template>

<script>
	import popupGoods from '@/components/module/popupGoods/popupGoods.vue' //底部确认选择商品及数量弹窗
	import bottomMenu from '@/components/module/bottomMenu/bottomMenu.vue' //底部按钮	
	export default{
		components:{
			popupGoods,
			bottomMenu
		},
		name:'product',
		props:{
			productDetails:Object
			// retailPrice:{
			// 	type:String,
			// 	value:'0'
			// },
			// smallMoney:{
			// 	type:String,
			// 	value:'0'
			// },
			// minBuyNumber:{
			// 	type:Number,
			// 	value:0
			// },
			// cartCount:{
			// 	type:Number,
			// 	value:0
			// }
		},
		data() {
			return{
				mode:'round',
				current:0,
				productData:'',
				productImage:'',
				products:this.productDetails,
				banner:[
					"https://img.caimei365.com/group1/M00/02/6D/Cmis21xFeHGAIyUTAAPeRga1_H464.JPEG",
					"https://img.caimei365.com/group1/M00/00/A7/Cmis2Frj6iSABfMEAAUuHrw9zu404.JPEG",
					"http://admin2.caimei365.com/uploadFile/product/2019-11-06/9DZYQ9MMMX20191106174856.png",
					"https://img.caimei365.com/group1/M00/01/14/Cmis21ujYMWAcnSLAAXdIAYzR9o49.JPEG",
				],
			}
		},
		created() {
			this.getOrganizeProducts()
		},
		methods:{
			getOrganizeProducts(){
				console.log(this.products)
			},
			//轮播图切换
			swiperChange(e) {
				const index = e.detail.current;
				this.current = index;
				// console.log(this.product.current)
			},
			//预览图片
			previewImg () {
				let previewUrls = this.product.banner
				// console.log( previewUrls)
				uni.previewImage({
						current: 0, //图片索引
						urls: previewUrls, //必须是http图片，本地图片无效
						longPressActions:''
				})
			},
			handleShowSpec(data){
				this.$refs.popupGoods.showSpec(data);
			}
		},
		onShow(){
	
		}
	}
</script>

<style lang="scss">	
.banner-section{
	width: 100%;
	height: 750rpx;
	position: relative;
	border-bottom: 1px solid #EBEBEB;
}	
.banner{
	width: 100%;
	height: 750rpx;
	image {
		width: 100%;
		height: 100%;
	}
}
.swiper__dots-box{
	position: absolute;
	bottom: 24px;
	right: 24rpx;
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex: 1;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	height: 12rpx;
	padding: 10rpx;
	background: rgba(174,174,174,0.6);
	border-radius:16rpx;
	.swiper__dots-item{
		width: 12rpx;
		height: 12rpx;
		border-radius: 100%;
		margin: 6rpx;
		background: rgba(62,62,62,1);
	}
	.none{
		background:#FFFFFF;
	}
	.swiper__dots-long{
		background: rgba(62,62,62,1);
		transition: all 0.1s;
	}
}
.product-wrap{
	width: 702rpx;
	height: auto;
	padding: 24rpx;
	margin-bottom: 24rpx;
	background-color: #FFFFFF;
	.wrap-top{
		width: 100%;
		height: 146rpx;
		float: left;
		.p-title{
			line-height: 40rpx;
			font-size: $font-size-28;
			color: $text-color;
			-o-text-overflow: ellipsis;
			text-overflow: ellipsis;
			display: -webkit-box;
			word-break: break-all;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			margin-bottom: 24rpx;
		}
		.p-price{
			height: 44rpx;
			line-height: 44rpx;
			.txt{
				color: #FF2A2A;
				margin:0 2rpx;
			}
			.txt.sm{
				font-size: $font-size-24;
			}
			.txt.big{
				font-size: $font-size-32;
			}
		}
	}
	.wrap-label{
		float: left;
		width: 100%;
		padding: 24rpx 0;
		.label-a{
			padding: 0 18rpx;
			line-height: 40rpx;
			font-size: $font-size-24;
			color: #FFFFFF;
			text-align: center;
			border-radius: 20rpx;
			background:linear-gradient(333deg,rgba(255,171,158,1) 0%,rgba(236,106,93,1) 100%);
			margin: 0 22rpx 22rpx 0;
			display: inline-block;
		}
	}
	.wrap-info{
		width: 100%;
		display: flex;
		.info-viewL{
			flex: 5;
			
		}
		.info-viewR{
			flex: 5;
		}
		.info-f{
			font-size: $font-size-28;
			color: $text-color;
			line-height: 40rpx;
			margin-bottom: 24rpx;
			text-align: left;
			-o-text-overflow: ellipsis;
			text-overflow: ellipsis;
			display: -webkit-box;
			word-break: break-all;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			overflow: hidden;
		}

	}
	.wrap-seve{
		width: 100%;
		height: 96rpx;
		line-height: 96rpx;
		font-size: $font-size-28;
		color: $text-color;
		.iconfont{
			color: $color-system;
			margin-left: 16rpx;
		}
		.text{
			font-size: $font-size-24;
			color: $text-color;
			margin-left: 16rpx;
		}
	}
}
</style>