大家好,又见面了,我是你们的朋友全栈君。
wxml在此:
<!--pages/cart/cart.wxml-->
<!-- 当数据为空时 -->
<view class='noData' wx:if="{
{dataList.length == 0}}">
<view class='noDataImg'>
<image src='/images/cart-nodata.png'></image>
</view>
<view class='noDataText'>您的购物车空空如也,去挑选喜欢的产品吧</view>
<view class='gotype' catchtap='gotype'>
去逛逛
</view>
</view>
<!-- 当数据不为空时 -->
<view wx:else style='margin-bottom:130rpx;'>
<!-- 商品列表 -->
<view class='shopList' catchtap='checkThis' data-index='{
{index}}' wx:for="{
{dataList}}" wx:key="shopId">
<view class="nocheck {
{item.checked?'checkedBox':''}}">
✔
</view>
<view class='shopInfo'>
<view class='shopImg'>
<image src='{
{item.imgUrl}}'></image>
</view>
<view class='shopCon'>
<view class='title'>
{
{item.title}}
</view>
<view class='num'>
数量{
{item.num}} {
{item.color}}
</view>
<view>
¥{
{item.price}}
</view>
</view>
</view>
<view class='payInfo'>
<view>
<view>
共一件商品 应付 ¥{
{item.money}}
</view>
<view class='payBtn' catchtap='signPay'>
去支付
</view>
</view>
</view>
</view>
<!-- 结算栏 -->
<van-submit-bar
loading="{
{loading}}"
price="{
{ totalMoney }}"
button-text="去结算"
bind:submit="doPay"
custom-class="payBox"
>
<van-tag type="primary" class="checkbox">
<van-checkbox value="{
{ allCheck }}" checked-color="#f44" bind:change="allCheck">全选</van-checkbox>
</van-tag>
<!-- <view slot="tip">
您的收货地址不支持同城送, <text>修改地址</text>
</view> -->
</van-submit-bar>
</view>
wxss在此:
/* pages/cart/cart.wxss */
/* 数据为空 */
.noData{
margin: 200rpx 40rpx 0 40rpx;
text-align: center
}
.noDataImg{
width: 100%;
height: 300rpx;
}
.noDataText{
font-size: 32rpx;
margin: 20rpx 0;
color: #ccc
}
.gotype{
width: 60%;
margin:60rpx auto;
padding: 20rpx 0;
background: #AE211A;
color: #f1f1f1
}
/* 数据不为空 */
.nocheck{
position: absolute;
top: 80rpx;
left: 0rpx;
width: 30rpx;
height: 30rpx;
border-radius: 50%;
text-align: center;
border: 1px solid #e3e3e3;
color:#e3e3e3;
line-height: 30rpx;
font-size: 20rpx;
}
.checkedBox{
background: #f44;
color: #fff;
}
.shopList{
margin:0 20rpx;
position: relative;
border-top: 1px solid #e3e3e3;
border-bottom: 1px solid #e3e3e3;
}
.shopInfo{
padding:20rpx 0 20rpx 60rpx;
display: flex
}
.shopImg{
width: 160rpx;
height: 160rpx;
}
.shopCon{
margin-left: 40rpx;
font-size: 30rpx;
}
.num{
padding: 24rpx 0;
color: #ccc
}
.payInfo{
padding:20rpx 40rpx;
border-top: 1px solid #e3e3e3;
display: flex;
justify-content: flex-end;
}
.payBtn{
width: 100rpx;
margin-top: 20rpx;
margin-left: 140rpx;
text-align: center;
padding: 10rpx 20rpx;
color:#f44;
border: 1px solid #f44
}
.payBox{
box-shadow: 0 0 10rpx #e3e3e3
}
.checkbox{
margin-left: 40rpx;
}
js在此:
Page({
/**
* 页面的初始数据
*/
data: {
allCheck:false,
loading:false,
totalMoney:0,
dataList:[
{ imgUrl:"/images/show.jpg",title:"长袖衬衫春秋新款",num:"1",color:"白色",price:"139.00",money:"500",checked:false},
{ imgUrl: "/images/show.jpg", title: "长袖衬衫春秋新款", num: "1", color: "白色", price: "139.00", money: "500", checked: false },
{ imgUrl: "/images/show.jpg", title: "长袖衬衫春秋新款", num: "1", color: "白色", price: "139.00", money: "500", checked: false },
]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.isAll()
},
gotype(){
wx.navigateTo({
url: '/pages/type/type',
})
},
checkThis(e){
let index = e.currentTarget.dataset.index
console.log(e)
let checkIndex = "dataList["+index+"].checked"
this.setData({
[checkIndex]:!this.data.dataList[index].checked
})
this.isAll()
},
allCheck(e){
for(let k in this.data.dataList){
this.data.dataList[k].checked = e.detail
}
this.setData({
allCheck:e.detail,
dataList:this.data.dataList
})
this.isAll()
},
// 判断是否全选
isAll(){
let checkedNum = 0
let money = 0
this.data.dataList.forEach((all) => {
if (all.checked) {
checkedNum++
money += Number(all.money)*100
}
})
if(checkedNum == this.data.dataList.length){
this.setData({
allCheck: true,
totalMoney: money
})
}else{
this.setData({
allCheck: false,
totalMoney:money
})
}
},
signPay(e){
console.log('支付')
},
doPay(e){
console.log(e)
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/142898.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...