zhibo/pages_company/storeProductPackageDetails.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="aspectFit"></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" v-if="package!=null" >{{package.payMoney.toFixed(2)}}</text>
					<text class="label">零售价</text>
					<text class="old" v-if="package!=null" >¥{{package.money.toFixed(2)}}</text>
				</view>
			</view>
			 <view class="name-box">
			 	 {{package.title}}
			 </view>
			<view class="intro">
				{{package.descs}}
			</view>
		</view>
		<!-- <view class="drug-box">
			<view class="title">组合套餐</view>
			<view class="inner">
				<view class="drug-list"  >
					<view v-for="(subItem,index) in products" :key="index" class="drug-item">
						<view class="img-box">
							<image :src="subItem.image" mode="aspectFill"></image>
						</view>
						<view class="drug-info"  >
							<view>
								<view class="name-box ellipsis2">
									{{subItem.productName}}
								</view>
								<view class="spec">{{subItem.sku}}</view>
							</view>
							<view class="num-box">
								<view class="price">
									<text class="unit">¥</text>
									<text class="num">{{subItem.price.toFixed(2)}}</text>
								</view>
								<view class="amount">x{{subItem.count}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view> -->
		<!-- 图文详情 -->
		<view class="det-box">
			<view class="title">图文详情</view>
			<view class="inner">
				<view  v-html="package.content" style="font-size:0" ></view>
			</view>
		</view>
		<!-- 底部按钮 -->
		<view class="btn-foot">
			<view class="menu-box">
				<view class="item" @click="goHome">
					<image src="/static/images/back_home.png" mode=""></image>
					<text class="label">首页</text>
				</view>
				<view class="item" style="position: relative;">
					<image src="/static/images/consult_small.png" mode=""></image>
					<text class="label">咨询</text>
					<button class="contact-btn" open-type="contact"></button>
				</view>
				 
			</view>
			<view class="btn-box">
				<button :class="isSubmitting?'btnsel btn buy':'btn buy'" @click="buy" 
				:disabled="isSubmitting">{{ isSubmitting ? '提交中...' : '立即购买' }}</button>
			</view>
		</view>
		<view class="message-box" v-if="messageShow">
			<view class="left">
				<image src="/static/images/close24.png" mode="" @click="closeOrder()" ></image>
				<view class="text ellipsis">您有{{count0}}个待支付订单</view>
			</view>
			<view class="btn" @click="showOrder()">查看</view>
		</view>
	</view>
</template>

<script>
	import {getOrderCount} from '@/api/storeOrder'
	import {getStoreProductPackageDetails} from '@/api/storeProductPackage'
	export default {
		data() {
			return {
				count0:0,
				messageShow:false,
				banner:[],
				packageId:null,
				package:null,
				products:[],
				// 当前轮播的图片
				activeBanner: 1,
				 isSubmitting: false // 控制按钮禁用状态
			};
		},
		onLoad(options) {
			if (options.hasOwnProperty('q') && options.q) {
				// 通过下面这步解码，可以拿到url的值
				const url = decodeURIComponent(options.q)
				this.url=url;
				// // 对url中携带的参数提取处理
				const obj = this.utils.urlToObj(url)
				this.packageId = obj.packageId;
				this.companyId = obj.companyId;
				this.companyUserId = obj.companyUserId;
			}
			else{
				this.packageId = options.packageId;
				this.companyId = options.companyId;
				this.companyUserId = options.companyUserId;
			}
			uni.showShareMenu({
				withShareTicket:true,
				//小程序的原生菜单中显示分享按钮，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
				menus:["shareAppMessage","shareTimeline"] //不设置默认发送给朋友
			})
			
			
		},
		//发送给朋友
		onShareAppMessage(res) {
			return {
				title: this.package.title,
				path: `/pages_company/storeProductPackageDetails?packageId=${this.package.packageId}`+"&companyId="+this.companyId+"&companyUserId="+this.companyUserId,
				imageUrl: this.package.imgUrl //分享图标，路径可以是本地文件路径、代码包文件路径或者网络图片路径.支持PNG及JPG。显示图片长宽比是 5:4
			}
		},
		//分享到朋友圈
		onShareTimeline(res) {
			return {
				title: this.package.title,
				query:'packageId='+this.package.packageId+"&companyId="+this.companyId+"&companyUserId="+this.companyUserId,//页面参数
				imageUrl: this.package.imgUrl //分享图标，路径可以是本地文件路径、代码包文件路径或者网络图片路径.支持PNG及JPG。显示图片长宽比是 5:4
			}
		},
		onShow() {
			console.log("onshow")
			// if(this.utils.isLogin()){
			// 	console.log(123)
			// 	this.getOrderCount();
			// }
			if(uni.getStorageSync('AppToken')){
				console.log(123)
				this.getOrderCount();
			}
			this.getStoreProductPackageDetails();
		},
		methods: {
			getOrderCount(){
				getOrderCount().then(
					res => {
						if(res.code==200){
							this.count0=res.count0;
							if(this.count0>0){
								this.messageShow=true;
							}
						} 
					},
					rej => {}
				);
			},
			showOrder(){
				this.utils.isLogin().then(res => {
					if(res){
						uni.navigateTo({
							url: '/pages_user/user/storeOrder?status=0'
						})
					}
				})
			},
			closeOrder(){
				this.messageShow=false;
			},
			showImg() {
				 //预览图片
				 uni.previewImage({
				 	urls: this.banner,
				 	current: this.banner[0]
				 });
			},
			 
			getStoreProductPackageDetails(){
				let data = {packageId:this.packageId};
				getStoreProductPackageDetails(data).then(
					res => {
						if(res.code==200){
							this.package=res.data;
							if(this.package.images!=null){
								this.banner=this.package.images.split(',')
							}
							else{
								this.banner=[]
							}
							this.products=JSON.parse(this.package.products);
						}else{
							uni.showToast({
								icon:'none',
								title: "请求失败",
							});
						}
					},
					rej => {}
				);
			},
			//swiper变化事件
			swiperChange(event) {
				this.activeBanner = event.detail.current + 1
			},
			buy() {
				if (this.isSubmitting) return; // 防止重复点击
				 this.isSubmitting = true; // 禁用按钮
				 if(this.isSubmitting){
				 	uni.showToast({
				 		icon:'none',
				 		title: '不能重复点击',
				 	});
				 }
				this.utils.isLogin().then(res => {
					if(res){
						uni.navigateTo({
							url: '/pages_shopping/shopping/confirmPackageOrder?packageId='+this.packageId+"&companyUserId="+this.companyUserId
						})
						this.isSubmitting = false; // 禁用按钮
					}
				})
				
			},
			//回到首页
			goHome() {
				uni.switchTab({
					url: '/pages/home/index'
				})
			},
			//跳转页面
			navgetTo(url) {
				this.utils.isLogin().then(res => {
					if(res){
						uni.navigateTo({
							url: url
						})
					}
				})
			},
			 
		}
	}
</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(/static/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, #2BC7B9 0%, #2BC7A4 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;
			// 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: #666666;
				}
			}
		}
		.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 130upx 30upx;
		background-color: #FFFFFF;
		.title{
			font-size: 30upx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			line-height: 1;
			margin-bottom: 25upx;
		}
		
	}
	
	.btn-foot{
		box-sizing: border-box;
		width: 100%;
		height: 121upx;
		background: #FFFFFF;
		padding: 0 32upx 0 28upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 99;
		.menu-box{
			display: flex;
			align-items: center;
			.item{
				display: flex;
				align-items: center;
				flex-direction: column;
				margin-right: 48upx;
				&:last-child{
					margin-right: 0;
				}
				image{
					width: 36upx;
					height: 36upx;
					margin-bottom: 10upx;
				}
				.label{
					font-size: 20upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;
					text-align: center;
				}
			}
			::v-deep.uni-badge--x{
				display: flex;
				align-items: center;
				justify-content: center;
			}
			::v-deep.uni-badge{
				border: none;
				background-color: #FF3636;
				font-family: Roboto;
			}
		}
		.btn-box{
			display: flex;
			align-items: center;
			.btn{
				width: 200upx;
				height: 88upx;
				line-height: 88upx;
				text-align: center;
				border-radius: 44upx;
				margin-left: 20upx;
				font-size: 30upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				&:first-child{
					margin-left: 0;
				}
				&.cart{
					background: #FF6633;
				}
				&.buy{
					background: #2BC7B9;
				}
			}
		}
	}
	.product-spec{
		.pro-info{
			display: flex;
			align-items: center;
			.img-box{
				width: 200upx;
				height: 200upx;
				background: #FFFFFF;
				border-radius: 16upx;
				overflow: hidden;
				margin-right: 30upx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.info-text{
				height: 200upx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.price{
					display: flex;
					align-items: flex-end;
					.unit{
						font-size: 32upx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #FF6633;
						line-height: 1.2;
						margin-right: 10upx;
					}
					.num{
						font-size: 50upx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #FF6633;
						line-height: 1;
					}
				}
				.desc-box{
					display: flex;
					flex-direction: column;
					padding-bottom: 9upx;
					.text{
						font-size: 26upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #999999;
						margin-top: 27upx;
						line-height: 1;
						&:first-child{
							margin-top: 0;
						}
					}
				}
			}
		}
		.spec-box{
			padding-top: 50upx;
			.title{
				font-size: 34upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #111111;
				line-height: 1;
			}
			.spec-list{
				display: flex;
				flex-wrap: wrap;
				margin-top: 30upx;
				.item{
					box-sizing: border-box;
					height: 64upx;
					padding: 0 30upx;
					line-height: 64upx;
					font-size: 28upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #111111;
					background: #F7F7F7;
					border: 1px solid #F7F7F7;
					border-radius: 32upx;
					margin-right: 20upx;
					margin-bottom: 30upx;
					&.active{
						background: #F1FFFE;
						border: 1px solid #8AD5CE;
						color: #2BC7B9;
					}
				}
			}
		}
		.price-num{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 14upx;
			.label{
				font-size: 34upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #111111;
			}
			.num-box{
				display: flex;
				align-items: center;
				.img-box{
					width: 60upx;
					height: 60upx;
					// border-radius: 4upx;
					border: 1px solid #dddddd;
					display: flex;
					align-items: center;
					justify-content: center;
					image{
						width: 25rpx;
						height: 25rpx;
					}
				}
				input{
					width: 60upx;
					height: 60upx;
					line-height: 60upx;
					font-size: 28upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #111111;
					// border-radius: 4upx;
					border-top: 1px solid #dddddd;
					border-bottom: 1px solid #dddddd;
					text-align: center;
					// margin: 0 16upx;
				}
			}
		}
		.sub-btn{
			width: 100%;
			height: 88upx;
			line-height: 88upx;
			text-align: center;
			font-size: 30upx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			background: #2BC7B9;
			border-radius: 44upx;
			margin-top: 30upx;
			// margin-bottom: 30upx;
			
		}
	}
	.contact-btn{
		display: inline-block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
		z-index: 9999;
	}
	.drug-box{
		margin: 10upx 0 10upx;
		padding: 40upx 30upx;
		background-color: #FFFFFF;
		.drug-list{
			.drug-item{
				padding: 30upx 0;
				border-bottom: 1px soli #F0F0F0;
				display: flex;
				align-items: center;
				.img-box{
					width: 160upx;
					height: 160upx;
					margin-right: 30upx;
					flex-shrink: 0;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.drug-info{
					width: calc(100% - 190upx);
					height: 160upx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.name-box{
						font-size: 28upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #111111;
						line-height: 40upx;
						.tag{
							display: inline-block;
							padding: 0 6upx;
							height: 30upx;
							background: linear-gradient(90deg, #2BC7B9 0%, #2BC7A4 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;
						}
					}
					.spec{
						font-size: 24upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #999999;
						line-height: 1;
						margin-top: 10upx;
					}
					.num-box{
						display: flex;
						align-items: center;
						justify-content: space-between;
						.price{
							display: flex;
							align-items: flex-end;
							.unit{
								font-size: 24upx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #111111;
								line-height: 1.2;
								margin-right: 4upx;
							}
							.num{
								font-size: 32upx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #111111;
								line-height: 1;
							}
						}
						.amount{
							font-size: 24upx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #999999;
							line-height: 1;
						}
					}
				}
			}
			 
		}
		
	}
	.message-box{
		box-sizing: border-box;
		width: 693upx;
		height: 84upx;
		background: #F3FFFD;
		border: 1px solid #C7E9E5;
		box-shadow: 0px 4upx 12upx 0px rgba(90, 203, 138, 0.16);
		border-radius: 16upx;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: 128upx;
		z-index: 99;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20upx 0 30upx;
		.left{
			width: 80%;
			display: flex;
			align-items: center;
			image{
				width: 24upx;
				height: 24upx;
				margin-right: 18upx;
			}
			.text{
				width: 90%;
				font-size: 28upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #2BC7B9;
			}
		}
		.btn{
			width: 100upx;
			height: 48upx;
			line-height: 48upx;
			text-align: center;
			font-size: 24upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			border: 1px solid #D2E6FF;
			background: linear-gradient(135deg, #2BC7B9 0%, #60CDC3 100%);
			border-radius: 24upx;
			margin-left: 30upx;
		}
		
	}
	.btnsel{
		color: #5f5f5f !important;
		background: #ebebeb !important;
	}
</style>