main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Vant from 'vant';
import 'vant/lib/index.css';
import axios from 'axios'
import { Lazyload } from "vant";
Vue.use(Lazyload);
Vue.use(Vant);
Vue.config.productionTip = false
Vue.prototype.$http = axios;
//设置全局请求地址
axios.defaults.baseURL = 'http://www.liulongbin.top:3005';
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
APP.vue
<template>
<div id="app">
<van-tabbar v-model="active">
<van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
<van-tabbar-item icon="shopping-cart-o" to="/cartlist"
>购物车
</van-tabbar-item>
<van-tabbar-item icon="friends-o" to="/about">关于我们</van-tabbar-item>
<van-tabbar-item icon="friends-o" to="/addnews">layui</van-tabbar-item>
</van-tabbar>
<router-view />
</div>
</template>
<script>
export default {
data() {
return {
active: 0,
};
},
};
</script>
<style lang="scss">
</style>
Info.Vue
<template>
<div class="info_div">
<navbar></navbar>
<van-swipe :autoplay="3000">
<van-swipe-item v-for="(image, index) in images" :key="index">
<img v-lazy="image" />
</van-swipe-item>
</van-swipe>
<div>商品标题:{{ goodInfo.title }}</div>
<hr />
<div>市场价:{{ goodInfo.market_price }} 售价:{{ goodInfo.sell_price }}</div>
<hr />
<div>
购买数量:<van-stepper
v-model="count"
theme="round"
button-size="22"
disable-input
/>
</div>
<van-goods-action-button
color="#be99ff"
type="warning"
@click="addToCart"
text="加入购物车"
/>
</div>
</template>
<script>
import navbar from "@/components/NavBar.vue";
export default {
props: ["id"],
data() {
return {
goodInfo: {},
count: 1,
images: [
"https://img01.yzcdn.cn/vant/apple-1.jpg",
"https://img01.yzcdn.cn/vant/apple-2.jpg",
],
};
},
methods: {
getGoodsInfo() {
this.$http.get("/api/goods/getinfo/" + this.id).then((response) => {
let { data: res } = response;
this.goodInfo = res.message[0];
});
},
addToCart() {
//先把所有价钱都存为10
this.goodInfo.sell_price = 10;
this.goodInfo.count = this.count;
//将商品信息存入vuex
this.$store.commit("addToCart", this.goodInfo);
console.log(this.goodInfo);
},
},
created() {
this.getGoodsInfo();
},
mounted() {},
components: {
navbar,
},
};
</script>
<style>
img {
height: 300px;
}
.van-nav-bar {
}
</style>
homeView.vue
<template>
<div class="home">
<van-card
v-for="item in goodsList"
:key="item.id"
:price="item.sell_price"
:desc="item.zhaiyao"
:title="item.title"
:thumb="item.img_url"
@click="getInfo(item.id)"
>
<template #tags>
<van-tag plain type="danger">标签</van-tag>
<van-tag plain type="danger">标签</van-tag>
</template>
<template #footer>
<van-button size="mini" @click.stop>去结算</van-button>
</template>
</van-card>
</div>
</template>
<script>
export default {
name: "HomeView",
data() {
return {
goodsList: [],
};
},
methods: {
getGoodsList() {
this.$http.get("/api/getgoods?pageindex=1").then((response) => {
let { data: res } = response;
console.log(res);
this.goodsList = res.message;
});
},
getInfo(id) {
this.$router.push("/info/" + id);
},
},
created() {
this.getGoodsList();
},
mounted() {},
};
</script>
carView.VUE
<template>
<div class="cart_body">
<navbar></navbar>
<van-swipe-cell v-for="item in cartList" :key="item.id">
<van-card
:num="item.count"
:price="item.sell_price"
:title="item.title"
class="goods-card"
thumb="https://img01.yzcdn.cn/vant/cat.jpeg"
/>
<template #right>
<van-button
square
text="删除"
type="danger"
class="delete-button"
@click="delGood(item.id)"
/>
</template>
</van-swipe-cell>
<van-submit-bar
:price="$store.getters.getTotal * 100"
button-text="提交订单"
/>
</div>
</template>
<script>
import navbar from "@/components/NavBar.vue";
export default {
data() {
return {
cartList: [],
total: 0,
};
},
methods: {
getCartList() {
this.cartList = this.$store.state.cart;
},
delGood(id) {
this.$store.commit("delGood", id);
},
},
mounted() {
this.getCartList();
// this.getTotal;
},
/* computed: {
getTotal() {
this.total = this.$store.getters.getTotal * 100;
},
}, */
components: {
navbar,
},
};
</script>
<style>
.goods-card {
margin: 10px 0;
background-color: rgb(238, 234, 234);
}
.delete-button {
height: 100%;
}
.van-submit-bar {
position: fixed;
bottom: 50px;
}
.cart_body {
margin-bottom: 100px;
}
</style>
Addnew.vue
<template>
<div class="layui-btn-group">
<button type="button" class="layui-btn">增加</button>
<button type="button" class="layui-btn">编辑</button>
<button type="button" class="layui-btn">删除</button>
</div>
</template>
<script>
export default {
name: "addnews_view",
};
</script>
<style>
</style>
AboutView.vue
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>
Vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
cart: localStorage.getItem("cartList") ? JSON.parse(localStorage.getItem("cartList")) : []
},
getters: {
getTotal(state) {
return state.cart.reduce((preVal, currVal) => {
return preVal + currVal.count * currVal.sell_price;
}, 0);
}
},
mutations: {
addToCart(state, payload) {
let flag = false;//-->规定flag为false表示购物车中没有这个商品
//添加前判断购物车中是否有这个商品
state.cart.some((item) => {
if (item.id === payload.id) {
flag = true;
item.count += payload.count;
}
});
if (!flag) {
state.cart.push(payload);
}
localStorage.setItem("cartList", JSON.stringify(state.cart));
},
delGood(state, id) {
let index = state.cart.findIndex(item => {
return item.id === id;
});
state.cart.splice(index, 1);
localStorage.setItem("cartList", JSON.stringify(state.cart));
}
},
actions: {
},
modules: {
}
})
Router
import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'home',
component: HomeView,
},
{
path: '/info/:id',
name: 'info_view',
props: true,
component: () => import('../views/InfoView.vue')
},
{
path: '/about',
name: 'about',
component: () => import('../views/AboutView.vue')
},
{
path: '/cartlist',
name: 'renwu_view',
component: () => import('../views/CartView.vue')
},
{
path: '/addnews',
name: 'addnews_view',
component: () => import('../views/AddNews.vue')
},
]
const router = new VueRouter({
routes
})
export default router
公用返回 组件
<template>
<van-nav-bar
style="position: sticky"
title="详情"
left-text="返回"
right-text="按钮"
left-arrow
@click-left="onClickLeft"
/>
</template>
<script>
export default {
methods: {
onClickLeft() {
this.$router.back();
},
},
};
</script>
<style>
</style>