liangxin/xdd-uniapp-new
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix(全国特产):[#1538]城市列表界面去掉二级三级分类，直接展示所有数据方便运营推广

Browse Source
This commit is contained in:
lifizer
2024-05-16 18:07:33 +08:00
parent 84c5ede725
commit 4cfb053573
2 changed files with 287 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pkg_product/views/nativeList.vue
+91 -87
View File
@@ -2,143 +2,134 @@
<view class="pkg-product-list">
<view class="top-box">
<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"
<input
v-model="keyword"
type="text"
placeholder="搜索商品"
placeholder-style="color:#949494"
@confirm="search"
>
<image
class="icon"
:src="webUrl+'/20220903142935869059.png'"
mode="scaleToFill"
@click="search"></image>
</view>
<u-tabs :list="tabList" keyName="cateName" lineColor="#D30808"
:activeStyle="{color:'#FFFFFF',fontWeight:'bold'}"
:inactiveStyle="{color:'rgba(255,255,255,.6)'}"
lineWidth="120rpx" @click="tabsTap"></u-tabs>
</view>
<view class="body-box">
<view class="aside-box flex-0">
<view class="item flex jc-center ai-center" :class="index === asideIndex ? 'active' : ''"
v-for="(item, index) in asideList" :key="index" @click="asideTap(index)">
<text class="one-t">{{ item.cateName }}</text>
</view>
</view>
<view class="article-box">
<view class="line-location flex ai-center">
<image :src="webUrl+'/20220903142929759087.png'" mode="scaleToFill"></image>
<!-- @click="goCity"-->
<text class="bold">当前城市：{{ cityName }}</text>
</view>
<scroll-view class="list flex flex-wrap" :style="{'height':listHeight}" :enable-flex="true"
<view class="body-box">
<view class="article-box">
<scroll-view
:style="{'height':listHeight}"
:enable-flex="true"
:scroll-anchoring="true"
:scroll-y="true"
:scroll-with-animation="true" :enable-back-to-top="true" @scrolltolower="onLower">
<view class="item" @click="$global.navToGoods(item.id)" v-for="(item, index) in dataList"
:key="index">
<image class="cover" :src="item.image" mode="scaleToFill"/>
: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"
class="item"
@click="$global.navToGoods(item.id)"
>
<image
:src="item.image"
class="cover"
mode="scaleToFill"
/>
<view class="name more-t">{{ item.storeName }}</view>
<view class="price bold">￥{{ item.price }}</view>
</view>
</scroll-view>
<image class="img-nodata" :src="webUrl+'/20231023131208675588.png'" mode="scaleToFill" v-if="dataList.length===0"/>
<image
v-if="dataList.length === 0"
:src="webUrl + '/20231023131208675588.png'"
class="img-nodata"
mode="scaleToFill"
/>
</view>
</view>
</view>
</template>
<script>
import {fetchNormal, getCategory} from "@/api/store";
import { fetchNormal, getCategory } from "@/api/store"
export default {
name: "nativeList",
name: 'NativeListPage',
data() {
return {
webUrl: this.$VUE_APP_RESOURCES_URL,
keyword: "",
asideList: [],
asideIndex: 0,
dataList: [], // 列表数据
tabList: [],
keyword: '',
dataList: [],
cityId: null,
cityName: "",
cityName: '',
page: 1,
listHeight: "auto"
listHeight: 'auto',
loading: false
}
},
onLoad(option) {
this.cityId = option.cityId;
this.init();
this.cityId = option.cityId
this.init()
},
methods: {
goCity() {
uni.redirectTo({
url: `/pages/chose-city/chose-city?type=0&city=${this.cityName}`
})
},
init() {
getCategory(0, 35, this.cityId, true).then(({data}) => {
this.tabList = data;
this.asideList = data[0].children;
let memCityName = uni.getStorageSync("cityName")
const memCityName = uni.getStorageSync('cityName')
if (memCityName.length) {
this.cityName = memCityName;
uni.removeStorageSync("cityName")
this.cityName = memCityName
uni.removeStorageSync('cityName')
}
this.search();
});
this.search()
},
onLower() {
this.page++;
this.search();
if (this.loading) {
return
}
this.page++
this.search()
},
search() {
let that = this;
let param = {
const _this = this
_this.loading = true
fetchNormal({
isGood: 1,
page: this.page,
keyword: this.keyword,
cityName: this.cityName,
sid: this.asideList[this.asideIndex].id
};
fetchNormal(param).then(({data}) => {
if (this.page === 1) {
this.dataList = [];
page: _this.page,
keyword: _this.keyword,
cityName: _this.cityName
}).then(({data}) => {
if (_this.page === 1) {
_this.dataList = []
}
this.dataList = this.dataList.concat(data);
_this.dataList = _this.dataList.concat(data)
_this.loading = false
uni.getSystemInfo({
success: function (res) {
let len = that.dataList.length;
let {windowHeight} = res;
that.listHeight = "auto";
const len = _this.dataList.length
const { windowHeight } = res
_this.listHeight = 'auto'
if (windowHeight > 600 && len > 6) {
that.listHeight = "100%";
_this.listHeight = '100%'
}
if (windowHeight <= 600 && len > 4) {
that.listHeight = "100%";
_this.listHeight = '100%'
}
}
});
})
}).catch(err => {
_this.loading = false
uni.showToast({
title: err + '',
icon: 'none',
mask: false,
duration: 1500
});
})
},
tabsTap(item) {
this.asideList = item.children;
this.asideIndex = 0;
this.page = 1;
this.search();
},
asideTap(index) {
this.asideIndex = index;
this.page = 1;
this.search();
})
}
}
}
@@ -152,13 +143,16 @@ export default {
overflow-y: hidden;
.top-box {
height: 142rpx;
height: 82rpx;
background: #FF564A;
}
.line-location {
height: 90rpx;
padding: 20rpx;
box-sizing: border-box;
font-size: 28rpx;
background-color: #fff;
image {
width: 36rpx;
@@ -168,11 +162,21 @@ export default {
}
.body-box {
height: calc(100vh - 142rpx);
height: calc(100vh - 82rpx - 90rpx);
box-sizing: border-box;
.article-box {
width: 100%;
.list {
padding: 0 0 20rpx 0;
}
.item {
height: 362rpx;
width: 345rpx;
height: 455rpx;
.cover {
width: 345rpx;
height: 345rpx;
}
}
}
}
pkg_product/views/nativeList_bak20240516.vue
+189
View File
@@ -0,0 +1,189 @@
<template>
<view class="pkg-product-list">
<view class="top-box">
<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>
<u-tabs :list="tabList" keyName="cateName" lineColor="#D30808"
:activeStyle="{color:'#FFFFFF',fontWeight:'bold'}"
:inactiveStyle="{color:'rgba(255,255,255,.6)'}"
lineWidth="120rpx" @click="tabsTap"></u-tabs>
</view>
<view class="body-box">
<view class="aside-box flex-0">
<view class="item flex jc-center ai-center" :class="index === asideIndex ? 'active' : ''"
v-for="(item, index) in asideList" :key="index" @click="asideTap(index)">
<text class="one-t">{{ item.cateName }}</text>
</view>
</view>
<view class="article-box">
<view class="line-location flex ai-center">
<image :src="webUrl+'/20220903142929759087.png'" mode="scaleToFill"></image>
<!-- @click="goCity"-->
<text class="bold">当前城市：{{ cityName }}</text>
</view>
<scroll-view class="list flex flex-wrap" :style="{'height':listHeight}" :enable-flex="true"
:scroll-anchoring="true"
:scroll-y="true"
:scroll-with-animation="true" :enable-back-to-top="true" @scrolltolower="onLower">
<view class="item" @click="$global.navToGoods(item.id)" v-for="(item, index) in dataList"
:key="index">
<image class="cover" :src="item.image" mode="scaleToFill"/>
<view class="name more-t">{{ item.storeName }}</view>
<view class="price bold">￥{{ item.price }}</view>
</view>
</scroll-view>
<image class="img-nodata" :src="webUrl+'/20231023131208675588.png'" mode="scaleToFill" v-if="dataList.length===0"/>
</view>
</view>
</view>
</template>
<script>
import {fetchNormal, getCategory} from "@/api/store";
export default {
name: "nativeList",
data() {
return {
webUrl: this.$VUE_APP_RESOURCES_URL,
keyword: "",
asideList: [],
asideIndex: 0,
dataList: [], // 列表数据
tabList: [],
cityId: null,
cityName: "",
page: 1,
listHeight: "auto"
}
},
onLoad(option) {
this.cityId = option.cityId;
this.init();
},
methods: {
goCity() {
uni.redirectTo({
url: `/pages/chose-city/chose-city?type=0&city=${this.cityName}`
})
},
init() {
getCategory(0, 35, this.cityId, true).then(({data}) => {
this.tabList = data;
this.asideList = data[0].children;
let memCityName = uni.getStorageSync("cityName")
if (memCityName.length) {
this.cityName = memCityName;
uni.removeStorageSync("cityName")
}
this.search();
});
},
onLower() {
this.page++;
this.search();
},
search() {
let that = this;
let param = {
isGood: 1,
page: this.page,
keyword: this.keyword,
cityName: this.cityName,
sid: this.asideList[this.asideIndex].id
};
fetchNormal(param).then(({data}) => {
if (this.page === 1) {
this.dataList = [];
}
this.dataList = this.dataList.concat(data);
uni.getSystemInfo({
success: function (res) {
let len = that.dataList.length;
let {windowHeight} = res;
that.listHeight = "auto";
if (windowHeight > 600 && len > 6) {
that.listHeight = "100%";
}
if (windowHeight <= 600 && len > 4) {
that.listHeight = "100%";
}
}
});
}).catch(err => {
uni.showToast({
title: err + '',
icon: 'none',
mask: false,
duration: 1500
});
})
},
tabsTap(item) {
this.asideList = item.children;
this.asideIndex = 0;
this.page = 1;
this.search();
},
asideTap(index) {
this.asideIndex = index;
this.page = 1;
this.search();
}
}
}
</script>
<style scoped lang="less">
@import "@/assets/css/product.less";
.pkg-product-list {
height: 100vh;
overflow-y: hidden;
.top-box {
height: 142rpx;
background: #FF564A;
}
.line-location {
padding: 20rpx;
font-size: 28rpx;
image {
width: 36rpx;
height: 36rpx;
margin-right: 4rpx;
}
}
.body-box {
height: calc(100vh - 142rpx);
.article-box {
.item {
height: 362rpx;
}
}
}
.img-nodata {
position: relative;
top: 200rpx;
left: 50%;
transform: translate(-50%, 0);
width: 352rpx;
height: 338rpx;
}
}
</style>