微信小程序（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 ...
随机推荐
- 沉默的QQ
QQ很久没有叮咚了,一是没人发消息给我,二是我关了QQ的声音.现在除了几个还在接收消息的群外,其他的群都屏蔽了,有事才上去看看.我从来就没写过QQ空间,那些以前经常写空间的朋友也多数停止了喧闹.每次登 ...
- leetcood学习笔记-102-二叉树的层次遍历
题目描述: 方法一; class Solution(object): def levelOrder(self, root): """ :type root: TreeNo ...
- eclipse背景设置什么颜色缓解眼睛疲劳
eclipse背景设置什么颜色缓解眼睛疲劳 1.打开window->Preference,弹出Preference面板 2.展开General标签,选中Editors选项,展开. 3.选中 Te ...
- 树形dp换根，求切断任意边形成的两个子树的直径——hdu6686
换根dp就是先任取一点为根,预处理出一些信息,然后在第二次dfs过程中进行状态的转移处理 本题难点在于任意割断一条边,求出剩下两棵子树的直径: 设割断的边为(u,v),设down[v]为以v为根的子树 ...
- 2019NOIP算法复健+学习
前言: 原本因为kma太弱,很多算法没学学了也不会用,打算设置密码给自己看.后来想了想,觉得也没有必要,既然决定了要学些东西到脑子里,就没什么好丢人的. 注:"×"意为完全没学,& ...
- CSS3：CSS3 背景
ylbtech-CSS3:CSS3 背景 1.返回顶部 1. CSS3 背景 CSS3 背景 CSS3中包含几个新的背景属性,提供更大背景元素控制. 在本章您将了解以下背景属性: background ...
- RoadFlowCore 解决方案介绍及开发概述
RoadFlow解决方案如下: RoadFlow.Business:业务层 RoadFlow.Integrate:组织机构获取层(如果你系统要使用第三方组织架构的时候修改这里面的方法即可) RoadF ...
- 剑指offer——19删除链表的节点
题目一: 在O(1)时间内删除链表节点.给定单向链表的头指针和一个节点指针,定义一个函数在O(1)时间内删除该节点. 书本讲得不明就里 class Solution { void DeleteNode ...
- ecshop 学习笔记
ECSHOP各文件夹功能说明 1.根目录:前台程序文件2.admin:后台程序文件夹 --根目录:后台程序文件 *.php文件 --help\zh_cn:各功能的帮助文件 *.xml文件 ...
- java-day12
数据结构 常用的数据存储结构:栈,队列,数组,列表,红黑树. 栈:先进后出(入口和出口在用一侧) 队列:先进先出 数组: 查询快:因为数组的地址是连续的,通过数组的首地址找到数组中的元素. 增/删慢: ...