image.png
plugins
import Vue from 'vue'
import Vant, { Lazyload } from 'vant'
import 'vant/lib/index.css'
// / 相当于绝对路径public
Vue.use(Lazyload, {
// loading: '/loading.gif'
// loading: require('../assets/loading.gif')
// loading: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fb779f7241e59aebabb25b7e68bde3669be1e8e91128e8d-5echD1_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637891018&t=7dd7a3882f61c8d26c4ccbc1f588723f'
loading: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F0dbd39dd274025f21e0a4016cfcb32653b24536a364f-9jIt3B_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637974552&t=8efe9a716f40a9f229d733de405b1966'
})
Vue.use(Vant)
router
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home'
import Friends from '../views/Friends'
import Search from '../views/Search'
import Cart from '../views/Cart'
import NewsList from '../views/Home/news/NewsList'
import NewsInfo from '../views/Home/news/NewsInfo'
import PhotoList from '../views/Home/photos/PhotoList'
import PhotoInfo from '../views/Home/photos/PhotoInfo'
import GoodsList from '../views/Home/goods/GoodsList'
import GoodsInfo from '../views/Home/goods/GoodsInfo'
Vue.use(VueRouter)
const routes = [
{
path: '/',
redirect: '/home'
},
{
path: '/home',
component: Home,
meta: {
title: '首页',
isShow: true,
keepAlive: true
}
},
{
path: '/home/newslist',
component: NewsList,
meta: {
title: '新闻列表',
isShow: false,
keepAlive: true
}
},
{
path: '/home/newsinfo/:id',
component: NewsInfo,
meta: {
title: '新闻详情',
isShow: false,
keepAlive: false
},
props: true
},
{
path: '/home/photolist',
component: PhotoList,
meta: {
title: '图片列表',
isShow: false,
keepAlive: true
}
},
{
path: '/home/photoinfo/:id',
component: PhotoInfo,
meta: {
title: '图片详情',
isShow: false,
keepAlive: false
},
props: true
},
{
path: '/home/goodslist',
component: GoodsList,
meta: {
title: '商品列表',
isShow: false,
keepAlive: true
}
},
{
path: '/home/goodsinfo/:id',
component: GoodsInfo,
meta: {
title: '商品详情',
isShow: true,
keepAlive: false
},
props: true
},
{
path: '/friends',
component: Friends,
meta: {
title: '会员',
isShow: true,
keepAlive: true
}
},
{
path: '/search',
component: Search,
meta: {
title: '搜索',
isShow: true,
keepAlive: true
}
},
{
path: '/cart',
component: Cart,
meta: {
title: '购物车',
isShow: true,
keepAlive: true
}
}
]
// eslint-disable-next-line no-new
const router = new VueRouter({
// mode: 'history',
// base: process.env.BASE_URL,
routes
})
export default router
store
modules
cart
const state = {
count: 6,
cart: JSON.parse(localStorage.cart || '[]')
}
const mutations = {
ADD_CART(state, payload) {
let flag = false
// 如果商品已经存在只做数量上的修改
state.cart.forEach(item => {
if (item.id === payload.id) {
item.count += payload.count
flag = true
}
})
// 如果商品不存在，添加商品
if (!flag) {
state.cart.push(payload)
}
// 把商品添加到本地存储
localStorage.cart = JSON.stringify(state.cart)
}
}
const actions = {
addCart({ commit }, obj) {
commit('ADD_CART', obj)
}
}
const getters = {
getAllCount(state) {
let c = 0
state.cart.forEach(item => {
c += item.count
})
return c
},
getAllPrice(state) {
let o = 0
state.cart.forEach(item => {
if (item.isShow) {
o += item.count * item.price
}
})
return o
}
}
export default {
namespaced: true,
state,
mutations,
actions,
getters
}
index
import Vue from 'vue'
import Vuex from 'vuex'
import cart from './modules/cart'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
},
mutations: {
},
actions: {
},
modules: {
cart
}
})
utils
import axios from 'axios'
import { Toast } from 'vant'
// eslint-disable-next-line no-unused-vars
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API
// baseURL: '/api'
// timeout: 1000,
})
// 请求拦截
service.interceptors.request.use(config => {
// 开启进度条
NProgress.start()
return config
}, err => {
Promise.reject(err)
})
// 响应拦截
service.interceptors.response.use(response => {
// 关闭进度条
NProgress.done()
// console.log(response)
return response
}, err => {
Toast('请求失败')
Promise.reject(err)
})
export default service
app
<template>
<div class="app">
<!-- header -->
<van-nav-bar
:title="title"
left-text="返回"
left-arrow
@click-left="clickLeft"
fixed
/>
<!-- main -->
<!-- keep-alive 可以缓存组件的数据、状态 -->
<!-- <keep-alive include="NewsList">
<router-view></router-view>
</keep-alive> -->
<!-- keep-alive 可以缓存组件的状态，数据 -->
<keep-alive v-if="$route.meta.keepAlive">
<router-view></router-view>
</keep-alive>
<router-view v-else></router-view>
<!-- footer -->
<van-tabbar
v-model="active"
v-if="$route.meta.isShow"
>
<van-tabbar-item
icon="home-o"
to="/home"
></van-tabbar-item>
<van-tabbar-item
icon="friends-o"
to="/friends"
></van-tabbar-item>
<van-tabbar-item
icon="cart-o"
:badge="$store.getters['cart/getAllCount']"
to="/cart"
></van-tabbar-item>
<van-tabbar-item
icon="search"
to="/search"
></van-tabbar-item>
</van-tabbar>
</div>
</template>
<script>
export default {
data() {
return {
title: this.$route.meta.title,
active: 0
}
},
created() {
console.log(this.$route.meta.keepAlive)
},
watch: {
'$route.meta.title'(newVal) {
this.title = newVal
}
},
methods: {
clickLeft() {
this.$router.go(-1)
}
}
}
</script>
<style lang="scss">
.app {
padding-top: 46px;
padding-bottom: 50px;
}
</style>
main
import Vue from 'vue'
import App from './App.vue'
import './plugins/vant.js'
import router from './router'
import './directives/price'
import './mixins'
import './filters/datefmt'
import store from './store'
// import directivePrice from './directives/price'
// directivePrice(Vue)
import 'lib-flexible'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
store,
router
}).$mount('#app')
