1.nav导航组件
nav导航组件`template`中
<template >
<div>
<div class="header">
<van-search show-action placeholder="请输入搜索关键词" @click="gotosearch">
<template #action>
<div class="iconfont icon-gouwuche1-copy-copy" @click="gotogou"></div>
</template>
</van-search>
</div>
<div class="box">
<van-row>
<van-col span="6">
<van-sidebar v-model="activeKey">
<van-sidebar-item
v-for="item in nav1"
:key="item.cid"
:title="item.cname"
@click="gotoNav2(item)"
/>
</van-sidebar>
</van-col>
<van-col span="18">
<van-grid :column-num="3">
<van-grid-item
v-for="item in nav2"
:key="item.subcid"
:icon="item.scpic"
:text="item.subcname"
@click="gotoList(item.subcid)"
/>
</van-grid>
</van-col>
</van-row>
</div>
</div>
</template>
nav导航组件`script`中
<script>
export default {
data() {
return {
activeKey: 0,
nav1: [],
nav2: [],
};
},
created() {
this.$axios.get(" http://api.kudesoft.cn/tdk/category", {
}).then((res) => {
this.nav1 = res.data.data.data;
this.nav1.sort((a, b) => {
return a.cid - b.cid;
});
console.log(res.data.data.data);
this.nav2 = this.nav1[0].subcategories;
});
},
methods: {
gotoNav2(item) {
this.nav2 = item.subcategories;
this.activeKey = item.cid;
},
gotoList(id) {
this.$router.push({
path: "/list2",
query: {
id,
},
});
},
gotosearch() {
this.$router.push({
path: "/search",
});
},
gotogou() {
this.$router.push({
path: "/cart",
});
},
},
};
</script>
nav导航组件`style`中
<style scoped>
.van-search {
overflow: hidden;
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: 100;
}
.box {
margin-top: 50px;
}
</style>
2.商品列表页
商品列表页`template`中
<template>
<div>
<van-nav-bar title="商品列表" left-text="返回" left-arrow @click-left="onClickLeft" />
<div class="box">
<div @click="zonghepx" :class="{'active':isActive==1}">综合排序</div>
<div @click="xiaoliang" :class="{'active':isActive==2}">销量</div>
<div class="box-span" @click="jiage">
<span class="red">价格</span>
<span class="box-iconfont">
<span class="iconfont icon-order-asce" :class="{'active':isActive==3}"></span>
<span class="iconfont icon-paixu-shengxu" :class="{'active':isActive==4}"></span>
</span>
</div>
<div>
<van-dropdown-menu>
<van-dropdown-item v-model="value1" :options="option1" @change="shopType" />
</van-dropdown-menu>
</div>
</div>
<ul>
<li v-for="(item, index) in list" :key="index" @click="gotodetails(item.id)">
<img :src="item.mainPic" width="100%" />
<p>{
{
item.title}}</p>
<span style="color:red">
¥
<span class="list-jiage">{
{
item.actualPrice}}</span>
</span>
<span class="list-yishou">已售:{
{
item.monthSales}}</span>
<span>
<van-tag mark type="danger" style="margin-left:10px">{
{
item.shopType == 1 ? '天猫':'淘宝'}}</van-tag>
</span>
</li>
</ul>
</div>
</template>
商品列表页`script`中