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
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链接