購物車頁面的設計圖
商品的串列
代碼：
1 <ul v-if="shoppingListData.rows.length"> 2 <li 3 v-for="(item,index) in shoppingListData.rows" 4 :key="index" 5 > 6 <van-checkbox 7 :value="item.goods_id" 8 v-model="item.isChecked" 9 checked-color="#07c160"10 @click="chooseChange(item.goods_id)"11 ></van-checkbox>12 <div class="list_details">13 <div class="shop_img"><img14 :src="item.goods_image+'?w=150&h=150&crop=1'"15 alt=""16 ></div>17 <div class="goods_presentation">18 <div class="pTitle"><p class="p1">{{item.goods_name}}</p></div>19 <!-- <p >{{item.color}}</p> -->20 <div class="price">21 <span class="spanSprice">{{item.now_price | formatMoney}}</span>22 <span class="span_step">23 <button24 @click="handleReduce(index)"25 :disabled="item.goods_qty===1"26 >-</button>27 <i>{{item.goods_qty}}</i>28 <button @click="handleAdd(index)">+</button>29 </span>30 </div>31 </div>32 </div>33 </li>34 </ul>商品串列
全選的復選框
全選的代碼：
1 <div class="footerflex"> 2 <van-checkbox 3 v-model="AllChecked" 4 @click="checkAll" 5 >全選</van-checkbox> 6 <span 7 class="management" 8 v-if="managementShow" 9 @click="management()"10 >管理</span>11 <span 12 class="finish"13 v-if="finishShow"14 @click="management()"15 >完成</span>16 <van-button type="default" class='delete' @click="sureDel()" v-if="finishShow">洗掉</van-button>17 <div v-if="managementShow">18 <span class="summation">合計</span>19 <i>{{ totalPrice }}</i>20 <van-button type="default" class="pay" @click="closeAnAccount()">結算</van-button>21 </div>22 </div>
單選的change事件
代碼：
1 // 單選的change事件 2 chooseChange(id) { 3 if (this.selectedData.indexOf(id) > -1) { 4 this.remove(this.selectedData, id); 5 } else { 6 this.selectedData.push(id); 7 } 8 if (this.selectedData.length < this.shoppingListData.total) { 9 this.AllChecked = false;10 } else {11 this.AllChecked = true;12 }13 console.log(this.selectedData);14 }
全選的JS
全選的代碼：
1 // 全選和反選 2 checkAll() { 3 let list = this.shoppingListData.rows; 4 if (this.AllChecked) { 5 list.forEach(element => { 6 element.isChecked = false; 7 }); 8 this.selectedData =https://www.cnblogs.com/wzm-view/p/ []; 9 } else {10 list.forEach(element => {11 element.isChecked = true;12 if (this.selectedData.indexOf(element.goods_id) < 0) {13 this.selectedData.push(element.goods_id);14 }15 });16 console.log(this.selectedData);17 }18 },
陣列洗掉
代碼
1 //陣列洗掉2 remove(arr, val) {3 var index = arr.indexOf(val);4 if (index > -1) {5 arr.splice(index, 1);6 }7 }
綜上所述就能實作全選和反選的功能
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/31327.html
標籤：HTML5