Task：指引页
This commit is contained in:
linxi
@@ -1,14 +1,27 @@
|
||||
<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="guid-wrap">
|
||||
<image
|
||||
v-for="(img, index) in functionGuideData.imgs"
|
||||
:key="index"
|
||||
:style="[img.style]"
|
||||
:src="img.url"
|
||||
@click.stop="handleImg(img)"
|
||||
mode="aspectFit|aspectFill|widthFix"
|
||||
lazy-load="true" >
|
||||
</image>
|
||||
<view class="box" :style="[functionGuideData.position]">
|
||||
<!-- <view class="tips flex" :style="{top: functionGuideData.tipsPosition || '-110rpx'}">
|
||||
{{ functionGuideData.tips }}
|
||||
</view> -->
|
||||
|
||||
</view>
|
||||
<!-- <view class="btn-wrap flex_center" :style="[functionGuideData.btnGroupPosition]">
|
||||
<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>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -25,7 +38,7 @@
|
||||
type: Object,
|
||||
default: ()=> {
|
||||
return {
|
||||
step: 0,
|
||||
step: 2,
|
||||
tips: '', // 介绍
|
||||
tipsPosition: '', // 介绍 显示位置
|
||||
btnGroupPosition: '', // 按钮组显示位置
|
||||
@@ -50,6 +63,17 @@
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleImg(img) {
|
||||
if(!img.isBtn) return
|
||||
if(img.isBtn === 'next') {
|
||||
this.next()
|
||||
return
|
||||
}
|
||||
if(img.isBtn === 'jump') {
|
||||
this.jump()
|
||||
return
|
||||
}
|
||||
},
|
||||
init() {
|
||||
if (this.show) return
|
||||
setTimeout(() => {
|
||||
@@ -97,6 +121,15 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.btn-wrap{
|
||||
position: absolute;
|
||||
z-index: 99;
|
||||
}
|
||||
.guid-wrap{
|
||||
position: relative;
|
||||
height: inherit;
|
||||
width: inherit;
|
||||
}
|
||||
.next-btn {
|
||||
color: #fff;
|
||||
padding: 2rpx 10rpx;
|
||||
@@ -162,9 +195,9 @@
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-size: 32rpx;
|
||||
z-index: 2;
|
||||
z-index: 2;
|
||||
transition: bottom 0.3s ease;
|
||||
|
||||
|
||||
.btn {
|
||||
width: 240rpx;
|
||||
height: 84rpx;
|
||||
|
||||
@@ -2,9 +2,25 @@
|
||||
<view class="xdd-product-item" @click="viewHandle(item)">
|
||||
<view class="focus-img">
|
||||
<image
|
||||
v-if="!item.isFarmerShop"
|
||||
:src="item[imageKey]"
|
||||
class="img"
|
||||
/>
|
||||
<image
|
||||
:src="item.farmerShopCover"
|
||||
v-if="item.farmerShopCoverType === 1 && item.isFarmerShop"
|
||||
class="img"
|
||||
mode="heightFix|widthFix">
|
||||
</image>
|
||||
<video
|
||||
:src="item.farmerShopCover"
|
||||
v-if="item.farmerShopCoverType !== 1 && item.isFarmerShop"
|
||||
:show-center-play-btn="false"
|
||||
:show-fullscreen-btn="false"
|
||||
:show-play-btn="false"
|
||||
class="img"
|
||||
:poster="item.farmerShopCover + '?vframe/jpg/offset/1'">
|
||||
</video>
|
||||
<image
|
||||
v-if="item.isOldBrand"
|
||||
:src="webUrl + '/home/old-mark.png'"
|
||||
@@ -20,8 +36,14 @@
|
||||
:src="webUrl + '/home/qixian-mark.png'"
|
||||
class="mark-img"
|
||||
/>
|
||||
<image
|
||||
v-if="item.isFarmerShop"
|
||||
:src="webUrl + '/orderIcon/nm.png'"
|
||||
class="mark-img-nm"
|
||||
/>
|
||||
</view>
|
||||
<view class="info-wrap">
|
||||
<view v-if="item.isFarmerShop" class="more-t v12-pt-2 v12-font-bold v12-font-28 v12-px-2" >{{ item.farmerShopContent }}</view>
|
||||
<view class="info-wrap" v-if="!item.isFarmerShop">
|
||||
<view class="name more-t">
|
||||
{{ item[nameKey] }}
|
||||
</view>
|
||||
@@ -44,6 +66,14 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
v-if="item.isFarmerShop"
|
||||
class="v12-justify-start v12-align-center v12-pt-2 v12-px-2 v12-pb-2">
|
||||
<view class="btn v12-mr-2">
|
||||
<image :src="item.farmerShopLogo" class="nm-img-logo v12-radius-100"></image>
|
||||
</view>
|
||||
<view class="one-t v12-font-24 v12-dark1-text" style="width:230rpx">{{ item.farmerShopName }}/{{ item.farmerShopCityName || '-' }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -89,6 +119,21 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.nm-img-logo {
|
||||
display: block;
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
}
|
||||
.mark-img-nm{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 3;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 0 25rpx 0 0;
|
||||
}
|
||||
.xdd-product-item {
|
||||
border-radius: 20rpx;
|
||||
background-color: #fff;
|
||||
|
||||
@@ -25,6 +25,7 @@
|
||||
v-for="(item, index) in tabbarItem"
|
||||
:key="index"
|
||||
:class="currIndex === item.index ? 'curr' : ''"
|
||||
:id="'icon' + index"
|
||||
class="item"
|
||||
@click="gotoPage(item.url, item.type, item.index)"
|
||||
>
|
||||
@@ -97,6 +98,7 @@ export default {
|
||||
},
|
||||
mounted() {
|
||||
this.getElementData('#quweiIcon')
|
||||
this.getIconData('#icon1')
|
||||
},
|
||||
methods: {
|
||||
getElementData(el) {
|
||||
@@ -107,6 +109,14 @@ export default {
|
||||
}
|
||||
})
|
||||
},
|
||||
getIconData(el) {
|
||||
const query = uni.createSelectorQuery().in(this)
|
||||
query.select(el).boundingClientRect().exec((res)=> {
|
||||
if(res[0]) {
|
||||
this.$emit('getIcon', res[0])
|
||||
}
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 跳转至目标页面
|
||||
* type: 1-tabbar页面，2-非tabbar页面
|
||||
|
||||
+700
-69
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user