zkcommon_course/pages_company/order/productShowDetails.vue

<template>
	<view class="content">
		<!-- 商品轮播图片 -->
		<view class="shop-banner" @click="showImg()">
			<swiper
				class="swiper" 
				:indicator-dots="false" 
				:circular="true" 
				:autoplay="true" 
				:interval="3000" 
				:duration="1000"
				indicator-color="rgba(255, 255, 255, 0.6)"
				indicator-active-color="#ffffff"
				@change="swiperChange"
			>
				<swiper-item  class="swiper-item" v-for="(item,index) in  banner" :key="index">
					<image :src="item" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
			<!-- 底部遮罩 -->
			<view class="banner-mask"></view>
			<!-- 数量 -->
			<view class="num-box">{{ activeBanner }}/{{ banner.length }}</view>
		</view>
		<!-- 详细信息 -->
		<view class="det-info">
			<view class="price-box">
				<view class="price">
					<text class="label">会员价</text>
					<text class="unit">￥</text>
					<text class="num" >{{product.price}}</text>
					<text class="label">零售价</text>
					<text class="old" >¥{{product.otPrice}}</text>
				</view>
			</view>
			<view class="name-box">
				<view class="tag">{{utils.getDictLabelName("storeProductType",product.productType)}}</view>{{product.productName}}
			</view>
			<view class="intro">
				{{product.productInfo}}
			</view>
			<view class="safe-box">
				<image src="https://zkzh-2025.oss-cn-beijing.aliyuncs.com/shop/images/safe.png" mode=""></image>
				<text class="text">免邮发货</text>
				<view class="line"></view>
				<text class="text">药师服务</text>
				<view class="line"></view>
				<text class="text">隐私保护</text>
			</view>
		</view>
		<!-- 购买人数、库存 -->
		<view class="inventor">
			<view class="left">
				<!-- <view class="head-box">
					<view class="head" v-for="(item,j) in 5" :key="j">
						<image src="https://zkzh-2025.oss-cn-beijing.aliyuncs.com/shop/images/head.jpg" mode=""></image>
					</view>
				</view> -->
				<view class="num-box">
					已有 <text class="text">{{product.sales}}</text> 人购买
				</view>
			</view>
			<!-- <view class="right">
				库存 <text class="text">{{product.stock}}{{product.unitName}}</text>
			</view> -->
		<!-- 	<view class="right">
				 <text class="text">库存{{product.stock>0?'充足':'售罄'}} </text>
			</view> -->
		</view>
		<!-- 功效 -->
		<!-- <view class="effect">
			<view class="label">药品说明书</view>
			<view class="label">查看</view>
			
		</view> -->
		<!-- 图文详情 -->
		<view class="det-box">
			<view class="title">图文详情</view>
			<view class="inner">
				<view  v-html="product.description" style="font-size:0"></view>
			</view>
		</view>
		
		<view class="loadding" v-if="loadding==true">
			<image src="../../static/logo.jpg"></image>
			<text class="text">加载中...</text>
		</view>
		

	</view>
</template>

<script>
	import {getDicts} from '@/api/index'
	import {getProductDetails,getCartCount,addCart} from '@/api/product'
	export default {
		components: {
		},
		data() {
			return {
				banner:[],
				productId:null,
				product:{
					price:0,
					otPrice:0,
				},
				// 当前轮播的图片
				activeBanner: 0,
				loadding:true,
			};
		},
		onLoad(options) {
			this.getDicts();
			this.productId = options.productId;
		},
		onShow() {
			this.getProductDetails();
		},
		 
		methods: {
			getDicts:function(){
				getDicts().then(
					res => {
						if(res.code==200){
							uni.setStorageSync('dicts',JSON.stringify(res));
						} 
						 
					},
					rej => {}
				);
			},
			showImg() {
				 //预览图片
				 uni.previewImage({
				 	urls: this.banner,
				 	current: this.banner[0]
				 });
			},
			 
			getProductDetails(){
				let data = {productId:this.productId};
				getProductDetails(data).then(
					res => {
						this.loadding=false;
						if(res.code==200){
							this.product=res.product;
							this.product.otPrice=this.product.otPrice.toFixed(2);
							this.product.price=this.product.price.toFixed(2);
							if(this.product.sliderImage!=null){
								this.banner=this.product.sliderImage.split(',');
							}
							else{
								this.banner=[]
							}
						}else{
							uni.showToast({
								icon:'none',
								title: res.msg,
							});
							setTimeout(function(){
								uni.reLaunch({
									url: '/pages/home/index',
								})
							},2000)
							
						}
					},
					rej => {}
				);
			},
			// swiper变化事件
			swiperChange(event) {
				this.activeBanner = event.detail.current + 1
			},
		}
	}
</script>

<style lang="scss">
	.shop-banner{
		height: 756upx;
		background-color: #FFFFFF;
		position: relative;
		.swiper-item{
			box-sizing: border-box;
		}
		.swiper,
		.swiper-item,
		.swiper-item image{
			width: 100%;
			height: 100%;
		}
		.banner-mask{
			width: 100%;
			height: 44upx;
			// background: linear-gradient(0deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0));
			// opacity: 0.8;
			position: absolute;
			left: 0;
			bottom: 0;
			z-index: 9;
			background-image: url(https://zkzh-2025.oss-cn-beijing.aliyuncs.com/shop/images/black_mask.png);
			background-size: 20upx 44upx;
			background-repeat: repeat-x;
		}
		.num-box{
			width: 80upx;
			height: 44upx;
			line-height: 44upx;
			text-align: center;
			font-size: 24upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			background: rgba(0, 0, 0, .3);
			border-radius: 22upx;
			position: absolute;
			right: 30upx;
			bottom: 30upx;
			z-index: 10;
		}
	}
	.det-info{
		background: #FFFFFF;
		padding: 36upx 30upx 25upx;
		.price-box{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.price{
				display: flex;
				align-items: flex-end;
				.label{
					color: #333;
					font-size: 28upx;
					font-family: PingFang SC;
					line-height: 1.3;
					margin-right: 5upx;
				}
				.unit{
					font-size: 28upx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #FF6633;
					line-height: 1.3;
				}
				.num{
					font-size: 40upx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #FF6633;
					margin: 0 20upx 0 10upx;
					line-height: 1;
				}
				.old{
					font-size: 28upx;
					font-family: PingFang SC;
					font-weight: 500;
					text-decoration: line-through;
					color: #BBBBBB;
					line-height: 1.3;
				}
			}
			.share-box{
				width: 120upx;
				height: 46upx;
				border: 1px solid #2BC7B9;
				border-radius: 23upx;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
				.text{
					font-size: 26upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #2BC7B9;
				}
				image{
					margin-left: 2rpx;
					width: 25upx;
					height: 24upx;
				}
				.share{
					display: inline-block;
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%rpx;
					opacity: 0;
				}
			}
			.spec{
				font-size: 24upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
				line-height: 36upx;
			}
		}
		.name-box{
			font-size: 32upx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #111111;
			line-height: 44upx;
			margin-top: 32upx;
			.tag{
				display: inline-block;
				padding: 0 6upx;
				height: 30upx;
				background: linear-gradient(90deg, #66b2ef 0%, #2BC7B9 100%);
				border-radius: 4upx;
				margin-right: 10upx;
				font-size: 22upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				line-height: 30upx;
				float: left;
				margin-top: 7upx;
			}
		}
		.intro{
			font-size: 26upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
			line-height: 36upx;
			padding: 18upx 0 23upx;
			border-bottom: 1px solid #f7f7f7;
		}
		.safe-box{
			display: flex;
			align-items: center;
			padding-top: 24upx;
			image{
				width: 20upx;
				height: 24upx;
				margin-right: 20upx;
			}
			.text{
				font-size: 22upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
				line-height: 1;
			}
			.line{
				width: 1px;
				height: 23upx;
				background: #EDEEEF;
				margin: 0 20upx;
			}
		}
	}
	.inventor{
		height: 88upx;
		padding: 0 39upx 0 30upx;
		margin-top: 10upx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.left{
			display: flex;
			align-items: center;
			.head-box{
				margin-right: 27upx;
				display: flex;
				align-items: center;
				.head{
					width: 48upx;
					height: 48upx;
					border-radius: 50%;
					overflow: hidden;
					box-shadow: 0 0 0 1px #fff;
					margin-right: -10upx;
					image{
						width: 100%;
						height: 100%;
					}
				}
			}
			.num-box{
				font-size: 24upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
				.text{
					font-size: 24upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
				}
			}
		}
		.right{
			font-size: 24upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
			.text{
				font-size: 24upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
			}
		}
	}
	.effect{
		box-sizing: border-box;
		padding: 20upx 30upx;
		background: #FFFFFF;
		font-size: 28upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		line-height: 1.8;
		margin-top: 10upx;
		display: flex; 
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		.label{
			font-size: 28upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #111111;
			line-height: 1.8;
		}
	}
	.det-box{
		margin-top: 10upx;
		padding: 40upx 30upx;
		background-color: #FFFFFF;
		.title{
			font-size: 30upx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			line-height: 1;
			margin-bottom: 25upx;
		}
		
	}
	
   .loadding{
	 	background-color: #fff;
	 	display: flex;
	 	flex-direction: column;
	 	align-items: center;
	 	justify-content: center;
	 	position: absolute;
	 	top: 0;
	 	left: 0;
	 	width: 100%;
	 	height: 100%;
	 	z-index: 9999;
	 	image{
	 		border-radius: 50%;
	 		animation: load linear 1s infinite;
	 		width: 120rpx;
	 		height:120rpx;
	 	}
	 	.text{
	 		font-size: 28rpx;
	 		margin-top: 20rpx;
	 	}
	 }
	 
	 
	 
</style>