vue 購物車結算

<template>
  <div class="Goods">
    <div class="hed"></div>
    <div class="main">
      <ul>
        <li v-for="(item,index) in list" :key="item.id">    
          <input type="checkbox" v-model="item.flag" @click="radio(index)" class="choose">**//選擇**
          <img :src="item.img" class="logo" alt="">
          <div class="info">
            <p class="tit">{{item.title}}</p>
            <p class="content">{{item.description}}</p>
          </div>
          <p class="price">￥<span>{{item.price}}</span></p>
          <div class="num">
            <span @click="reduce(index)">-</span>**減數量**
            <span>{{item.num}}</span>
            <span @click="add(index)">+</span>**加數量**
          </div>
          <div class="total_price">
            <p>
              <span style="color: #000;font-size: 16px">總金額:</span>
              <span id="price" ref="price">{{item.price*item.num}}</span></p>
          </div>
          <div class="delete" :key="item.id" @click="del_cart(item.id)">刪除</div>**刪除當前商品**
        </li>
      </ul>
    </div>
    <!--結算-->
    <div class="pay">
      <input type="checkbox" @click="checkAll" v-model="allFlag" class="allCheck">**全選**
      <p class="p1">全選</p>
      <div class="del">
        <img :src="imgUr2" alt="">
        <span style="cursor: pointer" @click="delCheck">刪除</span>**刪除選擇的商品**
      </div>
      <p class="shop">
        已選商品 <span>{{num}}</span> 件 總金額：<span>{{money}}</span>
      </p>
      <p class="submit" @click="jieSuan">去結算</p>**結算**
    </div>
  </div>
</template>

<script>
  import qs from 'qs'

  export default {
    name: 'Goods',
    data() {
      return {
        imgUrl: require('../../../assets/imgs/ceshi1.jpg'),
        imgUr2: require('../../../assets/imgs/delete.png'),
        list: [],
        cart_id: null,
        num: 0,//默認總數量
        money: 0,//默認總價
        cartList: [],//選中的商品列表
        allFlag: false,//全選
      }
    },
    //初始化加載   顯示總價總數量
    created: function () {
      var price = 0;
      var numb = 0;
      var list = this.list;
      for (var i = 0; i < list.length; i++) {
        if (list[i].selected) {
          price += list[i].num * list[i].price;
          numb += list[i].num;
        }
      }
      this.money = price;
      this.num = numb;
      // console.log(numb);
      // console.log(price);
    },
    mounted() {
      this.cart()**購物車列表**
    },
    methods: {
      //計算總價總數量
      hh: function () {
        var price = 0;
        var numb = 0;
        var list = this.list;
        for (var i = 0; i < list.length; i++) {
          if (list[i].flag) {
            price += list[i].num * list[i].price;
            numb += Number(list[i].num)
          }
        }
        this.money = price;
        this.num = numb;
        // console.log(this.num);
      },
      //  獲取購物車
      cart: function () {
        let arr = []
        let postData = qs.stringify({
          '': '',
          user_id: localStorage.getItem('user_id'),
          ' ': '',
        })
        this.$post('Mall/myShoppingTrolley', postData)
          .then((response) => {
            // console.log('購物車列表')
            // console.log(response)
            if (response.code == 1) {
              if (response.obj != null) {
                for (let i = 0; i < response.obj.length; i++) {
                  response.obj[i].flag = false;
                }
                arr = response.obj
              }
            }
            this.list = arr
          })
      },
      //點擊增加數量、
      add: function (index) {
        var list = this.list;
        var num = Number(list[index].num)
        num = num + 1;
        list[index].num = num;
        this.hh();
      },
      //點擊減少數量
      reduce: function (index) {
        var list = this.list;
        var num = Number(list[index].num)
        if (num > 1) {
          num = num - 1;
          list[index].num = num;
        }
        this.hh();
      },
      //  刪除單個商品
      del_cart: function (id) {
        let postData = qs.stringify({
          '': '',
          id: JSON.stringify(id),
          ' ': '',
        })
        this.$post('Mall/delShoppingTrolley', postData)
          .then((response) => {
            // console.log(response)
            if (response.code == 1) {
              this.cart()
            }
          })
      },
      //多選刪除
      delCheck: function () {
        let arr = {}
        if (this.cartList.length != 0) {
          for (let i = 0; i < this.cartList.length; i++) {
            arr[i] = this.cartList[i].id
          }
          let postData = qs.stringify({
            '': '',
            id: JSON.stringify(arr),
            ' ': '',
          })
          this.$post('Mall/delShoppingTrolley', postData)
            .then((response) => {
              // console.log(response)
              if (response.code == 1) {
                this.cart()
                this.allFlag = false
              }
            })

        } else {
          alert('您還沒有選擇商品哦')
        }


      },
      //  單選
      radio: function (index) {
        let arr=[]
        this.cartList = []
        this.list[index].flag = !this.list[index].flag
        for (let index = 0; index < this.list.length; index++) {
          if (this.list[index].flag) {
            this.cartList.push(this.list[index])
          }
        }
        // console.log(this.cartList)
        this.hh()
        if (this.cartList.length == this.list.length) {
          this.allFlag = true
        } else {
          this.allFlag = false
        }
      },
      //  全選
      checkAll: function () {
        this.cartList = []
        this.allFlag = !this.allFlag
        if (this.allFlag) {
          for (let i = 0; i < this.list.length; i++) {
            this.list[i].flag = true
            this.list = this.list
          }
          this.cartList = this.list
          this.hh()
        }
        else {
          for (var i = 0; i < this.list.length; i++) {
            this.list[i].flag = false
          }
          this.cartList = []
          this.hh()
        }
      },
      //去結算
      jieSuan: function () {
        if (this.cartList.length != 0) {
          let str=JSON.stringify(this.cartList)
          localStorage.setItem('cartList',str)
          localStorage.setItem('money',this.money)
          this.delCheck()
          this.$router.push({path: '/jieSuan'});

        } else {
          alert('您還沒有選擇商品哦')
        }
      }
    }

  }
</script>
<style scoped lang="stylus">
  a
    text-decoration: none

  .hed
    width: 100%;
    background #13D1BE
    height 70px

  .Goods
    width: 100%;

  .main
    width 1200px
    margin auto
    margin-bottom 20px
    background #F7FFFE
    height 600px
    overflow-y scroll

  .main ul
    width: 100%;
    height: 100%;
    padding-top 30px

  .main li
    width 90%
    height 140px
    margin auto
    margin-bottom 30px
    background #fff

  .choose
    float: left
    display block
    margin-top 64px
    margin-left 20px

  .logo
    width: 90px;
    height: 90px;
    float: left;
    display: block;
    margin-top: 27px;
    margin-left: 12px;

  .info
    float: left;
    display: block;
    font-size 16px
    width 300px
    margin-left 20px

  .info .tit
    color: #000;
    margin-top: 36px;
    margin-bottom: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

  .info .content
    color #A0A0A0
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

  .price
    font-size 24px
    color #000
    float: left;
    display: block;
    line-height 140px

  .num span
    font-size 16px
    display: inline-block

  .num span:nth-child(1),
  .num span:nth-child(3)
    width 31px
    cursor pointer
    height: 31px
    display: inline-block
    background #13d1be
    text-align center
    line-height 31px
    color #ffffff
    font-size 20px

  .num span:nth-child(2)
    height: 31px
    padding 0 20px
    display: inline-block
    background #13d1be
    text-align center
    line-height 31px
    color #ffffff
    font-size 20px

  .num
    line-height: 140px;
    margin-left: 40px;
    float: left;
    display: block;

  .total_price
    float: left;
    display: block;
    margin-left: 40px;

  .total_price p:nth-child(1)
    color #FE5A46
    font-size 24px
    margin-top 54px

  .total_price p:nth-child(2)
    color #A0A0A0
    font-size 16px
    text-indent: 20px

  .delete
    color #000000
    font-size 16px
    line-height 140px
    float: right;
    display: block;
    margin-right: 40px;
    cursor: pointer;

  .pay
    width 1200px
    height: 90px
    background #fff
    border 1px solid #eee
    margin: auto
    margin-bottom 5px

  .allCheck
    display: block;
    margin-top: 39px;
    float: left;
    margin-left: 30px;

  .p1
    line-height 90px
    display: block
    float: left;
    margin-left 10px

  .del
    display: block
    float: left;
    margin-left 50px
    line-height 90px

  .del img
    width 16px
    height: 16px

  .shop
    display: block
    float: left;
    font-size 16px
    color #A0A0A0
    line-height 90px
    margin-left 500px

  .shop span
    color #FE5A46

  .submit
    width 220px
    height: 90px
    line-height 90px
    color #ffffff
    background #FE5A46
    text-align center
    float: right
    font-size 24px
    cursor: pointer;

  .tip_cart
    text-align center
    font-size 30px
    margin-top 100px

  /* 滾動條出現不出現 當摸個滾動條不想讓出現是可以這樣*/
  #content_right::-webkit-scrollbar {
    display: none;
  }

  /*樣式改變代碼-----------------------------------------------------*/
  /* 滾動條整體部分 */
  .main::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background-color: #f7fffe;
  }

  /* scroll軌道背景 */
  .main::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px #f7fffe;
    border-radius: 10px;
    background-color: #f7fffe;
  }

  /* 滾動條中能上下移動的小塊 */
  .main::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    background-color: #f7fffe;
  }

  /*樣式改變代碼-----------------------------------------------------*/

</style>