css
.Shop{
width:100%;
overflow: hidden;
}
.Shopleft{
width:120%;
display: flex;
border-bottom: 1rpx solid darkgray;
position: relative;
}
.ShopCar{
width:100%;
height: 180rpx;
padding: 0 2%;
display: flex;
align-items: center;
}
.Shopimage{
width:130rpx;
height:130rpx;
margin:0 2%;
}
.name{
width:70%;
height: 120rpx;
margin-left:2%;
display: flex;
flex-direction: column;
}
.txtname{
font-size:30rpx;
font-weight: bold;
}
.value{
display:flex;
}
.textcolor{
font-size:25rpx;
display:flex;
float: left;
}
.name>text:nth-of-type(3){
width:100%;
height: 70rpx;
display: flex;
justify-content: space-between;
align-items:center;
margin-top:1%;
border: 1px solid;
}
.price{
color: red;
font-size: 32rpx;
float: left;
font-weight: bold;
}
.addCount{
width: 25%;
height:40rpx;
float: right;
display: flex;
justify-content: space-between;
align-items: center;
border: 1px solid;
margin-right:7%;
}
.unfor{
width: 38rpx;
height: 40rpx;
font-size: 32rpx;
border-right: 1px solid;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.del {
background-color: orangered;
width: 20%;
height: 180rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #fff;
}
.bottom{
width:98%;
height: 100rpx;
padding-left:3%;
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
bottom: 0rpx;
left: 0rpx;
}
.Checked{
font-size:32rpx;
margin-right:100rpx;
}
.bottomright{
width:60%;
display: flex;
justify-content: space-between;
align-items: center;
height: 100rpx;
}
.dan{
width:200rpx;
height: 100rpx;
background: red;
color: white;
font-size: 40rpx;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
html
<view class='Shop'>
<view class='Shopleft' wx:for='{{Cart}}' wx:key="index" data-index='{{index}}' wx:for-index='index'>
<view class='ShopCar'>
<checkbox-group data-index='{{index}}' bindtap='SingChecked'>
<checkbox checked="{{!item.checked}}" />
</checkbox-group>
<image src='{{item.src}}' class='Shopimage'/>
<view class='name'>
<text class='txtname'>{{item.name}}</text>
<text class='value'>
<text wx:for='{{item.value}}' wx:key="index" class='textcolor'>{{item}}</text>
</text>
<view>
<view class='price'>￥{{item.price}}</view>
<view class='addCount'>
<text class='unfor' bindtap='can' data-index='{{index}}'>-</text>
<text class='unfor'>{{item.count}}</text>
<text class='unfor' bindtap='add' data-index='{{index}}'>+</text>
</view>
</view>
</view>
</view>
<view class="del" catchtap="del">删除</view>
</view>
<view class='bottom'>
<checkbox-group data-index='{{index}}' bindtap='Checked'>
<checkbox checked="{{!selectAll}}"/>全选
</checkbox-group>
<view class='bottomright'>
<text class='price'>合计：￥{{total}}</text>
<text class='dan'>下单</text>
</view>
</view>
</view>
js
Page({
/**
* 页面的初始数据
*/
data: {
selectAll:false,
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
wx.getStorage({
key: 'CartData',
success: (res) => {
// 合计
var sum = 0
for (var i = 0; i < res.data.length; i++) {
if (res.data[i].checked == -false) {
sum += res.data[i].count * res.data[i].price
}
}
this.setData({
Cart: res.data,
total: sum.toFixed(2)
})
// 单选
let Num = 0;
for (var i = 0; i < res.data.length; i++) {
if (res.data[i].checked === false) {
Num++;
}
if (res.data[i].checked === true) {
this.setData({
selectAll: true
})
}
if (Num == res.data.length) {
this.setData({
selectAll: false
})
}
}
wx: wx.setStorage({
key: 'CartData',
data: res.data,
})
}
})
},
// 全选
Checked:function(e){
wx.getStorage({
key: 'CartData',
success: (res) => {
let selectAll = this.data.selectAll
selectAll = !selectAll
for (let i = 0; i < res.data.length; i++) {
res.data[i].checked = selectAll; // 改变所有商品状态
}
// 合计
var sum = 0
for (var i = 0; i < res.data.length; i++) {
if (res.data[i].checked == -false) {
sum += res.data[i].count * res.data[i].price
}
}
this.setData({
selectAll: selectAll,
Cart: res.data,
total: sum.toFixed(2)
})
wx: wx.setStorage({
key: 'CartData',
data: res.data,
})
}
})
},
// 单选
SingChecked:function(e){
wx.getStorage({
key: 'CartData',
success: (res) => {
let index = e.currentTarget.dataset.index;
res.data[index].checked = !res.data[index].checked
let Num = 0;
for (var i = 0; i < res.data.length;i++){
if(res.data[i].checked===false){
Num++;
}
if (res.data[i].checked === true) {
this.setData({
selectAll: true
})
}
if (Num == res.data.length){
this.setData({
selectAll:false
})
}
}
// 合计
var sum = 0
for (var i = 0; i < res.data.length; i++) {
if (res.data[i].checked == false) {
sum += res.data[i].count * res.data[i].price
}
}
//更新数据
this.setData({
total: sum.toFixed(2)
})
wx.setStorage({
key: 'CartData',
data: res.data,
})
}
})
//
},
// 加法
add: function (e) {
wx:wx.getStorage({
key: 'CartData',
success: (res)=> {
let index = e.currentTarget.dataset.index
res.data[index].count++
// 合计
var sum = 0
for (var i = 0; i < res.data.length; i++) {
if (res.data[i].checked == -false) {
sum += res.data[i].count * res.data[i].price
}
}
//更新数据
this.setData({
total: sum.toFixed(2),
Cart: res.data
})
wx: wx.setStorage({
key: 'CartData',
data: res.data,
})
}
})
},
// 减法
can: function (e) {
wx: wx.getStorage({
key: 'CartData',
success: (res) => {
let index = e.currentTarget.dataset.index
res.data[index].count--
if(res.data[index].count<=1){
res.data[index].count=1
}
// 合计
var sum = 0
for (var i = 0; i < res.data.length; i++) {
if (res.data[i].checked == -false) {
sum += res.data[i].count * res.data[i].price
}
}
this.setData({
total: sum.toFixed(2),
Cart: res.data,
})
wx: wx.setStorage({
key: 'CartData',
data: res.data,
})
}
})
},
// 合计
getsumTotal: function () {
wx: wx.getStorage({
key: 'CartData',
success: (res) => {
var sum = 0
for (var i = 0; i < res.data.length; i++) {
if (res.data[i].checked==-false) {
sum += res.data[i].count * res.data[i].price
}
}
//更新数据
this.setData({
total: sum.toFixed(2)
})
wx: wx.setStorage({
key: 'CartData',
data: res.data,
})
}
})
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
wx.getStorage({
key: 'CartData',
success: (res) => {
this.setData({
Cart: res.data
})
}
})
},
// 下单
order:function(e){
wx.getStorage({
key: 'CartData',
success: (res) => {
for(var i=0;i<res.data.length;i++){
if(res.data[i].checked===false) {
wx.navigateTo({
url: '../order/order',
})
}else{
wx.showToast({
title: '请选择商品',
icon: 'none',
mask: true
})
}
}
this.setData({
Cart: res.data
})
}
})
}
})
