页面

component/customTabbar/index.vue

@@ -48,7 +48,7 @@ export default {
 			icon: '/static/resource/images/home-w.png', 
 			activeIcon: '/static/resource/images/home_b.png' ,
 		},
-        { label: '服务', name: 'service', url: '/pages/index/index', 
+        { label: '服务', name: 'service', url: '/pages/service/service', 
 			icon: '/static/resource/images/service_w.png',
 			activeIcon: '/static/resource/images/home_b.png' ,
 		},
@@ -65,7 +65,6 @@ export default {
         is_auth: 0,
         status: 0
       },
-	  accountInfo: uni.getAccountInfoSync(),
 	  plate_number: '',
 	  isScanCondeRentalCar: false,
     };

pages.json

@@ -169,6 +169,12 @@
 		},
 		{
 			"path": "pages/package/package",
+			"style": {
+				"navigationBarTitleText": "我的套餐"
+			}
+		},
+		{
+			"path": "pages/buyPackage/buyPackage",
 			"style": {
 				"navigationBarTitleText": "套餐"
 			}
@@ -197,6 +203,12 @@
 				"navigationBarTitleText": "确认订单"
 			}
 		},
+		{
+			"path": "pages/storeDetails/storeDetails",
+			"style": {
+				"navigationBarTitleText": "门店详情"
+			}
+		},
 		
 		
 		{
@@ -238,6 +250,11 @@
 				"text": "租车",
 				"iconPath": "static/resource/images/home-w.png",
 				"selectedIconPath": "static/resource/images/home-b.png"
+			},{
+				"pagePath": "pages/service/service",
+				"text": "租车",
+				"iconPath": "static/resource/images/home-w.png",
+				"selectedIconPath": "static/resource/images/home-b.png"
 			},
 			{
 				"pagePath": "pages/my/my",

pages/buyPackage/buyPackage.css

@@ -0,0 +1,93 @@
+.container {
+	
+}
+
+.top-img {
+	width: 100%;
+	height: 614rpx;
+}
+
+.type-top {
+	background: linear-gradient( to bottom, #FFDBAC 0%, #FFF3E3 100%);
+	padding: 0 32rpx;
+}
+
+.type-top > view {
+	background: linear-gradient( to bottom, #FFD4CD 0%, #FF764B 16%, #FF4223 100%);
+	border-radius: 40rpx 40rpx 0rpx 0rpx;
+	color: #FFFFFF;
+	font-size: 40rpx;
+	padding: 30rpx 0 26rpx 40rpx;
+}
+
+.type-box {
+	background-color: #FFF3E3;
+	padding: 0 32rpx 40rpx;
+}
+
+.type-card {
+	background-color: #FFFFFF;
+	padding: 0rpx 32rpx 32rpx;
+	border-radius: 0rpx 0rpx 40rpx 40rpx;
+}
+
+.card-item {
+	padding-top: 40rpx;
+}
+
+.item-left {
+	margin-bottom: 24rpx;
+}
+
+.item-top > img {
+	width: 112rpx;
+	height: 112rpx;
+	margin-right: 24rpx;
+}
+
+.top-center > view:nth-of-type(1) {
+	color: #2A3A5A;
+	font-size: 32rpx;
+	font-weight: bold;
+	margin-bottom: 12rpx;
+}
+
+.top-center > view:nth-of-type(2) {
+	display: flex;
+	align-items: flex-end;
+	color: #FE5135;
+	font-size: 28rpx;
+}
+
+.top-center > view:nth-of-type(2) text {
+	color: #FE5135;
+	font-size: 40rpx;
+	font-weight: bold;
+}
+
+del {
+	color: #8C8C8C;
+	text-decoration: line-through;
+	margin-left: 8rpx;
+}
+
+.buy-btn {
+	color: #FFFFFF;
+	font-size: 24rpx;
+	border-radius: 40rpx;
+	background-color: #0074FF;
+	padding: 12rpx 32rpx;
+}
+
+.item-bottom {
+	
+}
+
+.item-bottom > view {
+	color: #FE6000;
+	font-size: 20rpx;
+	font-weight: 400;
+	border-radius: 20rpx;
+	border: 1rpx solid #FE6000;
+	padding: 6rpx 16rpx;
+}

pages/buyPackage/buyPackage.vue

@@ -0,0 +1,83 @@
+<template>
+	<view class="container">
+		<img class="top-img" src="https://qiniu.bms16.com/FqDJdcyQZUG7rwTz2zoqkKsxkUrx" />
+		<view class="type-top">
+			<view>券包类型</view>
+		</view>
+		<view class="type-box">
+			<view class="type-card">
+				<!-- 单个套餐 -->
+				<view class="card-item">
+					<view class="item-left flex-row flex-between">
+						<view class="item-top flex-row">
+							<img src="https://qiniu.bms16.com/FiJc2aTl5Q2H6IxbLq8nul6ywZi1" />
+							<view class="top-center">
+								<view>优惠券</view>
+								<view>￥<text>18.5</text><del>￥70</del></view>
+							</view>
+						</view>
+						<view class="buy-btn">购买立享</view>
+					</view>
+					<view class="item-bottom flex-row">
+						<view>折合0.7元/时</view>
+						<view style="margin-left: 16rpx;">立享2.3折优惠</view>
+					</view>
+				</view>
+				<view class="card-item">
+					<view class="item-left flex-row flex-between">
+						<view class="item-top flex-row">
+							<img src="https://qiniu.bms16.com/FiJc2aTl5Q2H6IxbLq8nul6ywZi1" />
+							<view class="top-center">
+								<view>优惠券</view>
+								<view>￥<text>18.5</text><del>￥70</del></view>
+							</view>
+						</view>
+						<view class="buy-btn">购买立享</view>
+					</view>
+					<view class="item-bottom flex-row">
+						<view>折合0.7元/时</view>
+						<view style="margin-left: 16rpx;">立享2.3折优惠</view>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			};
+		}
+		/**
+		 * 生命周期函数--监听页面加载
+		 */
+		,
+		onLoad: function(options) {
+			
+		},
+		/**
+		 * 生命周期函数--监听页面显示
+		 */
+		onShow: function() {
+			
+		},
+		methods: {
+			navToPage(e) {
+				const url = e.currentTarget.dataset.url;
+				if (!url) {
+					return;
+				}
+				uni.navigateTo({
+					url: url
+				});
+			},
+		}
+	};
+</script>
+
+<style>
+	@import './buyPackage.css';
+</style>

pages/package/package.css

@@ -1,93 +1,177 @@
-.container {
+.container-view {
 	
 }
 
-.top-img {
-	width: 100%;
-	height: 614rpx;
+.top-bg {
+	height: 396rpx;
+	background: url('https://qiniu.bms16.com/Fvu5ulYgrXiB_0cXs715TcvYYnsb') no-repeat;
+	background-size: cover;
 }
 
-.type-top {
-	background: linear-gradient( to bottom, #FFDBAC 0%, #FFF3E3 100%);
-	padding: 0 32rpx;
+.return-view {
+	width: 40rpx;
+	height: 40rpx;
+	margin-left: 32rpx;
 }
 
-.type-top > view {
-	background: linear-gradient( to bottom, #FFD4CD 0%, #FF764B 16%, #FF4223 100%);
-	border-radius: 40rpx 40rpx 0rpx 0rpx;
+.top-text {
+	margin-left: 230rpx;
 	color: #FFFFFF;
+	font-size: 36rpx;
+	font-weight: 500;
+	line-height: 36rpx;
+	text-align: center;
+	font-style: normal;
+	font-family: PingFangSC, PingFang SC;
+}
+
+.package-card {
+	/* margin-top: -100rpx;
+	margin-bottom: 20rpx; */
+	margin: 24rpx;
+	padding: 36rpx 22rpx 0rpx 32rpx;
+	border-radius: 40rpx;
+	align-items: flex-start;
+	border: 4rpx solid #FFFFFF;
+	background: linear-gradient( 135deg, #DEEAFF 0%, rgba(220,244,251,0.4) 50%, #DAFFF6 100%), #FFFFFF;
+}
+
+.left-first {
+	margin-bottom: 50rpx;
+	align-items: baseline;
+	color: #060809;
 	font-size: 40rpx;
-	padding: 30rpx 0 26rpx 40rpx;
+	font-weight: 600;
+	line-height: 38rpx;
+	font-style: normal;
+	font-family: DIN, DIN;
 }
 
-.type-box {
-	background-color: #FFF3E3;
-	padding: 0 32rpx 40rpx;
+.left-img {
+	margin-left: 10rpx;
+	width: 14rpx;
+	height: 14rpx;
+	vertical-align: bottom;
 }
 
-.type-card {
-	background-color: #FFFFFF;
-	padding: 0rpx 32rpx 32rpx;
-	border-radius: 0rpx 0rpx 40rpx 40rpx;
+.left-second {
+	margin-bottom: 20rpx;
+	color: #060809;
+	font-size: 28rpx;
+	font-weight: 500;
+	line-height: 28rpx;
+	font-style: normal;
+	font-family: PingFangSC, PingFang SC;
 }
 
-.card-item {
-	padding-top: 40rpx;
+.left-second text {
+	font-size: 30rpx;
+	line-height: 26rpx;
+	font-family: Futura Medium;
 }
 
-.item-left {
-	margin-bottom: 24rpx;
+.left-third {
+	color: #90989C;
+	font-size: 28rpx;
+	font-weight: 500;
+	line-height: 28rpx;
+	font-style: normal;
+	font-family: PingFangSC, PingFang SC;
 }
 
-.item-top > img {
-	width: 112rpx;
-	height: 112rpx;
-	margin-right: 24rpx;
+.left-third text {
+	margin-left: 10rpx;
+	font-size: 30rpx;
+	line-height: 26rpx;
+	font-family: Futura Medium;
 }
 
-.top-center > view:nth-of-type(1) {
-	color: #2A3A5A;
-	font-size: 32rpx;
-	font-weight: bold;
-	margin-bottom: 12rpx;
+.card-right {
+	width: 180rpx;
+	height: 212rpx;
 }
 
-.top-center > view:nth-of-type(2) {
-	display: flex;
-	align-items: flex-end;
-	color: #FE5135;
-	font-size: 28rpx;
+.box-view {
+	padding-left: 24rpx;
+	padding-right: 24rpx;
+	margin-top: 68rpx;
 }
 
-.top-center > view:nth-of-type(2) text {
-	color: #FE5135;
-	font-size: 40rpx;
-	font-weight: bold;
+.package-view {
+	padding: 40rpx 32rpx;
+	background: #FFFFFF;
+	border-radius: 32rpx;
+	margin-bottom: 20rpx;
 }
 
-del {
-	color: #8C8C8C;
-	text-decoration: line-through;
-	margin-left: 8rpx;
+.top-view {
+	margin-bottom: 32rpx;
+	padding-bottom: 28rpx;
+	border-bottom: 2rpx solid #F4F5F6;
 }
 
-.buy-btn {
-	color: #FFFFFF;
-	font-size: 24rpx;
-	border-radius: 40rpx;
-	background-color: #0074FF;
-	padding: 12rpx 32rpx;
+.top-title {
+	color: #060809;
+	font-size: 42rpx;
+	font-weight: 600;
+	line-height: 34rpx;
+	text-align: center;
+	font-family: Futura, Futura;
 }
 
-.item-bottom {
-	
+.top-title text {
+	font-size: 36rpx;
+	line-height: 36rpx;
+	font-family: PingFangSC, PingFang SC;
 }
 
-.item-bottom > view {
-	color: #FE6000;
-	font-size: 20rpx;
+.card-text {
+	height: 44rpx;
+	padding-left: 20rpx;
+	padding-right: 20rpx;
+	border-radius: 22rpx;
+	font-size: 26rpx;
+	font-weight: 500;
+	line-height: 44rpx;
+	text-align: center;
+	font-style: normal;
+	font-family: PingFangSC, PingFang SC;
+}
+
+.card-b {
+	background: #F3F8FF;
+	color: #0D52FC;
+}
+
+.card-o {
+	background: #FFF1E8;
+	color: #FF791A;
+}
+
+.package-item {
+	display: flex;
+}
+
+.item-title {
+	color: #9FA7B7;
+	font-size: 28rpx;
 	font-weight: 400;
-	border-radius: 20rpx;
-	border: 1rpx solid #FE6000;
-	padding: 6rpx 16rpx;
+	margin-right: 32rpx;
+	line-height: 28rpx;
+	font-style: normal;
+	font-family: PingFangSC, PingFang SC;
+}
+
+.item-info {
+	color: #060809;
+	font-size: 30rpx;
+	font-weight: 500;
+	line-height: 28rpx;
+	font-style: normal;
+	font-family: Futura Medium;
+}
+
+.item-info text {
+	color: #9FA7B7;
+	font-size: 30rpx;
 }

pages/package/package.vue

@@ -1,43 +1,62 @@
 <template>
-	<view class="container">
-		<img class="top-img" src="https://qiniu.bms16.com/FqDJdcyQZUG7rwTz2zoqkKsxkUrx" />
-		<view class="type-top">
-			<view>券包类型</view>
-		</view>
-		<view class="type-box">
-			<view class="type-card">
-				<!-- 单个套餐 -->
-				<view class="card-item">
-					<view class="item-left flex-row flex-between">
-						<view class="item-top flex-row">
-							<img src="https://qiniu.bms16.com/FiJc2aTl5Q2H6IxbLq8nul6ywZi1" />
-							<view class="top-center">
-								<view>优惠券</view>
-								<view>￥<text>18.5</text><del>￥70</del></view>
-							</view>
-						</view>
-						<view class="buy-btn">购买立享</view>
+	<view class="container-view">
+		<view class="top-bg" :style="'padding-top:'+statusBarHeight+'px;'">
+			<view class="flex-row" :style="'height:'+navabarHeight+'px;'">
+				<view class="flex-row" @tap="bindReturnView"><img class="return-view" src="https://qiniu.bms16.com/FnHXbzly7aXi8zLghrTU5BZdwH5_" /></view>
+				<text class="top-text">我的套餐</text>
+			</view>
+			
+			<view class="package-card flex-row flex-between">
+				<view class="flex-row flex-column" style="align-items: flex-start;">
+					<view class="left-first flex-row">
+						<view>小米 Su7</view>
+						<img class="left-img" src="https://qiniu.bms16.com/Fpf25Lkkrx05pvLw08mksVQKAQWf" />
+					</view>
+					<view class="left-second flex-row">
+						<view style="margin-right: 32rpx;">适用电池:<text>48v20Ah</text></view>
+						<view>押金:<text>$5.0</text></view>
 					</view>
-					<view class="item-bottom flex-row">
-						<view>折合0.7元/时</view>
-						<view style="margin-left: 16rpx;">立享2.3折优惠</view>
+					<view class="left-third">
+						<view>卡号:<text>2024110202578</text></view>
 					</view>
 				</view>
-				<view class="card-item">
-					<view class="item-left flex-row flex-between">
-						<view class="item-top flex-row">
-							<img src="https://qiniu.bms16.com/FiJc2aTl5Q2H6IxbLq8nul6ywZi1" />
-							<view class="top-center">
-								<view>优惠券</view>
-								<view>￥<text>18.5</text><del>￥70</del></view>
-							</view>
-						</view>
-						<view class="buy-btn">购买立享</view>
+				<img class="card-right" src="https://qiniu.bms16.com/FuOJQxzypa-NginyHGdsWlzwnB8z" />
+			</view>
+		</view>
+		<view class="box-view">
+			<!-- <view class="package-card flex-row flex-between">
+				<view class="flex-row flex-column" style="align-items: flex-start;">
+					<view class="left-first flex-row">
+						<view>小米 Su7</view>
+						<img class="left-img" src="https://qiniu.bms16.com/Fpf25Lkkrx05pvLw08mksVQKAQWf" />
 					</view>
-					<view class="item-bottom flex-row">
-						<view>折合0.7元/时</view>
-						<view style="margin-left: 16rpx;">立享2.3折优惠</view>
+					<view class="left-second flex-row">
+						<view style="margin-right: 32rpx;">适用电池:<text>48v20Ah</text></view>
+						<view>押金:<text>$5.0</text></view>
 					</view>
+					<view class="left-third">
+						<view>卡号:<text>2024110202578</text></view>
+					</view>
+				</view>
+				<img class="card-right" src="https://qiniu.bms16.com/FuOJQxzypa-NginyHGdsWlzwnB8z" />
+			</view> -->
+			<view class="package-view" v-for="item in packageList">
+				<view class="top-view flex-row flex-between">
+					<view class="top-title">{{item.total_duration}}<text> 天 </text>{{item.total_times}}<text> 次 </text></view>
+					<view v-if="item.status==1" class="card-text card-b">生效中</view>
+					<view v-if="item.status==2" class="card-text card-o">待生效</view>
+				</view>
+				<view class="package-item" style="margin-bottom: 32rpx;">
+					<view class="item-title">有效期至</view>
+					<view class="item-info">{{item.ctime}}</view>
+				</view>
+				<view class="package-item" style="margin-bottom: 32rpx;">
+					<view class="item-title">有效时长</view>
+					<view class="item-info">{{item.efficient_day}}<text>/{{item.total_duration}}天</text></view>
+				</view>
+				<view class="package-item">
+					<view class="item-title">免费换电数</view>
+					<view class="item-info">{{item.change_rate}}<text>/{{item.total_times}}次</text></view>
 				</view>
 			</view>
 		</view>
@@ -45,18 +64,38 @@
 </template>
 
 <script>
+	var config = require('../../common/config.js');
+	var common = require('../../common/common.js');
+	var http = require('../../common/http.js');
+	var storage = require('../../common/storage.js');
 	export default {
+		components: {
+			
+		},
 		data() {
 			return {
-				
+				statusBarHeight: 0,
+				navabarHeight: 0,
+				packageList: [
+					{ctime: '2024-04-04 16:15',total_duration: 30,efficient_day: 24,change_rate: 6,total_times: 10,status:1},
+					{ctime: '2024-04-04 16:15',total_duration: 30,efficient_day: 24,change_rate: 6,total_times: 10,status:2},
+				]
 			};
-		}
+		},
 		/**
 		 * 生命周期函数--监听页面加载
 		 */
-		,
 		onLoad: function(options) {
-			
+			const clientRect = uni.getMenuButtonBoundingClientRect()
+			const sysinfo = uni.getSystemInfoSync()
+			let GAP = 8
+			// #ifdef MP-ALIPAY
+			GAP = 0
+			// #endif
+			const navabarHeight = (clientRect.bottom - sysinfo.statusBarHeight) + (clientRect.top - sysinfo.statusBarHeight) + GAP
+			this.navabarHeight = navabarHeight
+			this.statusBarHeight = sysinfo.statusBarHeight
+			this.mapCtx = uni.createMapContext('myMap');
 		},
 		/**
 		 * 生命周期函数--监听页面显示
@@ -65,14 +104,10 @@
 			
 		},
 		methods: {
-			navToPage(e) {
-				const url = e.currentTarget.dataset.url;
-				if (!url) {
-					return;
-				}
-				uni.navigateTo({
-					url: url
-				});
+			bindReturnView() {
+				uni.navigateBack({
+					delta: 1,
+				}) // 返回上一页
 			},
 		}
 	};

pages/service/components/cabinetList/cabinetList.css

@@ -0,0 +1,51 @@
+.cabinet-list-main{
+	background: #FFFFFF;
+	border-radius: 32rpx;
+	padding: 32rpx;
+}
+.cabinet-name{
+	font-weight: 600;
+	font-size: 36rpx;
+	color: #060809;
+}
+.cabinet-distance{
+	font-family: DIN, DIN;
+	font-weight: 600;
+	font-size: 26rpx;
+	color: #0A59F7;
+	padding: 6rpx 20rpx;
+	background: #E6EEFE;
+	border-radius: 20rpx;
+}
+.battery-list-view{
+	margin: 20rpx 0 32rpx;
+}
+.battery-view{
+	background: rgba(10,89,247,0.1);
+	border-radius: 8rpx;
+	width: 228rpx;
+	display: flex;
+	justify-content: space-between;
+	height: 48rpx;
+	line-height: 48rpx;
+}
+.battery-voltage{
+	font-weight: 500;
+	font-size: 30rpx;
+	color: #060809;
+	width: 100%;
+	text-align: center;
+}
+.battery-num{
+	background: #0A59F7;
+	border-radius: 8rpx 8rpx 8rpx 0rpx;
+	font-family: DIN, DIN;
+	font-weight: bold;
+	font-size: 30rpx;
+	color: #FFFFFF;
+	width: 66rpx;
+	text-align: center;
+}
+.flex-end{
+	justify-content: flex-end;
+}

pages/service/components/cabinetList/cabinetList.vue

@@ -0,0 +1,38 @@
+<template>
+	<view class="cabinet-list-main">
+		<view class="flex-row flex-between">
+			<view class="cabinet-name">这里是一个电柜的名称</view>
+			<view class="cabinet-distance">240m</view>
+		</view>
+		<view class="battery-list-view">
+			<view class="battery-view">
+				<text class="battery-voltage">48V/20Ah</text>
+				<text class="battery-num">*7</text>
+			</view>
+		</view>
+		<view class="flex-row flex-end">
+			<img style="width: 112rpx;height: 64rpx;" src="https://qiniu.bms16.com/Fts38M35doVjK09GfOza5qD-wwkK" alt="">
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+			};
+		}
+		/**
+		 * 生命周期函数--监听页面加载
+		 */
+		,
+		onLoad: function(options) {
+		},
+		methods: {
+
+		}
+	};
+</script>
+<style>
+	@import './cabinetList.css';
+</style>

pages/service/components/unleasedPages/unleasedPages.vue

@@ -1,30 +0,0 @@
-<template>
-	<view class="unleased-pages-main">
-		<view class="recommend-car-name flex-row"></view>
-		<view class="recommend-car-tip">续航开新路 路遥见实力</view>
-		<view class="">
-			
-		</view>
-	</view>
-</template>
-
-<script>
-	export default {
-		data() {
-			return {
-			};
-		}
-		/**
-		 * 生命周期函数--监听页面加载
-		 */
-		,
-		onLoad: function(options) {
-		},
-		methods: {
-
-		}
-	};
-</script>
-<style>
-	@import './unleasedPages.css';
-</style>

pages/service/service.vue

@@ -17,7 +17,8 @@
 					<view class="screen-img"><img src="https://qiniu.bms16.com/FpElQHM5NbxHDjz1LrwaHYN668LR" alt=""></view>
 				</view>
 			</view>
-			<CarRentalList/>
+			<!-- <CarRentalList/> -->
+			<CabinetList/>
 		</view>
 		<leaseType/>
 	</view>
@@ -26,6 +27,7 @@
 <script>
 	import LeaseType from './components/leaseType/leaseType'
 	import CarRentalList from './components/carRentalList/carRentalList'
+	import CabinetList from './components/cabinetList/cabinetList'
 	export default {
 		data() {
 			return {
@@ -37,7 +39,8 @@
 		},
 		components: {
 			LeaseType,
-			CarRentalList
+			CarRentalList,
+			CabinetList
 		},
 		/**
 		 * 生命周期函数--监听页面加载

pages/storeDetails/storeDetails.css

@@ -0,0 +1,297 @@
+.store-img-view{
+	height: 500rpx;
+	width: 100%;
+}
+.p-bg{
+	background: #F1F3F4;
+	position: relative;
+	top: -152rpx;
+	z-index: 99;
+	width: 100vw;
+	padding: 0 24rpx;
+}
+.store-info-view{
+	padding: 32rpx;
+	background: #FFFFFF;
+	border-radius: 40rpx;
+	margin-bottom: 20rpx;
+}
+.store-name{
+	font-weight: 600;
+	font-size: 40rpx;
+	color: #060809;
+	margin-bottom: 24rpx;
+}
+.store-type{
+	border-radius: 8rpx;
+	border: 2rpx solid #0A59F7;
+	height: 48rpx;
+	line-height: 46rpx;
+	text-align: center;
+	font-weight: 600;
+	font-size: 24rpx;
+	color: #0A59F7;
+	width: 88rpx;
+	margin-right: 12rpx;
+}
+.store-num-type{
+	border-radius: 8rpx;
+	border: 2rpx solid #E7EAEE;
+	height: 48rpx;
+	line-height: 46rpx;
+	text-align: center;
+	font-weight: 600;
+	font-size: 24rpx;
+	color: #060809;
+	padding: 0 20rpx;
+}
+.store-num{
+	margin-right: 4rpx;
+	font-family: DIN, DIN;
+	font-weight: 600;
+	font-size: 30rpx;
+	color: #0A59F7;
+}
+.store-phone{
+	display: flex;
+	flex-grow: 1;
+	justify-content: flex-end;
+}
+.align-center{
+	align-items: center;
+}
+.left_grid_1 {
+	width: 222rpx;
+	height: 140rpx;
+	background: #F4F5F6;
+	border-radius: 16rpx;
+	padding-left: 24rpx;
+	padding-top: 28rpx;
+	margin-right: 16rpx;
+}
+
+.left_grid_2 {
+	width: 222rpx;
+	height: 140rpx;
+	background: #EBFFF8;
+	border-radius: 16rpx;
+	padding-left: 24rpx;
+	padding-top: 28rpx;
+	margin-right: 16rpx;
+}
+.grid_text_1 {
+	font-family: PingFangSC, PingFang SC;
+	font-weight: 500;
+	font-size: 32rpx;
+	color: #2A3A5A;
+	line-height: 32rpx;
+	text-align: left;
+	font-style: normal;
+	margin-left: 8rpx;
+}
+
+.grid_text_rest {
+	font-family: PingFangSC, PingFang SC;
+	font-weight: 500;
+	font-size: 32rpx;
+	color: #828DA2;
+	line-height: 32rpx;
+	text-align: left;
+	font-style: normal;
+	margin-left: 8rpx;
+}
+
+.grid_text_2 {
+	font-family: DIN, DIN;
+	font-weight: 500;
+	font-size: 26rpx;
+	color: #828DA2;
+	line-height: 24rpx;
+	text-align: left;
+	font-style: normal;
+	margin-top: 16rpx;
+}
+.right_grid {
+	width: 448rpx;
+	height: 140rpx;
+	background: #F3F8FF;
+	border-radius: 16rpx;
+	padding-left: 24rpx;
+	padding-top: 28rpx;
+	padding-right: 32rpx;
+	flex-direction: row;
+	display: flex;
+}
+.cab_distance {
+	font-family: PingFangSC, PingFang SC;
+	font-weight: 500;
+	font-size: 32rpx;
+	color: #2A3A5A;
+	line-height: 32rpx;
+	font-style: normal;
+}
+.cab_address {
+	width: 312rpx;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	font-family: PingFangSC, PingFang SC;
+	font-weight: 400;
+	font-size: 24rpx;
+	color: #828DA2;
+	line-height: 24rpx;
+	text-align: left;
+	font-style: normal;
+	padding-top: 26rpx;
+}
+.icon_grid_1 {
+	width: 48rpx;
+	height: 48rpx;
+}
+
+.grid_nav {
+	font-family: PingFangSC, PingFang SC;
+	font-weight: 500;
+	font-size: 24rpx;
+	color: #2A3A5A;
+	line-height: 24rpx;
+	text-align: right;
+	font-style: normal;
+}
+.tip-view{
+	background: #0A59F7;
+	border-radius: 50rpx;
+	margin-bottom: 20rpx;
+	/* height: 80rpx; */
+}
+.tip-title-view{
+	padding-left:24rpx ;
+	/* border-radius: 40rpx; */
+}
+.w-bg{
+	width: 100%;
+	height: 80rpx;
+	background: #FFFFFF;
+	border-radius: 0rpx 40rpx 0rpx 0rpx;
+}
+.step-view{
+	justify-content: space-around;
+	background: #FFFFFF;
+	padding: 32rpx 80rpx 0;
+	border-top-left-radius: 32rpx;
+}
+.icon-list-view>img{
+	width: 80rpx;
+	height: 72rpx;
+}
+.dashed-line{
+	/* border: 3rpx solid #F1F3F4; */
+	border-style: dashed;
+	border-width: 3rpx; /* 定义边框粗细 */
+	border-color: #F1F3F4; /* 定义边框颜色 */
+	width: 136rpx;
+	height: 2rpx;
+	display: flex;
+	flex-grow: 1;
+	padding: 0 80rpx;
+}
+.step-tip-view{
+	justify-content: space-around;
+	background-color: #FFF;
+	padding: 22rpx 24rpx 40rpx;
+	border-radius: 0rpx 0rpx 40rpx 40rpx;
+}
+.step-tip-text{
+	font-weight: 400;
+	font-size: 24rpx;
+	color: #060809;
+	opacity: 0.8;
+	
+}
+.step-tip-text:nth-child(2){
+	margin: 0 38rpx 0 40rpx;
+}
+.step-num-1{
+	width: 14rpx;
+	height: 22rpx;
+	margin-right: 4rpx;
+}
+.step-num-2{
+	width: 20rpx;
+	height: 22rpx;
+	margin-right: 4rpx;
+}
+.step-num-3{
+	width: 20rpx;
+	height: 24rpx;
+	margin-right: 4rpx;
+}
+
+
+.unit-type-view{
+	background-color: rgba(255, 255, 255, 1);
+	border-radius: 32rpx;
+	padding: 4rpx 4rpx 4rpx 4rpx;
+	display: inline-block;
+	margin-bottom: 20rpx;
+}
+.unit-type{
+	padding: 14rpx 38rpx;
+	display: inline-block;
+	font-weight: 400;
+	font-size: 26rpx;
+	color: #2A3A5A;
+}
+.unit-type-i{
+	background-color: rgba(10, 89, 247, 1);
+	border-radius: 32rpx;
+	font-weight: 500;
+	font-size: 26rpx;
+	color: #FFFFFF;
+}
+.car-info-view{
+	padding: 24rpx;
+	background: #FFFFFF;
+	border-radius: 40rpx;
+	margin-bottom: 20rpx;
+}
+.car-img{
+	width: 192rpx;
+	height: 192rpx;
+	border-radius: 24rpx;
+}
+.car-info{
+	margin-left: 24rpx;
+	flex-grow: 1;
+}
+.car-name{
+	font-weight: 600;
+	font-size: 32rpx;
+	color: #060809;
+	margin-bottom:16rpx;
+}
+.car-model-info{
+	font-weight: 400;
+	font-size: 24rpx;
+	color: #9FA7B7;
+	margin-bottom: 48rpx;
+}
+.unit-type-price{
+	font-weight: 400;
+	font-size: 28rpx;
+	color: #060809;
+	flex-grow: 1;
+	flex-wrap: nowrap;
+	justify-content: flex-start;
+	align-items: baseline;
+}
+.lease-btn{
+	width: 176rpx;
+	height: 64rpx;
+	background: #060809;
+	border-radius: 32rpx;
+	font-size: 32rpx;
+	color: #FFFFFF;
+	line-height: 64rpx;
+	text-align: center;
+}

pages/storeDetails/storeDetails.vue

@@ -0,0 +1,122 @@
+<template>
+	<view class="container">
+		<view class="store-img-view">
+			
+		</view>
+		<view class="p-bg">
+			<view class="store-info-view">
+				<view class="store-name">门店名字</view>
+				<view class="flex-row align-center" style="margin-bottom: 24rpx;">
+					<view class="store-type">租车</view>
+					<view class="store-type">租车</view>
+					<view class="store-type">租车</view>
+					<view class="store-num-type"> <text class="store-num">7</text> 款车型</view>
+					<view class="store-phone"><img style="width: 84rpx;height: 64rpx;" src="https://qiniu.bms16.com/Ft0YA1JYmq66hdoeEN-PgBHy5vLa" alt=""></view>
+				</view>
+				<view class="flex-row flex-between">
+					<view :class="isWorkTimer ? 'left_grid_2' : 'left_grid_1'">
+						<view class="flex-row">
+							<img style="width: 40rpx;height: 40rpx;"
+								:src="!isWorkTimer ? 'https://zxappfile.bms16.com/zx_admin/cab_timer.png' : 'https://zxappfile.bms16.com/zx_admin/cab_timer_work.png'">
+							<view :class="isWorkTimer ? 'grid_text_1' : 'grid_text_rest' ">{{isWorkTimer ? '营业中' : '已休息'}}
+							</view>
+						</view>
+						<view class="grid_text_2">{{shopInfo.work_begin_time}}-{{shopInfo.work_end_time}}</view>
+					</view>
+					<view @tap="bindToNav" class="right_grid flex-between">
+						<view>
+							<view class="cab_distance">
+								直线距您{{distance}}
+							</view>
+							<view class="cab_address">{{shopInfo.address}}</view>
+						</view>
+						<view >
+							<img class="icon_grid_1" src="https://zxappfile.bms16.com/zx_admin/cab_nav.png">
+							<view class="grid_nav">导航</view>
+						</view>
+					</view>
+				</view>
+			</view>
+			<view class="tip-view">
+				<view class="tip-title-view flex-row align-center">
+					<img style="width: 144rpx;height: 40rpx;" src="https://qiniu.bms16.com/FjUW1kuRvXWTEftyn9nH1AbGWuxK" alt="">
+					<img style="width: 86rpx;height: 80rpx;" src="https://qiniu.bms16.com/FibAaPERzqi6m95EP2jREUKixjUi" alt="">
+					<view class="w-bg flex-row"></view>
+				</view>
+				<view class="step-view flex-row  align-center">
+					<view class="icon-list-view"><img src="https://qiniu.bms16.com/Fp0BE27Q0VTD8qUJRHUVhWO6VEbO" alt=""></view>
+					<view class="dashed-line"></view>
+					<view class="icon-list-view"><img src="https://qiniu.bms16.com/FqDzYwAbnSEgf3yv9SAb92Vq4ZEB" alt=""></view>
+					<view class="dashed-line"></view>
+					<view class="icon-list-view"><img src="https://qiniu.bms16.com/FlFMHzco6j9XOpMI21tSnR9500Un" alt=""></view>
+				</view>
+				<view class="step-tip-view flex-row  align-center">
+					<view class="step-tip-text"><img class="step-num-1" src="https://qiniu.bms16.com/Fm4gMRmW6UOwLcU-eW8LDLNfiUJe" alt="">线上选择用车方案生成待支付订单</view>
+					<view class="step-tip-text"><img class="step-num-2" src="https://qiniu.bms16.com/FvYN7SxOYIhXEqSAJZrQIBQuTx79" alt="">导航到店向商家支付订单金额</view>
+					<view class="step-tip-text"><img class="step-num-3" src="https://qiniu.bms16.com/FhZ7w0X8iVuxFPdetEF9C3YYkJ7Z" alt="">支付完成后直接现场取车</view>
+				</view>
+			</view>
+			<view class="unit-type-view">
+				<view class="unit-type ">日租</view>
+				<view class="unit-type unit-type-i">日租</view>
+				<view class="unit-type ">日租</view>
+				<view class="unit-type ">日租</view>
+			</view>
+			<view class="car-info-list-view">
+				<view class="car-info-view align-center flex-row">
+					<img class="car-img" src="https://qiniu.bms16.com/FsxOysJT2V3KNYev2YWadvjyKn2j" alt="">
+					<view class="car-info">
+						<view class="car-name flex-row">基础智能电动车</view>
+						<view class="car-model-info">续航70km｜重量54kg</view>
+						<view class="flex-row flex-between">
+							<view class="unit-type-price flex-row"><text style="margin-right: 8rpx;">日租</text><priceTool :price="50" :font_size="40"/></view>
+							<view class="lease-btn">立即租</view>
+						</view>
+					</view>
+				</view>
+			</view>
+			
+		</view>
+	</view>
+</template>
+<script module="tools" lang="wxs" src="@/pages/common/wxs/tools.wxs"></script>
+<script module="tools" lang="sjs" src="@/pages/common/wxs/tools.sjs"></script>
+<script>
+	var config = require('../../common/config.js');
+	var common = require('../../common/common.js');
+	var http = require('../../common/http.js');
+	var storage = require('../../common/storage.js');
+	import priceTool from '@/component/priceTool/priceTool';
+	
+	export default {
+		components: {
+			priceTool
+		},
+		data() {
+			return {
+				
+			};
+		}
+		/**
+		 * 生命周期函数--监听页面加载
+		 */
+		,
+		onLoad: function(options) {
+			
+		},
+		/**
+		 * 生命周期函数--监听页面显示
+		 */
+		onShow: function() {
+			
+		},
+		methods: {
+		
+		}
+			
+		};
+</script>
+
+<style>
+	@import './storeDetails.css';
+</style>