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-18 16:45:06 +08:00
parent ec33f6f4c0
commit 85854ea2f6
9 changed files with 880 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/home/landMark.vue
+138 -4
View File
@@ -3,7 +3,7 @@
<view v-if="isLoad">
<view class="top-wrap">
<view class="top-box">
<view class="nav flex">
<view class="nav flex" id="nav-dibiao">
<view
v-for="(item,index) in navList"
:key="index"
@@ -45,7 +45,7 @@
<view @click="handleTab(item.value)" :class="{ 'tab-actived' : item.value === actived }" class="tab-item" v-for="(item, index) in tabs" :key="index">{{ item.name }}</view>
</view>
</view>
<view class="list-wrap">
<view class="list-wrap" id="list-wrap">
<view v-if="actived === 1">
<projects :landmarkDataId="landmarkDataId" :info="mapData.serviceInfo"></projects>
</view>
@@ -84,6 +84,7 @@
@changeFun="changeFun"
@ok="handleOk"
/>
<FunctionGuide :maxStep="2" :guideData="functionGuideData" ref="FunctionGuide"></FunctionGuide>
</view>
</template>
@@ -101,6 +102,8 @@ import culture from "./components/culture.vue"
import information from "./components/information.vue"
import shareImg from "./components/shareImg.vue"
import ProductWindow from '@/components/ProductWindow'
import FunctionGuide from '@/components/FunctionGuide'
import GuideMixins from '@/mixins/GuideMixins'
export default {
name: 'LandMarkPage',
components: {
@@ -109,9 +112,10 @@ export default {
culture,
information,
shareImg,
ProductWindow
ProductWindow,
FunctionGuide
},
mixins: [pageListenMixins, goCartMixin],
mixins: [pageListenMixins, goCartMixin, GuideMixins],
data() {
return {
actived: 1,
@@ -160,6 +164,136 @@ export default {
this.fetchGoods()
},
methods: {
showFunctionGuide() {
if(this._step == this.functionGuideData.step) return
if(this.functionGuideData.step == 1) {
this._step = this.functionGuideData.step
this.getElementData('#nav-dibiao', res=>{
const imgs = [
{
url: this.webUrl + '/引导页素材/地标好物/Group1/Group 1-1.png',
style: {
position: 'absolute',
zIndex: 99,
width: '495rpx',
top: 50*2+'rpx',
left: 0,
right: 0,
margin: 'auto',
height: '194rpx',
/* px: ; */
},
isBtn: false
},
{
url: this.webUrl + '/引导页素材/地标好物/Group1/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',
},
isBtn: 'jump'
},
{
url: this.webUrl + '/引导页素材/地标好物/Group1/Group 1-3.png',
style: {
position: 'absolute',
zIndex: 99,
width: '117rpx',
top: 160*2+'rpx',
left: 160*2+'rpx',
height: '46rpx',
},
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`,
}
})
})
return
} else {
if(this.functionGuideData.step == 2) {
this._step = this.functionGuideData.step
this.getElementData('#list-wrap', res=>{
const imgs = [
{
url: this.webUrl + '/引导页素材/地标好物/Group2/Group 2-1.png',
style: {
position: 'absolute',
zIndex: 99,
width: '450rpx',
top: 300*2+'rpx',
left: 0,
right: 0,
margin: 'auto',
height: '174rpx',
/* px: ; */
},
isBtn: false
},
{
url: this.webUrl + '/引导页素材/地标好物/Group2/Group 2-2.png',
style: {
position: 'absolute',
zIndex: 99,
width: '117rpx',
top: 280*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: 280*2+'rpx',
left: 180*2+'rpx',
height: '46rpx',
},
isBtn: 'next'
},
]
uni.pageScrollTo({
scrollTop: res.top,
duration: 300
})
this.setFunctionGuideData({
imgs: imgs,
tipsPosition: '420rpx',
btnGroupPosition: '',
position: {
top: (res.top - res.height + 41)*2 + 'rpx',
left: res.left*2 + 'rpx',
width: `${res.width*2}rpx`,
height: `${(res.height+41)*2}rpx`,
}
})
})
return
}
return
}
},
toShare() {
this.$refs.shareImg.savePosterPath(this.landmarkDataId)
},