10-订单确认页商品数据

一、商品部分

首先需要循环购物车数组，选中状态的数据全都push到一个数组，然后渲染这个数组即可。

//getters
// 统计所有被选中即将结算的商品
    checkedGoods (state) {
      let checkedGoods = []
      state.carPanelData.forEach((goods) => {
        if (goods.checked) {
          checkedGoods.push(goods)
        }
      })
      return checkedGoods
}
======
computed: {
        // 获取待结算数据
       checkedGoods(){
           return this.$store.getters.checkedGoods
       },
        // 商品全额
        checkedPrice(){
            return this.$store.getters.checkedPrice
      },
      //运费
      freight (){
          let freight = 8
          if(this.checkedPrice > 88){
              freight = 0
          }
          return freight
      }
}

二、 收货地址和发票信息

1. 首先把默认的绑定

state: {
    carPanelData: [], // 新增了count属性计算数量，和checked属性判断是否选中
    maxOff: false, // 弹窗开关
    carShow: false, // 购物车开关
    carTimer: null, // 购物车定时器
    receiveInfo : [{ // 已存在的地址
      'name': '王某某',
      'phone': '13811111111',
      'areaCode': '010',
      'landLine': '64627856',
      'provinceId': 110000,
      'province': '北京市',
      'cityId': 110100,
      'city': '市辖区',
      'countyId': 110106,
      'county': '海淀区',
      'add': '上地十街辉煌国际西6号楼319室',
      'default': true
    }
==========
<li class="js-choose-address " 
   :class="{'selected-address-item':receiveIndex==index}"
   v-for="recevie,index in receiveInfo"
   @click="chooseReceive(index)"
>

2. 添加新地址弹窗组件

<address-pop v-show="popShow"></address-pop>
import addressPop from '@/components/address-pop'
  export default {
    data() {
      return {
        receiveIndex : 0, // 地址切换
        popShow : true
      }
    },
    components: {
        addressPop
    }

3. 子组件关闭按钮
   此类都是更改父级变量，子类改父类，都用触发父级的自定义事件。

<address-pop @close='closePop' v-show="popShow"></address-pop>
   methods : {
         closePop(){
             this.popShow = false
         }
    }
=====
//子级
methods: {
        chlosePop(){
            this.$emit('close')
        }
}
<span class="dialog-close" @click="chlosePop">x</span>

4. 发票选择
   如果是个人，不显示抬头，如果是公司，显示抬头

   
   屏幕快照 2018-03-13 下午7.14.11.png
   

   思路 ： 选中的样式，用class绑定即可，切换显示直接传布尔值

// 个人
 <label @click="checkedInvoice(true)">
// 公司
 <label  @click="checkedInvoice(false)">
   <input type="radio" class="hide">
   <span class="blue-radio"  
      :class="{'blue-radio-on':!invoice.personal}">
     <a></a>
   </span> 单位
</label>
 data() {
      return
        // 发票显示
        invoice : {
            personal : true, // 默认个人
            name : '' // 发票抬头，默认为空
        }
      }
    }
// 切换公司发票信息
         checkedInvoice(boole){
             this.invoice.personal = boole
         }

5. 将发票填写的信息绑定到input的name中。
   思路 ： 使用v-model双向绑定，name就是抬头，所以直接绑定这个name即可。v-model="invoice.name"

<div class="module-form-item-wrapper no-icon small-item">
  // 如果没有输入就显示
  <i v-show="!invoice.name">请填写公司发票抬头</i>
  <input type="text" class="js-verify" v-model="invoice.name">
</div>