实现一个购物车页面,需要哪些数据。整理下大概如下:
一个购物车商品列表(carts),列表里的单个item包含:商品id(id),商品图(image),商品名(title),单价(price),数量(amount),单选按钮(selected);
全选按钮,需要一个字段(selectAllStatus)表示是否全选;
总价(totalPrice);
总数量(totalNum)。
还有一个需要判断的是购物车是否为空(hasList)的字段。
购物车主要的几个功能:商品数量的加减、单选、全选、计算总价格、总数量、商品删除。
wxml代码:
<!-- 购物车商品列表 -->
<view class="list">
<view wx:if="{
{hasList}}">
<block wx:for="{
{carts}}" wx:key="id">
<view class="item-section" bindlongpress="delItem" data-index="{
{index}}">
<!-- 单选按钮 是否选中显示不同的图标 -->
<view class="radio-section" wx:if="{
{item.selected}}" data-index="{
{index}}" bindtap="changeSelect">
<icon type="success_circle" color="#f00"></icon>
</view>
<view class="radio-section" wx:else data-index="{
{index}}" bindtap="changeSelect">
<icon type="circle" color="#ccc"></icon>
</view>
<view class="cart-info">
<view class="img">
<!-- 图片跳转到详情页 -->
<navigator url="/pages/good-detail/good-detail?productId={
{item.prodId}}">
<image src="{
{item.prodPic}}" mode="aspectFill" />
</navigator>
</view>
<view class="info-rt">
<view class="title">{
{item.prodName}}</view>
<view>
<view class="price">¥{
{item.prodPrice}}</view>
<!-- 数量加减操作 -->
<view class="numarea">
<text class="sign num-minus" data-types="minus" data-index="{
{index}}" bindtap="changeNum">-</text>
<text class="num-input">{
{item.amount}}</text>
<text class="sign num-plus" data-types="plus" data-index="{
{index}}" bindtap="changeNum">+</text>
</view>
</view>
</view>
</view>
</view>
</block>
</view>
<view wx:else>
<view>购物车还没有商品哦~~</view>
<navigator open-type='switchTab' url="/pages/allproduct/allproduct" class="toShopping">去逛逛</navigator>
</view>
</view>
<!-- 底部操作栏 -->
<view class="bottom-box">
<view class="select-all" wx:if="{
{selectAllStatus}}" data-select="{
{selectAllStatus}}" bindtap="selectAll">
<icon type="success_circle" color="#f00"></icon>
<text>全选</text>
</vi