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/cloud/haveFun.vue
+184 -6
View File
@@ -3,7 +3,7 @@
<view class="top-box">
<view class="v12-justify-start v12-align-center">
<view class="flex jc-end">
<view class="city-box" @click="goCity('cloud')">
<view class="city-box" @click="goCity('cloud')" id="city-box">
<text style="white-space:nowrap; width: 90rpx" class="v12-primary-text one-t">{{ cityName }}</text>
<image :src="webUrl+'/icon/fun-city-change.png'" mode="scaleToFill"></image>
</view>
@@ -42,7 +42,7 @@
</view>
<view>
<view class="type-box flex" >
<view class="type-box flex" id="type-box">
<view class="first-box">
<view class="first-box__inner">
<view
@@ -65,7 +65,7 @@
:class="{
'active': typeIndex === index
}"
class="item flex-0 flex flex-col jc-center ai-center v12-white"
class="item flex-0 flex flex-col jc-center ai-center"
@click="tapType(index)"
>
<image :src="item.icon" mode="scaleToFill"/>
@@ -106,7 +106,7 @@
</swiper>
</view>
</view>
<view class="body" v-if="typeIndex === -1">
<view class="body" v-if="typeIndex === -1" id="body1">
<view class="town-card" v-for="(town, i) in townList" :key="i" @click="toTown(town)">
<!-- <view class="town-title">{{ town.name }}</view> -->
<image :src="town.frontImage" mode="scaleToFill"/>
@@ -162,6 +162,7 @@
:show-avatar="false"
/>
</view>
<FunctionGuide :maxStep="3" :guideData="functionGuideData" ref="FunctionGuide"></FunctionGuide>
<xdd-tabbar :curr-index="4" />
</view>
</template>
@@ -171,12 +172,15 @@ import { getCurAddress, getLocation } from "@/utils/common"
import FunHotelItem from './components/HotelItem'
import { pageListenMixins } from '@/mixins/pageListenMixins'
import XddTabbar from '@/components/xdd-tabbar'
import FunctionGuide from '@/components/FunctionGuide'
import GuideMixins from '@/mixins/GuideMixins'
export default {
components: {
FunHotelItem,
XddTabbar
XddTabbar,
FunctionGuide
},
mixins: [pageListenMixins],
mixins: [pageListenMixins, GuideMixins],
data() {
return {
webUrl: this.$VUE_APP_RESOURCES_URL,
@@ -246,6 +250,180 @@ export default {
}
},
methods: {
showFunctionGuide() {
if(this._step == this.functionGuideData.step) return
if(this.functionGuideData.step == 1) {
this._step = this.functionGuideData.step
this.getElementData('#city-box', res=>{
const imgs = [
{
url: this.webUrl + '/引导页素材/寻趣味/Group 1/Group 1-1.png',
style: {
position: 'absolute',
zIndex: 99,
width: '390rpx',
top: 0*2+'rpx',
left: res.width*2+'rpx',
height: '162rpx',
/* px: ; */
},
isBtn: false
},
{
url: this.webUrl + '/引导页素材/寻趣味/Group 1/Group 1-2.png',
style: {
position: 'absolute',
zIndex: 99,
width: '117rpx',
top: 80*2+'rpx',
left: -60*2+'rpx',
right: 0,
margin: 'auto',
height: '46rpx',
},
isBtn: 'jump'
},
{
url: this.webUrl + '/引导页素材/寻趣味/Group 1/Group 1-3.png',
style: {
position: 'absolute',
zIndex: 99,
width: '117rpx',
top: 80*2+'rpx',
left: 200*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('#type-box', res=>{
const imgs = [
{
url: this.webUrl + '/引导页素材/寻趣味/Group 2/Group 2-1.png',
style: {
position: 'absolute',
zIndex: 99,
width: '504rpx',
top: 170*2+'rpx',
left: 0+'rpx',
right: 0,
margin: 'auto',
height: '191rpx',
/* px: ; */
},
isBtn: false
},
{
url: this.webUrl + '/引导页素材/寻趣味/Group 2/Group 2-3.png',
style: {
position: 'absolute',
zIndex: 99,
width: '117rpx',
top: 270*2+'rpx',
left: -160*2+'rpx',
right: 0,
margin: 'auto',
height: '46rpx',
},
isBtn: 'jump'
},
{
url: this.webUrl + '/引导页素材/寻趣味/Group 2/Group 2-2.png',
style: {
position: 'absolute',
zIndex: 99,
width: '117rpx',
top: 270*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-13)*2}rpx`,
}
})
})
return
}
if(this.functionGuideData.step == 3) {
this._step = this.functionGuideData.step
this.getElementData('#body1', res=>{
const imgs = [
{
url: this.webUrl + '/引导页素材/寻趣味/Group 3/Group 3-1.png',
style: {
position: 'absolute',
zIndex: 99,
width: '290rpx',
top: 90*2+'rpx',
left: 0,
right: 0,
margin: 'auto',
height: '165rpx',
/* px: ; */
},
isBtn: false
},
{
url: this.webUrl + '/引导页素材/寻趣味/Group 3/Group 3-2.png',
style: {
position: 'absolute',
zIndex: 99,
width: '97rpx',
top: 60*2+'rpx',
left: 60*2+'rpx',
right: 0,
margin: 'auto',
height: '55rpx',
},
isBtn: 'jump'
},
]
this.setFunctionGuideData({
imgs: imgs,
tipsPosition: '420rpx',
btnGroupPosition: '',
position: {
top: (res.top-10)*2 + 'rpx',
left: res.left*2 + 'rpx',
width: `${res.width*2}rpx`,
height: `${res.height*2}rpx`,
}
})
})
return
}
return
}
},
handleRefresh() {
uni.showLoading()
this.page = 1