Task:指引功能/状态接口对接

This commit is contained in:
modendeveloper
2025-01-19 02:52:58 +08:00
parent 85854ea2f6
commit bd2338f16a
13 changed files with 359 additions and 269 deletions
+62 -59
View File
@@ -174,7 +174,7 @@
:show-avatar="false"
/>
</view>
<FunctionGuide :maxStep="2" :guideData="functionGuideData" ref="FunctionGuide"></FunctionGuide>
<FunctionGuide :maxStep="4" @hide="setGuide('countyFamousIndex')" :guideData="functionGuideData" ref="FunctionGuide"></FunctionGuide>
</view>
</template>
@@ -234,6 +234,7 @@ export default {
userBindParent({spread: parseInt(this.partnerId)})
}
this.init()
this.queryGuide('countyFamousIndex')
},
methods: {
showFunctionGuide() {
@@ -288,10 +289,10 @@ export default {
tipsPosition: '420rpx',
btnGroupPosition: '',
position: {
top: res.top*2 + 'rpx',
left: res.left*2 + 'rpx',
width: `${res.width*2}rpx`,
height: `${res.height*2}rpx`,
top: res.top + 'px',
left: res.left + 'px',
width: `${res.width}px`,
height: `${res.height}px`,
}
})
})
@@ -299,64 +300,66 @@ export default {
} else {
// more-list-wrap
if(this.functionGuideData.step == 2) {
this._step = this.functionGuideData.step
this.getElementData('#more-list-wrap0', res=>{
const imgs = [
{
url: this.webUrl + '/引导页素材/千县名品/Group 2/Group 2-1.png',
style: {
position: 'absolute',
zIndex: 99,
width: '406rpx',
top: 280*2+'rpx',
left: 75*2+'rpx',
height: '218rpx',
/* px: ; */
this._step = this.functionGuideData.step
this.getElementData('#more-list-wrap0', res=>{
const imgs = [
{
url: this.webUrl + '/引导页素材/千县名品/Group 2/Group 2-1.png',
style: {
position: 'absolute',
zIndex: 99,
width: '406rpx',
top: 280*2+'rpx',
left: 75*2+'rpx',
height: '218rpx',
/* px: ; */
},
isBtn: false
},
isBtn: false
},
{
url: this.webUrl + '/引导页素材/千县名品/Group 2/Group 2-2.png',
style: {
position: 'absolute',
zIndex: 99,
width: '117rpx',
top: 250*2+'rpx',
left: -40*2+'rpx',
right: 0,
margin: 'auto',
height: '46rpx',
{
url: this.webUrl + '/引导页素材/千县名品/Group 2/Group 2-2.png',
style: {
position: 'absolute',
zIndex: 99,
width: '117rpx',
top: 250*2+'rpx',
left: -40*2+'rpx',
right: 0,
margin: 'auto',
height: '46rpx',
},
isBtn: 'jump'
},
isBtn: 'jump'
},
{
url: this.webUrl + '/引导页素材/千县名品/Group 2/Group 2-3.png',
style: {
position: 'absolute',
zIndex: 99,
width: '117rpx',
top: 250*2+'rpx',
left: 210*2+'rpx',
height: '46rpx',
{
url: this.webUrl + '/引导页素材/千县名品/Group 2/Group 2-3.png',
style: {
position: 'absolute',
zIndex: 99,
width: '117rpx',
top: 250*2+'rpx',
left: 210*2+'rpx',
height: '46rpx',
},
isBtn: 'next'
},
isBtn: 'next'
},
]
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`,
}
]
this.setFunctionGuideData({
imgs: imgs,
tipsPosition: '420rpx',
btnGroupPosition: '',
position: {
top: res.top + 'px',
left: res.left + 'px',
width: `${res.width}px`,
height: `${res.height}px`,
}
})
})
})
return
}
return
} else {
this.$refs.FunctionGuide.show = false
}
return
}
},
+65 -57
View File
@@ -640,7 +640,7 @@
@changeFun="changeFun"
@ok="handleOk"
/>
<FunctionGuide :maxStep="2" :guideData="functionGuideData" ref="FunctionGuide"></FunctionGuide>
<FunctionGuide @hide="setGuide('countyFamousIndex')" :maxStep="2" :guideData="functionGuideData" ref="FunctionGuide"></FunctionGuide>
</view>
</template>
@@ -768,6 +768,7 @@ export default {
// this.initPoster()
this.getListReq()
this.getsaleList()
this.queryGuide('countyFamousIndex')
},
methods: {
showFunctionGuide() {
@@ -775,58 +776,60 @@ export default {
if(this.functionGuideData.step == 1) {
this._step = this.functionGuideData.step
this.getElementData('#tab-wrap', res=>{
const imgs = [
{
url: this.webUrl + '/引导页素材/千县名品/Group 3/Group 3-1.png',
style: {
position: 'absolute',
zIndex: 99,
width: '500rpx',
top: 549*2+'rpx',
left: 80*2+'rpx',
height: '200rpx',
/* px: ; */
this.$nextTick(() => {
this.getElementData('#tab-wrap', res=>{
const imgs = [
{
url: this.webUrl + '/引导页素材/千县名品/Group 3/Group 3-1.png',
style: {
position: 'absolute',
zIndex: 99,
width: '500rpx',
top: 549*2+'rpx',
left: 80*2+'rpx',
height: '200rpx',
/* px: ; */
},
isBtn: false
},
isBtn: false
},
{
url: this.webUrl + '/引导页素材/千县名品/Group 3/Group 3-2.png',
style: {
position: 'absolute',
zIndex: 99,
width: '117rpx',
top: 520*2+'rpx',
left: 60*2+'rpx',
right: 0,
margin: 'auto',
height: '46rpx',
{
url: this.webUrl + '/引导页素材/千县名品/Group 3/Group 3-2.png',
style: {
position: 'absolute',
zIndex: 99,
width: '117rpx',
top: 520*2+'rpx',
left: 60*2+'rpx',
right: 0,
margin: 'auto',
height: '46rpx',
},
isBtn: 'jump'
},
isBtn: 'jump'
},
{
url: this.webUrl + '/引导页素材/千县名品/Group 3/Group 3-3.png',
style: {
position: 'absolute',
zIndex: 99,
width: '117rpx',
top: 520*2+'rpx',
left: 260*2+'rpx',
height: '46rpx',
{
url: this.webUrl + '/引导页素材/千县名品/Group 3/Group 3-3.png',
style: {
position: 'absolute',
zIndex: 99,
width: '117rpx',
top: 520*2+'rpx',
left: 260*2+'rpx',
height: '46rpx',
},
isBtn: 'next'
},
isBtn: 'next'
},
]
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`,
}
]
this.setFunctionGuideData({
imgs: imgs,
tipsPosition: '420rpx',
btnGroupPosition: '',
position: {
top: res.top + 'px',
left: res.left + 'px',
width: `${res.width}px`,
height: `${res.height}px`,
}
})
})
})
return
@@ -835,7 +838,12 @@ export default {
this._step = this.functionGuideData.step
this.activeIndex = 4
this.$nextTick(() => {
this.getElementData('#farmer1', res=>{
uni.pageScrollTo({
scrollTop: 100,
duration: 300
})
const imgs = [
{
url: this.webUrl + '/引导页素材/千县名品/Group 4/Group 4-1.png',
@@ -843,7 +851,7 @@ export default {
position: 'absolute',
zIndex: 99,
width: '366rpx',
top: 560*2+'rpx',
top: 460*2+'rpx',
left: 80*2+'rpx',
height: '167rpx',
/* px: ; */
@@ -856,7 +864,7 @@ export default {
position: 'absolute',
zIndex: 99,
width: '117rpx',
top: 540*2+'rpx',
top: 440*2+'rpx',
left: -60*2+'rpx',
right: 0,
margin: 'auto',
@@ -870,7 +878,7 @@ export default {
position: 'absolute',
zIndex: 99,
width: '117rpx',
top: 540*2+'rpx',
top: 440*2+'rpx',
left: 200*2+'rpx',
height: '46rpx',
},
@@ -882,10 +890,10 @@ export default {
tipsPosition: '420rpx',
btnGroupPosition: '',
position: {
top: res.top*2 + 'rpx',
left: res.left*2 + 'rpx',
width: `${res.width*2}rpx`,
height: `${res.height*2}rpx`,
top: res.top - 100 + 'px',
left: res.left + 'px',
width: `${res.width}px`,
height: `${res.height}px`,
}
})
})
+6 -9
View File
@@ -161,7 +161,7 @@
</view>
</view>
</view>
<FunctionGuide :maxStep="1" :guideData="functionGuideData" ref="FunctionGuide"></FunctionGuide>
<FunctionGuide :maxStep="1" @hide="setGuide('wellnessFoodIndex')" :guideData="functionGuideData" ref="FunctionGuide"></FunctionGuide>
</view>
</template>
@@ -198,6 +198,7 @@ export default {
},
onLoad() {
this.init()
this.queryGuide('wellnessFoodIndex')
},
methods: {
showFunctionGuide() {
@@ -248,17 +249,13 @@ export default {
},
]
this.getElementData('#news-wrap', res=>{
this.setFunctionGuideData({
imgs: imgs,
tipsPosition: '420rpx',
btnGroupPosition: '',
position: {
top: res.top*2 - 10 + 'rpx',
left: res.left*2 - 20 + 'rpx',
width: `${res.width*2}rpx`,
height: `${res.height*2}rpx`,
padding: '10rpx 20rpx'
top: res.top + 'px',
left: res.left + 'rpx',
width: `${res.width}px`,
height: `${res.height}px`,
}
})
})
+58 -51
View File
@@ -2,7 +2,7 @@
<view class="pkg-product-heritage">
<image style="width: 100%" :src="topImage" mode="widthFix" />
<view class="main-box" id="main-box">
<image style="width: 100%" :src="backgroundImage" mode="widthFix" />
<image style="width: 100%" :src="backgroundImage" mode="widthFix" @load="loadImg" />
<view
class="item"
:style="{ left: item.gx + 'rpx', top: item.gy + 'rpx' }"
@@ -18,7 +18,7 @@
</view>
</view>
<FunctionGuide :maxStep="1" :guideData="functionGuideData" ref="FunctionGuide"></FunctionGuide>
<FunctionGuide :maxStep="3" @hide='setGuide("ichIndex")' :guideData="functionGuideData" ref="FunctionGuide"></FunctionGuide>
</view>
</template>
@@ -50,69 +50,76 @@ export default {
},
onLoad() {
this.init();
this.queryGuide('ichIndex')
},
methods: {
loadImg(e) {
this.queryGuide('ichIndex')
},
showFunctionGuide() {
if(this._step == this.functionGuideData.step) return
if(this.functionGuideData.step == 1) {
this._step = this.functionGuideData.step
this.getElementData('#main-box', res=>{
const imgs = [
{
url: this.webUrl + '/引导页素材/非遗技艺/Group 1/Group 1-1.png',
style: {
position: 'absolute',
zIndex: 99,
width: '468rpx',
top: 180*2+'rpx',
left: res.left*2+'rpx',
height: '670rpx',
/* px: ; */
this.$nextTick(() => {
this.getElementData('#main-box', res=>{
const imgs = [
{
url: this.webUrl + '/引导页素材/非遗技艺/Group 1/Group 1-1.png',
style: {
position: 'absolute',
zIndex: 99,
width: '468rpx',
top: 80*2+'rpx',
left: res.left*2+'rpx',
height: '670rpx',
/* px: ; */
},
isBtn: false
},
isBtn: false
},
{
url: this.webUrl + '/引导页素材/非遗技艺/Group 1/Group 1-2.png',
style: {
position: 'absolute',
zIndex: 99,
width: '117rpx',
top: 160*2+'rpx',
left: -160*2+'rpx',
right: 0,
margin: 'auto',
height: '46rpx',
{
url: this.webUrl + '/引导页素材/非遗技艺/Group 1/Group 1-2.png',
style: {
position: 'absolute',
zIndex: 99,
width: '117rpx',
top: 60*2+'rpx',
left: -160*2+'rpx',
right: 0,
margin: 'auto',
height: '46rpx',
},
isBtn: 'jump'
},
isBtn: 'jump'
},
{
url: this.webUrl + '/引导页素材/非遗技艺/Group 1/Group 1-3.png',
style: {
position: 'absolute',
zIndex: 99,
width: '117rpx',
top: 160*2+'rpx',
left: 160*2+'rpx',
height: '46rpx',
{
url: this.webUrl + '/引导页素材/非遗技艺/Group 1/Group 1-3.png',
style: {
position: 'absolute',
zIndex: 99,
width: '117rpx',
top: 60*2+'rpx',
left: 160*2+'rpx',
height: '46rpx',
},
isBtn: 'next'
},
isBtn: 'next'
},
]
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*4}rpx`,
}
]
this.setFunctionGuideData({
imgs: imgs,
tipsPosition: '420rpx',
btnGroupPosition: '',
position: {
top: res.top + 'px',
left: res.left + 'px',
width: `${res.width}px`,
height: `${res.height}px`,
}
})
})
})
return
} else {
this.$refs.FunctionGuide.show = false
return
}
},
+13 -13
View File
@@ -68,7 +68,7 @@
/>
</view>
</view>
<FunctionGuide :maxStep="2" :guideData="functionGuideData" ref="FunctionGuide"></FunctionGuide>
<FunctionGuide :maxStep="2" @hide="setGuide('ichIndex')" :guideData="functionGuideData" ref="FunctionGuide"></FunctionGuide>
</view>
</template>
@@ -92,6 +92,7 @@ export default {
onLoad(opts) {
this.id = opts.id
this.getDetails()
this.queryGuide('ichIndex')
},
methods: {
showFunctionGuide() {
@@ -107,7 +108,7 @@ export default {
position: 'absolute',
zIndex: 99,
width: '405rpx',
top: 360*2+'rpx',
top: 350*2+'rpx',
left: res.left*2+'rpx',
height: '218rpx',
/* px: ; */
@@ -146,17 +147,17 @@ export default {
tipsPosition: '420rpx',
btnGroupPosition: '',
position: {
top: res.top*2 -20 + 'rpx',
left: res.left*2 -10 + 'rpx',
width: `${res.width*2}rpx`,
height: `${res.height*2}rpx`,
padding: '20rpx 10rpx',
top: res.top + 'px',
left: res.left + 'px',
width: `${res.width}px`,
height: `${res.height}px`
}
})
})
return
} else {
this._step = this.functionGuideData.step
this.actived = 2
this.getElementData('#tab-btn2', res=>{
const imgs = [
{
@@ -165,7 +166,7 @@ export default {
position: 'absolute',
zIndex: 99,
width: '496rpx',
top: 360*2+'rpx',
top: 350*2+'rpx',
left: 60+'rpx',
height: '183rpx',
/* px: ; */
@@ -204,11 +205,10 @@ export default {
tipsPosition: '420rpx',
btnGroupPosition: '',
position: {
top: res.top*2 -20 + 'rpx',
left: res.left*2 -10 + 'rpx',
width: `${res.width*2}rpx`,
height: `${res.height*2}rpx`,
padding: '20rpx 10rpx',
top: res.top + 'px',
left: res.left + 'px',
width: `${res.width}px`,
height: `${res.height}px`,
}
})
})