Task：指引功能
This commit is contained in:
modendeveloper
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<view v-if="show" class="guide-remark white">
|
||||
<view v-if="show" class="guide-remark white" @touchmove.stop.prevent="" >
|
||||
<view class="guid-wrap">
|
||||
<image
|
||||
v-for="(img, index) in functionGuideData.imgs"
|
||||
@@ -38,7 +38,7 @@
|
||||
type: Object,
|
||||
default: ()=> {
|
||||
return {
|
||||
step: 2,
|
||||
step: 1,
|
||||
tips: '', // 介绍
|
||||
tipsPosition: '', // 介绍 显示位置
|
||||
btnGroupPosition: '', // 按钮组显示位置
|
||||
|
||||
@@ -13,6 +13,8 @@ export default {
|
||||
scrollLeft: 0,
|
||||
totalWidth: 0,
|
||||
scrollViewWidth: 0,
|
||||
imgs: [],
|
||||
_step: 0
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
@@ -32,6 +34,8 @@ export default {
|
||||
console.log(res, 'getElementData');
|
||||
if(res[0]) {
|
||||
cb(res[0])
|
||||
} else {
|
||||
this.$refs.FunctionGuide.show = false
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="aside">
|
||||
<view class="aside" id="aside">
|
||||
<view
|
||||
v-for="(item, index) in listGroup"
|
||||
:key="index"
|
||||
@@ -137,6 +137,7 @@
|
||||
</view>
|
||||
</mescroll-body>
|
||||
</view>
|
||||
<FunctionGuide :maxStep="maxStep" :guideData="functionGuideData" ref="FunctionGuide"></FunctionGuide>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -146,11 +147,14 @@ import {fetchCity} from '@/api/wenwan'
|
||||
import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue'
|
||||
import {getCurAddress, getLocation} from '@/utils/common.js'
|
||||
import { pageListenMixins } from '@/mixins/pageListenMixins'
|
||||
import FunctionGuide from '@/components/FunctionGuide'
|
||||
import GuideMixins from '@/mixins/GuideMixins'
|
||||
|
||||
export default {
|
||||
name: 'ChoseCity',
|
||||
components: {
|
||||
MescrollBody
|
||||
MescrollBody,
|
||||
FunctionGuide
|
||||
},
|
||||
mixins: [
|
||||
MescrollMixins({
|
||||
@@ -158,7 +162,8 @@ export default {
|
||||
mescroll.endSuccess(10)
|
||||
}
|
||||
}),
|
||||
pageListenMixins
|
||||
pageListenMixins,
|
||||
GuideMixins
|
||||
],
|
||||
data() {
|
||||
return {
|
||||
@@ -188,6 +193,15 @@ export default {
|
||||
pageKeyId: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
maxStep() {
|
||||
const stepsMap = {
|
||||
0: 1,
|
||||
1: 1,
|
||||
}
|
||||
return stepsMap[this.type] || 1
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
const type = Number(options.type)
|
||||
this.type = type
|
||||
@@ -218,6 +232,71 @@ export default {
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
showFunctionGuide() {
|
||||
if(this._step == this.functionGuideData.step) return
|
||||
if(this.functionGuideData.step == 1) {
|
||||
this._step = this.functionGuideData.step
|
||||
const imgs = [
|
||||
{
|
||||
url: this.webUrl + '/引导页素材/全国特产/Group 1-1.png',
|
||||
style: {
|
||||
position: 'absolute',
|
||||
zIndex: 99,
|
||||
width: '357rpx',
|
||||
top: '100rpx',
|
||||
left: '-110rpx',
|
||||
right: 0,
|
||||
margin: 'auto',
|
||||
height: '382rpx',
|
||||
/* px: ; */
|
||||
},
|
||||
isBtn: false
|
||||
},
|
||||
{
|
||||
url: this.webUrl + '/引导页素材/全国特产/Group 1-2.png',
|
||||
style: {
|
||||
position: 'absolute',
|
||||
zIndex: 99,
|
||||
width: '117rpx',
|
||||
top: 125*2+'rpx',
|
||||
left: -120*2+'rpx',
|
||||
right: 0,
|
||||
margin: 'auto',
|
||||
height: '46rpx',
|
||||
},
|
||||
isBtn: 'jump'
|
||||
},
|
||||
{
|
||||
url: this.webUrl + '/引导页素材/全国特产/Group 1-3.png',
|
||||
style: {
|
||||
position: 'absolute',
|
||||
zIndex: 99,
|
||||
width: '117rpx',
|
||||
top: 125*2+'rpx',
|
||||
left: 170*2+'rpx',
|
||||
height: '46rpx',
|
||||
},
|
||||
isBtn: 'next'
|
||||
},
|
||||
]
|
||||
this.getElementData('#aside', res=>{
|
||||
this.setFunctionGuideData({
|
||||
imgs: imgs,
|
||||
tipsPosition: '420rpx',
|
||||
btnGroupPosition: '',
|
||||
position: {
|
||||
top: res.top*2 + 'rpx',
|
||||
left: res.left*2 + 'rpx',
|
||||
width: `${res.width*2}rpx`,
|
||||
height: `${res.height*2}rpx`,
|
||||
}
|
||||
})
|
||||
})
|
||||
return
|
||||
} else {
|
||||
return
|
||||
}
|
||||
},
|
||||
reload() {
|
||||
uni.getSetting({
|
||||
success(res) {
|
||||
|
||||
+109
-58
@@ -452,9 +452,9 @@ export default {
|
||||
onscroll(e) {
|
||||
this.scrollViewWidth = e.detail.scrollWidth
|
||||
const imgs = []
|
||||
this.getElementData(`#${scrollView}`, res=>{
|
||||
this.getElementData(`#${this.scrollView}`, res=>{
|
||||
this.setFunctionGuideData({
|
||||
imgs: imgs,
|
||||
imgs: this.imgs,
|
||||
btnGroupPosition: '20rpx',
|
||||
tipsPosition: '',
|
||||
position: {
|
||||
@@ -663,7 +663,7 @@ export default {
|
||||
position: 'absolute',
|
||||
zIndex: 99,
|
||||
width: '578rpx',
|
||||
top: '140rpx',
|
||||
top: '180rpx',
|
||||
left: '150rpx',
|
||||
right: 0,
|
||||
margin: 'auto',
|
||||
@@ -823,7 +823,7 @@ export default {
|
||||
position: 'absolute',
|
||||
zIndex: 99,
|
||||
width: '438rpx',
|
||||
top: 170*2+'rpx',
|
||||
top: 140*2+'rpx',
|
||||
left: -164*2+'rpx',
|
||||
right: 0,
|
||||
margin: 'auto',
|
||||
@@ -858,7 +858,7 @@ export default {
|
||||
zIndex: 99,
|
||||
width: '574rpx',
|
||||
top: 170*2+'rpx',
|
||||
left: -164*2+'rpx',
|
||||
left: -0+'rpx',
|
||||
right: 0,
|
||||
margin: 'auto',
|
||||
height: '238rpx',
|
||||
@@ -872,7 +872,7 @@ export default {
|
||||
zIndex: 99,
|
||||
width: '118rpx',
|
||||
top: 315*2+'rpx',
|
||||
left: 0+'rpx',
|
||||
left: -290*2+'rpx',
|
||||
right: 0,
|
||||
margin: 'auto',
|
||||
height: '46rpx',
|
||||
@@ -886,7 +886,7 @@ export default {
|
||||
zIndex: 99,
|
||||
width: '118rpx',
|
||||
top: 315*2+'rpx',
|
||||
left: 140*2+'rpx',
|
||||
left: -(290-130)*2+'rpx',
|
||||
right: 0,
|
||||
margin: 'auto',
|
||||
height: '46rpx',
|
||||
@@ -904,12 +904,12 @@ export default {
|
||||
style:{
|
||||
position: 'absolute',
|
||||
zIndex: 99,
|
||||
width: '574rpx',
|
||||
top: 170*2+'rpx',
|
||||
left: -164*2+'rpx',
|
||||
width: '444rpx',
|
||||
top: 310*2+'rpx',
|
||||
left: 144*2+'rpx',
|
||||
right: 0,
|
||||
margin: 'auto',
|
||||
height: '238rpx',
|
||||
height: '252rpx',
|
||||
},
|
||||
isBtn: false
|
||||
},
|
||||
@@ -919,8 +919,8 @@ export default {
|
||||
position: 'absolute',
|
||||
zIndex: 99,
|
||||
width: '118rpx',
|
||||
top: 315*2+'rpx',
|
||||
left: 0+'rpx',
|
||||
top: 435*2+'rpx',
|
||||
left: -235*2+'rpx',
|
||||
right: 0,
|
||||
margin: 'auto',
|
||||
height: '46rpx',
|
||||
@@ -933,8 +933,8 @@ export default {
|
||||
position: 'absolute',
|
||||
zIndex: 99,
|
||||
width: '118rpx',
|
||||
top: 315*2+'rpx',
|
||||
left: 140*2+'rpx',
|
||||
top: 435*2+'rpx',
|
||||
left: -90*2+'rpx',
|
||||
right: 0,
|
||||
margin: 'auto',
|
||||
height: '46rpx',
|
||||
@@ -953,12 +953,12 @@ export default {
|
||||
style:{
|
||||
position: 'absolute',
|
||||
zIndex: 99,
|
||||
width: '574rpx',
|
||||
top: 170*2+'rpx',
|
||||
left: -164*2+'rpx',
|
||||
width: '489rpx',
|
||||
top: 580*2+'rpx',
|
||||
left: 0+'rpx',
|
||||
right: 0,
|
||||
margin: 'auto',
|
||||
height: '238rpx',
|
||||
height: '267rpx',
|
||||
},
|
||||
isBtn: false
|
||||
},
|
||||
@@ -968,7 +968,7 @@ export default {
|
||||
position: 'absolute',
|
||||
zIndex: 99,
|
||||
width: '118rpx',
|
||||
top: 315*2+'rpx',
|
||||
top: 555*2+'rpx',
|
||||
left: 0+'rpx',
|
||||
right: 0,
|
||||
margin: 'auto',
|
||||
@@ -982,7 +982,7 @@ export default {
|
||||
position: 'absolute',
|
||||
zIndex: 99,
|
||||
width: '118rpx',
|
||||
top: 315*2+'rpx',
|
||||
top: 555*2+'rpx',
|
||||
left: 140*2+'rpx',
|
||||
right: 0,
|
||||
margin: 'auto',
|
||||
@@ -1011,12 +1011,12 @@ export default {
|
||||
style:{
|
||||
position: 'absolute',
|
||||
zIndex: 99,
|
||||
width: '574rpx',
|
||||
top: 170*2+'rpx',
|
||||
left: -164*2+'rpx',
|
||||
width: '450rpx',
|
||||
top: 465*2+'rpx',
|
||||
left: 120*2+'rpx',
|
||||
right: 0,
|
||||
margin: 'auto',
|
||||
height: '238rpx',
|
||||
height: '218rpx',
|
||||
},
|
||||
isBtn: false
|
||||
},
|
||||
@@ -1026,8 +1026,8 @@ export default {
|
||||
position: 'absolute',
|
||||
zIndex: 99,
|
||||
width: '118rpx',
|
||||
top: 315*2+'rpx',
|
||||
left: 0+'rpx',
|
||||
top: 575*2+'rpx',
|
||||
left: -210*2+'rpx',
|
||||
right: 0,
|
||||
margin: 'auto',
|
||||
height: '46rpx',
|
||||
@@ -1040,8 +1040,8 @@ export default {
|
||||
position: 'absolute',
|
||||
zIndex: 99,
|
||||
width: '118rpx',
|
||||
top: 315*2+'rpx',
|
||||
left: 140*2+'rpx',
|
||||
top: 575*2+'rpx',
|
||||
left: -70*2+'rpx',
|
||||
right: 0,
|
||||
margin: 'auto',
|
||||
height: '46rpx',
|
||||
@@ -1060,12 +1060,12 @@ export default {
|
||||
style:{
|
||||
position: 'absolute',
|
||||
zIndex: 99,
|
||||
width: '574rpx',
|
||||
top: 170*2+'rpx',
|
||||
left: -164*2+'rpx',
|
||||
width: '479rpx',
|
||||
top: 665*2+'rpx',
|
||||
left: 40*2+'rpx',
|
||||
right: 0,
|
||||
margin: 'auto',
|
||||
height: '238rpx',
|
||||
height: '180rpx',
|
||||
},
|
||||
isBtn: false
|
||||
},
|
||||
@@ -1075,22 +1075,8 @@ export default {
|
||||
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',
|
||||
top: 750*2+'rpx',
|
||||
left: 40*2+'rpx',
|
||||
right: 0,
|
||||
margin: 'auto',
|
||||
height: '46rpx',
|
||||
@@ -1098,7 +1084,17 @@ export default {
|
||||
isBtn: 'next'
|
||||
}
|
||||
]
|
||||
this.toEle('xpsx', imgs)
|
||||
this.setFunctionGuideData({
|
||||
imgs: imgs,
|
||||
btnGroupPosition: '',
|
||||
tipsPosition: '',
|
||||
position: {
|
||||
top: this.messageIcon.top + 'px',
|
||||
left: this.messageIcon.left + 'px',
|
||||
width: `${this.messageIcon.width}px`,
|
||||
height: `${this.messageIcon.height}px`,
|
||||
}
|
||||
})
|
||||
return
|
||||
}
|
||||
if(this.functionGuideData.step == 13) {
|
||||
@@ -1113,12 +1109,12 @@ export default {
|
||||
style:{
|
||||
position: 'absolute',
|
||||
zIndex: 99,
|
||||
width: '534rpx',
|
||||
top: '140rpx',
|
||||
left: '230rpx',
|
||||
width: 291.5*2+'rpx',
|
||||
top: 280*2+'rpx',
|
||||
left: 10*2+'rpx',
|
||||
right: 0,
|
||||
margin: 'auto',
|
||||
height: '280rpx',
|
||||
height: 116.5*2+'rpx',
|
||||
},
|
||||
isBtn: false
|
||||
},
|
||||
@@ -1129,7 +1125,7 @@ export default {
|
||||
zIndex: 99,
|
||||
width: '117rpx',
|
||||
top: 213*2+'rpx',
|
||||
left: -20*2+'rpx',
|
||||
left: -280*2+'rpx',
|
||||
right: 0,
|
||||
margin: 'auto',
|
||||
height: '46rpx',
|
||||
@@ -1143,7 +1139,7 @@ export default {
|
||||
zIndex: 99,
|
||||
width: '117rpx',
|
||||
top: 213*2+'rpx',
|
||||
left: 140*2+'rpx',
|
||||
left: -150*2+'rpx',
|
||||
right: 0,
|
||||
margin: 'auto',
|
||||
height: '46rpx',
|
||||
@@ -1156,7 +1152,61 @@ export default {
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
if(this.functionGuideData.step == 14) {
|
||||
if(menusUrl.indexOf(urls[14]) < 0) {
|
||||
this.$refs.FunctionGuide.next()
|
||||
return
|
||||
}
|
||||
if(menusUrl.indexOf(urls[14]) > -1) {
|
||||
const imgs = [
|
||||
{
|
||||
url: this.webUrl + '/引导页素材/首页引导/Group14/Group 14-1.png',
|
||||
style:{
|
||||
position: 'absolute',
|
||||
zIndex: 99,
|
||||
width: '539rpx',
|
||||
top: 80*2+'rpx',
|
||||
left: 100*2+'rpx',
|
||||
right: 0,
|
||||
margin: 'auto',
|
||||
height: '265rpx',
|
||||
},
|
||||
isBtn: false
|
||||
},
|
||||
{
|
||||
url: this.webUrl + '/引导页素材/首页引导/Group14/Group 14-2.png',
|
||||
style:{
|
||||
position: 'absolute',
|
||||
zIndex: 99,
|
||||
width: '117rpx',
|
||||
top: 213*2+'rpx',
|
||||
left: 150*2+'rpx',
|
||||
right: 0,
|
||||
margin: 'auto',
|
||||
height: '46rpx',
|
||||
},
|
||||
isBtn: 'jump'
|
||||
},
|
||||
{
|
||||
url: this.webUrl + '/引导页素材/首页引导/Group14/Group 14-3.png',
|
||||
style:{
|
||||
position: 'absolute',
|
||||
zIndex: 99,
|
||||
width: '117rpx',
|
||||
top: 213*2+'rpx',
|
||||
left: 10*2+'rpx',
|
||||
right: 0,
|
||||
margin: 'auto',
|
||||
height: '46rpx',
|
||||
},
|
||||
isBtn: 'next'
|
||||
},
|
||||
]
|
||||
const index = menusUrl.indexOf(urls[14])
|
||||
this.toEle('box-item' + index, imgs)
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
@@ -1165,6 +1215,7 @@ export default {
|
||||
if(res.left + res.width / 2 > this.screenWidth) {
|
||||
this.$nextTick(()=> {
|
||||
this.scrollView = id
|
||||
this.imgs = imgs
|
||||
})
|
||||
return
|
||||
}
|
||||
@@ -1548,7 +1599,7 @@ export default {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -21rpx;
|
||||
z-index: 2;
|
||||
z-index: -1;
|
||||
width: calc(100% + 40rpx);
|
||||
height: 180rpx;
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #F0F0F0 40%, #F0F0F0 100%);
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="list flex flex-wrap" v-if="list.length">
|
||||
<view class="list flex flex-wrap" v-if="list.length" id="goods-box">
|
||||
<view class="item" v-for="item in list" :key="item.id" @click="goStore(item)">
|
||||
<image class="image" :src="item.cover + (item.coverType === 2 ? '?vframe/jpg/offset/1' : '')" mode="scaleToFill"></image>
|
||||
|
||||
@@ -36,13 +36,20 @@
|
||||
<image src="@/static/images/img_nodata.png" mode="scaleToFill"/>
|
||||
<view class="text">暂无数据</view>
|
||||
</view>
|
||||
<FunctionGuide :maxStep="1" :guideData="functionGuideData" ref="FunctionGuide"></FunctionGuide>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {fetchStore} from "@/api/wenwan";
|
||||
import FunctionGuide from '@/components/FunctionGuide'
|
||||
import GuideMixins from '@/mixins/GuideMixins'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
FunctionGuide
|
||||
},
|
||||
mixins: [GuideMixins],
|
||||
data() {
|
||||
return {
|
||||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||||
@@ -71,6 +78,73 @@ export default {
|
||||
this.fetchList(this.cityName);
|
||||
},
|
||||
methods: {
|
||||
showFunctionGuide() {
|
||||
if(this._step == this.functionGuideData.step) return
|
||||
if(this.functionGuideData.step == 1) {
|
||||
this._step = this.functionGuideData.step
|
||||
const imgs = [
|
||||
{
|
||||
url: this.webUrl + '/引导页素材/文玩艺术/Group2/Group 2-1.png',
|
||||
style: {
|
||||
position: 'absolute',
|
||||
zIndex: 99,
|
||||
width: '357rpx',
|
||||
top: '100rpx',
|
||||
left: '-110rpx',
|
||||
right: 0,
|
||||
margin: 'auto',
|
||||
height: '382rpx',
|
||||
/* px: ; */
|
||||
},
|
||||
isBtn: false
|
||||
},
|
||||
{
|
||||
url: this.webUrl + '/引导页素材/文玩艺术/Group2/Group 2-2.png',
|
||||
style: {
|
||||
position: 'absolute',
|
||||
zIndex: 99,
|
||||
width: '117rpx',
|
||||
top: 125*2+'rpx',
|
||||
left: -120*2+'rpx',
|
||||
right: 0,
|
||||
margin: 'auto',
|
||||
height: '46rpx',
|
||||
},
|
||||
isBtn: 'jump'
|
||||
},
|
||||
{
|
||||
url: this.webUrl + '/引导页素材/文玩艺术/Group2/Group 2-3.png',
|
||||
style: {
|
||||
position: 'absolute',
|
||||
zIndex: 99,
|
||||
width: '117rpx',
|
||||
top: 125*2+'rpx',
|
||||
left: 170*2+'rpx',
|
||||
height: '46rpx',
|
||||
},
|
||||
isBtn: 'next'
|
||||
},
|
||||
]
|
||||
this.getElementData('#goods-box', res=>{
|
||||
console.log(res, 'res---------');
|
||||
|
||||
this.setFunctionGuideData({
|
||||
imgs: imgs,
|
||||
tipsPosition: '420rpx',
|
||||
btnGroupPosition: '',
|
||||
position: {
|
||||
top: res.top*2 + 'rpx',
|
||||
left: res.left*2 + 'rpx',
|
||||
width: `${res.width*2}rpx`,
|
||||
height: `${res.height*2}rpx`,
|
||||
}
|
||||
})
|
||||
})
|
||||
return
|
||||
} else {
|
||||
return
|
||||
}
|
||||
},
|
||||
goClass() {
|
||||
uni.navigateTo({
|
||||
url: "/wenwan/views/goodsClass?cityId=" + this.cityId
|
||||
|
||||
Reference in New Issue
Block a user