4dkankan_mobile/src/pages/account/manage/confirm/index.vue

<template>
  <div class="confirm-layout">
    <div class="time-line">
      <div class="line"></div>
      <div class="auth">
        <img :src="`${$cdn}images/hasLogin.png`" alt="" class="timeline-icon">
        <div class="timeline-text">登录信息</div>
      </div>
      <div class="shipping">
        <img :src="`${$cdn}images/spot.png`" alt="" class="timeline-icon">
        <div class="timeline-text">配送信息</div>
      </div>
      <div class="payment">
        <img :src="`${$cdn}images/ic_schedule_default_mb@2x.png`" alt="" class="timeline-icon">
        <div class="timeline-text">支付信息</div>
        </div>
      <div class="review">
        <img :src="`${$cdn}images/ic_schedule_default_mb@2x.png`" alt="" class="timeline-icon">
        <div class="timeline-text">订单提交</div>
      </div>
    </div>
    <div class="box-con">
      <div class="bc-title">收货地址</div>
      <div class="bc-item address-item" v-if="isShowAddress">
        <div class="bc-ct">
          <div class="bc-contact">
            {{address.shipName}}
            <div>{{address.shipMobile}}</div>
          </div>
          <div class="bc-locotion">
            {{`${address.shipAreaPath}${address.shipAddress}`}}
          </div>
        </div>
        <div class="bc-edit" @click="isShowAddress=false">编辑</div>
      </div>
      <div class="address-con" v-else>
        <citySelect :address='address' :token="token" @closeSelect="data=>{isShowAddress=data}" />
      </div>
    </div>
    <div class="box-con">
      <div class="bc-title">物流方式</div>
      <div class="bc-item  express-item">
        <div class="item-method">顺丰速运</div>
        <div class="item-time">标准配送</div>
      </div>
    </div>
    <div class="box-con">
      <div class="bc-title">发票</div>
      <div class="invoice-con" :class="{'invoice-focus':selected}">
        <div class="invoice-select" @click="selected=!selected">
          <div class="select-txt">{{selectedTxt}}</div>
          <i class="iconfont icon-xia"></i>
        </div>
        <ul class="invoice-item" :class="{'invoice-active':selected}">
          <li v-for="(item,i) in invoiceType" :key="i" @click="handleItem(item)">{{item.name}}</li>
        </ul>
        <cinvoices v-if="selectedId!==1" :invoice='invoice2' :selectedId='selectedId' :invoicet="invoice3" :token="token" @closeInvoice="data=>{isShowInvoice=data}"/>
      </div>
    </div>
    <div class="btn-confirm" @click="next()">下一步</div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import citySelect from '@/components/citySelect'
import cinvoices from '@/components/cinvoices'
var cloneObj = function (obj) {
  var newObj = {}
  if (obj instanceof Array) {
    newObj = []
  }
  for (var key in obj) {
    var val = obj[key]
    newObj[key] = typeof val === 'object' ? cloneObj(val) : val
  }
  return newObj
}

export default {
  components: {
    citySelect,
    cinvoices
  },
  computed: {
    ...mapState({
      token: state => state.user.token,
      invoice2: state => {
        let type = Object.prototype.toString.call(state.user.invoice2)
        if (type === '[object Object]') {
          return state.user.invoice2
        }
        let condition = state.user.invoice2 && state.user.invoice2 !== 'null' && type !== '[object Array]'
        return (condition ? JSON.parse(state.user.invoice2) : {})
      },
      invoice3: state => {
        let type = Object.prototype.toString.call(state.user.invoice3)
        if (type === '[object Object]') {
          return state.user.invoice3
        }
        let condition = state.user.invoice3 && state.user.invoice3 !== 'null' && type !== '[object Array]'

        return (condition ? JSON.parse(state.user.invoice3) : {})
      },
      payinfo: state => {
        let type = Object.prototype.toString.call(state.user.payinfo)
        if (type === '[object Object]') {
          return state.user.payinfo
        }
        let condition = state.user.payinfo && state.user.payinfo !== 'null' && type !== '[object Array]'
        return condition ? JSON.parse(state.user.payinfo) : {}
      },
      address: state => cloneObj(state.user.address) || {}
    })
  },
  data () {
    let invoiceType = [{
      id: 1,
      name: '不需要发票'
    }, {
      id: 2,
      name: '增值税普通发票'
    }, {
      id: 3,
      name: '增值税专用发票'
    }]
    return {
      invoiceType,
      selected: false,
      selectedTxt: '不需要发票',
      selectedId: 1,
      isShowAddress: true
    }
  },
  methods: {
    handleItem (item) {
      this.selectedTxt = item.name
      this.selectedId = item.id
      this.selected = false
    },
    next () {
      let temp = cloneObj(this.payinfo)

      let invoice = this.selectedId === 2 ? this.invoice2 : this.selectedId === 3 ? this.invoice3 : null
      console.log(invoice)
      temp['invoice'] = invoice
      temp['receiver'] = this.address

      this.$store.commit('PAYINFO', temp)
      this.$router.push({path: '/paytype'})
    }
  },
  mounted () {
    if (this.address && Object.keys(this.address).length > 0) return
    this.$store.dispatch('getInfo', {
      url: '/user/getReceiverInfo',
      name: 'address'
    })
  }
}
</script>

<style lang="scss" scoped>
@import './style.scss';
</style>