準(zhǔn)備工作

1花履、 建立git倉庫
2芽世、 本地建倉,克隆SSH地址

git clone git@gitee.com:xxx/mynet163.git
cd (進(jìn)入當(dāng)前的項目文件位置)
code . (打開vscode)

3、 使用VueCli創(chuàng)建項目

vue create . (在當(dāng)前文件下創(chuàng)建項目)
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"
    />
    <!-- 復(fù)選框 -->
    <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"
        />
        <!-- 步進(jìn)器 -->
        <!-- 解決冒泡--給步進(jìn)器多加一個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?'刪除':'結(jié)算'" @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,
      // 步進(jìn)器
      value: 1,
      // 點擊編輯顯示樣式與隱藏
      isShow: false,
      // 購物車數(shù)據(jù)
      cartArr: [
        {
          id: 1,
          checked: false,
          thumb:
            "http://openfile.meizu.com/group1/M00/07/2C/Cgbj0Vy9czeAB1b0AAbEyeUfNvI853.png240x240.jpg",
          name: "魅族 16th",
          desc: "全網(wǎng)通公開版 騎士黑 6+64GB 官方標(biāo)配",
          price: 2899.0,
          num: 1,
        },
        {
          id: 2,
          checked: false,
          thumb:
            "http://openfile.meizu.com/group1/M00/07/2C/Cgbj0Vy9czeAB1b0AAbEyeUfNvI853.png240x240.jpg",
          name: "魅族 16th",
          desc: "全網(wǎng)通公開版 騎士黑 6+64GB 官方標(biāo)配",
          price: 3999.0,
          num: 2,
        },
        {
          id: 3,
          checked: false,
          thumb:
            "http://openfile.meizu.com/group1/M00/07/2C/Cgbj0Vy9czeAB1b0AAbEyeUfNvI853.png240x240.jpg",
          name: "魅族 16th",
          desc: "全網(wǎng)通公開版 騎士黑 6+64GB 官方標(biāo)配",
          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();
    },
    // 步進(jìn)器
    changeNum() {
      this.total();
    },
    // 封裝總價的函數(shù)
    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>