购物车为空

This commit is contained in:
jqtmviyu@gmail.com 2021-03-05 02:37:44 +08:00
parent b75ab6fdef
commit d7edb99ffa
2 changed files with 51 additions and 20 deletions

View File

@ -1,26 +1,33 @@
<template> <template>
<view class="cart"> <view class="cart">
<view class="cart_item" v-for="(item, index) in cartList" :key="item.goods_id"> <block v-if="cartList.length !== 0">
<!-- 1. 选择按钮 --> <view class="cart_item" v-for="(item, index) in cartList" :key="item.goods_id">
<radio class="cart_item_radio" @tap="itemSelectChangeHandle(item.goods_id)" :checked="item.goods_select" color="#e03440" /> <!-- 1. 选择按钮 -->
<!-- 2. 商品组件 --> <radio class="cart_item_radio" @tap="itemSelectChangeHandle(item.goods_id)" :checked="item.goods_select" color="#e03440" />
<goodsItem :item="item" /> <!-- 2. 商品组件 -->
<!-- 3. 计数器 --> <goodsItem :item="item" />
<view class="count"> <!-- 3. 计数器 -->
<view @tap="itemChangeCount(index, -1)" class="count_btn iconfont icon-jianshao"></view> <view class="count">
<text class="count_text">{{ item.goods_count }}</text> <view @tap="itemChangeCount(index, -1)" class="count_btn iconfont icon-jianshao"></view>
<view @tap="itemChangeCount(index, 1)" class="count_btn iconfont icon-zengjia"></view> <text class="count_text">{{ item.goods_count }}</text>
</view> <view @tap="itemChangeCount(index, 1)" class="count_btn iconfont icon-zengjia"></view>
</view> </view>
</view>
<!-- 底部结算栏 --> <!-- 底部结算栏 -->
<view class="bottom"> <view class="bottom">
<radio @tap="selectAllChange" :checked="selectAll" color="#E03440" class="select_btn" /> <radio @tap="selectAllChange" :checked="selectAll" color="#E03440" class="select_btn" />
<text class="select_text">全选</text> <text class="select_text">全选</text>
<text class="total_text">合计</text> <text class="total_text">合计</text>
<text class="price">{{totalPrice}}</text> <text class="price">{{totalPrice}}</text>
<view @tap="goToPay" class="bottom_btn" :class="{disable: totalCount === 0}">去结算({{totalCount}})</view> <view @tap="goToPay" class="bottom_btn" :class="{disable: totalCount === 0}">去结算({{totalCount}})</view>
</view> </view>
</block>
<!-- 如果购物车为空 -->
<view v-else class="cart_empty">
<image class="cart_empty_image" mode="widthFix" src="/static/cart_empty_image.gif" />
<navigator class="cart_empty_button" url="/pages/index/index" open-type="switchTab">去首页看看</navigator>
</view>
</view> </view>
</template> </template>
@ -198,4 +205,28 @@ export default {
} }
} }
} }
.cart_empty {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
.cart_empty_image {
width: 400rpx;
}
.cart_empty_button {
margin-top: 20rpx;
width: 400rpx;
height: 60rpx;
display: flex;
justify-content: center;
align-items: center;
background-color: #ea4350;
color: #fff;
border-radius: 30rpx;
}
}
</style> </style>

Binary file not shown.

After

Width:  |  Height:  |  Size: 96 KiB