商品列表展示
-
商品列表布局
结构
<div class="list-title">优购生活馆</div>
<!-- 商品列表信息 -->
<div class="ware-list">
<div class="ware-item">
<!-- 左侧按钮checkbox -->
<div class="choice-button">
<icon :color="item.checked?'red':'#eee'" type='success' size='18'/>
</div>
<!-- 右侧商品信息 -->
<div class="ware-content">
<!-- 左侧图片 -->
<navigator class='ware-image'>
<img :src='item.goods_small_logo' mode="aspectFill"/>
</navigator>
<!-- 右侧商品信息 -->
<div class="ware-info">
<!-- 商品名称 -->
<navigator class='ware-title'>
{{item.goods_name}}
</navigator>
<!-- 商品价格和数量变更 -->
<div class="ware-info-btm">
<!-- 商品价格 -->
<div class="ware-price">
<span>¥</span>
{{item.goods_price}}
</div>
<!-- 数量变更 -->
<div class="calculate">
<div class="rect" >-</div>
<div class="number">{{item.num}}</div>
<div class="rect">+</div>
</div>
</div>
</div>
</div>
</div>
</div>
展示