移动端Vue

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>