vue實(shí)現(xiàn)商城購(gòu)物車(chē)功能

更新時(shí)間：2017年11月27日 11:47:41 作者：雪月青

這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)商城購(gòu)物車(chē)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue實(shí)現(xiàn)商城購(gòu)物車(chē)功能的具體代碼，供大家參考，具體內(nèi)容如下

首先，先上最終的效果圖

效果并不是很好看，但是這不是重點(diǎn)。

首先，我們先看下布局：

<template>
 <div class="shopcar" id="demo04">
 <div class="header-title">
  <h3>購(gòu)物車(chē)</h3>
 </div>
 <div class="car-list">
  <ul>
  <li class="car-item" v-for="(item,index) in good_list">
   <div class="input-block">
   <label class="input-label" :class="{active: item.is_selected}" :for="'car-checkbox-'+index" @click="select_one(index)"></label>
   </div>
   <div class="car-item-content">
   <div class="car-img">
    <img :src="item.img" />
   </div>
   <div class="car-cont">
    <h3>{{item.title}}</h3>
    <div class="cat-desc">
    <span v-for="spec in item.spec_item">{{spec}}</span>
    </div>
   </div>
   <div class="num">
    <span @click="reduce(index)">-</span>
    <span>{{item.num}}</span>
    <span @click="add(index)">+</span>
   </div>
   <div class="car-price">
    <span class="car-price">￥{{item.price}}</span>
    <span class="car-num">X{{item.num}}</span>
   </div>
   </div>
  </li>
  </ul>
 </div>
 <div class="car-footer">
  <div class="foot-car">
  <label for="foot-check" class="input-label" :class="{active: selected_all}" @click="slect_all"></label>
  </div>
  <div class="total-cont">
  <span>總價(jià)：{{totalPrice}}</span>
  <span>共{{totalNum}}件</span>
  </div>
  <div class="btn-box">
  <button>立即下單</button>
  </div>
 </div>
 </div>
</template>

非常常見(jiàn)的布局，微商城購(gòu)物車(chē)隨處可見(jiàn)，先說(shuō)明下，在這里，實(shí)現(xiàn)選中的功能并不是用傳統(tǒng)的label+checkbox實(shí)現(xiàn)，而是一個(gè)單獨(dú)的label，目的是為了簡(jiǎn)化dom結(jié)構(gòu)，在傳統(tǒng)的jq項(xiàng)目或者zepto項(xiàng)目中，一般會(huì)會(huì)這樣寫(xiě)，主要是為了方便操作demo，但是vue項(xiàng)目完全不用考慮dom的操作，怎么方便怎么來(lái)就ok。

在加些簡(jiǎn)單的樣式，

 .header-title
 height 42px
 line-height 42px
 background #f5f5f5
 border-bottom 1px solid #ddd
 .header-title h3
 font-weight normal
 text-align center
 .car-list 
 background #f2f2f2
 margin-top 12px
 padding 8px
 .car-item
 border-bottom 1px solid #ddd
 position relative
 height 76px
 overflow hidden
 .car-checkbox
 display none
 .input-block
 width 30px
 float left
 height 55px
 line-height 55px
 .input-label
 cursor pointer 
 position absolute 
 width 18px 
 height 18px 
 top 18px 
 left 0 
 background #fff 
 border:2px solid #ccc
 border-radius 50%
 .input-label:after 
 opacity 0 
 content '' 
 position absolute 
 width 9px 
 height 5px 
 background transparent 
 top 6px 
 left 6px 
 border 2px solid #333 
 border-top none 
 border-right none 
 -webkit-transform rotate(-45deg) 
 -moz-transform rotate(-45deg) 
 -o-transform rotate(-45deg) 
 -ms-transform rotate(-45deg) 
 transform rotate(-45deg) 
 .car-img
 width 64px
 height 64px
 float left
 overflow hidden
 .car-img img
 width 100%
 .input-label.active
 background #F15A24
 .car-cont 
 margin-left 100px
 .car-cont h3
 font-weight normal
 line-height 24px
 font-size 14px
 .car-price 
 position absolute
 right 12px
 bottom 0px
 width 40px
 height 40px
 text-align right
 .car-price span
 display block
 height 24px
 line-height 24px
 width 100%
 .car-footer 
 height 60px
 background #f5f5f5
 position fixed
 bottom 0
 left 0
 right 0
 .foot-car
 width 42px
 height 60px
 float left
 margin-left 12px
 position relative
 .total-cont 
 height 60px
 line-height 60px
 font-size 16px
 float left
 .total-cont span
 display inline-block 
 margin-left 12px
 .btn-box
 float right
 height 60px
 line-height 60px
 .btn-box button
 height 100%
 width: 100px
 border none
 background #F15A24
 color #fff
 font-size 16px
 .num
 position absolute
 top 28px
 right 25px
 width 120px
 .num span
 display inline-block
 width 28px
 height 28px
 float left
 text-align center
 line-height 28px
 border 1px solid #ddd
 font-size 14px

最近在學(xué)習(xí)stylus的使用，所以，就當(dāng)做練習(xí)了。
接下就是javascript了。

export default {
 data () {
  return {
  good_list: [
   {
   title: 'Apple iPhone 6s 16GB 玫瑰金色 移動(dòng)聯(lián)通電信4G手機(jī)',
   img: "http://sc.tywebs.cn/public/upload/goods/2017/04-27/a767693b9a84747f25335f0e33d3d380.jpg",
   num: 2,
   price: 6070.00,
   spec_item:[
    '內(nèi)存:16G',
    '網(wǎng)絡(luò):4G',
    '顏色:玫瑰金'
   ],
   is_selected: false
   },{
   title: 'Apple iPhone 6s 32GB 玫瑰金色 移動(dòng)聯(lián)通電信4G手機(jī)',
   img: 'http://sc.tywebs.cn/public/upload/goods/2017/04-27/a767693b9a84747f25335f0e33d3d380.jpg',
   num: 2,
   price: 4570.00,
   spec_item:[
    '內(nèi)存:32G',
    '網(wǎng)絡(luò):4G',
    '顏色:玫瑰金'
   ],
   is_selected: true
   },{
   title: 'Apple iPhone 6s 8GB 玫瑰金色 移動(dòng)聯(lián)通電信4G手機(jī)',
   img: 'http://sc.tywebs.cn/public/upload/goods/2017/04-27/a767693b9a84747f25335f0e33d3d380.jpg',
   num: 2,
   price: 4870.00,
   spec_item:[
    '內(nèi)存:8G',
    '網(wǎng)絡(luò):4G',
    '顏色:玫瑰金'
   ],
   is_selected: false
   },{
   title: 'Apple iPhone 6s 128GB 玫瑰金色 移動(dòng)聯(lián)通電信4G手機(jī)',
   img: 'http://sc.tywebs.cn/public/upload/goods/2017/04-27/a767693b9a84747f25335f0e33d3d380.jpg',
   num: 2,
   price: 10568.00,
   spec_item:[
    '內(nèi)存:128G',
    '網(wǎng)絡(luò):4G',
    '顏色:玫瑰金'
   ],
   is_selected: true
   },
  ],
  totalPrice: 0,
  totalNum: 0,
  selected_all: false
  }
 },
 mounted: function () {
  this.getTotal();
 },
 watch: {
  'good_list': {
  handler: function (val, oldVal) {
   // console.log(val)
   return val;
  },
  deep: true
  }
 },
 methods: {
  getTotal () {
  this.totalPrice = 0
  this.totalNum = 0
  for (var i = 0; i < this.good_list.length; i++) {
   var _d = this.good_list[i]
   if(_d.is_selected){
   this.totalPrice += _d['price'] * _d['num']
   this.totalNum +=_d['num']
   }
  }
  },
  select_one (index) {
  if(this.good_list[index].is_selected == true){
   this.good_list[index].is_selected = false
  }else{
   this.good_list[index].is_selected = true
  }
  this.getTotal()
  },
  slect_all () {
  if(this.selected_all){
   for (var i = 0; i < this.good_list.length; i++) {
   this.good_list[i].is_selected = false;
   }
   this.selected_all = false   
  }else{
   for (var i = 0; i < this.good_list.length; i++) {
   this.good_list[i].is_selected = true;
   }
   this.selected_all = true   
  }
  this.getTotal()
  },
  reduce (index) {
  if(this.good_list[index].num <= 1) return;
  this.good_list[index].num --
  this.getTotal()
  },
  add (index) {
  this.good_list[index].num ++
  this.getTotal()
  }
 }
 }

這里用mock數(shù)據(jù)來(lái)代替后臺(tái)請(qǐng)求數(shù)據(jù)的動(dòng)作，為了方便測(cè)試，邏輯比較簡(jiǎn)單，首先getTotal這個(gè)方法用來(lái)計(jì)算選中的item的數(shù)量以及總價(jià)，select_one用來(lái)處理單個(gè)選中的邏輯，slect_all 用來(lái)處理全部選中以及全部取消選中的操作，reduce用來(lái)處理處理減操作，顧名思義add用來(lái)處理加的操作。當(dāng)然在真實(shí)的開(kāi)發(fā)中，還會(huì)有校驗(yàn)庫(kù)存的動(dòng)作，每次加減都要校驗(yàn)庫(kù)存。數(shù)據(jù)處理也會(huì)更復(fù)雜，但是聞琴弦而知雅意，器原理都是相通的。

github地址傳送門(mén)

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: