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

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

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

2
packageSearch/search/search.vue
View File

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

37
service/request.js
View File

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