©2020-2024 ioDraw All rights reserved
用vue脚手架创建好项目，进行以下操作
①下载vant插件
在终端或cmd中运行
npm i vant -S
在main.js中全局配置vant
import Vant from 'vant'; import 'vant/lib/index.css'; Vue.use(Vant);
②下载安装axios
在终端或cmd中运行
npm install axios -S
在main.js中全局配置axios
import axios from 'axios' Vue.prototype.$axios = axios
③在views中创建Carts.vue(购物车页面)，Classify.vue(商品分类)，Goodslist.vue(商品列表),Index.vue,Main.vue(首页),Myself.vue(我的),Search.vue(搜索页面)
④在router下的index.js配置路由
const routes = [ { path: '/', name: 'Index', component: () => import(
'../views/Index.vue'), redirect:'/main', children:[ { path: '/main', name:
'Main', component: () => import( '../views/Main.vue') }, { path: '/classify',
name: 'Classify', component: () => import( '../views/Classify.vue') }, { path:
'/carts', name: 'Carts', component: () => import( '../views/Carts.vue') }, {
path: '/myself', name: 'Myself', component: () => import(
'../views/Myself.vue') }, ] }, { path: '/search', name: 'Search', component: ()
=> import( '../views/Search.vue') }, { path: '/list', name: 'Goodlist',
component: () => import( '../views/Goodlist.vue') } ]
⑤App.vue
<template> <div> <router-view></router-view> </div> </template>
⑥Index.vue
<template> <div> <router-view></router-view> <van-tabbar route active-color="
#1989fa" > <van-tabbar-item name="home" icon="home-o" to='/main'>首页</
van-tabbar-item> <van-tabbar-item name="home" icon="search" to="/classify" badge
="2">分类</van-tabbar-item> <van-tabbar-item name="home" icon="cart-o" to="/carts"
:dot='true'>购物车</van-tabbar-item> <van-tabbar-item name="home" icon="manager-o"
to="/myself">我的</van-tabbar-item> </van-tabbar> </div> </template> <script>
export default { data(){ return { active:0 } } } </script> <style> </style>
⑦Main.vue （首页）
<template> <div> <!-- 输入搜索框 --> <van-search v-model="value" show-action shape="
round" placeholder="请输入搜索关键词" background="#E73A68" @focus="searchFocus" > <
template #label> <span class="search-logo">JD</span> </template> <template
#action> <span style="color:#fff;font-size:16px;">登录</span> </template> <
template #left> <van-icon name="wap-nav" color="#fff" size="25px" style="
margin-right:10px" /> </template> </van-search> <!-- 轮播广告 --> <div> <van-swipe
:autoplay="3000" style="width:90%;margin:15px auto;border-radius:10px"
indicator-color="red" > <van-swipe-item v-for="url in images" :key="url"> <img
:src="url" style="width:100%" /> </van-swipe-item> </van-swipe> </div> <!-- 宫格
--> <van-swipe :autoplay="3000" :loop="false" style="padding:10px 0"> <
van-swipe-item> <van-grid :column-num="5" :border="false"> <van-grid-item v-for=
"(item,index) in imgData" :key="index" :text="item.title" v-show="index < 10"> <
template #icon> <img :src="item.img" width="50px" /> </template> </van-grid-item
> </van-grid> </van-swipe-item> <van-swipe-item> <van-grid :column-num="5"
:border="false"> <van-grid-item v-for="(item,index) in imgData" :key="index"
:text="item.title" v-show="index >= 10 && index < 20"> <template #icon> <img
:src="item.img" width="50px" /> </template> </van-grid-item> </van-grid> </
van-swipe-item> </van-swipe> <!-- 商品卡片 --> <div class="card-list"> <goodscard
v-for="i in 4" :key="i" img='/images/wise.jpg' title="面膜" :price='80'></
goodscard> </div> </div> </template> <script> import Goodscard from
'@/components/Goodscard.vue' export default { components:{ 'goodscard' :
Goodscard}, data(){ return { value:'', images:[ '/images/01.jpg',
'/images/02.jpg', '/images/03.jpg' ], imgData:[ { title:'京东数码', img:
'/images/grid01.png' }, { title:'京东超市', img:'/images/grid02.png' }, { title:
'京东服饰', img:'/images/grid03.png' }, { title:'京东数码', img:'/images/grid01.png' },
{ title:'京东超市', img:'/images/grid02.png' }, { title:'京东服饰', img:
'/images/grid03.png' }, { title:'京东数码', img:'/images/grid01.png' }, { title:
'京东超市', img:'/images/grid02.png' }, { title:'京东服饰', img:'/images/grid03.png' },
{ title:'京东数码', img:'/images/grid01.png' }, { title:'京东超市', img:
'/images/grid02.png' }, { title:'京东服饰', img:'/images/grid03.png' }, { title:
'京东数码', img:'/images/grid01.png' }, { title:'京东超市', img:'/images/grid02.png' },
{ title:'京东服饰', img:'/images/grid03.png' }, { title:'京东数码', img:
'/images/grid01.png' }, { title:'京东超市', img:'/images/grid02.png' }, { title:
'京东服饰', img:'/images/grid03.png' }, { title:'京东数码', img:'/images/grid01.png' },
{ title:'全部', img:'/images/grid02.png' } ] } }, methods:{ searchFocus(){ this.
$router.push({ path:'/search' }) } } } </script> <style> .search-logo{ color:
#E93C3E; font-weight: bold; font-size: 20px; } .card-list{ width: 100%; display:
flex; justify-content: space-around; box-sizing: border-box; flex-wrap: wrap;
margin-bottom: 60px; } </style>
⑧Search.vue（搜索页面）
<template> <div> <van-search v-model="searchValue" shape="round" show-action
placeholder="请输入搜索关键词" @search='onSearch' > <template #action> <van-button type=
"primary" size="mini" color="#E93B3D" style="font-size:16px;border-radius:5px"
@click="onSearch">搜索</van-button> </template> <template #left> <van-icon name="
arrow-left" size="20px" style="margin-right:10px" @click="pageBack"/> </template
> </van-search> <!-- 搜索记录 --> <div class="search-history"> <div class="
search-history-title"> <span>最近搜索</span> <van-icon name="delete" size="20px"
@click="clearHistory"/> </div> <div class="search-tag-list"> <van-tag type="
large" color="#F0F2F5" class="search-tag" v-for="(item,index) in historyList"
:key="index" @click="onSearch(item)">{{item}}</van-tag> </div> </div> <!--
智能搜索提示 --> <div class="showList" v-show="showKwList" > <van-cell v-for="kw in
showTist" :key="kw" :title="kw" value='内容' @click="onSearch(kw)" /> </div> </div
> </template> <script> export default { data(){ return { searchValue:'',
showTist:[], showKwList:false, historyList:[], data: [ "html", "css",
"javascript", "jquery", "node.js", "vue.js", "swiper", "bootstrap", "php",
"mongodb", "mysql", "react.js", "github", "glup", "webpack", "sass", "echarts",
"vant" ] } }, created(){ let historylist = localStorage.historyList if(
historylist){ this.historyList = JSON.parse(historylist) } }, watch:{
searchValue(kw){ this.showKwList = kw.length > 0 ? true : false this.showTist =
this.data.filter(item=>{ return item.includes(kw) }) } }, methods:{ pageBack(){
window.history.back() }, onSearch(kw){ let keyword = '' if(typeof kw ===
'string'){ keyword = kw }else if(typeof kw === 'object'){ if(this.searchValue.
trim() === '') return keyword = this.searchValue } if(keyword){ //执行搜索功能 this.
$router.push({ path:'/list', query:{ kw : keyword } }) }
//query类似于get请求，params类似于post请求
//如果路由跳转使用path，必须使用query方式传参，如果使用name跳转，query和params可以
//使用query传参，参数可以保存，使用params传参，页面刷新后，参数不会保存 // this.$router.push({ //
name:'/list', // params:{ // kw : keyword // } // }) //保存搜索记录 if(keyword){ this.
saveHistory(keyword) } }, saveHistory(keyword){ if(this.historyList.includes(
keyword)){ let index = this.historyList.indexOf(keyword) this.historyList.splice
(index,1) this.historyList.unshift(keyword) }else{ this.historyList.unshift(
keyword) } if(keyword){ //更新到本地 localStorage.historyList = JSON.stringify(this.
historyList) } }, clearHistory(){ this.$dialog.confirm({ title: '', message:
'确定要清空吗', closeOnClickOverlay:'true', width:'360px', className:'confiButton',
theme:'round' }) .then(() => { this.historyList = [] localStorage.historyList =
JSON.stringify(this.historyList) }) .catch(() => { // on cancel }) } } } </
script> <style> .search-history{ height: 50px; width: 100%; border-top: 1px
solid #E5E5E5; } .search-history-title{ height: 50px; display: flex;
justify-content: space-between; align-items: center; padding: 0 10px; }
.search-tag-list{ padding-left: 15px; padding-right: 15px; } .search-tag{ color:
#686868; margin-top: 10px; margin-right: 10px; } .showList{ background: #fff;
position: absolute; width: 100%; top: 67px; min-height: 150px; } .confiButton{
font-size: 22px; } </style>
⑨Classify.vue(分类页面)
<template> <div> <div class="navBox"> <ul class="firstNav"> <li v-for="(item)
in nav" :key="item.cid" @click="clickNavOne(item)"> <img :src="item.cpic" alt=""
srcset="" width="30px"> {{item.cname}} </li> </ul> <ul class="secondNav"> <li
v-for="(item) in secondData" :key="item.subcid" @click="toListPage"> <img :src="
item.scpic" alt="" srcset="" width="50px"> {{item.subcname}} </li> </ul> </div>
</div> </template> <script> import axios from 'axios' export default { data(){
return { nav:[], secondData:[] } }, created(){ this.$axios.get(
'/data/goods.json').then((res)=>{ console.log(res.data.data.data) this.nav = res
.data.data.data this.secondData = this.nav[0].subcategories }) }, methods:{
clickNavOne(item){ this.secondData = item.subcategories }, toListPage(){ this.
$router.push({ path:'/list' }) } } } </script> <style scoped> .navBox{ display:
flex; } .firstNav{ margin: 0 20px; flex: 1.5; margin-bottom: 50px; overflow-y:
scroll; } ::-webkit-scrollbar{ display: none; } .secondNav{ flex: 3; display:
flex; align-items: center; flex-wrap: wrap; margin-bottom: 50px; height: 600px;
overflow-y: scroll; margin-top: 10px; } ::-webkit-scrollbar{ display: none; }
.firstNav li{ display: flex; flex-direction: column; justify-content: center;
margin: 20px 10px; } .secondNav li{ display: flex; flex-direction: column;
justify-content: center; width: 50%; } </style>
⑩Goodlist.vue(商品列表页面)
<template> <div> <!-- 导航栏 --> <van-nav-bar :title="
`购物车(${this.cartList.length})`" left-text="返回" right-text="购物车" left-arrow fixed
@click-left="onClickLeft" @click-right="onClickRight" style="height:50px;
font-size:26px" > </van-nav-bar> <div class="goods-card-box"> <!-- 商品列表 --> <
goods-card v-for="(item) in goods" :key="item.id" :img="item.mainPic" :title="
item.title" :price="item.actualPrice" @click="addCart(item)" class="goodlist-li"
> </goods-card> </div> </div> </template> <script> import Goodscard from
'@/components/Goodscard' export default { components:{ 'goods-card' : Goodscard
}, data(){ return { goods:[], cartList:[] } }, watch:{ cartList : { handler(list
){ localStorage.cartList = JSON.stringify(list) }, deep:true } }, created(){
//获取数据 this.$axios.get('/data/list.json').then((res)=>{ console.log(res.data.
data.data.list) this.goods = res.data.data.data.list }) //将内存展示到页面上 if(
localStorage.cartList){ this.cartList = JSON.parse(localStorage.cartList) } },
methods:{ onClickLeft() { window.history.back()shiyu }, onClickRight() { this.
$router.push({ path:'/carts' }) }, //加入购物车 addCart(item){ console.log(item) let
double= false this.cartList.map((cart)=>{ if(cart.good.id == item.id){ cart.num
++ double = true return } }) if(!double){ this.cartList.push({ good:item, num:1
}) } } } } </script> <style scoped> .goods-card-box{ display: flex; flex-wrap:
wrap; justify-content: space-between; margin-top: 50px; } .goodlist-li{ margin:
10px 1px; border: 1px solid #eee; border-radius: 5px; } </style>
11.Carts.vue(购物车)
<template> <div> <!-- 导航栏 --> <van-nav-bar title="购物车" left-text="返回" fixed
left-arrow @click-left="onClickLeft" /> <!-- 商品卡片 --> <van-checkbox-group
v-model="result" style="margin-bottom:120px;margin-top:60px"> <div v-for="item
in cartList" :key="item.good.id"> <van-checkbox :name="item"></van-checkbox> <
van-swipe-cell> <van-card tag="标签" :price="item.good.actualPrice" :desc="
item.good.desc" :title="item.good.title" :thumb="item.good.mainPic"
:origin-price="item.good.originalPrice" style="margin:10px 5px" > <template #num
> <van-stepper v-model="item.num" /> </template> </van-card> <template #right> <
van-button square text="删除" type="danger" class="delete-button" @click="
del(item)" /> </template> </van-swipe-cell> </div> </van-checkbox-group> <!--
提交订单栏 --> <van-submit-bar :price="totalPrice" button-text="提交订单"> <van-checkbox
v-model="sellAll" @click="handlSellAll">全选</van-checkbox> <template #tip>
你的收货地址不支持同城送,<span>修改地址</span> </template> </van-submit-bar> </div> </template>
<script> export default { data(){ return { sellAll:false, cartList:[], result:[]
, totalPrice:0 } }, watch:{ cartList:{ handler(list){ localStorage.cartList =
JSON.stringify(list) }, deep:true }, result:{ handler(list){ if(list.length ==
this.cartList.length){ this.sellAll = true }else{ this.sellAll = false } this.
comtalPrice() }, deep:true } }, methods:{ del(item){ console.log(item) console.
log(item.good) this.cartList.splice(item.good,1) }, onClickLeft(){ window.
history.back() }, handlSellAll(){ if(this.sellAll){ this.result = this.cartList
}else{ this.result = [] } }, comtalPrice(){ let totalPrice = 0 this.result.map((
item)=>{ totalPrice += item.good.actualPrice * item.num }) this.totalPrice =
totalPrice* 100 } }, created(){ if(localStorage.cartList){ this.cartList = JSON.
parse(localStorage.cartList) } }, } </script> <style scoped> .delete-button {
height: 100%; } </style>
12.Myself.vue(我的)
<template> <div> 我的 </div> </template> <script> export default { } </script> <
style> </style>