liangxin/xdd-uniapp-new
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Task：指引功能

Browse Source
This commit is contained in:
modendeveloper
2025-01-16 00:33:42 +08:00
parent f19ac9ad42
commit c6ff84ca5d
3 changed files with 323 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/FunctionGuide.vue
+186
View File
@@ -0,0 +1,186 @@
<template>
<view v-if="show" class="guide-remark white">
<view class="box" :style="[functionGuideData.position]">
<!-- <view class="tips flex" :style="{top: functionGuideData.tipsPosition || '-110rpx'}">
{{ functionGuideData.tips }}
</view> -->
<view class="btn-group flex_center" :style="{bottom: functionGuideData.btnGroupPosition || '-150rpx'}">
<view class="btn flex_center" @click="jump">跳过</view>
<view class="btn flex_center" @click="next">{{ functionGuideData.step==maxStep ? '知道了' : '下一步' }}</view>
</view>
</view>
</view>
</template>
<script>
let timer = null
let flag = false
export default {
props: {
maxStep: {
type: Number,
default: 3
},
guideData: {
type: Object,
default: ()=> {
return {
step: 0,
tips: '', // 介绍
tipsPosition: '', // 介绍 显示位置
btnGroupPosition: '', // 按钮组显示位置
position: {}
}
}
}
},
data() {
return {
show: false,
functionGuideData: {}
}
},
watch: {
guideData: {
deep: true,
immediate: false,
handler(data) {
this.functionGuideData = data
}
}
},
methods: {
init() {
if (this.show) return
setTimeout(() => {
// const show = uni.getStorageSync('showGuide')
const show = false
if (!show) {
this.show = true
this.$parent.setFunctionGuideData({ step: 1 })
}
}, 1000)
},
jump() {
this.$parent.setFunctionGuideData({ step: 'jump' })
this.setFunctionGuideState()
// 标记状态，只有首次访问小程序时显示指引
uni.setStorageSync('showGuide', 1)
},
next() {
this.throttle(() => {
if (this.functionGuideData.step == this.maxStep) {
this.jump()
return
}
let step = this.functionGuideData.step
this.$parent.setFunctionGuideData({ step: step + 1 })
}, 800)
},
setFunctionGuideState() {
this.show = false
},
/* 节流 */
throttle(fn) {
if (!flag) {
flag = true
typeof fn === 'function' && fn()
timer = setTimeout(() => {
flag = false
}, 800)
}
}
}
}
</script>
<style lang="scss" scoped>
.plus {
width: 140rpx;
height: 2rpx;
position: relative;
.in-border {
border: 2rpx dashed #fff;
width: 110rpx;
height: 110rpx;
border-radius: 50%;
position: absolute;
left: 10rpx;
top: -55rpx;
}
.plus-icon {
background: #fff;
border-radius: 50%;
overflow: hidden;
width: 92rpx;
height: 92rpx;
}
}
.guide-remark {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 20230828;
.box {
position: absolute;
z-index: 10;
width: 686rpx;
border-radius: 24rpx;
left: 32rpx;
box-shadow: 0 0 0 100vh rgba(0, 0, 0, .6);
transition: all 0.3s ease;
.tips {
width: 100%;
background: #bee9ff;
border-radius: 24rpx;
padding: 20rpx 50rpx;
box-sizing: border-box;
position: absolute;
left: 0;
top: -110rpx;
z-index: 2;
font-size: 28rpx;
transition: top 0.3s ease;
}
.btn-group {
width: 100%;
position: absolute;
left: 50%;
transform: translateX(-50%);
font-size: 32rpx;
z-index: 2;
transition: bottom 0.3s ease;
.btn {
width: 240rpx;
height: 84rpx;
border-radius: 52rpx;
border: 2rpx solid #FFFFFF;
background: #fff;
margin: 0 30rpx;
white-space: nowrap;
}
}
}
}
.flex {
display: flex;
align-items: center;
}
.flex_center {
@extend .flex;
justify-content: center;
}
</style>
mixins/GuideMixins.js
+37
View File
@@ -0,0 +1,37 @@
export default {
data() {
return {
scrollView: '',
functionGuideData: {
step: 0,
tips: '',
tipsPosition: '',
btnGroupPosition: '',
position: {}
},
screenWidth: 0,
scrollLeft: 0,
}
},
onLoad() {
this.$refs.FunctionGuide.init()
},
methods: {
setFunctionGuideData(data) {
this.functionGuideData = {
...this.functionGuideData,
...data
}
this.showFunctionGuide()
},
getElementData(el, cb) {
const query = uni.createSelectorQuery().in(this)
query.select(el).boundingClientRect().exec((res)=> {
if(res[0]) {
cb(res[0])
}
})
},
}
}
pages/home/index.vue
+100 -21
View File
@@ -44,27 +44,30 @@
</block>
</swiper>
</view>
<view class="home-body">
<view class="home-body" id="step1">
<!-- 导航v9 -->
<view class="menus-wrap">
<view class="menus-bg" />
<view class="menus-list">
<view
v-for="(item, index) in menus"
:key="index"
class="item flex flex-col ai-center"
@click="$global.commonJump(item.uniapp_url)"
>
<image
:src="item.pic"
mode="scaleToFill"
class="img"
/>
<view class="one-t tc menu-name">
{{ item.name }}
<scroll-view scroll-x :scroll-into-view="scrollView" scroll-with-animation >
<view class="menus-list">
<view
v-for="(item, index) in menus"
:key="index"
class="item flex flex-col ai-center"
@click="$global.commonJump(item.uniapp_url)"
:id="'box-item' + (index + 2)"
>
<image
:src="item.pic"
mode="scaleToFill"
class="img"
/>
<view class="one-t tc menu-name">
{{ item.name }}
</view>
</view>
</view>
</view>
</scroll-view>
</view>
<!-- 千县名品和地标好物 -->
<view
@@ -293,8 +296,9 @@
</view>
</view>
<!-- v9 老用户弹窗 -->
<!-- :show="isOldUser && oldUserPopup.image && lotteryCanDraw" -->
<u-popup
:show="isOldUser && oldUserPopup.image && lotteryCanDraw"
mode="center"
bgColor="transparent"
>
@@ -334,6 +338,7 @@
@ok="handleOk"
paddingBottom="200rpx"
/>
<FunctionGuide :maxStep="14" :guideData="functionGuideData" ref="FunctionGuide"></FunctionGuide>
<xdd-tabbar :curr-index="0" />
</view>
</template>
@@ -347,6 +352,8 @@ import { sharpBannar } from '@/api/goods'
import { pageListenMixins } from '@/mixins/pageListenMixins'
import ProductWindow from '@/components/ProductWindow'
import goCartMixin from '@/mixins/goCartMixins'
import FunctionGuide from '@/components/FunctionGuide'
import GuideMixins from '@/mixins/GuideMixins'
import {
getCurAddress,
getLocationPromise,
@@ -358,9 +365,10 @@ export default {
components: {
XddTabbar,
XddProductItem,
ProductWindow
ProductWindow,
FunctionGuide
},
mixins: [pageListenMixins, goCartMixin],
mixins: [pageListenMixins, goCartMixin, GuideMixins],
data() {
return {
webUrl: this.$VUE_APP_RESOURCES_URL,
@@ -433,6 +441,77 @@ export default {
this.scrollTop = e.scrollTop
},
methods: {
showFunctionGuide() {
if(this._step == this.functionGuideData.step) return
this._step = this.functionGuideData.step
if(this.functionGuideData.step == 1) {
this.getElementData('#step1', res=>{
console.log(res);
this.screenWidth = res.width - 20
this.setFunctionGuideData({
tips: '介绍模块1，简述一下模块功能',
btnGroupPosition: '-120rpx',
tipsPosition: '420rpx',
position: {
top: 265 + 'px',
left: res.left + 10 + 'px',
width: `${res.width - 20}px`,
height: `${80 + 114 + 8 + 252 + 8}px`,
}
})
})
}else {
this.getElementData(`#box-item${this.functionGuideData.step}`, res=>{
console.log(res);
this.setFunctionGuideData({
tips: '介绍模块2，简述一下模块功能',
btnGroupPosition: '',
tipsPosition: '',
position: {
top: res.top + 'px',
left: res.left + 'px',
width: `${res.width}px`,
height: `${res.height}px`,
}
})
this.$nextTick(()=> {
this.scrollView = `box-item${this.functionGuideData.step}`
})
})
}
// if(this.functionGuideData.step == 2) {
// this.getElementData('#box-item0', res=>{
// this.setFunctionGuideData({
// tips: '介绍模块2，简述一下模块功能',
// btnGroupPosition: '',
// tipsPosition: '',
// position: {
// top: res.top + 'px',
// left: res.left - 10 + 'px',
// width: `${res.height}px`,
// height: `${res.height}px`
// }
// })
// })
// }else if(this.functionGuideData.step == 3) {
// this.getElementData('#box-item1', res=>{
// this.setFunctionGuideData({
// tips: '介绍模块6，模块处于底部，需滚动页面',
// tipsPosition: '',
// position: {
// top: res.top + 'px',
// left: res.left - 10 + 'px',
// width: `${res.height}px`,
// height: `${res.height}px`
// }
// })
// })
// }else if(this.functionGuideData.step == 'jump') {
// this.intoView = 'top'
// }
},
played() {
this.isPlay = !this.isPlay
if(this.isPlay) {
@@ -771,15 +850,15 @@ export default {
display: flex;
flex-shrink: 0;
padding: 12rpx 24rpx;
margin: -120rpx 0 0 0;
border-radius: 16rpx;
background-color: #fff;
overflow-x: auto;
.item + .item {
margin: 0 0 0 36rpx;
// margin: 0 0 0 36rpx;
}
.item {
width: 150rpx;
padding: 10rpx 20rpx;
.img {
width: 86rpx;
height: 86rpx;