wxml
<view class="main">
<view wx:if="{{hasList}}">
<view class='merchant-name'>
<icon wx:if="{{selectAllStatus}}" class='iconfont icon-ischecked' style='font-size:60rpx;color:red' bindtap="selectAll" />
<icon wx:else class="iconfont icon-ischecked" bindtap="selectAll" style='font-size:60rpx;' bindtap="selectAll" />
<text>商家名称</text>
</view>
<view class="checkbox" wx:for="{{carts}}" wx:key="{{index}}">
<icon wx:if="{{item.selected}}" class='iconfont icon-ischecked' data-index="{{index}}" style='font-size:60rpx; color:red' bindtap="selectList"></icon>
<icon wx:else class='iconfont icon-ischecked' data-index="{{index}}" bindtap="selectList" bindtap="selectList" style='font-size:60rpx;' />
<navigator url="../details/details?id={{item.id}}">
<!-- <image src="{{item.image}}"></image> -->
<view class='product-img'>图片</view>
</navigator>
<view class='details-message'>
<view class='godds-name'>{{item.title}} <text class='close' bindtap='deleteList'>删除</text></view>
<view class='details-container'>
<view class='spec-price'>
<view class='spec'>{{item.spec}}</view>
<view class='price-number'>
<text>¥ {{item.price}}</text>
<!-- <text>X {{item.buyCount}}</text> -->
</view>
</view>
<view class='add-subtract'>
<view class="minus sign" bindtap="minusCount" data-obj="{{obj}}" data-index="{{index}}">-</view>
<view class='add-min-number'>{{item.num}}</view>
<view class="plus sign" bindtap="addCount" data-index="{{index}}">+</view>
</view>
</view>
</view>
</view>
<view class='settlement-sum'>
<text>¥ {{totalPrice}}</text>
<view class="settlement" bindtap='toSettlement'>结算</view>
</view>
</view>
<view wx:else>
当前无数据
</view>
</view>
wxss
.checkbox{
display: flex;
margin:5px;
align-items: center;
}
.merchant-name{
margin-left: 20rpx;
display: flex;
justify-content: flex-start;
align-items: center;
font-size: 40rpx;
}
.shop-list{
height: 100%;
font-size: 28rpx;
}
.merchant-name>text{
position: relative;
top: -4rpx;
}
.product-img{
width: 180rpx;
height: 180rpx;
background: red;
}
.details-container{
display: flex;
justify-content: space-between;
align-items: center;
}
.spec-price>view{
padding: 10rpx;
}
.add-subtract{
display: flex;
align-items: center;
}
.add-min-number{
height: 52rpx;
width: 50rpx;
border-top: 1px solid #BCBCBC;
border-bottom: 1px solid #BCBCBC;
text-align: center;
line-height: 52rpx;
}
.sign{
width: 50rpx;
height: 52rpx;
border: 1px solid #BCBCBC;
text-align: center;
line-height: 50rpx;
}
.spec-price{
display: flex;
flex-direction: column;
}
.details-message{
width: 65%;
display: flex;
flex-direction: column;
justify-content:space-around;
height: 170rpx;
}
.price-number{
display: flex;
justify-content: space-between;
width:250rpx;
}
.goodsName{
padding-left: 20rpx;
}
.settlement{
font-size: 30rpx;
color: #fff;
background: #00CC00;
width: 200rpx;
height: 80rpx;
text-align: center;
line-height: 80rpx;
border-radius: 10rpx;
margin: 0 20rpx;
}
.settlement-sum{
display: flex;
justify-content: flex-end;
align-items: center;
}
.settlement-sum{
font-size: 40rpx;
font-weight: bold;
}
.godds-name{
width: 100%;
font-size: 28rpx;
display: flex;
justify-content: space-between;
align-items: center;
}
.close{
display: inline-block;
color: red;
border: 1px solid #BCBCBC;
padding: 10rpx;
font-size: 20rpx;
border-radius: 10rpx;
}
.spec{
width: 100%;
height: 100%;
overflow: hidden;
font-size: 26rpx;
}
js
// pages/shopCart/shopCart.js
let http = require("../../data/getData.js");
let config = require("../../data/config.js");
Page({
/**
* 页面的初始数据
*/
data: {
carts: [], // 购物车列表
hasList: false, // 列表是否有数据
totalPrice: 0, // 总价,初始为0
selectAllStatus: true, // 全选状态,默认全选
selectAA:true,
obj: {
name: "hello"
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
let that = this;
http.Post(config.URL.CartInfo, function(res) {
let a = res.data.data[0].gtGoodsList[0].goodsEnterpriseVOJson;
//在这里请求数据替换掉假数据
// console.log(res.data.data[0]); //JSON.parse(a)
// that.setData({
// items: res.data.data[0].gtGoodsList[0].goodsEnterpriseVOJson
// })
})
},
onShow() {
this.setData({
hasList: true,
carts: [{
id: 1,
title: '新鲜芹菜 半斤',
image: '/images/home_n.png',
num: 4,
price: 0.01,
selected: true,
spec: "guigesdfasdfasd"
},
{
id: 2,
title: '素米 500g',
image: '/images/my_n.png',
num: 1,
price: 0.03,
selected: true,
spec: "guigesdfasdfasd"
}
]
});
this.getTotalPrice();
},
toSettlement: function() {
wx.navigateTo({
url: 'settlement/settlement',
})
},
/**
* 当前商品选中事件
*/
selectList(e) {
const index = e.currentTarget.dataset.index;
console.log("index",index);
let carts = this.data.carts;
let selectAllStatus = this.data.carts;
const selected = carts[index].selected;
carts[index].selected = !selected;
let arr = [];
for(var i in carts){
carts[i].selected == true ? arr.push(carts[i].selected):"";
}
this.setData({
carts: carts,
selectAllStatus: carts[index].selected == false ? (selectAllStatus = false) : arr.length == carts.length ? (selectAllStatus = true) : (selectAllStatus = false)
});
this.getTotalPrice();
},
/**
* 购物车全选事件
*/
selectAll(e) {
let selectAllStatus = !(this.data.selectAllStatus);
selectAllStatus = selectAllStatus;
let carts = this.data.carts;
for (let i = 0; i < carts.length; i++) {
carts[i].selected = selectAllStatus;
}
this.setData({
selectAllStatus: selectAllStatus,
carts: carts
});
this.getTotalPrice();
},
selectBB(e){
console.log(e);
},
/**
* 绑定加数量事件
*/
addCount(e) {
const index = e.currentTarget.dataset.index;
let carts = this.data.carts;
let num = carts[index].num;
num = num + 1;
carts[index].num = num;
this.setData({
carts: carts
});
this.getTotalPrice();
},
/**
* 绑定减数量事件
*/
minusCount(e) {
const index = e.currentTarget.dataset.index;
const obj = e.currentTarget.dataset.obj;
let carts = this.data.carts;
let num = carts[index].num;
if (num <= 1) {
return false;
}
num = num - 1;
carts[index].num = num;
this.setData({
carts: carts
});
this.getTotalPrice();
},
/**
* 计算总价
*/
getTotalPrice() {
let carts = this.data.carts; // 获取购物车列表
let total = 0;
for (let i = 0; i < carts.length; i++) { // 循环列表得到每个数据
if (carts[i].selected) { // 判断选中才会计算价格
total += carts[i].num * carts[i].price; // 所有价格加起来
}
}
this.setData({ // 最后赋值到data中渲染到页面
carts: carts,
totalPrice: total.toFixed(2)
});
},
/**
* 删除购物车当前商品
*/
deleteList(e) {
const index = e.currentTarget.dataset.index;
let carts = this.data.carts;
carts.splice(index, 1);
this.setData({
carts: carts
});
if (!carts.length) {
this.setData({
hasList: false
});
} else {
this.getTotalPrice();
}
},
})