190 lines
3.6 KiB
Vue
190 lines
3.6 KiB
Vue
<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="next-btn v12-primary 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>
|
|
.next-btn {
|
|
color: #fff;
|
|
padding: 2rpx 10rpx;
|
|
}
|
|
.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> |