Vue.js搭建移动端购物车界面

2020-06-16 06:14:04易采站长站整理

<divclassdivclass="quantity">
<!--绑定changeMoney()方法,调整商品数量-->
<ahrefahref="javascript:;"@click="changeMoney(item,-1)">-</a>
<inputtypeinputtype="text" :value="item.productQuantity" disabled>
<ahrefahref="javascript:;"@click="changeMoney(item,1)">+</a>
</div>
</div>
<divclassdivclass="item-stock">有货</div>
</div>
</div>
<divclassdivclass="cart-tab-4">
<divclassdivclass="item-price-total">{{ item.productPrice*item.productQuantity| money('元')}}</div>
</div>
<div class="cart-tab-5">
<divclassdivclass="cart-item-operation">
<!--delConfirm方法控制删除时的弹框显示状态-->
<ahrefahref="javascript:void%200" class="item-edit-btn"@click="delConfirm(item)">
<svg class="iconicon-del"><use xlink:href="#icon-del"></use></svg>
</a>
</div>
</div>
</li>
</ul>
</div>
</div>

<!-- footer -->
<div class="cart-foot-wrap">
<divclassdivclass="cart-foot-l">
<divclassdivclass="item-all-check">
<ahrefahref="javascript:void%200">
<spanclassspanclass="item-check-btn" :class="{'check':checkAllFlag}"@click="checkAll(true)">
<svg class="iconicon-ok"><usexlink:hrefusexlink:href="#icon-ok"></use></svg>
</span>
<span v-show="!checkAllFlag">全选</span>
</a>
</div>
<divclassdivclass="item-all-del">
<ahrefahref="javascript:void%200" class="item-del-btn"@click="checkAll(false)">
<spanv-showspanv-show="checkAllFlag">取消全选</span>
</a>
</div>
</div>
<divclassdivclass="cart-foot-r">
<divclassdivclass="item-total">
<!--totalMoney是商品总金额,在Vue组件中通过方法被修改-->
Item total: <span class="total-price">{{totalMoney| money('元')}}</span>
</div>
<divclassdivclass="next-btn-wrap">
<ahrefahref="address.html" class="btn btn--red" style="width:200px">结账</a>
</div>
</div>
</div>
</div>
</div>

<!--绑定一个md-show类,通过delFlag变量控制这个类,这个类可以让弹框显示或隐藏-->
<div class="md-modal modal-msg md-modal-transition"id="showModal" v-bind:class="{'md-show':delFlag}">
<div class="md-modal-inner">
<div class="md-top">
<!--关闭按钮,通过改变delFlag值控制弹框状态-->