v浅谈vue之vant框架

目录vant框架的使用使用一个Tabbar 标签栏App.vue封装为一个MainTabbar.vue组件使用一个Swipe 轮播图**Home.vue**组件使用轮播图使用一个 Gird 宫格实现商品列表展示**Home.vue**组件**goodsDetails.vue**详情页组件商品列表之中点击图片显示商品的预览大图片详情页**Details.vue**之中详情页**Details.

不求人0

3304人浏览 · 2020-09-03 22:11:13

不求人0 · 2020-09-03 22:11:13 发布

vant框架的使用

适用于移动端！
官网：https://vant-contrib.gitee.io/vant/#/zh-CN/quickstart
安装：npm i vant -S

使用：

方式1：导入所有组件

  import Vue from 'vue';
  import Vant from 'vant';
  import 'vant/lib/index.css';

  Vue.use(Vant);

方式2：自动按需引入组件 (推荐)

  babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式
  + 安装插件 `npm i babel-plugin-import -D`

  // 在.babelrc 中添加配置 => 根目录下创建这个文件夹！

  // 方式1：  注意：webpack 1 无需设置 libraryDirectory
  {
    "plugins": [
      ["import", {
        "libraryName": "vant",
        "libraryDirectory": "es",
        "style": true
      }]
    ]
  }

  //方式2： 对于使用 babel7 的用户，可以在 babel.config.js 中配置 =>** 推荐使用这种！**
  module.exports = {
    plugins: [
      ['import', {
        libraryName: 'vant',
        libraryDirectory: 'es',
        style: true
      }, 'vant']
    ]
  };

  // 接着你可以在代码中直接引入 Vant 组件
  // 插件会自动将代码转化为方式二中的按需引入形式
  import { Button } from 'vant';
  //如果你在使用 TypeScript，可以使用 ts-import-plugin 实现按需引入

使用一个Tabbar 标签栏

官网：https://vant-contrib.gitee.io/vant/#/zh-CN/tabbar
作用：就是在引入一个tabbar 标签栏由于这个组件是在多个页面使用到的，因此在App.vue组件中引入和使用

App.vue

<template>
  <div id="app">
    <main-tabbar></main-tabbar>
    <router-view />
  </div>
</template>
<script>
import MainTabbar from "./components/MainTabbar";
export default {
  name: "App",
  components: {
    MainTabbar,
  },
};
</script>

封装为一个MainTabbar.vue组件

import { Tabbar, TabbarItem } from "vant"; 导入组件！
v-model="active" 高亮显示，默认为0
v-for="item in tabList" 遍历的数据
route => 以路由的形式跳转
:to="item.path" => 点击后，跳转到对应的path

<!--  -->
<template>
  <van-tabbar v-model="active" route>
    <van-tabbar-item
      v-for="item in tabList"
      :key="item.text"
      :icon="item.icon"
      :to="item.path"
    >{{item.text}}</van-tabbar-item>
  </van-tabbar>
</template>

<script>
import Vue from "vue";
import { Tabbar, TabbarItem } from "vant";
Vue.use(Tabbar);
Vue.use(TabbarItem);
export default {
  name: "MainTabber",
  data() {
    return {
      active: 0,
      tabList: [
        {
          path: "/home",
          text: "首页",
          icon: "wap-home-o",
        },
        {
          path: "/category",
          text: "分类",
          icon: "apps-o",
        },
        {
          path: "/cart",
          text: "购物车",
          icon: "shopping-cart-o",
        },
        {
          path: "/profile",
          text: "我的",
          icon: "user-o",
        },
      ],
    };
  },
  methods: {},
  components: {},
};
</script>
<style  lang="scss" scoped>
</style>

使用一个Swipe 轮播图

官网：https://vant-contrib.gitee.io/vant/#/zh-CN/swipe

引入：需要在哪个组件使用，就引入即可！

import Vue from 'vue';
import { Swipe, SwipeItem, Lazyload, Image } from "vant";

Vue.use(Swipe);
Vue.use(SwipeItem);
Vue.use(Lazyload);//懒加载
Vue.use(Image); //显示img的！

Home.vue组件使用轮播图

  <div class="home">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in rotationList" :key="item._id">
        <img v-lazy="item.imgurl" />
      </van-swipe-item>
    </van-swipe>
  </div>

import Vue from "vue";
import { Swipe, SwipeItem, Lazyload, Image } from "vant";

Vue.use(Swipe);
Vue.use(SwipeItem);
Vue.use(Lazyload);
Vue.use(Image);
export default {
  name: "Home",
  data() {
    return {
      //轮播图的数据
      rotationList: [],
    };
  },
  async created() {
    const { data: rotationList } = await this.$request.get("/goods", {
      params: {
        size: 5,
      },
    });
    console.log("我是data", rotationList);
    this.rotationList = rotationList;
  },
  components: {},
};

.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  height: 150px;
  text-align: center;
  /* background-color: #39a9ed; */
}
.my-swipe .van-swipe-item img {
  width: 100px;
  height: 100%;
}

使用一个 Gird 宫格实现商品列表展示

官网：https://vant-contrib.gitee.io/vant/#/zh-CN/grid
宫格可以在水平方向上把页面分隔成等宽度的区块，用于展示内容或进行页面导航

引入：所需的.vue组件内引入

import Vue from 'vue';
import { Grid, GridItem } from 'vant';

Vue.use(Grid);
Vue.use(GridItem);

需求：显示商品列表，并且点击的时候，跳转到对应的详情页之中！

Home.vue组件

:column-num="2" => 显示的列数
goodsList => 商品的数据
@click="gotoDetails(value._id)" => 点击事件，点击格子的时候触发

    <!-- 商品列表 -->
    <van-grid class="my-goods" :column-num="2">
      <van-grid-item v-for="value in goodsList" :key="value._id" @click="gotoDetails(value._id)">
        <van-image class="goodsImg" :src="value.imgurl" />
        <h4>{{ value.name}}</h4>
      </van-grid-item>
    </van-grid>

import Vue from "vue";
import {  Lazyload, Image, Grid, GridItem } from "vant";

Vue.use(Lazyload);
Vue.use(Image);
Vue.use(Grid);
Vue.use(GridItem);

export default {
  name: "Home",
  data() {
    return {
      //商品列表的数据
      goodsList: [],
    };
  },
  async created() {
    //商品列表的请求
    const { data: goodsList } = await this.$request.get("/goods");
    // console.log("我是商品列表", goodsList);
    this.goodsList = goodsList;
  },
  methods: {
    //点击 具体的商品 去往详情页！
    gotoDetails(id) {
      console.log(id);
      this.$router.push({
        name: "GotoDetails",
        params: {
          id,
        },
      });
    },
  },
};

goodsDetails.vue详情页组件

接受到home.vue组件传递过来的id，然后发起请求，展示详情页！

<template>
  <div>我是商品详情页</div>
</template>

<script>
export default {
  name: "GotoDetails",
  data() {
    return {};
  },
  created() {
    this.getDetail();
  },
  methods: {
    async getDetail() {
      const id = this.$route.params.id;
      //拿着id 发起请求 拿到详情页的数据
      const {
        data: {
          data: { result: goods },
        },
      } = await this.$request.get("/goods/" + id);

      console.log("我是详情页", goods);
      this.goods = goods;
    },
  },
  components: {},
};
</script>
<style  lang="scss" scoped>
</style>

商品列表之中点击图片显示商品的预览大图片

官网：https://vant-contrib.gitee.io/vant/#/zh-CN/image-preview
Details.vue组件

  <div class="details">
    <div class="smallImg-box">
      <van-image class="smallImg" @click="showBig" :src="goodsDetails.imgurl"></van-image>
    </div>
  </div>

this.goodsDetails 为商品的数据！

    // 显示大图片
    showBig() {
      //图片传入到数组之中
      ImagePreview([this.goodsDetails.imgurl]);
    },

详情页Details.vue之中

先根据id，获取对应的商品，显示在页面之中 => getDetail()
获取推荐图书的数据，显示页面之中 => getRecomment
点推荐图书，更换最新的图书
- 需要在created钩子函数之中，获取id，并且调用对应的方法，至于为什么在这边获取id，这是只要一创建组件，那么就获取id！
```
created() {
  const id = this.$route.params.id;
  this.getDetail(id);
  this.getRecomment();
},
```
点击跳转到详情页的时候，需要把下面的tabbar隐藏，显示加入购物车！
- 在Vuex之中定义一个状态 => isShowMemu 这个变量！ => 还未完成！
html

  <div class="details">
    <div class="smallImg-box">
      <van-image class="smallImg" @click="showBig" :src="goodsDetails.imgurl"></van-image>
      <div class="recommend-box">
        <h1>{{ goodsDetails.name}}</h1>
        <h4>{{ goodsDetails.auth}}</h4>
        <h5>连载中</h5>
      </div>
    </div>
    <div class="validity-con">
      <h3>内容简介</h3>
      <p>{{ goodsDetails.intro }}</p>
    </div>
    <div class="recomment-box">
      <h3>图书推荐</h3>
      <van-grid class="my-goods" :column-num="3">
        <van-grid-item
          v-for="value in goodsRecomemnt"
          :key="value._id"
          @click="gotoDetails(value._id)"
        >
          <van-image class="goodsImg" :src="value.imgurl" />
          <h4>{{ value.name}}</h4>
        </van-grid-item>
      </van-grid>
    </div>
  </div>

export default {
  name: "GotoDetails",
  data() {
    return {
      goodsDetails: [],
      goodsRecomemnt: [],
    };
  },
  created() {
    const id = this.$route.params.id;
    this.getDetail(id);
    this.getRecomment();
  },
  methods: {
    // 获取详情页的数据
    async getDetail(id) {
      //拿着id 发起请求 拿到详情页的数据
      const {
        data: {
          data: { result: goods },
        },
      } = await this.$request.get("/goods/" + id);

      // console.log("我是详情页111", goods[0]);
      this.goodsDetails = goods[0];
    },
    // 显示大图片
    showBig() {
      //图片传入到数组之中
      ImagePreview([this.goodsDetails.imgurl]);
    },
    // 获取推荐页的数据
    async getRecomment() {
      const { data } = await this.$request.get("/goods");
      // console.log("我是推荐的", data);
      this.goodsRecomemnt = data;
    },
    //跳转到 详情页
    gotoDetails(id) {
      console.log("我是跳转的id", id);
      this.$router.push({
        name: "Details",
        params: {
          id,
        }
      });
    },
  },
  beforeRouteUpdate(to, from, next) {
    // console.log(to.params.id, from.params.id);
    if (to.params.id !== from.params.id) {
      console.log("我是去的id", to.params.id);
      this.getDetail(to.params.id);
      this.getRecomment();
    }
    next();
  },s
};

详情页Details.vue之购物车

官网：https://vant-contrib.gitee.io/vant/#/zh-CN/card
需求：
- 先获取到购物车的数据渲染页面！
- 点击左侧的img的时候，跳转到详情页对应的详情页！

先获取到购物车的数据渲染页面！

store/index.js

  state: {
    //是否显示那个tabbar
    isShowMemu: true,
    //购物车的数据
    cartList: [{
      "_id": "5f4f5e38aaf12252fb74c93b",
      "name": "鼎定乾坤",
      "date": "2020 08-19 11:28",
      "intro": "玄黄缔造者……极致超脱之路,哪怕天难葬其身，地难灭其魂。亦难以跳出那个圈。星空崩塌，万族凋零。如何以一己之力逆转乾坤，颠倒阴阳。且看那一袭青衫，一柄长剑，一方圆鼎：脚踏修真，拳碎仙域，剑斩神界，鼎定至尊，极致超脱。书群，1141419286扣扣",
      "auth": "浅山深水",
      "imgurl": "imgbook1/f3aa24ea917f79a95b81ea86c91b4043.jpeg",
      "price": 123.2,
      "qty": 1
    }, {
      "_id": "5f4f5e38aaf12252fb74c93b",
      "name": "鼎定乾坤",
      "date": "2020 08-19 11:28",
      "intro": "玄黄缔造者……极致超脱之路,哪怕天难葬其身，地难灭其魂。亦难以跳出那个圈。星空崩塌，万族凋零。如何以一己之力逆转乾坤，颠倒阴阳。且看那一袭青衫，一柄长剑，一方圆鼎：脚踏修真，拳碎仙域，剑斩神界，鼎定至尊，极致超脱。书群，1141419286扣扣",
      "auth": "浅山深水",
      "imgurl": "imgbook1/f3aa24ea917f79a95b81ea86c91b4043.jpeg",
      "price": 123.2,
      "qty": 1
    }]
  },

渲染页面 Cart.vue

    <!-- 购物车item -->
    <van-card
      v-for="item in cartList"
      :key="item._id"
      :num="item.qty"
      :desc="item.auth"
      :title="item.name"
      :thumb="item.imgurl"
    >
      <template #tag>
        <van-checkbox v-model="checked"></van-checkbox>
      </template>
      <template #price>
        <span class="price">￥{{ item.price }}</span>
        <van-stepper v-model="value" theme="round" button-size="22" disable-input />
      </template>
      <template #footer>
        <van-button icon="cross" size="mini" plain type="danger"></van-button>
      </template>
    </van-card>

  created() {
    this.getCartList();
  },
  methods: {
    //获取购物车的数据
    getCartList() {
      // console.log("我是购物车item", this.$store.state.cartList);
      this.cartList = this.$store.state.cartList;
    },
  }

点击左侧的img的时候，跳转到详情页对应的详情页！

click-thumb 点击自定义图片时触发

CArt.vue组件

给van-card 绑定事件

    <van-card
      ...
      @click-thumb="gotoDetails(item._id)"
    >

在methods之中点击跳转！

    //点击左侧的小图标 跳转到详情页
    gotoDetails(id) {
      this.$router.push({
        name: "Details",
        params: {
          id,
        },
      });
    },

点击左侧的复选框的时候，勾选上复选框，然后影响全选按钮

所有的复选框勾选上了后，才触发全选按钮！

store/index.js文件中的state数据

    cartList: [{
      "_id": "5f4f5e38aaf12252fb74c93b",
      "name": "鼎定乾坤",
      "date": "2020 08-19 11:28",
      "intro": "玄黄缔造者……极致超脱之路,哪怕天难葬其身，地难灭其魂。亦难以跳出那个圈。星空崩塌，万族凋零。如何以一己之力逆转乾坤，颠倒阴阳。且看那一袭青衫，一柄长剑，一方圆鼎：脚踏修真，拳碎仙域，剑斩神界，鼎定至尊，极致超脱。书群，1141419286扣扣",
      "auth": "浅山深水",
      "imgurl": "imgbook1/f3aa24ea917f79a95b81ea86c91b4043.jpeg",
      "price": 123.2,
      "qty": 1,
      "check": false
    }, {
      "_id": "5f4f5e38aaf12252fb74c93e",
      "name": "雷神传之雷神再世",
      "date": "2020 08-18 22:47",
      "intro": "以武侠小说的名义 ，说一段刻骨铭心的爱情故事 ！",
      "auth": "猛士七",
      "imgurl": "imgbook1/ba83c1528c275b6c154ffd482d4541c3.jpeg",
      "price": 12,
      "qty": 1,
      "check": false
    }]

Cart.vue中的复选框

   <!-- 购物车item -->
    <van-card
      class="card-item"
      v-for="item in cartList"
      :key="item._id"
      :num="item.qty"
      :desc="item.auth"
      :title="item.name"
      :thumb="item.imgurl"
      @click-thumb.stop.native="gotoDetails(item._id)"
    >
      <template #tag class="checkBox">
        <van-checkbox v-model="item.check"></van-checkbox>
      </template>
      <template #price>
        <span class="price">￥{{ item.price }}</span>
        <van-stepper v-model="value" theme="round" button-size="22" disable-input />
      </template>
      <template #footer>
        <van-button icon="cross" size="mini" plain type="danger"></van-button>
      </template>
    </van-card>

    <!-- 提交订单 -->
    <van-submit-bar :price="3050" button-text="提交订单" @submit="onSubmit">
      <van-checkbox v-model="checkAll">全选</van-checkbox>
      <template #tip>
        你的收货地址不支持同城送,
        <span>修改地址</span>
      </template>
    </van-submit-bar>

  computed: {
    //全选按钮和 复选按钮
    checkAll: {
      get() {
        //遍历cartList每一项 所有都为选上的时候 为真！也就是把全选勾上 
        return this.cartList.every((item) => item.check);
      },
      set(val) {
        //这是全选  设置小复选框的状态！ 遍历所有小复选框 把当前的全选的val 给小复选框设置 ！
        this.cartList = this.cartList.map((item) => {
          item.check = val;
          return item;
        });
      },
    },
  },

计算总价

store/index.js

  state: {
    //是否显示那个tabbar
    isShowMemu: true,
    totalPrice: "",
    //购物车的数据
    cartList: [{
      "_id": "5f4f5e38aaf12252fb74c93b",
      "name": "鼎定乾坤",
      "date": "2020 08-19 11:28",
      "intro": "玄黄缔造者……极致超脱之路,哪怕天难葬其身，地难灭其魂。亦难以跳出那个圈。星空崩塌，万族凋零。如何以一己之力逆转乾坤，颠倒阴阳。且看那一袭青衫，一柄长剑，一方圆鼎：脚踏修真，拳碎仙域，剑斩神界，鼎定至尊，极致超脱。书群，1141419286扣扣",
      "auth": "浅山深水",
      "imgurl": "imgbook1/f3aa24ea917f79a95b81ea86c91b4043.jpeg",
      "price": 123.2,
      "qty": 1,
      "check": false
    }, {
      "_id": "5f4f5e38aaf12252fb74c93e",
      "name": "雷神传之雷神再世",
      "date": "2020 08-18 22:47",
      "intro": "以武侠小说的名义 ，说一段刻骨铭心的爱情故事 ！",
      "auth": "猛士七",
      "imgurl": "imgbook1/ba83c1528c275b6c154ffd482d4541c3.jpeg",
      "price": 12,
      "qty": 1,
      "check": false
    }]
  },
  getters: {
    //计算总价
    totalPrice(state) {
      return state.cartList.reduce((pre, cue) => pre + cue.price * cue.qty, 0) * 100
    }
  },

Cart.vue组件

    <!-- 提交订单 -->
    <van-submit-bar :price="totalPrice" button-text="提交订单" @submit="onSubmit">

    //计算总价
    totalPrice() {
      return this.$store.getters.totalPrice;
    },

点击修改数量的时候，修改总价！

change 当绑定值变化时触发的事件

Cart.vue中的mutations属性中修改

    //修改购物车数量
    changeQty(state, payload) {
      // console.log("mu修改", payload);
      state.cartList = state.cartList.map(item => {
        if (item._id === payload.id) {
          item.qty = payload.qty
        }
        return item
      })
    },

Cart.vue组件

@change="changeQty(item._id,$event)" 修改里面的数据的时候触发传递id 和保留之前的qty数值！

      <template #price>
        <span class="price">￥{{ item.price }}</span>
        <van-stepper
          @change="changeQty(item._id,$event)"
          v-model="item.qty"
          theme="round"
          button-size="22"
          disable-input
        />
      </template>

methods:{
      //修改数量
    changeQty(id, qty) {
      // 获取当前的值！
      // console.log("我是修改的111", id, qty);
      this.$store.commit("changeQty", { id, qty });
    },
}

点击加入购物车

假如购物车之中存在这个商品，那么就触发修改qty数量的方法
假如购物车里面不存在这个商品，那么就触发添加购物车商品！

store/index.js

 state: {
    //购物车的数据
    cartList: [{
      "_id": "5f4f5e38aaf12252fb74c93b",
      "name": "鼎定乾坤",
      "date": "2020 08-19 11:28",
      "intro": "玄黄缔造者……极致超脱之路,哪怕天难葬其身，地难灭其魂。亦难以跳出那个圈。星空崩塌，万族凋零。如何以一己之力逆转乾坤，颠倒阴阳。且看那一袭青衫，一柄长剑，一方圆鼎：脚踏修真，拳碎仙域，剑斩神界，鼎定至尊，极致超脱。书群，1141419286扣扣",
      "auth": "浅山深水",
      "imgurl": "imgbook1/f3aa24ea917f79a95b81ea86c91b4043.jpeg",
      "price": 123.2,
      "qty": 1,
      "check": false
    }, {
      "_id": "5f4f5e38aaf12252fb74c93e",
      "name": "雷神传之雷神再世",
      "date": "2020 08-18 22:47",
      "intro": "以武侠小说的名义 ，说一段刻骨铭心的爱情故事 ！",
      "auth": "猛士七",
      "imgurl": "imgbook1/ba83c1528c275b6c154ffd482d4541c3.jpeg",
      "price": 12,
      "qty": 1,
      "check": false
    }]
  },
  getters: {
    //计算总价
    totalPrice(state) {
      return state.cartList.reduce((pre, cue) => pre + cue.price * cue.qty, 0) * 100
    }
  },
  mutations: {
    //修改购物车数量
    changeQty(state, payload) {
      // console.log("mu修改", payload);
      state.cartList = state.cartList.map(item => {
        if (item._id === payload.id) {
          item.qty = payload.qty
        }
        return item
      })
    },
    // 添加购物车
    addToCart(state, payload) {
      // console.log("我是添加购物车", payload);
      state.cartList.unshift(payload)
    }
  },

Details.vue

  <van-goods-action-button @click="addToCart" type="warning" text="加入购物车" />

判断购物车里面是否有这个商品有的话数量+1 没有的话就qty为1

  methods:{
    //加入购物车
    addToCart() {
      const { _id: id } = this.goodsDetails;
      //根据id 去查询购物车 里面是否含有该id的商品！
      const current = this.$store.state.cartList.filter(
        (item) => item._id === id
      )[0];
      // console.log("我是当前的", current); // 如果有的话 那么qty++ 没有的话添加商品！
      if (current) {
        this.$store.commit("changeQty", { id, qty: current.qty + 1 });
      } else {
        const goods = {
          ...this.goodsDetails,
          qty: 1,
        };
        // 调用mutation 中的addToCart方法
        this.$store.commit("addToCart", goods);
      }
    },
  }

点击购物车之中的删除按钮

store/index.js

  state: {
    //是否显示那个tabbar
    isShowMemu: true,
    totalPrice: "",
    //购物车的数据
    cartList: [{
      "_id": "5f4f5e38aaf12252fb74c93b",
      "name": "鼎定乾坤",
      "date": "2020 08-19 11:28",
      "intro": "玄黄缔造者……极致超脱之路,哪怕天难葬其身，地难灭其魂。亦难以跳出那个圈。星空崩塌，万族凋零。如何以一己之力逆转乾坤，颠倒阴阳。且看那一袭青衫，一柄长剑，一方圆鼎：脚踏修真，拳碎仙域，剑斩神界，鼎定至尊，极致超脱。书群，1141419286扣扣",
      "auth": "浅山深水",
      "imgurl": "imgbook1/f3aa24ea917f79a95b81ea86c91b4043.jpeg",
      "price": 123.2,
      "qty": 1,
      "check": false
    }, {
      "_id": "5f4f5e38aaf12252fb74c93e",
      "name": "雷神传之雷神再世",
      "date": "2020 08-18 22:47",
      "intro": "以武侠小说的名义 ，说一段刻骨铭心的爱情故事 ！",
      "auth": "猛士七",
      "imgurl": "imgbook1/ba83c1528c275b6c154ffd482d4541c3.jpeg",
      "price": 12,
      "qty": 1,
      "check": false
    }]
  },
    //删除购物车 item payload 为前面传递过来的id
    delGoods(state, payload) {
      state.cartList = state.cartList.filter(item => item._id !== payload)
    }
  },

Cart.vue组件

  <van-button icon="cross" size="mini" plain type="danger" @click="delGoods(item._id)"></van-button>

  methods: {
    //获取购物车的数据
    getCartList() {
      this.cartList = this.$store.state.cartList;
    },
    //删除商品
    delGoods(id) {
      this.$store.commit("delGoods", id);
      this.getCartList();
    },
  }

点击购物车之中的清空购物车按钮

store/index.js

    //清空购物车
    clearCart(state) {
      console.log("我是清空触发");
      state.cartList = []
    }

Cart.vue组件

    <!-- 清空购物车 -->
    <div style="padding:10px">
      <p v-show="!isShowClearCart">购物车空空如也！</p>
      <van-button plain type="danger" v-show="isShowClearCart" size="small" @click="clearCart">清空购物车</van-button>
    </div>

注意点：需要在data之中定义 isShowClearCart变量默认为true 显示清空购物车按钮！

    //清空购物车
    clearCart() {
      this.$store.commit("clearCart");
      this.getCartList();
      if (this.cartList.length === 0) {
        this.isShowClearCart = false;
      } else {
        this.isShowClearCart = true;
      }
    },

在多个页面显示购物车的数量

MainTabbar.vue

显示购物车的数量 :badge="item.text === '购物车' ? cartLength :''"

    <van-tabbar-item
      v-for="item in tabList"
      :key="item.text"
      :icon="item.icon"
      :to="item.path"
      :badge="item.text === '购物车' ? cartLength :''"
    >{{item.text}}</van-tabbar-item>

  computed: {
    cartLength() {
      return this.$store.state.cartList.length;
    },
  },

在详情页之中添加navTab

需要的组件.vue

    <!-- 导航栏目 -->
    <van-nav-bar left-text="返回" @click-left="backHome" left-arrow></van-nav-bar>

  methods: {
    //点击返回首页
    backHome() {
      this.$router.push({
        name: "Home",
      });
    },
  }

actions异步

点击+ 的时候查询库存假如超过库存那么就不再添加否则可以添加！

store/index.js

 cartList: [{}],//数据
 mutations: {
    //修改购物车数量
    changeQty(state, payload) {
      console.log("mu修改数量", payload);
      state.cartList = state.cartList.map(item => {
        if (item._id === payload.id) {
          item.qty = payload.qty
        }
        return item
      })
    },
  },
  actions: {
    //请求 查询库存多少！ /:id/kucun
    async changeQtyAsunc(context, payload) {
      const {
        data
      } = await $request.get(`/goods/${payload.id}/kucun`)
      if (payload.qty > data.kucun) {
        Notify({
          type: 'danger',
          message: '超过库存，仅能下单这些！'
        });
        payload.qty = data.kucun

      }
      // console.log("我是修改后的", payload);
      context.commit("changeQty", payload)
    }

  },

Cart.vue

      <template #price>
        <span class="price">￥{{ item.price }}</span>
        <van-stepper
          @change="changeQty(item._id,$event)"
          v-model="item.qty"
          theme="round"
          button-size="22"
          disable-input
        />
      </template>

mmethods:{
    //修改数量
    changeQty(id, qty) {
      // 获取当前的值！
      // console.log("我是修改的111", id, qty);
      // this.$store.commit("changeQty", { id, qty });
      this.$store.dispatch("changeQtyAsunc", { id, qty });
    },
}

Details.vue 查询库存

点击购物车之中的添加商品查询库存

    <!-- 购物车 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" color="#07c160" />
      <van-goods-action-icon :badge="cartLength" @click="gotoCart" icon="cart-o" text="购物车" />
      <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
      <van-goods-action-button @click="addToCart" type="warning" text="加入购物车" />
      <van-goods-action-button @click="buyNow" type="danger" text="立即购买" />
    </van-goods-action>

methods:{
      //加入购物车
    addToCart() {
      //判断购物车里面是否有这个商品 有的话 数量+1 没有的话 就qty为1
      const { _id: id } = this.goodsDetails;
      //根据id 去查询购物车 里面是否含有该id的商品！
      const current = this.$store.state.cartList.filter(
        (item) => item._id === id
      )[0];
      // console.log("我是当前的", current); // 如果有的话 那么qty++ 没有的话添加商品！
      if (current) {
        this.$store.dispatch("changeQtyAsunc", { id, qty: current.qty + 1 });
      } else {
        const goods = {
          ...this.goodsDetails,
          qty: 1,
        };
        // 调用mutation 中的addToCart方法
        this.$store.commit("addToCart", goods);
      }
    },
    //立即购买
    buyNow() {
      this.addToCart();
      //跳转到购物车
      this.$router.push({
        name: "Cart",
      });
    },
}

在Home.vue组件中一进入就获取购物车的数据

在home.vue组件中先发起请求 created之中 this.$store.dispatch("getCart")

在store/index.js之中，actions之中发起请求

    state:{
      goodslist:[]
    }
    mutations:{
      initCart(state,data){
          state.goodslist = data;
      },
    },
    actions:{
      async getCart(){
          const {data} = await request.get(`/cart`);
          context.commit('initCart',data.data)
      }
  }

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

Vue

echarts堆叠柱状图

Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

Vue

所有评论(0)

查看更多评论

不求人0

@weixin_47409897

已为社区贡献15条内容

v浅谈vue之vant框架

不求人0

目录

vant框架的使用

使用一个Tabbar 标签栏

App.vue

封装为一个MainTabbar.vue组件

使用一个Swipe 轮播图

Home.vue组件使用轮播图

使用一个 Gird 宫格 实现商品列表展示

Home.vue组件

goodsDetails.vue详情页组件

商品列表之中 点击图片显示商品的预览 大图片

详情页Details.vue之中

详情页Details.vue之购物车

先获取到购物车的数据 渲染页面！

store/index.js

渲染页面 Cart.vue

点击左侧的img的时候，跳转到详情页 对应的详情页！

CArt.vue组件

点击左侧的复选框的时候，勾选上复选框，然后影响全选按钮

store/index.js文件中的state数据

Cart.vue中的复选框

计算总价

store/index.js

Cart.vue组件

点击修改 数量的时候，修改总价！

Cart.vue中的mutations属性中修改

Cart.vue组件

点击加入购物车

store/index.js

Details.vue

点击购物车之中的删除按钮

store/index.js

Cart.vue组件

点击购物车之中的清空购物车按钮

store/index.js

Cart.vue组件

在多个页面显示购物车的 数量

MainTabbar.vue

在详情页之中 添加navTab

需要的组件.vue

actions异步

store/index.js

Cart.vue

Details.vue 查询库存

在Home.vue组件中 一进入就获取购物车的数据

所有评论(0)

不求人0

使用一个 Gird 宫格实现商品列表展示

商品列表之中点击图片显示商品的预览大图片

先获取到购物车的数据渲染页面！

点击左侧的img的时候，跳转到详情页对应的详情页！

点击修改数量的时候，修改总价！

在多个页面显示购物车的数量

在详情页之中添加navTab

在Home.vue组件中一进入就获取购物车的数据