From 85854ea2f6c66bbe452f1bc28f076634fdcad92b Mon Sep 17 00:00:00 2001 From: linxi Date: Sat, 18 Jan 2025 16:45:06 +0800 Subject: [PATCH] =?UTF-8?q?Task=EF=BC=9A=E6=8C=87=E5=BC=95=E9=A1=B5/=20?= =?UTF-8?q?=E5=9B=BE=E7=89=87=E5=AE=9A=E4=BD=8D=E5=AE=8C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/FunctionGuide.vue | 2 +- pages/cloud/haveFun.vue | 190 ++++++++++++++++++++++- pages/home/landMark.vue | 142 ++++++++++++++++- pkg_product/views/famousList.vue | 139 ++++++++++++++++- pkg_product/views/famousQianxianShop.vue | 138 +++++++++++++++- pkg_product/views/healthList.vue | 77 ++++++++- pkg_product/views/heritage.vue | 86 ++++++++-- pkg_product/views/heritage/details.vue | 132 +++++++++++++++- wenwan/views/storeList.vue | 22 +-- 9 files changed, 880 insertions(+), 48 deletions(-) diff --git a/components/FunctionGuide.vue b/components/FunctionGuide.vue index af045db..3867927 100644 --- a/components/FunctionGuide.vue +++ b/components/FunctionGuide.vue @@ -172,7 +172,7 @@ width: 686rpx; border-radius: 24rpx; left: 32rpx; - box-shadow: 0 0 0 100vh rgba(0, 0, 0, .6); + box-shadow: 0 0 0 120vh rgba(0, 0, 0, .6); transition: all 0.3s ease; .tips { diff --git a/pages/cloud/haveFun.vue b/pages/cloud/haveFun.vue index a666696..de891b1 100644 --- a/pages/cloud/haveFun.vue +++ b/pages/cloud/haveFun.vue @@ -3,7 +3,7 @@ - + {{ cityName }} @@ -42,7 +42,7 @@ - + @@ -106,7 +106,7 @@ - + @@ -162,6 +162,7 @@ :show-avatar="false" /> + @@ -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 diff --git a/pages/home/landMark.vue b/pages/home/landMark.vue index 214b669..f69e791 100644 --- a/pages/home/landMark.vue +++ b/pages/home/landMark.vue @@ -3,7 +3,7 @@ - + {{ item.name }} - + @@ -84,6 +84,7 @@ @changeFun="changeFun" @ok="handleOk" /> + @@ -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) }, diff --git a/pkg_product/views/famousList.vue b/pkg_product/views/famousList.vue index 3c846c9..a079011 100644 --- a/pkg_product/views/famousList.vue +++ b/pkg_product/views/famousList.vue @@ -25,7 +25,7 @@ class="img" mode="widthFix" /> - + - + - + + @@ -188,10 +189,14 @@ import cookie from '@/utils/store/cookie' import { userBindParent } from '@/api/user' import { getUrlParam } from '@/utils/common.js' import { pageListenMixins } from '@/mixins/pageListenMixins' - +import FunctionGuide from '@/components/FunctionGuide' +import GuideMixins from '@/mixins/GuideMixins' export default { name: 'FamousList', - mixins: [pageListenMixins], + components: { + FunctionGuide + }, + mixins: [pageListenMixins, GuideMixins], data() { return { webUrl: this.$VUE_APP_RESOURCES_URL, @@ -231,6 +236,130 @@ export default { this.init() }, methods: { + showFunctionGuide() { + if(this._step == this.functionGuideData.step) return + if(this.functionGuideData.step == 1) { + this._step = this.functionGuideData.step + + this.getElementData('#province-wrap', res=>{ + const imgs = [ + { + url: this.webUrl + '/引导页素材/千县名品/Group 1/Group 1-1.png', + style: { + position: 'absolute', + zIndex: 99, + width: '406rpx', + top: 280*2+'rpx', + left: 75*2+'rpx', + height: '218rpx', + /* px: ; */ + }, + isBtn: false + }, + { + url: this.webUrl + '/引导页素材/千县名品/Group 1/Group 1-2.png', + style: { + position: 'absolute', + zIndex: 99, + width: '117rpx', + top: 390*2+'rpx', + left: -140*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: 390*2+'rpx', + left: 180*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 { + // 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: ; */ + }, + 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', + }, + 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', + }, + 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 + } + return + } + }, handlerSearch() { if(this.keyword) { this.searchEvent = true diff --git a/pkg_product/views/famousQianxianShop.vue b/pkg_product/views/famousQianxianShop.vue index cb14bad..115b5c9 100644 --- a/pkg_product/views/famousQianxianShop.vue +++ b/pkg_product/views/famousQianxianShop.vue @@ -328,7 +328,7 @@ class="bg" /> - + - + @@ -640,6 +640,7 @@ @changeFun="changeFun" @ok="handleOk" /> + @@ -669,14 +670,16 @@ import imgBox from '@/components/imageTypeSet/imagebox.vue' import XddProductItem from '@/components/xdd-product-item' import cookie from '@/utils/store/cookie' import { pageListenMixins } from '@/mixins/pageListenMixins' - +import FunctionGuide from '@/components/FunctionGuide' +import GuideMixins from '@/mixins/GuideMixins' export default { components: { imgBox, XddProductItem, - ProductWindow + ProductWindow, + FunctionGuide }, - mixins: [pageListenMixins, goCartMixin], + mixins: [pageListenMixins, goCartMixin, GuideMixins], data() { return { saleActived: null, @@ -767,6 +770,131 @@ export default { this.getsaleList() }, methods: { + showFunctionGuide() { + if(this._step == this.functionGuideData.step) return + 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: ; */ + }, + 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', + }, + 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', + }, + 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.activeIndex = 4 + this.$nextTick(() => { + this.getElementData('#farmer1', res=>{ + const imgs = [ + { + url: this.webUrl + '/引导页素材/千县名品/Group 4/Group 4-1.png', + style: { + position: 'absolute', + zIndex: 99, + width: '366rpx', + top: 560*2+'rpx', + left: 80*2+'rpx', + height: '167rpx', + /* px: ; */ + }, + isBtn: false + }, + { + url: this.webUrl + '/引导页素材/千县名品/Group 4/Group 4-2.png', + style: { + position: 'absolute', + zIndex: 99, + width: '117rpx', + top: 540*2+'rpx', + left: -60*2+'rpx', + right: 0, + margin: 'auto', + height: '46rpx', + }, + isBtn: 'jump' + }, + { + url: this.webUrl + '/引导页素材/千县名品/Group 4/Group 4-3.png', + style: { + position: 'absolute', + zIndex: 99, + width: '117rpx', + top: 540*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 + } + return + } + }, handleSale(e) { if(this.saleActived === e.id) { this.saleActived = null diff --git a/pkg_product/views/healthList.vue b/pkg_product/views/healthList.vue index 3a153c4..957d2c8 100644 --- a/pkg_product/views/healthList.vue +++ b/pkg_product/views/healthList.vue @@ -72,7 +72,7 @@ @click="changeTab(1)" /> --> - + 最新展会 @@ -161,6 +161,7 @@ + @@ -171,9 +172,14 @@ import { wellnessFood, wellnessPlaceList } from '@/api/product' import { getWellnessPlace, getWellnessExhibition, getBanner } from '@/api/health' import { getProducts } from '@/api/store' import { pageListenMixins } from '@/mixins/pageListenMixins' +import FunctionGuide from '@/components/FunctionGuide' +import GuideMixins from '@/mixins/GuideMixins' export default { name: 'HealthList', - mixins: [pageListenMixins], + components: { + FunctionGuide + }, + mixins: [pageListenMixins, GuideMixins], data() { return { webUrl: this.$VUE_APP_RESOURCES_URL, @@ -194,6 +200,73 @@ 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: '356rpx', + top: 140*2+'rpx', + left: 50*2+'rpx', + right: 0, + margin: 'auto', + height: '207rpx', + /* px: ; */ + }, + isBtn: false + }, + { + url: this.webUrl + '/引导页素材/康养旅居/Group 1-2.png', + style: { + position: 'absolute', + zIndex: 99, + width: '117rpx', + top: 110*2+'rpx', + left: 0*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: 110*2+'rpx', + left: 240*2+'rpx', + height: '46rpx', + }, + isBtn: 'next' + }, + ] + 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' + } + }) + }) + return + } else { + return + } + }, init() { getBanner().then(({data}) => { this.bannerList = data diff --git a/pkg_product/views/heritage.vue b/pkg_product/views/heritage.vue index dacff13..359e619 100644 --- a/pkg_product/views/heritage.vue +++ b/pkg_product/views/heritage.vue @@ -1,7 +1,7 @@