列表添加至购物车（Typescript React Shopping cart）

效果概述

列表页面显示数据，实现按尺码进行过滤，实现价格高低排序。点击添加至购物车，实现购物车所需内容。

具体效果

点击跳转至效果页面（Typescript React Shopping cart）

1.列表页Tab切换效果实现
2.列表页面点击排序效果
3.请求接口实现商品列表
4.添加购物车的数据保存到本地存储， 数据存放以及操作使用vuex。
5.商品点击加减变化效果
6.计算总数量和总价钱
7.移动端适配

实现后效果图：

列表添加至购物车（Typescript React Sho）

大致代码思路：

• 根页面：

  router-view 标签接收数据
  

• 列表页：

  在 main.js 页面引入 axios 插件
  在 main.js 页面引入 rem 移动端适配代码
  通过 rem 进行移动端适配
  通过 axios 接口地址请求数据
  把请求到的数据赋值给data里的选项
  在 html 代码中通过 v-for 实现循环，把数据渲染至视图中
  点击添加至购物车
  按价格实现从高到低，从低到高
  按尺码进行过滤
  实现分期购买价格
  

• 购物车页：

  通过vuex获取添加过来得数据
  在 html 代码中通过 v-for 实现循环，把数据渲染至视图中
  数量加减
  总价和分期价格
  

main.js代码：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'
Vue.prototype.$axios = axios
import '@/rem'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

rem 适配页面代码：

const WIDTH = 375//如果是尺寸的设计稿在这里修改
const setView = () => {
    //设置html标签的fontSize
    document.documentElement.style.fontSize = (100 * document.documentElement.clientWidth / WIDTH) + 'px'
}
window.onresize = setView
setView()

实现路由跳转页代码：

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: '/shopping',
    name: 'Shopping',
    component:()=>import('@/views/Shopping.vue')
  }
]
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
export default router

根页面代码：

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 16px;
}
</style>

vuex页面代码：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    list: JSON.parse(localStorage.getItem('list')) || [],
  },
  getters: {
    // 请求到多少个
    totals(state) {
      let num = 0;
      state.list.map((item) => {
        num += item.num;
      });
      return num;
    },
    // 购物车有多少个
    total(state) {
      let num = 0;
      state.list.map((item) => {
        num += item.num * item.price;
      });
      return num;
    },
    // 购物车总价
    installments(state) {
      let num = 0;
      state.list.map((item) => {
        num += (item.num * item.price) / item.installments;
      });
      return Math.floor(num * 100) / 100;
    },
  },
  mutations: {
    // 添加至购物车
    addShopping(state, data) {
      // 需要添加的内容
      let arr = {id:state.list+1,title:data.title,price:data.price,style:data.style,availableSizes:data.availableSizes,num:1,installments:data.installments}
      // 判断需要添加的内容在购物车中是否存在
      let a = state.list.some((item) => {
        return item.title == data.title;
      });
      // 获取添加的值在购物车中的下标
      let num = 0
      for(let i=0; i<state.list.length; i++){
        if(state.list[i].title == data.title){
          num = i
        }
      }
      // 判断添加的内容购物车中是否存在
      if (a) {
        // 存在则数量加一
        state.list[num].num = state.list[num].num+1
      } else {
        // 不存在则添加至购物车
        state.list.push(arr)
      }
      // 存储到本地
      localStorage.setItem('list',JSON.stringify(state.list))
    },
    // 购物车单个数量减
    jian(state, data) {
      // 判断数量是否大于一，大于一则点击一次减一，否则不变
      data.num > 1 ? data.num = data.num - 1 : data.num 
      // 本地存储
      localStorage.setItem('list',JSON.stringify(state.list))
    },
    // 购物车单个数量加
    jia(state, data) {
      // 点击加一
      data.num = data.num + 1
      // 本地存储
      localStorage.setItem('list',JSON.stringify(state.list))
    },
    // 购物车中删除
    deletes(state, data) {
      // 点击删除
      state.list.splice(data.id - 1, 1)
      // 本地存储
      localStorage.setItem('list',JSON.stringify(state.list))
    },
  },
  actions: {
  },
  modules: {
  }
})

列表页代码：

<template>
  <div class="box">
    <div class="top">
      <div class="topleft"></div>
      <router-link to="/shopping" tag="div" class="topright">
        <img
          src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAQAAADZc7J/AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAADdcAAA3XAUIom3gAAAAHdElNRQfiCwwQEgYn7+gWAAABQklEQVRIx9WTsUoDQRRF72xMYSFokcRCjBFESGWRwtZe8AtEFFNrI1bB0tLGQuzs/AJB8AO2kZRCxBiRQNKIoIYoyLFwCZuss9nNgpBXzc7be3j3zow09mU48321zVF8gNtbZ5Q1UwmGYQPIxFU5vnVdUuHfARO+OD5oa9GzM6NcbICkem+CLZ0kA1zKHQ2w6tlpqRUN4AwA5knFiTAISGsuHqDfwoOkgp4kUkoP1WI+Azt02ZYk9hle3cAEBh69c7iKEOJ30IJU/71KpqbaKCH6b0LEGgTcaYXpeIj+GJf54pyI70CSTACxq1M5ehmqvDCHfwIkFrQW4S1WzXUCq+E5lNhkMqSfo0ze3t7hlWeqIfJ3GnQo2n644ZhZYMnSL9OQcKnYAHs0ueUeY+nn6eDyRskGcFjngGxIBkUqVvk41g+oBJ136GBf8AAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxOC0xMS0xMlQxNjoxODowNiswMTowMEVm3zEAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTgtMTEtMTJUMTY6MTg6MDYrMDE6MDA0O2eNAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAABJRU5ErkJggg=="
          alt=""
        />
        <span>{{ totals }}</span>
      </router-link>
    </div>
    <div class="sizes">
      <div class="sizes-li">
        <h4>Sizes：</h4>
        <div class="size">
          <button @click="sizes('XS')">XS</button>
          <button @click="sizes('S')">S</button>
          <button @click="sizes('M')">M</button>
          <button @click="sizes('ML')">ML</button>
          <button @click="sizes('L')">L</button>
          <button @click="sizes('XL')">XL</button>
          <button @click="sizes('XXL')">XXL</button>
        </div>
        <p>Leave a star on Github if this repository was useful :)</p>
        <a href="#">Star</a>
      </div>
      <p>{{ listd.length }} Product(s) found</p>
      <select name="" id="" v-model="val" @click="vals">
        <option value="默认">默认</option>
        <option value="升序">高到低</option>
        <option value="降序">低到高</option>
      </select>
    </div>
    <ul class="content">
      <li v-for="item in lists" :key="item.id">
        <div class="img">
          <p v-show="item.isFreeShipping">免运费</p>
        </div>
        <div class="title">{{ item.title }}</div>
        <p class="price">{{ item.currencyFormat }} {{ item.price }}</p>
        <p class="installments" v-show="item.installments == 0 ? false : true">
          or {{ item.installments }} x {{ item.currencyFormat }}
          {{ Math.floor((item.price / item.installments) * 100) / 100 }}
        </p>
        <router-link to="/shopping" class="join"
          ><button @click="addShopping(item)">加入购物车</button></router-link
        >
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
export default {
  data() {
    return {
      listd: [],
      lists: [],
      val: "默认",
    };
  },
  // 获取 vuex 里的内容
  computed: {
    ...mapState(["list"]),
    ...mapGetters(["totals"]),
  },
  created() {
    // 进入时调用
    this.request();
  },
  methods: {
    request() {
      // 请求接口
      this.$store.commit("request");
      this.$axios
        .get(`https://react-shopping-cart-67954.firebaseio.com/products.json`)
        .then(({ data }) => {
          console.log(data);
          // 把请求到的值分别赋值给 listd 和 lists
          this.listd = data.products;
          this.lists = data.products;
          // 存储到本地
          localStorage.setItem("listsd", JSON.stringify(this.listd));
        });
    },
    //添加到购物车
    addShopping(item) {
      this.$store.commit("addShopping", item);
    },
    // 点击显示尺码
    sizes(val) {
      // lists 赋值为空
      this.lists = [];
      // 给 listd 进行过滤
      this.listd.filter((item, index) => {
        // listd值得availableSizes进行循环
        item.availableSizes.some((items) => {
          // 判断availableSizes的值是否等于传递过来的参数
          if (items == val) {
            // 等于则追加到 lists 中
            this.lists.push(item);
          }
        });
      });
    },
    // 升序降序
    vals() {
      // 给 lists 用 sort 进行排序
      this.lists.sort((p1, p2) => {
        // 判断val 等于升序 则 2 - 1
        if (this.val == "升序") {
          return p2.price - p1.price;
          // 判断val 等于降序 则 1 - 2
        } else if (this.val == "降序") {
          return p1.price - p2.price;
          // 判断val 等于默认 则把本地存储的值赋值给lists
        } else if (this.val == "默认") {
          this.lists = JSON.parse(localStorage.getItem("listsd"));
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  .top {
    width: 100%;
    height: 0.5rem;
    // background-color: red;

    position: relative;
    .topleft {
      width: 1.2rem;
      height: 1.2rem;
      background-color: #000;
      position: absolute;
      transform: rotate(45deg);
      top: -0.6rem;
      left: -0.6rem;
    }
    .topright {
      width: 0.5rem;
      height: 0.5rem;
      background-color: #000;
      position: absolute;
      right: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      span {
        display: inline-block;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0.2rem;
        height: 0.2rem;
        border-radius: 50%;
        text-align: center;
        line-height: 0.2rem;
        background-color: yellow;
      }
    }
  }
  .sizes {
    width: 100%;
    padding: 0.15rem;
    .sizes-li {
      margin: 0 0.15rem;
      .size {
        margin: 0.2rem 0;
        display: flex;
        justify-content: space-between;
        button {
          width: 0.35rem;
          height: 0.35rem;
          border-radius: 50%;
          background-color: aliceblue;
          border: none;
        }
      }
      p {
        margin: 0.15rem 0;
        font-size: 0.1rem;
      }
      a {
        font-size: 0.15rem;
      }
    }
    p {
      margin: 0.3rem 0 0.2rem;
    }
  }
  .content {
    width: 100%;
    padding: 0 0.15rem;
    background-color: red;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    li {
      width: 1.675rem;
      height: 4.5rem;
      list-style: none;
      margin: 0.1rem 0;
      text-align: center;
      .img {
        width: 100%;
        height: 2.7rem;
        background-color: pink;
        p {
        }
      }
      .title {
        height: 0.4rem;
        padding: 0 0.2rem;
        margin: 0.15rem 0;
      }
      .price {
      }
      .installments {
        color: gainsboro;
        font-size: 0.12rem;
      }
      .join {
        width: 100%;
        height: 0.6rem;
        padding: 0.15rem 0;
        display: inline-block;
        background-color: #000;
        border: none;
        margin-top: 0.1rem;
        button {
          border: none;
          background-color: #000;
          color: #fff;
        }
      }
    }
  }
}
</style>

购物车页代码：

<template>
  <div class="box">
    <div class="top">
      <router-link to="/" tag="div" class="topleft">X</router-link>
    </div>
    <div class="num">
      <img
        src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAQAAADZc7J/AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAADdcAAA3XAUIom3gAAAAHdElNRQfiCwwQEgYn7+gWAAABQklEQVRIx9WTsUoDQRRF72xMYSFokcRCjBFESGWRwtZe8AtEFFNrI1bB0tLGQuzs/AJB8AO2kZRCxBiRQNKIoIYoyLFwCZuss9nNgpBXzc7be3j3zow09mU48321zVF8gNtbZ5Q1UwmGYQPIxFU5vnVdUuHfARO+OD5oa9GzM6NcbICkem+CLZ0kA1zKHQ2w6tlpqRUN4AwA5knFiTAISGsuHqDfwoOkgp4kUkoP1WI+Azt02ZYk9hle3cAEBh69c7iKEOJ30IJU/71KpqbaKCH6b0LEGgTcaYXpeIj+GJf54pyI70CSTACxq1M5ehmqvDCHfwIkFrQW4S1WzXUCq+E5lNhkMqSfo0ze3t7hlWeqIfJ3GnQo2n644ZhZYMnSL9OQcKnYAHs0ueUeY+nn6eDyRskGcFjngGxIBkUqVvk41g+oBJ136GBf8AAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxOC0xMS0xMlQxNjoxODowNiswMTowMEVm3zEAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTgtMTEtMTJUMTY6MTg6MDYrMDE6MDA0O2eNAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAABJRU5ErkJggg=="
        alt=""
      />
      <h4>Cart</h4>
    </div>
    <ul class="content">
      <li v-for="item in list" :key="item.id">
        <div class="img"></div>
        <div class="center">
          <p>{{ item.title }}</p>
          <p>{{ item.availableSizes[0] }} | {{ item.style }}</p>
          <p>数量：{{ item.num }}</p>
        </div>
        <div class="right">
          <img
            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAOCAYAAADT0Rc6AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowMzgwMTE3NDA3MjA2ODExODA4MzlFRjgwMkJGMENDMSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0NzRFMzQ0QjI3MzgxMUU4QjRFMUVBNEJCODU5RDAzMSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0NzRFMzQ0QTI3MzgxMUU4QjRFMUVBNEJCODU5RDAzMSIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RUE3RjExNzQwNzIwNjgxMUIxQTQ5QTgyNkJBMzJBOEUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDM4MDExNzQwNzIwNjgxMTgwODM5RUY4MDJCRjBDQzEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5cNiR0AAAA50lEQVR42qSUaw6EMAiEYY8rB7JcVrYoNaQCNbsk88N2ypc+HICrtq69CyEvNM8mIuCk33sXTuNeaJ5zrRZ1HV361RIw2pyYd4Cp65CrWgJGmxPz6gbvZpKAMfJYw9FMEjBGntGUE3AEVC+6ppyAI6B60e8mAldAWIBD4LjTCvwAqjG5txkcAmdoBWZ/z8UL5RVQ9YF3JfB7lWtXx9v+ON4WHW8E5GTszUPiZOx+SBkQq7kFEKs5yH6LxbFn4cBBOHAUDj4GuYhBdjFIQQxyEYPsYpBGUypyd45DmppSkbtzHJ5rvwIMAKXLCXxfiHXkAAAAAElFTkSuQmCC"
            @click="deletes(item)"
          />
          <p>$ {{ item.price * item.num }}</p>
          <div>
            <button @click="jian(item)">-</button>
            <button @click="jia(item)">+</button>
          </div>
        </div>
      </li>
    </ul>
    <div class="bottom">
      <div>
        <span>小计</span>
        <span>
          $ {{ total }}
          <p v-if="list.length < 1 ? false : true">
            or up to {{ list[list.length - 1].installments }} X $
            {{ installments }}
          </p>
        </span>
      </div>
      <button @click="collection">收款处</button>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";
export default {
  computed: {
    // 获取 vuex 里的内容
    ...mapState(["list", "num"]),
    ...mapGetters(["total", "installments"]),
  },
  methods: {
    // 减
    jian(item) {
      this.$store.commit("jian", item);
    },
    // 加
    jia(item) {
      this.$store.commit("jia", item);
    },
    // 收款
    collection() {
      alert("Checkout - Subtotal: $ " + this.total);
    },
    // 删除
    deletes(item) {
      this.$store.commit("deletes", item);
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100vh;
  background-color: #000;
  opacity: 0.9;
  color: #fff;
  .top {
    .topleft {
      width: 0.5rem;
      height: 0.5rem;
      text-align: center;
      line-height: 0.5rem;
    }
  }
  .num {
    width: 100%;
    // background-color: red;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    h4 {
      margin-left: 0.2rem;
    }
  }
  .content {
    li {
      width: 100%;
      padding: 0 0.15rem;
      border-top: 1px solid #000;
      opacity: 1;
      display: flex;
      justify-content: space-between;
      .img {
        width: 0.5rem;
        height: 0.75rem;
        background-color: #fff;
      }
    }
  }
  .bottom {
    width: 100%;
    position: fixed;
    bottom: 0;
    div {
      width: 100%;
      display: flex;
      justify-content: space-between;
    }
    button {
      width: 100%;
      height: 0.5rem;
      border: none;
    }
  }
}
</style>

---

以上就是列表添加至购物车（Typescript React Shopping cart）的代码，不懂得也可以在评论区里问我，以后会持续添加一些新的功能，敬请关注。
我的其他文章：https://blog.csdn.net/weixin_62897746?type=blog