增加新手指引
This commit is contained in:
parent
aeba6816c8
commit
884fdb411b
10
package-lock.json
generated
10
package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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"
|
||||
},
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user