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
components/FunctionGuide.vue
+1 -1
View File
@@ -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 {
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
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)
},
pkg_product/views/famousList.vue
+134 -5
View File
@@ -25,7 +25,7 @@
class="img"
mode="widthFix"
/>
<view v-if="list.length > 0" class="province-wrap">
<view v-if="list.length > 0" class="province-wrap" id="province-wrap">
<view
:class="toggleStatus ? 'isopen' : ''"
class="list"
@@ -85,7 +85,7 @@
{{ item.intro }}
</view>
<view class="pic-wrap">
<view v-if="item.countyTotal < 7" class="one-list">
<view v-if="item.countyTotal < 7" class="one-list" :id="'more-list-wrap' + index">
<view
v-for="(county) in item.county"
:key="county.id"
@@ -107,7 +107,7 @@
</view>
</view>
</view>
<view v-else class="more-list-wrap">
<view v-else class="more-list-wrap" :id="'more-list-wrap' + index">
<view class="more-list">
<view
v-for="(county) in item.oddList"
@@ -174,6 +174,7 @@
:show-avatar="false"
/>
</view>
<FunctionGuide :maxStep="2" :guideData="functionGuideData" ref="FunctionGuide"></FunctionGuide>
</view>
</template>
@@ -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
pkg_product/views/famousQianxianShop.vue
+133 -5
View File
@@ -328,7 +328,7 @@
class="bg"
/>
<view class="card-cont">
<view class="tab-wrap">
<view class="tab-wrap" id="tab-wrap">
<view
v-for="(tab, tabIndex) in industryTab"
:key="tabIndex"
@@ -579,7 +579,7 @@
</view>
</view>
</view>
<view v-if="!item.productId" class="v12-white v12-radius-20 f-wrap" @click="goStore(item)" style="height: 516rpx">
<view v-if="!item.productId" :id="'farmer' + index" class="v12-white v12-radius-20 f-wrap" @click="goStore(item)" style="height: 516rpx">
<view>
<view class="focus-img">
<image :src="item.cover" v-if="item.coverType === 1" class="img" mode="heightFix|widthFix"></image>
@@ -640,6 +640,7 @@
@changeFun="changeFun"
@ok="handleOk"
/>
<FunctionGuide :maxStep="2" :guideData="functionGuideData" ref="FunctionGuide"></FunctionGuide>
</view>
</template>
@@ -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
pkg_product/views/healthList.vue
+75 -2
View File
@@ -72,7 +72,7 @@
@click="changeTab(1)"
/>
</view> -->
<view class="v12-justify-start v12-align-center news-wrap v12-radius-100">
<view class="v12-justify-start v12-align-center news-wrap v12-radius-100" id="news-wrap">
<view class="v12-font-bold v12-primary v12-white-text v12-mr-2 v12-pa-2 v12-radius-100 news-title">最新展会</view>
<swiper vertical class="text-swpier " autoplay circular duration="500" interval="3000" >
<swiper-item v-for="(item, index) in sanctum" :key="index" class="v12-align-center" @click="toExpo(item.id)">
@@ -161,6 +161,7 @@
</view>
</view>
</view>
<FunctionGuide :maxStep="1" :guideData="functionGuideData" ref="FunctionGuide"></FunctionGuide>
</view>
</template>
@@ -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
pkg_product/views/heritage.vue
+74 -12
View File
@@ -1,7 +1,7 @@
<template>
<view class="pkg-product-heritage">
<image style="width: 100%" :src="topImage" mode="widthFix" />
<view class="main-box">
<view class="main-box" id="main-box">
<image style="width: 100%" :src="backgroundImage" mode="widthFix" />
<view
class="item"
@@ -15,29 +15,27 @@
:src="item.image"
:class="{ unlink: !item.isLink }"
/>
<!-- <view
class="v12-text-center v12-white-text v12-radius-80 v12-px-1 title"
:class="{
'v12-primary': item.isLink,
'un-actived': !item.isLink,
}"
>
{{ item.title }}</view
> -->
</view>
</view>
<FunctionGuide :maxStep="1" :guideData="functionGuideData" ref="FunctionGuide"></FunctionGuide>
</view>
</template>
<script>
import { getICH } from "@/api/product";
import { pageListenMixins } from "@/mixins/pageListenMixins";
import FunctionGuide from '@/components/FunctionGuide'
import GuideMixins from '@/mixins/GuideMixins'
export default {
name: "HeritagePage",
mixins: [pageListenMixins],
components: {
FunctionGuide
},
mixins: [pageListenMixins, GuideMixins],
data() {
return {
webUrl: this.$VUE_APP_RESOURCES_URL,
contents: [],
topImage: "",
backgroundImage: "",
@@ -54,6 +52,70 @@ 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('#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: ; */
},
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',
},
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',
},
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`,
}
})
})
return
} else {
return
}
},
init() {
getICH().then(({ data }) => {
this.contents = data.contents;
pkg_product/views/heritage/details.vue
+130 -2
View File
@@ -17,8 +17,8 @@
<view class="v12-font-26 v12-font-bold v12-dark-text intro-text">{{ details.intro }}</view>
</view>
<view class="tabs v12-my-3 v12-font-32 v12-font-bold">
<view class="tab-btn" :class="{ 'v12-primary': actived === 1, 'v12-white-text': actived === 1 }" @click="handleTab(1)">{{details.pageA.title}}</view>
<view class="tab-btn v12-ml-3" :class="{ 'v12-primary': actived === 2, 'v12-white-text': actived === 2 }" @click="handleTab(2)">{{details.pageB.title}}</view>
<view id="tab-btn1" class="tab-btn" :class="{ 'v12-primary': actived === 1, 'v12-white-text': actived === 1 }" @click="handleTab(1)">{{details.pageA.title}}</view>
<view id="tab-btn2" class="tab-btn v12-ml-3" :class="{ 'v12-primary': actived === 2, 'v12-white-text': actived === 2 }" @click="handleTab(2)">{{details.pageB.title}}</view>
</view>
<view class="pageA" v-show="actived === 1">
<view class="intro" style="white-space: break-spaces;">
@@ -68,12 +68,18 @@
/>
</view>
</view>
<FunctionGuide :maxStep="2" :guideData="functionGuideData" ref="FunctionGuide"></FunctionGuide>
</view>
</template>
<script>
import { getIchContent } from '@/api/heritage'
import FunctionGuide from '@/components/FunctionGuide'
import GuideMixins from '@/mixins/GuideMixins'
export default {
components: {
FunctionGuide
},
data() {
return {
webUrl: this.$VUE_APP_RESOURCES_URL,
@@ -82,11 +88,133 @@ export default {
details: {}
}
},
mixins: [GuideMixins],
onLoad(opts) {
this.id = opts.id
this.getDetails()
},
methods: {
showFunctionGuide() {
if(this._step == this.functionGuideData.step) return
if(this.functionGuideData.step == 1) {
this._step = this.functionGuideData.step
this.getElementData('#tab-btn1', res=>{
const imgs = [
{
url: this.webUrl + '/引导页素材/非遗技艺/Group 2/Group 2-1.png',
style: {
position: 'absolute',
zIndex: 99,
width: '405rpx',
top: 360*2+'rpx',
left: res.left*2+'rpx',
height: '218rpx',
/* px: ; */
},
isBtn: false
},
{
url: this.webUrl + '/引导页素材/非遗技艺/Group 2/Group 2-2.png',
style: {
position: 'absolute',
zIndex: 99,
width: '117rpx',
top: 470*2+'rpx',
left: 0*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: 470*2+'rpx',
left: 240*2+'rpx',
height: '47rpx',
},
isBtn: 'next'
},
]
this.setFunctionGuideData({
imgs: imgs,
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',
}
})
})
return
} else {
this._step = this.functionGuideData.step
this.getElementData('#tab-btn2', res=>{
const imgs = [
{
url: this.webUrl + '/引导页素材/非遗技艺/Group 3/Group 3-1.png',
style: {
position: 'absolute',
zIndex: 99,
width: '496rpx',
top: 360*2+'rpx',
left: 60+'rpx',
height: '183rpx',
/* px: ; */
},
isBtn: false
},
{
url: this.webUrl + '/引导页素材/非遗技艺/Group 3/Group 3-2.png',
style: {
position: 'absolute',
zIndex: 99,
width: '117rpx',
top: 450*2+'rpx',
left: -150*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: 450*2+'rpx',
left: 160*2+'rpx',
height: '47rpx',
},
isBtn: 'next'
},
]
this.setFunctionGuideData({
imgs: imgs,
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',
}
})
})
return
}
},
viewImg(item) {
uni.previewImage({
current: item.image, // 当前显示图片的http链接
wenwan/views/storeList.vue
+11 -11
View File
@@ -84,28 +84,28 @@ export default {
this._step = this.functionGuideData.step
const imgs = [
{
url: this.webUrl + '/引导页素材/文玩艺术/Group2/Group 2-1.png',
url: this.webUrl + '/引导页素材/文玩艺术/Group 2/Group 2-1.png',
style: {
position: 'absolute',
zIndex: 99,
width: '357rpx',
top: '100rpx',
left: '-110rpx',
width: '425rpx',
top: 0*2+'rpx',
left: 50*2+'rpx',
right: 0,
margin: 'auto',
height: '382rpx',
height: '213rpx',
/* px: ; */
},
isBtn: false
},
{
url: this.webUrl + '/引导页素材/文玩艺术/Group2/Group 2-2.png',
url: this.webUrl + '/引导页素材/文玩艺术/Group 2/Group 2-2.png',
style: {
position: 'absolute',
zIndex: 99,
width: '117rpx',
top: 125*2+'rpx',
left: -120*2+'rpx',
top: 75*2+'rpx',
left: 0*2+'rpx',
right: 0,
margin: 'auto',
height: '46rpx',
@@ -113,13 +113,13 @@ export default {
isBtn: 'jump'
},
{
url: this.webUrl + '/引导页素材/文玩艺术/Group2/Group 2-3.png',
url: this.webUrl + '/引导页素材/文玩艺术/Group 2/Group 2-3.png',
style: {
position: 'absolute',
zIndex: 99,
width: '117rpx',
top: 125*2+'rpx',
left: 170*2+'rpx',
top: 75*2+'rpx',
left: 240*2+'rpx',
height: '46rpx',
},
isBtn: 'next'