heshanApp/pages/store/packageDetails.vue

<template>
	<view class="content">
		
	 <!-- #ifdef APP-PLUS -->
		     <es-nav-title title="疗法详情"></es-nav-title>
	   <!-- #endif -->
	   <!-- 购买轮播列表 -->
	    <view class="buy-lists" v-if="notics&&notics.length>0" :style="{height: boxHeight+'px'}">
			<view :class="{'buy-top': animate == true }" :style="{marginTop: animate == true ? `-${marginTop}px`:'0'}">
				<view class="buy-list buy-txtbox" v-for="(item,index) in notics" :key="index">
					<view class="buy-item"><text class="textOne buy-name" >{{item.fsUserName|| ''}}</text><text>{{item.timeTxt}} 已下单</text></view>
				</view>
			</view>
	    </view>
		<view class="cont-box">
			<view class="goods-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  imgs" :key="index">
						<image :src="item" mode="aspectFit"></image>
					</swiper-item>
				</swiper>
				<!-- 数量 -->
				<view class="num-box">{{ activeImg }}/{{ imgs.length }}</view>
			</view>
			<view class="package-box">
				<view class="title">{{item.packageName}}</view>
				<view class="desc">
					<view class="cycle" v-if="item.cycle>0">服务周期{{item.cycle}}天</view>
					<view class="duration" v-if="item.duration>0">签约时长{{item.duration}}天</view>
					<view class="huabei-box x-c">
						<image class="huabei" src="@/static/images/huabei-icon.png" mode="aspectFill"></image>
						<text style="padding: 0 5rpx;">花呗</text>
						<text class="huabei-red">分期</text>
					</view>
				</view>
				<view class="num-box">
					<view class="price-box">
						<view class="price"  v-if="item!=null">￥{{item.price&&item.price.toFixed(2)}}元/日</view>
						<view class="price"  v-if="item!=null&&item.packageSubType==1">咨询包</view>
						<view class="price"  v-if="item!=null&&item.packageSubType==2">治疗包</view>
						<view class="price"  v-if="item!=null&&item.packageSubType==3">产品包</view>
						
					</view>
					<view class="count">{{item.sales}}人已购</view>
				</view>
				 
			</view>
			<view class="drug-box" v-if="products.length>0 ">
				<view class="title-box">
					<view class="line"></view>
					<view class="title">处方列表</view>
				</view>
				<view class="drug-list"  >
					<view  v-for="(product,index) in products"  class="drug-item" >
						<view class="drug" v-if="displayMore==0?index<2:true" >
							<view class="img-box">
								<image :src="product.image" mode="aspectFill"></image>
							</view>
							<view class="drug-info"   >
								<view>
									<view class="name-box ellipsis2">
										{{product.productName}} 
									</view>
									<view class="spec">{{product.sku}}</view>
								</view>
								<view class="num-box">
									<view class="use">
										{{product.usageMethod}}
									</view>
									<view class="price">
										<!-- <text class="unit">¥</text>
										<text class="num">{{product.price.toFixed(2)}}</text> -->
									</view>
									<!-- <view class="amount">x{{product.count}}</view> -->
								</view>
							</view>
						</view>
						
					</view>
				</view>
				<view v-if="products.length>2" class="display-more" @click="showMore()" >{{displayText}}</view>
				<view class="tip">
					<image class="img" src="/static/images/dui.png" style="flex-shrink: 0;"></image>
					<view class="text">本疗法所包含药品由{{storeName}}配送</view>
				</view>
			</view>
			
			<view class="desc-box" v-if="describe&&describe.use">
				<view class="title-box">
					<view class="line"></view>
					<view class="title">疗程</view>
				</view>
				<view class="desc" v-if="describe!=null" v-html="describe.use">
				</view>
			</view>
			<view class="desc-box">
				<view class="title-box">
					<view class="line"></view>
					<view class="title">疗法详情</view>
				</view>
				<view class="html" v-html="item.desc">
				</view>
			</view>
			<view class="desc-box" v-if="item.indication!=null">
				<view class="title-box">
					<view class="line"></view>
					<view class="title">功能主治</view>
				</view>
				<view class="desc" v-if="item!=null" v-html="item.indication">
				</view>
			</view>
			<view class="desc-box" v-if="describe&&describe.usageMethod">
				<view class="title-box">
					<view class="line"></view>
					<view class="title">服用/使用方式</view>
				</view>
				<view class="desc" v-html="describe.usageMethod">
				</view>
			</view>
			<view class="desc-box" v-if="describe&&describe.forPeople">
				<view class="title-box">
					<view class="line"></view>
					<view class="title">适宜人群</view>
				</view>
				<view class="desc" v-html="describe.forPeople">
				</view>
			</view>
			<view class="desc-box" v-if="describe&&describe.tabooPeople">
				<view class="title-box">
					<view class="line"></view>
					<view class="title">禁忌人群</view>
				</view>
				<view class="desc" v-html="describe.tabooPeople">
				</view>
			</view>
			<view class="desc-box" v-if="describe&&item.explain">
				<view class="title-box">
					<view class="line"></view>
					<view class="title">方解/搭配优势</view>
				</view>
				<view class="desc" v-html="item.explain">
				</view>
			</view>
		</view>
		
		<view class="btn-foot" v-if="packageId">
			<view>
				<view class="p-price-box">
					<view class="p-name" v-if="couponPrice >= 0">券后</view>
					<view class="p-name">￥</view>
					<view class="p-price" v-if="item!=null">{{couponPrice >= 0 ? couponPrice.toFixed(2):item.totalPrice&&item.totalPrice.toFixed(2)}}</view>
				</view>
				<view class="y-price" v-if="couponPrice >= 0">￥{{item.totalPrice&&item.totalPrice.toFixed(2)}}</view>
			</view>
			<view class="btn-box">
				<view class="btn share" v-if="!isH5"  @click="doShare()">分享</view>
				<view class="btn buy"  @click="doSubmit()">提交需求</view>
			</view>
			<!-- 待支付订单 -->
			<view class="message-box x-bc" v-if="messageShow">
				<view class="left x-c">
					<uni-icons type="close" size="22" color="#FF6633" style="margin-right: 18rpx;" @click="messageShow=false"></uni-icons>
					<view class="text ellipsis">您有{{count1}}个待支付订单</view>
				</view>
				<view class="btn x-c" @click="showOrder()">查看</view>
			</view>
		</view>
		
		<u-popup  bgColor="#f6f6f6"  :round="10" mode="bottom" :show="doctorShow" @open="doctorOpen()" @close="doctorClose()">
			<view class="doctors">
				<scroll-view class="scroll-list"  scroll-y="true"     @scrolltolower="lower" >
				<view class="doctor"  @click="navTo('/pages_doctor/doctorDetails?doctorId='+item.doctorId)"   v-for="(item,index) in doctors">
					<view class="item">
						<view class="left">
							<image mode="aspectFill" class="doc-img" :src="item.avatar"></image>
							<view class="right"> 
								<view class="doc-box">
									<view class="doc-name">
										{{item.doctorName}}
									</view>
									<view class="doc-position">{{item.position}}</view>
								</view>
								<view class="hospital">
									{{item.hospitalName}} {{item.deptName}}
								</view>
								 
							</view>
						</view>
						<view class="btn" @click="handleDoctorClick(item)">选择</view>
					</view>
				</view> 
				</scroll-view>
			</view>
			
		</u-popup>
	   
		<!-- 分享弹窗 -->
	    <u-popup :show="showShare" @close="showShare = false" >
	    	<share-box :shareItem="shareItem"  @closeShare='showShare = false' ></share-box>
	    </u-popup>
	
	</view> 
</template>

<script>
	import { caculateTimeago } from '@/utils/tools.js';
	import {create,getMyPackageOrderList} from '@/api/packageOrder.js'
	import {bindCompanyUser} from '@/api/companyUser.js'
	import {getPackageById,getPackageDoctorList,getNewOrderByPackageId,checkContinue} from '@/api/package.js'
	export default {
		data() {
			return {
				// isDrug:0,
				storeName:"",
				displayText:"查看更多",
				displayMore:0,
				imgs:[],
				activeImg: 1,
				doctorShow:false,
				doctors:[],
				products:[],
				packageId:null,
				item:{},
				describe:null,
				doctorId:null,
				doctorPageNum:1,
				doctorLastPage:false,
				doctorTotal:0,
				companyUserId:null,
				companyId:null,
				showShare:false,
				isH5:false,
				shareItem:{ imageUrl:"",title:"",path:""},
				count1:0,
				messageShow:false,
				boxHeight: 94,
				marginTop: 30,
				animate:false,
				timer:null,
				notics:[],
				choose: 0,
				couponPrice: -1
			};
		},
		onLoad(option) {
			this.choose = option.choose || 0
			this.packageId=option.packageId;
			if(!this.$isEmpty(option.companyId)){
				this.companyId=option.companyId
			}
			if(!this.$isEmpty(option.companyUserId)){
				this.companyUserId=option.companyUserId
			}
			//#ifdef H5
			this.isH5=true;
			//#endif
		},
		onReady() {
			this.getNewOrderByPackageId()
		},
		onUnload() {
			if(this.timer) clearInterval(this.timer)
		},
		onShow() {
			if(this.$isLogin()){
				let data = {companyUserId:this.companyUserId};
				bindCompanyUser(data).then(
					res => {
						if(res.code==200){
						}
					},
					rej => {}
				);	
				this.getOrder()
			}  else {
				uni.navigateTo({
					url: '/pages/auth/loginIndex'
				})
			}
			this.getPackageById();
			this.getPackageDoctorList();
		},
		onShareAppMessage(res) {
			return {
				title: this.item.packageName,
				path: '/pages_index/packageDetails?packageId='+this.packageId+"&companyId="+this.companyId+"&companyUserId="+this.companyUserId,
				imageUrl: this.item.imgUrl //分享图标，路径可以是本地文件路径、代码包文件路径或者网络图片路径.支持PNG及JPG。显示图片长宽比是 5:4
			}
			
		},
	
		methods:{
			scroll() {
				this.animate = true;
				setTimeout(() => {
					this.notics.push(this.notics[0]);
					this.notics.shift();
					this.animate = false;
				}, 1000);
			},
			getText() {
				const query = uni.createSelectorQuery().in(this);
				query
				  .select(".buy-txtbox")
				  .boundingClientRect((data) => {
					if(data&&data.height) {
					  this.marginTop = data.height + 7
					  if(this.notics.length>2) {
						this.boxHeight = this.marginTop * 3 + 4
					  } else {
						this.boxHeight = this.marginTop * this.notics.length + 4
					  }
					}
				  })
				  .exec();
			},
			getNewOrderByPackageId() {
				if(this.timer) clearInterval(this.timer)
				getNewOrderByPackageId({packageId:this.packageId}).then(res=>{
					if(res.code== 200) {
						this.notics = res.data
						if(res.data&&res.data.length > 0) {
							this.notics = res.data.map(item=>({
								...item,
								timeTxt: caculateTimeago(new Date(item.payTime).getTime(),1)
							}))
							
							this.$nextTick(()=>{
								this.getText()
								this.timer = setInterval(this.scroll, 1200);
							})
						}
					} else {
						this.notics = []
					}
				})
			},
			showOrder(){
				if(this.$isLogin()) {
					uni.navigateTo({
						url: '/pages/store/packageOrderList?status=1'
					})
				}
			},
			getOrder() {
				const data = {
					status: 1,
					pageNum: 1,
					pageSize: 10
				};
				getMyPackageOrderList(data).then(res => {
					if(res.code==200){
						this.count1 = res.data.total
						this.messageShow = res.data.total > 0
					}
				});
			},
			showMore(){
				this.displayMore=this.displayMore==1?0:1;
				this.displayText=this.displayMore==1?'收起':'查看更多'
				console.log(this.displayText)
			},
			swiperChange(event) {
				this.activeImg = event.detail.current + 1
			},
			handleDoctorClick(item){
				this.doctorShow=false;
				this.doctorId=item.doctorId
				this.doSubmit();
			},
			lower(event) {
				if(this.doctorTotal>this.doctors.length){
					this.doctorPageNum++;
					this.getPackageDoctorList();
				}
			},
			doSubmit(){
				var that=this
				if(!this.$isLogin()){
					this.$showLoginPage();
					return;
				}
				that.submit();
			},
			submit(){
				if(this.doctors.length>0&&this.doctorId==null){
					this.doctorShow=true;
				}
				else{
					checkContinue(this.packageId).then(res=>{
						if(res.code == 200){
							if(res.tip) {
								uni.showModal({
									title: '提示',
									content: res.tip,
									showCancel: false,
									success: function(res) {
										if (res.confirm) {
											console.log('用户点击确定');
										} else if (res.cancel) {
											console.log('用户点击取消');
										}
									}
								});
								return;
							}else {
								const choose = this.choose || ''
								uni.navigateTo({
									url:"/pages/store/packageForm?packageId="+this.packageId+"&doctorId="+this.doctorId+"&companyId="+this.companyId+"&companyUserId="+this.companyUserId+'&choose='+choose,
								});
							}
						} else {
							uni.showToast({
								title: res.msg,
								icon: "none"
							})
						}
					})
					
				}
				
			},
			createOrder(){
				uni.showLoading({
					title:"处理中..."
				})
				var data={
					companyId:this.companyId,
					companyUserId:this.companyUserId,
					packageId:this.packageId,
					doctorId:this.doctorId,
				}
				
				//#ifdef APP-PLUS
				    data.source=2;
				//#endif
				//#ifdef H5
				    data.source=3;
				//#endif
				  
				var that=this;
				create(data).then(res => {
					uni.hideLoading()
					if(res.code==200){
						uni.navigateTo({
							url: '/pages_order/packageOrderPay?orderId='+res.order.orderId
						})
					}else{
						uni.showToast({
							icon:'none',
							title: res.msg,
						});
					}
				});
			 
			},
			doctorOpen(){
				this.doctorShow=true;
			},
			doctorClose(){
				this.doctorShow=false;
			},
			showImg() {
				 //预览图片
				 uni.previewImage({
				 	urls: this.imgs,
				 	current: this.imgs[0]
				 });
			},
			getPackageDoctorList(){
				if(this.doctorLastPage){
					return;
				}
				var data = {
					packageId:this.packageId,
					pageNum: this.doctorPageNum,
					pageSize: 10
				};
				var that=this;
				getPackageDoctorList(data).then(
					res => {
						if(res.code==200){
							//设置列表数据
							if (this.doctorPageNum == 0) {
								that.doctors = res.data.list; 
								
							} else {
								that.doctors = that.doctors.concat(res.data.list);
								 
							}
							this.doctorLastPage=res.data.isLastPage;
							this.doctorTotal=res.data.total
							console.log(that.doctors)
							 
						}else{
							uni.showToast({
								icon:'none',
								title: "请求失败",
							});
						}
					},
					rej => {}
				);
			},
			getPackageById(){
				var that=this;
				let data = {packageId:this.packageId};
				getPackageById(data).then(res => {
						if(res.code==200){
							this.couponPrice = res.couponPrice
							this.item=res.data;
							this.storeName=res.storeName;
							if(res.data.images!=null){
								this.imgs=res.data.images.split(",")
							}
							else{
								this.activeImg=0;
							}
							this.describe=JSON.parse(this.item.describeJson);
							if(this.item.productJson!=null){
								this.products=JSON.parse(this.item.productJson);
								// this.isDrug=0;
								// this.products.forEach(function(element) {
								// 	if(element.isDrug!=null&&element.isDrug==1){
								// 		that.isDrug=1;
								// 	}
								// });
							}
						}else{
							uni.showToast({
								icon:'none',
								title: "请求失败",
							});
						}
					},
					rej => {}
				);
			},
			doShare(){
				if(this.isH5){
					return;
				}
				const that = this
				that.shareItem.title=that.item.packageName;
				that.shareItem.imageUrl=this.item.imgUrl
				that.shareItem.compressImage = 1;
				that.shareItem.summary=!that.$isEmpty(that.item.description)?that.item.description:"";
				that.shareItem.isMini=true;
				that.shareItem.showCopyUrl=false;
				that.shareItem.path="/pages_index/packageDetails?packageId="+that.packageId+"&companyId="+that.companyId+"&companyUserId="+that.companyUserId;
				let cdn=uni.getStorageSync('h5Path');
				that.shareItem.url=cdn+"/pages/store/packageDetails?packageId="+that.packageId+"&companyId="+that.companyId+"&companyUserId="+that.companyUserId;
				that.showShare=true;
			},
		}
	}
</script>

<style lang="scss" scoped>
	page{
		height: 100%;
	}
	.buy-lists{
		height: 94px;
		background-color:transparent;
		overflow: hidden;
		width: 60%;
		position: absolute;
		z-index: 99;
		top: 20vh;
		left: 20rpx;
	}
	.buy-list{
		height: 23px;
		font-size: 26rpx;
		margin-top: 7px;
		overflow: hidden;
		color: #fff;
		.buy-item {
			display: inline-flex;
			align-items: center;
			height: 100%;
			line-height: 100%;
			overflow: hidden;
			background-color: rgba(0, 0, 0, 0.35);
			border-radius: 10rpx;
			padding: 0 20rpx;
			box-sizing: border-box;
			word-break: break-all;
			white-space: nowrap;
		}
		.buy-name {
			width: 50%;
			margin-right: 10rpx;
		}
	}
	.buy-top {
	    transition: all 0.8s ease-in;
	    margin-top: -30px;
	  }
	.content{
		height: 100%;
		display: flex;
		flex-direction: column;
		 
		.cont-box{
			padding-bottom: 121rpx;
			.package-box{
				background-color: #fff;
				padding: 20rpx;
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: flex-start;
				 
				.title{
					font-weight: bold;
					font-size: 34rpx;
					font-family: PingFang SC;
					color: #111;
				}
				.desc{
					margin-top: 15rpx;
					display: flex;
					align-items: flex-start;
					justify-content: flex-start;
					.cycle{
						background-color: #eee;
						border-radius: 30rpx;
						padding: 5rpx 15rpx;
						font-size: 26rpx;
						font-family: PingFang SC;
						color: #FF5030;
					}
					.duration{
						margin-left: 10rpx;
						background-color: #eee;
						border-radius: 30rpx;
						padding: 5rpx 15rpx;
						font-size: 26rpx;
						font-family: PingFang SC;
						color: #FF5030;
					}
					.huabei-box {
						font-size: 26rpx;
						font-family: PingFang SC;
						color: #403c3b;
						font-weight: 600;
						padding: 5rpx 15rpx;
					}
					.huabei {
						width: 30rpx;
						height: 30rpx;
					}
					.huabei-red {
						background-color: #e83944;
						color: #fff;
						border-radius: 8rpx 8rpx 8rpx 0;
						display: inline-block;
						padding: 0 5rpx;
						font-size: 24rpx;
					}
				}
				.num-box{
					margin-top: 15rpx;
					flex: 1;
					display: flex;
					align-items: flex-end;
					justify-content: space-between;
					width: 100%;
					.price-box{
						display: flex;
						align-items: center;
						justify-content: flex-start;
						.price{
							margin-right: 10rpx;
							padding: 5rpx 10rpx;
							background-color: #FF5030;
							border-radius: 30rpx;
							font-size: 20rpx;
							font-family: PingFang SC;
							color: #ffffff;
						}
					}
					.count{
						font-size: 24rpx;
						font-family: PingFang SC;
						color: #333333;
					}
					
				}
				
				 
			}
			.desc-box{
				background-color: #fff;
				padding: 20rpx;
				margin-top: 10rpx;
				.title-box{
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: flex-start;
					.title{
						font-size: 32rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #111111;
					}
					.line{
						margin-right: 15rpx;
						height: 30rpx;
						width: 6rpx;
						background-color: #FF5030;
						
					}
					 
				}
				.desc{
					margin-top: 15rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					color: #9a9a9c;
				}
				.html{
					margin-top: 15rpx;
					// font-size: 0px;
					vertical-align: middle;
					::v-deep {
						img {
							font-size: 0px;
							vertical-align: middle;
						}
					}
				}
			}
			.drug-box{
				background-color: #fff;
				padding: 20rpx;
				margin-top: 10rpx;
				.title-box{
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: flex-start;
					.title{
						font-size: 32rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #111111;
					}
					.line{
						margin-right: 15rpx;
						height: 30rpx;
						width: 6rpx;
						background-color: #FF5030;
						
					}
					 
				}
				.drug-list{
					margin-top: 15rpx;
					.drug-item{
						.drug{
							padding-bottom: 15rpx;
							border-bottom: 1px soli #F0F0F0;
							display: flex;
							align-items: center;
							.img-box{
								width: 160rpx;
								height: 160rpx;
								margin-right: 30rpx;
								flex-shrink: 0;
								image{
									width: 100%;
									height: 100%;
								}
							}
							.drug-info{
								width: calc(100% - 190rpx);
								height: 160rpx;
								display: flex;
								flex-direction: column;
								justify-content: space-between;
								.name-box{
									font-size: 28rpx;
									font-family: PingFang SC;
									font-weight: 500;
									color: #111111;
									line-height: 40rpx;
									.tag{
										display: inline-block;
										padding: 0 6rpx;
										height: 30rpx;
										background: linear-gradient(90deg, #2BC7B9 0%, #2BC7A4 100%);
										border-radius: 4rpx;
										margin-right: 10rpx;
										font-size: 22rpx;
										font-family: PingFang SC;
										font-weight: bold;
										color: #FFFFFF;
										line-height: 30rpx;
										float: left;
										margin-top: 7rpx;
									}
								}
								.spec{
									font-size: 24rpx;
									font-family: PingFang SC;
									font-weight: 500;
									color: #999999;
									line-height: 1;
									margin-top: 10rpx;
								}
								.num-box{
									display: flex;
									align-items: center;
									justify-content: space-between;
									.price{
										display: flex;
										align-items: flex-end;
										.unit{
											font-size: 24rpx;
											font-family: PingFang SC;
											font-weight: 500;
											color: #111111;
											line-height: 1.2;
											margin-right: 4rpx;
										}
										.num{
											font-size: 32rpx;
											font-family: PingFang SC;
											font-weight: 500;
											color: #111111;
											line-height: 1;
										}
									}
									.use{
										font-size: 24rpx;
										font-family: PingFang SC;
										color: #999999;
									}
									.amount{
										font-size: 24rpx;
										font-family: PingFang SC;
										font-weight: 500;
										color: #999999;
										line-height: 1;
									}
								}
							}
						}
						
					}
				}
				.display-more{
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				.tip{
					margin-top: 10rpx;
					display: flex;
					align-items: center;
					justify-content: flex-start;
					.img{
						width: 20rpx;
						height:20rpx;
					}
					.text{
						margin-left: 10rpx;
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #999999;
					}
				}
				
			}
		}
	}
	 
	.btn-foot{
		box-sizing: border-box;
		width: 100%;
		min-height: 121rpx;
		background: #FFFFFF;
		padding: 0 32rpx 0 28rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 99;
		.p-price-box{
			display: flex;
			align-items: center;
			.p-name{
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FF6633;
			}
			.p-price{
				margin-left: 10rpx;
				color: #FF6633;
				font-size: 38rpx;
				font-family: PingFang SC;
				font-weight: bold;
				
			}
		}
		 .y-price {
		 	font-size: 24rpx;
		 	font-family: PingFang SC;
		 	color: #999;
		 	text-decoration: line-through;
		 } 
		.btn-box{
			display: flex;
			align-items: center;
			.btn{
				min-width: 200rpx;
				min-height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				border-radius: 44rpx;
				margin-left: 20rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				&:first-child{
					margin-left: 0;
				}
				&.share{
					background: #2BC7B9;
					
				}
				&.buy{
					background: #FF5030;
				}
			}
		}
	}
	.doctors{
		overflow-y: auto;
		padding: 20rpx;
		height: 650rpx;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		box-sizing: border-box;
		.scroll-list{
			height: 650rpx;
		}
		.doctor{
			width: 100%;
			margin-bottom: 15rpx;
			background: #f9f8fe;
			padding: 20rpx;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: flex-start;
			&:last-child{
				margin-bottom: 0rpx;
			}
			.item{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.left{
					flex: 1;
					width: 100%;
					display: flex;
					align-items: flex-start;
					justify-content: flex-start;
					.doc-img{
						width:80rpx;
						height:80rpx;
						border-radius: 50%;
					}
					.right{
						width: calc(100% - 100rpx); 
						margin-left: 20rpx;
						display: flex;
						flex-direction: column;
						align-items: flex-start;
						justify-content: flex-start;
						.doc-box{
							display: flex;
							align-items: center;
							justify-content: space-between;
							.doc-name{
								font-size: 28rpx;
								font-family: PingFang SC;
								font-weight: bold;
								color: #111111;
								
							}
							.doc-position{
								margin-left: 50rpx;
								font-size: 26rpx;
								font-family: PingFang SC;
								color: #2d2b36;
							}
						}
						.hospital{
							margin-top: 10rpx;
							font-size: 24rpx;
							font-family: PingFang SC;
							color: #9a9a9c;
						}
					}
				}
				.btn{
					padding: 10rpx 30rpx;
					text-align: center;
					border-radius: 30rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					color: #FF5030;
					border:1rpx solid  #FF5030;
					 
				}
				
			}
			
		}
	}
	.goods-banner{
		height: 756rpx;
		background-color: #FFFFFF;
		position: relative;
		.swiper-item{
			box-sizing: border-box;
		}
		.swiper,
		.swiper-item,
		.swiper-item image{
			width: 100%;
			height: 100%;
		}
		.num-box{
			width: 80rpx;
			height: 44rpx;
			line-height: 44rpx;
			text-align: center;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			background: rgba(0, 0, 0, .3);
			border-radius: 22rpx;
			position: absolute;
			right: 30rpx;
			bottom: 30rpx;
			z-index: 10;
		}
	}
	.message-box{
		box-sizing: border-box;
		width: 693rpx;
		min-height: 84rpx;
		background: #fff3ee;
		border: 1px solid #FF6633;
		box-shadow: 0px 4rpx 12rpx 0px rgba(255, 102, 51, 0.08);
		border-radius: 16rpx;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: 128rpx;
		z-index: 99;
		padding: 0 20rpx 0 30rpx;
		.left{
			width: 80%;
			.text{
				width: 90%;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FF6633;
			}
		}
		.btn{
			width: 100rpx;
			min-height: 48rpx;
			line-height: 48rpx;
			text-align: center;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			background: linear-gradient(135deg, #FF6633 0%, #FF6633 100%);
			border-radius: 24rpx;
			margin-left: 30rpx;
		}
	}
</style>