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`中
<script>
export default {
data() {
return {
list: [],
golist:[],
value1: -1,
option1: [
{
text: "店铺类型", value: -1 },
{
text: "淘宝", value: 0 },
{
text: "天猫", value: 1 }
],
isActive: 1
};
},
created() {
let id = this.$route.query.id;
this.$axios
.get("http://api.kudesoft.cn/tdk/goods", {
params: {
subcid: id
}
})
.then(res => {
console.log(res.data.data.data.list);
this.list = res.data.data.data.list;
});
},
methods: {
onClickLeft() {
this.$router.push({
path: "/"
});
},
gotodetails(id) {
this.$router.push({
path: "/xiangqing",
query: {
id
}
});
},
zonghepx() {
this.isActive = 1;
this.list.sort((a, b) => {
return b.shopLevel - a.shopLevel;
});
},
xiaoliang() {
this.isActive = 2;
this.list.sort((a, b) => {
return b.monthSales - a.monthSales;
});
},
jiage() {
if (this.isActive < 3) {
this.isActive = 3;
this.list.sort((a, b) => {
return a.actualPrice - b.actualPrice;
});
} else if (this.isActive == 3) {
this.isActive = 4;
this.list.sort((a, b) => {
return b.actualPrice - a.actualPrice;
});
} else if ((this.isActive = 4)) {
this.isActive = 3;
this.list.sort((a, b) => {
return a.actualPrice - b.actualPrice;
});
}
},
shopType(value) {
console.log(value);
this.list = [];
if (value == -1) {
let id = this.$route.query.id;
this.$axios
.get("http://api.kudesoft.cn/tdk/goods", {
params: {
subcid:id,
}
})
.then(res => {
this.list = res.data.data.data.list;
});
} else {
let id = this.$route.query.id;
this.$axios
.get("http://api.kudesoft.cn/tdk/goods", {
params: {
subcid: id,
}
})
.then(res=> {
console.log(res.data.data.data.list);
this.golist = res.data.data.data.list;
this.golist.map(item => {
if (item.shopType == value) {
this.list.push(item);
}
});
});
}
}
}
};
</script>
商品列表页`style`中
<style scoped>
.red:hover {
color: red;
}
.van-nav-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
}
.box {
width: 100%;
background-color: #fff;
position: fixed;
left: 0;
right: 0;
top: 44px;
font-size: 14px;
display: flex;
justify-content: space-around;
align-items: center;
}
ul {
width: 95%;
margin: 90px auto;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}
li {
margin-top: 10px;
width: 45%;
font-size: 13px;
}
li p {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.list-jiage {
font-size: 15px;
}
.list-yishou {
font-size: 9px;
float: right;
color: gray;
}
.box-span {
display: flex;
align-items: center;
justify-content: center;
}
.box-iconfont {
display: flex;
flex-direction: column;
}
.iconfont {
font-size: 14px;
}
.active {
color: red;
}
</style>
3.详情页组件
详情页组件template中
<template>
<div>
<h4>商品详情</h4>
<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
<van-swipe-item v-for="(item, index) in xqList.imgs" :key="index">
<img :src="item" />
</van-swipe-item>
</van-swipe>
<p>{
{
xqList.title}}</p>
<p>￥{
{
xqList.actualPrice}}</p>
<van-goods-action>
<van-goods-action-icon icon="chat-o" text="客服" />
<van-goods-action-icon icon="cart-o" text="购物车" :badge="cart.length" @click="gotogou" />
<van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
<van-goods-action-button type="warning" @click="jia" text="加入购物车" />
<van-goods-action-button type="danger" text="立即购买" />
</van-goods-action>
</div>
</template>
详情页组件script中
<script>
export default {
data() {
return {
xqList: {
},
cart: [],
};
},
created() {
let id = this.$route.query.id;
this.$axios
.get("http://api.kudesoft.cn/tdk/details", {
params: {
id,
},
})
.then((res) => {
console.log(res.data.data.data);
this.xqList = res.data.data.data;
this.xqList.imgs = this.xqList.imgs.split(",");
});
if (localStorage.cart) {
this.cart = JSON.parse(localStorage.cart);
}
},
methods: {
jia() {
let show = true;
this.cart.map((item) => {
if (item.gou.id == this.xqList.id) {
item.num++;
show = false;
return;
}
});
if (show) {
this.cart.unshift({
gou: this.xqList,
num: 1
});
}
localStorage.cart = JSON.stringify(this.cart);
},
gotogou() {
this.$router.push({
path: "/cart",
});
},
},
};
</script>
详情页组件style中
<style scoped>
img {
width: 95%;
height: 280px;
}
.van-swipe__track {
text-align: center;
}
</style>
4.购物车组件
购物车组件template中
<template>
<div>
<van-nav-bar left-text="返回" left-arrow @click-left="back" title="购物车" />
<van-checkbox-group v-model="result" @change="bian">
<van-swipe-cell v-for="(item, index) in cart" :key="index">
<van-row align="center">
<van-col span="2">
<van-checkbox :name="item"></van-checkbox>
</van-col>
<van-col span="22">
<van-card
:price="item.gou.actualPrice"
:desc="item.gou.dtitle"
:title="item.gou.title"
class="goods-card"
:thumb="item.gou.mainPic"
>
<template #num>
<van-stepper v-model="item.num" theme="round" button-size="22" disable-input />
</template>
</van-card>
</van-col>
</van-row>
<template #right>
<van-button square text="删除" type="danger" class="delete-button" @click="del(index)" />
</template>
</van-swipe-cell>
</van-checkbox-group>
<van-submit-bar :price="zong" button-text="提交订单">
<van-checkbox v-model="checked" @click="xuan">全选</van-checkbox>
</van-submit-bar>
</div>
</template>
购物车组件script中
<script>
export default {
data() {
return {
cart: [],
result: [],
checked: false,
};
},
computed: {
zong() {
let zong = 0;
this.result.map((item) => {
zong += item.gou.actualPrice * 100 * item.num;
});
return zong;
},
},
created() {
if (localStorage.cart) {
this.cart = JSON.parse(localStorage.cart);
}
},
methods: {
back() {
window.history.back();
},
xuan() {
if (this.checked) {
this.result = this.cart;
} else {
this.result = [];
}
},
bian() {
if (this.result.length == this.cart.length) {
this.checked = true;
} else {
this.checked = false;
}
},
del(index) {
let del = this.cart.splice(index, 1);
this.result.map((item, index) => {
if (item.gou.id == del[0].gou.id) {
this.result.splice(index, 1);
}
});
this.save();
},
save() {
localStorage.cart = JSON.stringify(this.cart);
},
},
};
</script>
购物车组件style中
<style>
.goods-card {
margin: 0;
background-color: white;
}
.delete-button {
height: 100%;
}
.van-col--2 {
margin-top: 45px;
}
</style>
5.搜索组件
搜索组件template中
<template>
<div>
<van-search
v-model="kw"
autofocus
show-action
placeholder="请输入搜索关键词"
@search="sousuo"
@input="inputValue"
@keydown.enter="sousuo()"
>
<template #action>
<div class="iconfont icon-gouwuche1-copy-copy" @click="gotogou"></div>
</template>
<template #left>
<div class="iconfont icon-fanhui" @click="gotohome"></div>
</template>
</van-search>
<div class="body" v-if="show">
<b>搜索记录</b>
<van-icon name="delete" @click="qk" />
<br />
<div class="jilu">
<span v-for="(item, index) in hisList" :key="index" @click="clickKw(item)">{
{
item}}</span>
</div>
</div>
<div class="hot-keywords" v-if="!show">
<van-cell-group>
<van-cell
v-for="(item, index) in hot"
:key="index"
:title="item.kw"
@click="clickKw(item.kw)"
/>
</van-cell-group>
</div>
</div>
</template>
搜索组件script中
<script>
export default {
data() {
return {
kw: "",
hisList: [],
show: true,
hot: [],
};
},
created() {
let hisList = localStorage.hisList;
if (hisList) {
this.hisList = JSON.parse(hisList);
}
},
methods: {
gotohome() {
this.$router.push({
path: "/",
});
},
sousuo() {
if (this.kw.trim() == "") {
return;
}
if (!this.hisList.includes(this.kw)) {
this.hisList.unshift(this.kw);
this.save();
}
if (this.hisList && this.hisList.length && this.hisList.length > 5) {
this.hisList = this.hisList.splice(0, 5);
this.save();
}
this.$router.push({
path: "/list",
query: {
kw: this.kw,
},
});
},
inputValue(kw) {
if (kw) {
this.show = false;
this.hot = [];
this.$axios.get("/data2.json").then((res) => {
let List = res.data.data.data;
List.map((item) => {
if (item.kw.includes(kw)) {
this.hot.push(item);
}
});
});
} else {
this.show = true;
}
},
save() {
localStorage.hisList = JSON.stringify(this.hisList);
},
clickKw(kw) {
this.kw = kw;
this.sousuo();
},
gotogou() {
this.$router.push({
path: "/cart",
});
},
qk() {
this.$dialog
.confirm({
message: "确定要清空记录吗？",
})
.then(() => {
this.hisList = [];
this.save();
});
},
},
};
</script>
搜索组件style中
<style scoped>
.van-icon-delete {
float: right;
}
.body {
width: 95%;
margin: 0 auto;
}
.jilu {
margin-top: 5px;
display: flex;
}
.jilu span {
border-radius: 3px;
padding: 3px 12px;
margin-left: 5px;
background-color: #eeeeee;
font-size: 12px;
color: gray;
}
</style>
6.搜索到的列表
搜索列表template中
<template>
<div>
<van-nav-bar left-text="返回" left-arrow @click-left="back" />
<ul>
<li v-for="(item, index) in shoulist" :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中
<script>
export default {
data() {
return {
shoulist: [],
};
},
created(){
this.$axios.get('http://api.kudesoft.cn/tdk/goods',{
}).then(res=>{
let kw = this.$route.query.kw
let List=res.data.data.data.list
if(kw){
List.map(item=>{
if(item.title.includes(kw)){
this.shoulist.push(item)
}
})
}else{
this.shoulist=List
}
})
},
methods: {
gotodetails(id) {
this.$router.push({
path: "/xiangqing",
query: {
id,
},
});
console.log(id);
},
back(){
window.history.back()
}
},
};
</script>
搜索列表style中
<style scoped>
ul {
width: 90%;
margin: 0px auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
li {
margin-top: 10px;
width: 45%;
font-size: 13px;
}
li p {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.list-jiage {
font-size: 15px;
}
.list-yishou {
font-size: 9px;
float: right;
color: gray;
}
</style>
