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:
linxi
2025-01-17 18:17:30 +08:00
parent 50dab652e9
commit f3be581278
4 changed files with 798 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/home/index.vue
+700 -69
View File
@@ -22,7 +22,7 @@
/>
</view>
</view>
<view class="slider-banner">
<view class="slider-banner" id="slider-banner-id">
<swiper
v-if="banner.length > 0"
indicatorDots="true"
@@ -55,7 +55,7 @@
:key="index"
class="item flex flex-col ai-center"
@click="$global.commonJump(item.uniapp_url)"
:id="'box-item' + (index + 2)"
:id="'box-item' + (index)"
>
<image
:src="item.pic"
@@ -74,7 +74,7 @@
v-if="landmarkGoodsImage.image || countyFamousImage.image"
class="land-famous-wrap"
>
<view v-if="countyFamousImage.image" class="pic-wrap">
<view v-if="countyFamousImage.image" id="qianxian" class="pic-wrap">
<image
:src="countyFamousImage.image"
mode="heightFix"
@@ -82,7 +82,7 @@
@click="landAndFamousItemClickHandle(countyFamousImage)"
/>
</view>
<view v-if="landmarkGoodsImage.image" class="pic-wrap">
<view v-if="landmarkGoodsImage.image" id="dibiao" class="pic-wrap">
<image
:src="landmarkGoodsImage.image"
mode="heightFix"
@@ -169,7 +169,7 @@
</swiper-item>
</swiper> -->
<view class="new-zone-wrap">
<view class="kd" >
<view class="kd" id="xkd">
<view class="img-wrap" style="padding-top: 10rpx; box-sizing:border-box">
<image style="width: 112rpx; height:26rpx" :src="webUrl + '/orderIcon/kd.png'" mode="heightFix|widthFix"></image>
</view>
@@ -181,7 +181,7 @@
<view class="enter-btn" >点击进入</view>
</view>
</view>
<view class="xpsx">
<view class="xpsx" id="xpsx">
<view class="img-wrap">
<image style="width: 140rpx; height:26.44rpx" :src="webUrl + '/orderIcon/xp.png'" mode="heightFix|widthFix"></image>
</view>
@@ -339,7 +339,7 @@
paddingBottom="200rpx"
/>
<FunctionGuide :maxStep="15" :guideData="functionGuideData" ref="FunctionGuide"></FunctionGuide>
<xdd-tabbar :curr-index="0" @getElementData="elementData" />
<xdd-tabbar :curr-index="0" @getElementData="elementData" @getIcon="getIcon"/>
</view>
</template>
@@ -408,7 +408,8 @@ export default {
lotteryCanDraw: false,
videoContext: null,
isPlay: true,
tabIconPostion: {}
tabIconPostion: {},
messageIcon: {}
}
},
onLoad() {
@@ -445,12 +446,15 @@ export default {
elementData(e) {
this.tabIconPostion = e
},
getIcon(e) {
this.messageIcon = e
},
onscroll(e) {
console.log(e);
this.scrollViewWidth = e.detail.scrollWidth
this.getElementData(`#box-item${this.functionGuideData.step}`, res=>{
const imgs = []
this.getElementData(`#${scrollView}`, res=>{
this.setFunctionGuideData({
tips: '介绍模块2，简述一下模块功能',
imgs: imgs,
btnGroupPosition: '20rpx',
tipsPosition: '',
position: {
@@ -466,26 +470,529 @@ export default {
if(this._step == this.functionGuideData.step) return
this._step = this.functionGuideData.step
if(this.functionGuideData.step == 1) {
const imgs = [
{
url: this.webUrl + '/引导页素材/首页引导/Group1/Group 1-1.png',
style: {
position: 'absolute',
zIndex: 99,
width: '474rpx',
top: '100rpx',
left: '-110rpx',
right: 0,
margin: 'auto',
height: '289rpx',
/* px: ; */
},
isBtn: false
},
{
url: this.webUrl + '/引导页素材/首页引导/Group1/Group 1-2.png',
style: {
position: 'absolute',
zIndex: 99,
width: '186rpx',
top: '350rpx',
left: '240rpx',
right: 0,
margin: 'auto',
height: '46rpx',
},
isBtn: 'next'
},
{
url: this.webUrl + '/引导页素材/首页引导/Group1/Group 1-3.png',
style: {
position: 'absolute',
zIndex: 99,
width: '173rpx',
top: '180rpx',
right: '100rpx',
height: '248rpx',
},
isBtn: false
},
]
this.getElementData('#step1', res=>{
this.screenWidth = res.width - 20
this.setFunctionGuideData({
tips: '介绍模块1，简述一下模块功能',
btnGroupPosition: '-120rpx',
imgs: imgs,
btnGroupPosition: {
top: 510 - 100 + 'rpx',
},
tipsPosition: '420rpx',
position: {
top: 265 + 'px',
top: 510 - 100 + 'rpx',
left: res.left + 10 + 'px',
width: `${res.width - 20}px`,
height: `${80 + 114 + 8 + 252 + 8}px`,
height: `${160 + 228 + 16 + 514 + 16}rpx`,
}
})
})
}else {
if(this.functionGuideData.step == 15) {
console.log(this.functionGuideData.step, 'quweiIcon');
const menusUrl = this.menus.map(item => item.uniapp_url)
const urls = {
2: '/pages/chose-city/chose-city?type=0',
3: '/pages/chose-city/chose-city?type=1',
4: '/pkg_product/views/healthList',
5: '/pkg_product/views/giftList',
6: '/pkg_product/views/heritage',
13: '/pkg_join/views/index',
14: '/v4/views/attract/attract'
}
if(this.functionGuideData.step == 2) {
if(menusUrl.indexOf(urls[2]) < 0) {
this.$refs.FunctionGuide.next()
return
}
if(menusUrl.indexOf(urls[2]) > -1) {
const index = menusUrl.indexOf(urls[2])
const imgs = [
{
url: this.webUrl + '/引导页素材/首页引导/Group2/Group 2-1.png',
style:{
position: 'absolute',
zIndex: 99,
width: '454rpx',
top: '140rpx',
left: '-130rpx',
right: 0,
margin: 'auto',
height: '258rpx',
},
isBtn: false
},
{
url: this.webUrl + '/引导页素材/首页引导/Group2/Group 2-2.png',
style:{
position: 'absolute',
zIndex: 99,
width: '117rpx',
top: 213*2+'rpx',
left: '-110rpx',
right: 0,
margin: 'auto',
height: '46rpx',
},
isBtn: 'jump'
},
{
url: this.webUrl + '/引导页素材/首页引导/Group2/Group 2-3.png',
style:{
position: 'absolute',
zIndex: 99,
width: '117rpx',
top: 213*2+'rpx',
left: '200rpx',
right: 0,
margin: 'auto',
height: '46rpx',
},
isBtn: 'next'
},
]
this.toEle('box-item' + index, imgs)
}
return
}
if(this.functionGuideData.step == 3) {
if(menusUrl.indexOf(urls[3]) < 0) {
this.$refs.FunctionGuide.next()
return
}
if(menusUrl.indexOf(urls[3]) > -1) {
const imgs = [
{
url: this.webUrl + '/引导页素材/首页引导/Group3/Group 3-1.png',
style:{
position: 'absolute',
zIndex: 99,
width: '620rpx',
top: '540rpx',
left: '-50rpx',
right: 0,
margin: 'auto',
height: '254rpx',
},
isBtn: false
},
{
url: this.webUrl + '/引导页素材/首页引导/Group3/Group 3-2.png',
style:{
position: 'absolute',
zIndex: 99,
width: '117rpx',
top: '530rpx',
left: '110rpx',
right: 0,
margin: 'auto',
height: '46rpx',
},
isBtn: 'jump'
},
{
url: this.webUrl + '/引导页素材/首页引导/Group3/Group 3-3.png',
style:{
position: 'absolute',
zIndex: 99,
width: '117rpx',
top: '530rpx',
left: '410rpx',
right: 0,
margin: 'auto',
height: '46rpx',
},
isBtn: 'next'
},
]
const index = menusUrl.indexOf(urls[3])
this.toEle('box-item' + index, imgs)
}
return
}
if(this.functionGuideData.step == 4) {
if(menusUrl.indexOf(urls[4]) < 0) {
this.$refs.FunctionGuide.next()
return
}
if(menusUrl.indexOf(urls[4]) > -1) {
const imgs = [
{
url: this.webUrl + '/引导页素材/首页引导/Group4/Group 4-1.png',
style:{
position: 'absolute',
zIndex: 99,
width: '578rpx',
top: '140rpx',
left: '150rpx',
right: 0,
margin: 'auto',
height: '226rpx',
},
isBtn: false
},
{
url: this.webUrl + '/引导页素材/首页引导/Group4/Group 4-2.png',
style:{
position: 'absolute',
zIndex: 99,
width: '117rpx',
top: 213*2+'rpx',
left: '340rpx',
right: 0,
margin: 'auto',
height: '46rpx',
},
isBtn: 'jump'
},
{
url: this.webUrl + '/引导页素材/首页引导/Group4/Group 4-3.png',
style:{
position: 'absolute',
zIndex: 99,
width: '117rpx',
top: 213*2+'rpx',
left: '610rpx',
right: 0,
margin: 'auto',
height: '46rpx',
},
isBtn: 'next'
},
]
const index = menusUrl.indexOf(urls[4])
this.toEle('box-item' + index, imgs)
}
return
}
if(this.functionGuideData.step == 5) {
if(menusUrl.indexOf(urls[5]) < 0) {
this.$refs.FunctionGuide.next()
return
}
if(menusUrl.indexOf(urls[5]) > -1) {
const imgs = [
{
url: this.webUrl + '/引导页素材/首页引导/Group5/Group 5-1.png',
style:{
position: 'absolute',
zIndex: 99,
width: '495rpx',
top: '540rpx',
left: '230rpx',
right: 0,
margin: 'auto',
height: '267rpx',
},
isBtn: false
},
{
url: this.webUrl + '/引导页素材/首页引导/Group5/Group 5-2.png',
style:{
position: 'absolute',
zIndex: 99,
width: '117rpx',
top: 265*2+'rpx',
left: -120*2+'rpx',
right: 0,
margin: 'auto',
height: '46rpx',
},
isBtn: 'jump'
},
{
url: this.webUrl + '/引导页素材/首页引导/Group5/Group 5-3.png',
style:{
position: 'absolute',
zIndex: 99,
width: '117rpx',
top: 265*2+'rpx',
left: 20*2+'rpx',
right: 0,
margin: 'auto',
height: '46rpx',
},
isBtn: 'next'
},
]
const index = menusUrl.indexOf(urls[5])
this.toEle('box-item' + index, imgs)
}
return
}
if(this.functionGuideData.step == 6) {
if(menusUrl.indexOf(urls[6]) < 0) {
this.$refs.FunctionGuide.next()
return
}
if(menusUrl.indexOf(urls[6]) > -1) {
const imgs = [
{
url: this.webUrl + '/引导页素材/首页引导/Group6/Group 6-1.png',
style:{
position: 'absolute',
zIndex: 99,
width: '534rpx',
top: '140rpx',
left: '230rpx',
right: 0,
margin: 'auto',
height: '280rpx',
},
isBtn: false
},
{
url: this.webUrl + '/引导页素材/首页引导/Group6/Group 6-2.png',
style:{
position: 'absolute',
zIndex: 99,
width: '117rpx',
top: 213*2+'rpx',
left: -20*2+'rpx',
right: 0,
margin: 'auto',
height: '46rpx',
},
isBtn: 'jump'
},
{
url: this.webUrl + '/引导页素材/首页引导/Group6/Group 6-3.png',
style:{
position: 'absolute',
zIndex: 99,
width: '117rpx',
top: 213*2+'rpx',
left: 140*2+'rpx',
right: 0,
margin: 'auto',
height: '46rpx',
},
isBtn: 'next'
},
]
const index = menusUrl.indexOf(urls[6])
this.toEle('box-item' + index, imgs)
}
return
}
if (this.functionGuideData.step == 7) {
const imgs = [
{
url: this.webUrl + '/引导页素材/首页引导/Group7/Group 7-1.png',
style:{
position: 'absolute',
zIndex: 99,
width: '438rpx',
top: 170*2+'rpx',
left: -164*2+'rpx',
right: 0,
margin: 'auto',
height: '336rpx',
},
isBtn: false
},
{
url: this.webUrl + '/引导页素材/首页引导/Group7/Group 7-2.png',
style:{
position: 'absolute',
zIndex: 99,
width: '129rpx',
top: 315*2+'rpx',
left: 0+'rpx',
right: 0,
margin: 'auto',
height: '46rpx',
},
isBtn: 'next'
},
]
this.toEle('qianxian', imgs)
return
}
if (this.functionGuideData.step == 8) {
const imgs = [
{
url: this.webUrl + '/引导页素材/首页引导/Group8/Group 8-1.png',
style:{
position: 'absolute',
zIndex: 99,
width: '574rpx',
top: 170*2+'rpx',
left: -164*2+'rpx',
right: 0,
margin: 'auto',
height: '238rpx',
},
isBtn: false
},
{
url: this.webUrl + '/引导页素材/首页引导/Group8/Group 8-2.png',
style:{
position: 'absolute',
zIndex: 99,
width: '118rpx',
top: 315*2+'rpx',
left: 0+'rpx',
right: 0,
margin: 'auto',
height: '46rpx',
},
isBtn: 'jump'
},
{
url: this.webUrl + '/引导页素材/首页引导/Group8/Group 8-3.png',
style:{
position: 'absolute',
zIndex: 99,
width: '118rpx',
top: 315*2+'rpx',
left: 140*2+'rpx',
right: 0,
margin: 'auto',
height: '46rpx',
},
isBtn: 'next'
}
]
this.toEle('dibiao', imgs)
return
}
if (this.functionGuideData.step == 9) {
const imgs = [
{
url: this.webUrl + '/引导页素材/首页引导/Group9/Group 9-1.png',
style:{
position: 'absolute',
zIndex: 99,
width: '574rpx',
top: 170*2+'rpx',
left: -164*2+'rpx',
right: 0,
margin: 'auto',
height: '238rpx',
},
isBtn: false
},
{
url: this.webUrl + '/引导页素材/首页引导/Group9/Group 9-2.png',
style:{
position: 'absolute',
zIndex: 99,
width: '118rpx',
top: 315*2+'rpx',
left: 0+'rpx',
right: 0,
margin: 'auto',
height: '46rpx',
},
isBtn: 'jump'
},
{
url: this.webUrl + '/引导页素材/首页引导/Group9/Group 9-3.png',
style:{
position: 'absolute',
zIndex: 99,
width: '118rpx',
top: 315*2+'rpx',
left: 140*2+'rpx',
right: 0,
margin: 'auto',
height: '46rpx',
},
isBtn: 'next'
}
]
this.toEle('xkd', imgs)
return
}
// top 140, buttom: 540
if(this.functionGuideData.step == 10) {
const imgs = [
{
url: this.webUrl + '/引导页素材/首页引导/Group10/Group 10-1.png',
style:{
position: 'absolute',
zIndex: 99,
width: '574rpx',
top: 170*2+'rpx',
left: -164*2+'rpx',
right: 0,
margin: 'auto',
height: '238rpx',
},
isBtn: false
},
{
url: this.webUrl + '/引导页素材/首页引导/Group10/Group 10-2.png',
style:{
position: 'absolute',
zIndex: 99,
width: '118rpx',
top: 315*2+'rpx',
left: 0+'rpx',
right: 0,
margin: 'auto',
height: '46rpx',
},
isBtn: 'jump'
},
{
url: this.webUrl + '/引导页素材/首页引导/Group10/Group 10-3.png',
style:{
position: 'absolute',
zIndex: 99,
width: '118rpx',
top: 315*2+'rpx',
left: 140*2+'rpx',
right: 0,
margin: 'auto',
height: '46rpx',
},
isBtn: 'next'
}
]
this.setFunctionGuideData({
tips: '介绍模块2，简述一下模块功能',
imgs: imgs,
btnGroupPosition: '',
tipsPosition: '',
position: {
@@ -497,59 +1004,182 @@ export default {
})
return
}
this.getElementData(`#box-item${this.functionGuideData.step}`, res=>{
this.totalWidth += res.width
if(res.left + res.width / 2 > this.screenWidth) {
this.$nextTick(()=> {
this.scrollView = `box-item${this.functionGuideData.step}`
})
if (this.functionGuideData.step == 11) {
const imgs = [
{
url: this.webUrl + '/引导页素材/首页引导/Group11/Group 11-1.png',
style:{
position: 'absolute',
zIndex: 99,
width: '574rpx',
top: 170*2+'rpx',
left: -164*2+'rpx',
right: 0,
margin: 'auto',
height: '238rpx',
},
isBtn: false
},
{
url: this.webUrl + '/引导页素材/首页引导/Group11/Group 11-2.png',
style:{
position: 'absolute',
zIndex: 99,
width: '118rpx',
top: 315*2+'rpx',
left: 0+'rpx',
right: 0,
margin: 'auto',
height: '46rpx',
},
isBtn: 'jump'
},
{
url: this.webUrl + '/引导页素材/首页引导/Group11/Group 11-3.png',
style:{
position: 'absolute',
zIndex: 99,
width: '118rpx',
top: 315*2+'rpx',
left: 140*2+'rpx',
right: 0,
margin: 'auto',
height: '46rpx',
},
isBtn: 'next'
}
]
this.toEle('xpsx', imgs)
return
}
if (this.functionGuideData.step == 12) {
const imgs = [
{
url: this.webUrl + '/引导页素材/首页引导/Group12/Group 12-1.png',
style:{
position: 'absolute',
zIndex: 99,
width: '574rpx',
top: 170*2+'rpx',
left: -164*2+'rpx',
right: 0,
margin: 'auto',
height: '238rpx',
},
isBtn: false
},
{
url: this.webUrl + '/引导页素材/首页引导/Group12/Group 12-2.png',
style:{
position: 'absolute',
zIndex: 99,
width: '118rpx',
top: 315*2+'rpx',
left: 0+'rpx',
right: 0,
margin: 'auto',
height: '46rpx',
},
isBtn: 'jump'
},
{
url: this.webUrl + '/引导页素材/首页引导/Group12/Group 12-3.png',
style:{
position: 'absolute',
zIndex: 99,
width: '118rpx',
top: 315*2+'rpx',
left: 140*2+'rpx',
right: 0,
margin: 'auto',
height: '46rpx',
},
isBtn: 'next'
}
]
this.toEle('xpsx', imgs)
return
}
if(this.functionGuideData.step == 13) {
if(menusUrl.indexOf(urls[13]) < 0) {
this.$refs.FunctionGuide.next()
return
}
this.setFunctionGuideData({
tips: '介绍模块2，简述一下模块功能',
btnGroupPosition: '',
tipsPosition: '',
position: {
top: res.top + 'px',
left: res.left + 'px',
width: `${res.width}px`,
height: `${res.height}px`,
}
})
})
if(menusUrl.indexOf(urls[13]) > -1) {
const imgs = [
{
url: this.webUrl + '/引导页素材/首页引导/Group13/Group 13-1.png',
style:{
position: 'absolute',
zIndex: 99,
width: '534rpx',
top: '140rpx',
left: '230rpx',
right: 0,
margin: 'auto',
height: '280rpx',
},
isBtn: false
},
{
url: this.webUrl + '/引导页素材/首页引导/Group13/Group 13-2.png',
style:{
position: 'absolute',
zIndex: 99,
width: '117rpx',
top: 213*2+'rpx',
left: -20*2+'rpx',
right: 0,
margin: 'auto',
height: '46rpx',
},
isBtn: 'jump'
},
{
url: this.webUrl + '/引导页素材/首页引导/Group13/Group 13-3.png',
style:{
position: 'absolute',
zIndex: 99,
width: '117rpx',
top: 213*2+'rpx',
left: 140*2+'rpx',
right: 0,
margin: 'auto',
height: '46rpx',
},
isBtn: 'next'
},
]
const index = menusUrl.indexOf(urls[13])
this.toEle('box-item' + index, imgs)
}
return
}
}
// 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'
// }
},
toEle(id, imgs) {
this.getElementData(`#${id}`, res=>{
if(res.left + res.width / 2 > this.screenWidth) {
this.$nextTick(()=> {
this.scrollView = id
})
return
}
this.setFunctionGuideData({
imgs: imgs,
btnGroupPosition: '',
tipsPosition: '',
position: {
top: res.top + 'px',
left: res.left + 'px',
width: `${res.width}px`,
height: `${res.height}px`,
}
})
})
},
played() {
this.isPlay = !this.isPlay
@@ -884,6 +1514,7 @@ export default {
.scroll-view{
background: #fff;
border-radius: 16rpx;
margin: -120rpx 0 0 0;
}
.menus-wrap {
position: relative;