odjbin/pupil
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

分类页接口对接

Browse Source
This commit is contained in:
”chenxuelian“
2023-01-06 20:17:38 +08:00
parent 1a379ca8e9
commit ce9d241d05
1 changed files with 76 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

237
packageSearch/goods-category-search/category-index.vue
View File

@@ -62,17 +62,17 @@
:activeStyle="{color: '#15CA65', fontWeight: '400', transform: 'scale(1.05)', size:'14px'}"
lineHeight="4" :current="tabCurrent" @change="tabChange"></u-tabs>
</view>
<scroll-view scroll-y class="goods-list">
<scroll-view scroll-y class="goods-list" @scrolltolower="reachGoodsBottom">
<block v-for="(item1,index1) in goodsList" :key="index1">
<view class="goods-item">
<view class="left">
<view class="image">
<image :src="item1.image" mode="scaleToFill"
<image :src="item1.imageF" mode="scaleToFill"
style="width: 170rpx;height: 100%;"></image>
</view>
<view class="tag">
<view class="tag-content">
<text>{{item.name}}</text>
<text>{{item1.cate_name}}</text>
</view>
</view>
</view>
@@ -81,7 +81,7 @@
<text>{{item1.name}}</text>
</view>
<view class="describe">
<text>{{item1.describe}}</text>
<text>{{item1.title}}</text>
</view>
<view class="publish-date">
<view class="publish-date-box">
@@ -90,13 +90,18 @@
<u-icon size="16" name="clock" color="#A3A3A3" />
</view>
<text style="margin-right: 6rpx;">发布日期</text>
<text>{{item1.date}}</text>
<text>{{item1.pub_time_str}}</text>
</view>
</view>
<view class="tag">
<template v-if="item1.tagList.length">
<view class="tag-content">
<text>{{ item1.feature }}</text>
<text>{{ item1.tagList[0] }}</text>
</view>
</template>
<!-- <view v-for="(tagObject, index) in item1.tagList" class="tag-content">
<text>{{ tagObject }}</text>
</view> -->
</view>
</view>
</view>
@@ -167,153 +172,13 @@
queryParam: '',
showMask: false,
featureMask: false,
categoryList: [{
name: '烘焙宝典',
icon: '/static/classify/sy_icon_hp.png',
active: true
},
{
name: '零食铺子',
icon: '/static/classify/sy_icon_ls.png',
active: false
},
{
name: '饮品大全',
icon: '/static/classify/sy_icon_yp.png',
active: false
},
{
name: '调味菜单',
icon: '/static/classify/sy_icon_tw.png',
active: false
},
{
name: '肉食荟萃',
icon: '/static/classify/sy_icon_rs.png',
active: false
},
{
name: '乳品手册',
icon: '/static/classify/sy_icon_np.png',
active: false
},
{
name: '果蔬地图',
icon: '/static/classify/sy_icon_gs.png',
active: false
},
{
name: '食界新贵',
icon: '/static/classify/sy_icon_sj.png',
active: false
},
{
name: '欢喜盒子',
icon: '/static/classify/sy_icon_hz.png',
active: false
},
{
name: '创意工具',
icon: '/static/classify/sy_icon_cy.png',
active: false
}
],
categoryList: [],
selectedCategory: 0,
tabbar: [
// {
// "name": "蛋糕面包",
// "foods": [{
// "name": "牛角面包",
// "describe": "法国风味糖皮饼干牛角面包早餐食品",
// "image": "/static/category/fl_icon_qb.png",
// "date": '2022-12-04',
// 'feature': '无防腐剂'
// },
// {
// "name": "牛角面包",
// "describe": "法国风味糖皮饼干牛角面包早餐食品",
// "image": "/static/category/fl_icon_qb.png",
// "date": '2022-12-04',
// 'feature': '无防腐剂'
// },
// {
// "name": "牛角面包",
// "describe": "法国风味糖皮饼干牛角面包早餐食品",
// "image": "/static/category/fl_icon_qb.png",
// "date": '2022-12-04',
// 'feature': '无防腐剂'
// },
// {
// "name": "牛角面包",
// "describe": "法国风味糖皮饼干牛角面包早餐食品",
// "image": "",
// "date": '2022-12-04',
// 'feature': '无防腐剂'
// }
// ]
// },
// {
// "name": "糕点卷酥",
// "foods": [{
// "name": "牛角面包",
// "describe": "法国风味糖皮饼干牛角面包早餐食品",
// "image": "/static/category/fl_icon_qb.png",
// "date": '2022-12-04',
// 'feature': '无防腐剂'
// },
// {
// "name": "牛角面包",
// "describe": "法国风味糖皮饼干牛角面包早餐食品",
// "image": "/static/category/fl_icon_qb.png",
// "date": '2022-12-04',
// 'feature': '无防腐剂'
// },
// {
// "name": "牛角面包",
// "describe": "法国风味糖皮饼干牛角面包早餐食品",
// "image": "/static/category/fl_icon_qb.png",
// "date": '2022-12-04',
// 'feature': '无防腐剂'
// }
// ]
// },
// {
// "name": "饼干曲奇",
// "foods": [{
// "name": "牛角面包",
// "describe": "法国风味糖皮饼干牛角面包早餐食品",
// "image": "/static/category/fl_icon_qb.png",
// "date": '2022-12-04',
// 'feature': '无防腐剂'
// },
// {
// "name": "牛角面包",
// "describe": "法国风味糖皮饼干牛角面包早餐食品",
// "image": "/static/category/fl_icon_qb.png",
// "date": '2022-12-04',
// 'feature': '无防腐剂'
// },
// {
// "name": "牛角面包",
// "describe": "法国风味糖皮饼干牛角面包早餐食品",
// "image": "/static/category/fl_icon_qb.png",
// "date": '2022-12-04',
// 'feature': '无防腐剂'
// },
// {
// "name": "牛角面包",
// "describe": "法国风味糖皮饼干牛角面包早餐食品",
// "image": "/static/category/fl_icon_qb.png",
// "date": '2022-12-04',
// 'feature': '无防腐剂'
// }
// ]
// },
],
tabbar: [],
goodsParam: {
sortType: null,
cateId: null,
tagIds: null,
sortType: 0,
cateId: 0,
tagIds: 0,
pageSize: 10,
pageNum: 1
},
@@ -330,7 +195,8 @@
menuItemHeight: 0, // 左边菜单item的高度
tabCurrent: 0, //分类详情 上架时间, // 左边菜单item的高度
tagCurrent: 0, //分类详情 上架时间
imgUrl: ''
imgUrl: '',
isAllData: false
}
},
onLoad() {
@@ -338,6 +204,8 @@
this.searchBarTop = menuButtonInfo.top;
this.searchBarHeight = menuButtonInfo.height;
this.imgUrl = uni.getStorageSync('img_url')
this.goodsList = []
this.isAllData = false
this.getCategoryList()
},
onReady() {
@@ -377,7 +245,7 @@
});
this.selectedCategory = index
this.tabCurrent = 0
this.tagCurrent = null
this.tagCurrent = 0
this.menuCurrent = 0
this.getSeconedCategoryList()
this.showMask = false
@@ -385,7 +253,7 @@
changeSelectedTag(index) {
this.tagCurrent = index
this.featureMask = false
this.getGoodsList()
this.getGoodsList(true)
},
// 点击左边的栏目切换
async swichMenu(index) {
@@ -428,7 +296,7 @@
tabChange(selectTab) {
console.log(selectTab)
this.tabCurrent = selectTab.index;
this.getGoodsList()
this.getGoodsList(true)
},
navigateToSearch() {
uni.navigateTo({
@@ -472,27 +340,56 @@
return item
})
}).finally(_ => {
this.getGoodsList()
this.getGoodsList(true)
})
},
getGoodsList() {
getGoodsList(firstPage) {
this.isAllData = false
const data = {
...this.goodsParam,
sortType: this.tabCurrent + 1,
cateId: this.tabbar.length ? this.tabbar[this.menuCurrent].id : null,
tagIds: this.tagsList.length ? this.tagsList[this.tagCurrent].id : null
cateId: this.tabbar.length ? this.tabbar[this.menuCurrent].id : 0,
tagIds: this.tagsList.length ? this.tagsList[this.tagCurrent].id : 0
}
if (firstPage) {
this.goodsList = []
this.goodsParam.pageNum = 1
}
this.$apiServe.getProductList(data).then(res => {
this.goodsList = res.data.data.map((item, index) => {
item.icon = this.imgUrl + item.icon
return item
if (res.data.data.length > 0) {
res.data.data.map((item, index) => {
item.tagList = item.tags.split(',')
item.imageF = this.imgUrl + item.images
this.goodsList.push(item)
// return item
})
} else {
this.isAllData = true
this.$toast.warn('没有更多数据了')
}
}).finally(_ => {})
},
reachGoodsBottom() {
console.log('-----触底')
//触底事件
if (!this.isAllData) {
uni.showLoading({
title: '加载中'
});
this.goodsParam.pageNum++
this.getGoodsList(false)
} else {
this.$toast.warn('没有更多数据了')
}
setTimeout(() => {
uni.hideLoading()
}, 500)
},
goBack() {
uni.navigateBack()
},
}
},
}
</script>
@@ -714,7 +611,6 @@
border-radius: 25rpx 0 0 25rpx;
line-height: 14rpx;
background: linear-gradient(135deg, #0DB658 0%, #16DD6D 100%);
;
color: #fff;
font-size: 20rpx;
width: fit-content;
@@ -765,14 +661,25 @@
}
.tag {
line-height: 60rpx;
// display: flex;
// text-overflow: clip;
// display: -webkit-box;
// -webkit-box-orient: vertical;
// /* 这里是超出几行省略 */
// -webkit-line-clamp: 1;
overflow: hidden;
.tag-content {
padding: 10rpx 18rpx;
display: inline;
padding: 9rpx 17rpx;
border-radius: 25rpx;
line-height: 13rpx;
background-color: #FDD96A;
color: #fff;
font-size: 22rpx;
width: fit-content;
// margin-right: 6rpx;
}
}
}