no message

common/css/common.css

@@ -179,6 +179,9 @@ image {
 .fs-40{
 	font-size: 40rpx;
 }
+.fs-44{
+	font-size: 44rpx;
+}
 .fs-48{
 	font-size: 48rpx;
 }
@@ -232,12 +235,20 @@ image {
 	color: #57CAFF;
 }
 .fc-FB3D03{
-	color: #FB3D03;
+	color: #ff3422;
+}
+.fc-ff3939{
+	color: #ff3939;
 }
 .fc-FF7F00{
 	color: #FF7F00;
 }
-
+.fc-ED301D{
+	color: #ED301D;
+}
+.fc-ADADAD{
+	color: #ADADAD;
+}
 /* 背景颜色 */
 .bgc-f{
 	background-color: #fff;
@@ -331,6 +342,9 @@ image {
 .plr-24{
 	padding: 0 24rpx;
 }
+.plr-32{
+	padding: 0 32rpx;
+}
 .ptp-24{
 	padding: 24rpx 0;
 }
@@ -349,6 +363,9 @@ image {
 .ml-10{
 	margin-left: 10rpx;
 }
+.ml-16{
+	margin-left: 16rpx;
+}
 .ml-40{
 	margin-left: 40rpx;
 }

pages-takeout/shop-mod/menu.vue

@@ -14,18 +14,90 @@
 		<scroll-view scroll-y="true" :scroll-with-animation='true' :scroll-into-view="idMark" @scroll="menuScroll">
 			<view class="menu-box-right">
 				<view class="menu-box-only" v-for="(item,i) in menuList" :key="i" :id="'scroll'+ item.type">
-					<view class="mb-18 fs-24">{{item.name}}</view>
-					<view class="menu-list" v-for="(info,k) in item.list" :key="k">
-						{{info.name}}
+					<view class="mb-18 fs-34 fw-600">{{item.name}}</view>
+					<view class="menu-list flex-justify-space" v-for="(info,k) in item.list" :key="k">
+						<image src="@/static/img/my/bg.png" mode="scaleToFill"></image>
+						<view class="menu-list-right">
+							<view class="mb-4 text-overflow-ellipsis fs-34 fw-600">[畅销款]奥尔1良烤肉 牛油拌饭[畅销款]奥尔1良烤肉 牛油拌饭[畅销款]奥尔1良烤肉 牛油拌饭[畅销款]奥尔1良烤肉 牛油拌饭</view>
+							<view class="mb-20 fw-400 fc-9 fs-24">月销196</view>
+							<view class="flex-justify-space align-items-flex-end">
+								<view class="">
+									<span class="fs-24 fw-400 fc-FB3D03">￥</span>
+									<span class="fs-40 fw-b fc-FB3D03">3.9</span>
+									<span class="fs-24 fc-9 fw-400 text-line-through">￥12</span>
+								</view>
+								<view class="display-flex align-items-center" v-if="info.spec != 1">
+									<view v-show="info.num > 0" class="right-only-right-red fw-500 text-align-center fs-36 fc-f" @click="addred(1,i,k,item)">-</view>
+									<view v-show="info.num > 0" class="right-only-right-2 text-align-center fs-28 fw-400">{{info.num}}</view>
+									<view class="right-only-right-add fw-500 text-align-center fs-36 fc-f" @click="addred(2,i,k,item)">+</view>
+								</view>
+								<view v-else class="right-only-right text-align-center fw-600 fs-28 fc-f" @click="addred(3,i,k,item)">选规格</view>
+							</view>
+						</view>
 					</view>
 				</view>
 			</view>
 		</scroll-view>
+		
+		
+		
+		<uni-popup ref="popupGG" type="bottom">
+			<view class="gg-box  flex-index-css">
+				<view class="flex-justify-space  box-border-box p-32">
+					<view class="fs-32 fw-500 fc-0">商品详情规格</view>
+					<view class="" @click="addred(4)">
+						<uni-icons type="closeempty" size="20" ></uni-icons>
+					</view>
+				</view>
+				<view class="goods-info flex-justify-space mb-32 box-border-box plr-32">
+					<image src="@/static/img/my/bg.png" mode="scaleToFill"></image>
+					<view class="flex-1">
+						<view style="width: 446rpx;" class="fw-600 fs-34 text-overflow-ellipsis-one">[畅销款]奥尔1良烤肉牛油拌饭</view>
+						<view class="fw-400 fc-9 fs-24">月销196</view>
+					</view>
+				</view>
+				
+				<view class="scroll-view-css box-border-box plr-32">
+					<view class="" v-for="(item,i) in popData.specList" :key="i">
+						<view class="fs-32 fw-500 fc-0 mb-32">{{item.specName}}</view>
+						<view class="flex-wrap-wrap">
+							<view class="spec-item text-align-center fs-28" 
+							:class="info.isSelect?'s-item':'n-item'"
+							v-for="(info,k) in item.list" :key="k" @click="select(i,k,item,info)">
+								{{info.name}}
+							</view>
+						</view>
+						
+					</view>
+				</view>
+				
+				<view class="pop-buttom box-border-box plr-32">
+					<view class="flex-justify-space mb-28">
+						<view class="pop-buttom-left">
+							<view class="">
+								<span class="fw-600 fs-32 fc-ED301D">￥</span>
+								<span class="fw-600 fs-48 fc-ED301D">19.26</span>
+							</view>
+							<view class="">
+								<span class="fw-400 fs-24 fc-9">已选规格：</span>
+								<span class="fw-400 fs-24">不辣</span>
+							</view>
+						</view>
+						<view class="display-flex align-items-center">
+							<view class="right-only-right-red fw-500 text-align-center fs-36 fc-f">-</view>
+							<view class="right-only-right-2 text-align-center fs-28 fw-400">1</view>
+							<view class="right-only-right-add fw-500 text-align-center fs-36 fc-f">+</view>
+						</view>
+					</view>
+					<view class="pop-buttom-2  text-align-center fs-32 fw-600 fc-f">选好了</view>
+				</view>
+			</view>
+		</uni-popup>
 	</view>
 </template>
 
 <script>
-	
+	import tools from "@/service/tools";
 	export default {
 		name:'menu-box',
 		data(){
@@ -35,43 +107,36 @@
 				type:1,//分类标识
 				typeList:[],
 				
-				menuList:[
-					{	
-						name:'分类1',
-						type:1,
-						list:[
-							{name:1,},{name:2,},{name:3,},{name:4,},
-						]
-					},
-					{
-						name:'分类2',
-						type:2,
-						list:[
-							{name:1,},{name:2,},{name:3,},{name:4,},
-						]
-					},
-					{
-						name:'分类3',
-						type:3,
-						list:[
-							{name:1,},{name:2,},{name:3,},{name:4,},
-						]
-					},
-					{
-						name:'分类4',
-						type:4,
-						list:[
-							{name:1,},{name:2,},{name:3,},{name:4,},
-						]
-					},
-					{
-						name:'分类5',
-						type:5,
-						list:[
-							{name:1,},{name:2,},{name:3,},{name:4,},
-						]
-					},
-				],
+				menuList:[],
+				
+				popData:{
+					spec_name:'',
+					spec_ids:'',
+					spec_list:[],
+					specList:[
+						{	
+							specName:'口味',
+							specType:1,
+							list:[
+								{name:'辣1',id:1,isSelect:false},{name:'辣2',id:2,isSelect:false},{name:'辣3',id:3,isSelect:false},{name:'辣4',id:4,isSelect:false},
+							]
+						},
+						{
+							specName:'大小',
+							specType:2,
+							list:[
+								{name:'大1',id:5,isSelect:false},{name:'大2',id:6,isSelect:false},{name:'大3',id:7,isSelect:false},{name:'大4',id:8,isSelect:false},
+							]
+						},
+						{
+							specName:'加料',
+							specType:3,
+							list:[
+								{name:'加1',id:9,isSelect:false},{name:'加2',id:10,isSelect:false},{name:'加3',id:11,isSelect:false},{name:'加4',id:12,isSelect:false},
+							]
+						},
+					]
+				},
 			}
 		},
 		mounted() {
@@ -82,35 +147,37 @@
 				this.typeList = [
 					{
 						"category_id": 1,
-						"name": "爆品推荐爆爆品推荐爆爆品推荐爆",
+						"name": "爆品推荐",
 						"type": 1,
 					},
 					{
 						"category_id": 2,
-						"name": "必点口味必点口味必点口味必点口味必点口味",
+						"name": "必点口味",
 						"type": 2
 					},
-					{
-						"category_id": 3,
-						"name": "爆品推荐爆爆品推荐爆爆品推荐爆",
-						"type": 3,
-					},
-					{
-						"category_id": 4,
-						"name": "必点口味必点口味必点口味必点口味必点口味",
-						"type": 4
-					},
-					{
-						"category_id": 5,
-						"name": "必点口味必点口味必点口味必点口味必点口味",
-						"type": 5
-					},
 				]
 				this.type = this.typeList[0].type;
 				this.idMark = 'scroll'+ this.type;
 				this.typeList.forEach((v)=>{
 					v.num = 0
 				})
+				
+				this.menuList = [
+					{
+						name:'分类1',
+						type:1,
+						list:[
+							{name:1,num:0,spec:1},{name:2,num:0},{name:3,num:0},{name:4,num:0},
+						]
+					},
+					{
+						name:'分类2',
+						type:2,
+						list:[
+							{name:1,num:0},{name:2,num:0,spec:1},{name:3,num:0},{name:4,num:0},
+						]
+					},
+				]
 			},
 			
 			selectType(item){
@@ -119,13 +186,12 @@
 					this.idMark = 'scroll'+ item.type
 				}
 			},
-			
 			menuScroll(){
 				let _this = this;
 				let query = uni.createSelectorQuery().in(this);
 				query.selectAll(".menu-box-only").boundingClientRect(data=>{
 					data.forEach((v)=>{
-						if(v.top < 297&&v.top>0){
+						if(v.top < 329&&v.top>0){
 							_this.idMark = v.id;
 							let arr = v.id.split('scroll');
 							_this.type = Number(arr[1]);
@@ -133,6 +199,58 @@
 					})
 				}).exec();
 			},
+			addred(type,i,k,item){
+				if(type === 1){
+					// 减
+					this.menuList[i].list[k].num -= 1;
+					this.setSub(item);
+				}else if(type === 2){
+					// 加
+					this.menuList[i].list[k].num += 1;
+					this.setSub(item);
+				}else if(type === 3){
+					// 选规格
+					this.$refs.popupGG.open();
+				}else{
+					this.$refs.popupGG.close();
+				}
+			},
+			setSub(item){
+				let num = 0;
+				item.list.forEach((n)=>{
+					num += n.num
+				})
+				this.typeList.forEach((v)=>{
+					if(v.type == item.type){
+						v.num = num
+					}
+				})
+			},
+			
+			// -------弹窗选择规格-----------
+			select(i,k,item,info){
+				if(!info.isSelect){
+					item.list.forEach((v)=>{
+						v.isSelect = false;
+					})
+					info.isSelect = true;
+					
+					item.list.forEach(v=>{
+						this.popData.spec_list.forEach((n,i)=>{
+							if(v.id == n){
+								this.popData.spec_list.splice(i, 1)
+							}
+						})
+					})
+					this.popData.spec_list.push(info.id);
+				}else{
+					info.isSelect = false;
+					let index = this.popData.spec_list.indexOf(info.id)
+					this.popData.spec_list.splice(index, 1)
+				}
+				this.spec_ids = this.popData.spec_list.join('_')
+				
+			},
 		},
 	}
 </script>
@@ -140,6 +258,7 @@
 <style scoped lang="scss">
 		.menu-box{
 			height: 100%;
+			
 			.menu-box-left{
 				width: 176rpx;
 				height: 100%;
@@ -179,7 +298,110 @@
 					width: 100%;
 					height: 200rpx;
 					margin-bottom: 40rpx;
-					background-color: skyblue;
+					image{
+						width: 200rpx;
+						height: 200rpx;
+						border-radius: 12rpx;
+						margin-right: 16rpx;
+					}
+					.menu-list-right{
+						flex: 1;
+						.right-only-right{
+							width: 100rpx;
+							height: 44rpx;
+							background: linear-gradient( 117deg, #57CAFF 0%, #41ABF5 100%);
+							border-radius: 12rpx;
+							line-height: 44rpx;
+						}
+						.right-only-right-red{
+							width: 44rpx;
+							height: 44rpx;
+							line-height: 40rpx;
+							border-radius: 12rpx;
+							border: 1rpx solid #41ABF5;
+							color: #41ABF5;
+						}
+						.right-only-right-add{
+							width: 44rpx;
+							height: 44rpx;
+							line-height: 40rpx;
+							background: linear-gradient( 117deg, #57CAFF 0%, #41ABF5 100%);
+							border-radius: 12rpx;
+						}
+						.right-only-right-2{
+							min-width: 50rpx;
+						}
+					}
+				}
+			}
+			
+			.gg-box{
+				width: 750rpx;
+				height: 1208rpx;
+				background: #FFFFFF;
+				border-radius: 24rpx 24rpx 0rpx 0rpx;
+				.goods-info{
+					border-bottom: 1rpx solid #EEEEEE;
+					image{
+						width: 170rpx;
+						height: 160rpx;
+						border-radius: 8rpx;
+						margin-right: 22rpx;
+						margin-bottom: 32rpx;
+					}
+				}
+				.pop-buttom{
+					width: 100%;
+					height: 250rpx;
+					box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(51,51,51,0.1);
+					.pop-buttom-left{
+						padding-top: 12rpx;
+					}
+					.pop-buttom-2{
+						width: 100%;
+						height: 96rpx;
+						line-height: 96rpx;
+						background: #41ABF5;
+						border-radius: 200rpx
+					}
+					.right-only-right-red{
+						width: 44rpx;
+						height: 44rpx;
+						line-height: 40rpx;
+						border-radius: 12rpx;
+						border: 1rpx solid #41ABF5;
+						color: #41ABF5;
+					}
+					.right-only-right-add{
+						width: 44rpx;
+						height: 44rpx;
+						line-height: 40rpx;
+						background: linear-gradient( 117deg, #57CAFF 0%, #41ABF5 100%);
+						border-radius: 12rpx;
+					}
+					.right-only-right-2{
+						min-width: 50rpx;
+					}
+				}
+				.spec-item{
+					width: 210rpx;
+					height: 66rpx;
+					line-height: 66rpx;
+					box-sizing: border-box;
+					border-radius: 12rpx;
+					margin: 0 26rpx 26rpx 0;
+				}
+				.spec-item:nth-child(3){
+					margin-right: 0rpx !important;
+				}
+				.s-item{
+					background-color: #ECF7FE;
+					border: 2rpx solid #41ABF5;
+					color: #41ABF5;
+				}
+				.n-item{
+					border: 2rpx solid #EEEEEE;
+					color: #000;
 				}
 			}
 		}

pages-takeout/shop.vue

@@ -6,7 +6,7 @@
 			<Nav :leftShow='false' :customNav='true' bgckgroundBox='transparent'>
 				<template>
 					<view slot="custom" class="">
-						<image class="nav-img" src="@/static/img/takeout/bg-back.png" mode="scaleToFill"></image>
+						<image class="nav-img" @click="toBack()" src="@/static/img/takeout/bg-back.png" mode="scaleToFill"></image>
 					</view>
 				</template>
 			</Nav>
@@ -14,7 +14,29 @@
 		
 		<view class="head-box bgc-f box-border-box plr-24" :style="{height:domHeigjt + 'rpx'}">
 			<view id="shopInfoBox" class="shop-info-box bgc-f box-border-box p-24">
-				
+				<view class="info-box-top flex-justify-space">
+					<view class="box-top-left">
+						<view class="top-left-1 fs-40 fw-600 text-overflow-ellipsis-one">猪油拌猪油拌饭猪油拌猪油拌饭猪油拌饭猪油拌（回兴店）</view>
+						<view class="align-items-center mb-8">
+							<image class="img-x mr-12" src="@/static/img/my/wdpj.png" mode=""></image>
+							<view class="fs-26 fw-600 fc-FF7F00 mr-12">4.5分</view>
+							<view class="fc-6 fs-24 mr-12">| 预计38分钟 |</view>
+							<view class="fc-6 fs-24 mr-12">855人购买</view>
+						</view>
+					</view>
+					<image class="box-top-right" src="@/static/img/my/bg.png" mode="scaleToFill"></image>
+				</view>
+				<view class="fs-24 fw-400 fc-9 mb-20">
+					公告：公告内容公告内容公告内容公告内容公告内11容公公告内容公告内容公告内容公告内容公告内公告内容公告内容公告内容公告内容公告内
+				</view>
+				<view class="flex-wrap-wrap">
+					<view class="info-box-quan-list" v-for="(item,i) in 4" :key="i">
+						<image src="@/static/img/takeout/quan-bg.png" mode=""></image>
+						<view class="quan-list-1 fw-b fs-32 fc-f">
+							<span class="fw-b fs-20 fc-f">￥</span>10</view>
+						<view class="quan-list-2 fw-400 fs-24 fc-f">领</view>
+					</view>
+				</view>
 			</view>
 		</view>
 		
@@ -35,9 +57,41 @@
 			<Menu style="height: 100%;" v-show="shopType === 1"></Menu>
 		</view>
 		
-		<view class="shop-buttom-money">
-			
+		<view class="shop-buttom-money box-border-box" @click="openBuyCrad()">
+			<view class="shop-buttom-money-1 flex-justify-space align-items-center">
+				<image src="@/static/img/takeout/buy-icon.png" mode="scaleToFill"></image>
+				<view class="shop-buttom-num fs-24 fc-f text-align-center">3</view>
+				<view class="">
+					<view class="">
+						<span class="fw-600 fs-24 fc-f">￥</span>
+						<span class="fw-600 fs-44 fc-f">19.26</span>
+					</view>
+					<!-- <view class="fs-24 fc-ADADAD">免配送</view> -->
+					<view class="fs-24 fc-ff3939">配送费￥10</view>
+				</view>
+				<view class="fs-32 fw-600 fc-f">20元起送</view>
+			</view>
 		</view>
+		
+		<uni-popup ref="popupBuy" type="bottom">
+			<view class="buy-card">
+				<view class="buy-card-top box-border-box plr-32 flex-justify-space align-items-center">
+					<view class="">
+						<span class="fs-32 fc-3 mr-12">已选商品</span>
+						<span class="fs-32 fc-9">(打包费<span class="fs-32 fc-FB3D03">8元</span>)</span>
+					</view>
+					<view class="fs-28 fw-400 fc-9 align-items-center">
+						<view class="">
+							<uni-icons type="trash" size="18" color="#999"></uni-icons>
+						</view>
+						<view class="fs-28 fw-400 fc-9">清空</view>
+					</view>
+				</view>
+				<view class="scroll-view-css">
+					
+				</view>
+			</view>
+		</uni-popup>
 	</view>
 </template>
 
@@ -63,6 +117,9 @@
 			this.getDomH();
 		},
 		methods:{
+			toBack(){
+				tools.leftClick()
+			},
 			getDomH(){
 				let info = uni.createSelectorQuery().select('#shopInfoBox');
 				info.boundingClientRect((data)=>{
@@ -85,6 +142,9 @@
 					}
 				}
 			},
+			openBuyCrad(){
+				this.$refs.popupBuy.open()
+			},
 		},
 	}
 </script>
@@ -111,8 +171,35 @@
 		.shop-buttom-money{
 			width: 100%;
 			height: 140rpx;
-			// background: rgba(255,255,255,0.8);
-			background-color: #ccc;
+			background: rgba(255,255,255,0.8);
+			padding: 20rpx 24rpx;
+			.shop-buttom-money-1{
+				width: 100%;
+				height: 100%;
+				background: #333333;
+				border-radius: 200rpx;
+				box-sizing: border-box;
+				padding-left: 136rpx;
+				padding-right: 32rpx;
+				position: relative;
+				image{
+					position: absolute;
+					bottom: 0;
+					left: 8rpx;
+					width: 128rpx;
+					height: 128rpx;
+				}
+				.shop-buttom-num{
+					width: 32rpx;
+					height: 32rpx;
+					line-height: 32rpx;
+					background: #FB3D03;
+					border-radius: 50%;
+					position: absolute;
+					top: 36rpx;
+					left: 82rpx;
+				}
+			}
 		}
 		
 		
@@ -127,6 +214,49 @@
 				min-height: 258rpx;
 				border-radius: 20rpx;
 				box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0,0,0,0.1);
+				.info-box-top{
+					.box-top-left{
+						.top-left-1{
+							width: 480rpx;
+							margin-bottom: 8rpx;
+						}
+						.img-x{
+							width: 24rpx;
+							height: 24rpx;
+						}
+					}
+					.box-top-right{
+						width: 100rpx;
+						height: 100rpx;
+						border-radius: 12rpx;
+					}
+				}
+				.info-box-quan-list{
+					width: 124rpx;
+					height: 48rpx;
+					margin: 0 8rpx 8rpx 0;
+					position: relative;
+					image{
+						width: 124rpx;
+						height: 48rpx;
+						position: absolute;
+						top: 0;
+						left: 0;
+						z-index: 1;
+					}
+					.quan-list-1{
+						position: absolute;
+						top: 3rpx;
+						left: 8rpx;
+						z-index: 2;
+					}
+					.quan-list-2{
+						position: absolute;
+						top: 8rpx;
+						right: 12rpx;
+						z-index: 2;
+					}
+				}
 			}
 		}
 		.head-box-1{
@@ -165,7 +295,18 @@
 				}
 			}
 		}
-		
+		.buy-card{
+			height: 828rpx;
+			background-color: #fff;
+			border-radius: 24rpx 24rpx 0rpx 0rpx;
+			.buy-card-top{
+				width: 100%;
+				height: 92rpx;
+				background: #FCF5DB;
+				border-radius: 24rpx 24rpx 0rpx 0rpx;
+			
+			}
+		}
 		
 	}
 </style>

service/tools.js

@@ -58,9 +58,13 @@ tools.formatDecimal = function (num, decimal) {
  * @param msg
  */
 tools.error = function (msg) {
+	let type = 'error'
+	if(msg.length > 7){
+		type = 'none'
+	}
     uni.showToast({
         'title': msg,
-        'icon': 'error',
+        'icon': type,
         'mask': true,
         'duration': 1500
     })