| Axios 移动文档 | Axios Axios

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from "axios"
// vant
import Vant from 'vant';
import 'vant/lib/index.css';
import { Card } from 'vant';
import { Lazyload } from 'vant';

Vue.use(Lazyload);


Vue.use(Card);

Vue.use(Vant);

Vue.config.productionTip = false

axios.defaults.baseURL = 'http://www.liulongbin.top:3005';
Vue.prototype.$http = axios;

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="/renwu" >购物车</van-tabbar-item>
      <van-tabbar-item icon="friends-o" to="/about">关于我们</van-tabbar-item>
    </van-tabbar>
    <router-view />
  </div>
</template>

<script>
export default {
 data() {
    return {
      active: 0,
    };
  },
}
</script>
<style lang="scss">

</style>

router.js

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: '/renwu',
    name: 'renwu_view',
    component: () => import('../views/RenWuView.vue')
  },
  {
    path: '/about',
    name: 'about_view',
    component: () => import('../views/AboutView.vue')
  },
  {
    path: '/info/:id',
    name: 'info_view',
    props: true,
    component: () => import('../views/InfoView.vue')
  },
]

const router = new VueRouter({
  routes
})

export default router

store.js

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: {
    // 当传递过来数据接受
    addGoods(state, payload) {
      let flag = false; //-->规定flag为false表示购物车中没有这个商品
      // 判断添加前购物车是否有着商品
      state.cart.some((item) => {
        if (item.id === payload.id) {
          flag = true
          item.count += payload.count
        }
      });
      // 如果没有flag不等于false则添加新产品
      if (!flag) {
        state.cart.push(payload)
      }
      // 存储到本地
      localStorage.setItem("cartList", JSON.stringify(state.cart))
    },
    // 删除vuex中的数据
    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: {
  }
})

信息

<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>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "HomeView",
  data() {
    return {
      goodsList: [],
    };
  },
  methods: {
    // 渲染
    getDoodsList() {
      this.$http.get("/api/getgoods?pageindex=1").then((response) => {
        let { data: res } = response;
        console.log(res);
        this.goodsList = res.message;
      });
    },
    // 点击查看--通过id查询--上面要传参数
    getInfo(id){
      this.$router.push("/info/"+id)
    }
  },
  // 创建渲染
  created() {
    this.getDoodsList();
  },
};
</script>

组件--调佣次数多

<template>
  <div>
    <van-nav-bar
      title="详情"
      left-text="返回"
      right-text="按钮"
      left-arrow
      @click-left="onClickLeft"
    />
  </div>
</template>

<script>
export default {
    methods: {
    // 返回
    onClickLeft() {
      this.$router.back();
    },
  },
};
</script>

<style>
</style>

详情

<template>
  <div>
    <nober></nober>
    <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>
    <br />
    <div>
      购买数量:<van-stepper
        v-model="count"
        theme="round"
        button-size="22"
        @click="addGoods"
        disable-input
      />
    </div>
    <!-- 按钮 -->
    <van-goods-action-button
      type="warning"
      text="加入购物车"
      @click="addGoods"
    />
  </div>
</template>

<script>
//组件
import nober from "../components/NoBer.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;
        console.log(res);
        this.goodInfo = res.message[0];
      });
    },
    // 加入购物车---要存入vuex中
    addGoods() {
      this.goodInfo.count = this.count;
      // 之后将商品信息存入vuex中
      this.$store.commit("addGoods", this.goodInfo);
      console.log(this.goodInfo);
    },
  },
  //   创建渲染
  created() {
    this.getGoodsInfo();
  },
  // 组件
  components: {
    nober,
  },
};
</script>

<style>
img {
  height: 300px;
}
</style>

购买提交

<template>
  <div>
    <nober></nober>
    <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 nober from "../components/NoBer.vue";
export default {
  data() {
    return {
      cartList: [],
       total: 0,
    };
  },
  methods: {
    // 把数据从vuex中获取
    getCartList() {
      this.cartList = this.$store.state.cart;
    },
    // 删除
    delGood(id) {
      // 通过vuex删除数据---在vuex写东西
      this.$store.commit("delGood", id);
    },
  },
  mounted() {
    this.getCartList();
    console.log(this.cartList);
  },
  components: {
    nober,
  },
};
</script>

<style>
.goods-card {
  margin: 10px 0;
  background-color: white;
}

.delete-button {
  height: 100%;
}

.van-submit-bar {
  position: fixed;
  bottom: 50px;
}

.cart_body {
  margin-bottom: 100px;
}
</style>