页面

common/params.js

@@ -1,15 +1,15 @@
 module.exports = {
 	jybms_url: 'https://zd2.jybms.cn/',
 
-	api_web_url: 'https://zx.uwenya.cc/new_energy/server/api/web/',
-	up_img_url: 'https://zx.uwenya.cc/new_energy/server/api/web/',
-	gps_url: 'https://zx.uwenya.cc/new_energy/server/gps/web/',
-	map_url: 'https://map.bms16.com/',
+	// api_web_url: 'https://zx.uwenya.cc/new_energy/server/api/web/',
+	// up_img_url: 'https://zx.uwenya.cc/new_energy/server/api/web/',
+	// gps_url: 'https://zx.uwenya.cc/new_energy/server/gps/web/',
+	// map_url: 'https://map.bms16.com/',
 
-	// api_web_url: 'https://dev.bms16.com/new_energy/server/api/web/',
-	// up_img_url: 'https://dev.bms16.com/new_energy/server/api/web/',
-	// gps_url: 'https://dev.bms16.com/new_energy/server/api/web/',
-	// map_url: 'https://mapdev.bms16.com/'
+	api_web_url: 'https://dev.bms16.com/new_energy/server/api/web/',
+	up_img_url: 'https://dev.bms16.com/new_energy/server/api/web/',
+	gps_url: 'https://dev.bms16.com/new_energy/server/api/web/',
+	map_url: 'https://mapdev.bms16.com/'
 
 	// 预发布
 	// api_web_url: 'https://pre.bms16.com/new_energy/server/api/web/',

component/carPlan - 副本/carPlan.css

@@ -0,0 +1,27 @@
+.show-more {
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	z-index: 10;
+	width: 100%;
+	height: 100vh;
+	background-color: rgba(0, 0, 0, 0.4);
+}
+
+.more-info {
+	border-radius: 40rpx 40rpx 0rpx 0rpx;
+	overflow: hidden;
+	z-index: 100;
+	position: fixed;
+	bottom: 0;
+	width: 100%;
+	background: #F1F3F4;
+	height: 600rpx;
+}
+.model-title{
+	margin-bottom: 46rpx;
+	padding: 40rpx 32rpx 0rpx 32rpx;
+	font-weight: 600;
+	font-size: 40rpx;
+	color: #060809;
+}

component/carPlan - 副本/carPlan.vue

@@ -0,0 +1,51 @@
+<template>
+	<view  class="show-more">
+		<view class="more-info">
+			<view class="flex-row flex-between model-title">
+				<view>{{$t("更多功能")}}</view>
+				<view>
+					<image style="width: 32rpx;height: 32rpx;" @tap="isShowMore = false"
+						src="https://qiniu.bms16.com/FtoTEHOJiUf_gjPCJGGHMsAtHI5M" />
+				</view>
+			</view>
+			<view style="height: 300rpx;">
+				<view class="more-item flex-row">
+					<img class="more-img" src="https://qiniu.bms16.com/FgxiD-W96FGvgyLI_kXUfWVDYLQ9" alt="">
+					<text>{{$t("胎压")}}</text>
+				</view>
+				<view class="more-item flex-row">
+					<img class="more-img" src="https://qiniu.bms16.com/FgxiD-W96FGvgyLI_kXUfWVDYLQ9" alt="">
+					<text>{{$t("电池信息")}}</text>
+				</view>
+				<view @tap="navCarLocation" class="more-item flex-row">
+					<img class="more-img" src="https://qiniu.bms16.com/FgxiD-W96FGvgyLI_kXUfWVDYLQ9" alt="">
+					<text>{{$t("导航")}}</text>
+				</view>
+			</view>
+			<view class="lift-btn-view">
+				<view class="lift-btn">{{$t("解除绑定")}}</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {};
+		},
+		/**
+		 * 组件的属性列表
+		 */
+		props: {
+		},
+		/**
+		 * 组件的方法列表
+		 */
+		methods: {
+		}
+	};
+</script>
+<style scoped>
+	@import './carPlan.css';
+</style>

component/carPlan/carPlan.css

@@ -0,0 +1,197 @@
+.show-more {
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	z-index: 10;
+	width: 100%;
+	height: 100vh;
+	background-color:rgba(0, 0, 0, 0.4);;
+}
+
+.more-info {
+	border-radius: 40rpx 40rpx 0rpx 0rpx;
+	overflow: hidden;
+	z-index: 100;
+	position: fixed;
+	bottom: 0;
+	width: 100%;
+	background: #FFF;
+	height: 1100rpx;
+	padding: 40rpx 32rpx 48rpx;
+}
+.model-title{
+	margin-bottom: 46rpx;
+}
+.car-model-detail{
+	width: 100%;
+	flex-direction: column;
+	align-items: flex-start;
+	line-height: 1;
+}
+.car-model-price-view{
+	font-weight: 400;
+	font-size: 24rpx;
+	color: #060809;
+	margin: 10rpx 0;
+}
+.car-model-tip{
+	font-weight: 400;
+	font-size: 24rpx;
+	color: #060809;
+	opacity: 0.4;
+}
+.car-plan-title{
+	font-weight: 400;
+	font-size: 32rpx;
+	color: #060809;
+	margin-bottom: 32rpx;
+}
+.car-plan-list-view{
+	overflow-x: hidden;
+	margin-bottom: 28rpx;
+}
+.car-plan-list{
+	height: 158rpx;
+	flex-direction: column;
+	justify-content: center;
+	background: #F3F8FF;
+	border-radius: 16rpx;
+	min-width: 158rpx;
+	border: 4rpx solid transparent;
+	margin-right: 18rpx;
+}
+.car-plan-list-i{
+	height: 158rpx;
+	flex-direction: column;
+	justify-content: center;
+	background: #FFF;
+	border-radius: 16rpx;
+	min-width: 158rpx;
+	border: 4rpx solid #0A59F7;
+	margin-right: 18rpx;
+}
+.car-plan-unit{
+	font-weight: 400;
+	font-size: 32rpx;
+	color: #060809;
+}
+.car-plan-price{
+	font-weight: 600;
+	font-size: 32rpx;
+	color: #060809;
+}
+.car-plan-unit-i{
+	font-weight: 400;
+	font-size: 32rpx;
+	color: #0A59F7;
+}
+.car-plan-price-i{
+	font-weight: 600;
+	font-size: 32rpx;
+	color: #FA2918;
+}
+.free-num-left{
+	font-weight: 600;
+	font-size: 32rpx;
+	color: #060809;
+}
+.free-num{
+	font-weight: 600;
+	font-size: 32rpx;
+	color: #0A59F7;
+}
+.free-num-tip{
+	font-weight: 400;
+	font-size: 24rpx;
+	color: #828DA2;
+}
+.free-num-block{
+	padding: 36rpx 34rpx 34rpx;
+	background: #F4F5F6;
+	border-radius: 24rpx;
+	margin-bottom: 48rpx;
+}
+.plan-time > view:nth-of-type(1) {
+	color: #2A3A5A;
+	font-size: 32rpx;
+	font-weight: bold;
+}
+.quantity-count > input {
+	background: #F3F8FF;
+	border-radius: 24rpx;
+	width: 88rpx;
+	height: 48rpx;
+	text-align: center;
+	font-weight: 600;
+	font-size: 38rpx;
+	color: #060809;
+}
+.total-time{
+	font-weight: 600;
+	font-size: 32rpx;
+	color: #060809;
+	margin-right: 8rpx;
+}
+.count-btn {
+  width: 48rpx;
+  height: 48rpx;
+  vertical-align: middle;
+}
+
+.fbtn {
+	color: #9FA7B7;
+	margin-right: 16rpx;
+}
+.sbtn {
+	/* color: #9FA7B7; */
+	margin-left: 16rpx;
+}
+.car-color-view > view:nth-of-type(1) {
+	font-weight: 400;
+	font-size: 32rpx;
+	color: #060809;
+	margin-bottom: 32rpx;
+}
+.car-color-list{
+	width: 158rpx;
+	height: 80rpx;
+	border-radius: 16rpx;
+	font-weight: 400;
+	font-size: 32rpx;
+	text-align: center;
+	line-height: 80rpx;
+	border: 4rpx solid transparent;
+	margin-right: 18rpx;
+}
+.car-color-i{
+	background: #F3F8FF;
+	color: #060809;
+}
+.car-color-s{
+	background: #FFFFFF;
+	border: 4rpx solid #0A59F7;
+	color: #0A59F7;
+}
+.lift-btn-view{
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	padding: 32rpx;
+	width: 100%;
+	height: 148rpx;
+	position: relative;
+	margin-bottom: 40rpx;
+}
+.lift-btn{
+	height: 80rpx;
+	display: flex;
+	flex: 1;
+	font-weight: 600;
+	font-size: 32rpx;
+	color: #FFF;
+	font-family: PingFangSC, PingFang SC;
+	background: #060809;
+	border-radius: 40rpx;
+	justify-content: center;
+	align-items: center;
+}

component/carPlan/carPlan.vue

@@ -0,0 +1,111 @@
+<template>
+	<view  class="show-more">
+		<view class="more-info">
+			<view class="flex-row model-title">
+				<view style="margin-right: 24rpx;"><img style="width: 32rpx;height: 32rpx;" src="https://qiniu.bms16.com/FoWVlo-Nmx6wTDpsL2Rf9_BamU7L" alt=""></view>
+				<view class="car-model-detail flex-row">
+					<!-- <priceTool :price="58" :font_size="40"/> -->
+					<allPrice :amount="50"/>
+					<view class="car-model-price-view">
+						<text style="margin-right: 12rpx;">已选择</text>
+						<text>月租</text>
+						<text>时长 2 月</text>
+						<text>共计60天，橙色</text>
+					</view>
+					<view class="car-model-tip">现车 随时可到店提车</view>
+				</view>
+				<view>
+					<image style="width: 32rpx;height: 32rpx;" @tap="isShowMore = false"
+						src="https://qiniu.bms16.com/FtoTEHOJiUf_gjPCJGGHMsAtHI5M" />
+				</view>
+			</view>
+			<view class="car-plan-view">
+				<view class="car-plan-title">用车方案</view>
+				<view class="car-plan-list-view flex-row">
+					<view class="car-plan-list flex-row">
+						<view class="car-plan-unit">日租</view>
+						<view class="car-plan-price">$<text style="font-size: 48rpx;margin-left: 6rpx;">29</text></view>
+					</view>
+					<view class="car-plan-list flex-row">
+						<view class="car-plan-unit">日租</view>
+						<view class="car-plan-price">$<text style="font-size: 48rpx;margin-left: 6rpx;">29</text></view>
+					</view>
+					<view class="car-plan-list-i flex-row">
+						<view class="car-plan-unit-i">日租</view>
+						<view class="car-plan-price-i">$<text style="font-size: 48rpx;margin-left: 6rpx;">29</text></view>
+					</view>
+				</view>
+				<view class="free-num-block">
+					<view class="flex-row flex-between" style="margin-bottom: 24rpx;">
+						<view class="free-num-left">
+							<img style="width: 40rpx;height: 40rpx;" src="https://qiniu.bms16.com/Fj_ifr41AqH2PijZBdOBa3SCxADg" alt="">
+							<text style="margin-left: 16rpx;">免费换电次数</text>
+						</view>
+						<view class="free-num">共60次</view>
+					</view>
+					<view class="flex-row free-num-tip">本单可享60次免费换电数，超出后需要单独支付换电费用</view>
+					<view class="flex-row free-num-tip">自费换电：$1/次</view>
+				</view>
+				<view class="plan-time flex-row flex-between">
+					<view>租车时长</view>
+					<view class="quantity-count flex-row flex-between">
+						<view class="total-time flex-row">
+							 共 
+							<view style="font-weight: 600;margin: 0 10rpx;">6</view>
+							<!-- <view style="font-weight: 600;margin: 0 10rpx;">{{tools.countToDay(count,isSelectStatus)}}</view> -->
+							<text>天</text>
+						</view>
+						<!-- <view class="count-btn fbtn" @tap.stop.prevent="bindMinus">-</view> -->
+						<view @tap.stop.prevent="bindMinus"><img class="count-btn fbtn"
+								src="https://qiniu.bms16.com/Fm-SCbzVeVHgQK920bmWNvnJnL32" /></view>
+						<input @input="bindInput"  @blur="bindBlur" type="number" :value="count" />
+						<!-- <view class="count-btn sbtn" @tap.stop.prevent="bindAdd">+</view> -->
+						<view @tap.stop.prevent="bindAdd"><img class="count-btn sbtn"
+								src="https://qiniu.bms16.com/FsO-2adBjkUkmk4ENuQco-aK7IyY" /></view>
+					</view>
+				</view>
+				<view class="car-color-view">
+					<view>车辆颜色</view>
+					<view class="flex-row">
+						<view class="car-color-list car-color-s">白色</view>
+						<view class="car-color-list car-color-i">白色</view>
+						<view class="car-color-list car-color-i">白色</view>
+						<view class="car-color-list car-color-i">白色</view>
+					</view>
+				</view>
+			</view>
+			<view class="lift-btn-view">
+				<view class="lift-btn">确认</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import allPrice from '@/component/allPrice/allPrice';
+	export default {
+		data() {
+			return {};
+		},
+		/**
+		 * 组件的属性列表
+		 */
+		props: {
+			count:{
+				type:Number,
+				default:2
+			}
+		},
+		components: {
+			allPrice,
+		},
+		/**
+		 * 组件的方法列表
+		 */
+		methods: {
+		}
+	};
+</script>
+<style scoped>
+	@import './carPlan.css';
+</style>

component/priceTool/priceTool.vue

@@ -0,0 +1,65 @@
+<template>
+	<view  class="price-style">
+		<text class="unit-style">$</text>
+		<text :style="'font-size:'+font_size+'rpx'">{{integerPart }}</text>
+		<text class="unit-decimal-style">.{{decimalPart }}</text>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {};
+		},
+		/**
+		 * 组件的属性列表
+		 */
+		props: {
+			price:{
+				type:Number,
+				default:10
+			},
+			font_size:{
+				type:Number,
+				default:40
+			},
+		},
+		computed: {
+			formattedPrice() {
+		        let parts = this.price.toString().split('.');
+				if (parts.length === 1) {
+				  return parts[0] + '.0'; // 价格为整数时，添加一位小数
+				} else if (parts[1]) {
+				  return parts[0] + '.' + parts[1].padEnd(1, '0'); // 确保至少有一位小数
+				} else {
+				  return parts[0] + '.0'; // 防止parts[1]为undefined
+				}
+		  },
+		  integerPart() {
+		    let parts = this.formattedPrice.split('.');
+		    return parts[0];
+		  },
+		  decimalPart() {
+		    let parts = this.formattedPrice.split('.');
+		    return parts[1];
+		  }
+		},
+		/**
+		 * 组件的方法列表
+		 */
+		methods: {
+		}
+	};
+</script>
+<style scoped>
+.price-style{
+	font-family: DIN, DIN;
+	font-weight: bold;
+	font-size: 32rpx;
+	color: #FA2918;
+}
+.unit-style{
+	font-size: 24rpx;
+	margin-right: 4rpx;
+}
+</style>

pages.json

@@ -18,6 +18,10 @@
 				"navigationBarBackgroundColor": "#C2DEFF"
 			}
 		},
+		{
+			"path": "pages/service/service",
+			"style": {}
+		},
 		{
 			"path": "pages/aboutMy/aboutMy",
 			"style": {
@@ -136,6 +140,24 @@
 				"navigationBarTitleText": "添加成员"
 			}
 		},
+		{
+			"path": "pages/powerSetting/powerSetting",
+			"style": {
+				"navigationBarTitleText": "权限设置"
+			}
+		},
+		{
+			"path": "pages/batteryPackage/batteryPackage",
+			"style": {
+				"navigationBarTitleText": "换电套餐"
+			}
+		},
+		{
+			"path": "pages/carDetail/carDetail",
+			"style": {
+				"navigationBarTitleText": "车辆详情"
+			}
+		},
 		{
 			"path": "pages/order/order",
 			"style": {
@@ -152,6 +174,18 @@
 				"navigationBarTitleText": "套餐"
 			}
 		},
+		{
+			"path": "pages/batteryDetail/batteryDetail",
+			"style": {
+				"navigationBarTitleText": "电池详情"
+			}
+		},
+		{
+			"path": "pages/deviceInfo/deviceInfo",
+			"style": {
+				"navigationBarTitleText": "设备信息"
+			}
+		},
 		{
 			"path": "pages/phoneLogin/phoneLogin",
 			"style": {}

pages/addUser/addUser.vue

@@ -1,9 +1,10 @@
 <template>
 	<view class="add-user-view">
-		<view class="flex-row">
+		<view class="flex-row email-input-view">
 			<input class="email-input-style" type="email" placeholder="请输入被邀人邮箱号"  placeholder-style="font-size: 32rpx; font-weight: 400; color: #BAC1D0;">
+			<img class="clear-btn" src="https://qiniu.bms16.com/Fjpf2YnHUK1_CFf20kKRvjX9YdC3" alt="">
 		</view>
-		<view class="next-btn">下一步</view>
+		<view class="next-btn next-btn-i">下一步</view>
 	</view>
 </template>
 
@@ -34,7 +35,7 @@
 }
 .email-input-style{
 	width: 100%;
-	padding: 10px;
+	padding: 20rpx 60rpx 20rpx 20rpx;
 	margin-bottom: 20px;
 	border-radius: 24rpx;
 	border: 4rpx solid #060809;
@@ -43,4 +44,28 @@
 	color: #BAC1D0;
 	caret-color: #0A59F7;
 }
+.email-input-view{
+	position: relative;
+}
+.next-btn{
+	height: 88rpx;
+	line-height: 88rpx;
+	font-weight: 600;
+	font-size: 32rpx;
+	color: #FFFFFF;
+	text-align: center;
+	background: #060809;
+	border-radius: 44rpx;
+}
+	
+.next-btn-i{
+	opacity: 0.2;
+}
+.clear-btn{
+	position: absolute;
+	width: 40rpx;
+	height: 40rpx;
+	right: 36rpx;
+	top: 28rpx;
+}
 </style>

pages/batteryDetail/batteryDetail.css

@@ -0,0 +1,68 @@
+.battery-detail-main{
+	height: 100vh;
+	background: #F1F3F4;
+	
+}
+.quantity-count{
+	font-weight: bold;
+	font-size: 128rpx;
+	color: #060809;
+	font-family: Futura, Futura;
+	text-align: center;
+	margin-bottom: 80rpx;
+	background: linear-gradient( 180deg, #CFD1DE 0%, #F1F3F4 100%);
+}
+.quantity-text{
+	font-family: MontserratAlternates, MontserratAlternates;
+	font-weight: 900;
+	font-size: 48rpx;
+	color: #060809;
+	margin-left: 16rpx;
+}
+.battery-list-view{
+	background: #FFFFFF;
+	border-radius: 40rpx;
+	padding: 40rpx 32rpx;
+	margin-bottom: 20rpx;
+	padding: 24rpx;
+}
+.battery-name{
+	font-family: DIN, DIN;
+	font-weight: 600;
+	font-size: 48rpx;
+	color: #060809;
+}
+.battery-id{
+	font-weight: 500;
+	font-size: 30rpx;
+	color: #060809;
+}
+.battery-list{
+	margin-bottom: 66rpx;
+}
+.battery-device-info{
+	
+	text-align: center;
+	padding: 0 40rpx;
+}
+.battery-device-info:not(:last-child){
+	border-right: 2rpx solid #F1F3F4;
+}
+.quantity-info{
+	font-family: DIN, DIN;
+	font-weight: 600;
+	font-size: 48rpx;
+	color: #060809;
+	
+}
+.quantity-text-1{
+	font-weight: 500;
+	font-size: 28rpx;
+	color: #060809;
+	margin-left: 4rpx;
+}
+.battery-info-text{
+	font-weight: 400;
+	font-size: 28rpx;
+	color: #060809;
+}

pages/batteryDetail/batteryDetail.vue

@@ -0,0 +1,66 @@
+<template>
+	<view class="battery-detail-main">
+		<view class=" quantity-count">65<text class="quantity-text">%</text></view>
+		<view class="battery-list-view">
+			<view class="battery-list flex-row flex-between">
+				<view class="battery-name">No.1电池</view>
+				<view class="battery-id">MAC ID:0168802221</view>
+			</view>
+			<view class="flex-row flex-around">
+				<view class="battery-device-info">
+					<view class="quantity-info">44 <text class="quantity-text-1">%</text></view>
+					<view class="battery-info-text">剩余电量</view>
+				</view>
+				<view class="battery-device-info">
+					<view class="quantity-info">44 <text class="quantity-text-1">%</text></view>
+					<view class="battery-info-text">电压</view>
+				</view>
+				<view class="battery-device-info">
+					<view class="quantity-info">44 <text class="quantity-text-1">%</text></view>
+					<view class="battery-info-text">温度</view>
+				</view>
+			</view>
+		</view>
+		<view class="battery-list-view">
+			<view class="battery-list flex-row flex-between">
+				<view class="battery-name">No.1电池</view>
+				<view class="battery-id">MAC ID:0168802221</view>
+			</view>
+			<view class="flex-row flex-around">
+				<view class="battery-device-info">
+					<view class="quantity-info">44 <text class="quantity-text-1">%</text></view>
+					<view class="battery-info-text">剩余电量</view>
+				</view>
+				<view class="battery-device-info">
+					<view class="quantity-info">44 <text class="quantity-text-1">%</text></view>
+					<view class="battery-info-text">电压</view>
+				</view>
+				<view class="battery-device-info">
+					<view class="quantity-info">44 <text class="quantity-text-1">%</text></view>
+					<view class="battery-info-text">温度</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+			};
+		}
+		/**
+		 * 生命周期函数--监听页面加载
+		 */
+		,
+		onLoad: function(options) {
+		},
+		methods: {
+
+		}
+	};
+</script>
+<style>
+	@import './batteryDetail.css';
+</style>

pages/batteryPackage/batteryPackage.css

@@ -0,0 +1,86 @@
+.battery-package-main{
+	padding: 32rpx;
+}
+.package-icon-view{
+	margin-bottom: 40rpx;
+}
+.package-icon-view>img{
+	width: 64rpx;
+	height: 94rpx;
+}
+.package-icon-text{
+	font-weight: normal;
+	font-size: 28rpx;
+	color: #060809;
+	background: rgba(255,255,255,0.4);
+	border-radius: 0rpx 38rpx 38rpx 0rpx;
+	padding: 16rpx 0 16rpx 32rpx ;
+	flex-grow: 1;
+	text-align: justify;
+	letter-spacing: 2rpx;
+}
+.package-list-view{
+	background: #FFFFFF;
+	border-radius: 40rpx;
+	padding: 42rpx 32rpx 40rpx;
+	margin-bottom: 20rpx;
+}
+.package-num-view{
+	font-weight: 600;
+	font-size: 40rpx;
+	color: #060809;
+	margin-bottom: 12rpx;
+	
+}
+.package-num{
+	font-size: 46rpx;
+	margin-right: 2rpx;
+}
+.align-center{
+	align-items: center;
+}
+.apply-battery{
+	font-weight: 00;
+	font-size: 28rpx;
+	color: #060809;
+}
+.apply-battery-num{
+	font-weight: 600;
+	font-size: 30rpx;
+	color: #706c6c;
+}
+.package-price{
+	font-weight: 600;
+	font-size: 30rpx;
+	color: #84848c;
+	text-decoration-line: line-through;
+}
+.symbol-style{
+	font-weight: bold;
+	font-size: 36rpx;
+	color: #FA2918;
+	margin-left: 6rpx;
+	line-height: 1;
+}
+.align-baseline{
+	align-items: baseline;
+}
+.package-tip{
+	font-weight: 400;
+	font-size: 24rpx;
+	color: #060809;
+	opacity: 0.4;
+}
+.pay-btn{
+	background: #E4E7EC;
+	border-radius: 40rpx;
+	height: 80rpx;
+	line-height: 80rpx;
+	font-weight: 600;
+	font-size: 32rpx;
+	color: #060809;
+	text-align: center;
+	position: fixed;
+	bottom: 80rpx;
+	width: 91%;
+}

pages/batteryPackage/batteryPackage.vue

@@ -0,0 +1,65 @@
+<template>
+	<view class="battery-package-main">
+		<view class="package-icon-view flex-row">
+			<img src="https://qiniu.bms16.com/FqF7erLOB8OutmFnre7-mbTkwpZr" alt="">
+			<view class="package-icon-text flex-row">5秒换电，瞬间满电，畅享骑行新体验！</view>
+		</view>
+		<view class="package-list-view">
+			<view class="package-num-view flex-row"><text class="package-num">10</text> 天 <text class="package-num">10</text> 次</view>
+			<view class="flex-row flex-between align-baseline">
+				<view class="apply-battery">适用电池：<text class="apply-battery-num">48v20Ah</text></view>
+				<view class="flex-row align-baseline">
+					<text class="package-price">$35.9</text>
+					<text class="symbol-style">
+						<text>$</text>
+						<text style="font-size: 64rpx;">23</text>
+						<text style="font-size: ;">.0</text>
+					</text>
+					
+				</view>
+			</view>
+		</view>
+		<view class="package-list-view">
+			<view class="package-num-view flex-row"><text class="package-num">10</text> 天 <text class="package-num">10</text> 次</view>
+			<view class="flex-row flex-between align-baseline">
+				<view class="apply-battery">适用电池：<text class="apply-battery-num">48v20Ah</text></view>
+				<view class="flex-row align-baseline">
+					<text class="package-price">$35.9</text>
+					<text class="symbol-style">
+						<text>$</text>
+						<text style="font-size: 64rpx;">23</text>
+						<text style="font-size: ;">.0</text>
+					</text>
+					
+				</view>
+			</view>
+		</view>
+		<view class="flex-row package-tip" style="flex-direction: column;">
+			<view class="flex-row" style="margin-bottom: 16rpx;">当前购买为虚拟IC卡</view>
+			<view class="flex-row">如想要体验实体IC卡功能，前往最近的门店领取IC卡</view>
+		</view>
+		<view class="pay-btn">需到店支付</view>
+	</view>
+</template>
+
+<script>
+	var config = require('../../common/config.js');
+	export default {
+		data() {
+			return {
+			};
+		}
+		/**
+		 * 生命周期函数--监听页面加载
+		 */
+		,
+		onLoad: function(options) {
+		},
+		methods: {
+
+		}
+	};
+</script>
+<style>
+	@import './batteryPackage.css';
+</style>

pages/carDetail/carDetail.css

@@ -0,0 +1,166 @@
+.car-detail-main{
+	padding: 24rpx;
+}
+.car-detail-model{
+	background: #FFFFFF;
+	border-radius: 40rpx;
+	padding:34rpx 32rpx 32rpx ;
+	margin-bottom: 24rpx;
+}
+.car-detail-name{
+	font-weight: 600;
+	font-size: 40rpx;
+	color: #060809;
+	margin-bottom: 24rpx;
+}
+.car-detail-price{
+	font-family: DIN, DIN;
+	font-weight: bold;
+	font-size: 36rpx;
+	color: #FA2918;
+}
+.car-detail-time{
+	background: #F3F8FF;
+	border-radius: 24rpx;
+	padding: 6rpx 0 6rpx 6rpx;
+	height: 80rpx;
+	
+	font-weight: 400;
+	font-size: 32rpx;
+	color: #060809;
+	justify-content: space-around;
+}
+.time-unit{
+	width: 25%;
+	text-align: center;
+	height: 68rpx;
+	line-height: 68rpx;
+}
+.time-unit-i{
+	background: #FFFFFF;
+	border-radius: 16rpx;
+	font-weight: 500;
+	font-size: 32rpx;
+	color: #060809;
+}
+.free-num-text{
+	font-weight: 600;
+	font-size: 32rpx;
+	color: #060809;
+	margin-left:16rpx;
+}
+.free-num-time{
+	font-weight: 600;
+	font-size: 32rpx;
+	color: #0A59F7;
+}
+.free-num-tip{
+	font-weight: 400;
+	font-size: 24rpx;
+	color: #828DA2;
+}
+.free-num-model{
+	padding: 32rpx 24rpx;
+	background: #F3F8FF;
+	border-radius: 24rpx;
+}
+.card-car-detail{
+	background: #FFFFFF;
+	border-radius: 40rpx;
+	padding: 28rpx 32rpx;
+	margin-bottom: 20rpx;
+}
+.card-head{
+	font-size: 32rpx;
+	color: #FFFFFF;
+	background-color: #0A59F7;
+}
+.step-text-view{
+	justify-content: space-around;
+}
+.step-text{
+	font-weight: 400;
+	font-size: 24rpx;
+	color: #060809;
+}
+.step-num{
+	font-size: 36rpx;
+	color: #0A59F7;
+	font-weight: bold;
+	opacity: 0.8;
+	font-family: CamarRegular;
+}
+.distance-num{
+	background: #E6EEFE;
+	border-radius: 20rpx;
+	font-weight: 600;
+	font-size: 26rpx;
+	color: #0A59F7;
+	padding: 6rpx 20rpx;
+}
+.store-name-view{
+	font-weight: 600;
+	font-size: 32rpx;
+	color: #060809;
+	align-items: center;
+	flex-direction: column;
+}
+.address-txt{
+	font-weight: 400;
+	font-size: 24rpx;
+	color: #9FA7B7;
+}
+.time-icon{
+	width: 32rpx;
+	height: 32rpx;
+}
+.time-view{
+	font-family: DIN, DIN;
+	font-weight: 600;
+	font-size: 28rpx;
+	color: #828DA2;
+}
+.phone-btn-view{
+	border-radius: 32rpx;
+	border: 3rpx solid #E7EAEE;
+	width: 84rpx;
+	height: 64rpx;
+	line-height: 64rpx;
+	text-align: center;	
+	margin-right: 20rpx;
+}
+.phone-btn-view img{
+	width: 36rpx;
+	height: 36rpx;
+}
+.nav-btn-view{
+	width: 112rpx;
+	height: 64rpx;
+	line-height: 64rpx;
+	background: #060809;
+	border-radius: 32rpx;
+	text-align: center;
+}
+.nav-btn-view img{
+	width: 30rpx;
+	height: 30rpx;
+}
+.use-car-view{
+	padding: 24rpx 24rpx 40rpx;
+	position:fixed;
+	bottom: 0;
+	background: #FFFFFF;
+	box-shadow: 0rpx -2rpx 0rpx 0rpx #F4F5F6;
+	width: 100%;
+}
+.use-car-btn{
+	width: 100%;
+	height: 80rpx;
+	line-height: 80rpx;
+	background: #060809;
+	border-radius: 40rpx;
+	font-weight: 600;
+	font-size: 32rpx;
+	color: #FFFFFF;
+	text-align: center;
+}

pages/carDetail/carDetail.vue

@@ -0,0 +1,86 @@
+<template>
+	<view class="car-detail-main">
+		<view class="flex-row">
+			<img style="width: 600rpx;height: 406rpx;" src="https://qiniu.bms16.com/FtlfBtBE5-TeTI5EdrciX_u8u_Sx" alt="">
+		</view>
+		<view class="car-detail-model">
+			<view class="car-detail-name">智能电动摩托车智驾</view>
+			<view class="car-detail-price">$ <text style="font-size: 64rpx;">589</text> <text>.0</text></view>
+			<view class="flex-row car-detail-time">
+				<view class="time-unit time-unit-i">日租</view>
+				<view class="time-unit">日租</view>
+				<view class="time-unit">日租</view>
+				<view class="time-unit">日租</view>
+			</view>
+		</view>
+		<view class="free-num-model">
+			<view class="flex-row flex-between">
+				<view class="free-num-view">
+					<img style="width: 40rpx;height: 40rpx;" src="https://qiniu.bms16.com/FtlfBtBE5-TeTI5EdrciX_u8u_Sx" alt="">
+					<text class="free-num-text">免费换电次数</text>
+				</view>
+				<view class="free-num-time">1 次/日</view>
+			</view>
+			<view class="free-num-tip">日租享1次免费换电数，超出后需要单独支付换电费用；</view>
+		</view>
+		<view class="card-car-detail">
+			<view class="card-head">使用引导</view>
+			<view class="step-view">
+				<view class="step-img-view"></view>
+				<view class="step-text-view flex-row">
+					<view class="step-text"><text class="step-num">1</text>线上选择用车方案生成待支付订单</view>
+					<view class="step-text"><text class="step-num">2</text>线上选择用车方案生成待支付订单</view>
+					<view class="step-text"><text class="step-num">3</text>线上选择用车方案生成待支付订单</view>
+				</view>
+			</view>
+		</view>
+		<view class="card-car-detail">
+			<view class="card-head">本次消费门店</view>
+			<view class="step-view">
+				<view class="step-img-view"></view>
+				<view class="flex-row flex-between" style="margin-bottom: 24rpx;">
+					<view class="store-name-view">
+						<view>这里是一个门店的名称</view>
+						<view class="address-txt">西丽留仙洞留仙村路97号</view>
+					</view>
+					<view class="distance-num">135m</view>
+				</view>
+				<view class="flex-row flex-between align-center">
+					<view class="time-view">
+						<img class="time-icon" src="https://qiniu.bms16.com/FtlfBtBE5-TeTI5EdrciX_u8u_Sx" alt="">
+						<text>10:00-22:00</text>
+					</view>
+					<view class="phone-or-nav">
+						<view class="phone-btn-view"><img src="https://qiniu.bms16.com/FtlfBtBE5-TeTI5EdrciX_u8u_Sx" alt=""></view>
+						<view class="nav-btn-view"><img src="https://qiniu.bms16.com/FtlfBtBE5-TeTI5EdrciX_u8u_Sx" alt=""></view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="use-car-view flex-row">
+			<view class="use-car-btn">我要用车</view>
+		</view>
+		<carPlan/>
+	</view>
+</template>
+
+<script>
+	import CarPlan from '@/component/carPlan/carPlan';
+	export default {
+		data() {
+			return {
+			};
+		},
+		components: {
+			CarPlan,
+		},
+		onLoad: function(options) {
+		},
+		methods: {
+
+		}
+	};
+</script>
+<style>
+	@import './carDetail.css';
+</style>

pages/deviceInfo/deviceInfo.css

@@ -0,0 +1,57 @@
+.device-info-main{
+	background: linear-gradient( 180deg, #CFD1DE 0%, #F1F3F4 50%);
+	height: 100vh;
+	padding: 24rpx;
+}
+.device-name{
+	font-weight: 600;
+	font-size: 48rpx;
+	color: #060809;
+	margin-bottom: 64rpx;
+}
+.block-card{
+	background: #FFFFFF;
+	border-radius: 40rpx;
+	padding: 0 32rpx;
+	margin-bottom: 20rpx;
+}
+.info-view{
+	padding: 40rpx 0;
+}
+.info-view:not(:last-child){
+	border-bottom: 2rpx solid #F1F4F5;
+}
+.info-title{
+	font-weight: 600;
+	font-size: 40rpx;
+	color: #060809;
+	opacity: 0.5;
+	margin-bottom: 32rpx;
+}
+.info-value{
+	font-weight: 600;
+	font-size: 30rpx;
+	color: #060809;
+}
+.block-card-1{
+	background: #FFFFFF;
+	border-radius: 40rpx;
+	padding: 32rpx;
+	width: 100%;
+}
+.info-icon{
+	width: 52rpx;
+	height: 50rpx;
+}
+.info-text{
+	margin: 40rpx 0 28rpx;
+	font-weight: 600;
+	font-size: 40rpx;
+	color: #060809;
+	opacity: 0.5;
+}
+.info-vosion{
+	font-weight: 500;
+	font-size: 30rpx;
+	color: #060809;
+}

pages/deviceInfo/deviceInfo.vue

@@ -0,0 +1,52 @@
+<template>
+	<view class="device-info-main">
+		<view class="device-name">铁甲小宝</view>
+		<view class="block-card">
+			<view class="info-view">
+				<view class="info-title">车架号</view>
+				<view class="info-value">YM201823355887777</view>
+			</view>
+			<view class="info-view">
+				<view class="info-title">设备编号</view>
+				<view class="info-value">YM201823355887777</view>
+			</view>
+			<view class="info-view">
+				<view class="info-title">车辆总里程</view>
+				<view class="info-value">YM201823355887777</view>
+			</view>
+		</view>
+		<view class="flex-row">
+			<view class="block-card-1" style="margin-right: 18rpx;">
+				<img class="info-icon" src="https://qiniu.bms16.com/FoyFReERWQ5jmqQIk0Aj9V7SWGR2" alt="">
+				<view class="info-text">中控硬件</view>
+				<view class="info-vosion">V1.0.6</view>
+			</view>
+			<view class="block-card-1" >
+				<img class="info-icon" src="https://qiniu.bms16.com/Fvf3btY0699U2P65cRxYGDBADNHr" alt="">
+				<view class="info-text">中控软件</view>
+				<view class="info-vosion">V1.0.6</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+			};
+		}
+		/**
+		 * 生命周期函数--监听页面加载
+		 */
+		,
+		onLoad: function(options) {
+		},
+		methods: {
+
+		}
+	};
+</script>
+<style>
+	@import './deviceInfo.css';
+</style>

pages/index/components/unleasedPages/unleasedPages.vue

@@ -0,0 +1,30 @@
+<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/index/index.css

@@ -126,4 +126,39 @@
 }
 .contril-item>text{
 	opacity: 0.2;
+}
+.overdue-view{
+	background: #FCE8E9;
+	border-radius: 20rpx;
+	border: 3rpx solid transparent;
+	border-image: linear-gradient(90deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.1)) 3 3;
+	height: 100rpx;
+	align-items: center;
+	margin: 40rpx 24rpx;
+	padding: 0 24rpx;
+}
+.overdue-view-text{
+	align-items: baseline;
+}
+.overdue-text-left{
+	font-weight: 400;
+	font-size: 28rpx;
+	color: #060809;
+	margin-right: 16rpx;
+}
+.overdue-num{
+	font-weight: bold;
+	font-size: 40rpx;
+	color: #FA2918;
+}
+.renew-btn{
+	height: 60rpx;
+	line-height: 60rpx;
+	background: #FA2918;
+	border-radius: 32rpx;
+	font-weight: 600;
+	font-size: 28rpx;
+	color: #FFFFFF;
+	text-align: center;
+	width: 148rpx;
 }

pages/index/index.vue

@@ -1,78 +1,90 @@
 <template>
 	<view class="container-view">
-		<view class="flex-row flex-between align-center padding_about_40">
-			<view class="car-name-view">
-				<text style="margin-right: 10rpx;">小米</text>
-				<img src="https://qiniu.bms16.com/FoSXDpVGvbdmwbX3CMUBvR7X4IzI" style="width: 14rpx;height: 14rpx;" alt="">
-			</view>
-			<img src="https://qiniu.bms16.com/FtlfBtBE5-TeTI5EdrciX_u8u_Sx" style="width: 48rpx;height: 48rpx;" alt="">
-		</view>
-		<view class="car-img-view">
-			<view class="quantity-view flex-row">
-				<text class="quantity flex-row">88 <text style="font-size: 28rpx;font-weight: 500;">%</text></text>
-				<u-line-progress style="width: 100rpx;" active-color="#2ADA62" height="10" :show-percent="false" :percent="70"></u-line-progress>
-				<text class="quantity-text flex-row">
-					<text style="font-weight:400;font-size: 22rpx;">{{$t("续航")}}</text>
-					<text style="font-size: 36rpx;">54</text><text style="font-size: 30rpx;">km</text> 
-				</text>
+		<block >
+			<view class="flex-row flex-between align-center padding_about_40">
+				<view class="car-name-view">
+					<text style="margin-right: 10rpx;">小米</text>
+					<img src="https://qiniu.bms16.com/FoSXDpVGvbdmwbX3CMUBvR7X4IzI" style="width: 14rpx;height: 14rpx;" alt="">
+				</view>
+				<img src="https://qiniu.bms16.com/FtlfBtBE5-TeTI5EdrciX_u8u_Sx" style="width: 48rpx;height: 48rpx;" alt="">
 			</view>
-			<img src="https://qiniu.bms16.com/Fg8_p7083jpsy8BXG4bR6yMs7jQX" style="width: 100%;height: 526rpx;" alt="">
-			<view class="flex-row align-center update-time-view" >
-				<text style="margin-right: 10rpx;">{{$t("车辆已关机")}} </text>
-				<text style="margin-right: 10rpx;">{{$t("更新于")}} 11-25 23:05 </text>
-				<img src="https://qiniu.bms16.com/FsL6XWGoIhfsVB7jRg6EGFVsuaTZ" style="width: 24rpx;height: 32rpx;" alt="">
+			<!-- <view class="overdue-view flex-row flex-between">
+				<view class="overdue-view-text flex-row">
+					<text class="overdue-text-left">您已逾期 <text class="overdue-num">38</text>天</text>
+					<text style="font-size: 24rpx;opacity: 0.5;">请及时续费或归还车辆</text>
+				</view>
+				<view class="renew-btn">去续费</view>
+			</view> -->
+			<view class="car-img-view">
+				<view class="quantity-view flex-row">
+					<text class="quantity flex-row">88 <text style="font-size: 28rpx;font-weight: 500;">%</text></text>
+					<u-line-progress style="width: 100rpx;" active-color="#2ADA62" height="10" :show-percent="false" :percent="70"></u-line-progress>
+					<text class="quantity-text flex-row">
+						<text style="font-weight:400;font-size: 22rpx;">{{$t("续航")}}</text>
+						<text style="font-size: 36rpx;">54</text><text style="font-size: 30rpx;">km</text> 
+					</text>
+				</view>
+				<img src="https://qiniu.bms16.com/Fg8_p7083jpsy8BXG4bR6yMs7jQX" style="width: 100%;height: 526rpx;" alt="">
+				<view class="flex-row align-center update-time-view" >
+					<text style="margin-right: 10rpx;">{{$t("车辆已关机")}} </text>
+					<text style="margin-right: 10rpx;">{{$t("更新于")}} 11-25 23:05 </text>
+					<img src="https://qiniu.bms16.com/FsL6XWGoIhfsVB7jRg6EGFVsuaTZ" style="width: 24rpx;height: 32rpx;" alt="">
+				</view>
 			</view>
-		</view>
-		<Control/>
-		<view class="flex-row flex-between map-card-view" >
-			<MapCard latitude="23.099994" longitude="113.324004" :carAddress="carAddress" :carLocation="carLocation"/>
-			<view class="card-right">
-				<view class="card-bg" @tap="navTravelingTrack">
-					<view class="flex-row flex-between card-top-title">
-						<view class="flex-row align-center">
-							<img style="width: 36rpx;height: 36rpx;" src="https://qiniu.bms16.com/FkrcMCV__HraZ0W0NBNdEZPIlwss" alt="">
-							<text class="margin_l_8">{{isTrackOrAll?'最近骑行':'总里程'}}</text>
+			<Control/>
+			<view class="flex-row flex-between map-card-view" >
+				<MapCard latitude="23.099994" longitude="113.324004" :carAddress="carAddress" :carLocation="carLocation"/>
+				<view class="card-right">
+					<view class="card-bg" @tap="navTravelingTrack">
+						<view class="flex-row flex-between card-top-title">
+							<view class="flex-row align-center">
+								<img style="width: 36rpx;height: 36rpx;" src="https://qiniu.bms16.com/FkrcMCV__HraZ0W0NBNdEZPIlwss" alt="">
+								<text class="margin_l_8">{{isTrackOrAll?'最近骑行':'总里程'}}</text>
+							</view>
+							<view @tap.stop="isTrackOrAll=!isTrackOrAll"><img style="width: 24rpx;height: 20rpx;" src="https://qiniu.bms16.com/FltPK-o7KGS3dQ2pfQHXGSxOdzaN" alt=""></view>
 						</view>
-						<view @tap.stop="isTrackOrAll=!isTrackOrAll"><img style="width: 24rpx;height: 20rpx;" src="https://qiniu.bms16.com/FltPK-o7KGS3dQ2pfQHXGSxOdzaN" alt=""></view>
+						<view class="card-top-text">27.4<text class="font_24">km</text></view>
 					</view>
-					<view class="card-top-text">27.4<text class="font_24">km</text></view>
-				</view>
-				<view class="card-bg">
-					<view class="flex-row card-top-title">
-						<img style="width: 36rpx;height: 36rpx;" src="https://qiniu.bms16.com/FtalApKa3STyruaBxxRB4O9hHXyE" alt="">
-						<text class="margin_l_8">{{$t("换电套餐")}}</text>
+					<view class="card-bg">
+						<view class="flex-row card-top-title">
+							<img style="width: 36rpx;height: 36rpx;" src="https://qiniu.bms16.com/FtalApKa3STyruaBxxRB4O9hHXyE" alt="">
+							<text class="margin_l_8">{{$t("换电套餐")}}</text>
+						</view>
+						<view class=" card-top-text">30 <text class="font_24">{{$t("天")}}</text></view>
 					</view>
-					<view class=" card-top-text">30 <text class="font_24">{{$t("天")}}</text></view>
 				</view>
 			</view>
-		</view>
-		<view class="config-view">
-			<view class="flex-row config-car-view">
-				<view class="margin_r_20"><img class="icon_style_64" src="https://qiniu.bms16.com/Ftzyvs5whxDdMFksYChHaWKVb0Uk" alt=""></view>
-				<view class="flex-row config-text-view">
-					<view class="flex-row font_w_600">{{$t("感应解锁")}}</view>
-					<view class="flex-row tip-text-config">{{$t("请先链接蓝牙")}}</view>
+			<view class="config-view">
+				<view class="flex-row config-car-view">
+					<view class="margin_r_20"><img class="icon_style_64" src="https://qiniu.bms16.com/Ftzyvs5whxDdMFksYChHaWKVb0Uk" alt=""></view>
+					<view class="flex-row config-text-view">
+						<view class="flex-row font_w_600">{{$t("感应解锁")}}</view>
+						<view class="flex-row tip-text-config">{{$t("请先链接蓝牙")}}</view>
+					</view>
+					<img class="icon_style_28" src="https://qiniu.bms16.com/FqnbZ2iKHmzCGJA8XD30sf5g_CAm" alt="">
 				</view>
-				<img class="icon_style_28" src="https://qiniu.bms16.com/FqnbZ2iKHmzCGJA8XD30sf5g_CAm" alt="">
-			</view>
-			<view class="flex-row config-car-view">
-				<view class="margin_r_20"><img class="icon_style_64"  src="https://qiniu.bms16.com/FhKkijkN__9UzhYNgamBFSggIlYo" alt=""></view>
-				<view class="flex-row config-text-view">
-					<view class="flex-row font_w_600">{{$t("用车人管理")}}</view>
-					<view class="flex-row tip-text-config">{{$t("个家庭账号")}}</view>
+				<view class="flex-row config-car-view">
+					<view class="margin_r_20"><img class="icon_style_64"  src="https://qiniu.bms16.com/FhKkijkN__9UzhYNgamBFSggIlYo" alt=""></view>
+					<view class="flex-row config-text-view">
+						<view class="flex-row font_w_600">{{$t("用车人管理")}}</view>
+						<view class="flex-row tip-text-config">{{$t("个家庭账号")}}</view>
+					</view>
+					<img class="icon_style_28" src="https://qiniu.bms16.com/FqnbZ2iKHmzCGJA8XD30sf5g_CAm" alt="">
 				</view>
-				<img class="icon_style_28" src="https://qiniu.bms16.com/FqnbZ2iKHmzCGJA8XD30sf5g_CAm" alt="">
-			</view>
-			<view class="flex-row config-car-view">
-				<view class="margin_r_20"><img class="icon_style_64" src="https://qiniu.bms16.com/FsAg6mHEBJfbtpgIHBrDdNiPo1iH" alt=""></view>
-				<view class="flex-row config-text-view">
-					<view class="flex-row font_w_600">{{$t("设备信息")}}</view>
-					<view class="flex-row tip-text-config">{{$t("软件版本")}}</view>
+				<view class="flex-row config-car-view">
+					<view class="margin_r_20"><img class="icon_style_64" src="https://qiniu.bms16.com/FsAg6mHEBJfbtpgIHBrDdNiPo1iH" alt=""></view>
+					<view class="flex-row config-text-view">
+						<view class="flex-row font_w_600">{{$t("设备信息")}}</view>
+						<view class="flex-row tip-text-config">{{$t("软件版本")}}</view>
+					</view>
+					<img class="icon_style_28" src="https://qiniu.bms16.com/FqnbZ2iKHmzCGJA8XD30sf5g_CAm" alt="">
 				</view>
-				<img class="icon_style_28" src="https://qiniu.bms16.com/FqnbZ2iKHmzCGJA8XD30sf5g_CAm" alt="">
 			</view>
-		</view>
-		<view style="height: 264rpx;"></view>
+			<view style="height: 264rpx;"></view>
+		</block>
+		<block>
+			<!-- <UnleasedPages/> -->
+		</block>
 		<CustomTabbar />
 	</view>
 </template>
@@ -85,6 +97,7 @@
 	var storage = require('../../common/storage.js');
 	import Control from './components/control/control'
 	import MapCard from './components/mapCard/mapCard'
+	import UnleasedPages from './components/unleasedPages/unleasedPages'
 	import CustomTabbar from '@/component/customTabbar/index';
 	
 
@@ -111,7 +124,8 @@
 		components: {
 			Control,
 			MapCard,
-			CustomTabbar
+			CustomTabbar,
+			UnleasedPages
 		},
 		/**
 		 * 生命周期函数--监听页面加载

pages/orderStatus/orderStatus.css

@@ -4,7 +4,7 @@
 
 .time-info {
 	padding: 48rpx 32rpx 24rpx;
-	background: radial-gradient( 135% 100% at 50% 0%, rgba(0,116,255,0.32) 0%, rgba(0,116,255,0) 100%);;
+	background: linear-gradient( 180deg, #CFD1DE 0%, #F1F3F4 100%);
 }
 
 .time-info > view:nth-of-type(1) {
@@ -135,13 +135,14 @@
 .top-flex > view:nth-of-type(1) {
 	color: #2A3A5A;
 	font-size: 36rpx;
-	font-weight: bold;
+	font-weight: 400;
 	margin-bottom: 20rpx;
 }
 
 .top-flex > view:nth-of-type(2) {
-	color: #9EA9BB;
+	font-weight: 400;
 	font-size: 28rpx;
+	color: #9EA9BB;
 }
 
 .car-info img {
@@ -164,10 +165,11 @@
 }
 
 .return-top > view:nth-of-type(2) {
-	color: #0074FF;
-	font-size: 24rpx;
+	font-weight: 600;
+	font-size: 22rpx;
+	color: #0A59F7;
 	text-align: center;
-	border: 2rpx solid #0074FF;
+	background: #E6EEFE;
 	border-radius: 20rpx;
 	height: 40rpx;
 	line-height: 40rpx;
@@ -180,9 +182,10 @@
 }
 
 .return-bottom > view {
-	color: #2A3A5A;
-	font-size: 26rpx;
-	font-weight: bold;
+	font-family: DIN, DIN;
+	font-weight: 600;
+	font-size: 36rpx;
+	color: #060809;
 }
 
 .return-bottom img {
@@ -823,10 +826,9 @@
 }
 
 .exchange-info {
-	background-color: #ffffff;
-	margin: 0 32rpx 24rpx 32rpx;
-	padding: 40rpx 32rpx 32rpx;
-	border-radius: 32rpx;
+	background: #F4F5F6;
+	border-radius: 24rpx;
+	padding: 24rpx;
 }
 
 .exchange-info-title {
@@ -856,4 +858,64 @@
 	line-height: 36rpx;
 	text-align: justify;
 	font-style: normal;
+}
+
+
+
+
+.get-car-number-card{
+	background: #FFFFFF;
+	border-radius: 40rpx;
+	padding: 40rpx;
+	text-align: center;
+	font-weight: 600;
+	font-size: 32rpx;
+	color: #060809;
+	margin-bottom: 20rpx;
+}
+.get-car-number{
+	font-weight: bold;
+	line-height: 1;
+	font-size: 80rpx;
+	color: #060809;
+	margin: 24rpx 0 40rpx;
+}
+.get-car-number-tip{
+	font-weight: 400;
+	font-size: 24rpx;
+	color: #060809;
+	opacity: 0.4;
+}
+.distance-num{
+	background: #E6EEFE;
+	border-radius: 20rpx;
+	font-family: DIN, DIN;
+	font-weight: 500;
+	font-size: 26rpx;
+	color: #0A59F7;
+	padding: 6rpx 20rpx;
+}
+.store-img-view>img{
+	width: 160rpx;
+	height: 160rpx;
+	border-radius: 24rpx;
+}
+.store-name-address{
+	font-weight: 400;
+	font-size: 28rpx;
+	color: #9FA7B7;
+	margin: 16rpx 0;
+}
+.store-name{
+	font-weight: 600;
+	font-size: 36rpx;
+	color: #060809;
+}
+.time-style{
+	font-weight: 400;
+	font-size: 26rpx;
+	color: #828DA2;
+}
+.car-top{
+	margin-bottom: 24rpx;
 }

pages/orderStatus/orderStatus.vue

@@ -5,14 +5,7 @@
 			4 已逾期(可续费）5 还车申请中（待确认）6 还车中,等待门店取车  7 车辆已归还  8 订单已支付,已取消  9 订单未支付已取消
 			以及拖车工单状态
 			workInfo.status 0 待商家确认拖车服务, 1门店拖车中, 2订单已结束, 3已取消拖车服务-->
-			<!-- 拖车订单状态优先展示 -->
-			<view v-if="workInfo.status">
-				<view v-if="workInfo.status == 0">待商家确认拖车服务</view>
-				<view v-else-if="workInfo.status == 1">门店拖车中</view>
-				<!-- <view v-else-if="workInfo.status == 2">拖车服务已取消</view> -->
-				<view v-else-if="workInfo.status == 2">订单已结束</view>
-			</view>
-			<view v-else>
+			<view>
 				<view v-if="orderInfo.order_status == 1">
 					{{orderInfo.return_type == 1?('请于'+tools.formatTimeSecond(orderInfo.hire_begin_time)+'到门店取车'):('将于'+tools.formatTimeSecond(orderInfo.hire_begin_time)+'送车上门')}}
 				</view>
@@ -24,11 +17,14 @@
 				<view v-else-if="orderInfo.order_status == 7">已完成</view>
 				<view v-else-if="orderInfo.order_status == 8||orderInfo.order_status == 9">已取消</view>
 				<view v-else>
-					<text>待支付 剩余</text>
-					<u-count-down bg-color="none" font-size="50" :show-day="false" :timestamp="timer"
-						@end="loadEnd"></u-count-down>
+					{{('请于'+'3.5-20:00'+'到门店取车')}}
 				</view>
 			</view>
+			<view class="get-car-number-card">
+				<view>取车码</view>
+				<view class="get-car-number">487872</view>
+				<view class="get-car-number-tip">到店后请向门店出示取车码，支付完成用车费用后即可用车</view>
+			</view>
 			<view class="time-money">
 				<view class="flex-row flex-between">
 					<view class="money-item">
@@ -58,138 +54,25 @@
 							:src="isExpanded?'https://qiniu.bms16.com/FvRah8ro91B_TUVEmInBq6n69W2f':'https://qiniu.bms16.com/FtbxPP0aXYG8hyJTEJfNTXa_Puuc'" />
 					</view>
 				</view>
-				<view v-if="isExpanded" class="dashed-border"></view>
-				<view v-if="isExpanded">
-					<view v-if="workInfo.status">
-						<view class="big-text">拖车信息</view>
-						<view class="sn-content flex-row flex-between">
-							<view class="sn-title">拖车位置</view>
-							<view class="sn-text" style="width: 420rpx;">{{workInfo.address}}</view>
-						</view>
-						<view class="sn-content flex-row flex-between">
-							<view class="sn-title">还车门店</view>
-							<view class="sn-text">{{workInfo.shop_name}}</view>
-						</view>
-						<view class="sn-content flex-row flex-between">
-							<view class="sn-title">拖车距离</view>
-							<view class="sn-text">{{tools.toFix(workInfo.distance/1000)}}KM</view>
-						</view>
-						<view class="sn-content flex-row flex-between">
-							<view class="sn-title">拖车费用<image @tap="isShowDragMoney = true" class="chargeinfo_img"
-									src="https://qiniu.bms16.com/FjJufAn7ewzRY0kfM2ABUoq7YeSk"></image>
-							</view>
-							<view class="sn-text">￥{{tools.toFix(workInfo.money/100)}}</view>
-						</view>
-						<view class="sn-content flex-row flex-between">
-							<view class="sn-title">支付方式</view>
-							<view v-if="workInfo.pay_type == 0" class="sn-text">微信支付</view>
-							<view v-if="workInfo.pay_type == 2" class="sn-text">支付宝支付</view>
-							<view v-if="workInfo.pay_type == 9" class="sn-text">钱包余额支付</view>
-						</view>
-					</view>
-					<view class="big-text">订单信息</view>
-					<view class="sn-content flex-row flex-between">
-						<view class="sn-title">订单编号</view>
-						<view class="sn-text">{{orderInfo.order_sn}}</view>
-					</view>
-					<view v-if="orderInfo.order_status == 0" class="sn-content flex-row flex-between">
-						<view class="sn-title">下单时间</view>
-						<view class="sn-text">{{tools.formatTime(orderInfo.ctime)}}</view>
-					</view>
-					<view v-if="orderInfo.order_status == 8||orderInfo.order_status == 9"
-						class="sn-content flex-row flex-between">
-						<view class="sn-title">取消时间</view>
-						<view class="sn-text">{{tools.formatTime(orderInfo.close_time)}}</view>
-					</view>
-					<view v-if="(orderInfo.order_status == 8||orderInfo.order_status == 9)&&orderInfo.close_reason!=''"
-						class="sn-content flex-row flex-between">
-						<view class="sn-title">取消原因</view>
-						<view class="sn-text">{{orderInfo.close_reason}}</view>
-					</view>
-					<view v-if="orderInfo.order_status != 8&&orderInfo.order_status != 9&&orderInfo.pay_time!=0"
-						class="sn-content flex-row flex-between">
-						<view class="sn-title">支付时间</view>
-						<view class="sn-text">{{tools.formatTime(orderInfo.pay_time)}}</view>
-					</view>
-					<view v-if="orderInfo.order_status != 8&&orderInfo.order_status != 9"
-						class="sn-content flex-row flex-between">
-						<view class="sn-title">支付方式</view>
-						<view v-if="orderInfo.pay_type == 0" class="sn-text">微信支付</view>
-						<view v-if="orderInfo.pay_type == 2" class="sn-text">支付宝支付</view>
-						<view v-if="orderInfo.pay_type == 9" class="sn-text">钱包余额支付</view>
-					</view>
-					<view v-if="orderInfo.order_status != 8&&orderInfo.order_status != 9"
-						class="sn-content flex-row flex-between">
-						<view class="sn-title">押金金额</view>
-						<view  class="sn-text flex-row">
-							<text :class="orderInfo.pay_with_pledge == 5?'none-text':''">￥{{orderInfo.deposit / 100}}</text>
-							<view v-if="orderInfo.pay_with_pledge == 5"  style="margin-left: 20rpx;">0</view>
-						</view>
-					</view>
-					<view v-if="orderInfo.order_status != 8&&orderInfo.order_status != 9"
-						class="sn-content flex-row flex-between">
-						<view class="sn-title">押金类型</view>
-						<view v-if="orderInfo.pay_with_pledge == 1" class="sn-text">不需要押金</view>
-						<view v-if="orderInfo.pay_with_pledge == 2" class="sn-text">线上支付</view>
-						<view v-if="orderInfo.pay_with_pledge == 3" class="sn-text">押金已退</view>
-						<view v-if="orderInfo.pay_with_pledge == 4" class="sn-text">已申请退押金</view>
-						<view v-if="orderInfo.pay_with_pledge == 5" class="sn-text">支付宝信用免押</view>
-						<view v-if="orderInfo.pay_with_pledge == 6" class="sn-text">支付宝免押已解约</view>
-						<view v-if="orderInfo.pay_with_pledge == 7" class="sn-text">平台信任免押</view>
-						<!-- <view v-if="orderInfo.pay_with_pledge == 6" class="sn-text flex-row">
-							<text>已退回</text>
-							<view class="g-border"></view>
-							￥{{orderInfo.deposit}} 充值押金
-						</view> -->
-					</view>
-
-					<view v-if="orderInfo.order_status != 8&&orderInfo.order_status != 9&&orderInfo.insurance != 0"
-						class="sn-content flex-row flex-between">
-						<view class="sn-title">保险金额</view>
-						<view class="sn-text">￥{{orderInfo.insurance / 100}}
-						</view>
-					</view>
-					<view v-if="orderInfo.order_status != 8&&orderInfo.order_status != 9&&orderInfo.total_cabinet_order_money != 0"
-						class="sn-content flex-row flex-between">
-						<view class="sn-title">换电金额</view>
-						<view class="sn-text">￥{{orderInfo.total_cabinet_order_money / 100}}
-						</view>
-					</view>
-
-					<view v-if="orderInfo.order_status == 5||orderInfo.order_status == 6"
-						class="sn-content flex-row flex-between">
-						<view class="sn-title">归还时间</view>
-						<view class="sn-text">{{tools.formatTime(orderInfo.return_time)}}</view>
-					</view>
-					<view v-if="orderInfo.order_status == 7&&orderInfo.return_time!=0"
-						class="sn-content flex-row flex-between">
-						<view class="sn-title">完成时间</view>
-						<view class="sn-text">{{tools.formatTime(orderInfo.return_time)}}</view>
-					</view>
-				</view>
 			</view>
 		</view>
-		<view class="show_mark_container" v-if="isShowDragMoney">
-			<view class="pop_content">
-				<view class="show_title">拖车费用说明</view>
-				<view class="pop_foo">
-					<view class="show_info_content flex-row flex-between">
-						<view>起步费(含{{charge_standard.start_mil}}km)</view>
-						<view>￥{{charge_standard.start_price}}</view>
-					</view>
-					<view class="show_info_content flex-row flex-between">
-						<view>
-							<view>公里费({{charge_standard.actual_start_mil}}km)</view>
-							<view class="show_info_tips">
-								超出起步范围的距离，每{{charge_standard.step_mil}}公里{{charge_standard.step_price}}元
-							</view>
+		<view class="car-info">
+			<view class="flex-row flex-between" style="margin-bottom: 40rpx;">
+				<text>自行去门店取还</text>
+				<text class="distance-num">100m</text>
+			</view>
+			<view class="flex-row store-img-view">
+				<img src="https://qiniu.bms16.com/FrwDlFZdSMiBgqnqDjB19PiDUmuu" alt="">
+				<view style="width: 100%;margin-left: 24rpx;">
+					<view class="store-name">小众租车深圳店</view>
+					<view class="store-name-address">西丽留仙洞留仙村路97号</view>
+					<view class="flex-row flex-between align-center">
+						<view class="flex-row time-style align-center">
+							<img style="width: 40rpx;height: 40rpx;" src="https://qiniu.bms16.com/Fp-G1pdXxnTV-G3qFbgS453AuqcU" alt="">
+							<text>10:00-22:00</text>
 						</view>
-						<view>￥{{charge_standard.over_start_price}}</view>
+						<img style="width: 112rpx;height: 64rpx;" src="https://qiniu.bms16.com/Fts38M35doVjK09GfOza5qD-wwkK" alt="">
 					</view>
-
-				</view>
-				<view class="row-btn">
-					<view class="left-btn" @tap="isShowDragMoney = false">我知道了</view>
 				</view>
 			</view>
 		</view>
@@ -197,92 +80,49 @@
 			<view>车辆信息</view>
 			<view class="car-top flex-row flex-between">
 				<view class="top-flex">
-					<view>{{modelInfo.car_model}}</view>
+					<!-- <view>{{modelInfo.car_model}}</view> -->
+					<view>智能电动摩托车智驾</view>
 					<view>续航{{modelInfo.endurance}}｜重量{{modelInfo.weight}}</view>
 				</view>
-				<img
-					:src="modelInfo.model_images!=''?modelInfo.model_images[0]:'https://qiniu.bms16.com/FhEvnKUckAHPtWaC04mi2s53IEVj'" />
+				<img src="https://qiniu.bms16.com/FhEvnKUckAHPtWaC04mi2s53IEVj" alt="">
 			</view>
-		</view>
-		<view v-if="orderInfo.battery_sn!=''"  class="exchange-info">
-			<view class="flex-row flex-between">
-				<view class="exchange-info-title">换电信息</view>
-				<view @tap="navToExchange" class="flex-row" style="margin-bottom: 28rpx;">
-					<view class="exchange-button">已换电<text>{{orderInfo.used_exchange_num}}</text>次</view>
-					<image src="https://qiniu.bms16.com/FpIN7AVzFU75slFlX-SIdnSEmn1k" style="width: 28rpx;height: 28rpx;" />
-				</view>
-			</view>			
-			<view class="exchange-content">本单您可享受{{orderInfo.gift_exchange_num}}次免费换电，
-			当前免费换电剩余{{(orderInfo.gift_exchange_num - orderInfo.used_exchange_num) > 0 ? (orderInfo.gift_exchange_num - orderInfo.used_exchange_num) : '0' }}次，超出后需要单独支付换电费用
+			<view class="exchange-info">
+				<view class="flex-row flex-between">
+					<view class="exchange-info-title flex-row align-center">
+						<img style="width: 40rpx;height: 40rpx;" src="https://qiniu.bms16.com/Fj_ifr41AqH2PijZBdOBa3SCxADg" alt="">
+						<text style="margin-left: 16rpx;">换电信息</text>
+					</view>
+					<view @tap="navToExchange" class="flex-row" style="margin-bottom: 28rpx;">
+						<view class="exchange-button">共3次</view>
+						<image src="https://qiniu.bms16.com/FpIN7AVzFU75slFlX-SIdnSEmn1k" style="width: 28rpx;height: 28rpx;" />
+					</view>
+				</view>			
+				<view class="exchange-content">本单可享3次免费换电数，超出后需单独支付</view>
+				<view class="exchange-content">自费换电:S1/次</view>
+				<!-- <view class="exchange-content">本单您可享受{{orderInfo.gift_exchange_num}}次免费换电，
+				当前免费换电剩余{{(orderInfo.gift_exchange_num - orderInfo.used_exchange_num) > 0 ? (orderInfo.gift_exchange_num - orderInfo.used_exchange_num) : '0' }}次，超出后需要单独支付换电费用
+				</view> -->
 			</view>
 		</view>
-
-		<!-- <view v-if="orderInfo.pay_with_pledge != 1" class="deposit-info">
-			<view>车辆押金</view>
-			<view v-if="orderInfo.pay_with_pledge == 5" class="selected-deposit">
-				<view class="deposit-item flex-row" style="align-items: center;">
-					<view>支付宝芝麻信用</view>
-				</view>
-				<view class="blue-text" style="font-size: 32rpx;">免押</view>
-			</view>
-			<view
-				v-if="orderInfo.pay_with_pledge == 2 || orderInfo.pay_with_pledge == 3 || orderInfo.pay_with_pledge == 4"
-				class="selected-deposit">
-				<view class="deposit-item flex-row">
-					<view>押金租借</view>
-				</view>
-				<view class="blue-text" style="font-size: 36rpx;">
-					¥{{orderInfo.deposit / 100}}</view>
-			</view>
-		</view> -->
+		
 
 		<view v-if="orderInfo.hire_begin_time!=0&&orderInfo.hire_end_time!=0" class="return-info">
 			<view class="return-top flex-row flex-between">
 				<view>取还时间</view>
 				<view>
-						共{{orderInfo.hire_return_time.day > 0 ? orderInfo.hire_return_time.day :'' }}<text
+						共3天{{orderInfo.hire_return_time.day > 0 ? orderInfo.hire_return_time.day :'' }}<text
 							v-if="orderInfo.hire_return_time.day>0">日</text>{{orderInfo.hire_return_time.hour > 0 ? orderInfo.hire_return_time.hour :'' }}<text
 							v-if="orderInfo.hire_return_time.hour>0">小时</text>{{orderInfo.hire_return_time.minute > 0 ? orderInfo.hire_return_time.minute :'' }}<text
 							v-if="orderInfo.hire_return_time.minute>0">分</text>
 				</view>
 			</view>
 			<view class="return-bottom flex-row">
-				<view>{{tools.formatTimeDate(orderInfo.hire_begin_time)}}</view>
+				<view>3.8-20:00</view>
 				<img src="https://qiniu.bms16.com/FoXmBbj7YGWmjyeuVEY35nzieqnx" />
-				<view>{{tools.formatTimeDate(orderInfo.hire_end_time)}}</view>
-			</view>
-		</view>
-		<view v-if="orderInfo.return_type == 1" class="method-info">
-			<view>自行去门店取还</view>
-			<view class="method-item flex-row">
-				<img
-					:src="shopInfo.shop_image!=[]?shopInfo.shop_image[0]:'https://qiniu.bms16.com/FrfV4epBPSzUJNmTNWJ5z6vG_ScM'" />
-				<view  @tap="bindToNav" class="flex-row flex-between" style="width: 75%;">
-					<view class="item-center">
-						<view>{{shopInfo.shop_name}}</view>
-						<view>{{shopInfo.address}}</view>
-						<view class="flex-row" style="align-items: center;">
-							<img src="https://qiniu.bms16.com/FlGVpR2fdrD1GfeHfDgt-dUMgkOq" />
-							{{shopInfo.work_begin_time!=''&&shopInfo.work_end_time!=''?shopInfo.work_begin_time+'-'+shopInfo.work_end_time:'-'}}
-						</view>
-					</view>
-					<view class="item-bottom flex-row flex-column" style="align-items: center;">
-						<img src="https://qiniu.bms16.com/FqCVS_ihJb8IuxeJNGaqC6NKhYMY" />
-						<view>{{shopInfo.distance}}</view>
-					</view>
-				</view>
-			</view>
-		</view>
-		<view v-if="insurance_status != 0" class="guarantee-info flex-row flex-between">
-			<view>保障服务</view>
-			<view class="flex-row">
-				<img v-if="orderInfo.order_status==2||orderInfo.order_status==3"
-					src="https://qiniu.bms16.com/FnFvHiZzSKIve3qMEvtTuvtwgRch" />
-				<img v-else src="https://qiniu.bms16.com/FpvVEi-w3d0jxwFmwZyw9Zf9EweG" />
-				<!-- insurance_status  0 无保险   1 生效中  2 待生效  3 已失效 -->
-				<text v-if="insurance_status == 1">已生效</text>
-				<text v-else-if="insurance_status == 2">待生效</text>
-				<text v-else>已失效</text>
+				<view>3.8-20:00</view>
+				<!-- <view>{{tools.formatTimeDate(orderInfo.hire_begin_time)}}</view>
+				<img src="https://qiniu.bms16.com/FoXmBbj7YGWmjyeuVEY35nzieqnx" />
+				<view>{{tools.formatTimeDate(orderInfo.hire_end_time)}}</view> -->
 			</view>
 		</view>
 		<view v-if="orderInfo.order_status==2||orderInfo.order_status==3||orderInfo.order_status==4"
@@ -314,15 +154,6 @@
 				<view v-else>免费取消</view>
 			</view>
 		</view>
-		<view class="assort-info">
-			<view>配套服务</view>
-			<view class="assort-box flex-row">
-				<view v-for="(item,index) in serviceList" :key="index" class="assort-text"
-					:class="{'even-item': index % 2 !== 0, 'odd-item': index % 2 === 0}">
-					{{item}}
-				</view>
-			</view>
-		</view>
 		<view class="payment-info flex-row flex-between">
 			<view v-if="orderInfo.order_status == 1" class="flex-row"> <!-- 待取车 -->
 				<view class="cancel" @tap="clickCancel">取消订单</view>
@@ -353,13 +184,6 @@
 			<!-- <view v-else-if="orderInfo.order_status == 7" class="pay-btn">去评价</view> -->
 			<view v-else-if="orderInfo.order_status == 8||orderInfo.order_status == 9" class="pay-btn" @tap="callPhone">
 				门店/客服</view> <!-- 已取消 -->
-			<view v-else class="to-pay flex-row flex-between"> <!-- 待支付 -->
-				<allPrice :amount="waitMoney"></allPrice>
-				<view class="bottom-right flex-row">
-					<view @tap="clickCancel">取消订单</view>
-					<view @tap="bindToPay">立即支付</view>
-				</view>
-			</view>
 		</view>
 
 		<view v-if="isShowCancel" class="cancel-b">
@@ -453,7 +277,7 @@
 				isShowDragMoney: false, // 是否显示拖车费用弹框
 				work_sn: '',
 				workInfo: {}, // 拖车工单信息
-				isShowCancel: false,
+				isShowCancel: true,
 				order_sn: '',
 				cancelInfo: {
 					cancel_setting: [],

pages/powerSetting/powerSetting.css

@@ -0,0 +1,66 @@
+.power-setting-main{
+	padding: 24rpx;
+}
+.power-setting-head{
+	flex-direction: column;
+	margin-bottom: 60rpx;
+}
+.head-img{
+	width: 144rpx;
+	height: 144rpx;
+	border-radius: 50%;
+}
+.head-name{
+	margin: 20rpx 0 12rpx;
+	font-family: DIN, DIN;
+	font-weight: bold;
+	font-size: 40rpx;
+	color: #060809;
+}
+.head-email{
+	font-weight: 500;
+	font-size: 24rpx;
+	color: #060809;
+	opacity: 0.4;
+}
+.setting-card{
+	background: #FFFFFF;
+	border-radius: 40rpx;
+	padding: 40rpx 36rpx 8rpx;
+}
+.setting-card-name{
+	/* margin-bottom: 32rpx; */
+	font-weight: 400;
+	font-size: 36rpx;
+	color: #060809;
+}
+.setting-card-list >img{
+	width: 64rpx;
+	height: 64rpx;
+}
+.setting-list-text{
+	font-weight: 600;
+	font-size: 32rpx;
+	color: #060809;
+	flex-grow: 1;
+	padding: 32rpx;
+}
+.setting-card-list:not(:last-child){
+	border-bottom: 2rpx solid #F1F4F5;
+}
+.check-btn{
+	height: 88rpx;
+	line-height: 88rpx;
+	font-weight: 600;
+	font-size: 32rpx;
+	text-align: center;
+	border-radius: 44rpx;
+}
+.add-btn{
+	background: #060809;
+	color: #FFF;
+}
+.del-btn{
+	background: #E4E7EC;
+	color: #060809;
+}

pages/powerSetting/powerSetting.vue

@@ -0,0 +1,59 @@
+<template>
+	<view class="power-setting-main">
+		<view class="flex-row power-setting-head">
+			<img class="head-img" src="https://qiniu.bms16.com/Fg8_p7083jpsy8BXG4bR6yMs7jQX" alt="">
+			<view class="head-name">名字</view>
+			<text class="head-email">1007929522@Mail.com</text>
+		</view>
+		<view class="setting-card" style="margin-bottom: 20rpx;">
+			<view class="setting-card-name">权限设置</view>
+			<view class="setting-card-list flex-row">
+				<img src="https://qiniu.bms16.com/Fg8_p7083jpsy8BXG4bR6yMs7jQX" alt="">
+				<view class="setting-list-text flex-row">查看实时位置</view>
+			</view>
+			<view class="setting-card-list flex-row">
+				<img src="https://qiniu.bms16.com/Fg8_p7083jpsy8BXG4bR6yMs7jQX" alt="">
+				<view class="setting-list-text flex-row">使用换电</view>
+			</view>
+		</view>
+		<view class="setting-card" style="margin-bottom: 32rpx;">
+			<view class="setting-card-name">默认设置</view>
+			<view class="setting-card-list flex-row">
+				<img src="https://qiniu.bms16.com/Fg8_p7083jpsy8BXG4bR6yMs7jQX" alt="">
+				<view class="setting-list-text flex-row">远程开关锁</view>
+			</view>
+			<view class="setting-card-list flex-row">
+				<img src="https://qiniu.bms16.com/Fg8_p7083jpsy8BXG4bR6yMs7jQX" alt="">
+				<view class="setting-list-text flex-row">座桶锁</view>
+			</view>
+			<view class="setting-card-list flex-row">
+				<img src="https://qiniu.bms16.com/Fg8_p7083jpsy8BXG4bR6yMs7jQX" alt="">
+				<view class="setting-list-text flex-row">感应解锁</view>
+			</view>
+		</view>
+		<view class="check-btn add-btn">确认添加</view>
+		<!-- <view class="check-btn del-btn">删除成员</view> -->
+	</view>
+</template>
+
+<script>
+	var config = require('../../common/config.js');
+	export default {
+		data() {
+			return {
+			};
+		}
+		/**
+		 * 生命周期函数--监听页面加载
+		 */
+		,
+		onLoad: function(options) {
+		},
+		methods: {
+
+		}
+	};
+</script>
+<style>
+	@import './powerSetting.css';
+</style>

pages/purchaseOrder - 副本/purchaseOrder.css

@@ -0,0 +1,983 @@
+.container {}
+
+.car-info {
+	background-color: #ffffff;
+	margin-bottom: 16rpx;
+	padding: 36rpx 32rpx;
+}
+
+.car-top {
+	margin-bottom: 24rpx;
+}
+
+.top-flex>view:nth-of-type(1) {
+	color: #2A3A5A;
+	font-size: 36rpx;
+	font-weight: bold;
+	margin-bottom: 20rpx;
+}
+
+.top-flex>view:nth-of-type(2) {
+	color: #9EA9BB;
+	font-size: 28rpx;
+	margin-bottom: 28rpx;
+}
+
+.car-info img {
+	width: 125rpx;
+	height: 125rpx;
+	border-radius: 16rpx;
+}
+
+.car-bottom {
+	background-color: #F3F8FF;
+	border-radius: 16rpx;
+	padding: 22rpx 24rpx;
+}
+
+.car-bottom>view:nth-of-type(1) {
+	color: #2A3A5A;
+	font-size: 26rpx;
+	font-weight: bold;
+}
+
+.car-bottom img {
+	width: 24rpx;
+	height: 24rpx;
+	margin: 0 12rpx;
+}
+
+.car-bottom>view:nth-of-type(2) {
+	color: #0074FF;
+	font-size: 22rpx;
+	text-align: center;
+	border: 2rpx solid #0074FF;
+	border-radius: 20rpx;
+	/* padding: 6rpx 20rpx; */
+	padding-left: 20rpx;
+	padding-right: 20rpx;
+	height: 36rpx;
+	line-height: 36rpx;
+}
+
+.method-info {
+	background-color: #ffffff;
+	margin-bottom: 16rpx;
+	padding: 48rpx 40rpx 40rpx 32rpx;
+}
+
+.select-item {
+	color: #9EA9BB;
+	font-size: 36rpx;
+	font-weight: bold;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+.selected-item {
+	color: #2A3A5A;
+	font-size: 36rpx;
+	font-weight: bold;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+.select-border {
+	width: 82rpx;
+	height: 12rpx;
+	margin-top: 8rpx;
+	background-color: #ffffff;
+}
+
+.selected-border {
+	width: 82rpx;
+	height: 12rpx;
+	margin-top: 8rpx;
+	background: linear-gradient(to right, #0074FF, #ffffff);
+}
+
+.method-bottom {
+	margin-top: 40rpx;
+}
+
+.method-bottom>img {
+	width: 144rpx;
+	height: 144rpx;
+	margin-right: 24rpx;
+	border-radius: 24rpx;
+}
+
+.bottom-center {
+	align-items: center;
+}
+
+.center-text>view:nth-of-type(1) {
+	color: #2A3A5A;
+	font-size: 36rpx;
+	font-weight: bold;
+	margin-bottom: 16rpx;
+}
+
+.center-text>view:nth-of-type(2) {
+	color: #9FA7B7;
+	font-size: 28rpx;
+}
+
+.ctime {
+	margin-top: 24rpx;
+	color: #828DA2;
+	font-size: 28rpx;
+}
+
+.ctime img,
+.home-first img {
+	width: 26rpx;
+	height: 26rpx;
+	vertical-align: middle;
+}
+
+.home-delivery {
+	margin-top: 48rpx;
+}
+
+.home-first {
+	margin-bottom: 40rpx;
+}
+
+.first-text>view:nth-of-type(1) {
+	color: #2A3A5A;
+	font-size: 36rpx;
+	font-weight: bold;
+	margin-bottom: 16rpx;
+}
+
+.first-text>view:nth-of-type(2) {
+	color: #9FA7B7;
+	font-size: 28rpx;
+}
+
+.home-second {
+	align-items: center;
+}
+
+.home-second>view:nth-of-type(1) {
+	color: #2A3A5A;
+	font-size: 32rpx;
+	font-weight: bold;
+}
+
+.home-second>view:nth-of-type(2) {
+	color: #2A3A5A;
+	font-size: 40rpx;
+}
+
+.home-third {
+	color: #0074FF;
+	font-size: 32rpx;
+	font-weight: bold;
+	margin-top: 32rpx;
+}
+
+.third-text {
+	color: #2A3A5A;
+	font-size: 32rpx;
+	font-weight: bold;
+}
+
+.third-text img {
+	width: 40rpx;
+	height: 40rpx;
+	margin-left: 8rpx;
+	vertical-align: middle;
+}
+
+.bottom-bottom {
+	color: #2A3A5A;
+	font-size: 32rpx;
+}
+
+.bottom-bottom img {
+	width: 36rpx;
+	height: 36rpx;
+	margin-bottom: 14rpx;
+}
+
+.select-deposit {
+	border: 4rpx solid #F3F8FF;
+	background-color: #F3F8FF;
+	border-radius: 16rpx;
+	padding: 32rpx 24rpx;
+	display: flex;
+	justify-content: space-between;
+}
+
+.selected-deposit {
+	border: 4rpx solid #0074FF;
+	box-sizing: border-box;
+	border-radius: 16rpx;
+	padding: 32rpx 24rpx;
+	display: flex;
+	justify-content: space-between;
+}
+
+.deposit-item>view {
+	color: #2A3A5A;
+	font-size: 32rpx;
+	font-weight: bold;
+}
+
+.deposit-item>view>text {
+	color: #828DA2;
+	font-weight: 400;
+}
+
+.select-img {
+	width: 32rpx;
+	height: 32rpx;
+	margin-right: 24rpx;
+	vertical-align: middle;
+}
+
+.info-img {
+	width: 28rpx;
+	height: 28rpx;
+	margin-left: 12rpx;
+	vertical-align: middle;
+}
+
+.blue-text {
+	color: #0074FF;
+	font-weight: bold;
+}
+
+.black-text {
+	color: #2A3A5A;
+	font-weight: bold;
+}
+
+.guarantee-title {
+	margin-bottom: 40rpx;
+}
+
+.guarantee-title>view:nth-of-type(1) {
+	color: #2A3A5A;
+	font-size: 40rpx;
+	font-weight: bold;
+}
+
+.guarantee-title>view:nth-of-type(2) {
+	color: #9FA7B7;
+	font-size: 32rpx;
+	font-weight: 400;
+}
+
+.select-guarantee {
+	background-color: #F3F8FF;
+	border-radius: 24rpx;
+}
+
+.selected-guarantee {
+	border: 4rpx solid #0074FF;
+	box-sizing: border-box;
+	border-radius: 24rpx;
+}
+
+.select-guarantee,
+.selected-guarantee {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	padding: 32rpx 20rpx;
+	box-sizing: border-box;
+}
+
+.guarantee-top {
+	color: #2A3A5A;
+	font-size: 28rpx;
+	font-weight: bold;
+	align-items: center;
+}
+
+.guarantee-top img {
+	width: 62rpx;
+	height: 56rpx;
+	margin-bottom: 16rpx;
+}
+
+.guarantee-center {
+	margin-top: 32rpx;
+}
+
+.center-item {
+	font-size: 24rpx;
+	width: 178rpx;
+	margin-bottom: 16rpx;
+}
+
+.center-item>view:nth-of-type(1) {
+	color: #828DA2;
+
+}
+
+.center-item>view:nth-of-type(2) {
+	color: #0074FF;
+}
+
+.guarantee-border {
+	border-bottom: 2rpx dashed #CFDCEF;
+	width: 100%;
+	margin-top: 24rpx;
+	margin-bottom: 14rpx;
+}
+
+.guarantee-bottom {
+	align-items: center;
+}
+
+.guarantee-bottom>view:nth-of-type(1) {
+	color: #F95151;
+	font-size: 38rpx;
+	margin-bottom: 14rpx;
+}
+
+.blue-t {
+	color: #0074FF;
+	font-size: 24rpx;
+}
+
+.black-t {
+	color: #2A3A5A;
+	font-size: 24rpx;
+}
+
+.guarantee-bottom img {
+	width: 24rpx;
+	height: 24rpx;
+}
+
+.ride-border {
+	border-radius: 24rpx;
+	border: 4rpx solid #0074FF;
+	padding: 28rpx 32rpx 16rpx;
+}
+
+.ride-top {}
+
+.top-left {
+	color: #2A3A5A;
+	font-size: 32rpx;
+	font-weight: bold;
+}
+
+.top-left img {
+	width: 62rpx;
+	height: 56rpx;
+	margin-right: 12rpx;
+	vertical-align: middle;
+}
+
+.top-right {
+	color: #F95151;
+	font-size: 38rpx;
+	font-weight: bold;
+}
+
+.dashed-border {
+	margin-bottom: 22rpx;
+	border-bottom: 2rpx dashed #CFDCEF;
+}
+
+.content-top {
+	color: #2A3A5A;
+	font-size: 28rpx;
+	margin-bottom: 24rpx;
+}
+
+.tab-item {
+	margin-bottom: 16rpx;
+}
+
+.tab-title {
+	color: #828DA2;
+	font-size: 24rpx;
+}
+
+.tab-price {
+	color: #0074FF;
+	font-size: 24rpx;
+	font-weight: bold;
+}
+
+.remove-title {
+	align-items: center;
+	margin-bottom: 4rpx;
+}
+
+.remove-title>view:nth-of-type(1) {
+	color: #2A3A5A;
+	font-size: 32rpx;
+	font-weight: bold;
+	background-color: #F3F8FF;
+	border-radius: 16rpx 0rpx 0rpx 0rpx;
+	padding: 24rpx 0;
+}
+
+.remove-title>view:nth-of-type(2) {
+	color: #2A3A5A;
+	font-size: 32rpx;
+	font-weight: bold;
+	background-color: #F3F8FF;
+	border-radius: 0rpx 16rpx 0rpx 0rpx;
+	padding: 24rpx 0;
+}
+
+.remove-title>view:nth-of-type(1),
+.remove-text>view:nth-of-type(1) {
+	margin-right: 4rpx;
+}
+
+.remove-text>view {
+	color: #2A3A5A;
+	font-size: 28rpx;
+	background-color: #F4F5F6;
+	padding: 26rpx 0;
+}
+
+.remove-title>view,
+.remove-text>view {
+	width: 342rpx;
+	text-align: center;
+}
+
+.assort-box {
+	flex-wrap: wrap;
+}
+
+.assort-text {
+	width: 340rpx;
+	padding: 24rpx;
+	color: #2A3A5A;
+	font-size: 32rpx;
+	font-weight: bold;
+	margin-bottom: 4rpx;
+	background-color: #F3F8FF;
+}
+
+.odd-item {
+	border-radius: 16rpx 0 0 16rpx;
+	margin-right: 4rpx;
+}
+
+.even-item {
+	border-radius: 0 16rpx 16rpx 0;
+}
+
+.deposit-info,
+.guarantee-info,
+.ride-info,
+.remove-info,
+.assort-info {
+	background-color: #ffffff;
+	padding: 48rpx 32rpx 40rpx;
+	margin-bottom: 16rpx;
+}
+
+.method-info>view:nth-of-type(1),
+.deposit-info>view:nth-of-type(1),
+.remove-info>view:nth-of-type(1),
+.assort-info>view:nth-of-type(1) {
+	color: #2A3A5A;
+	font-size: 40rpx;
+	font-weight: bold;
+	margin-bottom: 40rpx;
+}
+
+.pay-type {
+	background-color: #ffffff;
+	padding: 40rpx 32rpx 32rpx;
+	/* margin-bottom: 16rpx; */
+	/* align-items: ; */
+}
+
+.pay-type-tital {
+	color: #2A3A5A;
+	font-size: 40rpx;
+	font-weight: bold;
+	margin-bottom: 20rpx;
+}
+
+.pay-type-item {
+	display: flex;
+}
+
+.pay-type-item img {
+	vertical-align: middle;
+}
+
+.payment-info {
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	width: 100%;
+	background-color: #ffffff;
+	padding: 28rpx 32rpx 32rpx;
+}
+
+.payment-top {
+	color: #2A3A5A;
+	font-size: 28rpx;
+	display: flex;
+	align-items: center;
+}
+
+.payment-top img {
+	width: 32rpx;
+	height: 32rpx;
+	margin-right: 16rpx;
+	vertical-align: middle;
+}
+
+.payment-bottom {
+	margin-top: 28rpx;
+	width: 100%;
+}
+
+.bottom-left {
+	align-items: baseline;
+}
+
+.all-price {
+	color: #F95151;
+	font-size: 36rpx;
+	font-weight: bold;
+}
+
+.all-price text {
+	color: #F95151;
+	font-size: 60rpx;
+	font-weight: bold;
+}
+
+.all-money {
+	color: #0074FF;
+	font-size: 28rpx;
+	font-weight: bold;
+	margin-left: 16rpx;
+}
+
+.bottom-left img {
+	width: 49rpx;
+	height: 49rpx;
+	vertical-align: middle;
+	margin-left: 4rpx;
+}
+
+.payment-bottom>view:nth-of-type(2) {
+	color: #ffffff;
+	font-size: 32rpx;
+	font-weight: bold;
+	text-align: center;
+	height: 88rpx;
+	line-height: 88rpx;
+	border-radius: 44rpx;
+	background: linear-gradient(to right, #0074FF 0%, #00D7FF 100%);
+	display: flex;
+	flex-grow: 1;
+	justify-content: center;
+}
+
+.show-detail {
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	z-index: 10;
+	width: 100%;
+	height: 100vh;
+	background-color: rgba(0, 0, 0, 0.4);
+}
+
+.detail-info {
+	border-radius: 32rpx 32rpx 0rpx 0rpx;
+	z-index: 100;
+	position: fixed;
+	bottom: 0;
+	width: 100%;
+	background-color: #f4f5f6;
+}
+
+.pay-money {
+	background-color: #ffffff;
+	padding: 40rpx 32rpx 0rpx 32rpx;
+}
+
+.pay-money>view {
+	color: #2A3A5A;
+	font-size: 36rpx;
+	font-weight: bold;
+}
+
+.pay-money>view:nth-of-type(1) {
+	color: #2A3A5A;
+	font-size: 40rpx !important;
+	font-weight: bold;
+	line-height: 40rpx;
+}
+
+.detail-money {
+	display: flex;
+	justify-content: flex-end;
+	align-items: baseline;
+}
+
+.detail-money>view:nth-of-type(1) {
+	color: #2A3A5A;
+	font-size: 36rpx;
+}
+
+.detail-money>view:nth-of-type(2) {
+	color: #F95151;
+	font-size: 60rpx;
+	margin-left: 24rpx;
+}
+
+.second {
+	background-color: #ffffff;
+	margin-top: 2rpx;
+	padding: 28rpx 32rpx 32rpx;
+}
+
+.change-info {
+	background-color: #ffffff;
+	padding: 48rpx 32rpx 40rpx;
+	margin-bottom: 16rpx;
+}
+
+.change-title {
+	margin-bottom: 40rpx;
+	color: #2A3A5A;
+	font-size: 40rpx;
+	font-weight: bold;
+}
+
+.change-border {
+	width: 686rpx;
+	height: 156rpx;
+	background: #EEF6FF;
+	border-radius: 16rpx;
+	padding: 32rpx 24rpx;
+}
+
+.change-top {
+	font-family: PingFangSC, PingFang SC;
+	font-weight: 500;
+	font-size: 32rpx;
+	color: #2A3A5A;
+	line-height: 32rpx;
+	text-align: left;
+	font-style: normal;
+}
+
+.change-top>img {
+	width: 40rpx;
+	height: 40rpx;
+	margin-right: 16rpx;
+}
+
+.change-num {
+	font-family: DIN;
+	font-weight: 500;
+	font-size: 36rpx;
+	color: #828DA2;
+	line-height: 32rpx;
+	text-align: right;
+	font-style: normal;
+}
+
+.change-bottom {
+	font-family: PingFangSC, PingFang SC;
+	font-weight: 500;
+	font-size: 32rpx;
+	color: #0074FF;
+	line-height: 32rpx;
+	text-align: left;
+	font-style: normal;
+}
+
+.change-bottom>text {
+	font-family: DIN;
+	font-weight: 500;
+	font-size: 36rpx;
+	color: #0074FF;
+	line-height: 32rpx;
+	text-align: right;
+	font-style: normal;
+	margin: 0 4rpx;
+}
+
+.change-dec {
+	font-family: PingFangSC, PingFang SC;
+	font-weight: 400;
+	font-size: 24rpx;
+	color: #828DA2;
+	line-height: 36rpx;
+	text-align: justify;
+	font-style: normal;
+}
+
+
+
+
+.config-list-view {
+	width: 500rpx;
+	position: relative;
+}
+
+.config-list-view-1 {
+	/* margin-bottom: 40rpx; */
+	width: 500rpx;
+	overflow-y: auto;
+}
+
+.config-list-view-1::after {
+	content: "";
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	width: 10rpx;
+	background-image: radial-gradient(at right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 70%);
+	border-radius: 8rpx;
+}
+
+.service_name-tab {
+	font-weight: 400;
+	font-size: 22rpx;
+	color: #2A3A5A;
+	padding: 8rpx 20rpx;
+	background: #F3F8FF;
+	border-radius: 24rpx;
+	margin-right: 8rpx;
+}
+
+.take-car-time {
+	background: #F3F8FF;
+	border-radius: 16rpx;
+	padding: 32rpx 24rpx;
+	font-weight: 600;
+}
+
+
+.plan-info {
+	padding: 48rpx 24rpx 40rpx 32rpx;
+	background-color: #ffffff;
+	margin-bottom: 16rpx;
+}
+
+.plan-info>view:nth-of-type(1) {
+	color: #2A3A5A;
+	font-size: 40rpx;
+	font-weight: bold;
+	margin-bottom: 32rpx;
+	height: 40rpx;
+	line-height: 40rpx;
+}
+
+.plan-type {
+	width: 700rpx;
+	position: relative;
+	margin-bottom: 40rpx;
+}
+
+.plan-type-1 {
+	width: 700rpx;
+	overflow-y: auto;
+}
+
+.plan-type-1::after {
+	content: "";
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	width: 10rpx;
+	background-image: radial-gradient(at right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 70%);
+	border-radius: 8rpx;
+}
+
+.selectedPtype {
+	min-width: 176rpx;
+	/* flex: 1; */
+	height: 162rpx;
+	flex-direction: column;
+	/* 纵向排列 */
+	justify-content: flex-end;
+	/* display: flex;
+	justify-content: space-between;
+	align-items: flex-end; */
+	background-color: #ffffff;
+	border: 4rpx solid #0074FF;
+	box-sizing: border-box;
+	border-radius: 24rpx;
+	padding: 20rpx 20rpx 32rpx;
+	margin-right: 16rpx;
+}
+
+.selectptype {
+	/* flex: 1; */
+	min-width: 176rpx;
+	height: 162rpx;
+	flex-direction: column;
+	/* 纵向排列 */
+	justify-content: flex-end;
+	/* display: flex; */
+	/* justify-content: space-between;
+	align-items: flex-end; */
+	background-color: #EEF6FF;
+	border: 4rpx solid #EEF6FF;
+	box-sizing: border-box;
+	border-radius: 24rpx;
+	padding: 20rpx 20rpx 32rpx;
+	margin-right: 16rpx;
+}
+
+.ptype-title {
+	font-weight: 500;
+	font-size: 28rpx;
+	text-align: center;
+	color: #2A3A5A;
+}
+
+.ptype-text {
+	font-family: DIN, DIN;
+	font-weight: bold;
+	font-size: 64rpx;
+	color: #2A3A5A;
+	align-items: center;
+}
+
+.ptyped-text {
+	font-family: DIN, DIN;
+	font-weight: bold;
+	font-size: 64rpx;
+	color: #F95151;
+	align-items: center;
+}
+
+.ptyped-text,
+.ptype-text {
+	justify-content: center;
+	/* 水平居中 */
+	align-items: center;
+	/* 垂直居中 */
+}
+
+/* .ptyped-text text {
+	font-size: 40rpx;
+} */
+.plan-time>view:nth-of-type(1) {
+	color: #2A3A5A;
+	font-size: 32rpx;
+	font-weight: bold;
+}
+
+.quantity-count>input {
+	width: 88rpx;
+	height: 48rpx;
+	border-radius: 24rpx;
+	background-color: #F3F8FF;
+	text-align: center;
+	color: #2A3A5A;
+}
+
+.total-time {
+	font-size: 32rpx;
+	color: #2A3A5A;
+	font-weight: 500;
+	margin-right: 24rpx;
+}
+
+.count-btn {
+	width: 48rpx;
+	height: 48rpx;
+	vertical-align: middle;
+}
+
+.fbtn {
+	color: #9FA7B7;
+	margin-right: 16rpx;
+}
+
+.sbtn {
+	/* color: #9FA7B7; */
+	margin-left: 16rpx;
+}
+
+.font_40 {
+	font-weight: 600;
+	font-size: 40rpx;
+	color: #2A3A5A;
+}
+
+.to-store {
+	padding: 10rpx 20rpx;
+	font-weight: 400;
+	font-size: 24rpx;
+	color: #2A3A5A;
+}
+
+.to-door {
+	padding: 10rpx 20rpx;
+	font-weight: 400;
+	font-size: 24rpx;
+	color: #2A3A5A;
+}
+
+.selected-tab {
+	background: #0074FF;
+	border-radius: 32rpx;
+	color: #FFFFFF;
+}
+
+.shop-view {
+	flex-wrap: wrap;
+	padding: 24rpx;
+	background: #EEF6FF;
+	border-radius: 16rpx;
+}
+
+.shop-bg {
+	background: #FFFFFF;
+	border-radius: 4rpx;
+	padding: 32rpx 24rpx;
+	width: 100%;
+}
+
+.shop-name {
+	width: 450rpx;
+	font-weight: 500;
+	font-size: 32rpx;
+	color: #2A3A5A;
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	margin-bottom: 20rpx;
+}
+
+.shop-address {
+	width: 450rpx;
+	font-weight: 400;
+	font-size: 24rpx;
+	color: #828DA2;
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
+
+.nav-btn {
+	flex-wrap: wrap;
+	align-items: center;
+	flex-direction: column;
+}

pages/purchaseOrder - 副本/purchaseOrder.vue

@@ -0,0 +1,1093 @@
+<template>
+	<view class="container-view">
+		<view class="car-info">
+			<view class="car-top flex-row flex-between">
+				<view class="top-flex">
+					<view>{{modelInfo.car_model}}</view>
+					<view>续航{{modelInfo.endurance}}｜重量{{modelInfo.weight}}</view>
+					<view class="config-list-view">
+						<view :class="service_list.length>4?'config-list-view-1 flex-row':'flex-row'">
+							<view class="service_name-tab" v-for=" (item,indexs) in service_list" :key="indexs">
+								{{item.service_name}}
+							</view>
+						</view>
+					</view>
+				</view>
+				<img style="width: 160rpx;height: 160rpx;" :src="modelInfo.model_images[0]" />
+			</view>
+			<view class="take-car-time flex-row flex-between">
+				<view class="flex-row">
+					<img style="width: 40rpx;height: 40rpx;" src="https://qiniu.bms16.com/FrUjLnCOIJiIRQvYgAsgPnlD0bvG"
+						alt="">
+					<view style="margin-left: 16rpx;">取车时间</view>
+				</view>
+				<view @tap="tapSelectTime" class="flex-row">
+					<view style="color: #0074FF;margin-right: 4rpx;" class="">{{takeCar}}</view>
+					<img style="width: 28rpx;height: 28rpx;" src="https://qiniu.bms16.com/FpbKGisSPfL9r8a7QkZCYXolhu1Y"
+						alt="">
+				</view>
+			</view>
+			<!-- <view class="car-bottom flex-row flex-between">
+				<view class="flex-row">
+					<view>{{takeCar}}</view>
+					<img src="https://qiniu.bms16.com/FoXmBbj7YGWmjyeuVEY35nzieqnx" />
+					<view>{{returnCar}}</view>
+				</view>
+				<view>共{{leaseTime+rentalUnit}}</view>
+			</view> -->
+		</view>
+		<view class="plan-info">
+			<view>选择租车方案</view>
+			<view class="plan-type">
+				<view :class="price_list.length>3 ? 'plan-type-1 flex-row' :'flex-row' ">
+					<view @tap="bindChangeStatus" :data-status="indexs" :data-unit="items.hire_duration_unit"
+						:data-price="items.hire_price"
+						:class="isSelectStatus == items.hire_duration_unit?'selectedPtype':'selectptype'"
+						:style="{ 'min-width': (tools.toFixLength(items.hire_price/100) <=3 ? '176rpx' : ((tools.toFixLength(items.hire_price/100)*25.8+130))) + 'rpx' }"
+						v-for=" (items,indexs) in price_list" :key="indexs">
+						<view class="ptype-title" v-if="items.hire_duration_unit==1">日租</view>
+						<view class="ptype-title" v-if="items.hire_duration_unit==4">时租</view>
+						<view class="ptype-title" v-if="items.hire_duration_unit==6">周租</view>
+						<view class="ptype-title" v-if="items.hire_duration_unit==2">月租</view>
+						<view class="ptype-title" v-if="items.hire_duration_unit==7">季租</view>
+						<view
+							:class="isSelectStatus == items.hire_duration_unit?'ptyped-text flex-row':'ptype-text flex-row'">
+							<text style="font-size: 40rpx;">￥</text>
+							<text> {{tools.toFix(items.hire_price/100)}}</text>
+						</view>
+					</view>
+				</view>
+			</view>
+			<view class="plan-time flex-row flex-between">
+				<view>租车时长</view>
+				<view class="quantity-count flex-row">
+					<view class="total-time flex-row">
+						共
+						<view style="font-weight: 600;margin: 0 10rpx;">{{tools.countToDay(count,isSelectStatus)}}
+						</view>
+						<text v-if="isSelectStatus==4">小时</text>
+						<text v-else>天</text>
+					</view>
+					<view @tap.stop.prevent="bindMinus"><img class="count-btn fbtn"
+							src="https://qiniu.bms16.com/Fm-SCbzVeVHgQK920bmWNvnJnL32" /></view>
+					<input @input="bindInput" v-if="showInput" @blur="bindBlur" type="number" :value="count" />
+					<view @tap.stop.prevent="bindAdd"><img class="count-btn sbtn"
+							src="https://qiniu.bms16.com/FsO-2adBjkUkmk4ENuQco-aK7IyY" /></view>
+				</view>
+			</view>
+		</view>
+
+		<view class="method-info">
+			<view class="flex-row flex-between">
+				<view style="font_40">取还方式</view>
+				<!-- 	<view style="background: #EEF6FF;border-radius: 26rpx;" class="flex-row">
+						<view  @tap="clickSelectMethod" data-status="1" :class="return_type == 1?'to-store selected-tab':'to-store'">自行到店</view>
+						<view  @tap="clickSelectMethod" data-status="2" :class="return_type == 2?'to-door selected-tab':'to-door'">送车上门</view>
+					</view> 注释原因：送车上门费用未开发-->
+			</view>
+			<view class="flex-row shop-view">
+				<view style="width: 100%;margin-bottom: 24rpx;" class="flex-row flex-between">
+					<view class="flex-row">
+						<img style="width: 40rpx;height: 40rpx;"
+							:src="return_type == 1?'https://qiniu.bms16.com/FpuR_O5a3b-z_X-HXlybF0oUzcZ4':'https://qiniu.bms16.com/Fol9Qf61SZjBupc7wp6rGGf02xl3'"
+							alt="">
+						<view v-if="return_type == 1" style="margin-left: 16rpx;">自行去门店取还</view>
+						<view v-if="return_type == 2" style="margin-left: 16rpx;">商家送车上门</view>
+					</view>
+					<view v-if="return_type == 1">门店距离您 <text style="color: #0074FF;">{{distance}}</text> </view>
+					<view v-if="return_type == 2">取车点距离您 <text style="color: #0074FF;">{{distance}}</text> </view>
+				</view>
+				<view @tap="bindToNav" class="shop-bg flex-row flex-between">
+					<view class="shop-name-view">
+						<view class="shop-name">{{shopInfo.shop_name}}</view>
+						<view class="shop-address">{{shopInfo.address}}</view>
+					</view>
+					<view class="nav-btn flex-row">
+						<img style="width: 48rpx;height: 48rpx;" src="https://zxappfile.bms16.com/zx_admin/cab_nav.png"
+							alt="">
+						<view style="margin-top: 12rpx;font-size: 24rpx;">导航</view>
+					</view>
+				</view>
+				<!-- <view class="home-second flex-row flex-between">
+					<view>送车距离:</view>
+					<view>{{distance}}</view>
+				</view> -->
+			</view>
+
+
+			<!-- <view v-if="returnType.length == 2" class="flex-row flex-around">
+				<view @tap="clickSelectMethod" data-status="1" :class="return_type == 1?'selected-item':'select-item'">
+					自行取还
+					<view :class="return_type == 1?'selected-border':'select-border'"></view>
+				</view>
+				<view @tap="clickSelectMethod" data-status="2" :class="return_type == 2?'selected-item':'select-item'">
+					送车上门
+					<view :class="return_type == 2?'selected-border':'select-border'"></view>
+				</view>
+			</view>
+			<view v-else class="flex-row flex-around">
+				<view @tap="clickNotShow" data-status="1" :class="return_type == 1?'selected-item':'select-item'">
+					自行取还
+					<view :class="return_type == 1?'selected-border':'select-border'"></view>
+				</view>
+				<view @tap="clickNotShow" data-status="2" :class="return_type == 2?'selected-item':'select-item'">
+					送车上门
+					<view :class="return_type == 2?'selected-border':'select-border'"></view>
+				</view>
+			</view>
+			<view v-if="return_type == 1" class="method-bottom flex-row">
+				<img src="https://qiniu.bms16.com/FicUzQgPOVgDC9Mu4QCAA2c-VGBb" />
+
+				<view style="width: 75%;">
+					<view class="bottom-center flex-row flex-between">
+						<view class="center-text">
+							<view>{{shopInfo.shop_name}}</view>
+							<view>{{shopInfo.address}}</view>
+						</view>
+						<view @tap="bindToNav" class="bottom-bottom flex-row flex-column" style="align-items: center;">
+							<img src="https://qiniu.bms16.com/FqCVS_ihJb8IuxeJNGaqC6NKhYMY" />
+							<view>{{distance}}</view>
+						</view>
+					</view>
+					<view class="ctime flex-row" style="align-items: center;">
+						<img src="https://qiniu.bms16.com/FlGVpR2fdrD1GfeHfDgt-dUMgkOq" />
+						{{shopInfo.work_begin_time +'-'+ shopInfo.work_end_time}}
+					</view>
+				</view>
+			</view>
+			<view v-if="return_type == 2" class="home-delivery">
+				<view class="home-first flex-row flex-between">
+					<view class="first-text">
+						<view>{{shopInfo.shop_name}}</view>
+						<view>{{shopInfo.address}}</view>
+					</view>
+					<view @tap="bindToNav" class="bottom-bottom flex-row flex-column" style="align-items: center;">
+						<img src="https://qiniu.bms16.com/FqCVS_ihJb8IuxeJNGaqC6NKhYMY" />
+						<view>{{distance}}</view>
+					</view>
+				</view>
+				<view class="home-second flex-row flex-between">
+					<view>送车距离</view>
+					<view>{{distance}}</view>
+				</view>
+			</view>
+		 -->
+		</view>
+		<view  class="deposit-info">
+			<view>车辆押金</view>
+			<!-- #ifdef MP-ALIPAY-->
+			<view v-if="freeze_is_open==1" @tap="clickSelectDeposit" data-status="1" :class="is_freeze == 1?'selected-deposit':'select-deposit'"
+				style="margin-bottom: 24rpx;">
+				<view class="deposit-item flex-row" style="align-items: center;">
+					<img class="select-img"
+						:src="is_freeze==1?'https://qiniu.bms16.com/FhWimtmWybKlYMB6mgIReVWArbfq':'https://qiniu.bms16.com/FkmDjxBNZhFGFU5inza2usdtDlX8'" />
+					<view>支付宝芝麻信用</view>
+				</view>
+				<view :class="is_freeze == 1?'blue-text':'black-text'" style="font-size: 32rpx;">免押</view>
+			</view>
+			<!-- #endif  -->
+			<view @tap="clickSelectDeposit" data-status="0" :class="is_freeze == 0?'selected-deposit':'select-deposit'">
+				<view class="deposit-item flex-row">
+					<img class="select-img"
+						:src="is_freeze==0?'https://qiniu.bms16.com/FhWimtmWybKlYMB6mgIReVWArbfq':'https://qiniu.bms16.com/FkmDjxBNZhFGFU5inza2usdtDlX8'" />
+					<!-- <view>押金租借<text>｜还车后退还</text></view> -->
+					<view>押金租借</view>
+				</view>
+				<view :class="is_freeze == 0?'blue-text':'black-text'" style="font-size: 36rpx;">
+					¥{{modelInfo.deposit / 100}}</view>
+			</view>
+		</view>
+		<!-- 		<view class="change-info">
+			<view class="change-title flex-row flex-between">
+				<view>关于车辆换电</view>
+			</view>
+			<view class="change-border">
+				<view class="flex-row flex-between" style="margin-bottom: 20rpx;">
+					<view class="change-top flex-row ">
+						<img src="https://qiniu.bms16.com/FjJ70vT8ydLEGfeABSFYWFe-zosV" />
+						<text style="margin-right: 16rpx;">免费换电次数</text><text class="change-num" style="margin: 0 4rpx;">2</text><text class="change-num">次/日</text>
+					</view>
+					<view class="change-bottom">共<text>4</text>次</view>
+				</view>
+				<view class="change-dec">本单可享4次免费换电数,超出后需要单独支付换电费用</view>
+			</view>
+		</view> -->
+		<view v-if="insurance_setting != null" class="ride-info">
+			<view class="guarantee-title flex-row flex-between">
+				<view>骑行保障服务</view>
+				<view @tap="clickShowInsuranceDesc">保障须知</view>
+			</view>
+			<view class="ride-border">
+				<view class="ride-top flex-row flex-between">
+					<view class="top-left">
+						<img src="https://qiniu.bms16.com/FnFvHiZzSKIve3qMEvtTuvtwgRch" />
+						<text class="content-top">{{insurance_setting.insurance_name}}</text>
+					</view>
+					<view class="top-right">￥{{insurance_setting.price / 100}}/天</view>
+				</view>
+				<view class="dashed-border" style="margin-top: 20rpx;"></view>
+				<view v-for="(item,index) in insurance_setting.detail" :key="index">
+					<view class="ride-tab">
+						<view class="tab-item flex-row flex-between">
+							<view class="tab-title">{{item.info}}</view>
+							<view class="tab-price">{{item.money / 100}}元</view>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<view v-if="cancel_setting.length != 0" class="remove-info">
+			<view>预约取消政策</view>
+			<view class="remove-title flex-row">
+				<view>预约取消时间</view>
+				<view>扣费标准</view>
+			</view>
+			<view v-for="(item,index) in cancel_setting" :key="index" class="remove-text flex-row">
+				<view>支付超过{{item.hour}}小时</view>
+				<view v-if="item.percent != 0">扣除{{item.percent}}%租金总金额</view>
+				<view v-else>免费取消</view>
+			</view>
+		</view>
+		<!-- <view class="assort-info">
+			<view>配套服务</view>
+			<view class="assort-box flex-row">
+				<view v-for="(item,index) in service_list" :key="item.service_id" class="assort-text"
+					:class="{'even-item': index % 2 !== 0, 'odd-item': index % 2 === 0}">
+					{{item.service_name}}
+				</view>
+			</view>
+		</view> -->
+		<view class="pay-type flex-row flex-between">
+			<view class="pay-type-tital">支付方式</view>
+			<view v-if="wallet_money >= (amount * 100)" class="pay-type-item">
+				<img src="https://qiniu.bms16.com/Fu_XFiEYY1jhmBVtNVF7fVEiqai0" style="width: 40rpx;height: 40rpx;" />
+				<view style="padding-left: 10rpx;">钱包支付(¥{{tools.toFix( wallet_money / 100)}})</view>
+			</view>
+			<view v-else class="pay-type-item">
+				<!-- #ifdef MP-WEIXIN -->
+				<img src="https://qiniu.bms16.com/FnGjQsTOIaEgJsnxfCA8Z89WZdth" style="width: 40rpx;height: 40rpx;" />
+				<view style="padding-left: 10rpx;">微信支付</view>
+				<!-- #endif -->
+				<!-- #ifdef MP-ALIPAY -->
+				<img src="https://qiniu.bms16.com/Fk4YmG_RbdH0LNo1s8qHKDtpCTXl" style="width: 40rpx;height: 40rpx;" />
+				<view style="padding-left: 10rpx;">支付宝支付</view>
+				<!-- #endif -->
+			</view>
+		</view>
+		<view style="height: 224rpx;"></view>
+		<view v-if="!isShowDetail" class="payment-info">
+			<!-- <view class="payment-top">
+				<img :src="isArgee?'https://qiniu.bms16.com/FhWimtmWybKlYMB6mgIReVWArbfq':'https://qiniu.bms16.com/FkmDjxBNZhFGFU5inza2usdtDlX8'" />
+				已阅读并同意
+				<text>《小众电动车租赁用户协议》</text>
+			</view> -->
+			<!-- <view class="payment-top" v-for="(item, index) in contractInfo" :key="index">
+				<view @tap="bindContractInfo" :data-contractid="item.contract_id" style="display: inline-block">
+					<img :src="
+						contract_id!=0 && isAgree
+						? 'https://qiniu.bms16.com/FhWimtmWybKlYMB6mgIReVWArbfq'
+						: 'https://qiniu.bms16.com/Fh0JH6_QbiXYmVy7FNYnDkVIGvLC'" />
+				</view>
+				<view @tap="bindContractInfo" :data-contractid="item.contract_id"
+					style="display: inline-block; margin-left: 10rpx">已阅读并同意</view>
+				<view @tap="bindContractTo" style="display: inline-block; color: #0074FF"
+					:data-contractid="item.contract_id">
+					《{{ item.main_title }}》
+				</view>
+			</view> -->
+
+			<view class="payment-bottom flex-row flex-between">
+				<view class="bottom-left flex-row">
+					<allPrice :amount="amount"></allPrice>
+					<view @tap="bindDetail" class="all-money">明细<img
+							src="https://qiniu.bms16.com/Fvl1d-AWRvwY_ehNrw7bMZOK6LBZ" /></view>
+				</view>
+				<view @tap="navToPage">{{is_freeze==0?'立即支付':'支付·授权免押'}}</view>
+			</view>
+		</view>
+
+		<view v-else class="show-detail">
+			<view class="detail-info">
+				<view class="pay-money">
+					<view class="flex-row flex-between" style="margin-bottom: 46rpx;">
+						<view>价格明细</view>
+						<view>
+							<image style="width: 32rpx;height: 32rpx;" @tap="isShowDetail = false"
+								src="https://qiniu.bms16.com/FtoTEHOJiUf_gjPCJGGHMsAtHI5M" />
+						</view>
+					</view>
+					<view class="flex-row flex-between" style="margin-bottom: 44rpx;">
+						<view>车辆租金</view>
+						<view>
+							<!-- ￥{{(leaseTime * price_list[0].hire_price) /100}} -->
+							￥{{(price/100)+'x'+count}}
+							<text v-if="isSelectStatus==4">时</text>
+							<text v-if="isSelectStatus==1">天</text>
+							<text v-if="isSelectStatus==6">周</text>
+							<text v-if="isSelectStatus==2">月</text>
+							<text v-if="isSelectStatus==7">季</text>
+						</view>
+					</view>
+					<view v-if="freeze_is_open==0||(freeze_is_open==1&&is_freeze==0)" class="flex-row flex-between"
+						:style="insurance_setting!=null&&insurance_setting.price-0!=0?'margin-bottom: 44rpx;':''">
+						<view>车辆押金</view>
+						<view>￥{{modelInfo.deposit /100}}</view>
+					</view>
+					<view v-if="insurance_setting!=null&&insurance_setting.price-0!=0" class="flex-row flex-between"
+						style="margin-bottom: 44rpx;">
+						<view>骑行保障服务</view>
+						<view v-if="isSelectStatus==4">{{'￥'+tools.toFix(insurance_setting.price / 100)+'x1天'}}</view>
+						<view v-if="isSelectStatus==1">{{'￥'+tools.toFix(insurance_setting.price / 100)+'x'+count+'天'}}
+						</view>
+						<view v-if="isSelectStatus==6">
+							{{'￥'+tools.toFix(insurance_setting.price / 100)+'x'+count*7+'天'}}
+						</view>
+						<view v-if="isSelectStatus==2">
+							{{'￥'+tools.toFix(insurance_setting.price / 100)+'x'+count*30+'天'}}
+						</view>
+						<view v-if="isSelectStatus==7">
+							{{'￥'+tools.toFix(insurance_setting.price / 100)+'x'+count*90+'天'}}
+						</view>
+					</view>
+					<view class="detail-money flex-row" style="padding-bottom: 44rpx;">
+						<view>支付金额</view>
+						<allPrice :amount="amount"></allPrice>
+					</view>
+				</view>
+				<view class="second">
+					<!-- <view class="payment-top" v-for="(item, index) in contractInfo" :key="index">
+						<view @tap="bindContractInfo" :data-contractid="item.contract_id" style="display: inline-block">
+							<img :src="
+								contract_id!=0 && isAgree
+								? 'https://qiniu.bms16.com/FhWimtmWybKlYMB6mgIReVWArbfq'
+								: 'https://qiniu.bms16.com/Fh0JH6_QbiXYmVy7FNYnDkVIGvLC'" />
+						</view>
+						<view @tap="bindContractInfo" :data-contractid="item.contract_id"
+							style="display: inline-block; margin-left: 10rpx">已阅读并同意</view>
+						<view @tap="bindContractTo" style="display: inline-block; color: #0074FF"
+							:data-contractid="item.contract_id">
+							《{{ item.main_title }}》
+						</view>
+					</view> -->
+					<view class="payment-bottom flex-row flex-between">
+						<view class="bottom-left flex-row">
+							<allPrice :amount="amount"></allPrice>
+							<view @tap="isShowDetail = false" class="all-money">明细<img
+									src="https://qiniu.bms16.com/FkzZI0r5jO-c2JRahNkZW2pHb9dR" /></view>
+						</view>
+						<view @tap="navToPage">{{is_freeze==0?'立即支付':'支付·授权免押'}}</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<calendar ref="calendar" :showPopup.sync="isShowCalendar" @valuesUpdated="handleValuesUpdated"
+			@close="() => isShowCalendar = false" />
+	</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');
+	var user = require('../../common/user.js');
+	import allPrice from '@/component/allPrice/allPrice';
+	import calendar from '@/component/smartCalendar';
+	import {
+		MAX_LIMITS
+	} from '@/common/constant.js';
+	export default {
+		components: {
+			allPrice,
+			calendar
+		},
+		data() {
+			return {
+				takeCar: '',
+				returnCar: '',
+				leaseTime: '',
+				// rentalUnit: '',
+				startDate: '',
+				desc_city: '',
+				modelId: '',
+				modelInfo: {},
+				shopInfo: {},
+				service_list: [],
+				cancel_setting: [],
+				return_type: 1,
+				is_freeze: 0,//是否选择免押 1是  0否
+				freeze_is_open: 0,
+				distance: '',
+				longitude: '',
+				latitude: '',
+				isSelectGuarantee: 0,
+				isArgee: false,
+				from: '',
+				duration_unit: '',
+				free_order_no: '', // 免押订单号
+				contract_id: 0,
+				contractInfo: [],
+				insurance_setting: null,
+				isAgree: false,
+				amount: '',
+				price_list: [],
+				order_sn: '',
+				out_request_no: '',
+				isOpenNoDeposit: false, // 是否去开通免押
+				noDepositStatusTimer: null,
+				pay_type: 0,
+				out_request_no: '',
+				wallet_money: 0, // 用户钱包余额信息
+				returnType: [], // 数组
+				isShowDetail: false,
+				isSelectStatus: 4,
+				count: 1,
+				isShowCalendar: false, //选择预约订单时间
+				showInput: true,
+				userInfo: {
+					is_auth: 0,
+					status: 0
+				},
+			};
+		}
+		/**
+		 * 生命周期函数--监听页面加载
+		 */
+		,
+		onLoad: function(options) {
+			//#ifdef MP-WEIXIN
+			this.is_freeze = 0
+			//#endif
+			this.setData({
+				takeCar: options.takeCar || '',
+				returnCar: options.returnCar || '',
+				leaseTime: options.leaseTime || '',
+				isSelectStatus: options.duration_unit || ''
+			})
+			this.modelId = options.modelId || ''
+			this.longitude = options.longitude || ''
+			this.latitude = options.latitude || ''
+			this.desc_city = options.desc_city || ''
+			this.startDate = options.startDate || ''
+			// if (this.rentalUnit == '小时') {
+			// 	this.duration_unit = 4
+			// } else if (this.rentalUnit == '天') {
+			// 	this.duration_unit = 1
+			// } else if (this.rentalUnit == '周') {
+			// 	this.duration_unit = 6
+			// }
+			this.loadCarInfo()
+			this.loadContractTitles();
+			this.walletInfo()
+		},
+		/**
+		 * 生命周期函数--监听页面显示
+		 */
+		onShow: function() {
+			let pages = getCurrentPages();
+			let currPage = pages[pages.length - 1];
+			let isAgree = currPage.isAgree
+			if (isAgree) {
+				this.setData({
+					isAgree: isAgree
+				});
+			}
+			var userInfo = storage.getUserInfoData()
+			if (userInfo) this.userInfo = userInfo.userInfo
+		},
+		computed: {
+			serviceListLength() {
+				return this.service_list.length;
+			}
+		},
+		methods: {
+			clickShowInsuranceDesc() {
+				uni.navigateTo({
+					url: '/pages/webContent/webContent?webContent=' + this.insurance_setting.illustrate +
+						'&title=' + '保险须知',
+					success: function(res) {},
+					fail: function(res) {},
+					complete: function(res) {},
+				})
+			},
+
+			bindToNav() {
+				const {
+					address,
+					latitude,
+					longitude,
+					shop_name
+				} = this.shopInfo
+				uni.openLocation({
+					latitude: latitude - 0,
+					longitude: longitude - 0,
+					scale: 15,
+					name: shop_name,
+					address: address,
+					success: function(res) {},
+				})
+			},
+
+			loadCarInfo() {
+				const me = this
+				common.loading()
+				http.postApi(config.API_DAYHIRE_CAR_MODEL_INFO, {
+					model_id: me.modelId,
+					longitude: me.longitude,
+					latitude: me.latitude,
+				}, (resp) => {
+					if (resp.data.code === 200) {
+						uni.hideLoading()
+						me.freeze_is_open = resp.data.data.freeze_is_open //门店是1否0开启免押配置
+						//#ifdef MP-ALIPAY
+							me.is_freeze = resp.data.data.freeze_is_open==0?0:1
+						//#endif
+						me.modelInfo = resp.data.data.model_info
+						me.shopInfo = resp.data.data.shop_info
+						me.cancel_setting = resp.data.data.cancel_setting
+						me.distance = common.formatDistance(me.shopInfo.distance - 0)
+						me.modelInfo.endurance = common.formatDistance(me.modelInfo.endurance - 0)
+						me.modelInfo.weight = common.formatWeight(me.modelInfo.weight - 0)
+						me.service_list = resp.data.data.service_list
+						me.insurance_setting = resp.data.data.insurance_setting
+						me.returnType = resp.data.data.return_type
+						me.return_type = resp.data.data.return_type[0]
+						me.modelInfo.model_images = me.modelInfo.model_images.split(',')
+						if (resp.data.data.price_list && Array.isArray(resp.data.data.price_list)) {
+							me.price_list = resp.data.data.price_list
+							resp.data.data.price_list.forEach(i => {
+								if (i.hire_duration_unit == me.isSelectStatus) {
+									me.setData({price:i.hire_price})
+									// me.price = i.hire_price
+								}
+							})
+						}
+
+						me.bindDuration()
+					} else {
+						uni.hideLoading()
+						common.simpleToast(resp.data.msg)
+					}
+				})
+			},
+
+			getServiceStyle(index) {
+				if (index % 2 === 0) {
+					return {
+						borderRadius: '16rpx 0 0 16rpx'
+					};
+				} else {
+					return {
+						borderRadius: '0 16rpx 16rpx 0'
+					};
+				}
+			},
+
+			clickSelectMethod(e) {
+				const status = e.currentTarget.dataset.status
+				this.setData({
+					return_type: status
+				})
+			},
+
+			clickSelectDeposit(e) {
+				const me = this
+				const status = e.currentTarget.dataset.status
+				me.setData({
+					is_freeze: status
+				})
+				me.bindDuration()
+			},
+
+			clickSelectGuarantee(e) {
+				const status = e.currentTarget.dataset.status
+				this.setData({
+					isSelectGuarantee: status
+				})
+			},
+
+			navToPage(e) {
+				const me = this
+				if (this.userInfo.is_auth - 0 == 1 && this.userInfo.status - 0 != 2) {
+					uni.showModal({
+						title: '身份认证提示',
+						content: '尚未完成身份认证，是否进行身份认证?',
+						cancelText: '取消',
+						confirmText: '确定',
+						success: function(res) {
+							if (res.confirm) {
+								me.loadFaceToken()
+							}
+						},
+						fail: function(res) {},
+						complete: function(res) {},
+					})
+					return
+				}
+				// if (this.contractInfo.length > 0 && (!this.isAgree || this.contract_id == 0)) {
+				// 	// if (有合同&&(没查看合同||没勾选同意)) {
+				// 	common.simpleToast('请查阅合同')
+				// 	return
+				// }
+				const isBuyModel= storage.getIsBuyModel()
+				if(isBuyModel){//TODO
+					common.simpleToast('您已有租车订单，请先完成订单')
+					return
+				}
+				// if(storage.setIsBuyModel)
+				//#ifdef MP-ALIPAY
+				this.bindToPayAli()
+				//#endif
+				//#ifdef MP-WEIXIN
+				this.bindToPayWx()
+				//#endif
+			},
+			
+			loadFaceToken() {
+				const me = this
+				http.postApi(config.API_USER_FACE_TOKEN, {}, (resp) => {
+					if (resp.data.code === 200) {
+						me.face_token = resp.data.data.token
+						me.face_key = resp.data.data.key
+						uni.navigateTo({
+							url: '/pages/livenessView/livenessView?face_token=' + me.face_token +
+								'&face_key=' + this.face_key,
+							success: function(res) {},
+							fail: function(res) {},
+							complete: function(res) {},
+						})
+					} else {
+						common.simpleToast(resp.data.msg)
+					}
+				})
+			},
+
+			bindToPayAli() {
+				const me = this
+				me.from = 'ali'
+				const money = me.amount * 100
+				// 默认钱包余额不够支付走支付宝(2)否则走钱包余额类型9
+				me.pay_type = me.wallet_money < money ? '2' : '9'
+				if (me.freeze_is_open == 1 && me.is_freeze == 1) { // 等于0表开启免押
+					if (me.isOpenNoDeposit) {
+						me.bindToPay()
+						return
+					}
+					http.postApi(config.API_ALI_FREEZE, {
+						model_id: me.modelInfo.model_id
+					}, (resp) => {
+						const params = resp.data.data.params
+						my.tradePay({
+							orderStr: params,
+							success: (res) => {
+								if (res.resultCode == 9000) {
+									me.out_request_no = resp.data.data.request_no
+									me.isOpenNoDeposit = true //开通成功后 不显示去开通免押金
+									me.bindDuration()
+									// me.amount = ((me.leaseTime * me.price_list[0].hire_price) + (me.insurance_setting!=null?(me.insurance_setting.price - 0):0)) / 100
+									me.queryNoDepositStatus(me.out_request_no)
+								} else {
+									my.alert({
+										content: '未成功开通免押金,需支付全部押金',
+									});
+									me.is_freeze = 0
+									me.bindDuration()
+									me.bindToPay()
+								}
+							},
+							fail: (res) => {
+								my.alert({
+									content: '未成功开通免押金！',
+								});
+							}
+						})
+					})
+				} else {
+					me.bindToPay()
+				}
+			},
+
+			bindToPayWx() {
+				this.from = 'wx'
+				this.free_order_no = ''
+				const money = this.amount * 100
+				// 默认钱包余额不够支付走微信(0)否则走钱包余额类型9
+				this.pay_type = this.wallet_money < money ? '0' : '9'
+				this.bindToPay()
+			},
+
+			bindToPay() {
+				const me = this
+				if (me.pay_type == '9' && me.wallet_money >= (me.amount * 100)) {
+					uni.showModal({
+						title: '支付提示',
+						content: '确认使用钱包余额进行支付吗?',
+						cancelText: '取消',
+						confirmText: '确定',
+						success: function(res) {
+							if (res.confirm) {
+								me.payMoney()
+							} else if (res.cancel) {
+								common.simpleToast('支付取消')
+								return
+							}
+						},
+						fail: function(res) {
+							common.simpleToast(res.data.msg)
+						},
+						complete: function(res) {},
+					})
+				} else {
+					me.payMoney()
+				}
+			},
+
+			payMoney() {
+				const me = this
+				const begin_time = Math.floor(Date.parse(me.startDate + ':00') / 1000);
+				http.postApi(config.API_DAYHIRE_HIRE_PREDETERMINE, {
+					model_id: me.modelId,
+					hire_duration: me.count, // 周期
+					hire_duration_unit: me.isSelectStatus, // 周期单位
+					begin_time: begin_time,
+					from: me.from,
+					return_type: me.return_type,
+					free_order_no: me.free_order_no,
+					pay_type: me.pay_type,
+					city: me.desc_city,
+					address: me.shopInfo.address,
+					longitude: me.longitude,
+					latitude: me.latitude,
+				}, (resp) => {
+					common.loading()
+					if (resp.data.code === 200) {
+						uni.hideLoading()
+						me.order_sn = resp.data.data.order_sn;
+						if (me.pay_type == '9') {
+							common.simpleToast('支付成功')
+							setTimeout(function() {
+								uni.navigateTo({
+									url: '/pages/orderStatus/orderStatus?order_sn=' + me.order_sn,
+									success: function(res) {},
+									fail: function(res) {},
+									complete: function(res) {},
+								})
+							}, 500)
+						} else {
+							//#ifdef MP-ALIPAY
+							my.tradePay({
+								tradeNO: resp.data.data.trade_no,
+								success: function(res) {
+									if (res.resultCode == 9000) {
+										common.simpleToast('支付成功');
+									}
+									setTimeout(function() {
+										uni.navigateTo({
+											url: '/pages/orderStatus/orderStatus?order_sn=' +
+												me.order_sn + '&longitude=' + me
+												.longitude + '&latitude=' + me
+												.latitude,
+											success: function(res) {},
+											fail: function(res) {},
+											complete: function(res) {}
+										});
+									}, 1000);
+								},
+								fail: function(res) {
+									uni.navigateTo({
+										url: '/pages/orderStatus/orderStatus?order_sn=' + me
+											.order_sn + '&longitude=' + me.longitude +
+											'&latitude=' + me.latitude,
+										success: function(res) {},
+										fail: function(res) {},
+										complete: function(res) {}
+									});
+								},
+							})
+							//#endif
+							//#ifdef MP-WEIXIN
+							var payParams = JSON.parse(resp.data.data.payParams);
+							user.wxPay(me.order_sn, payParams, function(isSuccess) {
+								if (isSuccess) {
+									common.simpleToast('支付成功')
+									// // 跳转激活车辆
+									// 	uni.navigateTo({
+									// 		url: '/pages/inputLicensePlate/inputLicensePlate?order_sn=' + me.order_sn +'&order_model_id='+me.modelId,
+									// 		success: function(res) {},
+									// 		fail: function(res) {},
+									// 		complete: function(res) {}
+									// 	})
+									setTimeout(function() {
+										uni.navigateTo({
+											url: '/pages/orderStatus/orderStatus?order_sn=' +
+												me.order_sn + '&longitude=' + me
+												.longitude +
+												'&latitude=' + me.latitude,
+											success: function(res) {},
+											fail: function(res) {},
+											complete: function(res) {}
+										});
+									}, 1000)
+								} else {
+									uni.navigateTo({
+										url: '/pages/orderStatus/orderStatus?order_sn=' + me
+											.order_sn +
+											'&longitude=' + me.longitude + '&latitude=' + me
+											.latitude,
+										success: function(res) {},
+										fail: function(res) {},
+										complete: function(res) {}
+									});
+								}
+							});
+							//#endif
+						}
+					} else {
+						uni.hideLoading()
+						common.simpleToast(resp.data.msg)
+					}
+				})
+			},
+
+			queryNoDepositStatus(_out_request_no) {
+				const me = this
+				me.clearNoDepositStatusTimer();
+				me.noDepositStatusTimer = setInterval(function() {
+					http.postApi(
+						config.API_ALI_FREEZE_STATUS, {
+							model_id: me.modelInfo.model_id,
+							out_request_no: _out_request_no
+						},
+						function(resp) {
+							uni.hideLoading();
+							if (resp.data.code === 200) {
+								const {
+									status
+								} = resp.data.data
+								if (status === 2) {
+									common.simpleToast('开通免押金成功,正在前往租赁车辆~');
+									me.clearNoDepositStatusTimer();
+									setTimeout(function() {
+										me.free_order_no = _out_request_no
+										me.bindToPay()
+									}, 1500);
+								} else if (status === 1 || status === 0) {
+									common.simpleToast('查询免押金开通状态中，请稍后~');
+								}
+							} else {
+								common.simpleToast(resp.data.msg);
+								me.clearNoDepositStatusTimer();
+							}
+						}
+					);
+				}, 1000)
+			},
+
+			// 清空查询免押金状态
+			clearNoDepositStatusTimer: function() {
+				if (this.noDepositStatusTimer == null) {
+					return;
+				}
+
+				clearInterval(this.noDepositStatusTimer);
+				this.noDepositStatusTimer = null;
+			},
+
+			bindContractInfo(e) {
+				// if (!this.isAgree && this.contract_id == 0) {
+				// 	common.simpleToast('请先点击阅读租赁合同');
+				// 	return;
+				// }
+				const contract_id = e.currentTarget.dataset.contractid;
+				if (this.contract_id == contract_id) {
+					this.setData({
+						contract_id: 0,
+					});
+				} else {
+					this.setData({
+						contract_id: contract_id
+					});
+				}
+			},
+
+			loadContractTitles() {
+				const accountInfo = uni.getAccountInfoSync();
+				const me = this;
+				http.postApi(
+					config.API_CONTRACT_TITLE, {
+						appid: accountInfo.miniProgram.appId
+					},
+					function(resp) {
+						if (resp.data.code === 200) {
+							const contractInfo = resp.data.data.contractInfo;
+							me.setData({
+								contractInfo: contractInfo
+							});
+						}
+					}
+				);
+			},
+
+			bindContractTo(e) {
+				const contract_id = e.currentTarget.dataset.contractid;
+				this.setData({
+					contract_id: contract_id
+				});
+				uni.navigateTo({
+					url: '/pages/contract/contract?contract_id=' + contract_id,
+					success: function(res) {},
+					fail: function(res) {},
+					complete: function(res) {}
+				});
+			},
+
+			clickNotShow() {
+				common.simpleToast('门店未开通，不可自选');
+			},
+
+			walletInfo() {
+				const me = this
+				http.postApi(config.API_DAYHIRE_USER_WALLET_INFO, {}, function(resp) {
+					if (resp.data.code === 200) {
+						me.wallet_money = resp.data.data.balance // 用户钱包余额信息，用于展示用户钱包余额信息。
+					} else {
+						common.simpleToast(resp.data.msg)
+					}
+				})
+			},
+
+			bindDetail() {
+				this.isShowDetail = true
+			},
+
+			//计算价格
+			bindDuration() {
+				const me = this
+				var _insurance_price //保险金
+				const unit_price = (me.price / 100) * me.count //租金
+				// insurance_setting 保险
+				if (me.insurance_setting != null) { // 有保险的时候
+					// isSelectDeposit==0为免押  isOpenNoDeposit为是否成功开通免押  total_money为总金额
+					// unit_price 租金   insurance_setting.price 保险金   deposit 押金
+					if (me.isSelectStatus == 4) { // 时
+						_insurance_price = (me.insurance_setting.price - 0) * 1
+					} else if (me.isSelectStatus == 6) { // 周
+						_insurance_price = (me.insurance_setting.price - 0) * 7 * me.count
+					} else if (me.isSelectStatus == 1) { //天
+						_insurance_price = (me.insurance_setting.price - 0) * me.count
+					} else if (me.isSelectStatus == 2) { //月
+						_insurance_price = (me.insurance_setting.price - 0) * 30 * me.count
+					} else if (me.isSelectStatus == 7) { //季
+						_insurance_price = (me.insurance_setting.price - 0) * 90 * me.count
+					}
+				} else { // 无保险
+					_insurance_price = 0
+				}
+
+				if (me.freeze_is_open == 1 &&( me.isOpenNoDeposit || me.is_freeze == 1)) {
+					// 金额=(周期数*周期价格)+保险金
+					me.amount = ((me.count * me.price - 0) + (_insurance_price - 0)) / 100
+				} else {
+					// 金额=(周期数*周期价格)+押金+保险金
+					me.amount = ((me.count * me.price - 0) + (me.modelInfo.deposit - 0) + (_insurance_price - 0)) / 100
+				}
+			},
+			bindChangeStatus(e) {
+				const {
+					status,
+					unit,
+					price
+				} = e.currentTarget.dataset
+				this.setData({
+					isSelectStatus: unit,
+					selectIndex: status,
+					price: price,
+					count: 1
+				})
+				this.bindDuration()
+			},
+
+			bindMinus() {
+				if (this.count > 1) {
+					this.setData({
+						count: this.count - 1
+					});
+				}
+				this.bindDuration()
+			},
+			blurHandle() {
+				this.showInput = false
+				this.$nextTick(() => {
+					this.showInput = true
+				})
+			},
+			bindInput(e) {
+				// let count = Number(e.detail.value)
+				// this.setData({
+				//     count: count,
+				// })
+				const num = e.detail.value
+				this.bindTipCount(num)
+				this.bindDuration()
+			},
+
+			bindBlur(e) {
+				const count = e.detail.value
+				this.bindTipCount(count)
+				if (count < 1) {
+					this.setData({
+						count: 1
+					})
+				}
+				this.bindDuration()
+			},
+
+			bindAdd() {
+				// this.setData({
+				//     count: this.count + 1
+				// });
+				const num = this.count - 0 + 1
+				this.bindTipCount(num)
+				this.bindDuration()
+			},
+			bindTipCount(num) {
+				const limit = MAX_LIMITS[this.isSelectStatus];
+				if (limit && num > limit.max) {
+					common.simpleToast(limit.message);
+					this.setData({
+						count: limit.max
+					})
+					this.blurHandle()
+				} else {
+					this.setData({
+						count: num
+					})
+				}
+			},
+			handleValuesUpdated(e) {
+				this.takeCar = e.takeCar
+				this.returnCar = e.returnCar
+				this.leaseTime = e.leaseTime
+				this.startDate = e.startDate
+				this.isShowCalendar = false;
+			},
+			tapSelectTime() {
+				this.setData({
+					isShowCalendar: true
+				})
+				this.$refs.calendar['leaseType'] = +this.selectType
+				this.$nextTick(() => {
+					this.$refs.calendar && this.$refs.calendar.setTakeCarData({
+						takeCar: this.takeCar,
+						dateText: this.startDate.replace('T', ' ')
+					})
+				})
+			},
+		}
+	};
+</script>
+
+<style>
+	@import './purchaseOrder.css';
+</style>

pages/purchaseOrder/purchaseOrder.css

@@ -1,522 +1,229 @@
-.container {}
-
-.car-info {
-	background-color: #ffffff;
-	margin-bottom: 16rpx;
-	padding: 36rpx 32rpx;
-}
-
-.car-top {
-	margin-bottom: 24rpx;
-}
-
-.top-flex>view:nth-of-type(1) {
-	color: #2A3A5A;
+.select-time-view{
+	font-weight: 400;
 	font-size: 36rpx;
-	font-weight: bold;
+	color: #060809;
+	background: #FFFFFF;
+	border-radius: 40rpx;
+	padding: 40rpx 32rpx;
 	margin-bottom: 20rpx;
 }
 
-.top-flex>view:nth-of-type(2) {
-	color: #9EA9BB;
-	font-size: 28rpx;
-	margin-bottom: 28rpx;
-}
-
-.car-info img {
-	width: 125rpx;
-	height: 125rpx;
-	border-radius: 16rpx;
-}
-
-.car-bottom {
-	background-color: #F3F8FF;
-	border-radius: 16rpx;
-	padding: 22rpx 24rpx;
-}
-
-.car-bottom>view:nth-of-type(1) {
-	color: #2A3A5A;
-	font-size: 26rpx;
-	font-weight: bold;
-}
-
-.car-bottom img {
-	width: 24rpx;
-	height: 24rpx;
-	margin: 0 12rpx;
-}
-
-.car-bottom>view:nth-of-type(2) {
-	color: #0074FF;
-	font-size: 22rpx;
-	text-align: center;
-	border: 2rpx solid #0074FF;
-	border-radius: 20rpx;
-	/* padding: 6rpx 20rpx; */
-	padding-left: 20rpx;
-	padding-right: 20rpx;
-	height: 36rpx;
-	line-height: 36rpx;
-}
-
-.method-info {
-	background-color: #ffffff;
-	margin-bottom: 16rpx;
-	padding: 48rpx 40rpx 40rpx 32rpx;
-}
-
-.select-item {
-	color: #9EA9BB;
-	font-size: 36rpx;
-	font-weight: bold;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-}
-
-.selected-item {
-	color: #2A3A5A;
-	font-size: 36rpx;
-	font-weight: bold;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-}
-
-.select-border {
-	width: 82rpx;
-	height: 12rpx;
-	margin-top: 8rpx;
-	background-color: #ffffff;
-}
-
-.selected-border {
-	width: 82rpx;
-	height: 12rpx;
-	margin-top: 8rpx;
-	background: linear-gradient(to right, #0074FF, #ffffff);
-}
-
-.method-bottom {
-	margin-top: 40rpx;
+.container-view{
+	background: #F4F5F6;
+	padding: 24rpx;
 }
-
-.method-bottom>img {
-	width: 144rpx;
-	height: 144rpx;
-	margin-right: 24rpx;
-	border-radius: 24rpx;
+.select-time-text {
+	font-family: DIN, DIN;
+	font-weight: 600;
+	font-size: 48rpx;
+	color: #060809;
+	margin-bottom:20rpx ;
 }
-
-.bottom-center {
+.align-center{
 	align-items: center;
 }
-
-.center-text>view:nth-of-type(1) {
-	color: #2A3A5A;
-	font-size: 36rpx;
-	font-weight: bold;
-	margin-bottom: 16rpx;
-}
-
-.center-text>view:nth-of-type(2) {
-	color: #9FA7B7;
-	font-size: 28rpx;
-}
-
-.ctime {
-	margin-top: 24rpx;
-	color: #828DA2;
-	font-size: 28rpx;
-}
-
-.ctime img,
-.home-first img {
-	width: 26rpx;
-	height: 26rpx;
-	vertical-align: middle;
-}
-
-.home-delivery {
-	margin-top: 48rpx;
+.car-info-view{
+	padding: 32rpx;
+	background: #FFFFFF;
+	border-radius: 40rpx;
+	margin-bottom: 20rpx;
 }
-
-.home-first {
-	margin-bottom: 40rpx;
+.car-info-grow{
+	flex-direction: column;
+	align-items: baseline;
+	margin-left:24rpx ;
 }
-
-.first-text>view:nth-of-type(1) {
-	color: #2A3A5A;
+.car-name{
+	font-weight: 400;
 	font-size: 36rpx;
-	font-weight: bold;
-	margin-bottom: 16rpx;
-}
-
-.first-text>view:nth-of-type(2) {
-	color: #9FA7B7;
-	font-size: 28rpx;
-}
-
-.home-second {
-	align-items: center;
-}
-
-.home-second>view:nth-of-type(1) {
-	color: #2A3A5A;
-	font-size: 32rpx;
-	font-weight: bold;
-}
-
-.home-second>view:nth-of-type(2) {
-	color: #2A3A5A;
-	font-size: 40rpx;
-}
-
-.home-third {
-	color: #0074FF;
-	font-size: 32rpx;
-	font-weight: bold;
-	margin-top: 32rpx;
-}
-
-.third-text {
-	color: #2A3A5A;
-	font-size: 32rpx;
-	font-weight: bold;
-}
-
-.third-text img {
-	width: 40rpx;
-	height: 40rpx;
-	margin-left: 8rpx;
-	vertical-align: middle;
-}
-
-.bottom-bottom {
-	color: #2A3A5A;
-	font-size: 32rpx;
-}
-
-.bottom-bottom img {
-	width: 36rpx;
-	height: 36rpx;
-	margin-bottom: 14rpx;
-}
-
-.select-deposit {
-	border: 4rpx solid #F3F8FF;
-	background-color: #F3F8FF;
-	border-radius: 16rpx;
-	padding: 32rpx 24rpx;
-	display: flex;
-	justify-content: space-between;
-}
-
-.selected-deposit {
-	border: 4rpx solid #0074FF;
-	box-sizing: border-box;
-	border-radius: 16rpx;
-	padding: 32rpx 24rpx;
-	display: flex;
-	justify-content: space-between;
-}
-
-.deposit-item>view {
-	color: #2A3A5A;
-	font-size: 32rpx;
-	font-weight: bold;
+	color: #060809;
+	width: 100%;
+	width: 400rpx;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }
-
-.deposit-item>view>text {
-	color: #828DA2;
+.car-information{
 	font-weight: 400;
+	font-size: 24rpx;
+	color: #9EA9BB;
+	margin-bottom: 30rpx;
 }
-
-.select-img {
-	width: 32rpx;
-	height: 32rpx;
-	margin-right: 24rpx;
-	vertical-align: middle;
-}
-
-.info-img {
-	width: 28rpx;
-	height: 28rpx;
-	margin-left: 12rpx;
-	vertical-align: middle;
-}
-
-.blue-text {
-	color: #0074FF;
-	font-weight: bold;
-}
-
-.black-text {
-	color: #2A3A5A;
-	font-weight: bold;
+.config-list-view {
+	width: 500rpx;
+	position: relative;
 }
 
-.guarantee-title {
-	margin-bottom: 40rpx;
+.config-list-view-1 {
+	/* margin-bottom: 40rpx; */
+	width: 500rpx;
+	overflow-y: auto;
 }
 
-.guarantee-title>view:nth-of-type(1) {
-	color: #2A3A5A;
-	font-size: 40rpx;
-	font-weight: bold;
+.config-list-view-1::after {
+	content: "";
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	width: 10rpx;
+	background-image: radial-gradient(at right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 70%);
+	border-radius: 8rpx;
 }
 
-.guarantee-title>view:nth-of-type(2) {
-	color: #9FA7B7;
-	font-size: 32rpx;
+.service_name-tab {
 	font-weight: 400;
-}
-
-.select-guarantee {
-	background-color: #F3F8FF;
-	border-radius: 24rpx;
-}
-
-.selected-guarantee {
-	border: 4rpx solid #0074FF;
-	box-sizing: border-box;
-	border-radius: 24rpx;
-}
-
-.select-guarantee,
-.selected-guarantee {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-	padding: 32rpx 20rpx;
-	box-sizing: border-box;
-}
-
-.guarantee-top {
+	font-size: 22rpx;
 	color: #2A3A5A;
-	font-size: 28rpx;
-	font-weight: bold;
-	align-items: center;
+	padding: 8rpx 20rpx;
+	background: #F3F8FF;
+	border-radius: 24rpx;
+	margin-right: 8rpx;
 }
-
-.guarantee-top img {
-	width: 62rpx;
-	height: 56rpx;
-	margin-bottom: 16rpx;
+.deposit-info {
+	background-color: #FFF;
+	border-radius: 40rpx;
+	padding: 40rpx 32rpx;
+	margin-bottom: 20rpx;
 }
-
-.guarantee-center {
-	margin-top: 32rpx;
+.deposit-info-title{
+	font-weight: 400;
+	font-size: 36rpx;
+	color: #060809;
+	margin-bottom: 26rpx;
 }
-
-.center-item {
+.deposit-info-text{
+	font-weight: 400;
 	font-size: 24rpx;
-	width: 178rpx;
-	margin-bottom: 16rpx;
-}
-
-.center-item>view:nth-of-type(1) {
 	color: #828DA2;
-
-}
-
-.center-item>view:nth-of-type(2) {
-	color: #0074FF;
-}
-
-.guarantee-border {
-	border-bottom: 2rpx dashed #CFDCEF;
-	width: 100%;
-	margin-top: 24rpx;
-	margin-bottom: 14rpx;
-}
-
-.guarantee-bottom {
-	align-items: center;
-}
-
-.guarantee-bottom>view:nth-of-type(1) {
-	color: #F95151;
-	font-size: 38rpx;
-	margin-bottom: 14rpx;
-}
-
-.blue-t {
-	color: #0074FF;
-	font-size: 24rpx;
 }
-
-.black-t {
-	color: #2A3A5A;
-	font-size: 24rpx;
+.distance-num{
+	font-family: DIN, DIN;
+	font-weight: 600;
+	font-size: 26rpx;
+	color: #0A59F7;
+	padding: 2rpx 6rpx;
+	margin-left: 8rpx;
+	background: #E6EEFE;
+	border-radius: 20rpx;
 }
-
-.guarantee-bottom img {
-	width: 24rpx;
-	height: 24rpx;
+.font_32{
+	font-weight: 400;
+	font-size: 36rpx;
+	color: #060809;
 }
-
-.ride-border {
+.shop-bg {
+	background: #F4F5F6;
 	border-radius: 24rpx;
-	border: 4rpx solid #0074FF;
-	padding: 28rpx 32rpx 16rpx;
-}
-
-.ride-top {}
-
-.top-left {
-	color: #2A3A5A;
-	font-size: 32rpx;
-	font-weight: bold;
-}
-
-.top-left img {
-	width: 62rpx;
-	height: 56rpx;
-	margin-right: 12rpx;
-	vertical-align: middle;
-}
-
-.top-right {
-	color: #F95151;
-	font-size: 38rpx;
-	font-weight: bold;
-}
-
-.dashed-border {
-	margin-bottom: 22rpx;
-	border-bottom: 2rpx dashed #CFDCEF;
-}
-
-.content-top {
-	color: #2A3A5A;
-	font-size: 28rpx;
-	margin-bottom: 24rpx;
-}
-
-.tab-item {
-	margin-bottom: 16rpx;
-}
-
-.tab-title {
-	color: #828DA2;
-	font-size: 24rpx;
-}
-
-.tab-price {
-	color: #0074FF;
-	font-size: 24rpx;
-	font-weight: bold;
-}
-
-.remove-title {
-	align-items: center;
-	margin-bottom: 4rpx;
-}
-
-.remove-title>view:nth-of-type(1) {
-	color: #2A3A5A;
-	font-size: 32rpx;
-	font-weight: bold;
-	background-color: #F3F8FF;
-	border-radius: 16rpx 0rpx 0rpx 0rpx;
-	padding: 24rpx 0;
+	padding: 32rpx 24rpx;
+	width: 100%;
 }
 
-.remove-title>view:nth-of-type(2) {
-	color: #2A3A5A;
+.shop-name {
+	width: 450rpx;
+	font-weight: 600;
 	font-size: 32rpx;
-	font-weight: bold;
-	background-color: #F3F8FF;
-	border-radius: 0rpx 16rpx 0rpx 0rpx;
-	padding: 24rpx 0;
-}
-
-.remove-title>view:nth-of-type(1),
-.remove-text>view:nth-of-type(1) {
-	margin-right: 4rpx;
-}
-
-.remove-text>view {
 	color: #2A3A5A;
-	font-size: 28rpx;
-	background-color: #F4F5F6;
-	padding: 26rpx 0;
-}
-
-.remove-title>view,
-.remove-text>view {
-	width: 342rpx;
-	text-align: center;
-}
-
-.assort-box {
-	flex-wrap: wrap;
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	margin-bottom: 20rpx;
 }
 
-.assort-text {
-	width: 340rpx;
-	padding: 24rpx;
-	color: #2A3A5A;
-	font-size: 32rpx;
-	font-weight: bold;
-	margin-bottom: 4rpx;
-	background-color: #F3F8FF;
+.shop-address {
+	width: 450rpx;
+	font-weight: 400;
+	font-size: 24rpx;
+	color: #828DA2;
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
 }
 
-.odd-item {
-	border-radius: 16rpx 0 0 16rpx;
-	margin-right: 4rpx;
+.nav-btn {
+	flex-wrap: wrap;
+	align-items: center;
+	flex-direction: column;
+	font-weight: 600;
+	font-size: 24rpx;
+	color: #2A3A5A;
 }
-
-.even-item {
-	border-radius: 0 16rpx 16rpx 0;
+.return-box{
+	position: fixed;
+	top: 0;
+	left: 0;
+	z-index: 10;
+	width: 100%;
+	height: 100vh;
+	background-color: rgba(0, 0, 0, 0.4);
 }
 
-.deposit-info,
-.guarantee-info,
-.ride-info,
-.remove-info,
-.assort-info {
+.return-item {
+	border-radius: 32rpx 32rpx 0rpx 0rpx;
 	background-color: #ffffff;
-	padding: 48rpx 32rpx 40rpx;
-	margin-bottom: 16rpx;
+	padding: 40rpx 32rpx 74rpx;
+	z-index: 100;
+	position: fixed;
+	bottom: 0;
+	width: 100%;
 }
 
-.method-info>view:nth-of-type(1),
-.deposit-info>view:nth-of-type(1),
-.remove-info>view:nth-of-type(1),
-.assort-info>view:nth-of-type(1) {
-	color: #2A3A5A;
+.return-title {
+	font-weight: 600;
 	font-size: 40rpx;
-	font-weight: bold;
-	margin-bottom: 40rpx;
+	color: #060809;
+	font-size: 40rpx;
+	font-weight: 600;
+	margin-bottom: 32rpx;
+	line-height: 40rpx;
 }
 
-.pay-type {
-	background-color: #ffffff;
-	padding: 40rpx 32rpx 32rpx;
-	/* margin-bottom: 16rpx; */
-	/* align-items: ; */
+.return-item img {
+	width: 32rpx;
+	height: 32rpx;
+	vertical-align: middle;
 }
 
-.pay-type-tital {
+.return-text {
 	color: #2A3A5A;
-	font-size: 40rpx;
-	font-weight: bold;
-	margin-bottom: 20rpx;
+	font-size: 28rpx;
+	margin-bottom: 64rpx;
+	width: 100%;
+	line-height: 52rpx;
 }
 
-.pay-type-item {
-	display: flex;
+.return-btn>view:nth-of-type(1) {
+	background: #EBECEC;
+	border-radius: 40rpx;
+	margin-right: 18rpx;
+	font-weight: 600;
+	font-size: 32rpx;
+	color: #060809;
+	text-align: center;
+	height: 80rpx;
+	line-height: 80rpx;
+	width: 100%;
 }
 
-.pay-type-item img {
-	vertical-align: middle;
+.return-btn>view:nth-of-type(2) {
+	background: #060809;
+	border-radius: 40rpx;
+	font-weight: 600;
+	font-size: 32rpx;
+	color: #FFFFFF;
+	text-align: center;
+	height: 80rpx;
+	line-height: 80rpx;
+	width: 100%;
+}
+.close-view{
+	width: 60rpx;
+	height: 60rpx;
+	line-height: 60rpx;
+	background: #F4F5F6;
+	border-radius: 50%;
+	text-align: center;
 }
-
 .payment-info {
 	position: fixed;
 	bottom: 0;
@@ -583,7 +290,8 @@
 	height: 88rpx;
 	line-height: 88rpx;
 	border-radius: 44rpx;
-	background: linear-gradient(to right, #0074FF 0%, #00D7FF 100%);
+	background: #060809;
+	/* background: linear-gradient(to right, #0074FF 0%, #00D7FF 100%); */
 	display: flex;
 	flex-grow: 1;
 	justify-content: center;
@@ -642,342 +350,49 @@
 	font-size: 60rpx;
 	margin-left: 24rpx;
 }
-
-.second {
-	background-color: #ffffff;
-	margin-top: 2rpx;
-	padding: 28rpx 32rpx 32rpx;
-}
-
-.change-info {
+.method-info {
 	background-color: #ffffff;
-	padding: 48rpx 32rpx 40rpx;
 	margin-bottom: 16rpx;
+	padding: 48rpx 40rpx 40rpx 32rpx;
+	border-radius: 40rpx;
 }
-
-.change-title {
-	margin-bottom: 40rpx;
-	color: #2A3A5A;
+.check-order-text{
+	font-weight: 600;
 	font-size: 40rpx;
-	font-weight: bold;
-}
-
-.change-border {
-	width: 686rpx;
-	height: 156rpx;
-	background: #EEF6FF;
-	border-radius: 16rpx;
-	padding: 32rpx 24rpx;
-}
-
-.change-top {
-	font-family: PingFangSC, PingFang SC;
-	font-weight: 500;
-	font-size: 32rpx;
-	color: #2A3A5A;
-	line-height: 32rpx;
-	text-align: left;
-	font-style: normal;
-}
-
-.change-top>img {
-	width: 40rpx;
-	height: 40rpx;
-	margin-right: 16rpx;
-}
-
-.change-num {
-	font-family: DIN;
-	font-weight: 500;
-	font-size: 36rpx;
-	color: #828DA2;
-	line-height: 32rpx;
-	text-align: right;
-	font-style: normal;
-}
-
-.change-bottom {
-	font-family: PingFangSC, PingFang SC;
-	font-weight: 500;
-	font-size: 32rpx;
-	color: #0074FF;
-	line-height: 32rpx;
-	text-align: left;
-	font-style: normal;
+	color: #060809;
+	text-align: center;
+	margin:32rpx 0 24rpx ;
 }
-
-.change-bottom>text {
-	font-family: DIN;
-	font-weight: 500;
+.get-car-time{
+	font-weight: 600;
 	font-size: 36rpx;
-	color: #0074FF;
-	line-height: 32rpx;
-	text-align: right;
-	font-style: normal;
-	margin: 0 4rpx;
-}
-
-.change-dec {
-	font-family: PingFangSC, PingFang SC;
-	font-weight: 400;
-	font-size: 24rpx;
-	color: #828DA2;
-	line-height: 36rpx;
-	text-align: justify;
-	font-style: normal;
-}
-
-
-
-
-.config-list-view {
-	width: 500rpx;
-	position: relative;
-}
-
-.config-list-view-1 {
-	/* margin-bottom: 40rpx; */
-	width: 500rpx;
-	overflow-y: auto;
-}
-
-.config-list-view-1::after {
-	content: "";
-	position: absolute;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	width: 10rpx;
-	background-image: radial-gradient(at right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 70%);
-	border-radius: 8rpx;
-}
-
-.service_name-tab {
-	font-weight: 400;
-	font-size: 22rpx;
-	color: #2A3A5A;
-	padding: 8rpx 20rpx;
-	background: #F3F8FF;
-	border-radius: 24rpx;
-	margin-right: 8rpx;
+	color: #0A59F7;
 }
-
-.take-car-time {
-	background: #F3F8FF;
-	border-radius: 16rpx;
-	padding: 32rpx 24rpx;
+.get-car-name{
 	font-weight: 600;
+	font-size: 32rpx;
+	color: #060809;
 }
 
 
-.plan-info {
-	padding: 48rpx 24rpx 40rpx 32rpx;
-	background-color: #ffffff;
-	margin-bottom: 16rpx;
-}
-
-.plan-info>view:nth-of-type(1) {
-	color: #2A3A5A;
-	font-size: 40rpx;
-	font-weight: bold;
-	margin-bottom: 32rpx;
-	height: 40rpx;
-	line-height: 40rpx;
-}
-
-.plan-type {
-	width: 700rpx;
-	position: relative;
-	margin-bottom: 40rpx;
-}
-
-.plan-type-1 {
-	width: 700rpx;
-	overflow-y: auto;
-}
-
-.plan-type-1::after {
-	content: "";
-	position: absolute;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	width: 10rpx;
-	background-image: radial-gradient(at right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 70%);
-	border-radius: 8rpx;
-}
 
-.selectedPtype {
-	min-width: 176rpx;
-	/* flex: 1; */
-	height: 162rpx;
-	flex-direction: column;
-	/* 纵向排列 */
-	justify-content: flex-end;
-	/* display: flex;
-	justify-content: space-between;
-	align-items: flex-end; */
-	background-color: #ffffff;
-	border: 4rpx solid #0074FF;
-	box-sizing: border-box;
-	border-radius: 24rpx;
-	padding: 20rpx 20rpx 32rpx;
-	margin-right: 16rpx;
-}
 
-.selectptype {
-	/* flex: 1; */
-	min-width: 176rpx;
-	height: 162rpx;
-	flex-direction: column;
-	/* 纵向排列 */
-	justify-content: flex-end;
-	/* display: flex; */
-	/* justify-content: space-between;
-	align-items: flex-end; */
-	background-color: #EEF6FF;
-	border: 4rpx solid #EEF6FF;
-	box-sizing: border-box;
-	border-radius: 24rpx;
-	padding: 20rpx 20rpx 32rpx;
-	margin-right: 16rpx;
-}
 
-.ptype-title {
-	font-weight: 500;
-	font-size: 28rpx;
-	text-align: center;
-	color: #2A3A5A;
-}
 
-.ptype-text {
-	font-family: DIN, DIN;
-	font-weight: bold;
-	font-size: 64rpx;
-	color: #2A3A5A;
-	align-items: center;
-}
 
-.ptyped-text {
-	font-family: DIN, DIN;
-	font-weight: bold;
-	font-size: 64rpx;
-	color: #F95151;
-	align-items: center;
-}
 
-.ptyped-text,
-.ptype-text {
-	justify-content: center;
-	/* 水平居中 */
-	align-items: center;
-	/* 垂直居中 */
-}
 
-/* .ptyped-text text {
-	font-size: 40rpx;
-} */
-.plan-time>view:nth-of-type(1) {
-	color: #2A3A5A;
-	font-size: 32rpx;
-	font-weight: bold;
-}
 
-.quantity-count>input {
-	width: 88rpx;
-	height: 48rpx;
-	border-radius: 24rpx;
-	background-color: #F3F8FF;
-	text-align: center;
-	color: #2A3A5A;
-}
 
-.total-time {
-	font-size: 32rpx;
-	color: #2A3A5A;
-	font-weight: 500;
-	margin-right: 24rpx;
-}
 
-.count-btn {
-	width: 48rpx;
-	height: 48rpx;
-	vertical-align: middle;
-}
 
-.fbtn {
-	color: #9FA7B7;
-	margin-right: 16rpx;
-}
 
-.sbtn {
-	/* color: #9FA7B7; */
-	margin-left: 16rpx;
-}
 
-.font_40 {
-	font-weight: 600;
-	font-size: 40rpx;
-	color: #2A3A5A;
-}
 
-.to-store {
-	padding: 10rpx 20rpx;
-	font-weight: 400;
-	font-size: 24rpx;
-	color: #2A3A5A;
-}
 
-.to-door {
-	padding: 10rpx 20rpx;
-	font-weight: 400;
-	font-size: 24rpx;
-	color: #2A3A5A;
-}
 
-.selected-tab {
-	background: #0074FF;
-	border-radius: 32rpx;
-	color: #FFFFFF;
-}
 
-.shop-view {
-	flex-wrap: wrap;
-	padding: 24rpx;
-	background: #EEF6FF;
-	border-radius: 16rpx;
-}
 
-.shop-bg {
-	background: #FFFFFF;
-	border-radius: 4rpx;
-	padding: 32rpx 24rpx;
-	width: 100%;
-}
 
-.shop-name {
-	width: 450rpx;
-	font-weight: 500;
-	font-size: 32rpx;
-	color: #2A3A5A;
-	overflow: hidden;
-	white-space: nowrap;
-	text-overflow: ellipsis;
-	margin-bottom: 20rpx;
-}
 
-.shop-address {
-	width: 450rpx;
-	font-weight: 400;
-	font-size: 24rpx;
-	color: #828DA2;
-	overflow: hidden;
-	white-space: nowrap;
-	text-overflow: ellipsis;
-}
 
-.nav-btn {
-	flex-wrap: wrap;
-	align-items: center;
-	flex-direction: column;
-}

pages/purchaseOrder/purchaseOrder.vue

@@ -1,301 +1,65 @@
 <template>
 	<view class="container-view">
-		<view class="car-info">
-			<view class="car-top flex-row flex-between">
-				<view class="top-flex">
-					<view>{{modelInfo.car_model}}</view>
-					<view>续航{{modelInfo.endurance}}｜重量{{modelInfo.weight}}</view>
-					<view class="config-list-view">
-						<view :class="service_list.length>4?'config-list-view-1 flex-row':'flex-row'">
-							<view class="service_name-tab" v-for=" (item,indexs) in service_list" :key="indexs">
-								{{item.service_name}}
-							</view>
-						</view>
-					</view>
-				</view>
-				<img style="width: 160rpx;height: 160rpx;" :src="modelInfo.model_images[0]" />
-			</view>
-			<view class="take-car-time flex-row flex-between">
-				<view class="flex-row">
-					<img style="width: 40rpx;height: 40rpx;" src="https://qiniu.bms16.com/FrUjLnCOIJiIRQvYgAsgPnlD0bvG"
-						alt="">
-					<view style="margin-left: 16rpx;">取车时间</view>
-				</view>
-				<view @tap="tapSelectTime" class="flex-row">
-					<view style="color: #0074FF;margin-right: 4rpx;" class="">{{takeCar}}</view>
-					<img style="width: 28rpx;height: 28rpx;" src="https://qiniu.bms16.com/FpbKGisSPfL9r8a7QkZCYXolhu1Y"
-						alt="">
-				</view>
-			</view>
-			<!-- <view class="car-bottom flex-row flex-between">
-				<view class="flex-row">
-					<view>{{takeCar}}</view>
-					<img src="https://qiniu.bms16.com/FoXmBbj7YGWmjyeuVEY35nzieqnx" />
-					<view>{{returnCar}}</view>
-				</view>
-				<view>共{{leaseTime+rentalUnit}}</view>
-			</view> -->
-		</view>
-		<view class="plan-info">
-			<view>选择租车方案</view>
-			<view class="plan-type">
-				<view :class="price_list.length>3 ? 'plan-type-1 flex-row' :'flex-row' ">
-					<view @tap="bindChangeStatus" :data-status="indexs" :data-unit="items.hire_duration_unit"
-						:data-price="items.hire_price"
-						:class="isSelectStatus == items.hire_duration_unit?'selectedPtype':'selectptype'"
-						:style="{ 'min-width': (tools.toFixLength(items.hire_price/100) <=3 ? '176rpx' : ((tools.toFixLength(items.hire_price/100)*25.8+130))) + 'rpx' }"
-						v-for=" (items,indexs) in price_list" :key="indexs">
-						<view class="ptype-title" v-if="items.hire_duration_unit==1">日租</view>
-						<view class="ptype-title" v-if="items.hire_duration_unit==4">时租</view>
-						<view class="ptype-title" v-if="items.hire_duration_unit==6">周租</view>
-						<view class="ptype-title" v-if="items.hire_duration_unit==2">月租</view>
-						<view class="ptype-title" v-if="items.hire_duration_unit==7">季租</view>
-						<view
-							:class="isSelectStatus == items.hire_duration_unit?'ptyped-text flex-row':'ptype-text flex-row'">
-							<text style="font-size: 40rpx;">￥</text>
-							<text> {{tools.toFix(items.hire_price/100)}}</text>
-						</view>
-					</view>
-				</view>
-			</view>
-			<view class="plan-time flex-row flex-between">
-				<view>租车时长</view>
-				<view class="quantity-count flex-row">
-					<view class="total-time flex-row">
-						共
-						<view style="font-weight: 600;margin: 0 10rpx;">{{tools.countToDay(count,isSelectStatus)}}
-						</view>
-						<text v-if="isSelectStatus==4">小时</text>
-						<text v-else>天</text>
-					</view>
-					<view @tap.stop.prevent="bindMinus"><img class="count-btn fbtn"
-							src="https://qiniu.bms16.com/Fm-SCbzVeVHgQK920bmWNvnJnL32" /></view>
-					<input @input="bindInput" v-if="showInput" @blur="bindBlur" type="number" :value="count" />
-					<view @tap.stop.prevent="bindAdd"><img class="count-btn sbtn"
-							src="https://qiniu.bms16.com/FsO-2adBjkUkmk4ENuQco-aK7IyY" /></view>
-				</view>
+		<view class="select-time-view">
+			<view class="flex-row">选择取车时间</view>
+			<view @tap="tapSelectTime" class="flex-row align-center">
+				<text class="select-time-text">12-01 10:30</text>
+				<img style="width: 28rpx;height: 28rpx;" src="https://qiniu.bms16.com/FpbKGisSPfL9r8a7QkZCYXolhu1Y" alt="">
 			</view>
 		</view>
-
-		<view class="method-info">
-			<view class="flex-row flex-between">
-				<view style="font_40">取还方式</view>
-				<!-- 	<view style="background: #EEF6FF;border-radius: 26rpx;" class="flex-row">
-						<view  @tap="clickSelectMethod" data-status="1" :class="return_type == 1?'to-store selected-tab':'to-store'">自行到店</view>
-						<view  @tap="clickSelectMethod" data-status="2" :class="return_type == 2?'to-door selected-tab':'to-door'">送车上门</view>
-					</view> 注释原因：送车上门费用未开发-->
-			</view>
-			<view class="flex-row shop-view">
-				<view style="width: 100%;margin-bottom: 24rpx;" class="flex-row flex-between">
-					<view class="flex-row">
-						<img style="width: 40rpx;height: 40rpx;"
-							:src="return_type == 1?'https://qiniu.bms16.com/FpuR_O5a3b-z_X-HXlybF0oUzcZ4':'https://qiniu.bms16.com/Fol9Qf61SZjBupc7wp6rGGf02xl3'"
-							alt="">
-						<view v-if="return_type == 1" style="margin-left: 16rpx;">自行去门店取还</view>
-						<view v-if="return_type == 2" style="margin-left: 16rpx;">商家送车上门</view>
-					</view>
-					<view v-if="return_type == 1">门店距离您 <text style="color: #0074FF;">{{distance}}</text> </view>
-					<view v-if="return_type == 2">取车点距离您 <text style="color: #0074FF;">{{distance}}</text> </view>
-				</view>
-				<view @tap="bindToNav" class="shop-bg flex-row flex-between">
-					<view class="shop-name-view">
-						<view class="shop-name">{{shopInfo.shop_name}}</view>
-						<view class="shop-address">{{shopInfo.address}}</view>
-					</view>
-					<view class="nav-btn flex-row">
-						<img style="width: 48rpx;height: 48rpx;" src="https://zxappfile.bms16.com/zx_admin/cab_nav.png"
-							alt="">
-						<view style="margin-top: 12rpx;font-size: 24rpx;">导航</view>
-					</view>
-				</view>
-				<!-- <view class="home-second flex-row flex-between">
-					<view>送车距离:</view>
-					<view>{{distance}}</view>
-				</view> -->
-			</view>
-
-
-			<!-- <view v-if="returnType.length == 2" class="flex-row flex-around">
-				<view @tap="clickSelectMethod" data-status="1" :class="return_type == 1?'selected-item':'select-item'">
-					自行取还
-					<view :class="return_type == 1?'selected-border':'select-border'"></view>
-				</view>
-				<view @tap="clickSelectMethod" data-status="2" :class="return_type == 2?'selected-item':'select-item'">
-					送车上门
-					<view :class="return_type == 2?'selected-border':'select-border'"></view>
-				</view>
-			</view>
-			<view v-else class="flex-row flex-around">
-				<view @tap="clickNotShow" data-status="1" :class="return_type == 1?'selected-item':'select-item'">
-					自行取还
-					<view :class="return_type == 1?'selected-border':'select-border'"></view>
-				</view>
-				<view @tap="clickNotShow" data-status="2" :class="return_type == 2?'selected-item':'select-item'">
-					送车上门
-					<view :class="return_type == 2?'selected-border':'select-border'"></view>
-				</view>
-			</view>
-			<view v-if="return_type == 1" class="method-bottom flex-row">
-				<img src="https://qiniu.bms16.com/FicUzQgPOVgDC9Mu4QCAA2c-VGBb" />
-
-				<view style="width: 75%;">
-					<view class="bottom-center flex-row flex-between">
-						<view class="center-text">
-							<view>{{shopInfo.shop_name}}</view>
-							<view>{{shopInfo.address}}</view>
-						</view>
-						<view @tap="bindToNav" class="bottom-bottom flex-row flex-column" style="align-items: center;">
-							<img src="https://qiniu.bms16.com/FqCVS_ihJb8IuxeJNGaqC6NKhYMY" />
-							<view>{{distance}}</view>
-						</view>
-					</view>
-					<view class="ctime flex-row" style="align-items: center;">
-						<img src="https://qiniu.bms16.com/FlGVpR2fdrD1GfeHfDgt-dUMgkOq" />
-						{{shopInfo.work_begin_time +'-'+ shopInfo.work_end_time}}
+		<view class="car-info-view">
+			<view class="flex-row align-center">
+				<img style="width: 160rpx;height: 160rpx;border-radius: 16rpx;" src="https://qiniu.bms16.com/FrwDlFZdSMiBgqnqDjB19PiDUmuu" alt="">
+				<view class="flex-row car-info-grow">
+					<view class="flex-row align-center">
+						<view class="car-name">智能电动摩托车智驾</view>
+						<img style="width: 28rpx;height: 28rpx;" src="https://qiniu.bms16.com/FpbKGisSPfL9r8a7QkZCYXolhu1Y" alt="">
 					</view>
+					<view class="car-information">月租 月租 共计60 天</view>
+					<allPrice :amount="65"></allPrice>
 				</view>
 			</view>
-			<view v-if="return_type == 2" class="home-delivery">
-				<view class="home-first flex-row flex-between">
-					<view class="first-text">
-						<view>{{shopInfo.shop_name}}</view>
-						<view>{{shopInfo.address}}</view>
+			<view class="config-list-view">
+				<view :class="service_list.length>4?'config-list-view-1 flex-row':'flex-row'">
+					<view class="service_name-tab" v-for=" (item,indexs) in service_list" :key="indexs">
+						{{item.service_name}}
 					</view>
-					<view @tap="bindToNav" class="bottom-bottom flex-row flex-column" style="align-items: center;">
-						<img src="https://qiniu.bms16.com/FqCVS_ihJb8IuxeJNGaqC6NKhYMY" />
-						<view>{{distance}}</view>
-					</view>
-				</view>
-				<view class="home-second flex-row flex-between">
-					<view>送车距离</view>
-					<view>{{distance}}</view>
 				</view>
 			</view>
-		 -->
 		</view>
+		
 		<view  class="deposit-info">
-			<view>车辆押金</view>
-			<!-- #ifdef MP-ALIPAY-->
-			<view v-if="freeze_is_open==1" @tap="clickSelectDeposit" data-status="1" :class="is_freeze == 1?'selected-deposit':'select-deposit'"
-				style="margin-bottom: 24rpx;">
-				<view class="deposit-item flex-row" style="align-items: center;">
-					<img class="select-img"
-						:src="is_freeze==1?'https://qiniu.bms16.com/FhWimtmWybKlYMB6mgIReVWArbfq':'https://qiniu.bms16.com/FkmDjxBNZhFGFU5inza2usdtDlX8'" />
-					<view>支付宝芝麻信用</view>
-				</view>
-				<view :class="is_freeze == 1?'blue-text':'black-text'" style="font-size: 32rpx;">免押</view>
-			</view>
-			<!-- #endif  -->
-			<view @tap="clickSelectDeposit" data-status="0" :class="is_freeze == 0?'selected-deposit':'select-deposit'">
-				<view class="deposit-item flex-row">
-					<img class="select-img"
-						:src="is_freeze==0?'https://qiniu.bms16.com/FhWimtmWybKlYMB6mgIReVWArbfq':'https://qiniu.bms16.com/FkmDjxBNZhFGFU5inza2usdtDlX8'" />
-					<!-- <view>押金租借<text>｜还车后退还</text></view> -->
-					<view>押金租借</view>
-				</view>
-				<view :class="is_freeze == 0?'blue-text':'black-text'" style="font-size: 36rpx;">
-					¥{{modelInfo.deposit / 100}}</view>
+			<view class="deposit-info-title flex-row flex-between">
+				<text>车辆押金</text>
+				<text>$100</text>
 			</view>
+			<view class="deposit-info-text">需要支付100元押金，诺无车损、违章及逾期，还车后可退</view>
 		</view>
-		<!-- 		<view class="change-info">
-			<view class="change-title flex-row flex-between">
-				<view>关于车辆换电</view>
-			</view>
-			<view class="change-border">
-				<view class="flex-row flex-between" style="margin-bottom: 20rpx;">
-					<view class="change-top flex-row ">
-						<img src="https://qiniu.bms16.com/FjJ70vT8ydLEGfeABSFYWFe-zosV" />
-						<text style="margin-right: 16rpx;">免费换电次数</text><text class="change-num" style="margin: 0 4rpx;">2</text><text class="change-num">次/日</text>
-					</view>
-					<view class="change-bottom">共<text>4</text>次</view>
-				</view>
-				<view class="change-dec">本单可享4次免费换电数,超出后需要单独支付换电费用</view>
-			</view>
-		</view> -->
-		<view v-if="insurance_setting != null" class="ride-info">
-			<view class="guarantee-title flex-row flex-between">
-				<view>骑行保障服务</view>
-				<view @tap="clickShowInsuranceDesc">保障须知</view>
+
+		<view class="method-info">
+			<view class="flex-row flex-between" style="margin-bottom: 40rpx;">
+				<view class="font_32">前往门店取还</view>
+				<view class="font_32">门店距您 <text class="distance-num">100m</text></view>
 			</view>
-			<view class="ride-border">
-				<view class="ride-top flex-row flex-between">
-					<view class="top-left">
-						<img src="https://qiniu.bms16.com/FnFvHiZzSKIve3qMEvtTuvtwgRch" />
-						<text class="content-top">{{insurance_setting.insurance_name}}</text>
-					</view>
-					<view class="top-right">￥{{insurance_setting.price / 100}}/天</view>
-				</view>
-				<view class="dashed-border" style="margin-top: 20rpx;"></view>
-				<view v-for="(item,index) in insurance_setting.detail" :key="index">
-					<view class="ride-tab">
-						<view class="tab-item flex-row flex-between">
-							<view class="tab-title">{{item.info}}</view>
-							<view class="tab-price">{{item.money / 100}}元</view>
-						</view>
-					</view>
+			<view @tap="bindToNav" class="shop-bg flex-row flex-between">
+				<view class="shop-name-view">
+					<!-- <view class="shop-name">{{shopInfo.shop_name}}</view>
+					<view class="shop-address">{{shopInfo.address}}</view> -->
+					<view class="shop-name">这里是一个门店的名称</view>
+					<view class="shop-address">南山区西丽留仙洞留仙村路南山区西丽留仙…</view>
 				</view>
-			</view>
-		</view>
-		<view v-if="cancel_setting.length != 0" class="remove-info">
-			<view>预约取消政策</view>
-			<view class="remove-title flex-row">
-				<view>预约取消时间</view>
-				<view>扣费标准</view>
-			</view>
-			<view v-for="(item,index) in cancel_setting" :key="index" class="remove-text flex-row">
-				<view>支付超过{{item.hour}}小时</view>
-				<view v-if="item.percent != 0">扣除{{item.percent}}%租金总金额</view>
-				<view v-else>免费取消</view>
-			</view>
-		</view>
-		<!-- <view class="assort-info">
-			<view>配套服务</view>
-			<view class="assort-box flex-row">
-				<view v-for="(item,index) in service_list" :key="item.service_id" class="assort-text"
-					:class="{'even-item': index % 2 !== 0, 'odd-item': index % 2 === 0}">
-					{{item.service_name}}
+				<view class="nav-btn flex-row">
+					<img style="width: 48rpx;height: 48rpx;" src="https://zxappfile.bms16.com/zx_admin/cab_nav.png"
+						alt="">
+					<view style="margin-top: 12rpx;font-size: 24rpx;">导航</view>
 				</view>
 			</view>
-		</view> -->
-		<view class="pay-type flex-row flex-between">
-			<view class="pay-type-tital">支付方式</view>
-			<view v-if="wallet_money >= (amount * 100)" class="pay-type-item">
-				<img src="https://qiniu.bms16.com/Fu_XFiEYY1jhmBVtNVF7fVEiqai0" style="width: 40rpx;height: 40rpx;" />
-				<view style="padding-left: 10rpx;">钱包支付(¥{{tools.toFix( wallet_money / 100)}})</view>
-			</view>
-			<view v-else class="pay-type-item">
-				<!-- #ifdef MP-WEIXIN -->
-				<img src="https://qiniu.bms16.com/FnGjQsTOIaEgJsnxfCA8Z89WZdth" style="width: 40rpx;height: 40rpx;" />
-				<view style="padding-left: 10rpx;">微信支付</view>
-				<!-- #endif -->
-				<!-- #ifdef MP-ALIPAY -->
-				<img src="https://qiniu.bms16.com/Fk4YmG_RbdH0LNo1s8qHKDtpCTXl" style="width: 40rpx;height: 40rpx;" />
-				<view style="padding-left: 10rpx;">支付宝支付</view>
-				<!-- #endif -->
-			</view>
 		</view>
+
+	
+
 		<view style="height: 224rpx;"></view>
 		<view v-if="!isShowDetail" class="payment-info">
-			<!-- <view class="payment-top">
-				<img :src="isArgee?'https://qiniu.bms16.com/FhWimtmWybKlYMB6mgIReVWArbfq':'https://qiniu.bms16.com/FkmDjxBNZhFGFU5inza2usdtDlX8'" />
-				已阅读并同意
-				<text>《小众电动车租赁用户协议》</text>
-			</view> -->
-			<!-- <view class="payment-top" v-for="(item, index) in contractInfo" :key="index">
-				<view @tap="bindContractInfo" :data-contractid="item.contract_id" style="display: inline-block">
-					<img :src="
-						contract_id!=0 && isAgree
-						? 'https://qiniu.bms16.com/FhWimtmWybKlYMB6mgIReVWArbfq'
-						: 'https://qiniu.bms16.com/Fh0JH6_QbiXYmVy7FNYnDkVIGvLC'" />
-				</view>
-				<view @tap="bindContractInfo" :data-contractid="item.contract_id"
-					style="display: inline-block; margin-left: 10rpx">已阅读并同意</view>
-				<view @tap="bindContractTo" style="display: inline-block; color: #0074FF"
-					:data-contractid="item.contract_id">
-					《{{ item.main_title }}》
-				</view>
-			</view> -->
-
 			<view class="payment-bottom flex-row flex-between">
 				<view class="bottom-left flex-row">
 					<allPrice :amount="amount"></allPrice>
@@ -305,7 +69,6 @@
 				<view @tap="navToPage">{{is_freeze==0?'立即支付':'支付·授权免押'}}</view>
 			</view>
 		</view>
-
 		<view v-else class="show-detail">
 			<view class="detail-info">
 				<view class="pay-money">
@@ -355,20 +118,6 @@
 					</view>
 				</view>
 				<view class="second">
-					<!-- <view class="payment-top" v-for="(item, index) in contractInfo" :key="index">
-						<view @tap="bindContractInfo" :data-contractid="item.contract_id" style="display: inline-block">
-							<img :src="
-								contract_id!=0 && isAgree
-								? 'https://qiniu.bms16.com/FhWimtmWybKlYMB6mgIReVWArbfq'
-								: 'https://qiniu.bms16.com/Fh0JH6_QbiXYmVy7FNYnDkVIGvLC'" />
-						</view>
-						<view @tap="bindContractInfo" :data-contractid="item.contract_id"
-							style="display: inline-block; margin-left: 10rpx">已阅读并同意</view>
-						<view @tap="bindContractTo" style="display: inline-block; color: #0074FF"
-							:data-contractid="item.contract_id">
-							《{{ item.main_title }}》
-						</view>
-					</view> -->
 					<view class="payment-bottom flex-row flex-between">
 						<view class="bottom-left flex-row">
 							<allPrice :amount="amount"></allPrice>
@@ -382,6 +131,32 @@
 		</view>
 		<calendar ref="calendar" :showPopup.sync="isShowCalendar" @valuesUpdated="handleValuesUpdated"
 			@close="() => isShowCalendar = false" />
+		<view v-if="isShowReturnCar" class="return-box">
+			<view class="return-item">
+				<view class="return-title flex-row flex-between">
+					<view>还车到门店</view>
+					<view @tap="isShowReturnCar = false" class="close-view"><img style="width: 24rpx;height: 24rpx;" src="https://qiniu.bms16.com/FoWVlo-Nmx6wTDpsL2Rf9_BamU7L" alt=""></view>
+				</view>
+				<view class="return-text">系统会根据您的定位判断您是否已到还车位置，如您已经到达门店，请点击「我已到店」按钮，待门店确认还车后，即可还车成功。</view>
+				<view class="return-btn flex-row">
+					<view @tap="toRurnCarPage">导航到店</view>
+					<view @tap="toNearbyStorePage">我已到店</view>
+				</view>
+			</view>
+		</view>
+		<view v-if="isShowCheckOrder" class="return-box">
+			<view class="return-item">
+				<view style="text-align: center;margin-bottom: 120rpx;">
+					<img style="width: 88rpx;height: 88rpx;" src="https://qiniu.bms16.com/Fqb-i2uJWlZOg8EvUXHr_1qhlndf" alt="">
+					<view class="check-order-text">租车订单已提交</view>
+					<view>请于 <text class="get-car-time">3.5-20:00</text>  到 <text class="get-car-name">深圳南山深大店</text>  取车</view>
+				</view>
+				<view class="return-btn flex-row">
+					<view @tap="toRurnCarPage">我知道了</view>
+					<view @tap="toNearbyStorePage">订单详情</view>
+				</view>
+			</view>
+		</view>
 	</view>
 </template>
 <script module="tools" lang="wxs" src="@/pages/common/wxs/tools.wxs"></script>
@@ -404,6 +179,8 @@
 		},
 		data() {
 			return {
+				isShowReturnCar:false,
+				isShowCheckOrder:false,
 				takeCar: '',
 				returnCar: '',
 				leaseTime: '',

pages/service/components/carRentalList/carRentalList.css

@@ -0,0 +1,159 @@
+.store-card {
+	background-color: #ffffff;
+	border-radius: 32rpx;
+	padding: 32rpx;
+}
+
+.card-top-style>view:nth-of-type(1) {
+	color: #2A3A5A;
+	font-size: 36rpx;
+	font-weight: bold;
+	margin-bottom: 20rpx;
+}
+
+.card-top-style>view:nth-of-type(2) {
+	font-family: DIN, DIN;
+	color: #0074FF;
+	font-family: DIN, DIN;
+	font-size: 26rpx;
+	font-weight: bold;
+	text-align: center;
+	height: 36rpx;
+	line-height: 36rpx;
+	background-color: #E5F1FF;
+	border-radius: 20rpx;
+	/* padding: 5rpx 18rpx; */
+	padding-left: 18rpx;
+	padding-right: 18rpx;
+}
+.align-c {
+	display: flex;
+	align-items: center;
+	font-weight: 600;
+	font-size: 24rpx;
+	color: #060809;
+}
+
+.card-center-ren view {
+	margin-right: 12rpx;
+	font-size: 22rpx;
+	color: #2A3A5A;
+	border-radius: 8rpx;
+	padding: 12rpx 20rpx;
+	border: 2rpx solid #E7EAEE;
+	font-family: PingFangSC, PingFang SC;
+	line-height: 20rpx;
+	font-style: normal;
+	margin-bottom: 24rpx;
+}
+
+.card-center-num {
+	font-family: DIN, DIN;
+	font-weight: bold;
+	font-size: 26rpx;
+	color: #0074FF;
+	text-align: left;
+	font-style: normal;
+	margin-right: 4rpx;
+}
+.card-bottom{
+	margin-bottom: 36rpx;
+}
+.card-bottom img,
+.second-view img {
+	width: 160rpx;
+	height: 160rpx;
+	border-radius: 16rpx;
+}
+
+.bottom-item {
+	margin-left: 24rpx;
+	width: 100%;
+	text-align: left;
+}
+
+.bottom-item>view:nth-of-type(1) {
+	color: #2A3A5A;
+	font-size: 32rpx;
+	font-weight: bold;
+	margin-bottom: 16rpx;
+}
+
+.bottom-item>view:nth-of-type(2) {
+	color: #9FA7B7;
+	font-size: 24rpx;
+	margin-bottom: 30rpx;
+}
+
+.bottom-text {
+	color: #2A3A5A;
+	font-size: 28rpx;
+	display: flex;
+	align-items: baseline;
+}
+
+.bottom-text>text:nth-of-type(1) {
+	color: #F95151;
+	font-weight: bold;
+}
+
+.bottom-text>text:nth-of-type(2) {
+	color: #F95151;
+	font-size: 40rpx;
+	font-weight: bold;
+}
+
+.contents {
+	width: 100%;
+	height: 170rpx;
+	overflow: hidden;
+	margin-top: 32rpx;
+}
+
+.card-second {
+	/* height: 100rpx; */
+	/* #ifdef MP-ALIPAY */
+	width: 90% !important;
+	/* #endif */
+	/* #ifdef MP-WEIXIN */
+	width: 80% !important;
+	/* #endif */
+	padding-left: 32rpx;
+	padding-right: 32rpx;
+	border-right: 2rpx solid #EBF3FF;
+}
+
+.second-view {
+	width: 100%;
+}
+
+.form-item {
+	height: 170rpx;
+	width: 85% !important;
+	border-right: 2rpx solid #EBF3FF;
+	display: inline-flex;
+	flex-direction: column;
+	/* padding-left: 32rpx; */
+	padding-right: 32rpx;
+}
+
+.scrollview-box {
+	margin-top: 32rpx;
+	white-space: nowrap;
+	width: 100%;
+}
+
+.empty {
+	font-size: 30rpx;
+	width: 100%;
+	text-align: center;
+	margin-top: 40rpx;
+}
+.time-style-view{
+	font-weight: 400;
+	font-size: 26rpx;
+	color: #828DA2;
+	padding: 8rpx 12rpx;
+	border-radius: 8rpx;
+	border: 2rpx solid #E7EAEE;
+}

pages/service/components/carRentalList/carRentalList.vue

@@ -0,0 +1,407 @@
+<template>
+	<view>
+		<!-- <view
+        v-for="(item,i) in shopModelListView"
+        :key="i"
+        class="store-card"
+      > -->
+		<view class="store-card">
+			<view @tap="navToStore" :data-adminId="item.admin_id">
+				<view class="card-top-style flex-row flex-between">
+					<view>ashdjkahsdha</view>
+					<view>240m</view>
+				</view>
+				<view class="card-center-ren flex-row">
+					<view class="align-c">
+						<text class="card-center-num">6</text>
+						款车型
+					</view>
+				</view>
+			</view>
+			<view v-if="true">
+				<view class="card-bottom card-first flex-row">
+					<view class="second-view flex-row">
+						<view><img :src="'https://qiniu.bms16.com/FhEvnKUckAHPtWaC04mi2s53IEVj'"></view>
+						<view class="bottom-item">
+							<view>dhaksdhsha</view>
+							<view>
+								续航{{ 70 }}｜重量{{ 54 }}
+							</view>
+							<view class="flex-row flex-between">
+								<view class="bottom-text">
+									日租 <text style="margin-left: 10rpx;">￥</text><text>{{60 }}</text>
+								</view>
+								<view style="font-size: 24rpx;">数量: {{ 1 }}</view>
+							</view>
+						</view>
+					</view>
+				</view>
+				<view class="flex-row flex-between">
+					<view class="align-center flex-row time-style-view">
+						<img style="width: 40rpx;height: 40rpx;"
+							src="https://qiniu.bms16.com/Fp-G1pdXxnTV-G3qFbgS453AuqcU" alt="">
+						<text style="margin-left: 2rpx;">10:00-22:00</text>
+					</view>
+					<view class="flex-row align-center">
+						<view><img style="width: 84rpx;height: 64rpx;"
+								src="https://qiniu.bms16.com/Ft0YA1JYmq66hdoeEN-PgBHy5vLa" alt=""></view>
+						<view style="margin-left: 20rpx;"><img style="width: 112rpx;height: 64rpx;"
+								src="https://qiniu.bms16.com/Fts38M35doVjK09GfOza5qD-wwkK" alt=""></view>
+					</view>
+				</view>
+			</view>
+			<scroll-view v-if="false" :scroll-into-view="'into'+into" scroll-x="true" enable-flex class="scrollview-box"
+				scroll-with-animation @scroll="onScroll">
+				<view v-for="(items,index) in item.model_list" :key="index"
+					:style="{ marginLeft: index > 0 ? '32rpx' : '0' }" class="form-item" :data-item="items"
+					@tap="navToOrderPage">
+					<view v-if="items.price_setting.length!=0" class="second-view flex-row">
+						<view><img
+								:src="items.model_images!=''?items.model_images[0]:'https://qiniu.bms16.com/FhEvnKUckAHPtWaC04mi2s53IEVj'">
+						</view>
+						<view class="bottom-item">
+							<view>{{ items.car_model }}</view>
+							<view>
+								续航{{ tools.formatDistance(items.endurance-0) }}｜重量{{ tools.formatWeight(items.weight-0) }}
+							</view>
+							<view class="flex-row flex-between">
+								<view class="bottom-text">
+									{{ curType }} <text style="margin-left: 10rpx;">￥</text><text>{{ 60}}</text>
+								</view>
+								<view style="font-size: 24rpx;">数量: 7</view>
+							</view>
+						</view>
+					</view>
+				</view>
+			</scroll-view>
+		</view><view class="store-card">
+			<view @tap="navToStore" :data-adminId="item.admin_id">
+				<view class="card-top-style flex-row flex-between">
+					<view>ashdjkahsdha</view>
+					<view>240m</view>
+				</view>
+				<view class="card-center-ren flex-row">
+					<view class="align-c">
+						<text class="card-center-num">6</text>
+						款车型
+					</view>
+				</view>
+			</view>
+			<view v-if="true">
+				<view class="card-bottom card-first flex-row">
+					<view class="second-view flex-row">
+						<view><img :src="'https://qiniu.bms16.com/FhEvnKUckAHPtWaC04mi2s53IEVj'"></view>
+						<view class="bottom-item">
+							<view>dhaksdhsha</view>
+							<view>
+								续航{{ 70 }}｜重量{{ 54 }}
+							</view>
+							<view class="flex-row flex-between">
+								<view class="bottom-text">
+									日租 <text style="margin-left: 10rpx;">￥</text><text>{{60 }}</text>
+								</view>
+								<view style="font-size: 24rpx;">数量: {{ 1 }}</view>
+							</view>
+						</view>
+					</view>
+				</view>
+				<view class="flex-row flex-between">
+					<view class="align-center flex-row time-style-view">
+						<img style="width: 40rpx;height: 40rpx;"
+							src="https://qiniu.bms16.com/Fp-G1pdXxnTV-G3qFbgS453AuqcU" alt="">
+						<text style="margin-left: 2rpx;">10:00-22:00</text>
+					</view>
+					<view class="flex-row align-center">
+						<view><img style="width: 84rpx;height: 64rpx;"
+								src="https://qiniu.bms16.com/Ft0YA1JYmq66hdoeEN-PgBHy5vLa" alt=""></view>
+						<view style="margin-left: 20rpx;"><img style="width: 112rpx;height: 64rpx;"
+								src="https://qiniu.bms16.com/Fts38M35doVjK09GfOza5qD-wwkK" alt=""></view>
+					</view>
+				</view>
+			</view>
+			<scroll-view v-if="false" :scroll-into-view="'into'+into" scroll-x="true" enable-flex class="scrollview-box"
+				scroll-with-animation @scroll="onScroll">
+				<view v-for="(items,index) in item.model_list" :key="index"
+					:style="{ marginLeft: index > 0 ? '32rpx' : '0' }" class="form-item" :data-item="items"
+					@tap="navToOrderPage">
+					<view v-if="items.price_setting.length!=0" class="second-view flex-row">
+						<view><img
+								:src="items.model_images!=''?items.model_images[0]:'https://qiniu.bms16.com/FhEvnKUckAHPtWaC04mi2s53IEVj'">
+						</view>
+						<view class="bottom-item">
+							<view>{{ items.car_model }}</view>
+							<view>
+								续航{{ tools.formatDistance(items.endurance-0) }}｜重量{{ tools.formatWeight(items.weight-0) }}
+							</view>
+							<view class="flex-row flex-between">
+								<view class="bottom-text">
+									{{ curType }} <text style="margin-left: 10rpx;">￥</text><text>{{ 60}}</text>
+								</view>
+								<view style="font-size: 24rpx;">数量: 7</view>
+							</view>
+						</view>
+					</view>
+				</view>
+			</scroll-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>
+	// let config = require('../../../common/config.js');
+	// let common = require('../../../common/common.js');
+	// let http = require('../../../common/http.js');
+	// let storage = require('../../../common/storage.js');
+	import {
+		LEASE_TYPE_ARR
+	} from '@/common/constant.js'
+	import {
+		loginToast
+	} from '@/utils'
+	export default {
+		props: {
+			params: {
+				type: Object
+			}
+		},
+		data() {
+			return {
+				isDropDown: false,
+				isDropMoney: false,
+				citycode: '', //城市代码
+				desc_adress: '', // 我的位置
+				takeCar: '', // 取车时间
+				returnCar: '', // 还车时间
+				leaseTime: '', // 租借时长
+				rentalUnit: '', // 租借时长单位
+				longitude: '', // 经度
+				latitude: '', // 纬度
+				duration_unit: 0, //周期单位
+				desc_city: '', //选中城市
+				startDate: '',
+				currentCity: true, //是否为当前城市
+				page: 1,
+				limit: 20,
+				hire_return_type: 0, // 还车方式
+				open_freeze: 0, //是否免押
+				shopModelList: [],
+				icBatteryIndex: 0,
+				into: 0,
+				// all_num: 0,
+				// distance: '',
+				isShowStore: false,
+				model_list: [],
+				shopModelListView: []
+			};
+		},
+		computed: {
+			curType() {
+				const obj = LEASE_TYPE_ARR.find(v => v.value == this.duration_unit)
+				return obj && obj.label
+			}
+		},
+		watch: {
+			params: {
+				handler(val, oldVal) {
+					if (!val.desc_adress) return
+					this.$_getData(val, oldVal)
+				}
+			}
+		},
+		methods: {
+			async navToOrderPage(e) {
+				const isLogin = await loginToast()
+				if (!isLogin) return
+				const item = e.currentTarget.dataset.item
+				const url = '/pages/purchaseOrder/purchaseOrder' +
+					'?modelId=' + item.model_id +
+					'&takeCar=' + this.takeCar +
+					'&returnCar=' + this.returnCar +
+					'&leaseTime=' + this.leaseTime +
+					'&rentalUnit=' + this.rentalUnit +
+					'&longitude=' + this.longitude +
+					'&latitude=' + this.latitude +
+					'&desc_city=' + this.desc_city +
+					'&startDate=' + this.startDate +
+					'&duration_unit=' + this.duration_unit
+				uni.navigateTo({
+					url
+				})
+			},
+			$_getData(val, oldVal = {}) {
+				const oldValObj = oldVal || {}
+				this.setData({
+					rentalUnit: val.rentalUnit || '',
+					desc_adress: val.desc_adress || '',
+					takeCar: val.takeCar || '',
+					leaseTime: val.leaseTime || ''
+				})
+				this.returnCar = val.returnCar || ''
+				this.duration_unit = val.duration_unit || ''
+				this.longitude = val.longitude || ''
+				this.latitude = val.latitude || ''
+				this.desc_city = val.desc_city || ''
+				this.startDate = val.startDate || ''
+				// 位置是否改变
+				const isChangeLocation = (val.latitude !== oldValObj.latitude) || (val.longitude !== oldValObj.longitude)
+				if (!this.shopModelList.length || isChangeLocation) {
+					this.loadShopModelList()
+				} else {
+					this.loadFilteredList()
+				}
+			},
+			loadShopModelList() {
+				let me = this
+				http.postApi(config.API_DAYHIRE_USER_SHOP_MODEL_LIST, {
+					page: me.page,
+					limit: me.limit,
+					hire_return_type: me.hire_return_type,
+					open_freeze: me.open_freeze,
+					longitude: me.longitude,
+					latitude: me.latitude
+				}, (resp) => {
+					if (resp.data.code === 200) {
+						me.shopModelList = resp.data.data.list
+						me.loadFilteredList()
+					} else {
+						common.simpleToast(resp.data.msg)
+					}
+				})
+			},
+
+			//加上距离数量门店数据
+			recombineShopModelList(shopModelList) {
+				let me = this
+
+				shopModelList = shopModelList.map((item, index) => {
+					if (item.model_list && Array.isArray(item.model_list)) {
+						let all_num = 0
+						let distance = ''
+						for (let i = 0; item.model_list.length > i; i++) {
+							let model_item = item.model_list[i]
+							all_num += item.model_list[i].car_num - 0
+							distance = common.formatDistance(item.distance)
+						}
+						item.all_num = all_num
+						item.distance = distance
+						item.model_list.map(items => {
+							items.model_images = (typeof items.model_images == "string") ? items
+								.model_images.split(',') : items.model_images
+							items.total_price = (me.leaseTime * (items.price_setting[0].hire_price - 0)) /
+								100
+						})
+					}
+					return item;
+				});
+				return shopModelList
+			},
+
+			//判断当前是否有租赁周期类型
+			loadFilteredList() {
+				let shopModelList = []
+				const list = this.$u.deepClone(this.shopModelList)
+				for (let i = 0; list.length > i; i++) {
+					let searchIndex = false
+					let item = list[i]
+					if (!(item.model_list && Array.isArray(item.model_list))) return
+
+					item.model_list = item.model_list.filter(items => items.car_num !== 0);
+					let model_list = []
+					for (let j = 0; item.model_list.length > j; j++) {
+						let price_setting_list = item.model_list[j].price_setting
+						price_setting_list = price_setting_list.filter(items => this.duration_unit == items
+							.hire_duration_unit);
+						if (!common.isObjectEmpty(price_setting_list)) {
+							searchIndex = true
+							item.model_list[j].price_setting = price_setting_list
+							model_list.push(item.model_list[j])
+						}
+					}
+					if (searchIndex) {
+						item.model_list = model_list
+						shopModelList.push(item)
+					}
+				}
+				shopModelList = this.recombineShopModelList(shopModelList)
+				this.setData({
+					shopModelListView: shopModelList
+				})
+			},
+
+			navToPage(e) {
+				let url = e.currentTarget.dataset.url;
+				if (!url) {
+					return;
+				}
+				uni.navigateTo({
+					url: url
+				});
+			},
+
+			async navToStore(e) {
+				const isLogin = await loginToast()
+				if (!isLogin) return
+				//#ifdef MP-ALIPAY
+				let adminId = e.currentTarget.dataset.adminId
+				//#endif
+				//#ifdef MP-WEIXIN
+				let adminId = e.currentTarget.dataset.adminid
+				//#endif
+
+				// 门店id+是否免押+我的位置+取车时间+换车时间+租借时长+租借时长单位+经度+纬度+选中城市+开始时间
+				let skipUrl = '/pages/storeDetails/storeDetails?shop_id=' + adminId + '&open_freeze=' + this
+					.open_freeze +
+					'&desc_adress=' + this.desc_adress + '&takeCar=' + this.takeCar + '&returnCar=' + this.returnCar +
+					'&leaseTime=' + this.leaseTime + '&rentalUnit=' + this.rentalUnit +
+					'&longitude=' + this.longitude + '&latitude=' + this.latitude + '&desc_city=' + this.desc_city +
+					'&startDate=' + this.startDate + '&duration_unit=' + this.duration_unit
+				uni.navigateTo({
+					url: skipUrl,
+					success: function(res) {},
+					fail: function(res) {},
+					complete: function(res) {},
+				})
+			},
+
+			bindDropDown() {
+				this.isDropDown = !this.isDropDown
+				this.isDropMoney = false
+			},
+
+			bindDropMoney() {
+				this.isDropMoney = !this.isDropMoney
+				this.isDropDown = false
+			},
+
+			bindWaySelect(e) {
+				let hire_return_type = e.target.dataset.status;
+				this.setData({
+					hire_return_type: hire_return_type
+				})
+				this.loadShopModelList()
+				this.isDropDown = false
+			},
+
+			bindMoneySelect(e) {
+				this.open_freeze = e.target.dataset.status;
+				this.loadShopModelList()
+				this.isDropMoney = false
+			},
+
+			onScroll(e) {
+				let scrollX = e.detail.scrollLeft
+				// if (scrollX % 356 > 178) {
+				this.setData({
+					into: Math.round(scrollX / 356)
+				})
+				// }
+			},
+		}
+	};
+</script>
+
+<style scoped>
+	@import url("./carRentalList.css");
+</style>

pages/service/components/leaseType/leaseType.vue

@@ -0,0 +1,122 @@
+<template>
+    <view class="container-view-contril">
+		<u-popup v-model="showLeaseType" :closeable="false" mode="bottom" border-radius="32">
+		    <view class="bottom-popup">
+		        <view class="title">用车方案</view>
+		        <view class="item-wrap">
+		            <view 
+		                v-for="(item, index) in LEASE_TYPE_ARR" 
+		                :class="['item', leaseType == item.value && 'checked']"
+		                :key="index"
+		                @click="leaseType = item.value"
+		            >
+		                {{ item.label }}
+		            </view>
+		            <view class="item" style="opacity: 0;"></view>
+		        </view>
+		        <view class="options-wrap">
+		            <view class="btn cancle" @click="showLeaseType = false">取消</view>
+		            <view class="btn confirm" @click="chooseLeaseType">确定</view>
+		        </view>
+		    </view>
+		</u-popup>
+    </view>
+</template>
+
+<script>
+	import { LEASE_TYPE_ARR } from '@/common/constant.js'
+export default {
+    data() {
+        return {
+			showLeaseType: false,
+			LEASE_TYPE_ARR,
+			leaseType:4
+		};
+    },
+    /**
+     * 组件的属性列表
+     */
+    props: {
+    },
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+		chooseLeaseType() {
+		    this.showLeaseType = false
+		    // this.$refs.UpdateReservation.duration_unit = this.leaseType
+		},
+	}
+};
+</script>
+<style lang="scss" scoped>
+.bottom-popup {
+        padding: 40rpx 32rpx 32rpx 32rpx;
+        padding-bottom: env(safe-area-inset-bottom);
+        .title {
+            font-family: PingFangSC, PingFang SC;
+            font-weight: 600;
+            font-size: 40rpx;
+            color: #060809;
+            line-height: 40rpx;
+            text-align: left;
+            font-style: normal;
+            margin-bottom: 48rpx;
+        }
+        .item-wrap {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: space-between;
+            .item {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                margin-bottom: 36rpx;
+                width: 218rpx;
+                height: 80rpx;
+                background: #F3F8FF;
+                border-radius: 16rpx;
+                border: 2px solid #E7EAEE;
+                box-sizing: border-box;
+                font-family: PingFangSC, PingFang SC;
+                font-weight: 400;
+                font-size: 32rpx;
+                color: #060809;
+                text-align: center;
+                font-style: normal;
+            }
+            .checked {
+                background: #FFFFFF;
+                border-radius: 16rpx;
+                border: 4rpx solid #0A59F7;
+            }
+        }
+        .options-wrap {
+            display: flex;
+            justify-content: space-between;
+            .btn {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                width: 334rpx;
+                height: 80rpx;
+                font-family: PingFangSC, PingFang SC;
+                font-weight: 500;
+                font-size: 32rpx;
+                line-height: 32rpx;
+                text-align: center;
+                font-style: normal;
+                border-radius: 40rpx;
+                
+            }
+            .cancle {
+                background: #EBECEC;
+				color: #060809;
+            }
+            .confirm {
+                background: #060809;
+                color: #FFFFFF;
+            }
+        }
+    }
+</style>

pages/service/components/unleasedPages/unleasedPages.vue

@@ -0,0 +1,30 @@
+<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.css

@@ -0,0 +1,48 @@
+.store-cabinet-block{
+	background: #F1F3F4;
+	box-shadow: 0rpx -2rpx 0rpx 0rpx #FFFFFF;
+	padding: 16rpx 24rpx;
+	text-align: center;
+}
+.block-p{
+	width: 46rpx;
+	height: 8rpx;
+	background: #E0E5EC;
+	border-radius: 4rpx;
+}
+.align-center{
+	align-items: center;
+}
+.store-type{
+	margin-right: 20rpx;
+}
+.store-type,
+.cabinet-type{
+	width: 136rpx;
+	height: 56rpx;
+	line-height: 56rpx;
+	text-align: center;
+	border-radius: 30rpx;
+	font-weight: 600;
+	font-size: 28rpx;
+	border: 3rpx solid transparent;
+}
+.store-type-i,
+.cabinet-type-i{
+	background: #060809;
+	color: #FFF;
+}
+.store-type-s,
+.cabinet-type-s{
+	background: #F1F3F4;
+	color: #060809;
+	border: 3rpx solid #060809;
+}
+.seach-img{
+	margin-right: 32rpx;
+}
+.seach-img img,
+.screen-img img{
+	width: 48rpx;
+	height: 48rpx;
+}

pages/service/service.vue

@@ -0,0 +1,54 @@
+<template>
+	<view class="service-main">
+		<map class="my_app" id="myMap" :longitude="myLocation.longitude" :latitude="myLocation.latitude" :scale="14"
+			 show-location enable-3D show-compass enable-overlooking 
+			:enable-satellite="false"  :enable-traffic="false"
+			style="width: 100%;height:calc(50vh - 0rpx);">
+		</map>
+		<view class="store-cabinet-block">
+			<view class="block-p"></view>
+			<view class="flex-row flex-between" style="margin-bottom: 40rpx;">
+				<view class="check-type flex-row">
+					<view class="store-type store-type-s">门店</view>
+					<view class="cabinet-type cabinet-type-i">换电柜</view>
+				</view>
+				<view class="config-view flex-row">
+					<view class="seach-img"><img src="https://qiniu.bms16.com/FiWnFuZm5vWQ_Si3CEYLGJnVhSal" alt=""></view>
+					<view class="screen-img"><img src="https://qiniu.bms16.com/FpElQHM5NbxHDjz1LrwaHYN668LR" alt=""></view>
+				</view>
+			</view>
+			<CarRentalList/>
+		</view>
+		<leaseType/>
+	</view>
+</template>
+
+<script>
+	import LeaseType from './components/leaseType/leaseType'
+	import CarRentalList from './components/carRentalList/carRentalList'
+	export default {
+		data() {
+			return {
+				myLocation:{
+					latitude: 23.099994,
+					longitude: 113.324004,
+				}
+			};
+		},
+		components: {
+			LeaseType,
+			CarRentalList
+		},
+		/**
+		 * 生命周期函数--监听页面加载
+		 */
+		onLoad: function(options) {
+		},
+		methods: {
+
+		}
+	};
+</script>
+<style>
+	@import './service.css';
+</style>