realtorEasier-webSite/mobile/src/pages/userCenter/confirm/index.vue

<template>
  <div class="confirm-layout">
    <div class="confirm-title">确认订单</div>
    <div class="box-con">
      <div class="bc-title">收货地址</div>
      <div class="bc-item address-item" :class="{'is-active': item.id === address.id}"  v-for="item in addressList" :key="item.id" @click="address = item">
        <div class="bc-ct">
          <div class="bc-contact">
            {{item.shipName}}
            <div>{{item.shipMobile}}</div>
          </div>
          <div class="bc-locotion">
            {{`${item.shipAreaPath}${item.shipAddress}`}}
          </div>
        </div>
      </div>
      <div class="noaddress"  v-if="addressList.length < 3">
          <p @click="$router.push({name: 'addressCreate'})"><h-icon type="jiahao" />新增收货地址</p>
        </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" @showInvoice="data=>{showinvoice=data}" :token="token" @closeInvoice="data=>{isShowInvoice=data}"/>
      </div>
    </div>
    <div class="box-con">
      <div class="bc-title">商品信息</div>
      <div class="confirm-products">
        <div class="confirm-products-item" v-for="(item,i) in payinfo.goods" :key="i">
          <div class="product-thumb" :style="{'background-image': `url(${pictures[item.goodsId]})`}">
            <!-- <img :src="" alt=""> -->
          </div>
          <div class="product-info">
            <div class="product-name">
              <p class="img-p">{{cameraName[item.goodsId]}}</p>
            </div>
            <ul>
              <li class="product-name" v-for="(item,i) in detail[item.goodsId]" :key="i">{{item}}</li>
            </ul>
            <div class="product-count">
              <span class="product-price">￥{{item.price}} x {{item.goodsCount}}</span>
              <span class="product-sum fr">￥{{item.price*item.goodsCount}}</span>
            </div>
          </div>
        </div>
        <div class="cart-table-count">
          <div class="cart-table-count-item">
            <span class="title">商品总价:</span>
            <span class="price">￥{{getSum()[1]}}</span>
          </div>
          <div class="cart-table-count-item">
            <span class="title">税费及其他费用:</span>
            <span class="price">
              ￥0
            </span>
          </div>
          <div class="cart-table-count-item">
            <span class="title">运费:</span>
            <span class="price">
              <span class="free-shipping">
                ￥0
              </span>
            </span>
          </div>
         <div class="cart-table-total cart-table-count-item">
           <span class="total-title">合计:</span>
           <span class="total-price">￥{{getSum()[1]}}</span>
          </div>
        </div>
        <!-- <div class="xieyi"><input type="checkbox" />我已阅读并同意四维看看用户协议</div> -->
      </div>
      <div class="btn-confirm" @click="next()">付款</div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
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: {
    cinvoices,
    showinvoice: true
  },
  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) || {},
      addressList: state => state.user.addressList
    })
  },
  data () {
    let invoiceType = [{
      id: 1,
      name: '不需要发票'
    }, {
      id: 2,
      name: '增值税普票（电子发票）'
    }, {
      id: 3,
      name: '增值税专用发票'
    }]
    let pictures = {
      7: `${this.$cdn}images/zhijia.png`,
      1: `${this.$cdn}images/t_product.png`,
      4: `${this.$cdn}images/banner_pro.png`
    }
    let cameraName = {
      7: `四维看看 三脚架套装`,
      1: `四维看看 Lite二目相机`,
      4: `四维看看 Pro八目相机`
    }
    let detail = {
      7: ['四维看看 三脚架套装(标准色)'],
      1: [
        '四维看看 Lite二目相机(静谧黑)',
        '容量套餐(5G/5年)',
        '四维看看 Lite专用三脚架(标准色)'
      ],
      4: ['四维看看 Pro八目相机(静谧黑)', '容量套餐(10G)']
    }
    return {
      pictures,
      cameraName,
      detail,
      invoiceType,
      selected: false,
      selectedTxt: '不需要发票',
      selectedId: 1,
      isShowAddress: true,
      showinvoice: true,
      address: cloneObj({})
    }
  },
  methods: {
    handleItem (item) {
      this.selectedTxt = item.name
      this.selectedId = item.id
      this.selected = false
    },
    next () {
      if (!this.address.shipName) {
        return this.$toast.show('warn', '请先填写收货地址')
      }
      if (!this.isShowAddress) {
        return this.$toast.show('warn', '请先保存收货信息')
      }
      if (!this.showinvoice && this.selectedId !== 1) {
        return this.$toast.show('warn', '请先保存发票信息')
      }

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

      this.$store.commit('PAYINFO', temp)
      this.$router.push({path: '/paytype'})
    },
    getSum () {
      let sum = 0
      let count = 0
      this.payinfo.goods && this.payinfo.goods.forEach(item => {
        sum += item.goodsCount * item.price
        count += item.goodsCount
      })
      return [count, sum]
    }
  },
  async mounted () {
    this.selectedId = this.payinfo.selectedId ? this.payinfo.selectedId : 1
    this.selectedTxt = this.payinfo.selectedTxt ? this.payinfo.selectedTxt : '不需要发票'
    this.$store.dispatch('getInfo', {
      url: '/user/getReceiverInfo',
      name: 'address'
    })
    await this.$store.dispatch('updateAddressList')
    this.address = this.addressList[0]
  }
}
</script>

<style lang="scss" scoped>
@import './style.scss';
.confirm-products-item {
  display: flex;
  padding: 10px 0 17px;
  border-bottom: 1px solid #EBEBEB;
}
.confirm-title {
  font-size: 14px;
  font-weight: bold;
  padding: 27px 0 17px 20px;
  line-height: 21px;
  border-bottom: 1px solid #EBEBEB;
}
.product-thumb {
  width: 60px;
  height: 60px;
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: center center;
  border: 1px solid #EBEBEB;
  margin-right: 10px;
}
.product-info {
  font-size: 12px;
  color: #202020;
  flex: 1;
  ul {
    height: 46px;
  }
  .product-name {
    color: #909090;
    line-height: 18px;
    .img-p {
      font-size: 14px;
      font-weight: bold;
      line-height: 21px;
      margin-bottom: 3px;
      color: #202020;
    }
  }
}
.cart-table-count {
  text-align: right;
  padding-top: 17px;
  .cart-table-count-item {
    margin-bottom: 4px;
    line-height: 18px;
  }
  .cart-table-total {
    font-size: 14px;
    font-weight: bold;
    margin-top: 13px;
    line-height: 20px;
  }
}

</style>