Refactor(千县名品):模块首页和县主页界面使用新版UI调整
This commit is contained in:
lifizer
+420
-202
@@ -1,51 +1,179 @@
|
||||
<template>
|
||||
<view class="pkg-product-list">
|
||||
<view class="search-box flex jc-between ai-center">
|
||||
<input type="text" v-model="keyword" placeholder="搜索商品" placeholder-style="color:#949494" @confirm="search">
|
||||
<image class="icon" :src="webUrl+'/20220903142935869059.png'" mode="scaleToFill" @click="search"></image>
|
||||
</view>
|
||||
|
||||
<swiper class="swiper-box" indicator-dots indicator-color="rgba(255,255,255,.3)" indicator-active-color="#fff"
|
||||
autoplay circular v-if="bannerList.length>0">
|
||||
<swiper-item v-for="(item,index) in bannerList" :key="index">
|
||||
<image :src="item.pic" mode="scaleToFill" @click="$global.commonJump(item.uniappUrl)"/>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
|
||||
<image class="banner" :src="webUrl+'/20230220024816081525.png'" mode="scaleToFill" @click="goStory"/>
|
||||
|
||||
<view class="nav-box flex">
|
||||
<view class="item" :class="{'active':index===navIndex}" v-for="(item,index) in navList" :key="index"
|
||||
@click="navTap(index)">{{ item.value }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="section-title bold">千县名品榜单</view>
|
||||
|
||||
<view class="list flex flex-wrap">
|
||||
<view class="item" v-for="(item,index) in dataList" :key="index" @click="goGoods(item.id)">
|
||||
<image class="label" :src="webUrl+'/20230222133041781911.png'"/>
|
||||
<image class="cover" :src="item.image" mode="scaleToFill"/>
|
||||
<view class="name bold one-t">{{ item.storeName }}</view>
|
||||
<view class="price">￥
|
||||
<text class="bold">{{ item.price }}</text>
|
||||
<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="getListReq"
|
||||
>
|
||||
<view class="btn" @click="getListReq">
|
||||
搜索
|
||||
<image
|
||||
:src="webUrl + '/home/icon-search4.png'"
|
||||
class="icon"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<image class="img-nodata" :src="webUrl+'/20231023131208675588.png'" mode="scaleToFill"
|
||||
v-if="dataList.length===0"/>
|
||||
</view>
|
||||
<view class="top-img">
|
||||
<image
|
||||
:src="countyFamousTopImage"
|
||||
class="img"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<view v-if="list.length > 0" class="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"
|
||||
/>
|
||||
<view class="name one-t">
|
||||
{{ item.provinceName }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="toggle-wrap"
|
||||
@click="toggleStatusHandle"
|
||||
>
|
||||
<view v-if="!toggleStatus">
|
||||
<view>展</view>
|
||||
<view>开</view>
|
||||
</view>
|
||||
<view v-else>
|
||||
<view>收</view>
|
||||
<view>起</view>
|
||||
</view>
|
||||
</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">
|
||||
{{ item.provinceName }}
|
||||
</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">
|
||||
<view
|
||||
v-for="(county) in item.county"
|
||||
:key="county.id"
|
||||
class="county-item"
|
||||
@click="countyItemClick(county)"
|
||||
>
|
||||
<image
|
||||
:src="county.logo"
|
||||
class="county-img"
|
||||
/>
|
||||
<view class="county-name">
|
||||
<image
|
||||
:src="webUrl + '/home/icon-location.png'"
|
||||
class="icon"
|
||||
/>
|
||||
<view class="county-txt one-t">
|
||||
{{ county.countyName }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="more-list-wrap">
|
||||
<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"
|
||||
/>
|
||||
<view class="county-name">
|
||||
<image
|
||||
:src="webUrl + '/home/icon-location.png'"
|
||||
class="icon"
|
||||
/>
|
||||
<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"
|
||||
/>
|
||||
<view class="county-name">
|
||||
<image
|
||||
:src="webUrl + '/home/icon-location.png'"
|
||||
class="icon"
|
||||
/>
|
||||
<view class="county-txt one-t">
|
||||
{{ county.countyName }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<image
|
||||
v-if="list.length === 0"
|
||||
:src="webUrl + '/20231023131208675588.png'"
|
||||
class="img-nodata"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
</view>
|
||||
<goo-skeleton
|
||||
v-else
|
||||
:show-avatar="false"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {countyFamous} from '@/api/product'
|
||||
import {getProducts} from '@/api/store'
|
||||
import {famousShareImage} from '@/api/share'
|
||||
import {mapGetters} from 'vuex'
|
||||
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 { userBindParent } from '@/api/user'
|
||||
import { getUrlParam } from '@/utils/common.js'
|
||||
import { pageListenMixins } from '@/mixins/pageListenMixins'
|
||||
|
||||
export default {
|
||||
@@ -55,206 +183,296 @@ export default {
|
||||
return {
|
||||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||||
keyword: '',
|
||||
page: 1,
|
||||
bannerList: [],
|
||||
dataList: [],
|
||||
navList: [],
|
||||
navIndex: 0,
|
||||
shareData: {},
|
||||
partnerId: null,
|
||||
countyFamousTopImage: '',
|
||||
toggleStatus: false,
|
||||
isLoad: false,
|
||||
list: [],
|
||||
pageKeyId: Object.freeze('countyFamousIndex')
|
||||
}
|
||||
},
|
||||
computed: mapGetters(['userInfo', 'isLogin']),
|
||||
onShareAppMessage() {
|
||||
return new Promise(async (resolve, reject) => {
|
||||
const {status, data} = await famousShareImage();
|
||||
if (status === 200) {
|
||||
resolve({
|
||||
title: '探寻有趣有味的生活方式',
|
||||
path: '/pkg_product/views/famousList?partnerId=' + this.userInfo.uid,
|
||||
imageUrl: data
|
||||
})
|
||||
}
|
||||
})
|
||||
return {
|
||||
title: '探寻有趣有味的生活方式',
|
||||
path: '/pkg_product/views/famousList?partnerId=' + this.userInfo.uid,
|
||||
imageUrl: this.shareData
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
if (options.partnerId) {
|
||||
this.partnerId = options.partnerId || null;
|
||||
this.partnerId = options.partnerId || null
|
||||
} else {
|
||||
let obj = uni.getEnterOptionsSync();
|
||||
const obj = uni.getEnterOptionsSync()
|
||||
if (options.scene != null || obj.query.scene != null) {
|
||||
let query = options ? decodeURIComponent(options.scene) : decodeURIComponent(obj.query.scene);
|
||||
this.partnerId = getUrlParam(query, 'partnerId') || 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)});
|
||||
cookie.set('spread', this.partnerId)
|
||||
userBindParent({spread: parseInt(this.partnerId)})
|
||||
}
|
||||
|
||||
countyFamous().then(({data}) => {
|
||||
this.bannerList = data.banner;
|
||||
this.navList = data.countyFamousAreaList;
|
||||
this.search();
|
||||
})
|
||||
},
|
||||
onReachBottom() {
|
||||
this.page++;
|
||||
this.fetchList();
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
search() {
|
||||
this.page = 1;
|
||||
this.dataList = [];
|
||||
this.fetchList();
|
||||
init() {
|
||||
// 分享数据
|
||||
famousShareImage().then(res => {
|
||||
this.shareData = res.data
|
||||
})
|
||||
// 顶部图片
|
||||
getCountyFamousIndex().then(res => {
|
||||
const { success, data } = res
|
||||
if (success) {
|
||||
this.countyFamousTopImage = data.countyFamousTopImage || ''
|
||||
}
|
||||
})
|
||||
// 列表数据
|
||||
this.getListReq()
|
||||
},
|
||||
navTap(index) {
|
||||
if (index === this.navIndex) return;
|
||||
this.navIndex = index;
|
||||
this.search();
|
||||
toggleStatusHandle() {
|
||||
this.toggleStatus = !this.toggleStatus
|
||||
},
|
||||
fetchList() {
|
||||
let param = {
|
||||
isCountyFamous: 1,
|
||||
page: this.page,
|
||||
limit: 10,
|
||||
keyword: this.keyword,
|
||||
countyFamousArea: this.navList.length > 0 ? this.navList[this.navIndex].key : ""
|
||||
}
|
||||
|
||||
getProducts(param).then(({data}) => {
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
this.dataList.push(data[i]);
|
||||
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
|
||||
}
|
||||
})
|
||||
},
|
||||
goGoods(id) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/shop/GoodsCon/index?id=${id}&from=famous`
|
||||
})
|
||||
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()
|
||||
},
|
||||
goStory() {
|
||||
uni.navigateTo({
|
||||
url: '/pkg_product/views/famousStory'
|
||||
})
|
||||
countyItemClick(item) {
|
||||
uni.navigateTo({ url: `/pkg_product/views/famousQianxian?id=${item.id}` })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import "@/assets/css/product.less";
|
||||
|
||||
.pkg-product-list {
|
||||
.county-index {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
padding-top: 16rpx;
|
||||
background: #fff;
|
||||
color: #333;
|
||||
|
||||
.swiper-box {
|
||||
margin: 18rpx 32rpx 0;
|
||||
}
|
||||
|
||||
.banner {
|
||||
width: 686rpx;
|
||||
height: 160rpx;
|
||||
margin: 20rpx 32rpx 0;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
margin: 0 32rpx 20rpx;
|
||||
font-size: 32rpx;
|
||||
line-height: 42rpx;
|
||||
}
|
||||
|
||||
.nav-box {
|
||||
width: 718rpx;
|
||||
box-sizing: border-box;
|
||||
margin: 26rpx 32rpx;
|
||||
overflow-x: auto;
|
||||
|
||||
.item {
|
||||
margin-right: 50rpx;
|
||||
color: #7D7D7D;
|
||||
font-size: 26rpx;
|
||||
line-height: 38rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.active {
|
||||
position: relative;
|
||||
color: #333;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.active:after {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 6rpx;
|
||||
border-radius: 30px;
|
||||
background: #FF564A;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-box::-webkit-scrollbar {
|
||||
width: 0 !important
|
||||
}
|
||||
|
||||
.list {
|
||||
padding: 0 32rpx 32rpx;
|
||||
|
||||
.item {
|
||||
position: relative;
|
||||
width: 332rpx;
|
||||
margin: 0 22rpx 24rpx 0;
|
||||
|
||||
.label {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 72rpx;
|
||||
height: 60rpx;
|
||||
}
|
||||
|
||||
.cover {
|
||||
width: 332rpx;
|
||||
height: 332rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.name {
|
||||
background-color: #fff;
|
||||
.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;
|
||||
margin: 4rpx 0;
|
||||
font-size: 34rpx;
|
||||
line-height: 48rpx;
|
||||
}
|
||||
|
||||
.price {
|
||||
color: #DA0000;
|
||||
padding: 0 20rpx 0 30rpx;
|
||||
line-height: 84rpx;
|
||||
font-size: 28rpx;
|
||||
line-height: 36rpx;
|
||||
|
||||
.bold {
|
||||
font-size: 34rpx;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item:nth-child(2n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
.top-img {
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
.img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.img-nodata {
|
||||
position: relative;
|
||||
top: 40rpx;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
width: 352rpx;
|
||||
height: 338rpx;
|
||||
.province-wrap {
|
||||
position: absolute;
|
||||
left: 30rpx;
|
||||
right: 30rpx;
|
||||
bottom: -50rpx;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
.list-cont {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
padding: 80rpx 30rpx 30rpx 30rpx;
|
||||
background-color: #F0F0F0;
|
||||
.item + .item {
|
||||
margin: 30rpx 0 0 0;
|
||||
}
|
||||
.item {
|
||||
padding: 30rpx 0 20rpx 30rpx;
|
||||
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;
|
||||
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%);
|
||||
}
|
||||
}
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.img-nodata {
|
||||
position: relative;
|
||||
top: 40rpx;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
width: 352rpx;
|
||||
height: 338rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,260 @@
|
||||
<template>
|
||||
<view class="pkg-product-list">
|
||||
<view class="search-box flex jc-between ai-center">
|
||||
<input type="text" v-model="keyword" placeholder="搜索商品" placeholder-style="color:#949494" @confirm="search">
|
||||
<image class="icon" :src="webUrl+'/20220903142935869059.png'" mode="scaleToFill" @click="search"></image>
|
||||
</view>
|
||||
|
||||
<swiper class="swiper-box" indicator-dots indicator-color="rgba(255,255,255,.3)" indicator-active-color="#fff"
|
||||
autoplay circular v-if="bannerList.length>0">
|
||||
<swiper-item v-for="(item,index) in bannerList" :key="index">
|
||||
<image :src="item.pic" mode="scaleToFill" @click="$global.commonJump(item.uniappUrl)"/>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
|
||||
<image class="banner" :src="webUrl+'/20230220024816081525.png'" mode="scaleToFill" @click="goStory"/>
|
||||
|
||||
<view class="nav-box flex">
|
||||
<view class="item" :class="{'active':index===navIndex}" v-for="(item,index) in navList" :key="index"
|
||||
@click="navTap(index)">{{ item.value }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="section-title bold">千县名品榜单</view>
|
||||
|
||||
<view class="list flex flex-wrap">
|
||||
<view class="item" v-for="(item,index) in dataList" :key="index" @click="goGoods(item.id)">
|
||||
<image class="label" :src="webUrl+'/20230222133041781911.png'"/>
|
||||
<image class="cover" :src="item.image" mode="scaleToFill"/>
|
||||
<view class="name bold one-t">{{ item.storeName }}</view>
|
||||
<view class="price">￥
|
||||
<text class="bold">{{ item.price }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<image class="img-nodata" :src="webUrl+'/20231023131208675588.png'" mode="scaleToFill"
|
||||
v-if="dataList.length===0"/>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {countyFamous} from '@/api/product'
|
||||
import {getProducts} from '@/api/store'
|
||||
import {famousShareImage} from '@/api/share'
|
||||
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'
|
||||
|
||||
export default {
|
||||
name: 'FamousList',
|
||||
mixins: [pageListenMixins],
|
||||
data() {
|
||||
return {
|
||||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||||
keyword: '',
|
||||
page: 1,
|
||||
bannerList: [],
|
||||
dataList: [],
|
||||
navList: [],
|
||||
navIndex: 0,
|
||||
partnerId: null,
|
||||
pageKeyId: Object.freeze('countyFamousIndex')
|
||||
}
|
||||
},
|
||||
computed: mapGetters(['userInfo', 'isLogin']),
|
||||
onShareAppMessage() {
|
||||
return new Promise(async (resolve, reject) => {
|
||||
const {status, data} = await famousShareImage();
|
||||
if (status === 200) {
|
||||
resolve({
|
||||
title: '探寻有趣有味的生活方式',
|
||||
path: '/pkg_product/views/famousList?partnerId=' + this.userInfo.uid,
|
||||
imageUrl: data
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
onLoad(options) {
|
||||
if (options.partnerId) {
|
||||
this.partnerId = options.partnerId || null;
|
||||
} else {
|
||||
let obj = uni.getEnterOptionsSync();
|
||||
if (options.scene != null || obj.query.scene != null) {
|
||||
let 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)});
|
||||
}
|
||||
|
||||
countyFamous().then(({data}) => {
|
||||
this.bannerList = data.banner;
|
||||
this.navList = data.countyFamousAreaList;
|
||||
this.search();
|
||||
})
|
||||
},
|
||||
onReachBottom() {
|
||||
this.page++;
|
||||
this.fetchList();
|
||||
},
|
||||
methods: {
|
||||
search() {
|
||||
this.page = 1;
|
||||
this.dataList = [];
|
||||
this.fetchList();
|
||||
},
|
||||
navTap(index) {
|
||||
if (index === this.navIndex) return;
|
||||
this.navIndex = index;
|
||||
this.search();
|
||||
},
|
||||
fetchList() {
|
||||
let param = {
|
||||
isCountyFamous: 1,
|
||||
page: this.page,
|
||||
limit: 10,
|
||||
keyword: this.keyword,
|
||||
countyFamousArea: this.navList.length > 0 ? this.navList[this.navIndex].key : ""
|
||||
}
|
||||
|
||||
getProducts(param).then(({data}) => {
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
this.dataList.push(data[i]);
|
||||
}
|
||||
})
|
||||
},
|
||||
goGoods(id) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/shop/GoodsCon/index?id=${id}&from=famous`
|
||||
})
|
||||
},
|
||||
goStory() {
|
||||
uni.navigateTo({
|
||||
url: '/pkg_product/views/famousStory'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import "@/assets/css/product.less";
|
||||
|
||||
.pkg-product-list {
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
padding-top: 16rpx;
|
||||
background: #fff;
|
||||
color: #333;
|
||||
|
||||
.swiper-box {
|
||||
margin: 18rpx 32rpx 0;
|
||||
}
|
||||
|
||||
.banner {
|
||||
width: 686rpx;
|
||||
height: 160rpx;
|
||||
margin: 20rpx 32rpx 0;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
margin: 0 32rpx 20rpx;
|
||||
font-size: 32rpx;
|
||||
line-height: 42rpx;
|
||||
}
|
||||
|
||||
.nav-box {
|
||||
width: 718rpx;
|
||||
box-sizing: border-box;
|
||||
margin: 26rpx 32rpx;
|
||||
overflow-x: auto;
|
||||
|
||||
.item {
|
||||
margin-right: 50rpx;
|
||||
color: #7D7D7D;
|
||||
font-size: 26rpx;
|
||||
line-height: 38rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.active {
|
||||
position: relative;
|
||||
color: #333;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.active:after {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 6rpx;
|
||||
border-radius: 30px;
|
||||
background: #FF564A;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-box::-webkit-scrollbar {
|
||||
width: 0 !important
|
||||
}
|
||||
|
||||
.list {
|
||||
padding: 0 32rpx 32rpx;
|
||||
|
||||
.item {
|
||||
position: relative;
|
||||
width: 332rpx;
|
||||
margin: 0 22rpx 24rpx 0;
|
||||
|
||||
.label {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 72rpx;
|
||||
height: 60rpx;
|
||||
}
|
||||
|
||||
.cover {
|
||||
width: 332rpx;
|
||||
height: 332rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.name {
|
||||
height: 64rpx;
|
||||
margin: 4rpx 0;
|
||||
font-size: 34rpx;
|
||||
line-height: 48rpx;
|
||||
}
|
||||
|
||||
.price {
|
||||
color: #DA0000;
|
||||
font-size: 28rpx;
|
||||
line-height: 36rpx;
|
||||
|
||||
.bold {
|
||||
font-size: 34rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item:nth-child(2n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.img-nodata {
|
||||
position: relative;
|
||||
top: 40rpx;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
width: 352rpx;
|
||||
height: 338rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,189 @@
|
||||
<template>
|
||||
<view class="county-index">
|
||||
<view v-if="isLoad">
|
||||
<view class="top-img" @click="gotoQianxianShop">
|
||||
<image
|
||||
:src="countyFamous.cover"
|
||||
class="img"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<view class="info-wrap">
|
||||
<view class="name">
|
||||
{{ countyFamous.countyName }}
|
||||
<view v-if="countyFamous.content" class="content">
|
||||
{{ countyFamous.content }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="intro">
|
||||
{{ countyFamous.intro }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list-wrap">
|
||||
<view v-if="isLoad">
|
||||
<view class="list-cont">
|
||||
<view class="list-cont-left">
|
||||
<view
|
||||
v-for="(item, index) in leftList"
|
||||
:key="index"
|
||||
class="item flex"
|
||||
>
|
||||
<xdd-product-item
|
||||
:item="item"
|
||||
:show-coupon="false"
|
||||
name-key="productName"
|
||||
image-key="productImage"
|
||||
price-key="productPrice"
|
||||
@view="goGoodsCon(item)"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list-cont-right">
|
||||
<view
|
||||
v-for="(item, index) in rightList"
|
||||
:key="index"
|
||||
class="item flex"
|
||||
>
|
||||
<xdd-product-item
|
||||
:item="item"
|
||||
:show-coupon="false"
|
||||
name-key="productName"
|
||||
image-key="productImage"
|
||||
price-key="productPrice"
|
||||
@view="goGoodsCon(item)"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<goo-skeleton
|
||||
v-else
|
||||
:show-avatar="false"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<goo-skeleton
|
||||
v-else
|
||||
:show-avatar="false"
|
||||
/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getCountyFamousCityDetail
|
||||
} from '@/api/qianxian'
|
||||
import { pageListenMixins } from '@/mixins/pageListenMixins'
|
||||
import XddProductItem from '@/components/xdd-product-item'
|
||||
|
||||
export default {
|
||||
name: 'FamousQianxian',
|
||||
components: {
|
||||
XddProductItem
|
||||
},
|
||||
mixins: [pageListenMixins],
|
||||
data() {
|
||||
return {
|
||||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||||
isLoad: false,
|
||||
countyFamous: {},
|
||||
leftList: [],
|
||||
rightList: [],
|
||||
pageKeyId: Object.freeze('countyFamousIndex')
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
const id = options.id || ''
|
||||
this.init(id)
|
||||
},
|
||||
methods: {
|
||||
init(id) {
|
||||
this.isLoad = false
|
||||
getCountyFamousCityDetail(id).then(res => {
|
||||
const { success, data } = res
|
||||
if (success) {
|
||||
this.countyFamous = data
|
||||
const products = data.products || []
|
||||
products.map((item, index) => {
|
||||
item.isOldBrand = 0
|
||||
item.isLandmarkGoods = 0
|
||||
item.isCountyFamous = 1
|
||||
if (index % 2 === 0) {
|
||||
this.leftList.push(item)
|
||||
}
|
||||
if (index % 2 === 1) {
|
||||
this.rightList.push(item)
|
||||
}
|
||||
})
|
||||
this.isLoad = true
|
||||
}
|
||||
})
|
||||
},
|
||||
gotoQianxianShop() {
|
||||
uni.navigateTo({ url: `/pkg_product/views/famousQianxianShop?id=${this.countyFamous.id}` })
|
||||
},
|
||||
goGoodsCon(item) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/shop/GoodsCon/index?id=${item.productId}&from=famous`
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.county-index {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
background-color: #fff;
|
||||
.top-img {
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
padding: 21rpx;
|
||||
.img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
.info-wrap {
|
||||
padding: 30rpx 0 0 0;
|
||||
.name {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
font-size: 36rpx;
|
||||
line-height: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
.content {
|
||||
margin: 0 0 0 8rpx;
|
||||
font-size: 24rpx;
|
||||
color: #aaa;
|
||||
}
|
||||
}
|
||||
.intro {
|
||||
padding: 20rpx 0 0 0;
|
||||
font-size: 24rpx;
|
||||
color: #333;
|
||||
text-indent: 2em;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.list-cont {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 21rpx 21rpx 21rpx;
|
||||
background-color: #F0F0F0;
|
||||
.list-cont-left,
|
||||
.list-cont-right {
|
||||
width: calc(50% - 11rpx);
|
||||
}
|
||||
.item {
|
||||
position: relative;
|
||||
margin: 21rpx 0 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user