455 lines
12 KiB
Vue
455 lines
12 KiB
Vue
<template>
|
|
<view class="pkg-product-land-mark">
|
|
<view v-if="isLoad">
|
|
<view class="top-wrap">
|
|
<view class="top-box">
|
|
<view class="nav flex" id="nav-dibiao">
|
|
<view
|
|
v-for="(item,index) in navList"
|
|
:key="index"
|
|
:class="{
|
|
'active': navIndex === index
|
|
}"
|
|
class="flex flex-0 ai-center nav-item"
|
|
@click="changeNav(index)"
|
|
>
|
|
<image
|
|
:src="webUrl + '/home/landmark-icon.png'"
|
|
class="bg"
|
|
/>
|
|
{{ item.provinceName }}
|
|
</view>
|
|
</view>
|
|
<view class="view-box">
|
|
<view class="map-box">
|
|
<image
|
|
:src="mapData.mapImage"
|
|
mode="widthFix"
|
|
class="img-map"
|
|
/>
|
|
</view>
|
|
<view class="share-btn" @click="toShare"><u-icon name="share-square" color="#C52733"></u-icon>分享给好友</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view
|
|
class="middle-img-wrap"
|
|
>
|
|
<image
|
|
v-if="mapData.middleImage"
|
|
:src="mapData.middleImage"
|
|
mode="widthFix"
|
|
class="img"
|
|
/>
|
|
<view class="tabs-wrap">
|
|
<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" id="list-wrap">
|
|
<view v-if="actived === 1">
|
|
<projects :landmarkDataId="landmarkDataId" :info="mapData.serviceInfo"></projects>
|
|
</view>
|
|
<view v-if="actived === 2">
|
|
<culture :landmarkDataId="landmarkDataId"></culture>
|
|
</view>
|
|
<view v-if="actived === 3">
|
|
<information :landmarkDataId="landmarkDataId"></information>
|
|
</view>
|
|
<view v-if="actived === 4">
|
|
<goods :goods="goods" v-if="goods.length > 0" @add='addToCart($event, "productId")'></goods>
|
|
<!-- <image
|
|
v-if="isCompleteLoadGood"
|
|
:src="webUrl + '/home/no-data-bg.png'"
|
|
mode="widthFix"
|
|
class="loadend"
|
|
/> -->
|
|
<view class="v12-px-6" >
|
|
<u-divider :text="goods.length === 0 ? ' · 暂无数据 · ' : ' · 已经到底啦 · '" textPosition="center"></u-divider>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
<goo-skeleton
|
|
v-else
|
|
:show-avatar="false"
|
|
/>
|
|
<shareImg ref="shareImg"></shareImg>
|
|
<ProductWindow
|
|
ref="attrWindow"
|
|
:attr="attr"
|
|
:cartNum="cart_num"
|
|
:showOk="true"
|
|
@changeFun="changeFun"
|
|
@ok="handleOk"
|
|
/>
|
|
<FunctionGuide @hide="setGuide('landmarkGoodsIndex')" :maxStep="2" :guideData="functionGuideData" ref="FunctionGuide"></FunctionGuide>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
getProvince,
|
|
getProvinceGoods,
|
|
getProvinceList
|
|
} from "@/api/product"
|
|
import goods from "./components/goods.vue"
|
|
import { pageListenMixins } from '@/mixins/pageListenMixins'
|
|
import goCartMixin from '@/mixins/goCartMixins'
|
|
import projects from './components/projects.vue'
|
|
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: {
|
|
goods,
|
|
projects,
|
|
culture,
|
|
information,
|
|
shareImg,
|
|
ProductWindow,
|
|
FunctionGuide
|
|
},
|
|
mixins: [pageListenMixins, goCartMixin, GuideMixins],
|
|
data() {
|
|
return {
|
|
actived: 1,
|
|
tabs: [
|
|
{name: '项目', value: 1},
|
|
{name: '文化', value: 2},
|
|
{name: '资讯', value: 3},
|
|
{name: '产品', value: 4},
|
|
],
|
|
webUrl: this.$VUE_APP_RESOURCES_URL,
|
|
keyword: '',
|
|
isLoad: false,
|
|
page: 1,
|
|
navList: [],
|
|
navIndex: 0,
|
|
mapData: null,
|
|
goods: [],
|
|
isCompleteLoadGood: false,
|
|
pageKeyId: Object.freeze('landmarkGoodsIndex'),
|
|
posterImageStatus: false,
|
|
sceneId: null
|
|
}
|
|
},
|
|
computed: {
|
|
landmarkDataId() {
|
|
return this.navList[this.navIndex] ? this.navList[this.navIndex]['id'] : null
|
|
}
|
|
},
|
|
onLoad(opts) {
|
|
console.log('进入地标页');
|
|
console.log(opts, '地标opts');
|
|
if(opts && opts.scene) {
|
|
console.log(opts.scene, 'opts.scene');
|
|
this.sceneId = decodeURIComponent(opts.scene).split('&')[0].split('=')[1]
|
|
}
|
|
this.getNavList()
|
|
this.queryGuide('landmarkGoodsIndex')
|
|
},
|
|
onHide() {
|
|
this.pageToHideHandle()
|
|
},
|
|
onReachBottom() {
|
|
if (this.isCompleteLoadGood) {
|
|
return
|
|
}
|
|
this.page++
|
|
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 + 'px',
|
|
left: res.left + 'px',
|
|
width: `${res.width}px`,
|
|
height: `${res.height}px`,
|
|
}
|
|
})
|
|
})
|
|
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: {
|
|
bottom: 0,
|
|
left: res.left + 'px',
|
|
width: `${res.width}px`,
|
|
height: `${(res.height) + 41}px`,
|
|
}
|
|
})
|
|
})
|
|
return
|
|
}
|
|
return
|
|
}
|
|
},
|
|
toShare() {
|
|
this.$refs.shareImg.savePosterPath(this.landmarkDataId)
|
|
},
|
|
handleTab(value) {
|
|
this.actived = value
|
|
},
|
|
getNavList() {
|
|
getProvinceList().then(({data}) => {
|
|
this.navList = data
|
|
if(this.sceneId) {
|
|
this.navIndex = this.navList.map(e => +e.id).indexOf(+this.sceneId)
|
|
console.log(this.navIndex, 'navIndex');
|
|
}
|
|
this.changeNav(this.navIndex)
|
|
})
|
|
},
|
|
changeNav(index) {
|
|
this.navIndex = index
|
|
this.page = 1
|
|
this.goods = []
|
|
this.isCompleteLoadGood = false
|
|
this.actived = 1
|
|
this.getMap()
|
|
this.fetchGoods()
|
|
},
|
|
getMap() {
|
|
const id = this.navList[this.navIndex]['id']
|
|
getProvince(id).then(({data}) => {
|
|
this.mapData = data || {}
|
|
this.isLoad = true
|
|
})
|
|
},
|
|
fetchGoods() {
|
|
const id = this.navList[this.navIndex]['id']
|
|
getProvinceGoods(id, this.keyword, this.page).then(({data}) => {
|
|
const len = data.length
|
|
for (let i = 0; i < len; i++) {
|
|
this.goods.push(data[i])
|
|
}
|
|
if (len === 0 || len < 10) {
|
|
this.isCompleteLoadGood = true
|
|
}
|
|
})
|
|
},
|
|
goGoods(id) {
|
|
uni.navigateTo({
|
|
url: `/pages/shop/GoodsCon/index?id=${id}&from=landmark`
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.share-btn{
|
|
color: #C52733;
|
|
background: rgba(211,92,101,0.5);
|
|
font-size: 24rpx;
|
|
width: fit-content;
|
|
padding: 8rpx 10rpx;
|
|
border-radius: 20rpx 0 0 20rpx;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 80%;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.tabs-wrap{
|
|
display: flex;
|
|
justify-content: space-around;
|
|
padding: 20rpx 20rpx 0;
|
|
color: #333;
|
|
font-weight: bold;
|
|
font-size: 36rpx;
|
|
}
|
|
.tab-item{
|
|
|
|
}
|
|
.tab-actived{
|
|
color: #fff;
|
|
font-weight: bold;
|
|
background: linear-gradient(to right, #C52733 0%, rgba(211,92,101,0.91) 54%, rgba(255,255,255,0.62) 100%);
|
|
border-radius: 38rpx 0rpx 0 38rpx;
|
|
padding: 0 20rpx;
|
|
}
|
|
.top-wrap{
|
|
padding: 20rpx 20rpx 0;
|
|
}
|
|
.pkg-product-land-mark {
|
|
background: #f0f0f0;
|
|
min-height: 100vh;
|
|
.top-box {
|
|
border-radius: 20rpx;
|
|
background-color: #fff;
|
|
.view-box {
|
|
position: relative;
|
|
padding: 20rpx;
|
|
border-radius: 20rpx;
|
|
overflow: hidden;
|
|
.img-map {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
}
|
|
.nav {
|
|
padding: 20rpx 20rpx 0 20rpx;
|
|
overflow-x: scroll;
|
|
.nav-item + .nav-item {
|
|
margin: 0 0 0 20rpx;
|
|
}
|
|
.nav-item {
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
padding: 0 32rpx 20rpx 0;
|
|
color: #333;
|
|
font-size: 32rpx;
|
|
.bg {
|
|
display: none;
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 6rpx;
|
|
width: 63rpx;
|
|
height: 42rpx;
|
|
}
|
|
}
|
|
.active {
|
|
font-size: 40rpx;
|
|
font-weight: bold;
|
|
.bg {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.middle-img-wrap {
|
|
margin: 20rpx 0 0 0;
|
|
background: #fff;
|
|
padding: 20rpx;
|
|
.img {
|
|
display: block;
|
|
width: 100%;
|
|
border-radius: 20rpx;
|
|
}
|
|
}
|
|
.img-nodata {
|
|
position: relative;
|
|
top: 0;
|
|
left: 50%;
|
|
transform: translate(-50%, 0);
|
|
width: 352rpx;
|
|
height: 338rpx;
|
|
margin-bottom: 60rpx;
|
|
}
|
|
}
|
|
.loadend {
|
|
width: 100%;
|
|
}
|
|
</style> |