479 lines
12 KiB
Vue
479 lines
12 KiB
Vue
<template>
|
|
<view class="pkg-product-list">
|
|
<view class="first-half">
|
|
<view class="v12-px-3 v12-mb-4">
|
|
<!-- <image
|
|
:src="webUrl+'/20220903142935869059.png'"
|
|
class="icon v12-mr-3"
|
|
mode="scaleToFill"
|
|
@click="searchClick"
|
|
/>
|
|
<input
|
|
v-model="keyword"
|
|
type="text"
|
|
placeholder-style="color:#949494"
|
|
@confirm="searchClick"
|
|
> -->
|
|
<u-search
|
|
:showAction="false"
|
|
v-model="keyword"
|
|
bgColor="#f2f2f2"
|
|
placeholder="搜索城市"
|
|
searchIconColor="#C52733"
|
|
@search="searchClick"></u-search>
|
|
</view>
|
|
<swiper
|
|
v-if="bannerList.length > 0"
|
|
indicator-dots
|
|
indicator-color="rgba(255,255,255,.3)"
|
|
indicator-active-color="#fff"
|
|
autoplay
|
|
circular
|
|
class="swiper-box"
|
|
>
|
|
<swiper-item
|
|
v-for="(item, index) in bannerList"
|
|
:key="index"
|
|
>
|
|
<image
|
|
:src="item.image"
|
|
mode="scaleToFill"
|
|
@click="toExpo(item.exhibitionId)"
|
|
/>
|
|
</swiper-item>
|
|
</swiper>
|
|
<!-- <view
|
|
v-show="tabIndex === 0"
|
|
class="tab-box flex jc-center ai-center"
|
|
>
|
|
<image
|
|
src="/static/images/v6/btn_active_left.png"
|
|
class="active"
|
|
@click="changeTab(0)"
|
|
/>
|
|
<image
|
|
src="/static/images/v6/btn_right.png"
|
|
class="inactive"
|
|
@click="changeTab(1)"
|
|
/>
|
|
</view>
|
|
<view
|
|
v-show="tabIndex === 1"
|
|
class="tab-box flex jc-center ai-center"
|
|
>
|
|
<image
|
|
src="/static/images/v6/btn_left.png"
|
|
class="inactive"
|
|
@click="changeTab(0)"
|
|
/>
|
|
<image
|
|
src="/static/images/v6/btn_active_right.png"
|
|
class="active"
|
|
@click="changeTab(1)"
|
|
/>
|
|
</view> -->
|
|
<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)">
|
|
<text class="v12-font-28 v12-dark-text one-t" >{{ item.name }}</text>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
</view>
|
|
<view class="body-box">
|
|
<view class="aside-box flex-0">
|
|
<view
|
|
v-for="(item, index) in asideList"
|
|
:key="index"
|
|
:class="index === asideIndex ? 'actived' : ''"
|
|
class="item flex jc-center ai-center "
|
|
@click="asideTap(index, item.label)"
|
|
>
|
|
<text class="one-t">{{ item.label }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="article-box">
|
|
<view class="v12-mt-2 v12-ml-3 v12-px-1 v12-font-28 v12-dark-text v12-font-bold label-wrap">{{ label }}</view>
|
|
<scroll-view
|
|
v-if="dataList.length > 0"
|
|
:style="{'height':listHeight}"
|
|
:enable-flex="true"
|
|
:scroll-anchoring="true"
|
|
:scroll-y="true"
|
|
:scroll-with-animation="true"
|
|
:enable-back-to-top="true"
|
|
class="list flex flex-wrap"
|
|
@scrolltolower="onLower"
|
|
>
|
|
<view
|
|
v-for="(item, index) in dataList"
|
|
:key="index"
|
|
>
|
|
<view
|
|
v-if="tabIndex === 0"
|
|
class="city-item"
|
|
@click="goStore(item.id, item.cityName)"
|
|
>
|
|
<image
|
|
:src="item.icon"
|
|
class="cover"
|
|
mode="scaleToFill"
|
|
/>
|
|
<!-- <view class="name one-t">{{ item.content }}</view> -->
|
|
<view class="store flex ai-center" style="width: 100%;">
|
|
<!-- <image
|
|
:src="item.logo"
|
|
class="flex-0"
|
|
mode="scaleToFill"
|
|
/> -->
|
|
<view class="one-t v12-font-28 v12-mt-3" style="color: #033333">{{ item.cityName }}</view>
|
|
</view>
|
|
</view>
|
|
<!-- <view
|
|
v-else
|
|
class="item"
|
|
@click="goGoods(item.id)"
|
|
>
|
|
<image
|
|
:src="item.image"
|
|
class="cover"
|
|
mode="scaleToFill"
|
|
/>
|
|
<view class="name more-t">{{ item.storeName }}</view>
|
|
<view class="price">￥{{ item.price }}</view>
|
|
</view> -->
|
|
</view>
|
|
</scroll-view>
|
|
<view class="tc" v-else>
|
|
<image
|
|
v-if="tabIndex === 0"
|
|
:src="webUrl+'/20240106205121705480.png'"
|
|
class="img-nodata"
|
|
mode="scaleToFill"
|
|
/>
|
|
<image
|
|
v-else
|
|
:src="webUrl+'/20240219170514226953.png'"
|
|
class="img-nodata"
|
|
mode="scaleToFill"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<FunctionGuide :maxStep="1" @hide="setGuide('wellnessFoodIndex')" :guideData="functionGuideData" ref="FunctionGuide"></FunctionGuide>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
// 康养食材
|
|
import { fetchCity } from '@/api/wenwan'
|
|
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',
|
|
components: {
|
|
FunctionGuide
|
|
},
|
|
mixins: [pageListenMixins, GuideMixins],
|
|
data() {
|
|
return {
|
|
webUrl: this.$VUE_APP_RESOURCES_URL,
|
|
tabIndex: 0,
|
|
keyword: '',
|
|
page: 1,
|
|
listHeight: 'auto',
|
|
bannerList: [],
|
|
asideList: [],
|
|
asideIndex: 0,
|
|
dataList: [],
|
|
pageKeyId: Object.freeze('wellnessFoodIndex'),
|
|
label: '',
|
|
sanctum: {}
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.init()
|
|
this.queryGuide('wellnessFoodIndex')
|
|
},
|
|
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,
|
|
position: {
|
|
top: res.top + 'px',
|
|
left: res.left + 'rpx',
|
|
width: `${res.width}px`,
|
|
height: `${res.height}px`,
|
|
}
|
|
})
|
|
})
|
|
return
|
|
} else {
|
|
return
|
|
}
|
|
},
|
|
init() {
|
|
getBanner().then(({data}) => {
|
|
this.bannerList = data
|
|
})
|
|
fetchCity(4).then(({data}) => {
|
|
this.asideList = data.group
|
|
this.label = this.asideList[this.asideIndex].label
|
|
this.searchReq()
|
|
})
|
|
getWellnessExhibition().then(({data}) => {
|
|
this.sanctum = data.records
|
|
})
|
|
},
|
|
toExpo(id) {
|
|
if(!id) return
|
|
uni.navigateTo({
|
|
url: '/pkg_product/views/expoDetails?id=' + id
|
|
})
|
|
},
|
|
changeTab(index) {
|
|
if (this.asideList.length === 0) return
|
|
if (index === this.tabIndex) return
|
|
this.page = 1
|
|
this.dataList = []
|
|
this.tabIndex = index
|
|
this.searchReq()
|
|
},
|
|
onLower() {
|
|
this.page++
|
|
this.searchReq()
|
|
},
|
|
searchClick() {
|
|
// this.page = 1
|
|
// this.searchReq()
|
|
const searchMap = this.asideList.map((e, i) => {
|
|
return e.city.map(_e => {
|
|
return {
|
|
index: i,
|
|
..._e
|
|
}
|
|
})
|
|
}).flat()
|
|
// console.log(searchMap);
|
|
const filterMap = searchMap.filter(el => el.cityName.includes(this.keyword))
|
|
if(filterMap.length === 0) {
|
|
return
|
|
} else {
|
|
this.asideIndex = filterMap[0].index
|
|
this.searchReq()
|
|
}
|
|
|
|
},
|
|
searchReq() {
|
|
let param = {
|
|
page: this.page,
|
|
limit: 10,
|
|
keyword: this.keyword,
|
|
provinceId: this.asideList.length > 0 ? this.asideList[this.asideIndex].provinceId : ''
|
|
}
|
|
if (this.tabIndex === 0) {
|
|
// wellnessPlaceList(param).then(({data}) => {
|
|
// this.handleData(data)
|
|
// })
|
|
this.label = this.asideList[this.asideIndex].label
|
|
this.dataList = this.asideList[this.asideIndex].city
|
|
}
|
|
// else {
|
|
// param.isWellnessFood = 1
|
|
// getProducts(param).then(({data}) => {
|
|
// this.handleData(data)
|
|
// })
|
|
// }
|
|
},
|
|
handleData(data) {
|
|
const that = this
|
|
if (this.page === 1) {
|
|
this.dataList = []
|
|
}
|
|
this.dataList = this.dataList.concat(data)
|
|
uni.getSystemInfo({
|
|
success: function (res) {
|
|
const len = that.dataList.length
|
|
const {windowHeight} = res
|
|
that.listHeight = 'auto'
|
|
if (windowHeight > 600 && len > 4) {
|
|
that.listHeight = '100%'
|
|
}
|
|
if (windowHeight <= 600 && len > 2) {
|
|
that.listHeight = '100%'
|
|
}
|
|
}
|
|
})
|
|
},
|
|
asideTap(index, label) {
|
|
this.asideIndex = index
|
|
this.page = 1
|
|
this.dataList = []
|
|
this.label = label
|
|
this.searchReq()
|
|
},
|
|
goStore(id, name) {
|
|
uni.navigateTo({
|
|
url: '/pkg_product/views/healthSanctum?city=' + id +'&cityName=' + name
|
|
})
|
|
},
|
|
goGoods(id) {
|
|
uni.navigateTo({
|
|
url: '/pages/shop/GoodsCon/index?id=' + id + '&from=wellness'
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
@import "@/assets/css/product.less";
|
|
.text-swpier{
|
|
height: 60rpx;
|
|
width: 100%;
|
|
}
|
|
.cover{
|
|
width: 160rpx !important;
|
|
height: 160rpx !important;
|
|
border-radius: 8rpx;
|
|
}
|
|
.city-item{
|
|
width: 160rpx !important;
|
|
margin: 30rpx 0rpx 0rpx 20rpx;
|
|
}
|
|
.news-title{
|
|
white-space: nowrap;
|
|
}
|
|
.actived, .label-wrap{
|
|
border-left: 6rpx solid #C52733;
|
|
color: #C52733;
|
|
font-weight: bold;
|
|
}
|
|
.news-wrap{
|
|
background: rgba(233,233,233,0.39);
|
|
width: 686rpx;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.pkg-product-list {
|
|
height: 100vh;
|
|
overflow-y: hidden;
|
|
box-sizing: border-box;
|
|
padding-top: 16rpx;
|
|
background: #fff;
|
|
|
|
.first-half {
|
|
height: 612rpx;
|
|
z-index: 20;
|
|
}
|
|
|
|
.search-box {
|
|
margin-bottom: 32rpx;
|
|
}
|
|
|
|
.swiper-box {
|
|
margin-bottom: 32rpx;
|
|
}
|
|
|
|
.tab-box {
|
|
margin: 0 32rpx;
|
|
padding-bottom: 32rpx;
|
|
|
|
.active {
|
|
width: 342rpx;
|
|
height: 96rpx;
|
|
}
|
|
|
|
.inactive {
|
|
width: 342rpx;
|
|
height: 80rpx;
|
|
border-radius: 10rpx;
|
|
box-shadow: 0 0 12px 0 rgba(0, 0, 0, .1);
|
|
}
|
|
}
|
|
|
|
.body-box {
|
|
position: relative;
|
|
height: calc(100vh - 612rpx);
|
|
z-index: 10;
|
|
|
|
.store {
|
|
image {
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
border-radius: 50%;
|
|
vertical-align: middle;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
view {
|
|
color: #333;
|
|
}
|
|
}
|
|
|
|
.article-box {
|
|
padding-bottom: 20rpx;
|
|
}
|
|
|
|
.img-nodata {
|
|
width: 360rpx;
|
|
height: 360rpx;
|
|
vertical-align: middle;
|
|
margin-top: 60rpx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|