179crm_user_app/pages_shopping/store/index.vue

<template>
	<view class="content" v-show="storeId">
		<!-- <view class="uni-nav-bar" :style="{backgroundColor: `rgba(255, 255, 255,${opacity})`}">
			<view :style="{height: statusBarHeight + 'px',width: '100%'}"></view>
			<view class="uni-nav-barbox">
				<view class="uni-nav-back">
					<u-icon name="arrow-left" color="#fff" size="20" @click="rightClick"></u-icon>
				</view>
				<view class="uni-nav-title" :style="{opacity: 1,width:`calc(100vw - 100rpx - ${menuRight} - ${menuWidth})`}">
				{{storeInfo.storeName}}
					<view class="inputbox" :style="{background: opacity >= 0.6 ? '#F7F7F7':'#fff'}" @click="toSearch">
						<image class="icon-search" src="../../static/images/search.png" mode=""></image>
						<view>搜索店内药品</view>
					</view>
				</view>
			</view>
		</view> -->
		<view class="uni-nav-bar" :style="{backgroundColor: `rgba(58, 17, 1, 1)`}">
			<view :style="{height: statusBarHeight + 'px',width: '100%'}"></view>
			<view class="uni-nav-barbox">
				<view class="uni-nav-back">
					<u-icon name="arrow-left" color="#fff" size="20" @click="rightClick"></u-icon>
				</view>
				<view class="uni-nav-title" :style="{opacity: 1,width:`calc(100vw - 120rpx - ${menuRight} - ${menuWidth})`}">
				<!-- {{storeInfo.storeName}} -->
					<view class="inputbox" :style="{background:'rgba(255, 255, 255, 0.25)'}" @click="toSearch">
						<image class="icon-search" src="../../static/images/search_white_icon12.png" mode=""></image>
						<view>搜索店内药品</view>
					</view>
				</view>
			</view>
		</view>
		<view class="content-top">
			<view class="store-head" v-show="storeInfo.storeName">
				<view>
					<view class="store-head-top">
						<view class="store-head-logo">
							<u-image shape="square" :src="storeInfo.logoUrl || logoUrl" width="100rpx" height="100rpx" radius="6"></u-image>
						</view>
						<view class="store-info">
							<view class="store-head-name">{{storeInfo.storeName || ''}}</view>
							<view class="store-head-desc">
								<!-- <view>销售{{utils.formatSalesNum(storeInfo.salesCount) }}</view> -->
								<view>24小时营业 · 月售{{utils.formatSalesNum(storeInfo.salesCount) }}{{utils.formatSalesNum(storeInfo.salesCount)>1000?'+':''}}</view>
								<!-- <view>支持预订</view> -->
							</view>
						</view>
						
					</view>
					<view class="store-head-bottom">
						<view class="store-head-bottom-left">支持预定</view>
						<view class="store-head-bottom-center">
							<view>直降6元</view>
							<view>低价换购</view>
							<view>返15个芳华币</view>
						</view>
					</view>
				</view>
		
				<view class="store-head-right">
					<text>领卷</text>
					<image class="w24 h24" src="../../static/images/back_white.png" mode=""></image>
				</view>
			</view>
		</view>
			<!-- tab切换 -->
			<view class="pub-tab-box">
				<view class="tab-inner">
					<view 
						v-for="(item,index) in tabs" 
						:key="index"
						:class="cateId == item.cateId?'item active':'item'"
						@click="cateChange(item)">
						<view class="text">
							{{ item.cateName }}
							<!-- <image v-show="cateId == item.cateId" class="tab-bg" src="../../static/images/tab_bg.png" mode=""></image> -->
						</view>
					</view>
					
				</view>
			</view>
			<!-- 数据列表 -->
			<scroll-view  scroll-y="true"  style="height: calc(100vh - 500rpx);">
			<view class="content-list">
				<view class="goods-list">
					<view class="item" v-for="(item,index) in dataList" :key="index" @click="showDetail(item)">
						<view class="img-box">
							<image :src="item.image" mode="aspectFit"></image>
							<view class="cf-box" v-if="item.productType==2">
								<view class="title">处方药</view>
								<view class="subTitle">请在医师指导下使用</view>
							</view>
						</view>
						
						<view class="info-box">
							<view class="title ellipsis2">{{item.productName}}</view>
							<view class="price-box">
								<view class="now">
									<text class="unit">¥</text>
									<text class="num">{{item.price.toFixed(2)}}</text>
								</view>
								<view class="old">¥{{item.otPrice.toFixed(2)}}</view>
							</view>
						</view>
				</view>
			</view>
			</view>
			</scroll-view>
			<!-- 底部按钮 -->
			<view class="btn-foot">
				<view class="menu-box">
					<view class="item" @click="goHome">
						<image src="../../static/images/tab_home_icon24.png" mode=""></image>
						<text class="label">首页</text>
					</view>
					
					<view class="item" @click="navgetTo('./cart')">
						<uni-badge size="small" :text="cartCount" absolute="rightTop" type="error">
							<image src="../../static/images/shopping_car_icon20.png" mode=""></image>
						</uni-badge>
						<text class="label">购物车</text>
					</view>
					<view class="item" style="position: relative;">
						<image src="../../static/images/customer_service_icon24.png" mode=""></image>
						<text class="label">客服</text>
						<button class="contact-btn" open-type="contact"></button>
					</view>
				</view>
			</view>
		<!-- <image class="bg" src="../../static/images/chu_query.png" mode="widthFix"></image> -->
		<!-- <view class="content-body">
			
			<view class="storebox">
				<u-sticky bgColor="#fff" :offset-top="statusBarHeight + 44">
					<u-tabs :list="tabbar" :current="current" @click="clickTab" class="u-tabs"></u-tabs>
				</u-sticky> -->
				<!-- 商品 -->
				<!-- <view :style="{height: divHeight,display: current == 0 ? 'flex' : 'none'}" class="medic-box">
					<view class="cate-list">
						<view 
							v-for="(item,index) in cates" 
							:key="index" 
							:class="cateSelect == item.cateId?'item active':'item'" 
							@click="choseCate(item)"
						>{{item.cateName }}</view>
					</view>
					<view class="medic"> -->
						<!-- 轮播图 -->
					<!-- 	<view class="banner-box">
							<swiper
								class="swiper" 
								:indicator-dots="true" 
								:circular="true" 
								:autoplay="true" 
								:interval="3000" 
								:duration="1000"
								indicator-color="rgba(255, 255, 255, 0.6)"
								indicator-active-color="#ffffff"
							>
								<swiper-item class="swiper-item" v-for="(item,index) in advs" :key="index" @click="handleAdvClick(item)">
									<image :src="item.imageUrl" mode=""></image>
								</swiper-item>
							</swiper>
						</view> -->
						<!-- 药品列表 -->
						<!-- <view class="medic-list">
								<view class="item" v-for="(item,index) in subCates" :key="index">
									<view class="title">{{item.cateName}}</view>
									<view class="inner-list">
										<view class="definite"v-for="(subItem,index) in subCates"   @click="showProductList(subItem)">
											<view class="img-box">
												<image :src="subItem.pic" mode="aspectFit"></image>
											</view>
											<view class="name ellipsis">{{subItem.cateName}}</view>
										</view>
									</view>
								</view>
						</view>
					</view>
				</view> -->
				<!-- 商家信息 -->
	<!-- 			<view class="storebox-info" :style="{height: divHeight}" v-show="current == 1">
					<view class="storebox-map">
						<u-icon name="map" color="#ccc" size="18"></u-icon>
						<view style="margin-left: 10rpx;">{{storeInfo.address || "--"}}</view>
					</view>
					<view class="storebox-map" v-if="storeInfo.phone">
						<u-icon name="phone" color="#ccc" size="18"></u-icon>
						<view style="margin-left: 10rpx;">{{storeInfo.phone || "--"}}</view>
					</view>
					<view class="storebox-qualifications" v-if="storeInfo.descs">
						<u-icon name="volume" color="#ccc" size="18"></u-icon>
						<view style="margin-left: 10rpx;">{{storeInfo.descs || "--"}}</view>
					</view>
					<view class="storebox-qualifications">
						<u-icon name="file-text" color="#ccc" size="18"></u-icon>
						<view style="margin-left: 10rpx;">商家资质</view>
					</view>
					<view class="qualifications">
						<view v-for="(img,i) in licenseImagesList" :key="i">
							<u-image
								shape="square" 
								lazyLoad 
								:src="img" 
								width="100%" 
								mode="widthFix" 
								radius="6"
								@click="previewImage(i)"
							></u-image>
						</view>
					</view>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	import {getProductCate} from '@/api/product';
	import {getAdv} from '@/api/adv';
	import { getStoreById,getNewStoreById,getIndexData} from "@/api/store.js";
	import {getProductCateByPid,getProducts} from '@/api/product'
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], 
		data() {
			return {
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				// 右侧的胶囊距离右侧屏幕距离-px
				menuRight: uni.getStorageSync('menuInfo').menuRight,
				// 右侧的胶囊宽度-px
				menuWidth: uni.getStorageSync('menuInfo').menuWidth,
				opacity: 0,
				opacityTxt: 0,
				storeId: "",
				tabbar: [{
					name: '商品',
				}, {
					name: '商家',
				}],
				current: 0,
				storeInfo: {},
				logoUrl: "https://user.test.ylrztop.com/images/adfd21c004854c9b8997d371d7a0ce8c.jpg",
				// 商家资质图片
				licenseImagesList: ["https://user.test.ylrztop.com/images/sjzz.jpg"],
				divHeight:'0px',
				allCates:[],
				cates:[],
				subCates:[],
				// 选中药品分类
				cateSelect: 0,
				// 轮播图
				advs: [],
				// 'company'表示销售管理的进来的
				from: "",
				dataList:[],
				cateId:null,
				tabs:[{
					cateId: 178,
					cateName: "推荐",
					pid: 179,
				},
				{
					cateId: 100,
					cateName: "分类",
					pid: 179,
				}
				],
				//上拉加载的配置
				upOption: {
					onScroll:true,
					use: true, // 是否启用上拉加载; 默认true
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 10, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						icon:'/static/images/no_data.png',
						tip: '暂无数据',
						
					},
					textNoMore:"已经到底了",
				}
			}
		},
		onLoad(option) {
			this.storeId =  option.storeId || ""
			this.cateId = 178;
			this.from= option.from || ''
			if(this.storeId){
				this.getStoreInfo()
				this.getProductCate();
				this.getProducts()
			} else {
				uni.showToast({
					title: "storeId不存在~",
					icon: "none"
				})
			}
		},
		onShow() {
			this.divHeight= `calc(100vh - 44px - 88rpx - ${this.statusBarHeight}px)`
			this.getAdv();
		},
		onPageScroll(e) {
			if (e.scrollTop <= 44) {
				this.opacityTxt = 0
				this.opacity = e.scrollTop > this.statusBarHeight ? 0.6 : 0
			} else if (e.scrollTop > 50) {
				this.opacity = 1
				this.opacityTxt = 1
			}
		
		},
		methods: {
			rightClick() {
				uni.navigateBack()
			},
			clickTab(item) {
				this.current = item.index
			},
			// 预览图片
			previewImage(index) {
				uni.previewImage({
					current: index,
					urls: this.licenseImagesList
				});
			},
			getStoreInfo() {
				getNewStoreById(this.storeId).then(
					res => {
						if(res.code==200){
							this.storeInfo = res.data || {}
							// this.licenseImagesList = this.storeInfo.licenseImages ? this.storeInfo.licenseImages.split(',') : []

						} else {
							uni.showToast({
								icon:'none',
								title: res.msg,
							});
						}
					},
					rej => {}
				);
			},
			toSearch() {
				if(this.from == 'company') {
					uni.navigateTo({
						url: '/pages_company/order/productList?storeId=' + this.storeId || ''
					})
				} else {
					uni.navigateTo({
						url: '/pages/home/productSearch?storeId=' + this.storeId || ''
					})
				}
			},
			handleAdvClick(item){
				if(item.showType==1){
					uni.setStorageSync('url',item.advUrl);
					uni.navigateTo({
						url:"/pages/home/h5?storeId="+ this.storeId || ""
					})
				}
				else if(item.showType==2){
					 uni.navigateTo({
					 	url:item.advUrl
					 })
				}
				else if(item.showType==3){
					 uni.setStorageSync('content',item.content);
					 uni.navigateTo({
					 	url:"/pages/home/content?storeId="+ this.storeId || ""
					 })
				}
				
			},
			getAdv(){
				let data = {advType:2};
				getAdv(data).then(
					res => {
						if(res.code==200){
							this.advs=res.data;
						}
					},
					rej => {}
				);
			},
			getProductCate(){
				let data = {};
				getProductCate(data).then(
					res => {
						if(res.code==200){
							this.allCates=res.data;
							this.cates = this.allCates.filter(function (item) {
							     return item.pid==0
							});
							if(this.cates!=null&&this.cates.length>0){
								this.cateSelect=this.cates[0].cateId;
								this.getSubCate()
							}
						}else{
							uni.showToast({
								icon:'none',
								title: "请求失败",
							});
						}
					},
					rej => {}
				);
			},
			// tab切换
			cateChange(item) {
				this.cateId = item.cateId;
				this.mescroll.resetUpScroll()
			},
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			/*下拉刷新的回调 */
			downCallback(mescroll) {
				this.mescroll.resetUpScroll()
			},
			upCallback(page) {
				//联网加载数据
				var that = this;
				var data = {
					cateId:this.cateId,
					defaultOrder:this.defaultOrder,
					page: page.num,
					pageSize: page.size,
					productName: this.productName || "",
					storeId: this.storeId
				};
				if(this.from == 'company') {
					this.getSalesProducts(page,data)
				} else {
					this.getProducts(page,data)
				}
			},
			getProducts(page,data) {
				// var that = this;
				getIndexData().then(res => {
					if(res.code==200){
						this.dataList = res.data.hotProductList; 
						
					}else{
						uni.showToast({
							icon:'none',
							title: "请求失败",
						});
					}
				},rej => {});
			},
			// 回到首页
			goHome() {
				uni.switchTab({
					url: '/pages/home/index'
				})
			},
			// 跳转页面
			navgetTo(url) {
				console.log("跳转")
				this.utils.isLogin().then(res => {
					if(res){
						uni.navigateTo({
							url: url
						})
					}
				})
			},
			// 查看药品详情
			showDetail(item) {
				if(this.from == 'company') {
					uni.navigateTo({
						url: '/pages_company/order/productDetails?productId='+item.productId +`${this.storeId ? '&storeId='+this.storeId : ''}`
					})
				} else {
					uni.navigateTo({
						url: './productDetails?productId='+item.productId +`${this.storeId ? '&storeId='+this.storeId : ''}`
					})
				}
			},
			// 药品分类选择
			choseCate(item) {
				this.cateSelect = item.cateId;
				this.getSubCate()
				
			},
			getSubCate(){
				var that=this;
				this.subCates = this.allCates.filter(function (item) {
					// let subList = that.allCates.filter(child => {
					// 	//返回每一项的子级数组
					// 	return child.pid === item.cateId
					// });
					// subList.length > 0 ? item.children = subList : [];
				    return item.pid==that.cateSelect
				});
				 
			},
			// 查看药品详情
			showProductList(item) {
				uni.navigateTo({
					url: '/pages/shopping/productList?cateId='+item.cateId+"&pid="+item.pid+'&storeId=' + this.storeId + '&from=' + this.from
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	@mixin u-flex($flexD, $alignI, $justifyC) {
		display: flex;
		flex-direction: $flexD;
		align-items: $alignI;
		justify-content: $justifyC;
	}
	.inputbox {
		height: 60rpx;
		padding: 0 20rpx;
		@include u-flex(row, center, flex-start);
		border-radius: 40rpx;
		line-height: 60rpx;
		font-size:28rpx;
		color:#fff;
		font-family: PingFang SC;
		.icon-search{
			width: 28rpx;
			height: 28rpx;
			margin-right: 20rpx;
		}
	}
	.uni-nav-bar {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 999;
		overflow: hidden;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		.uni-nav-barbox {
			width: 100%;
			height: 88rpx;
			@include u-flex(row, center, flex-start);
			position: relative;
			font-size: 24rpx;
		}
		.uni-nav-title {
			/* #ifdef APP-PLUS */
			font-size: 34rpx;
			/* #endif */
			/* #ifndef APP-PLUS */
			font-size: 14px;
			/* #endif */
			overflow: hidden;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
		.uni-nav-back {
			margin-left: 20rpx;
			margin-right: 20rpx;
			height: 88rpx;
			@include u-flex(row, center, flex-start);
		}
	}
	.content {
		width: 100%;
		position: relative;

		.bg {
			width: 100%;
			height: auto;
			position: absolute;
			top: 0;
			left: 0;
		}
        &-top{
			position: fixed;
			z-index: 999;
			top: calc(var(--status-bar-height) + 120rpx);
			width: 100%;
		}
		&-body {
			position: relative;
			padding-top: calc(var(--status-bar-height) + 360rpx);
		}
		&-list{
			position: relative;
			padding-top: calc(var(--status-bar-height) + 440rpx);
		}
	}
   
	.store-head {
		// position: relative;
		// z-index: 9;
		// margin: 0 24rpx 0 24rpx;
		// padding: 24rpx;
		// background: #FFFFFF;
		// border-radius: 16rpx 16rpx 16rpx 16rpx;
		// font-family: PingFang SC, PingFang SC;
		// color: #222222;
		// box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
		position: relative;
		z-index: 999;
		padding:30rpx 24rpx;
		background:#3A1101;
		font-family: PingFang SC, PingFang SC;
		color: #fff;
		width: calc(100% - 48rpx);
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		&-info{
		flex:1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		}
		&-top {
			display: flex;
			align-items: center;
		}
		&-logo {
			flex-shrink: 0;
			margin-right: 24rpx;
		}
		&-name {
			font-weight: 600;
			font-size: 32rpx;
		}
        &-right{
				display: flex;
				align-items: center;
				font-size: 24upx;
				image{
					transform: scaleX(-1);
					margin-left: 5upx;
				}
			}
		&-desc {
			margin-top: 16rpx;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			gap: 20rpx;
			position: relative;
			z-index: 2;
			view {
				// padding-right: 20rpx;
				font-size: 24rpx;
				position: relative;

				&::after {
					content: "";
					width: 0;
					height: 28rpx;
					border-right: 1rpx solid #eee;
					position: absolute;
					right: 0;
					top: 50%;
					transform: translate(0, -50%);
				}

				&:last-child::after {
					border: none;
				}
			}
		}
		&-bottom{
			padding-top: 24upx;
			display: flex;
			align-items: center;
			font-size: 24upx;
			&-left{
				background: rgba(255, 255, 255, 0.20);
				    padding: 4rpx 10rpx;
				    border-radius: 20rpx;
					font-size: 20rpx;
					margin-right: 24upx;
			}
			&-center{
				display: flex;
				    align-items: center;
					view{
						font-size: 20rpx;
						border-radius: 4rpx;
						background: linear-gradient(120deg, #FE8227  0%, #FE4E12 100%);
						margin-right: 10rpx;
						 padding: 2rpx 8rpx;
					}
					
			}
		}
	}
	.pub-tab-box{
		
		box-sizing: border-box;
		width: 100%;
		padding: 0 33upx;
		background-color: #FFFFFF;
		position: fixed;
		top: calc(var(--status-bar-height) + 340rpx);
		    z-index: 999;
			box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.05);
		.tab-inner{
			height: 88upx;
			line-height: 88upx;
			display: flex;
			overflow-x: auto;
			justify-content: center;
			align-items: center;
			
		}
		.item{
			font-size: 28upx;
			white-space: nowrap;
			line-height: 1;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;
			margin-right: 90upx;
			display: flex;
			align-items: center;
			justify-content: center;
			&:last-child{
				margin-right: 0;
			}
			&.active{
				font-weight: bold;
				color: #333333;
				&::after {
					content: "";
					width: 48rpx;
					height: 8rpx;
					background: linear-gradient(120deg, #31A1FE  0%, #008FD3 100%);
					position: absolute;
					bottom: 0;
					border-radius: 6upx 6upx 0upx 0;
				}
			}
			.text{
				position: relative;
				z-index: 1;
			}
			.tab-bg{
				width: 72upx;
				height: 28upx;
				position: absolute;
				top: 17upx;
				left: 50%;
				transform: translateX(-36upx);
				z-index: -1;
			}
		}
		
	}
	.goods-list{
		padding: 20upx;
		display: flex;
		flex-wrap: wrap;
		.item{
			margin-right: 20rpx;
			margin-bottom: 20rpx;
			width: 345rpx;
			background: #FFFFFF;
			box-shadow: 0px 0px 10rpx 4rpx rgba(199, 199, 199, 0.22);
			border-radius: 20rpx;
			overflow: hidden;
			&:nth-child(2n) {
				margin-right: 0;
			}
			.img-box{
				width: 100%;
				height: 334upx;
				position: relative;
				image{
					width: 100%;
					height: 100%;
				}
				
			}
			
			.info-box{
				box-sizing: border-box;
				height: 182upx;
				padding: 20upx 20upx 30upx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.title{
					font-size: 26upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #111111;
					line-height: 40upx;
				}
				.price-box{
					display: flex;
					align-items: flex-end;
					.now{
						display: flex;
						align-items: flex-end;
						margin-right: 20upx;
						.unit{
							font-size: 24upx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #FF6633;
							line-height: 1.2;
							margin-right: 4upx;
						}
						.num{
							font-size: 36upx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #FF6633;
							line-height: 1;
						}
					}
					.old{
						font-size: 26upx;
						font-family: PingFang SC;
						font-weight: 500;
						text-decoration: line-through;
						color: #BBBBBB;
						line-height: 1.1;
					}
				}
			}
		}
	}
	
	.btn-foot{
		box-sizing: border-box;
		height: 100upx;
		background: #FFFFFF;
		padding: 0 30upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		bottom: 0;
		z-index: 99;
		left: 50%;
	    transform: translate(-50%,-50%);
		border-radius: 50px;
		box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.05);
		.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: 40upx;
					height: 40upx;
					margin-bottom: 10upx;
				}
				.label{
					font-size: 20upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #626468;
					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: 28upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				&:first-child{
					margin-left: 0;
				}
				&.cart{
					background: #FF5030;
				}
				&.buy{
					background: #008FD3;
				}
			}
		}
	}
	.border_bottom_line {
		position: relative;
		&::after {
			content: "";
			position: absolute;
			bottom: 0;
			left: 0;
			border-bottom: 1px solid #F5F7FA;
			width: 100%;
			transform: scaleY(0.5);
			border-top-color: #F5F7FA;
			border-right-color: #F5F7FA;
			border-left-color: #F5F7FA;
		}
	}
	.storebox {
		width: 100%;
		margin-top: -60rpx;
		padding-top: 80rpx;
		background-color: #fff;
		box-shadow: 0 -20rpx 16rpx #fff;
		position: relative;
		z-index: 1;
		&-info {
			padding: 24rpx 24rpx 0 24rpx;
			background-color: #fff;
			font-family: PingFang SC, PingFang SC;
			font-size: 28rpx;
			color: #333333;
			position: relative;
			border-top: 4px solid #F5F7FA;
		}
		&-map {
			display: flex;
			align-items: center;
			word-break: break-all;
			padding: 24rpx 0;
		}
		&-qualifications {
			display: flex;
			align-items: center;
			padding: 24rpx 0;
		}
		.qualifications {
			padding: 24rpx 0;
		}
	}
	.medic-box{
		display: flex;
		.cate-list{
			box-sizing: border-box;
			width: 200upx;
			background: #F2F5F9;
			display: flex;
			flex-direction: column;
			padding: 20upx 0;
			overflow-y: scroll;
			.item{
				height: 100upx;
				line-height: 100upx;
				padding-left: 30upx;
				font-size: 28upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				position: relative;
				&.active{
					color: #0bb3f2;
					&::after{
						content: "";
						width: 8upx;
						height: 50upx;
						background: #0bb3f2;
						position: absolute;
						top: 25upx;
						left: 0;
					}
				}
			}
		}
		.medic{
			box-sizing: border-box;
			width: calc(100% - 200upx);
			height: 100%;
			padding: 0 30upx;
			.banner-box{
				margin-top: 30rpx;
				width: 100%;
				height: 160upx;
				border-radius: 10upx;
				overflow: hidden;
				.swiper,
				.swiper-item,
				.swiper-item image{
					width: 100%;
					height: 100%;
				}
			}
			.medic-list{
				box-sizing: border-box;
				padding: 30upx 0;
				overflow-y: auto;
				height: calc(100% - 220upx);
				position: relative;
				// .item{
				// 	.title{
				// 		font-size: 28upx;
				// 		font-family: PingFang SC;
				// 		font-weight: bold;
				// 		color: #333333;
				// 		padding-top: 20upx;
				// 		margin-bottom: 30upx;
				// 	}
					
				// }
				.inner-list{
					display: flex;
					flex-wrap: wrap;
					.definite{
						width: calc(33% - 20upx);
						margin-right: 30upx;
						margin-bottom: 30upx;
						.img-box{
							width: 100%;
							height: 144upx;
							background: #F5F5F5;
							border-radius: 8upx;
							overflow: hidden;
							display: flex;
							align-items: center;
							image{	
								max-width: 100%;
							}
						}
						.name{
							width: 100%;
							margin-top: 20upx;
							font-size: 24upx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #666666;
							text-align: center;
						}
						&:nth-child(3n) {
							margin-right: 0;
						}
					}
				}
			}
		}
	}
</style>