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

分类页部分接口对接

Browse Source
This commit is contained in:
”chenxuelian“
2022-12-26 21:27:22 +08:00
parent 3fd749fd2f
commit aef226d3ab
4 changed files with 221 additions and 203 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -10,7 +10,7 @@
<view class="category-view">
<view class="left">
<view v-for="(item,index) in categoryList" class="category-item"
@click="changeSelectedCategory(index)">
@click="changeSelectedCategory(item, index)">
<view>
<view class="icon-box">
<image :src="item.icon" mode="aspectFit" class="icon"
@@ -63,47 +63,43 @@
lineHeight="4" :current="tabCurrent" @change="tabChange"></u-tabs>
</view>
<scroll-view scroll-y class="goods-list">
<block v-for="(item,index) in tabbar" :key="index">
<block v-if="index === menuCurrent">
<block v-for="(item1,index1) in item.foods" :key="index1">
<view class="goods-item">
<view class="left">
<view class="image">
<image :src="item1.image" mode="scaleToFill"
style="width: 170rpx;height: 100%;"></image>
</view>
<view class="tag">
<view class="tag-content">
<text>{{item.name}}</text>
</view>
</view>
</view>
<view class="right">
<view class="name">
<text>{{item1.name}}</text>
</view>
<view class="describe">
<text>{{item1.describe}}</text>
</view>
<view class="publish-date">
<view class="publish-date-box">
<view
style="width: fit-content; display: inline-block;margin-right:6rpx;">
<u-icon size="16" name="clock" color="#A3A3A3" />
</view>
<text style="margin-right: 6rpx;">发布日期</text>
<text>{{item1.date}}</text>
</view>
</view>
<view class="tag">
<view class="tag-content">
<text>{{ item1.feature }}</text>
</view>
</view>
<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"
style="width: 170rpx;height: 100%;"></image>
</view>
<view class="tag">
<view class="tag-content">
<text>{{item.name}}</text>
</view>
</view>
</block>
</block>
</view>
<view class="right">
<view class="name">
<text>{{item1.name}}</text>
</view>
<view class="describe">
<text>{{item1.describe}}</text>
</view>
<view class="publish-date">
<view class="publish-date-box">
<view
style="width: fit-content; display: inline-block;margin-right:6rpx;">
<u-icon size="16" name="clock" color="#A3A3A3" />
</view>
<text style="margin-right: 6rpx;">发布日期</text>
<text>{{item1.date}}</text>
</view>
</view>
<view class="tag">
<view class="tag-content">
<text>{{ item1.feature }}</text>
</view>
</view>
</view>
</view>
</block>
</scroll-view>
</view>
@@ -118,7 +114,7 @@
<view class="show" bindtap='hideview'
:style="{display: showMask || featureMask ? 'block':'none', top: Number(searchBarTop + searchBarHeight + 4) + 'px',}">
<view v-if="showMask" class="category-view-all">
<view v-for="(item,index) in categoryList" @click="changeSelectedCategory(index)"
<view v-for="(item,index) in categoryList" @click="changeSelectedCategory(item,index)"
style="width: 20%;margin-bottom: 20rpx;">
<view class="category-item">
<view class="icon-box">
@@ -223,132 +219,111 @@
}
],
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: [
// {
// "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': '无防腐剂'
// }
// ]
// },
],
goodsParam: {
sortType: null,
cateId: null,
tagIds: null,
pageSize: 10,
pageNum: 1
},
goodsList: [],
tabsList: [{
name: '上架时间'
}, {
name: '点赞量'
}],
tagsList: [{
name: '无添加剂'
},
{
name: '无添加剂'
},
{
name: '无添加剂'
},
{
name: '无添加剂'
},
{
name: '无添加剂'
},
{
name: '无添加剂'
},
{
name: '无添加剂无添加剂'
},
{
name: '无添加剂'
},
{
name: '无添加剂'
},
{
name: '无添加剂无添加剂'
}
],
tagsList: [],
scrollTop: 0, //tab标题的滚动条位置
menuCurrent: 0, // 预设当前项的值
menuHeight: 0, // 左边菜单的高度
@@ -391,7 +366,7 @@
}
this.recentRecordList.unshift(param)
},
changeSelectedCategory(index) {
changeSelectedCategory(item, index) {
this.$set(this.categoryList, this.selectedCategory, {
...this.categoryList[this.selectedCategory],
active: false
@@ -401,11 +376,16 @@
active: true
});
this.selectedCategory = index
this.tabCurrent = 0
this.tagCurrent = null
this.menuCurrent = 0
this.getSeconedCategoryList()
this.showMask = false
},
changeSelectedTag(index) {
this.tagCurrent = index
this.featureMask = false
this.getGoodsList()
},
// 点击左边的栏目切换
async swichMenu(index) {
@@ -418,6 +398,7 @@
}
// 将菜单菜单活动item垂直居中
this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
this.getTagList()
},
// 获取一个目标元素的高度
getElRect(elClass, dataVal) {
@@ -447,6 +428,7 @@
tabChange(selectTab) {
console.log(selectTab)
this.tabCurrent = selectTab.index;
this.getGoodsList()
},
navigateToSearch() {
uni.navigateTo({
@@ -457,13 +439,54 @@
this.$apiServe.getCategories().then(res => {
this.categoryList = res.data.data.map((item, index) => {
item.icon = this.imgUrl + item.icon
item.active = false
if(!index) {
if (this.selectedCategory && this.selectedCategory === index) {
item.active = true
} else if (!this.selectedCategory && !index) {
item.active = true
} else {
item.active = false
}
return item
})
console.log(this.categoryList)
this.getSeconedCategoryList()
}).finally(_ => {})
},
getSeconedCategoryList() {
const data = {
pid: this.categoryList[this.selectedCategory].id
}
this.$apiServe.getCategories(data).then(res => {
this.tabbar = res.data.data.map((item, index) => {
item.icon = this.imgUrl + item.icon
return item
})
this.getTagList()
}).finally(_ => {})
},
getTagList() {
const data = {
pid: this.tabbar[this.menuCurrent].id
}
this.$apiServe.getTags(data).then(res => {
this.tagsList = res.data.data.map((item, index) => {
return item
})
}).finally(_ => {
this.getGoodsList()
})
},
getGoodsList() {
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
}
this.$apiServe.getProductList(data).then(res => {
this.goodsList = res.data.data.map((item, index) => {
item.icon = this.imgUrl + item.icon
return item
})
}).finally(_ => {})
},
goBack() {
@@ -584,6 +607,7 @@
background: #fff;
border: 2rpx solid #fff;
border-radius: 25% 0 0 0;
.title {
font-size: 32rpx;
font-family: PingFangSC-Regular, PingFang SC;
@@ -689,7 +713,8 @@
padding: 12rpx;
border-radius: 25rpx 0 0 25rpx;
line-height: 14rpx;
background: linear-gradient(135deg, #0DB658 0%, #16DD6D 100%);;
background: linear-gradient(135deg, #0DB658 0%, #16DD6D 100%);
;
color: #fff;
font-size: 20rpx;
width: fit-content;

28
packageSearch/search-products/search-products.vue
View File

@@ -38,18 +38,28 @@
export default {
data() {
return {
productList: [{
cover: '/static/products/zhanwei_dg.png',
name: '锅巴',
tag: '无添加剂',
cate_name: '零食铺子',
title: '糯米蟹黄锅巴散装，非油炸绿色健康食品',
pub_time: '2022-12-04'
}, ]
queryParam: {
pageSize: 10,
pageNum: 1
},
queryTitle: null,
productList: []
}
},
onLoad(options) {
this.queryTitle = options.title
this.goSearch()
},
methods: {
goSearch() {
const data = {
...this.queryParam,
title: this.queryTitle
}
this.$apiServe.getProductList(data).then(res => {
this.productList = res.data.data
}).finally(_ => {})
}
}
}
</script>

2
packageSearch/search/search.vue
View File

@@ -83,7 +83,7 @@
// error
}
uni.navigateTo({
url: '../search-products/search-products'
url: '../search-products/search-products?title=' + param
})
},
goBack() {

37
service/request.js
View File

@@ -182,13 +182,6 @@ const apiService = {
resolve(service.post(url, data, true))
})
},
// 获取首页分类
getCategories() {
const url = `/home/classlist`
return new Promise((resolve, reject) => {
resolve(service.get(url))
})
},
// 获取首页轮播图
getBanner(data) {
const url = `/home/banner`
@@ -238,23 +231,6 @@ const apiService = {
resolve(service.get(url, id))
})
},
// 解密
decrypt(data) {
const url = `/api`
return new Promise((resolve, reject) => {
resolve(service.post(url, {
data
}))
})
},
// 国密sm4加密
sm4Encrypt(data) {
const url = `/api`
return new Promise((resolve, reject) => {
resolve(service.sm(url, data))
})
},
login: data => {
data = Object.assign(data || {}, {})
const url = `/api`
@@ -262,11 +238,18 @@ const apiService = {
resolve(service.post(url, data, true))
})
},
// 获取
// 获取首页分类Tag
getTags(data) {
const url = `/home/tags`
return new Promise((resolve, reject) => {
resolve(service.get(url, data))
})
},
// 获取首页分类
getCategories(data) {
const url = `/home/classlist`
return new Promise((resolve, reject) => {
resolve(service.get(url))
resolve(service.get(url, data))
})
},
// 搜索发现 热搜
@@ -280,7 +263,7 @@ const apiService = {
getProductList(data) {
const url = `/home/product`
return new Promise((resolve, reject) => {
resolve(service.get(url))
resolve(service.get(url, data))
})
},
// 图片基本地址