产品块
订单块
这里的袋子,我点加一个产品就加一个当前点击的产品进去袋子里面,减一个产品也减去袋子里指定的一个产品,而且外部的这个圆数字也是实时更新
加减的时候统计下所有产品的购买数量setData更新下就行了,示例代码如下,弹出层最主要的就是加block wx:if="{{item.num}}" 这个判断,有数量时才显示在弹出层
demo.wxss
view.op{float:right}
view.op button,view.op text{float:left;text-align:center;}
view.op text{width:30px;}
view.op button{border-radius: 50%;width:20px;height:20px;line-height:20px;background:#000;color:#fff;padding:0}
.footmenu{position:fixed;bottom:0;left:0;width:100%;padding:30px 10px;background:#edc679;z-index:2}
.footmenu view{float:left;line-height:50px;font-size:20px;position:relative;margin-right:10px}
.footmenu view .num{position: absolute;width:30px;height:30px;border-radius: 50%;right:-15px;top:-15px;background:#666 ;text-align: center;line-height:30px;}
.footmenu view.submit{float:right;margin-right:25px}
.footmenu view.submit button{background:#666}
.mask{position: fixed;width:100%;height:100%;background:rgba(0,0,0,.5);z-index:1;left:0;top:0}
.mask .choosed{background:#edc679;position:absolute;bottom:110px;left:0;width:100%}
demo.wxml
<view wx:for="{{goods}}" style="margin-bottom:20px" wx:key="title">
<view>{{item.For_title}}</view>
<view>{{item.For_content}}</view>
<view>
¥{{item.For_money}}
<view class="op">
<button bindtap="setNum" data-title="{{item.For_uid}}" data-op="-" style="display: {{item.num?'block':'none'}};">-</button>
<text style="display: {{item.num?'block':'none'}}">{{item.num}}</text>
<button bindtap="setNum" data-title="{{item.For_uid}}" data-op="+">+</button>
</view>
</view>
</view>
<view class="mask" style="display:{{showPop?'block':'none'}}">
<view class="choosed">
<view wx:for="{{goods}}" style="margin-bottom:10px" wx:key="title">
<block wx:if="{{item.num}}">
<view>{{item.For_title}}</view>
<view>
¥{{item.For_money}}
<view class="op">
<button bindtap="setNum" data-title="{{item.For_uid}}" data-op="-" style="display: {{item.num?'block':'none'}};">-</button>
<text style="display: {{item.num?'block':'none'}}">{{item.num}}</text>
<button bindtap="setNum" data-title="{{item.For_uid}}" data-op="+">+</button>
</view>
</view>
</block>
</view>
</view>
</view>
<view class="footmenu">
<view bindtap="showPop">
袋子
<view class="num">{{sum||0}}</view>
</view>
<view>联系掌柜</view>
<view class="submit"><button>提交订单</button></view>
</view>
demo.js
Page({
data: {
showPop:false,//默认隐藏
goods: [
{For_uid:1, For_title: 'Smile CHIPS薯片', For_content: '超级好吃,超级脆薯片', For_money: 8},
{For_uid:2, For_title: 'Smile Scanwith三明治', For_content: '周末专享小饰品', For_money: 12 }
]
},
showPop(e){
this.setData({showPop:!this.data.showPop})
},
setNum(e) {
var ds = e.target.dataset;
var item = this.data.goods.find(i => i.For_uid == ds.title);
if(item.num!=undefined){//产品信息已经添加num属性走这个分支
if (ds.op == '-') item.num--;
else item.num++;
}
else item.num=1;//未定义num则默认赋值为1
var sum=0;
this.data.goods.forEach(i=>{console.log(i.num);sum+=i.num||0});
this.setData({ goods: this.data.goods,sum:sum });
}
});
在watch实时监听数据,产品数据循环的总数就是袋子里面的数值
1.获取item中xxx的值
平时我们如果想获取点击的item的某一个属性值,直接通过data-name="{{item.xxx}}"就可以获取item中xxx的值。
获取xxx的值
choseDate: function(e) {
var that = this;
var index = parseInt(e.currentTarget.dataset.index);
var xxx= e.currentTarget.dataset.name;
},
这样就获取到了item中xxx的值
2.如果想获取点击的item中的任意值
这里将原来的data-name="{{item.xxx}}"换成data-bean="{{item}}"就可以了。然后再接收值的地方做如下更改
choseDate: function(e) {
var that = this;
var index = parseInt(e.currentTarget.dataset.index);
var itemData = e.currentTarget.dataset.bean;
that.setData({
selectGeoId: itemData.GEOID,
selectDate: itemData.Date,
})
// console.log("****************点击的GEOID=" + JSON.stringify(itemData) + "分解的GEOID=" + that.data.selectGeoId + "分解的日期=" + that.data.selectDate);
that.getReportDetails("");
},
这里的itemData就是获取的item对象,itemData.xxx就可以获取itemData对象中的任意一个值
不贴代码咋跟你说怎么改?