From 884fdb411b331ad2d4b254e38f7bb864499a7043 Mon Sep 17 00:00:00 2001
From: YOGO <1587218160@qq.com>
Date: Tue, 14 Apr 2026 17:05:57 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=96=B0=E6=89=8B=E6=8C=87?=
=?UTF-8?q?=E5=BC=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
package-lock.json | 10 ++-
package.json | 1 +
pages/index/index.vue | 185 +++++++++++++++++++++++++++++++++++++++++-
3 files changed, 191 insertions(+), 5 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 608b7b0..ed48460 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,16 +1,17 @@
{
- "name": "elitesysclient",
+ "name": "城市迷你仓",
"version": "1.0.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
- "name": "金刚迷你仓",
+ "name": "城市迷你仓",
"version": "1.0.0",
"license": "ISC",
"dependencies": {
"crypto-js": "^4.2.0",
"dayjs": "^1.11.11",
+ "driver.js": "^1.4.0",
"vconsole": "^3.15.1",
"vue3-google-map": "^0.20.0"
},
@@ -648,6 +649,11 @@
"resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.11.tgz",
"integrity": "sha512-okzr3f11N6WuqYtZSvm+F776mB41wRZMhKP+hc34YdW+KmtYYK9iqvHSwo2k9FEH3fhGXvOPV6yz2IcSrfRUDg=="
},
+ "node_modules/driver.js": {
+ "version": "1.4.0",
+ "resolved": "https://registry.npmmirror.com/driver.js/-/driver.js-1.4.0.tgz",
+ "integrity": "sha512-Gm64jm6PmcU+si21sQhBrTAM1JvUrR0QhNmjkprNLxohOBzul9+pNHXgQaT9lW84gwg9GMLB3NZGuGolsz5uew=="
+ },
"node_modules/electron-to-chromium": {
"version": "1.4.819",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.819.tgz",
diff --git a/package.json b/package.json
index 1e0d5dc..842b0ee 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
"dependencies": {
"crypto-js": "^4.2.0",
"dayjs": "^1.11.11",
+ "driver.js": "^1.4.0",
"vconsole": "^3.15.1",
"vue3-google-map": "^0.20.0"
},
diff --git a/pages/index/index.vue b/pages/index/index.vue
index be9b0a3..87e3b8e 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -87,7 +87,7 @@
-
+
租期
{{ state.month }}个月
@@ -116,7 +116,7 @@
-
+
租赁相关问题可联系客服咨询(电话:4008181813)
@@ -469,6 +469,8 @@ import { useLockApi } from '@/Apis/lock.js';
import { useOrderApi } from "@/Apis/order.js";
import { useI18n } from "vue-i18n";
import dayjs from 'dayjs';
+import { driver } from "driver.js";
+import "driver.js/dist/driver.css";
const getOrderApi = useOrderApi();
const getAuthApi = authInfoApi();
const getCouponApi = couponApi();
@@ -487,6 +489,9 @@ const unitPopupRef = ref(null);
const monthPopupRef = ref(null);
const payPopupRef = ref(null);
const calendars = ref(null);
+
+
+
// 导航栏高度
const navHeight = ref(0);
const language = ref("");
@@ -530,7 +535,110 @@ const state = ref({
tagStyle: {
p: 'margin: 0.8rem 0;',
},
+ startDriverTime: 0,
});
+
+const driverObj = driver({
+ showProgress: true,
+ doneBtnText: "完成",
+ closeBtnText: "跳过",
+ nextBtnText: "下一步",
+ prevBtnText: "上一步",
+ popoverClass: 'driverjs-theme',
+ // 关键：点击遮罩层不关闭
+ overlayClickBehavior: 'none',
+ // 结束后回到顶部
+ onDestroyStarted: () => {
+ window.scrollTo({
+ top: 0,
+ behavior: "smooth"
+ })
+ driverObj.destroy();
+ },
+
+ steps: [
+ {
+ element: '.selectSite',
+ popover: {
+ // title: '切换门店',
+ description: '可根据不同地区，切换对应门店'
+ },
+ onHighlighted: (el) => scrollToElement(el)
+ },
+ {
+ element: '.unitType',
+ popover: {
+ // title: '切换不同仓型',
+ description: '选择不同仓型,体积不同。'
+ },
+ onHighlighted: (el) => scrollToElement(el)
+ },
+ {
+ element: '.swiper .left',
+ popover: {
+ // title: '切换不同仓型',
+ description: '向左滑动。'
+ },
+ onHighlighted: (el) => scrollToElement(el)
+ },
+ {
+ element: '.swiper .right',
+ popover: {
+ // title: '切换不同仓型',
+ description: '向右滑动。'
+ },
+ onHighlighted: (el) => scrollToElement(el)
+ },
+ {
+ element: '.orderInfo',
+ popover: {
+ // title: '选择基本需求',
+ description: '选择仓型后，根据需求选择体积,租期。'
+ },
+ onHighlighted: (el) => scrollToElement(el)
+ },
+ {
+ element: '.zuqi',
+ popover: {
+ // title: '租期',
+ description: '租期越长，优惠越多。'
+ },
+ onHighlighted: (el) => scrollToElement(el)
+ },
+ {
+ element: '.kefu',
+ popover: {
+ // title: '联系客服',
+ description: '如有疑问，欢迎致电客服。'
+ },
+ onHighlighted: (el) => scrollToElement(el)
+ }
+ ]
+});
+
+// 滚动方法（单独写）
+function scrollToElement(element) {
+ if (!element) return
+
+ const top =
+ element.getBoundingClientRect().top +
+ window.pageYOffset -
+ 120; // 偏移量 可调
+
+ window.scrollTo({
+ top,
+ behavior: "smooth"
+ });
+}
+const startDriver = () => {
+ state.startDriverTime++;
+ if (state.startDriverTime > 1) {
+ return;
+ }
+ driverObj.drive();
+}
+
+
const showCalendar = () => {
calendars.value.open();
};
@@ -1008,6 +1116,9 @@ onLoad(async (params) => {
});
onUnload(() => {
uni.$off('homeSiteId');
+ if(driverObj){
+ driverObj.destroy();
+ }
})
onShow(() => {
@@ -1155,6 +1266,7 @@ const getUnitTypeBySiteId = () => {
// state.value.latitude = res.data[0]?.latitude;
// state.value.longitude = res.data[0]?.longitude;
// state.value.tags = res.data[0]?.tags ?? [];
+ startDriver();
}
}).finally(() => {
uni.hideLoading();
@@ -1184,9 +1296,76 @@ function changeMove(event) {
}
-