1

components/swipers/index.vue

@@ -42,7 +42,7 @@
 	</script>
 
 <style scoped lang="scss">
-	.swiper{width:100%;height:282rpx;position:relative;}
+	.swiper{width:100%;height:440rpx;position:relative;}
 	.swiper swiper{width:100%;height:100%;position:relative;}
 	.swiper swiper .slide-image{width:100%;height:100%;}
 	.swiper .dots{position:absolute;right:40rpx;bottom:20rpx;}

config/app.js

@@ -6,8 +6,8 @@ let VUE_APP_WS_URL = `ws://${location.hostname}?type=user`
 let openPlantGrass = '-openPlantGrass-'
 
 // 网络接口修改此字符 小程序域名要求https
-// let httpApi = 'http://192.168.31.106:8324' //测试
+let httpApi = 'http://many.shop.lo' //测试
-let httpApi = 'https://plus.hwms.shop' //生产
+// let httpApi = 'https://plus.hwms.shop' //生产
 
 // 聊天接口修改此字符 小程序聊天要求wss 例如：wss://mer. .net
 // let wsApi = 'ws://192.168.3.20:8324'

pages.json

@@ -53,6 +53,26 @@
 
 			}
 		},
+		{
+			"path": "pages/shop/index",
+			"style": {
+				"navigationStyle": "custom"
+				// #ifdef MP || APP-PLUS	
+				,
+				"navigationBarBackgroundColor": "#F2F2F2"
+				// #endif
+			}
+		},
+		{
+			"path": "pages/shop_details/index",
+			"style": {
+				"navigationStyle": "custom"
+				// #ifdef MP || APP-PLUS	
+				,
+				"navigationBarBackgroundColor": "#F2F2F2"
+				// #endif
+			}
+		},
 		{
 			"path": "pages/goods_details/index",
 			"style": {
@@ -1300,10 +1320,10 @@
 				"text": "分类"
 			},
 			{
-				"pagePath": "pages/plant_grass/index",
+				"pagePath": "pages/shop/index",
 				"iconPath": "static/images/5-001.png",
 				"selectedIconPath": "static/images/5-002.png",
-				"text": "逛逛"
+				"text": "门店"
 			},
 			{
 				"pagePath": "pages/order_addcart/order_addcart",

pages/shop/index.vue

@@ -0,0 +1,11 @@
+<template>
+	<navigator class="" url="/pages/shop_details/index">
+		跳转门店详情
+	</navigator>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>

pages/shop_details/index.vue

@@ -0,0 +1,159 @@
+<template>
+	<view class="shop_details">
+		<view class="head">
+			<swipers :imgUrls="shopInfo.swiper_image"></swipers>
+			<view class="back"><i class="iconfont icon-xiangzuo"></i></view>
+		</view>
+		<view class="main">
+			<view class="title">
+				<view class="title_left">
+					<image src="@/static/images/shop_bg.png" mode=""></image>
+				</view>
+				<view class="title_right">
+					<view class="txt">特色餐厅(朝阳总店)</view>
+					<view class="grade">
+						<text>评分4.5分</text>
+					</view>
+					<view class="desc">位置好找，菜味道不错，价格实惠</view>
+					<view class="site">北京市东城区朝阳门内大街···</view>
+				</view>
+			</view>
+			<view class="business">
+				<view class="business_one">营业中</view>
+				<view class="business_one">
+					<text>周一到周日</text>
+					<text>09：00 - 22：00</text>
+				</view>
+				<view class="business_list">
+					<text>WiFi</text>
+					<text>充电宝</text>
+					<text>停车场</text>
+					<text>茶水</text>
+					<text>饮料</text>
+				</view>
+			</view>
+			<view class="tabs">
+				<view class="tabs_nav">
+					<view class="tabs_item">信息</view>
+					<view class="tabs_item">评论</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import swipers from '@/components/swipers';
+	export default {
+		components:{swipers},
+		data(){
+			return {
+				shopInfo:{
+					swiper_image:[{img:'/static/images/shop_bg.png'}]
+				}
+			}
+		},
+		methods:{
+			
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.shop_details{
+		font-family: PingFang SC;
+		.head{
+			position: relative;
+			.back{
+				position: absolute;
+				top: 88rpx;
+				left: 40rpx;
+				color: #fff;
+				.iconfont{
+					font-size: 40rpx;
+				}
+			}
+		}
+		.main{
+			position: relative;
+			height: calc(100vh - 400rpx);
+			background: #fff;
+			margin-top: -40rpx;
+			border-radius: 32rpx 32rpx 0 0;
+			padding: 28rpx;
+			.title{
+				display: flex;
+				flex-direction: row;
+				
+				.title_left{
+					image{
+						width: 160rpx;
+						height: 160rpx;
+						border-radius: 12rpx;
+					}
+				}
+				.title_right{
+					margin-left: 10rpx;
+					.txt{
+						font-size: 32rpx;
+						color: #333333;
+					}
+					.grade,.desc,.site{
+						font-size: 24rpx;
+						margin-top: 8rpx;
+					}
+					.grade{
+						color: #FE8C16;
+					}
+					.desc{
+						color: #4E4E4E;
+					}
+					.site{
+						color: #999999;
+					}
+				}
+			}
+			.business{
+				margin-top: 40rpx;
+				background-color: rgba(236, 239, 244, 0.84);
+				border-radius: 16rpx;
+				padding: 24rpx;
+				&_one{
+					font-size: 28rpx;
+					&:nth-child(1){
+						color: #333333;
+					}
+					&:nth-child(2){
+						margin-top: 12rpx;
+						color: #999;
+					}
+				}
+				&_list{
+					margin-top: 12rpx;
+					text{
+						font-size: 24rpx;
+						color: #1372F5;
+						border: #1372F5 1px solid;
+						border-radius: 8rpx;
+						padding: 0 16rpx;
+						&:not(:first-child){
+							margin-left: 20rpx;
+						}
+					}
+				}
+			}
+			.tabs{
+				margin-top: 40rpx;
+				&_nav{
+					display: flex;
+					flex-direction: row;
+				}
+				&_item{
+					& + .tabs_item{
+						margin-left: 68rpx;
+					}
+				}
+			}
+		}
+	}
+</style>