增加新手指引

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",

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"
   },

pages/index/index.vue

@@ -87,7 +87,7 @@
               <image src="/static/home/jiantou.svg"  style="width: 24rpx;height: 24rpx;" class="icon"></image>
             </view>
           </li>
-          <li @click="showMonthPopup">
+          <li @click="showMonthPopup" class="zuqi">
             <view class="left"><text class="font32 fontb">租期</text></view>
             <view class="right font26 fontb" :class="{textGary:!state.month}"><text>{{ state.month }}个月</text>
               <image src="/static/home/jiantou.svg" style="width: 24rpx;height: 24rpx;" class="icon"></image>
@@ -116,7 +116,7 @@
           </li>
         </ul>
       </view>
-        <view class="font28 fontb" style="padding: 20rpx 0;color: #A8AAAC;">
+        <view class="kefu font28 fontb" style="padding: 20rpx 0;color: #A8AAAC;">
           租赁相关问题可联系客服咨询(电话:<text @click="openPopup" style="color: #2E5DB5;">4008181813</text>)
         </view>
         <view class="toOrderBox">
@@ -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) {
 }
 
 </script>
-
 <style scoped lang="scss">
 @import "@/static/style/theme.scss";
+
+:deep(.driverjs-theme) {
+  &.driver-popover {
+    border-radius: 8px;
+    padding: 16px;
+    min-width: 240px;
+    background: #ffffff;
+    border: 1px solid #eee;
+    box-shadow: 0 4px 16px rgba(0,0,0,.08);
+  }
+
+  .driver-popover-title {
+    font-size: 16px;
+    font-weight: 600;
+    color: #333;
+    margin-bottom: 8px;
+  }
+
+  .driver-popover-description {
+    font-size: 16px;
+    font-weight: 600;
+    color: #000;
+    line-height: 1.5;
+  }
+
+  .driver-popover-footer {
+    margin-top: 12px;
+
+    button {
+      height: 32px;
+      font-size: 14px;
+      padding: 0 14px;
+      border-radius: 4px;
+    }
+  }
+
+  .driver-popover-next-btn {
+    background: #E60012;
+    color: #fff;
+    border: none;
+  }
+
+  .driver-popover-prev-btn {
+    background: #fff;
+    color: #E60012;
+    border: 1px solid #E60012;
+  }
+
+  .driver-popover-done-btn {
+    background: #E60012;
+    color: #fff;
+  }
+
+  .driver-popover-close-btn {
+    color: #999;
+  }
+
+  .driver-popover-arrow {
+    &.driver-popover-arrow-side-top {
+      border-top-color: #fff;
+    }
+
+    &.driver-popover-arrow-side-bottom {
+      border-bottom-color: #fff;
+    }
+  }
+}
+
 .toOrderBox{
   width: 100%;
   background-color: #FFFFFF;