还是接着之前的内容
项目情况截图
kind
kind.vue
<template>
<view>
<button type="default" @tap="goProduct">api方式跳转到商品页</button>
<navigator url="/pages/kind/list/list">组件方式跳转至商品页</navigator>
<view class="nav-item" v-for="item in categoryList" :key="item.pmsProductCategory.id" @tap="catetoryClick(item)">
<!-- <image :src="item.pmsProductCategory.icon" mode=""></image> -->
<text>{{item.pmsProductCategory.name}}</text>
</view>
</view>
</template>
<script>
import { getAllCategory } from '@/api/kind/index.js'
export default {
data() {
return {
categoryList:[]
};
},
methods: {
goProduct(){
uni.navigateTo({
url:'/pages/kind/list/list'
})
},
catetoryClick(obj){
uni.navigateTo({
url:'/pages/kind/list/list?id=' + obj.pmsProductCategory.id
})
}
},
onLoad() {
getAllCategory().then(res=>{
console.log(res)
this.categoryList = res.data.items;
})
}
}
</script>
<style lang="scss">
navigator{
width: 100%;
height: 150rpx;
line-height: 150rpx;
text-align: center;
}
.nav-item{
width: 100%;
height: 150rpx;
border: 1px solid gray;
margin-bottom: 10px;
box-sizing: border-box;
text-align: center;
font-size: 18px;
font-weight: bold;
line-height: 150rpx;
background-color: $uni-bg-color-grey;
}
</style>list.vue
<template>
<view>
二级分类页
<button type="default" @tap="goKind">api方式跳转回分类页</button>
<button type="default" @tap="goBack">返回上级菜单</button>
<navigator url="/pages/kind/kind" open-type="switchTab">组件方式跳转回分类页</navigator>
<navigator :delta="1" open-type="navigateBack">组件方式回退上一级</navigator>
<view class="nav-item" v-for="item in categoryList" :key="item.id" @tap="catetoryClick(item)">
<!-- <image :src="item.icon" mode=""></image> -->
<text>{{item.name}}</text>
</view>
</view>
</template>
<script>
import { getCategory} from '@/api/kind/list.js'
export default {
data() {
return {
categoryId:0,
categoryList:[]
};
},
methods:{
catetoryClick(obj){
console.log(obj)
uni.navigateTo({
url:'/pages/kind/goods/goods?id=' + obj.id
})
},
goKind(){
uni.switchTab({
url:'/pages/kind/kind'
})
},
goBack(){
uni.navigateBack({
delta:1
})
}
},
onLoad(options) {
this.categoryId = options.id;
getCategory(this.categoryId).then(res=>{
//console.log(res)
this.categoryList = res.data.category.children;
})
}
}
</script>
<style lang="scss" scoped>
.nav-item{
width: 100%;
height: 110rpx;
border: 1px solid gray;
margin-bottom: 10px;
box-sizing: border-box;
text-align: center;
font-size: 18px;
font-weight: bold;
line-height: 110rpx;
background-color: $uni-bg-color-grey;
}
</style>goods.vue
<template>
<view>
<view class="tab">
<view class="tab-item" v-for="(item,index) in tabList" :key="index">
<view :class="{active: index == currentTabIndex }" @tap="tabClick(index)">
{{item.name}}
</view>
<view v-if=" item.name == '销量' || item.name == '价格'" class="icon-box">
<uni-icons type="up" size="16" :color="item.current == 'up'?'#dd524d': ''"></uni-icons>
<uni-icons type="down" size="16" :color="item.current == 'down'?'#dd524d': ''"></uni-icons>
</view>
</view>
</view>
<ul class="product-area">
<li v-for="item in productList" :key="item.id">
<img :src="item.pic" alt="" />
<view>{{item.name}}</view>
<view>￥{{item.price}}</view>
<view>{{item.brandName}}</view>
</li>
</ul>
</view>
</template>
<script>
import { getProductList } from '@/api/kind/goods.js'
export default {
data() {
return {
sortBy:'',
desc: 0,
currentTabIndex: 0,
categoryId: 0,
productList:[],
tabList:[
{
name:'新品',
current:'default', //default up down
},
{
name:'销量',
current:'default', //default up down
},
{
name:'价格',
current:'default', //default up down
},
{
name:'筛选',
current:'default', //default up down
},
]
}
},
methods: {
tabClick(index){
//当前索引保存起来
this.currentTabIndex = index;
//除了当前点击项，其余项恢复默认标识
this.tabList.forEach((ele,idx)=>{
if(idx != index){
ele.current = 'default';
}
});
//获取当前项
let item = this.tabList[index];
//判断是升序，还是降序
if(item.current == 'default'){
this.tabList[index].current = 'up';
this.desc = 0; //升序
}else if(item.current == 'up'){
this.tabList[index].current = 'down';
this.desc = 1; //降序
}else {
this.tabList[index].current = 'up';
this.desc = 0; //升序
}
//判断是销量排序，还是价格排序
if(item.name =='销量'){
this.sortBy = 'sale'
}else if(item.name =='价格'){
this.sortBy = 'price'
}
//请求接口获取数据
this.getData();
},
getData(){
let data = {
"brandId": "",
"categoryId": this.categoryId,
"isDesc": this.desc,
"keywords": "",
"sortBy": this.sortBy
}
//调用接口函数
getProductList(1,10,data).then(res=>{
//console.log(res)
this.productList = res.data.rows;
})
}
},
onLoad(options) {
//从页面传参中获取id
this.categoryId = options.id;
//然后获取数据
this.getData();
}
}
</script>
<style lang="scss">
.tab{
display: flex;
align-items: center;
justify-content: space-around;
padding: 10px 0;
.tab-item{
display: flex;
align-items: center;
.icon-box{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.active{
color: #dd524d;
}
}
}
.product-area{
list-style: none;
width: 100%;
padding: 10rpx;
li{
width: 45%;
height: 600rpx;
float: left;
border: 1px solid gray;
text-align: center;
margin: 10rpx;
img{
width: 100%;
height: 400rpx;
}
text{
color: gray;
}
}
}
</style>api kind
index.js
import request from '../request.js'
export const getAllCategory = ()=> {
return request({
url:'/lejuClient/productCategory/findAllCategory'
})
}list.js
import request from '@/api/request.js'
export const getCategory = (categoryId)=>{
return request({
url:'/lejuClient/productCategory/findCategory/' + categoryId,
method: 'GET'
})
}
export const getProductList = (start,limit,data)=> {
return request({
url:`/lejuClient/product/findProductList/${start}/${limit}`,
method:'POST',
data:data
})
}goods.js
import request from '@/api/request.js'
export const getProductList = (start,limit,data)=> {
return request({
url:`/lejuClient/product/findProductList/${start}/${limit}`,
method:'POST',
data:data
})
}使用的uni-cons需要下载插件
插件地址
测试
分类
二级分类
商品页
