使用VueCli建立购物车

准备工作

1、建立git仓库
2、本地建仓,克隆SSH地址

git clone git@gitee.com:xxx/mynet163.git
cd (进入当前的项目文件位置)
code . (打开vscode)

3、使用VueCli创建项目

vue create . (在当前文件下创建项目)
yarn serve

4、安装VantUi

安装 + 按需引入自动化 + 配置

yarn add vant
yarn add babel-plugin-import
//在 babel.config.js 中写入
plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]

5、 VantUi组件独立化
在src同级目录下新建文件夹 vantui , 新建文件 index.js

import Vue from 'vue';
import { NavBar,Checkbox, CheckboxGroup ,Card,SubmitBar,Stepper} from 'vant';

Vue.use(NavBar);
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
Vue.use(Card);
Vue.use(SubmitBar);
Vue.use(Stepper);

在 main.js 文件中引入 vantui / index.js

import "@/vantui/index.js"

HTML + CSS + VUE

<template>
  <div class="home">
    <van-nav-bar
      title="购物车"
      :right-text="isShow?'完成':'编辑'"
      left-arrow
      @click-right="isShow=!isShow"
    />
    <!-- 复选框 -->
    <van-checkbox-group v-model="result">
      <van-checkbox
        @click="clickSingel(index)"
        :name="item.id"
        v-for="(item,index) in cartArr"
        :key="item.id"
      >
        <van-card
          :num="item.num"
          :price="item.price"
          :desc="item.desc"
          :title="item.name"
          :thumb="item.thumb"
        />
        <!-- 步进器 -->
        <!-- 解决冒泡--给步进器多加一个div盒子，给个空的点击事件  @事件.stop -->
        <div class="box" @click.stop="">
          <van-stepper v-model="item.num" v-show="isShow" @change="changeNum" />
        </div>
      </van-checkbox>
    </van-checkbox-group>
    <!-- 提交订单 -->
    <van-submit-bar :button-color="isShow?'#00c3f5':'#f52d2a'" :price="GetTotalPrice*100" :button-text="isShow?'删除':'结算'" @submit="onSubmit('删除')">
      <van-checkbox class="allbtn"
        v-model="checked"
        
        @click="clickAll"
      >全选</van-checkbox>
    </van-submit-bar>
    <div class="demo" v-show="isShow"></div>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      // 单选
      result: [],
      // 全选
      checked: false,
      // 步进器
      value: 1,
      // 点击编辑显示样式与隐藏
      isShow: false,
      // 购物车数据
      cartArr: [
        {
          id: 1,
          checked: false,
          thumb:
            "//openfile.meizu.com/group1/M00/07/2C/Cgbj0Vy9czeAB1b0AAbEyeUfNvI853.png240x240.jpg",
          name: "魅族 16th",
          desc: "全网通公开版 骑士黑 6+64GB 官方标配",
          price: 2899.0,
          num: 1,
        },
        {
          id: 2,
          checked: false,
          thumb:
            "//openfile.meizu.com/group1/M00/07/2C/Cgbj0Vy9czeAB1b0AAbEyeUfNvI853.png240x240.jpg",
          name: "魅族 16th",
          desc: "全网通公开版 骑士黑 6+64GB 官方标配",
          price: 3999.0,
          num: 2,
        },
        {
          id: 3,
          checked: false,
          thumb:
            "//openfile.meizu.com/group1/M00/07/2C/Cgbj0Vy9czeAB1b0AAbEyeUfNvI853.png240x240.jpg",
          name: "魅族 16th",
          desc: "全网通公开版 骑士黑 6+64GB 官方标配",
          price: 2699.0,
          num: 3,
        },
      ],
      // 计算总价
      GetTotalPrice: 0,
    };
  },
  methods: {
    onClickRight() {},
    // 删除
    onSubmit(val) {
      if(val=="删除"){
        this.cartArr=[];
      }
    },
    // 全选
    clickAll() {
      // this.checked = !this.checked;
      // 遍历arr,判断是否checked是否为true,是就让单选框全部被选中
      this.cartArr.forEach((item) => {
        if (this.checked) {
          this.result.push(item.id);
          item.checked = true;
        } else {
          this.result = [];
          item.checked = false;
        }
      });
      this.total();
    },
    // 单选
    clickSingel(index) {
      this.cartArr[index].checked = !this.cartArr[index].checked;
      if (this.result.length == this.cartArr.length) {
        this.checked = true;
      } else {
        this.checked = false;
      }
      this.total();
    },
    // 步进器
    changeNum() {
      this.total();
    },
    // 封装总价的函数
    total() {
      let money = 0;

      this.cartArr.forEach((item) => {
        if (item.checked) {
          money += item.num * item.price;
        }
      });
      this.GetTotalPrice = money;
    },
  },
};
</script>

<style lang="less" scoped>
.home {
  background-color: #eee;
  height: 100vh;
}
/deep/.van-nav-bar .van-icon {
  font-size: 18px;
  color: #616161 !important;
}
/deep/.van-nav-bar__text {
  color: #999;
}
/deep/.van-checkbox-group {
  background-color: #cfcfcf;
  // margin-top: 10px;
}
/deep/.van-checkbox__label {
  width: 100%;
  background-color: #fff;
}
/deep/.van-card__content {
  text-align: left;
}
/deep/.van-checkbox {
  position: relative;
  background-color: #fff;
  padding: 0 10px;
  margin-top: 10px ;
}
/deep/.van-button {
  border-radius: 0;
  height: 50px;
}
/deep/.van-stepper {
  position: absolute;
  right: 5px;
  bottom: 10px;
}
/deep/.van-card {
  background-color: #fff;
}
.demo {
  width: 135px;
  height: 50px;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  left: 30%;
  z-index: 999;
}
/deep/.van-card__price {
  color: #f0415f;
}
.allbtn{
  margin-top: 0;
}
</style>