VUE实现移动端的购物车
主要就是实现了购物车功能，计算勾选的总价，全选或者需要勾选的功能然后去结算的时候就是跳转到结算界面，别的页面和这个主题不相符（就是简单的跳转，把勾选的商品数据带到第二个页面），当没选择商品时去结算就会弹出提醒；这里的数据都是模拟数据，里面的功能是能实现的。后期把真实数据按照模拟数据格式给出就可以实现了。
开始：界面布局
<template>
<div>
<x-header>This is the page title.</x-header>
<router-view></router-view>
<div class="all_select">
<div style="display: flex;flex-direction: row;justify-content: center;">
<input type="checkbox" style="width:20px; height: 20px;" name="vehicle" value="" v-model="commonList2" @change="all_select_button" /> 全部
</div>
<div @click="update">删除</div>
</div>
<div class="shop_car_detail" v-for="(item,index) in commonList" v-show="is_show">
<div class="select_one">
<input type="checkbox" style="width: 25px; height: 25px;" :value="item" @change="change_select" v-model="checkedNames">
</div>
<div class="shop_car_detail_img_data">
<div class="shop_car_detail_img">
<img :src="item.url" width="100%" height="90%" style="background-color: white;margin-right: 15dpx;" />
</div>
<div class="shop_car_detail_data">
<div style="font-size: 15px;">{{item.name}}</div>
<div class="shop_car_detail_data_buttom">
<div> 颜色：{{item.color}} </div>
<div>尺码 ：{{item.chicun}}</div>
<div>价格：￥{{item.price}}</div>
<div class="number_element1">
<div style="width: 80px;">数量</div>
<div @click="delete_number(index)" class="add_del_botton"><img src="../assets/delete.png" width="23px" height="23px"></div>
<input type="text" style="border: 1px solid white;width: 50px;height: 18px; text-align: center;font-size: 15px;" name="input1" :value="item.number" readonly="true">
<div @click="add_number(index)" class="add_del_botton"><img src="../assets/add.jpg" width="24px" height="23px"></div>
</div>
</div>
</div>
<div class="shop_car_detail_caozuo">
<img @click="delete_data(index,item.id)" src="../assets/delete_tong.png" width="40px" height="28px">
</div>
</div>
</div>
<div v-show="!is_show">购物袋还是空的,去挑几件中意的商品吧！</div>
<divider v-show="is_show">我是有底线的</divider>
<br />
<div class="buttom-show">
<div class="bottom-item-button" @click="">￥{{checkedNames1}}</div>
<div @click="tiaozhuan">
<cell style="background-color: rgb(121,104,255);"> 去结算({{checkedNames.length}})</cell>
</div>
</div>
<!--购物商品不能为空时候弹出提示-->
<confirm v-model="show4" :show-cancel-button="false" title="提示" @on-confirm="onConfirm">
<p style="text-align:center;">'请选择你需要结算的商品~'</p>
</confirm>
</div>
</template>
2：逻辑代码
<script>
import { XHeader, Cell, Alert, Checklist, Flexbox, FlexboxItem, Icon, XNumber, Group, Confirm, Divider, XSwitch } from 'vux'
export default {
data() {
return {
show4: false,
total_price: 0,
is_show: true,
dianji: 0,
checkedNames: [],
number: [],
commonList2: [],
commonList: [{
id: '1002154',
url: 'https://czc-filepost.oss-cn-beijing.aliyuncs.com/20180814160148526_5610378.jpg',
name: '连衣裙',
color: '黄色',
chicun: 110,
price: 350,
number: 1
},
{
id: '2002153',
url: 'https://czc-filepost.oss-cn-beijing.aliyuncs.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20180906151301.jpg',
name: '短款裤',
color: '绿色',
price: 250,
chicun: 150,
number: 1
},
{
id: '2002158',
url: 'https://czc-filepost.oss-cn-beijing.aliyuncs.com/20180814160148526_5610378.jpg',
name: '短袖',
color: '白色',
price: 180,
chicun: 150,
number: 1
},
{
id: '2002159',
url: 'https://czc-filepost.oss-cn-beijing.aliyuncs.com/20180814160148526_5610378.jpg',
name: '帽子',
color: '纯黑',
price: 120,
chicun: 150,
number: 1
},
{
id: '20021510',
url: 'https://czc-filepost.oss-cn-beijing.aliyuncs.com/20180814160148526_5610378.jpg',
name: '打底衫',
color: '粉色',
price: 80,
chicun: 90,
number: 1
},
{
id: '3002157',
url: 'https://czc-filepost.oss-cn-beijing.aliyuncs.com/20180814160148526_5610378.jpg',
name: '皮帶',
color: '棕色',
price: 75,
chicun: 120,
number: 1
},
],
commonList1: [],
show: false,
show1: false,
}
},
components: {
//注册组件
XHeader,
Checklist,
Flexbox,
FlexboxItem,
Checklist,
Icon,
XNumber,
Group,
Confirm,
Divider,
Cell,
Alert,
XSwitch
},
mounted: function() {
//生命周期
},
computed: {
//计算属性,计算总价
checkedNames1: function() {
this.total_price = 0;
for(let i = 0; i < this.checkedNames.length; i++) {
this.total_price = this.total_price + this.checkedNames[i].price * this.checkedNames[i].number;
}
return this.total_price;
}
},
methods: { //函数
onConfirm(msg) {
console.log('on confirm')
if(msg) {
alert(msg)
}
},
change_select(val) {
// console.log(this.commonList2, "uuuu")
console.log(this.checkedNames, "我是onchange事件")
},
//点击所有的复选框触发事件
all_select_button() {
// 获取复选框是true还是false。如果是true的话就把created函数中保存的对象赋值，否则就把空数组赋值
// var check = document.getElementsByTagName('input')[0].checked;
// if(check == true) {
// this.checkedNames = this.commonList2;
// } else {
// this.checkedNames = [];
// }
this.checkedNames = [],
this.dianji++;
if(this.dianji % 2 != 0) {
for(let i = 0; i < this.commonList2.length - 1; i++) {
this.checkedNames.push(this.commonList2[i]);
}
} else {
this.checkedNames = [];
}
// console.log(this.checkedNames, "asd")
// console.log(check)
},
//点击数量增加
add_number(index) {
//传入index参数来判断是点击哪行的数量，改变commonList对应的数量加一
this.commonList[index].number = this.commonList[index].number + 1
},
//
delete_number(index) {
//传入index参数来判断是点击哪行的数量，改变commonList对应的数量减一，这里
//最小值为1所以当为1的时候就跳出判断语句
if(this.commonList[index].number == 1) {
return;
} else {
this.commonList[index].number = this.commonList[index].number - 1
}
},
onHide() {
console.log('on hide')
},
onShow() {
console.log('on show')
},
tiaozhuan() {
if(this.checkedNames.length == 0) {
this.show4 = true;
return;
} else {
this.$router.push({
path: 'r008',
query: {
props: this.checkedNames,
total: this.total_price
}
})
}
},
update() {
},
//删除单个对象
delete_data(index, id) {
for(let i = 0; i < this.checkedNames.length; i++) {
if(this.checkedNames[i].id == id) {
this.checkedNames.splice(i, 1);
} else {}
}
for(let i = 0; i < this.commonList.length; i++) {
if(this.commonList[i].id == id) {
this.commonList.splice(i, 1);
this.commonList2.splice(i, 1);
} else {}
}
if(this.commonList.length == 0) {
this.checkedNames = [];
this.is_show = false;
} else {
this.is_show = true;
}
},
},
created: function() {
//是需要把
for(let i = 0; i < this.commonList.length; i++) {
this.commonList1.push(this.commonList[i].id);
}
//需要把所有的对象赋值给另一个对象，当点击全选的时候把这个数组赋值给绑定的数组即可
for(let i = 0; i < this.commonList.length; i++) {
this.commonList2.push(this.commonList[i]);
}
}
}
</script>
最后：CSS 样式 代码
<style>
.bottom-item-button {
position: relative;
width: 50%;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
.buttom-show {
position: fixed;
display: flex;
flex-direction: row;
justify-content: space-between;
height: 40px;
bottom: 0;
width: 96%;
background-color: white;
align-items: center;
}
.all_select {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
height: 40px;
background-color: white;
}
.shop_car_detail {
display: flex;
flex-direction: row;
margin-bottom: 25px;
width: 99%;
height: 140px;
border: 1px solid #ECECEC;
background-color: white;
}
.select_one {
display: flex;
align-items: center;
justify-content: center;
width: 25px;
height: 100%;
}
.shop_car_detail_img_data {
display: flex;
flex-direction: row;
width: 100%;
height: 100%;
box-sizing: border-box;
}
.shop_car_detail_img {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 35%;
height: 90%;
margin-top: 6px;
padding-right: 10px;
}
.shop_car_detail_data {
display: flex;
flex-wrap: nowrap;
flex-direction: column;
align-items: flex-start;
justify-content: space-around;
font-size: 14px;
width: 60%;
height: auto;
}
.shop_car_detail_caozuo {
display: flex;
justify-content: center;
align-items: flex-start;
padding-top: 10px;
width: 20%;
height: auto;
}
.shop_car_detail_data_buttom {
display: flex;
justify-content: flex-start;
align-items: flex-start;
font-size: 13px;
width: auto;
height: auto;
flex-direction: column;
}
.number_element1 {
display: flex;
font-size: 18px;
flex-direction: row;
justify-content: flex-start;
width: 160px;
height: 23px;
background-color: white;
border: 1px solid #ECECEC;
margin-top: 5px;
}
.add_del_botton {
width: 32px;
height: auto;
font-size: 18px;
background-color: #ECECEC;
}
</style>