响应式布局+Vux=小米商城列表+小米商城购物车

列表页

<template>
  <div class="home">
    <div class="header">
      头部
      <div class="xia">
        <button @click="jia">升序</button>
        <button @click="jia">降序</button>
      </div>
    </div>

    <div class="box">
      <div class="box2">
        <el-row class="tac">
          <el-col :span="12">
            <el-menu default-active="2" class="el-menu-vertical-demo">
              <el-submenu index="1">
                <template slot="title">
                  <i class="el-icon-location"></i>
                  <span>All</span>
                </template>

                <el-submenu index="1-4"></el-submenu>
              </el-submenu>
              <el-menu-item index="2">
                <i class="el-icon-menu"></i>
                <span slot="title">0.00-50.00</span>
              </el-menu-item>
              <el-menu-item index="3">
                <i class="el-icon-document"></i>
                <span slot="title">50.00-100.00</span>
              </el-menu-item>
              <el-menu-item index="4">
                <i class="el-icon-setting"></i>
                <span slot="title">100.00-3000.00</span>
              </el-menu-item>
            </el-menu>
          </el-col>
        </el-row>
      </div>

      <div class="box3">
        <el-row :gutter="10">
          <el-col :xs="24" :sm="8" :md="6" v-for="(item,index) in list" :key="index">
            <div class="item_container">
              <img :src="item.productImage" width="100%" class="imgs" @click="zou(item)" />
              <br />
              {{item.productName}}
              <br />
              <span class="money">￥ {{item.salePrice}}</span>
              <br />

              <button class="btn" @click="oncart">
                <b>加入购物车</b>
              </button>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- 加载动态图片 -->
    <div class="box999" v-customShow="isShowLoading">
      <img src="../assets/dong.gif" class="dong" />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // list: [],
      show: false,
      isShowLoading: false,
      page: 1
    };
  },
  computed: {
    list: function() {
      return this.$store.state.list;
    }
  },

  mounted() {
    this.$store.dispatch("gotolie");
  },

  // 升序降序
  methods: {
    zou(item) {
      this.$store.dispatch("gotocart", item);
      // console.log(item)
    },

    jia() {
      this.show = !this.show;
      if (this.show) {
        this.list.sort((a, b) => {
          return b.salePrice - a.salePrice;
        });
      } else {
        this.list.sort((a, b) => {
          return a.salePrice - b.salePrice;
        });
      }
    },

    oncart() {
      this.$router.push({
        path: "/cart"
      });
    }
  },

  // 自定义标签
  directives: {
    customShow: {
      bind() {},
      inserted(el, binding) {
        if (binding.value) {
          el.style.visibility = "visible";
        } else {
          el.style.visibility = "hidden";
        }
      },
      update(el, binding) {
        if (binding.value) {
          el.style.visibility = "visible";
        } else {
          el.style.visibility = "hidden";
        }
      }
    }
  }
};
</script>

<style scoped>
.home {
  width: 100%;
  height: 100%;
}
.header {
  width: 100%;
  height: 80px;
  background: cyan;
}
.xia {
  display: none;
}
.box {
  width: 100%;
  display: inline-flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.item_container {
  height: 350px;
  /* background-color: rgb(187, 176, 176); */

  margin: 10px;
}

.box2 {
  width: 20%;
  background-color: rgb(187, 176, 176);
  height: 730px;
}
.box3 {
  width: 80%;
  background-color: skyblue;
}

.money {
  color: red;
}
.btn {
  border: 1px solid red;
  width: 100%;
  height: 40px;
  text-align: center;
  color: rgb(226, 51, 51);
  background: white;
}

@media screen and (max-width: 768px) {
  .item_container {
    height: 200px;
  }
  .box2 {
    display: none;
    position: relative;
  }
  .box3 {
    width: 100%;
  }
  .imgs {
    width: 20%;
  }
  .btn {
    width: 20%;
    position: absolute;
    right: 20%;
  }
  .xia {
    display: block;
  }
}
.box999 {
  width: 100%;
  height: 100px;
  text-align: center;
  /* border: 1px solid red; */
}
.dong {
  width: 200px;
  height: 100px;
}
</style>

购物车页面

<template>
  <div>
    <van-card
      class="yang"
      :price="item.salePrice"
      desc="描述信息"
      :title="item.productName"
      :thumb="item.productImage"
      v-for="(item,index) in cartItems"
      :key="index"
    >
      <template #footer>
        <van-stepper v-model="item.count" @change="bian" />
      </template>
      <template #bottom>
        <input type="checkbox" @click="onClick(item)" :checked="item.checked" />
      </template>
    </van-card>
    <div class="bom">
      全选：
      <input type="checkbox" :checked="selectAll" @click="allsele" />
      <span>{{`总量:${zliang} `}}</span>
      <span>{{zjia | quzheng | addTitle}} 元</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },

  methods: {
    onClick(item) {
      // console.log(event.target.checked)
      // console.log(item);
      // 复选框状态
      this.$store.dispatch("gotoxuan", {
        _id: item._id,
        checked: event.target.checked
      });
    },
    // 布尔值 判断 选中 状态  true 和false
    allsele() {
      this.$store.dispatch("gonan", event.target.checked);
    },
    //监听 商品 加一 数量和价格 的变化
    bian() {
      this.$store.dispatch("bian");
    }
  },
  computed: {
    // 购物车 接收
    cartItems: function() {
      return this.$store.state.cartItems;
    },
    // 全选 接收
    selectAll: function() {
      return this.$store.state.allquan;
    },
    // 总量 接收
    zliang: function() {
      return this.$store.state.zliang;
    },
    // 总价 接收
    zjia: function() {
      return this.$store.state.zjia;
    }
  },
  // 过滤器
  filters: {
    addTitle: function(text) {
      return "总价 :" + text;
    },

    quzheng: function(text) {
      return parseFloat(text).toFixed(2);
    }
  }
};
</script>

<style scoped>
.yang {
  background: gray;
}
.bom {
  width: 100%;
  height: 70px;
  background: cyan;
  position: fixed;
  left: 0;
  bottom: 0;
}
</style>

Vuex 代码

import Vue from 'vue'
import Vuex from 'vuex'
import axios from "axios";
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    list: [], //列表页面
    cartItems: JSON.parse(localStorage.getItem("cartItems")) || [], //购物车 
    allquan: false, //全选反选
    zliang: 0,  //总量
    zjia: 0   // 总价
  },
  mutations: {
    //获取 列表页面 
    gotolie(state, items) {
      state.list = [...items];
    },
    //去重代码同一个商品 不能叠加
    gotocart(state, item) {
      var flag = false;
      state.cartItems.forEach((element) => {
        if (element._id === item._id) {
          element.count++;
          flag = true
        }
      })
      if (!flag) {
        item.count = 1;
        item.checked = false;
        state.cartItems.push(item);
      }
      localStorage.setItem("cartItems", JSON.stringify(state.cartItems)) //本地存储

    },
    //全选 反选 
    gotoxuan(state, item) {
      state.cartItems.forEach((element) => {
        if (element._id === item._id) {
          element.checked = item.checked
        }
      });
      //同步全选状态
      state.allquan = state.cartItems.every((ele) => {
        return ele.checked === true
      })
      //   根据选中状态 计算总价和总量
      state.zliang = 0;
      state.zjia = 0;
      state.cartItems.forEach((element) => {
        if (element.checked) {
          state.zliang += element.count;
          state.zjia += (element.count * element.salePrice);
        }
      })
    },
    //监听 商品 加一 数量和价格 的变化
    bian(state) {
      // 计算总价和总量
      state.zliang = 0;
      state.zjia = 0;
      state.cartItems.forEach((element) => {
        if (element.checked) {
          state.zliang += element.count;
          state.zjia += (element.count * element.salePrice);
        }
      })
    },
    // boolean 判断 true 和 false 状态 选中的状态
    gonan(state, boolean) {
      state.allquan = boolean;
      state.cartItems.forEach((element) => {
        element.checked = boolean
      });
      // 计算总价和总量
      state.zliang = 0;
      state.zjia = 0;
      state.cartItems.forEach((element) => {
        if (element.checked) {
          state.zliang += element.count;
          state.zjia += (element.count * element.salePrice);
        }
      })
    }
  },
  actions: {
    // 请求 列表数据
    gotolie(context) {
      axios.get("http://localhost:8080/data.json").then((res) => {
        console.log(res.data.result.list)
        context.commit("gotolie", res.data.result.list)
      })
    },
    // 购物车
    gotocart(context, item) {
      context.commit("gotocart", item)
    },
    // 选中状态
    gotoxuan(context, item) {
      context.commit("gotoxuan", item)
    },
    // boolean 判断 true 和 false 状态
    gonan(context, boolean) {
      context.commit("gonan", boolean)
    },
    // /监听 商品 加一 数量和价格 的变化
    bian(context) {
      context.commit("bian")
    }
  },
  modules: {

  }
})

列表页面

购物车