Pārlūkot izejas kodu

Signed-off-by: 李妹妹 <1639016684@qq.com>

李妹妹 2 dienas atpakaļ
vecāks
revīzija
36fade9def

+ 2 - 2
common/request.js

@@ -3,8 +3,8 @@ export default class Request {
 	http(router, data = {}, method,contentType) {
 		let that = this;
 		// let path = 'http://localhost:7014';
-		let path = 'https://api.qinggetai.com'; 
-		// let path = "http://d7zwsx.natappfree.cc"
+		//let path = 'https://api.qinggetai.com'; 
+		//let path = "http://n8288269.natappfree.cc/store"
 		uni.setStorageSync('requestPath',path)
 		// uni.showLoading({
 		// 	title: '加载中'

+ 1 - 1
manifest.json

@@ -50,7 +50,7 @@
     "quickapp" : {},
     /* 小程序特有相关 */
     "mp-weixin" : {
-        "appid" : "wx9ea36eecd281bcd3",
+        "appid" : "wx29d26f63f836be7f",
         "lazyCodeLoading" : "requiredComponents",
         "setting" : {
             "urlCheck" : false,

+ 2 - 2
package-lock.json

@@ -6,7 +6,7 @@
     "dependencies": {
         "animate.css": {
             "version": "3.7.2",
-            "resolved": "https://registry.npmmirror.com/animate.css/-/animate.css-3.7.2.tgz",
+            "resolved": "https://registry.npmjs.org/animate.css/-/animate.css-3.7.2.tgz",
             "integrity": "sha512-0bE8zYo7C0KvgOYrSVfrzkbYk6IOTVPNqkiHg2cbyF4Pq/PXzilz4BRWA3hwEUBoMp5VBgrC29lQIZyhRWdBTw=="
         },
         "dayjs": {
@@ -16,7 +16,7 @@
         },
         "uview-ui": {
             "version": "2.0.36",
-            "resolved": "https://registry.npmmirror.com/uview-ui/-/uview-ui-2.0.36.tgz",
+            "resolved": "https://registry.npmjs.org/uview-ui/-/uview-ui-2.0.36.tgz",
             "integrity": "sha512-ASSZT6M8w3GTO1eFPbsgEFV0U5UujK+8pTNr+MSUbRNcRMC1u63DDTLJVeArV91kWM0bfAexK3SK9pnTqF9TtA=="
         }
     }

+ 1 - 1
pages/healthy/index.vue

@@ -229,7 +229,7 @@
 			box-sizing: border-box;
 			width: 100%;
 			height: 72upx;
-			background: #F7F7F7;
+			background: #fff;
 			border-radius: 36upx;
 			display: flex;
 			align-items: center;

+ 4 - 4
pages/home/components/HotProduct.vue

@@ -6,7 +6,7 @@
 						class="color-red">热门</text>榜单</text>
 			</view>
 			<view class="group-people x-f row" @tap="navTo('/pages/home/productList')">
-				<text class="tip ">更多</text>
+				<text class="tip ">更多热门</text>
 				<image class='w48 h48' src="/static/images/right.png"></image>
 				<!-- <text class="cuIcon-right"></text> -->
 			</view>
@@ -35,10 +35,10 @@
 					</view>
 				</swiper-item>
 			</swiper>
-			<view class="swiper-dots" v-if="goodsList.length > 1">
+		<!-- 	<view class="swiper-dots" v-if="goodsList.length > 1">
 				<text :class="swiperCurrent === index ? 'dot-active' : 'dot'" v-for="(dot, index) in goodsList.length"
 					:key="index"></text>
-			</view>
+			</view> -->
 		</view>
 	</view>
 </template>
@@ -243,7 +243,7 @@
 			height: 152rpx;
 			overflow: hidden;
 			position: relative;
-
+            border-radius: 16rpx 16rpx 16rpx 16rpx;
 			.tag {
 				position: absolute;
 				left: 0;

+ 21 - 9
pages/home/components/NewProduct.vue

@@ -3,7 +3,7 @@
 		<view class="title-box x-bc">
 			<text class="title"><text class="color-orange">新品</text>首发</text>
 			<view class="group-people x-f  row" @tap="navTo('/pages/home/productList')">
-				<text class="tip">更多</text>
+				<text class="tip">更多新品</text>
 				<image class='w48 h48' src="/static/images/right.png"></image>
 				<!-- <text class="cuIcon-right"></text> -->
 			</view>
@@ -16,7 +16,7 @@
 							<view class="min-goods" @tap="showProduct(mgoods)">
 								<view class="img-box">
 									<!-- <view class="tag">new</view> -->
-									<view class="tag">新品首发</view>
+									<view class="tag"><text>新品首发</text></view>
 									<image class="img" :src="mgoods.image" mode="widthFix"></image>
 								</view>
 								<view class="price-box">
@@ -33,10 +33,10 @@
 					</view>
 				</swiper-item>
 			</swiper>
-			<view class="swiper-dots" v-if="goodsList.length > 1">
+			<!-- <view class="swiper-dots" v-if="goodsList.length > 1">
 				<text :class="swiperCurrent === index ? 'dot-active' : 'dot'" v-for="(dot, index) in goodsList.length"
 					:key="index"></text>
-			</view>
+			</view> -->
 		</view>
 	</view>
 </template>
@@ -257,20 +257,32 @@
 			// }
 			.tag {
 				position: absolute;
-				right: 0;
-				top: 0rpx;
+				right: 2rpx;
+				top: 2rpx;
 				z-index: 2;
 				line-height: 18rpx;
 				background: linear-gradient(120deg, #FF7F4E 0%, #FA531C 100%);
 				// border-radius: 0px 18rpx 18rpx 0px;
-				width: 48rpx;
-				height: 56rpx;
+				width: 38rpx;
+				height: 40rpx;
 
-				padding: 18rpx 20rpx;
+				padding: 10rpx;
 				font-size: 14rpx;
 				font-family: PingFang SC;
 				font-weight: Semibold;
 				color: #FFFFFF;
+				border-radius: 50%/50%;
+				transform: skew(-8deg);
+				display: flex;
+				justify-items: center;
+				align-items: center;
+				box-shadow: 2rpx 2rpx 2rpx 2rpx rgba(0, 0, 0, 0.1);
+				text{
+					transform: skew(8deg);
+					display: block;
+					text-align: center;
+					letter-spacing: 2rpx;
+				}
 			}
 
 			.img {

+ 41 - 32
pages/home/index.vue

@@ -109,7 +109,7 @@
 							<image src="/static/images/right.png"></image>
 						</view>
 					</view>
-					<scroll-view :scroll-x="true" style="white-space: nowrap;">
+					<scroll-view :scroll-x="true">
 						<view class="article-box">
 							<view class="article"
 								@click="navTo('/pages_index/index/doctorArticleDetails?articleId='+item.articleId)"
@@ -147,7 +147,7 @@
 							scrollable="false"></u-tabs>
 						<view class="more" @click="navTo('/pages_index/index/articleList')">
 							<view class="text">更多</view>
-							<image src="../../static/images/arrow_gray.png"></image>
+							<image src="../../static/images/right.png"></image>
 						</view>
 					</view>
 					<view class="article-box" v-if="articles.length>0">
@@ -155,11 +155,11 @@
 							@click="navTo('/pages_index/index/articleDetails?articleId='+item.articleId)"
 							v-for="(item,index) in articles">
 							<view class="left">
-								<view class="title ">
+								<view class="title ellipsis1">
 									{{item.title}}
 								</view>
 								<!-- 新加的文章内容 -->
-								<view class="txt ellipsis">
+								<view class="txt ellipsis2">
 									{{item.title}}
 								</view>
 								<view class="views">
@@ -380,7 +380,7 @@
 			<NewProduct :detail="newProductList" />
 			<HotProduct :detail="hotProductList" />
 			<!-- 健康百科 -->
-			<view class="pub-item" style="margin-top: 20rpx;">
+			<!-- <view class="pub-item" style="margin-top: 20rpx;">
 				<view class="pub-title-box">
 					<text class="left">健康百科</text>
 					<view class="right" @click="switchTo('../healthy/index')">
@@ -431,9 +431,9 @@
 						</view>
 					</view>
 				</view>
-			</view>
+			</view> -->
 			<!-- 精选药品 -->
-			<TuiProduct ref="tuiProduct" />
+			<!-- <TuiProduct ref="tuiProduct" /> -->
 			<!-- <view class="feat-title">
 				<image src="../../static/images/tui.png" mode=""></image>
 				<text>精选药品</text>
@@ -469,9 +469,9 @@
 			
 		</view> -->
 		<!-- #ifdef MP-WEIXIN -->
-		<view class="official-account">
+		<!-- <view class="official-account">
 			<official-account @load="bindload" @error="binderror"></official-account>
-		</view>
+		</view> -->
 		<!-- #endif -->
 		<view class="popup-box" v-if="activityShow">
 			<view class="info-mask" @tap="closeActivity()"></view>
@@ -700,7 +700,7 @@
 		},
 		onReachBottom() {
 			console.log("onReachBottom")
-			this.$refs.tuiProduct.getTuiProducts();
+			// this.$refs.tuiProduct.getTuiProducts();
 		},
 		//分享到朋友圈
 		onShareTimeline(res) {
@@ -1179,6 +1179,11 @@
 </script>
 
 <style lang="scss">
+	.ellipsis1 {
+	    overflow: hidden;
+	    text-overflow: ellipsis;
+	    white-space: nowrap;
+	}
 	.fixed-top-box {
 		width: 100%;
 		position: fixed;
@@ -1425,8 +1430,8 @@
 
 		.index-cont {
 			box-sizing: border-box;
-			padding: 0 20upx 120rpx;
-
+			// padding: 0 20upx 120rpx;
+             padding: 0 24upx 20upx;
 			.pub-item {
 				background: #FFFFFF;
 				border-radius: 16upx;
@@ -2334,7 +2339,7 @@
 						.article {
 							width: 300rpx;
 							margin-right: 20rpx;
-							background: #f9f8fe;
+							// background: #f9f8fe;
 							display: flex;
 							flex-direction: column;
 							align-items: flex-start;
@@ -2422,10 +2427,10 @@
 								display: flex;
 								align-items: center;
 								justify-content: flex-start;
-
+                                height: 80upx;
 								.article-title {
 									font-size: 30rpx;
-									font-weight: bold;
+									// font-weight: bold;
 									font-family: PingFang SC;
 									color: #2A2B2E;
 								}
@@ -2466,7 +2471,7 @@
 							.text {
 								font-size: 24rpx;
 								font-family: PingFang SC;
-								color: #9B9B9B;
+								color: #898E91;
 							}
 
 							image {
@@ -2482,11 +2487,12 @@
 
 				.articles {
 					z-index: 101;
-					margin: 20rpx 15rpx;
-					padding: 20rpx;
-					box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.05);
+					// margin: 20rpx 15rpx;
+					margin:  20rpx 24rpx 0rpx;
+					padding: 32rpx;
+					// box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.05);
 					background-color: #fff;
-					border-radius: 15rpx;
+					border-radius: 16rpx;
 
 					.title-box {
 						display: flex;
@@ -2504,19 +2510,19 @@
 						.more {
 							display: flex;
 							align-items: center;
-							justify-content: flex-end;
+						    justify-content: flex-end;
 
 							.text {
 								font-size: 24rpx;
 								font-family: PingFang SC;
-								color: #9B9B9B;
-								width: calc(100% - 556rpx);
+								color:#898E91;
+								// width: calc(100% - 556rpx);
 							}
 
 							image {
-								margin-left: 10rpx;
-								width: 15rpx;
-								height: 20rpx;
+								// margin-left: 10rpx;
+							width: 48rpx;
+							height: 48rpx;
 							}
 
 						}
@@ -2532,25 +2538,28 @@
 
 						.item {
 							width: 100%;
-							margin-bottom: 20rpx;
+							margin-bottom: 32rpx;
 							display: flex;
 							align-items: flex-start;
 							justify-content: flex-start;
-
+                            border-bottom: 1px solid #ECECEC;
+                            padding-bottom: 32rpx;
 							&:last-child {
 								margin-bottom: 0rpx;
+								border-bottom: 0;
 							}
 
 							.left {
 								flex: 1;
 								height: 160rpx;
-								margin-right: 15rpx;
+								margin-right: 30rpx;
 								display: flex;
 								flex-direction: column;
 								align-items: flex-start;
 								justify-content: space-between;
-
+                                 width: calc(100% - 260upx);
 								.title {
+									width: 100%;
 									font-size: 28upx;
 									font-family: PingFang SC;
 									font-weight: bold;
@@ -2566,7 +2575,7 @@
 								.views {
 									font-size: 24upx;
 									font-family: PingFang SC;
-									color: #9a9a9c;
+									color: #B2B2B2;
 								}
 							}
 
@@ -2575,7 +2584,7 @@
 									border-radius: 10rpx;
 									width: 220rpx;
 									height: 160rpx;
-									border: 1px solid #eeeeee;
+									// border: 1px solid #eeeeee;
 								}
 							}
 						}

+ 312 - 65
pages/shopping/index.vue

@@ -5,7 +5,7 @@
 			<!-- 这里是状态栏 -->
 			<!-- <view class="top-title">健康商城</view> -->
 			<!-- 搜索框 -->
-			<view class="search-cont">
+			<view class="search-cont" :style="{width:`calc(100vw - 80rpx - ${menuRight} - ${menuWidth})`}">
 				<view class="inner">
 					<image class="icon-search" src="../../static/images/search.png" mode=""></image>
 					<input type="text" disabled confirm-type="搜索" @click="toSearch" placeholder="输入药品名称"
@@ -16,7 +16,9 @@
 		<view :style="{height: divHeight}" 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>
+					@click="choseCate(item)">{{item.cateName }}
+					</view>
+						
 			</view>
 			<view class="medic">
 				<!-- 轮播图 -->
@@ -29,44 +31,58 @@
 						</swiper-item>
 					</swiper>
 				</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 class="definite" v-for="(subItem,index) in subCates"
+						@click="showProductList(subItem, index)">
+						<view class="name ellipsis" :class="{ 'select-name': activeIndex === index }">
+							{{subItem.cateName}}
+						</view>
+					</view>
+				</view>
+				<view class="line"></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 class="definite" v-for="(subItem,index) in subCates"
-							@click="showProductList(subItem, index)">
-							<view class="name ellipsis" :class="{ 'select-name': activeIndex === index }">
-								{{subItem.cateName}}
-							</view>
-						</view>
-					</view>
-					<view class="line"></view>
-					<view class="product-list">
+					
+					<!-- <view class="product-list">
 						<text class="product-title"> {{ activeIndex >= 0 ? subCates[activeIndex].cateName : '' }}</text>
-					<view class="">
-						<view class="">
-							<image src=""></image>
-							<view class="">
-								<text>云南白药气雾剂每瓶重50g保险液每瓶...</text>
-								<view class="">
-									<view class="">9.5折</view>
-									<view class="">限购1份</view>
+						</view> -->
+				<!-- 数据列表 -->
+				<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
+					<view class="medic-list2">
+						<text class="product-title"> {{ activeIndex >= 0 && subCates.length>0?subCates[activeIndex].cateName : '' }}</text>
+						<view v-for="(item,index) in dataList" :key="index" class="item" @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="intro">
+									<view class="intro-zk"><text>9.5折</text></view>
+									<view class="intro-zk"><text>限购1份</text></view>
 								</view>
-								<view class="">
-									<text><text>57</text>.48</text>
-									<text>¥60.50</text>
+								<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>
+				</mescroll-body>
 					<!-- 	</view> -->
 				</view>
 
@@ -77,12 +93,14 @@
 
 <script>
 	import {
-		getProductCate
+		getProductCate,getProductCateByPid,getProducts
 	} from '@/api/product'
 	import {
 		getAdv
 	} from '@/api/adv'
+	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
 	export default {
+		mixins: [MescrollMixin], 
 		data() {
 			return {
 				activeIndex: 0,
@@ -90,12 +108,37 @@
 				allCates: [],
 				cates: [],
 				subCates: [],
+				// 右侧的胶囊距离右侧屏幕距离-px
+				menuRight: uni.getStorageSync('menuInfo').menuRight,
+				// 右侧的胶囊宽度-px
+				menuWidth: uni.getStorageSync('menuInfo').menuWidth,
 				// 状态栏的高度
 				statusBarHeight: uni.getStorageSync('menuInfo').statusBarHeight,
 				// 选中药品分类
 				cateSelect: 0,
 				// 轮播图
 				advs: [],
+				dataList:[],
+				cateId:null,
+				pid:null,
+				defaultOrder:'desc',
+				storeId: "",
+				//上拉加载的配置
+				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() {
@@ -169,8 +212,10 @@
 								return item.pid == 0
 							});
 							if (this.cates != null && this.cates.length > 0) {
-								this.cateSelect = this.cates[0].cateId;
-								this.getSubCate()
+								this.cateSelect = this.cates[0].cateId ;
+								this.getSubCate();
+							    // this.mescroll.resetUpScroll()
+								
 							}
 						} else {
 							uni.showToast({
@@ -184,9 +229,12 @@
 			},
 			// 药品分类选择
 			choseCate(item) {
+				this.activeIndex = 0
+				this.dataList=[]
 				this.cateSelect = item.cateId;
 				this.getSubCate()
-
+	            
+                
 			},
 			getSubCate() {
 				var that = this;
@@ -198,18 +246,80 @@
 					// subList.length > 0 ? item.children = subList : [];
 					return item.pid == that.cateSelect
 				});
-
-				console.log(this.subCates);
+				if (this.subCates != null && this.subCates.length > 0) {
+					this.cateId= this.subCates[0].cateId;
+					this.mescroll.resetUpScroll()
+				}
+				
 			},
 			// 查看药品详情
 			showProductList(item, index) {
 				// console.log("item>>>>>", item)
 				this.activeIndex = index;
-
+                this.cateId = item.cateId;
+                this.mescroll.resetUpScroll()
 				// uni.navigateTo({
 				// 	url: './productList?cateId='+item.cateId+"&pid="+item.pid
 				// })
 			},
+			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.cateId!=null){
+					this.getProducts(page,data)
+				}
+				
+			},
+			//查询商品列表
+			getProducts(page,data) {
+				var that = this;
+				getProducts(data).then(res => {
+					if(res.code==200){
+						//设置列表数据
+						if (page.num == 1) {
+							that.dataList = res.data.list; 
+						} else {
+							that.dataList = that.dataList.concat(res.data.list);
+						}
+						that.mescroll.endBySize(res.data.list.length, res.data.total);
+						
+					}else{
+						uni.showToast({
+							icon:'none',
+							title: "请求失败",
+						});
+						that.dataList = null;
+						that.mescroll.endErr();
+					}
+				});
+			},
+			// 查看药品详情
+			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 : ''}`
+					})
+				}
+			},
 			goSearch(e) {
 				if (e.detail.value != null && e.detail.value != "") {
 					this.utils.addHisSearch(e.detail.value);
@@ -227,7 +337,9 @@
 		height: 100%;
 		background-color: #fff;
 	}
-
+    .mescroll-body{
+		min-height: calc(100% - 330upx) !important;
+	}
 	.content {
 		height: 100%;
 		display: flex;
@@ -286,9 +398,9 @@
 				background: #F2F5F9;
 				display: flex;
 				flex-direction: column;
-				padding: 20upx 0;
+				// padding: 20upx 0;
 				overflow-y: scroll;
-
+                margin-top: 30rpx;
 				.item {
 					height: 100upx;
 					line-height: 100upx;
@@ -298,23 +410,30 @@
 					font-weight: 500;
 					color: #333333;
 					position: relative;
-
+					 // overflow: hidden;
 					&.active {
 						background: #FFFFFF;
 						font-weight: 600;
-
+						// box-shadow: 12px 0 12px 0 #ffffff, -12px 0 12px 0 #ffffff;
+						// border-radius: 12px 12px 0 0;
+                        
 						&::after {
 							content: "";
 							width: 6upx;
 							height: 28upx;
-							background: #0bb3f2;
+							background: #008FD3;
 							position: absolute;
 							top: 50%;
 							left: 0;
 							transform: translateY(-50%);
+							border-radius: 0upx 6upx 6upx 0;
 						}
+							
 					}
+					
 				}
+
+				
 			}
 
 			.medic {
@@ -337,28 +456,10 @@
 						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 {
+	.inner-list {
 						display: flex;
 						flex-wrap: wrap;
-
+                        padding-top: 30upx;
 						.definite {
 							width: calc(33% - 20upx);
 							margin-right: 30upx;
@@ -386,12 +487,13 @@
 								font-weight: 500;
 								color: #666666;
 								text-align: center;
-								padding: 6rpx 16rpx;
+								padding: 10rpx 16rpx;
 							}
 
 							.select-name {
 								background: #EFF3F7;
 								color: #222426;
+								border-radius:10upx ;
 							}
 
 							&:nth-child(3n) {
@@ -403,9 +505,27 @@
 					.line {
 						width: 100%;
 						height: 0rpx;
-						border: 1rpx solid #ECECEC;
+						border-top: 1rpx solid #ECECEC;
 					}
 
+				.medic-list {
+					box-sizing: border-box;
+					padding: 30upx 0;
+					overflow-y: auto;
+					height: calc(100% - 330upx);
+					position: relative;
+					// .item{
+					// 	.title{
+					// 		font-size: 28upx;
+					// 		font-family: PingFang SC;
+					// 		font-weight: bold;
+					// 		color: #333333;
+					// 		padding-top: 20upx;
+					// 		margin-bottom: 30upx;
+					// 	}
+
+					// }
+				
 					.product-list {
 						padding: 32rpx 0 0;
 						.product-title {
@@ -414,6 +534,133 @@
 							color: #222426;
 						}
 					}
+			.medic-list2{
+				// padding: 20upx;
+				.product-title{
+					font-size: 28upx;
+					display: block;
+					// padding-top: 30upx;
+				}
+				.item{
+					box-sizing: border-box;
+					min-height: 200upx;
+					background: #FFFFFF;
+					// border: 4upx solid #FFFFFF;
+					border-radius: 20upx;
+					// margin-bottom: 20upx;
+					// padding: 40upx 0upx;
+					padding-top: 30upx;
+					display: flex;
+					
+					.img-box{
+						width: 200upx;
+						height: 200upx;
+						margin-right: 30upx;
+						position: relative;
+						border-radius: 20upx;
+						    overflow: hidden;
+						image{
+							width: 100%;
+							height: 100%;
+						}
+						
+					}
+					
+					.info-box{
+						width: calc(100% - 210upx);
+						display: grid;
+						    justify-items: left;
+						.title{
+							font-size: 28upx;
+							font-family: PingFang SC;
+							font-weight: 500;
+							color: #111111;
+							line-height: 40upx;
+							height: 80upx;
+						}
+						.intro{
+							// font-size: 26upx;
+							// font-family: PingFang SC;
+							// font-weight: 500;
+							// color: #999999;
+							// line-height: 1;
+							// margin-top: 26upx;
+							display: flex;
+							.intro-zk{
+								border: 1px solid #FF4B33;
+								padding:0 8rpx ;
+								border-radius: 8rpx;
+								margin-right: 10rpx;
+								line-height: 5rpx;
+								display: flex;
+								text{
+									font-size:24rpx;
+									color:#FF4B33 ;
+									display: flex;
+									    align-items: center;
+								}
+							}
+						}
+					 .price-box{
+					 	display: flex;
+					 	align-items: flex-end;
+					 	.now{
+					 		display: flex;
+					 		align-items: flex-end;
+					 		margin-right: 20upx;
+					 		.num{
+					 			font-size: 36upx;
+					 			font-family: PingFang SC;
+					 			font-weight: bold;
+					 			color: #FF5030;
+					 			line-height: 1;
+					 		}
+					 	}
+					 	.old{
+					 		font-size: 24upx;
+					 		font-family: PingFang SC;
+					 		// font-weight: 500;
+					 		text-decoration: line-through;
+					 		color: #BBBBBB;
+					 		line-height: 1.1;
+					 	}
+					 }
+						.prce-num{
+							display: flex;
+							align-items: center;
+							justify-content: space-between;
+							margin-top: 30upx;
+							.price{
+								display: flex;
+								align-items: flex-end;
+								.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;
+								}
+							}
+							.cart-img{
+								.sale{
+									font-size: 20upx;
+									font-family: PingFang SC;
+									color: #999999;
+								}
+								 
+							}
+						}
+					}
+				}
+			}
 				}
 			}
 		}

Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 645 - 68
pages/shopping/productDetails.vue


+ 2 - 2
pages/shopping/productList.vue

@@ -161,7 +161,7 @@
 			},
 			/*下拉刷新的回调 */
 			downCallback(mescroll) {
-				mescroll.resetUpScroll()
+				this.mescroll.resetUpScroll()
 			},
 			upCallback(page) {
 				//联网加载数据
@@ -198,7 +198,7 @@
 							title: "请求失败",
 						});
 						that.dataList = null;
-						mescroll.endErr();
+						that.mescroll.endErr();
 					}
 				});
 			},

+ 526 - 42
pages_shopping/store/index.vue

@@ -1,41 +1,141 @@
 <template>
 	<view class="content" v-show="storeId">
-		<view class="uni-nav-bar" :style="{backgroundColor: `rgba(255,255,255,${opacity})`}">
+		<!-- <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="#333" size="20" @click="rightClick"></u-icon>
+					<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">
+				{{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>
-		<image class="bg" src="../../static/images/chu_query.png" mode="widthFix"></image>
-		<view class="content-body">
+		<view class="content-top">
 			<view class="store-head" v-show="storeInfo.storeName">
-				<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-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>
+			<!-- 数据列表 -->
+			<view class="content-list">
+			<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
+				<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 class="store-head-name">{{storeInfo.storeName || ''}}</view>
 				</view>
-				<view class="store-head-desc">
-					<view>销售{{utils.formatSalesNum(storeInfo.salesCount) }}</view>
-					<view>24小时营业</view>
-					<view>支持预订</view>
+			</mescroll-body>
+			</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>
+				</u-sticky> -->
 				<!-- 商品 -->
-				<view :style="{height: divHeight,display: current == 0 ? 'flex' : 'none'}" class="medic-box">
+				<!-- <view :style="{height: divHeight,display: current == 0 ? 'flex' : 'none'}" class="medic-box">
 					<view class="cate-list">
 						<view 
 							v-for="(item,index) in cates" 
@@ -44,9 +144,9 @@
 							@click="choseCate(item)"
 						>{{item.cateName }}</view>
 					</view>
-					<view class="medic">
+					<view class="medic"> -->
 						<!-- 轮播图 -->
-						<view class="banner-box">
+					<!-- 	<view class="banner-box">
 							<swiper
 								class="swiper" 
 								:indicator-dots="true" 
@@ -61,11 +161,11 @@
 									<image :src="item.imageUrl" mode=""></image>
 								</swiper-item>
 							</swiper>
-						</view>
+						</view> -->
 						<!-- 药品列表 -->
-						<view class="medic-list">
-								<!-- <view class="item" v-for="(item,index) in subCates" :key="index">
-									<view class="title">{{item.cateName}}</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">
@@ -74,12 +174,12 @@
 											<view class="name ellipsis">{{subItem.cateName}}</view>
 										</view>
 									</view>
-							<!-- 	</view> -->
+								</view>
 						</view>
 					</view>
-				</view>
+				</view> -->
 				<!-- 商家信息 -->
-				<view class="storebox-info" :style="{height: divHeight}" v-show="current == 1">
+	<!-- 			<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>
@@ -111,7 +211,7 @@
 					</view>
 				</view>
 			</view>
-		</view>
+		</view> -->
 	</view>
 </template>
 
@@ -119,8 +219,10 @@
 	import {getProductCate} from '@/api/product';
 	import {getAdv} from '@/api/adv';
 	import { getStoreById } 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,
@@ -150,11 +252,41 @@
 				// 轮播图
 				advs: [],
 				// 'company'表示销售管理的进来的
-				from: ""
+				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()
@@ -276,6 +408,86 @@
 					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;
+				getProducts(data).then(res => {
+					if(res.code==200){
+						//设置列表数据
+						if (page.num == 1) {
+							that.dataList = res.data.list; 
+						} else {
+							that.dataList = that.dataList.concat(res.data.list);
+						}
+						that.mescroll.endBySize(res.data.list.length, res.data.total);
+						
+					}else{
+						uni.showToast({
+							icon:'none',
+							title: "请求失败",
+						});
+						that.dataList = null;
+						that.mescroll.endErr();
+					}
+				});
+			},
+			// 回到首页
+			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;
@@ -318,7 +530,7 @@
 		border-radius: 40rpx;
 		line-height: 60rpx;
 		font-size:28rpx;
-		color:#999;
+		color:#fff;
 		font-family: PingFang SC;
 		.icon-search{
 			width: 28rpx;
@@ -372,23 +584,48 @@
 			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) + 88rpx);
+			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: 9;
-		margin: 0 24rpx 0 24rpx;
-		padding: 24rpx;
-		background: #FFFFFF;
-		border-radius: 16rpx 16rpx 16rpx 16rpx;
+		z-index: 999;
+		padding:30rpx 24rpx;
+		background:#3A1101;
 		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);
+		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;
@@ -401,7 +638,15 @@
 			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;
@@ -411,8 +656,8 @@
 			position: relative;
 			z-index: 2;
 			view {
-				padding-right: 20rpx;
-				font-size: 26rpx;
+				// padding-right: 20rpx;
+				font-size: 24rpx;
 				position: relative;
 
 				&::after {
@@ -431,6 +676,245 @@
 				}
 			}
 		}
+		&-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;

BIN
static/images/close_icon24.png


BIN
static/images/customer_service_icon24.png


BIN
static/images/search_white_icon12.png


BIN
static/images/service_icon14.png


BIN
static/images/shopping_car_icon20.png


BIN
static/images/tab_home_icon24.png


Daži faili netika attēloti, jo izmaiņu fails ir pārāk liels