郭宇琦 před 1 týdnem
rodič
revize
e209ecd840

+ 152 - 0
components/navBar/navigation.vue

@@ -0,0 +1,152 @@
+<template>
+		<view class="top-view flex-row"
+			:style="{'padding-top':`${statusBarHeight1}px`,background:`rgba(255,255,255,${opacity})`}">
+			<view class="navHei" :style="{'height':`calc(${navabarHeight}rpx)`,'width':'100%',}">
+				<view v-if="isback" class="left" @tap="bindReturnView">
+					<view class="pos">
+						<view   class="car-detail-style">
+							<image  class="return-view"
+								src="https://qiniu.bms16.com/FnHXbzly7aXi8zLghrTU5BZdwH5_" mode="aspectFill"></image>
+						</view>
+						<view :style="{opacity:1 - opacity,background:`rgba(0,0,0,0.4)`}" class="car-detail-style">
+							<image  class="return-view"
+								src="https://qiniu.bms16.com/Fjpnr3cH9ZqTQrGlw3Ywp3qbJGIG" mode="aspectFill"></image>
+						</view>
+					</view>
+				</view>
+				<text class="top-text">{{name}}</text>
+			</view>
+		</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			isback:{
+				type: Boolean,
+				default: true
+			},
+			name: {
+				type: String,
+				default: ''
+			},
+			scroll: {
+				default: 0,
+				type: Number
+			}
+		},
+		watch: {
+			scroll(n) {
+				this.opacity = n / 160
+			}
+		},
+		data() {
+			return {
+				opacity: 0,
+				statusBarHeight1: 0,
+				navabarHeight: 0,
+			}
+		},
+		mounted() {
+			this._getCustomBar()
+			this.opacity = this.scroll
+		},
+		methods: {
+			_getCustomBar() {
+				const sysinfo = uni.getSystemInfoSync()
+				// let GAP = 8
+				// // #ifdef MP-ALIPAY
+				// GAP = 0
+				// // #endif
+				// // #ifdef APP-PLUS
+
+				// // #endif
+				// // #ifdef MP-WEIXIN
+				// const clientRect = uni.getMenuButtonBoundingClientRect()
+				// const navabarHeight = (clientRect.bottom - sysinfo.statusBarHeight) + (clientRect.top - sysinfo.statusBarHeight) + GAP
+				// this.navabarHeight = navabarHeight
+				// // #endif
+
+				this.statusBarHeight1 = sysinfo.statusBarHeight
+				this.navabarHeight = 100
+			},
+
+			bindReturnView() {
+				uni.navigateBack({
+					delta: 1,
+				}) // 返回上一页
+			},
+		}
+	}
+</script>
+
+<style scoped>
+	.navHei {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		position: relative;
+	}
+
+	.left {
+		width: 40rpx;
+		height: 40rpx;
+		position: absolute;
+		left: 0;
+	}
+
+	.top-view {
+		width: 100%;
+		position: fixed;
+		z-index: 99999;
+		left: 0;
+		top: 0;
+		align-items: center;
+		padding: 0 26rpx;
+		text-align: center;
+
+	}
+
+	.navHei {
+		position: relative;
+		width: 56rpx;
+		height: 56rpx;
+	}
+
+	.return-view {
+		width: 40rpx;
+		height: 40rpx;
+		
+		/* margin-top: 24rpx; */
+		/* 		margin-left: 32rpx; */
+	}
+
+	.top-text {
+		color: #060809;
+		font-size: 36rpx;
+		font-weight: 600;
+		line-height: 36rpx;
+		text-align: center;
+		font-style: normal;
+		font-family: PingFangSC, PingFang SC;
+	}
+
+	.view-height {
+		/* border-bottom:2rpx solid #060809 ; */
+		/* margin-bottom: 32rpx; */
+	}
+
+	.car-detail-style {
+		width: 56rpx;
+		height: 56rpx;
+		
+		border-radius: 16rpx 0rpx 16rpx 0rpx;
+		padding-left: 6rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		position: absolute;
+		left: 0;
+		top: 0;
+	}
+</style>

+ 3 - 0
main.js

@@ -15,6 +15,9 @@ Vue.use(uView)
 import gyq_utils from '@/utils/gyq_utils'
 Vue.use(gyq_utils)
 
+import Navigation from '@/components/navBar/navigation.vue'
+Vue.component('Navigation', Navigation);
+
 uni.addInterceptor('request', {
 	fail: (err) => {
 		uni.hideLoading()

+ 1 - 0
mixin/index.js

@@ -9,6 +9,7 @@ import i18n from '@/locale/index.js'
 export default {
   data() {
     return {
+		scrollTop: 0,
       carOnline: false, 
 	  statusBarHeight:0,
 	  popText:'',

+ 7 - 2
pages/batteryPackage/batteryPackage.vue

@@ -1,6 +1,7 @@
 <template>
 	<view class="battery-package-main">
-		<navBar bgColor="transparent" name="换电套餐" />
+		<navBar bgColor="#fff" name="换电套餐" />
+		
 		<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>
@@ -46,7 +47,7 @@
 		<view style="height: 200rpx;">
 			
 		</view>
-		<view @click="isShowToBuy = true"  class="pay-btn">立即购买</view>
+		<view v-if="form.package_code" @click="isShowToBuy = true"  class="pay-btn">立即购买</view>
 		<payTypeModel @closeShow='isShowToBuy = false' :free_price='form.price' :isShowToBuy='isShowToBuy' @payToOrder='submit'></payTypeModel>
 	</view>
 </template>
@@ -120,6 +121,10 @@ import { fenToYuan, msg } from '../../utils/util.js';
 						item.viewShowMoney = (item.show_money / 100).toFixed(2)
 						item.viewMoney = (item.money / 100).toFixed(2)
 					})
+					if(data.data.list.length > 0){
+						this.form.package_code = data.data.list[0].package_code
+						this.form.price = data.data.list[0].money
+					}
 					this.list = data.data.list
 					
 				}

+ 5 - 1
pages/cabinetDetail/cabinetDetail.vue

@@ -1,5 +1,6 @@
 <template>
-	<view v-if="cabinetInfo.dev_id" class="main-view">
+	<view  class="main-view">
+		<Navigation :scroll='scrollTop'></Navigation>
 			<view class="content">
 				<swiper v-if="shop_image.length!=0" class="swiper" :indicator-dots="true" :autoplay="true" :interval="2000"
 					indicator-color="rgba(0, 0, 0, 0.3)" indicator-active-color="#000000" :duration="1000" circular>
@@ -161,6 +162,9 @@ import progressView from '@/component/progressView/progressView';
 			progressView,
 			scanBtn
 		},
+		onPageScroll(e) {
+			this.scrollTop = e.scrollTop
+		},
 		data() {
 			return {
 				dev_id: '',

+ 4 - 5
pages/carDetail/carDetail.vue

@@ -1,11 +1,7 @@
 <template>
 	<view>
 	<view class="car-detail-main">
-		<navBar type="carDetail"/>
-		<!-- <view v-if="car_detail.image" class="flex-row">
-			<img style="width: 600rpx;height: 406rpx; margin: auto; margin-bottom: 20rpx;" :src="car_detail.image"
-				alt="">
-		</view> -->
+		<Navigation :scroll='scrollTop'></Navigation>
 		<view class="store-img-view">
 			<swiper v-if="car_detail.model_images && car_detail.model_images.length!=0" class="swiper" :indicator-dots="true" :autoplay="true" :interval="2000"
 				indicator-color="rgba(0, 0, 0, 0.3)" indicator-active-color="#000000" :duration="1000" circular>
@@ -137,6 +133,9 @@
 			// this.loadCarInfo()
 			// getFlatternDistance 获取直线距离
 		},
+		onPageScroll(e) {
+			this.scrollTop = e.scrollTop
+		},
 		methods: {
 			locationFn() {
 				this.loadCarInfo(this.myLocation.longitude, this.myLocation.latitude)

+ 1 - 1
pages/orderStatus/orderStatus.vue

@@ -103,7 +103,7 @@
 					</view>
 					<view v-if="orderInfo.order_type != 3" class="sn-content flex-row flex-between">
 						<view class="sn-title">租车押金</view>
-						<view class="sn-text"><text class="grey-text">订单结束后随时退</text> $
+						<view class="sn-text"><text class="grey-text"></text> $
 							{{tools.toFix(orderInfo.deposit/1000)}}
 						</view>
 					</view>

+ 0 - 10
pages/package/package.css

@@ -8,11 +8,6 @@
 	background-size: cover;
 }
 
-.return-view {
-	width: 40rpx;
-	height: 40rpx;
-	margin-left: 32rpx;
-}
 
 .top-text {
 	margin-left: 230rpx;
@@ -104,11 +99,6 @@
 	margin-bottom: 20rpx;
 }
 
-.top-view {
-	margin-bottom: 32rpx;
-	padding-bottom: 28rpx;
-	border-bottom: 2rpx solid #F4F5F6;
-}
 
 .top-title {
 	color: #060809;

+ 48 - 48
pages/package/package.vue

@@ -1,12 +1,8 @@
 <template>
 	<view class="container-view">
-		<view class="top-bg" >
-			<navBar name="我的套餐" bgColor="transparent"></navBar>
-			<!-- <view class="flex-row" :style="'height:'+navabarHeight+'px;'">
-				<view class="flex-row" @tap="bindReturnView"><img class="return-view" src="https://qiniu.bms16.com/FnHXbzly7aXi8zLghrTU5BZdwH5_" /></view>
-				<text class="top-text">我的套餐</text>
-			</view> -->
-			
+		<view class="top-bg">
+			<Navigation :scroll='scrollTop'></Navigation>
+			<view :style="{height: `calc(${statusBarHeight}px + 100px)`}"></view>
 			<view class="package-card flex-row flex-between">
 				<view class="flex-row flex-column" style="align-items: flex-start;">
 					<view class="left-first flex-row">
@@ -25,22 +21,6 @@
 			</view>
 		</view>
 		<view class="box-view">
-			<!-- <view class="package-card flex-row flex-between">
-				<view class="flex-row flex-column" style="align-items: flex-start;">
-					<view class="left-first flex-row">
-						<view>小米 Su7</view>
-						<img class="left-img" src="https://qiniu.bms16.com/Fpf25Lkkrx05pvLw08mksVQKAQWf" />
-					</view>
-					<view class="left-second flex-row">
-						<view style="margin-right: 32rpx;">适用电池:<text>48v20Ah</text></view>
-						<view>押金:<text>$5.0</text></view>
-					</view>
-					<view class="left-third">
-						<view>卡号:<text>2024110202578</text></view>
-					</view>
-				</view>
-				<img class="card-right" src="https://qiniu.bms16.com/FuOJQxzypa-NginyHGdsWlzwnB8z" />
-			</view> -->
 			<view class="package-view" v-for="item in hireOrderList">
 				<view class="top-view flex-row flex-between">
 					<view class="top-title" v-if="item.package_type == 1">
@@ -63,7 +43,8 @@
 				<view v-if="item.package_type != 2" class="package-item" style="margin-bottom: 32rpx;">
 					<view class="item-title">有效时长</view>
 					<view class="item-info">
-						{{calculateRemainingDays(item.expire_time)}}<text style="color: #9FA7B7;">/{{item.total_day}}天</text>
+						{{calculateRemainingDays(item.expire_time)}}<text
+							style="color: #9FA7B7;">/{{item.total_day}}天</text>
 					</view>
 				</view>
 				<view v-if="item.package_type == 1" class="package-item">
@@ -85,29 +66,47 @@
 	</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 module="tools" lang="sjs" src="@/pages/common/wxs/tools.sjs"></script>
 <script>
 	var config = require('../../common/config_gyq.js');
 	var common = require('../../common/common.js');
 	var http = require('../../common/request.js');
 	var storage = require('../../common/storage.js');
 	const dayjs = require('dayjs');
-	import { getRemainingTime } from '../../utils/util.js';
+	import {
+		getRemainingTime
+	} from '../../utils/util.js';
 	export default {
 		components: {
-			
+
+		},
+		onPageScroll(e) {
+			this.scrollTop = e.scrollTop
 		},
 		data() {
 			return {
-				hireOrderList:[],
+				hireOrderList: [],
 				page: 1,
 				limit: 10,
-				car_info:{},
+				car_info: {},
 				// statusBarHeight: 0,
 				// navabarHeight: 0,
-				packageList: [
-					{ctime: '2024-04-04 16:15',total_duration: 30,efficient_day: 24,change_rate: 6,total_times: 10,status:1},
-					{ctime: '2024-04-04 16:15',total_duration: 30,efficient_day: 24,change_rate: 6,total_times: 10,status:2},
+				packageList: [{
+						ctime: '2024-04-04 16:15',
+						total_duration: 30,
+						efficient_day: 24,
+						change_rate: 6,
+						total_times: 10,
+						status: 1
+					},
+					{
+						ctime: '2024-04-04 16:15',
+						total_duration: 30,
+						efficient_day: 24,
+						change_rate: 6,
+						total_times: 10,
+						status: 2
+					},
 				]
 			};
 		},
@@ -132,33 +131,33 @@
 		 * 生命周期函数--监听页面显示
 		 */
 		onShow: function() {
-			
+
 		},
 		methods: {
-			 calculateRemainingDays(expirationDate) {
-			  // 获取当前时间
-			  const now = dayjs();
-			  // 解析到期时间
-			  const endDate = dayjs(expirationDate);
-			  // 计算剩余天数
-			  const remainingDays = endDate.diff(now, 'day');
-			  return remainingDays || 0;
+			calculateRemainingDays(expirationDate) {
+				// 获取当前时间
+				const now = dayjs();
+				// 解析到期时间
+				const endDate = dayjs(expirationDate);
+				// 计算剩余天数
+				const remainingDays = endDate.diff(now, 'day');
+				return remainingDays || 0;
 			},
-			srcFn(){
+			srcFn() {
 				uni.navigateTo({
 					url: `/pages/batteryPackage/batteryPackage`
 				})
 			},
-			validDurationFn(start,end){
-				return getRemainingTime(start,end)
+			validDurationFn(start, end) {
+				return getRemainingTime(start, end)
 			},
-			async listFn(){
+			async listFn() {
 				let {
 					data
 				} = await http.postApi(config.API_FLK_EXCHANGE_PACKAGE_ORDER_LIST, {
 					page: this.page,
-					pay_status:2,
-					car_sn:this.car_info.car_sn,
+					pay_status: 2,
+					car_sn: this.car_info.car_sn,
 					limit: this.limit,
 				})
 				if (data.code == 200) {
@@ -178,7 +177,8 @@
 
 <style>
 	@import './package.css';
-	.packageBtn{
+
+	.packageBtn {
 		width: 686rpx;
 		height: 80rpx;
 		background: #060809;

+ 17 - 17
pages/storeDetails/storeDetails.vue

@@ -1,22 +1,18 @@
 <template>
 	<view class="container-view">
-		<!-- <navBar></navBar> -->
-		<!-- <view class="store-img-view" style="background-image: url('https://qiniu.bms16.com/FhG-xwyMdxPVjYNrxXnq5enGFT-2');background-repeat: no-repeat;background-size: 100% 500rpx;">
-			
-		</view> -->
+		<Navigation :scroll='scrollTop'></Navigation>
+		
 		<view class="store-img-view">
-			<view  :class="['car-detail-style']" @tap="bindReturnView">
-				<img  class="return-view" :src="'https://qiniu.bms16.com/Fjpnr3cH9ZqTQrGlw3Ywp3qbJGIG'" />
-			</view>
-			<swiper v-if="shop_image && shop_image.length!=0" class="swiper" :indicator-dots="true" :autoplay="true" :interval="2000"
-				indicator-color="rgba(0, 0, 0, 0.3)" indicator-active-color="#000000" :duration="1000" circular>
+			<swiper v-if="shop_image && shop_image.length!=0" class="swiper" :indicator-dots="true" :autoplay="true"
+				:interval="2000" indicator-color="rgba(0, 0, 0, 0.3)" indicator-active-color="#000000" :duration="1000"
+				circular>
 				<swiper-item class="swiper-item" v-for="(item,index) in shop_image" :key="index">
 					<image class="swiper-item-img" :src="item" mode="aspectFill"></image>
 				</swiper-item>
 			</swiper>
 			<image v-else class="bg-img" src="https://qiniu.bms16.com/FhRnr7rADHHsOFfpWO4duD15SgIt" mode="aspectFill">
 			</image>
-			
+
 		</view>
 
 		<view class="p-bg">
@@ -124,7 +120,9 @@
 				</view>
 			</view>
 			<view class="car-info-list-view">
-				<view v-for="(item,index) of modelListsFn()"  @click="srcFn(`/pages/carDetail/carDetail?model_id=${item.model_id}`)" :key="index" class="car-info-view align-center flex-row">
+				<view v-for="(item,index) of modelListsFn()"
+					@click="srcFn(`/pages/carDetail/carDetail?model_id=${item.model_id}`)" :key="index"
+					class="car-info-view align-center flex-row">
 					<!-- <img class="car-img" src="https://qiniu.bms16.com/FsxOysJT2V3KNYev2YWadvjyKn2j" alt=""> -->
 					<image class="car-img" :src="item.model_images[0]" mode="aspectFill"></image>
 					<view class="car-info">
@@ -135,8 +133,7 @@
 								<text style="margin-right: 8rpx;">{{typeArrFn(tagId)}}</text>
 								<priceTool :price="Number(item.money)" :font_size="40" />
 							</view>
-							<view
-								class="lease-btn">购/租</view>
+							<view class="lease-btn">购/租</view>
 						</view>
 					</view>
 				</view>
@@ -176,6 +173,9 @@
 				isWorkTimer: null
 			};
 		},
+		onPageScroll(e) {
+			this.scrollTop = e.scrollTop
+		},
 		computed: {},
 		/**
 		 * 生命周期函数--监听页面加载
@@ -263,14 +263,14 @@
 
 						let arrSet = Array.from(new Set(arr));
 						let tagListArr = []
-						arrSet.map(item=>{
-							LEASE_TYPE_ARR.map(items=>{
-								if(item == items.value){
+						arrSet.map(item => {
+							LEASE_TYPE_ARR.map(items => {
+								if (item == items.value) {
 									tagListArr.push(items)
 								}
 							})
 						})
-						tagListArr.sort((x,y)=>{
+						tagListArr.sort((x, y) => {
 							return x.sort - y.sort
 						})
 						this.tagList = tagListArr