修改首页

src/pages/IMB/IMB.vue

@@ -13,7 +13,7 @@
 		</view>
 		<view class="imb-map">
 			<map name="amap" :scale="18" :longitude="carPosition.longitude" :latitude="carPosition.latitude" class="map"
-				:markers="maker" :enable-indoorMap="true"></map>
+				:markers="maker" :enable-indoorMap="true" :enable-scroll="false" :enable-rotate="false"></map>
 			<view class="menu">
 				<view class="carFind" @click="openPopup($refs.popup)">
 					<image src="../../static/imb/carFind.png" mode="aspectFit" class="image"></image>
@@ -25,16 +25,45 @@
 				</view>
 			</view>
 		</view>
-		<wwBottomDrawer :transitionTime="0.3" :proportionShow='0.5' :dragHandleHeight="20" :dragLength="50">
+		<BottomDrawer :transitionTime="0.3" :proportionShow='0.5' :dragHandleHeight="20" :dragLength="50">
 			<slot>
 				<view class="Panel">
+					<view class="Panel-menu">
+						<view class="union">
+							<text class="text">爱摩保盗抢保障中</text>
+
+							<!-- 	<image src="https://rzyx-tycm.bj.bcebos.com/moto/union.png" mode="scaleToFill"
+								class="image">
+							</image> -->
+						</view>
+						<text class="MaturityTime">2024.02.12到期</text>
+						<view class="menu-item">
+							<image src="https://rzyx-tycm.bj.bcebos.com/moto/vip1.png" mode="scaleToFill" class="image">
+							</image>
+							<text>轨迹</text>
+						</view>
+						<view class="menu-item">
+							<image src="https://rzyx-tycm.bj.bcebos.com/moto/vip2.png" mode="scaleToFill" class="image">
+							</image>
+							<text>轨迹</text>
+						</view>
+						<view class="menu-item">
+							<image src="https://rzyx-tycm.bj.bcebos.com/moto/vip3.png" mode="scaleToFill" class="image">
+							</image>
+							<text>轨迹</text>
+						</view>
+						<view class="menu-item">
+							<image src="https://rzyx-tycm.bj.bcebos.com/moto/vip4.png" mode="scaleToFill" class="image">
+							</image>
+							<text>轨迹</text>
+						</view>
+					</view>
 					<view class="Panel-feature">
 						<image src="https://rzyx-tycm.bj.bcebos.com/moto/home_pic1.png" mode="scaleToFill"
 							class="feature-1"></image>
 						<image src="https://rzyx-tycm.bj.bcebos.com/moto/home_pic2.png" mode="scaleToFill"
 							class="feature-2"></image>
 					</view>
-
 					<view>
 						<view class="main-title">
 							<view class="main-title-left">
@@ -97,7 +126,7 @@
 					</view>
 				</view>
 			</slot>
-		</wwBottomDrawer>
+		</BottomDrawer>
 		<!-- vip弹窗 -->
 		<uni-popup ref="popup">
 			<view class="vip-popup">
@@ -155,7 +184,7 @@
 <script lang="ts" setup>
 	import { getMenuButton, rpxTopx } from "@/utils/common.js"
 	import { ref } from "vue";
-	import wwBottomDrawer from "@/uni_modules/ww-bottom-drawer/components/ww-bottom-drawerapp/ww-bottom-drawerapp.vue"
+	import BottomDrawer from "./components/bottom-drawer.vue"
 	import { userData } from "./hook/userData"
 	// let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
 	const { openPopup, carPosition, maker } = userData()
@@ -169,7 +198,7 @@
 <style>
 	page {
 		height: 100%;
-		background-color: antiquewhite;
+		/* background-color: antiquewhite; */
 	}
 </style>
 <style lang="scss" scoped>
@@ -209,7 +238,7 @@
 		}
 
 		.imb-map {
-			height: 46%;
+			height: 100%;
 			// flex: 1;
 			width: 100%;
 			position: relative;
@@ -256,6 +285,60 @@
 			overflow: auto;
 			overscroll-behavior: contain;
 
+			.Panel-menu {
+				display: flex;
+				background-color: #fff;
+				margin-bottom: 20rpx;
+				border-radius: 16rpx 16rpx 16rpx 16rpx;
+				box-shadow: 0rpx 26rpx 70rpx 0rpx rgba(237, 242, 255, 0.25);
+				position: relative;
+
+				.menu-item {
+					display: flex;
+					flex-direction: column;
+					flex: 1;
+					justify-content: center;
+					align-items: center;
+					font-size: 24rpx;
+					color: #252931;
+					padding: 68rpx 18rpx 24rpx;
+					box-sizing: border-box;
+
+					.image {
+						width: 104rpx;
+						height: 104rpx;
+					}
+				}
+
+				.union {
+					position: absolute;
+					top: 0;
+					left: 0;
+					width: 258rpx;
+					height: 74rpx;
+					background-image: url(https://rzyx-tycm.bj.bcebos.com/moto/union.png);
+					background-size: 100% 100%;
+					padding: 8rpx 44rpx 30rpx 22rpx;
+					box-sizing: border-box;
+
+					.text {
+						font-size: 24rpx;
+						display: flex;
+						color: #FFD9B6;
+					}
+
+
+				}
+
+				.MaturityTime {
+					position: absolute;
+					top: 10rpx;
+					left: 260rpx;
+					font-size: 24rpx;
+					color: #252931;
+				}
+			}
+
 			.Panel-feature {
 				display: flex;
 				width: 100%;

src/pages/IMB/components/bottom-drawer.vue

@@ -0,0 +1,164 @@
+<template>
+	<view class="drawer-content" :data-top="dragTop" :style="transition + 'top:' + (dragTop + 'px')">
+		<view class="drag-handle" :style="'height:15px;'">
+			<view class="drag-handle-line"></view>
+		</view>
+		<view class="drag-content">
+			<slot>
+
+			</slot>
+		</view>
+		<view class="touch-view" @touchstart.stop="drag_start" @touchmove.stop="drag_move" @touchend.stop="drag_end"
+			@touchcancel="drag_end"></view>
+	</view>
+</template>
+
+<script lang="ts" setup>
+	import type { log } from 'console';
+	import { ref, getCurrentInstance, defineProps } from 'vue';
+	import { onLoad } from '@dcloudio/uni-app';
+
+	const props = defineProps({
+		maxTop: {
+			type: Number,
+			default: 565 // 580
+		},
+		minTop: {
+			type: Number,
+			default: 100
+		}
+	})
+
+	// @ts-ignore
+	const { proxy } = getCurrentInstance();
+
+	const transition = ref('')
+	const dragTop = ref(580)
+	const dragTopTemp = ref(0) // 开始拖动时的top
+	const startY = ref(0)
+	const dragLength = ref(0)
+	const contentHeight = ref(0)
+	const isDrawerOpen = ref(false)
+	const toTop = ref(true)
+	let timer = null;
+
+
+	const initTop = () => {
+		transition.value = ""
+		dragTop.value = props.maxTop;
+	}
+	onLoad((option : any) => {
+		initTop()
+	})
+
+	const drag_start = (event : any) => {
+		console.log(event)
+
+		// console.log("drag_start == ", event.touches[0].clientY)
+
+		// if (timer) {
+		//   clearInterval(timer);
+		// }
+		transition.value = "";
+		dragTopTemp.value = dragTop.value;
+		startY.value = event.touches[0].clientY;
+
+		return false
+	}
+
+	const drag_move = (event : any) => {
+		// console.log("drag_move == ", event.touches[0].clientY)
+		const query = uni.createSelectorQuery().in(proxy);
+		query
+			.select("#drag-content")
+			.boundingClientRect((data : any) => {
+				var len = (event.touches[0].clientY - startY.value);
+				//判断展开还是收缩
+				if (isDrawerOpen.value) { //当展开状态下
+					if (len > 0) { //向下滑动
+						toTop.value = len < dragLength.value;
+					} else {
+						toTop.value = true;
+					}
+				} else {
+					if (len < 0) { //向上滑动
+						toTop.value = Math.abs(len) > dragLength.value;
+					} else {
+						toTop.value = false;
+					}
+				}
+				let temp = dragTopTemp.value + len
+				// console.log("temp === ", temp, len)
+
+				var temp_ = temp
+				if (temp_ < props.minTop) {
+					temp_ = props.minTop
+				}
+				if (temp_ > props.maxTop) {
+					temp_ = props.maxTop
+				}
+
+				dragTop.value = temp_
+
+				// console.log('dragTop.value === ', dragTop.value)
+			})
+			.exec();
+		return false
+	}
+
+	const drag_end = (event : any) => {
+		expand_end()
+		return false;
+	}
+
+	const expand_end = () => {
+		const query = uni.createSelectorQuery().in(proxy);
+		query
+			.select("#drag-content")
+			.boundingClientRect((data) => {
+				transition.value = `transition: top 0.3s;`
+
+				console.log('transition.valu === ', transition.value)
+
+				if (toTop.value) {
+					dragTop.value = props.minTop
+				} else {
+					dragTop.value = props.maxTop
+				}
+			})
+			.exec();
+	}
+</script>
+
+<style lang="scss" scope>
+	.drawer-content {
+		// top: 680px;
+		position: relative;
+		left: 0;
+		display: flex;
+		position: fixed;
+		width: 750rpx;
+		height: calc(100vh - 100px);
+		z-index: 2;
+		// background-color: white;
+		// overflow: scroll;
+	}
+
+	.touch-view {
+		position: absolute;
+		width: 750rpx;
+		height: 45px;
+		top: -0px;
+		left: 0;
+		// background-color: red;
+		z-index: 1;
+	}
+
+	.drag-content {
+		@extend .flex-column-stretch;
+		width: 750rpx;
+		background-color: #fff;
+		padding: 22rpx 0;
+		background: #F2F2F2;
+	}
+</style>