vue 实现完整的购物车功能（包括单选全选，删除商品和结算商品功能）
⾸先来看看效果图
1. ⾸先创建⼀个vue项⽬(命令⾏如下)
vue init webpack shopcart 然后可以⼀路回车或者Y
2. 创建成功后进⼊到shopcart⽬录
cd shopcart
3. 安装项⽬所需要的依赖
我这项⽬⽤到axios请求⾃⼰写点json模拟数据，UI框架⽤到饿了么的Mint-UI框架，使⽤less作为css预处理器
//安装axios
npm install axios --save
//安装Mint-UI_
npm install mint-ui --save
//安装less
npm install less less-loader --save-dev
好了，可以先运⾏项⽬看看
npm run dev
如果浏览器没有⾃动打开浏览器的话，可以⾃⼰⼿动在浏览器输⼊localhost:8080  ，或者设置/config/index.js（如下图）默认样式效果
下⾯配置⼀下安装的依赖
配置axios 和 Mint-UI (打开/src/main.js)
配置less(在build/f.js 的dule.rules ⾥⾯添加如下代码)
{
test: /\.less$/,
loader: 'style-loader!css-loader!less-loader'
}
为了移动端⾃配，将引⼊外部flexible.js进⾏适配，将flexible.js放在/static/js/⽬录下，然后在/src/main.js下引⼊import '../static/js/flexible.js'
并在/src创建⼀个⽬录styles（mixin.less⽤来做计算rem尺⼨，源码⽂章后⾯有）
接下来就真正的搞事情了/components/shopCart.vue
<template>
<div class="page">
<header>
<h3>购物车</h3>
</header>
<div class="shop_car_body">
<ul>
<li v-for="(item, index) in  list">
<div class="car_list_top">
<!-- 选择商品 -->
<div class="input_check">
<span class="ico_gou"
:class="{'ico_gou_on':item.checked}"
@click="selectGoods(item)"></span>
</div>
<!-- 选择商品 end -->
<P>商家: {{item.shop_name}}</P>
</div>
<div class="car_list_t_r">
<p class="ico_del" @click="ds_id,index)"></p>
网页购物车代码</div>
</div>
<div class="car_list_center">
<div class="car_list_c_l">
<img :src="'http:'+ds_img" alt="">
</div>
<div class="car_list_c_r">
<p>{{ds_name}}</p>
<div class="goods_intor">
<p>￥{{item.price}}</p>
<p class="select_num_input">
<span class="ico_sub" @click="sub(item.sales_num,index)"></span>          <input type="number" :value="item.sales_num" disabled>
<span class="ico_plus" @click="plus(item.sales_num,index)"></span>          </p>
</div>
</div>
</div>
</li>
</ul>
<div class="car_footer">
<div class="car_footer_l" v-show="!checkAllFlag">
<span class="ico_gou" @click="checkAll(true)"></span>
<p>全选</p>
</div>
<div class="car_footer_l" v-show="checkAllFlag">
<span class="ico_gou_on" @click="checkAll(false)"></span>
<p>取消全选</p>
</div>
<div class="car_footer_r">
<span>合计：{{$setNum.Dec(totalMoney,2)}}</span>
<p @click="toDo()">结算({{checkNum}})</p>
</div>
</div>
</div>
</div>
</template>
<script>
import { Toast, Indicator, MessageBox} from 'mint-ui'
export default {
data () {
return {
list:[],
selectId:[],  //选中的商品id
totalMoney: 0,  //总价
checkNum: 0,  //选择的商品数量(结算需要显⽰的数量)
checkAllFlag:false,  //是否全选
}
},
computed: {
},
methods: {
toDo(){
if(this.checkNum <= 0){
Toast('先选中需要结算的商品');
}
else{
// 结算选中的商品
var isList = [];
for(var i in this.list){
if(this.list[i].checked){
isList.push(this.list[i]);
}
}
console.log(isList);
}
},
// (单选)选择商品
selectGoods(item){
//判断是否未定义，如果没点击过按钮是没有注册的，则需要先注册checked属性
if(typeof item.checked =='undefined'){
this.$set(item,"checked",true);
this.checkNum ++;  //结算需要显⽰的数量
}else{
//  如果已经注册，则设置checked否(这⾥不能设置为false，因为当已经注册过之后再点击为flase，那么再点击⼀次则为true)    item.checked = !item.checked;
item.checked ? this.checkNum ++ : this.checkNum --;
}
// 求总价
// 当所有的商品都选择的时候，⾃动默认为全选
this.list.length == this.checkNum ? this.checkAll(true) : this.checkAllFlag = false;
},
// 全选与取消全选，点击全选时flag为true，取消时为false
checkAll(flag){
this.checkAllFlag = flag;
var _this = this;
flag ? this.checkNum = this.list.length : this.checkNum = 0;
this.list.forEach(function(item,index){
if(typeof item.checked == 'undefined'){//也要防⽌未定义
_this.$set(item,"checked",_this.checkAllFlag);//通过set来给item添加属性checked
}else{
item.checked = _this.checkAllFlag;
}
});
},
// 求总价
totalPrice(){
var _this = this;
this.list.forEach((item,index)=>{
if(item.checked){
_alMoney += this.$setNum.accMul(item.price,item.sales_num);
}
});
},
// 删除商品
delGoods(id,index){
title:'',
message:'确定删除该商品吗？',
confirmButtonText:'确定',
cancelButtonText:'取消'
}).then(action => {
if (action == 'confirm') {

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。