增加新手指引

hooks/useLocation.js

@@ -28,6 +28,7 @@ export function useLocation() {
      
       // 3️⃣ 没有定位才请求
       SFUIP.getLocation().then(res => {
+        console.log(res,"SFUIP.getLocation");
         if (!res.success) {
           resolve(false);
           return;

index.html

@@ -13,8 +13,9 @@
     <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" /> -->
     <link rel="icon" href="/favicon.ico" />
 	<script src="./config.js"></script>
-	<script src="https://ucmp-static.sf-express.com/assets/sdks/microservice-1.0.4.min.js"></script>
+	<script src="https://ucmp-static.sf-express.com/assets/sdks/microservice-1.1.9.min.js"></script>
 	<script>
+			console.log(SFUIP,"SFUIP")
 			const sf = new SFUIP.SfMicroservice(window?.config?.ENV??'sit')
 			window.sf = sf
 		// function loadScript(url, retry = 3) {

main.js

@@ -2,8 +2,8 @@ import { createSSRApp } from "vue";
 import App from "./App";
 import i18n from "./locale/index";
 import * as Pinia from "pinia";
-// import VConsole from 'vconsole'
-// new VConsole()
+import VConsole from 'vconsole'
+new VConsole()
 // import '@/uni.scss'
 // 引入uvUI
 import uvUI from "@/uni_modules/uv-ui-tools";

manifest.json

@@ -75,7 +75,7 @@
     "vueVersion" : "3",
     "h5" : {
         "router" : {
-            "base" : "./"
+            "base" : "/client/"
         },
         "devServer" : {
             "port" : 8999,
@@ -100,7 +100,7 @@
             }
         },
         "uniStatistics" : {
-            "enable" : true
+            "enable" : false
         }
     },
     "locale" : "zh-Hans",

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("");
@@ -502,7 +507,7 @@ const state = ref({
   active: 0,
   id: "",
   radiovalue: 0,
-  radioMonthvalue: 24,
+  radioMonthvalue: -1,
   checkAgreementUrlTime: 0,
   agreementContent: "无",
   enAgreementContent: "无",
@@ -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();
 };
@@ -571,6 +679,8 @@ const callPhone = ()=>{
 
 
 
+
+
 const goOrder = async () => {
   if (!state.value.lockerId) {
     return uni.showToast({
@@ -988,8 +1098,6 @@ onLoad(async (params) => {
 
 
  }
-
-
   uni.$on('homeSiteId', (data) => {
     if (data.id) {
       state.value.siteId = data.id
@@ -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;

pages/site/index.vue

@@ -62,6 +62,7 @@ import { useSiteApi } from "@/Apis/site.js";
 import { useLoginApi } from "@/Apis/login.js";
 import { ClientSite } from "@/Apis/book.js";
 import uvPickerSlef from "@/components/uv-pickerself/components/uv-picker/uv-picker.vue";
+import { wgs84ToGcj02 } from '@/utils/map.js'
 // 主题色配置
 import { useMainStore } from "@/store/index.js";
 // 国际化配置
@@ -87,13 +88,16 @@ let siteData = reactive({
 	});
 
 // 点击路线跳转
-const handleNavigate = (item) => {
-    SFUIP.openLocation({
-        latitude: Number(item.latitude),
-        longitude: Number(item.longitude),
-        name: item.name,
-        address: item.address,
-    });
+const handleNavigate = async (item) => {
+  const { latitude, longitude } = wgs84ToGcj02(item.latitude, item.longitude);
+   const { success, errorMessage } = await SFUIP.openLocation({
+        latitude:"113.330713",
+        longitude:"23.113539",
+        name: "广州",
+        address: "广州天河",
+    })
+    console.log((window || global).UIP_WX);
+    console.log(success,errorMessage, "openLocationerr");
 };
 
 const toHome = (item) => {

uni_modules/uv-popup/components/uv-popup/uv-popup.vue

@@ -43,12 +43,13 @@
 						hover-class="uv-popup__content__close--hover"
 						hover-stay-time="150"
 					>
-						<uv-icon
+						<!-- <uv-icon
 							name="close"
 							color="#000000"
 							size="32rpx"
 							bold
-						></uv-icon>
+						></uv-icon> -->
+						<image class="close-icon" style="width: 30rpx;height: 30rpx;" src="/static/home/close2.svg"></image>
 					</view>
 				</view>
 			</uv-transition>