微信小程序（mpvue框架） 购物车
效果图：
说明：全选/全不选，
1.数据：
products：[{checked:true,code:"4",echecked:false,hasPromotions:true,id:43281,img:"/photo/products/1369/20160220/c92ad25e-24c5-439f-89fc-75d0263cbaff.png!PS",name:"洋河蓝色经典天之蓝 52度 480ml",promotions:[{pName:"折"},{pName:"一口价"}],showTotal:true,
skus:[{aid:9751423,checked:true,echecked:false,hasSpecItems:true,id:57614,quantity:10,renderSalePrice:308,renderTotal:3080,salePrice:308,showEditNum:false,specItems:[{cSpecItemName:"42度",iCorpId:1369,iDeleted:0,iOrder:0,iSpecId:929,id:5364,isFilter:true,oSpec:{bHaveImg:false,cMemo:"白酒类",cName:"度数",iCorpId:1369,iDeleted:0,iOrder:0,id:929}},{cSpecItemName:"480ml",iCorpId:1369,iDeleted:0,iOrder:0,iSpecId:930,id:5365,isFilter:true,oSpec:{bHaveImg:false,cName:"净含量",iCorpId:1369,iDeleted:0,iOrder:0,id:930}}]},
{aid:9751419,checked:true,echecked:false,hasSpecItems:true,id:57615,quantity:10,renderSalePrice:308,renderTotal:3080,salePrice:308,showEditNum:false,specItems:[{cSpecItemName:"52度",iCorpId:1369,iDeleted:0,iOrder:3,iSpecId:929,id:5352,isFilter:true,oSpec:{bHaveImg:false,cMemo:"白酒类",cName:"度数",iCorpId:1369,iDeleted:0,iOrder:0,id:929}},{cSpecItemName:"480ml",iCorpId:1369,iDeleted:0,iOrder:0,iSpecId:930,id:5365,isFilter:true,oSpec:{bHaveImg:false,cName:"净含量",iCorpId:1369,iDeleted:0,iOrder:0,id:930}}],}],
status:1,total:{auxUnitQuantity:0,quantity:20},unit:{cCode:"1",cName:"瓶",id:1536,unitPrecision:2,unitRoundType:0}},
{checked:true,code:"6",echecked:false,hasPromotions:true,id:43285,img:"/photo/products/1369/20160220/c92ad25e-24c5-439f-89fc-75d0263cbaff.png!PS",name:"洋河蓝色经典 高之蓝 42度 500ml",promotions:[{pName:"赠"}],showTotal:false,
skus:[{aid:9751410,checked:true,echecked:false,hasSpecItems:true,id:57621,quantity:10,renderSalePrice:368,renderTotal:3680,salePrice:368,showEditNum:false,specItems:[{cSpecItemName:"42度",iCorpId:1369,iDeleted:0,iOrder:0,iSpecId:929,id:5364,isFilter:true,oSpec:{bHaveImg:false,cMemo:"白酒类",cName:"度数",iCorpId:1369,iDeleted:0,iOrder:0,id:929}},{cSpecItemName:"500ml",iCorpId:1369,iDeleted:0,iOrder:1,iSpecId:930,id:5360,isFilter:true,oSpec:{bHaveImg:false,cName:"净含量",iCorpId:1369,iDeleted:0,iOrder:0,id:930}}]}],
status:1,unit:{cCode:"1",cName:"瓶",id:1536,unitPrecision:2,unitRoundType:0}}]
2.模板
<template>
<div data-page="scart" class="page cart-page cart_page">
<div class="navbar cart_navbar">
<div class="navbar-inner">
<div class="right">
<a v-if="!isEditStatu" class="btn-editStatue" @click="bindToEdit"> 编辑</a>
<a v-else class="btn-editStatue" @click="bindTosave">完成</a>
</div>
</div>
</div>
<div class="page-content pull-to-refresh-content cart-main-container" data-ptr-distance="2" style="padding-top:36px;">
<div class="list-block media-list m-t-0 cartNew-list">
<div class="page-content-inner" style="min-height: 687px;">
<ul class="cartItemContainer">
<!-- <li class="productItemContent" data-type="group" data-cid="" ></li> -->
<li v-for="(pItem,pIndex) in products" :key="pIndex" class="productItemContent" data-type="product" :data-cid="pItem.id" >
<div class="m-l-35 p-t-5" style="display:flex;align-items:center;">
<span class="promo-type col-1 p-0" v-for="(mItem,mIndex) in pItem.promotions" :key="mIndex">{{mItem.pName}}</span>
<span v-if="pItem.hasPromotions" class="discountDescContainer" :data-id="pItem.id" style="margin-left:4px;" @click="bindDiscountinfo">优惠说明 <i class="icon arrow-down"></i></span>
</div>
<div class="label-checkbox item-content position-r">
<label>
<div class="item-media">
<i class="icon icon-form-checkbox" data-type="product" :data-id="pItem.id" :class="{checked:pItem.checked}" v-if="!isEditStatu" @click="check"></i>
<i class="icon icon-form-checkbox" data-type="product" :data-id="pItem.id" :class="{checked:pItem.echecked}" v-else @click="check"></i>
</div>
</label>
<div class="item-media" v-if="showImage">
<a :href="'/pages/productdetail/main?id='+pItem.id" hover-class="none">
<img :src="pItem.img" onerror="this.src='./img/nopic.jpg'" style="width:62px;height:62px;">
</a>
</div>
<div class="item-inner no-border">
<div class="item-title-row">
<a :href="'/pages/productdetail/main?id='+pItem.id" hover-class="none">
<div class="item-text">{{pItem.name}}</div>
</a>
</div>
<div class="item-subtitle">编码:{{pItem.code}}<span class="fr" v-if="pItem.showTotal">{{pItem.total.quantity}}瓶 (辅计量:{{pItem.total.auxUnitQuantity}})</span></div>
</div>
</div>
<ul class="proCheckPoint">
<li class="productconv" :data-sid="skItem.id" :data-id="skItem.aid" v-for="(skItem,skIndex) in pItem.skus" :key="skIndex">
<div class="label-checkbox item-content position-r">
<label>
<div class="item-media">
<i class="icon icon-form-checkbox" :data-id="skItem.id" data-type="sku" :data-pid="pItem.id" :class="{checked:skItem.checked}" v-if="!isEditStatu" @click="check"></i>
<i class="icon icon-form-checkbox" :data-id="skItem.id" data-type="sku" :data-pid="pItem.id" :class="{checked:skItem.echecked}" v-else @click="proItemChange"></i>
</div>
</label>
<div class="item-inner no-border">
<div class="item-title-row">
<div class="item-title font-50 editControl propertyContainer " :class="{'edit-status':isEditStatu}">
<div v-for="(sItem,sIndex) in skItem.specItems" :key="sIndex">
<span v-if="sItem.oSpec">{{sItem.oSpec.cName}}:</span>
<b>{{sItem.cSpecItemName}}</b>
</div>
<span class="sp-price">单价:</span>
<i class="fl">￥</i><span class="oneProductPrice">{{skItem.salePrice}}</span>/瓶<br>
<div class="sp-count" :class="{hide:!isEditStatu}">
<span>数量:</span>
<b>{{skItem.quantity}}{{pItem.unit.cName}}</b>
</div>
</div>
</div>
<div class="item-price" :class="{addBg:skItem.showEditNum}" v-if="!isEditStatu">
<div class="numberManage js-numberManage clearfix">
<span class="count fr">瓶</span>
<i class="icon icon-cart-ok fr" :class="{hide:!skItem.showEditNum}" @click="blurEditItemNum(skItem.id)"></i>
<div class="fr " :class="{'border-count':skItem.showEditNum}">
<i class="icon icon-cart-less" :class="{hide:!skItem.showEditNum}" :data-id="skItem.id" data-type="del" @click="bindEditNum"></i>
<input type="number" :value="skItem.quantity" class="editControl cart-sku-num-input" data-unitprecision="2" data-unitroundtype="0" @focus="focusEditItemNum(skItem.id)">
<i class="icon icon-cart-add" :class="{hide:!skItem.showEditNum}" :data-id="skItem.id" data-type="add" @click="bindEditNum"></i>
</div>
</div>
<span class="price">￥{{(skItem.quantity*skItem.salePrice)}}</span>
</div>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="bottom-bar row keyboard-hide cart_bottom_bar">
<label class="label-checkbox item-content col-20 ck-allSelect position-r">
<div class="item-media">
<i class="icon icon-form-checkbox" :class="{checked:checkedAll}" v-if="!isEditStatu" @click="checkAll"></i>
<i class="icon icon-form-checkbox" :class="{checked:echeckedAll}" v-else @click="checkAll"></i>
</div>
<div class="item-inner">
<div class="item-title">全选</div>
</div>
</label>
<span v-if="isEditStatu" class="flex_box">
<span class="col-45 editControl cart-btn-collection" style="display:block">
<a class="button button-fill ">移至收藏</a>
</span>
<a class="button button-fill col-30 editControl cart-btn-delete" style="display:block" @click="delProduct">删除</a>
</span>
<span v-else class="flex_box">
<span class="col-45 sum-price editControl cart-balance-container">合计:
<span class="sum-price-c">￥{{totalPrice}}</span><br>
<span class="count count-footer-num-type">{{productType}}种{{productCount}}件
<span class="count count-footer-aux">(辅计量:0)</span>
</span>
</span>
<a href="/pages/orderSubmit/main" class="button button-fill col-30 editControl cart-btn-submit">立即结算</a>
</span>
</div>
</div>
</template>
JS:
全选（全不选）：
checkAll: function (e) {
var key=this.isEditStatu?'echecked':'checked';
var checkAll = this.isEditStatu?this.echeckedAll=!this.echeckedAll:this.checkedAll=!this.checkedAll;
this.products.forEach(function(item) {
item[key] = checkAll,
item.skus.forEach(function(itemm) {
itemm[key] = checkAll
})
})
this.getTotal()
},
单选：
proItemChange:function(e){
var self=this;
var id=e.mp.currentTarget.dataset.id;
var pid=e.mp.currentTarget.dataset.pid;
var type=e.mp.currentTarget.dataset.type;
var list = this.products;
var checklist=[];
var key=this.isEditStatu?'echecked':'checked';
var checked=this.isEditStatu?this.echecked=!this.echecked:this.checked=!this.checked;
if(type==='product'){
for (var i = 0; i < list.length; i++) {
if(id===list[i].id){
list[i][key] = !list[i][key];
for (var j = 0; j < list[i].skus.length; ++j) {
list[i].skus[j][key]=list[i][key]
}
this.isCheckedAll()
break;
}
}
}else if(type==='sku'){
for (var i = 0; i < list.length; i++){
if (list[i].id === pid) {
var pc = !1;
list[i].skus.forEach(function(item) {
item.id === id && (item[key] = !item[key]), item[key] && (pc = !0)
}), list[i][key] = pc;
this.isCheckedAll()
break
}
}
}
this.getTotal()
},
判断是否全选（通过判断购物车全部商品的总价格与选中商品的价格是否相等）：
isCheckedAll:function(){
var slef=this, Allprice = 0,i=0,totalMoney=0,list = this.products;
var key=this.isEditStatu?'echecked':'checked';
var checked=this.isEditStatu?this.echecked=!this.echecked:this.checked=!this.checked;
for (var i = 0; i < list.length; i++) {
if(list[i][key]){
list[i].skus.forEach(function(item) {
if(item[key]){
Allprice = Allprice + item.quantity*item.salePrice;
}
})
}
list[i].skus.forEach(function(item) {
totalMoney += item.quantity*item.salePrice
})
}
if(totalMoney==Allprice){
this.isEditStatu?this.echeckedAll=true:this.checkedAll=true
}else{
this.isEditStatu?this.echeckedAll=false:this.checkedAll=false
}
this.getTotal()
},
选中商品总价：
getTotal:function(e){
var Allprice=0,type=0,count=0;
this.products.forEach(item => {
if(item.checked){
type+=1
item.skus.forEach(iItem=>{
if(iItem.checked){
Allprice = Allprice + iItem.quantity*iItem.salePrice;
count+=iItem.quantity
}
})
}
});
this.totalPrice=Allprice
this.productCount=count
this.productType=type
},
微信小程序（mpvue框架） 购物车的更多相关文章
- 微信小程序 wafer2框架摘要
微信小程序 wafer2框架摘要 帮助文档:https://github.com/tencentyun/wafer2-startup/wiki 使用了knex.js进行数据库交互,使用了koa.js进 ...
- 微信小程序开发-框架
小程序开发框架的目标是通过尽可能简单.高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务.框架提供了自己的视图层描述语言 WXML 和 WXSS,以及基于 JavaScript 的逻辑层框 ...
- 微信小程序mpvue项目使用WuxWeapp前端UI组件
前言:这是一篇简单粗暴的使用指南 在最近的小程序项目里前端UI框架最后选择使用WuxWeapp,这篇文章记录一下如何在小程序mpvue项目中使用该UI组件. 步骤一:下载源码 (地址在这里)主要是里面 ...
- 微信小程序&mpvue问题总结（1）
微信小程序进入到首页的时候,日志打印出"created", "onlaunch", "mounted",具体代码如下:那么,在小程序中 cr ...
- 微信小程序wepy框架开发资源汇总
开源项目 wepy-wechat-demo:基于wepy开发的仿微信聊天界面小程序 深大的树洞:基于wepy开发的树洞类微信小程序 wepy-demo-bookmall:微信小程序
- 微信小程序 mpvue vant
Mpvue中使用Vant Weapp组件库 https://segmentfault.com/a/1190000016228410?utm_source=tag-newest 小程序采坑记 mpvue ...
- 理解微信小程序Wepy框架的三个事件交互$broadcast，$emit，$invoke
$broadcast: $broadcast事件是由父组件发起,所有子组件都会收到此广播事件,除非事件被手动取消.事件广播的顺序为广度优先搜索顺序,如上图,如果页面Page_Index发起一个$bro ...
- 微信 小程序组件 加入购物车全套 one wxml
<!--pages/shop/shop.wxml--> <view wx:if="{{hasList}}"> <view class="co ...
- 微信 小程序组件 加入购物车全套 one js
// pages/shop/shop.js Page({ /** * 页面的初始数据 */ data: { carts: [ { teaname: '冠军乌龙茶-150g', image: '../. ...
- 微信小程序 功能函数 购物车商品删除
// 购物车删除 deleteList(e) { const index = e.currentTarget.dataset.index; let carts = this.data.carts; c ...
随机推荐
- 区别 |mysql |Timestamp、time、datetime
Timestamp 时间格式为 类似 2012-11-11 12:23:00 ,默认值为当前时间 time 时间格式类似12:23:00 默认值为null datetime 时间格式类似2012-11 ...
- Ruby 安装 – Unix
Ruby 安装 - Unix 下面列出了在 Unix 机器上安装 Ruby 的步骤. 注意:在安装之前,请确保您有 root 权限. 下载最新版的 Ruby 压缩文件.请点击这里下载. 下载 Ruby ...
- JavaWeb学习篇之----Jsp详解
今天我们来看一下Jsp的相关知识,首先来看看一下Jsp的相关定义: 简介: JSP全称是JavaServer Pages,它和servle技术一样,都是SUN公司定义的一种用于开发动态web资源的技术 ...
- mac下google插件SwitchyOmega笔记
端口:
- super 关键字的使用及说明
super 关键字主要用于访问父类的变量和方法. 代码示例: public class Student { String name; public Student(){ System.out.prin ...
- boost库之pool编译错误
1,编译错误截图 2,解决方法 这是由于没有链接对应的库导致的错误,在编译命令中加上 -lboost_system选项即可.
- NodeJS学习笔记之Connect中间件模块（二）
一,开篇分析 大家好,今天这篇文章主要是对"Connect"中间件以及相关辅助中间件,做一个源码分析系列,我想上一篇文章大家也看了, 介绍了使用方式及用途,而这篇也是出于本人的兴趣 ...
- Spring Boot 启动，1 秒搞定！
Java技术栈 www.javastack.cn 优秀的Java技术公众号 原文: dev.to 翻译: ImportNew.com - 唐尤华译文: http://www.importnew.com ...
- Android笔记之Fragment中创建ViewModel的正确方式
之前一直都是这么写的 pageViewModel = ViewModelProviders.of(this).get(PageViewModel.class); //参数this是当前fragment ...
- hashmap1.7的死锁模拟
package com.cxy.springdataredis.hashmap; import javax.lang.model.element.VariableElement; import jav ...