666 lines
18 KiB
Vue
666 lines
18 KiB
Vue
<template>
|
|
<view class="county-index">
|
|
<view class="search-wrap">
|
|
<view class="search-inner">
|
|
<input
|
|
v-model="keyword"
|
|
type="text"
|
|
placeholder="请输入关键词县名~"
|
|
placeholder-style="color:#949494"
|
|
class="inp"
|
|
@confirm="handlerSearch"
|
|
>
|
|
<view class="btn" @click="handlerSearch">
|
|
搜索
|
|
<image
|
|
:src="webUrl + '/home/icon-search4.png'"
|
|
class="icon"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="top-img">
|
|
<image
|
|
:src="countyFamousTopImage"
|
|
class="img"
|
|
mode="widthFix"
|
|
:lazy-load="true"
|
|
/>
|
|
<view v-if="list.length > 0" class="province-wrap" id="province-wrap">
|
|
<view
|
|
:class="toggleStatus ? 'isopen' : ''"
|
|
class="list"
|
|
>
|
|
<view
|
|
v-for="(item, index) in list"
|
|
:key="index"
|
|
class="item"
|
|
@click="provinceItemToViewHandle(item)"
|
|
>
|
|
<image
|
|
:src="item.icon"
|
|
class="img"
|
|
:lazy-load="true"
|
|
/>
|
|
<view class="name one-t">
|
|
{{ item.provinceName }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view
|
|
class="toggle-wrap"
|
|
v-if="list.length > 6"
|
|
@click="toggleStatusHandle"
|
|
>
|
|
<view v-if="!toggleStatus">
|
|
<view>展</view>
|
|
<view>开</view>
|
|
</view>
|
|
<view v-else>
|
|
<view>收</view>
|
|
<view>起</view>
|
|
</view>
|
|
<image
|
|
:src="webUrl + '/page/qianxian/icon-06.png'"
|
|
class="icon"
|
|
:lazy-load="true"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="list-wrap">
|
|
<view v-if="isLoad">
|
|
<view v-if="list.length > 0" class="list-cont">
|
|
<view
|
|
v-for="(item, index) in list"
|
|
:key="index"
|
|
:class="'province__' + item.provinceId"
|
|
class="item"
|
|
>
|
|
<view class="name">
|
|
<view class="txt">
|
|
<text class="txt-inner">
|
|
{{ item.provinceName }}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
<view v-if="item.intro" class="desc">
|
|
{{ item.intro }}
|
|
</view>
|
|
<view class="pic-wrap">
|
|
<view v-if="item.countyTotal < 7" class="one-list" :id="'more-list-wrap' + index">
|
|
<view
|
|
v-for="(county) in item.county"
|
|
:key="county.id"
|
|
class="county-item"
|
|
@click="countyItemClick(county)"
|
|
>
|
|
<image
|
|
:src="county.logo"
|
|
class="county-img"
|
|
:lazy-load="true"
|
|
/>
|
|
<view class="county-name">
|
|
<image
|
|
:src="webUrl + '/home/icon-location.png'"
|
|
class="icon"
|
|
:lazy-load="true"
|
|
/>
|
|
<view class="county-txt one-t">
|
|
{{ county.countyName }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-else class="more-list-wrap" :id="'more-list-wrap' + index">
|
|
<view class="more-list">
|
|
<view
|
|
v-for="(county) in item.oddList"
|
|
:key="county.id"
|
|
class="county-item"
|
|
@click="countyItemClick(county)"
|
|
>
|
|
<image
|
|
:src="county.logo"
|
|
class="county-img"
|
|
:lazy-load="true"
|
|
/>
|
|
<view class="county-name">
|
|
<image
|
|
:src="webUrl + '/home/icon-location.png'"
|
|
class="icon"
|
|
:lazy-load="true"
|
|
/>
|
|
<view class="county-txt one-t">
|
|
{{ county.countyName }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="more-list">
|
|
<view
|
|
v-for="(county) in item.evenList"
|
|
:key="county.id"
|
|
class="county-item"
|
|
@click="countyItemClick(county)"
|
|
>
|
|
<image
|
|
:src="county.logo"
|
|
class="county-img"
|
|
:lazy-load="true"
|
|
/>
|
|
<view class="county-name">
|
|
<image
|
|
:src="webUrl + '/home/icon-location.png'"
|
|
class="icon"
|
|
:lazy-load="true"
|
|
/>
|
|
<view class="county-txt one-t">
|
|
{{ county.countyName }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<image
|
|
v-if="!searchEvent"
|
|
:src="webUrl + '/home/no-data-bg.png'"
|
|
mode="widthFix"
|
|
class="loadend"
|
|
:lazy-load="true"
|
|
/>
|
|
</view>
|
|
<image
|
|
v-if="list.length === 0"
|
|
:src="webUrl + '/orderIcon/nodata.png'"
|
|
class="img-nodata v12-mt-16"
|
|
mode="scaleToFill"
|
|
:lazy-load="true"
|
|
/>
|
|
</view>
|
|
<goo-skeleton
|
|
v-else
|
|
:show-avatar="false"
|
|
/>
|
|
</view>
|
|
<FunctionGuide :maxStep="4" @hide="setGuide('countyFamousIndex')" :guideData="functionGuideData" ref="FunctionGuide"></FunctionGuide>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { famousShareImage } from '@/api/share'
|
|
import {
|
|
getCountyFamousIndex,
|
|
getCountyFamousCityTree
|
|
} from '@/api/qianxian'
|
|
import { mapGetters } from 'vuex'
|
|
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',
|
|
components: {
|
|
FunctionGuide
|
|
},
|
|
mixins: [pageListenMixins, GuideMixins],
|
|
data() {
|
|
return {
|
|
webUrl: this.$VUE_APP_RESOURCES_URL,
|
|
keyword: '',
|
|
shareData: {},
|
|
partnerId: null,
|
|
countyFamousTopImage: '',
|
|
toggleStatus: false,
|
|
isLoad: false,
|
|
list: [],
|
|
pageKeyId: Object.freeze('countyFamousIndex'),
|
|
searchEvent: false
|
|
}
|
|
},
|
|
computed: mapGetters(['userInfo', 'isLogin']),
|
|
onShareAppMessage() {
|
|
uni.updateShareMenu({
|
|
isPrivateMessage: false,
|
|
withShareTicket: false
|
|
})
|
|
return {
|
|
title: '探寻有趣有味的生活方式',
|
|
path: '/pkg_product/views/famousList?partnerId=' + this.userInfo.uid,
|
|
imageUrl: this.shareData
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
if (options.partnerId) {
|
|
this.partnerId = options.partnerId || null
|
|
} else {
|
|
const obj = uni.getEnterOptionsSync()
|
|
if (options.scene != null || obj.query.scene != null) {
|
|
const query = options ? decodeURIComponent(options.scene) : decodeURIComponent(obj.query.scene)
|
|
this.partnerId = getUrlParam(query, 'partnerId') || null
|
|
}
|
|
}
|
|
if (this.partnerId) {
|
|
cookie.set('spread', this.partnerId)
|
|
userBindParent({spread: parseInt(this.partnerId)})
|
|
}
|
|
this.init()
|
|
this.queryGuide('countyFamousIndex')
|
|
},
|
|
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 + 'px',
|
|
left: res.left + 'px',
|
|
width: `${res.width}px`,
|
|
height: `${res.height}px`,
|
|
}
|
|
})
|
|
})
|
|
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 + 'px',
|
|
left: res.left + 'px',
|
|
width: `${res.width}px`,
|
|
height: `${res.height}px`,
|
|
}
|
|
})
|
|
})
|
|
return
|
|
} else {
|
|
this.$refs.FunctionGuide.show = false
|
|
}
|
|
return
|
|
}
|
|
},
|
|
handlerSearch() {
|
|
if(this.keyword) {
|
|
this.searchEvent = true
|
|
} else {
|
|
this.searchEvent = false
|
|
}
|
|
this.getListReq()
|
|
},
|
|
init() {
|
|
// 分享数据
|
|
famousShareImage().then(res => {
|
|
this.shareData = res.data
|
|
})
|
|
// 顶部图片
|
|
getCountyFamousIndex().then(res => {
|
|
const { success, data } = res
|
|
if (success) {
|
|
this.countyFamousTopImage = data.countyFamousTopImage || ''
|
|
}
|
|
})
|
|
// 列表数据
|
|
this.getListReq()
|
|
},
|
|
toggleStatusHandle() {
|
|
this.toggleStatus = !this.toggleStatus
|
|
},
|
|
getListReq() {
|
|
this.isLoad = false
|
|
getCountyFamousCityTree({
|
|
keyword: this.keyword || ''
|
|
}).then(res => {
|
|
const { success, data } = res
|
|
if (success) {
|
|
this.list = data || []
|
|
this.list.map(item => {
|
|
const total = item.county.length || 0
|
|
item.countyTotal = total
|
|
// 偶数列
|
|
item.evenList = []
|
|
// 奇数列
|
|
item.oddList = []
|
|
if (total >= 7) {
|
|
item.county.map((county, countyIndex) => {
|
|
if (countyIndex % 2 === 0) {
|
|
item.oddList.push(county)
|
|
}
|
|
if (countyIndex % 2 === 1) {
|
|
item.evenList.push(county)
|
|
}
|
|
})
|
|
}
|
|
})
|
|
this.isLoad = true
|
|
}
|
|
})
|
|
},
|
|
provinceItemToViewHandle(item) {
|
|
const query = uni.createSelectorQuery().in(this)
|
|
query.select(`.province__${item.provinceId}`).boundingClientRect(data => {
|
|
if (data) {
|
|
uni.pageScrollTo({
|
|
scrollTop: data.top || 0,
|
|
duration: 200
|
|
})
|
|
}
|
|
}).exec()
|
|
},
|
|
countyItemClick(item) {
|
|
if (!item.hasShopPage) return
|
|
uni.navigateTo({ url: `/pkg_product/views/famousQianxianShop?id=${item.id}` })
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.county-index {
|
|
position: relative;
|
|
min-height: 100vh;
|
|
background-color: #f0f0f0;
|
|
.search-wrap {
|
|
padding: 20rpx 50rpx;
|
|
background-color: #fff;
|
|
.search-inner {
|
|
display: flex;
|
|
padding: 8rpx;
|
|
border-radius: 40px;
|
|
border: 2px solid #379748;
|
|
.inp {
|
|
flex: 1;
|
|
height: 64rpx;
|
|
padding: 0 20rpx 0 30rpx;
|
|
line-height: 84rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
.btn {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 64rpx;
|
|
padding: 0 30rpx;
|
|
border-radius: 32rpx;
|
|
color: #fff;
|
|
font-size: 28rpx;
|
|
line-height: 28rpx;
|
|
background-color: #379748;
|
|
.icon {
|
|
display: block;
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
margin: 0 0 0 8rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.top-img {
|
|
position: relative;
|
|
z-index: 5;
|
|
.img {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
.province-wrap {
|
|
position: absolute;
|
|
left: 30rpx;
|
|
right: 30rpx;
|
|
top: 260rpx;
|
|
display: flex;
|
|
padding: 30rpx 20rpx 30rpx 30rpx;
|
|
border-radius: 20rpx;
|
|
background-color: #fff;
|
|
box-shadow: 0rpx 6rpx 12rpx rgba(0,0,0,0.16);
|
|
.list {
|
|
display: flex;
|
|
overflow-x: auto;
|
|
.item {
|
|
flex-shrink: 0;
|
|
margin: 0 20rpx 0 0;
|
|
.img {
|
|
display: block;
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
border-radius: 8rpx;
|
|
}
|
|
.name {
|
|
width: 80rpx;
|
|
padding: 10rpx 0 0 0;
|
|
font-size: 24rpx;
|
|
color: #333;
|
|
text-align: center;
|
|
}
|
|
}
|
|
&.isopen {
|
|
flex-wrap: wrap;
|
|
.item {
|
|
margin: 0 20rpx 20rpx 0;
|
|
}
|
|
}
|
|
}
|
|
.toggle-wrap {
|
|
padding: 0 0 0 20rpx;
|
|
.icon {
|
|
display: block;
|
|
width: 24rpx;
|
|
height: 20rpx;
|
|
margin: 6rpx auto;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.list-wrap {
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
.list-cont {
|
|
position: relative;
|
|
z-index: 2;
|
|
padding: 80rpx 30rpx 30rpx 30rpx;
|
|
background-color: #F0F0F0;
|
|
.item {
|
|
padding: 30rpx 0 20rpx 30rpx;
|
|
margin: 0 0 30rpx 0;
|
|
border-radius: 20rpx;
|
|
background-color: #fff;
|
|
box-shadow: 0rpx 6rpx 12rpx rgba(0,0,0,0.16);
|
|
.name {
|
|
display: flex;
|
|
padding: 0 30rpx 0 0;
|
|
font-size: 44rpx;
|
|
line-height: 44rpx;
|
|
color: #333;
|
|
.txt {
|
|
position: relative;
|
|
&::after {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: 1;
|
|
width: 100%;
|
|
height: 6rpx;
|
|
border-radius: 6rpx;
|
|
content: " ";
|
|
background: linear-gradient(90deg, #C52733 0%, rgba(202,56,67,0.92) 51%, rgba(255,255,255,0) 100%);
|
|
}
|
|
.txt-inner {
|
|
position: relative;
|
|
z-index: 2;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
.desc {
|
|
padding: 20rpx 30rpx 0 0;
|
|
font-size: 24rpx;
|
|
color: #aaa;
|
|
}
|
|
.pic-wrap {
|
|
position: relative;
|
|
padding: 30rpx 0 0 0;
|
|
.county-item {
|
|
position: relative;
|
|
flex-shrink: 0;
|
|
margin: 0 16rpx 0 0;
|
|
.county-img {
|
|
display: block;
|
|
width: 168rpx;
|
|
height: 168rpx;
|
|
border-radius: 16rpx;
|
|
}
|
|
.county-name {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 5;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
width: 168rpx;
|
|
height: 60rpx;
|
|
padding: 0 16rpx 16rpx 16rpx;
|
|
border-radius: 0rpx 0rpx 16rpx 16rpx;
|
|
box-sizing: border-box;
|
|
font-size: 24rpx;
|
|
line-height: 28rpx;
|
|
color: #fff;
|
|
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000000 100%);
|
|
.icon {
|
|
display: block;
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
margin: 0 10rpx 0 0;
|
|
}
|
|
.county-txt {
|
|
width: 90rpx;
|
|
}
|
|
}
|
|
}
|
|
.one-list {
|
|
display: flex;
|
|
overflow-x: auto;
|
|
}
|
|
.more-list-wrap {
|
|
overflow-x: auto;
|
|
}
|
|
.more-list + .more-list {
|
|
margin: 16rpx 0 0 0;
|
|
}
|
|
.more-list {
|
|
display: flex;
|
|
}
|
|
}
|
|
}
|
|
.loadend {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
.img-nodata {
|
|
position: relative;
|
|
top: 40rpx;
|
|
left: 50%;
|
|
transform: translate(-50%, 0);
|
|
width: 352rpx;
|
|
height: 338rpx;
|
|
}
|
|
</style>
|