效果概述
列表页面显示数据，实现按尺码进行过滤，实现价格高低排序。点击添加至购物车，实现购物车所需内容。
具体效果
点击跳转至效果页面（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
|