4dkankan_official/src/page/layout/aside/temp/ctemp/detail.vue

<template>
  <div>
    <div class="detail-layout">
      <div class="detail-header">
        <div class="c-title">确认订单</div>
        <i v-if="fromList" @click="backHandle" class="iconfont icon-shang"></i>
        <i v-else @click="closeHandle" class="iconfont right icon-cuowu"></i>
      </div>
      <edit
        :name="'收货信息'"
        @clickOper="handleOper('addressStatus')"
        :oper="addressStatus?'编辑':'收起'"
        :isActive="addressStatus"
        class="edit-item"
      >
        <div class="address show-address" slot="show">
          <img src="@/assets/images/address-icon.png" alt>
          <div>
            <p>{{address.shipName}}</p>
            <p class="p-desc">{{`${address.shipAreaPath}${address.shipAddress}`}}</p>
          </div>
        </div>
        <div class="address edit-address" slot="edit">
          <div class="input-con">
            <input type="text" v-model="editAdd.shipName" :placeholder="address.shipName||'姓名'">
            <input type="text" v-model="editAdd.shipMobile" :placeholder="address.shipMobile||'电话'">
          </div>
          <div class="input-con">
            <citySelect :areaPath="editAdd.shipAreaPath" @currentVal="getCurrentSelect"/>
          </div>
          <div class="input-con address-input">
            <input
              type="text"
              v-model="editAdd.shipAddress"
              :placeholder="editAdd.shipAddress||'详细地址'"
            >
          </div>
          <div class="btn parmary" @click="uAddress">保存</div>
        </div>
      </edit>
      <div class="pay-type">
        <div class="title">支付方式</div>
        <div class="body">
          <div class="pay-tag" :class="{'tag-active':paytype===1}" @click="paytype=1">
            <img src="@/assets/images/ali-pay.png" class="t-icon" alt>
            <span>支付宝</span>
            <img src="@/assets/images/tag-icon.png" class="t-click" alt>
          </div>
          <div class="pay-tag" :class="{'tag-active':paytype===0}" @click="paytype=0">
            <img src="@/assets/images/wechat-pay.png" class="t-icon" alt>
            <span>微信支付</span>
            <img src="@/assets/images/tag-icon.png" class="t-click" alt>
          </div>
          <div class="pay-tag" :class="{'tag-active':paytype===2}" @click="paytype=2">
            <img src="@/assets/images/paypal.png" class="t-icon" alt>
            <span>paypal</span>
            <img src="@/assets/images/tag-icon.png" class="t-click" alt>
          </div>
        </div>
      </div>
      <edit
        :name="'我的发票抬头'"
        @clickOper="handleOper('invoiceStatus')"
        :oper="invoiceStatus?'编辑':'收起'"
        :isActive="invoiceStatus"
        class="edit-item"
      >
        <div class="invoice invoice-address" slot="show">
          <div class="select-con">
            <div :class="{'tag-active':invoice==='noinvoice'}" @click="invoice='noinvoice'">
              <span>不需要发票</span>
              <img src="@/assets/images/tag-icon.png" alt>
            </div>
            <div :class="{'tag-active':invoice==='normal'}" @click="invoice='normal'">
              <span>增值税普通发票</span>
              <img src="@/assets/images/tag-icon.png" alt>
            </div>
            <div :class="{'tag-active':invoice==='zengzhi'}" @click="invoice='zengzhi'">
              <span>增值税专用发票</span>
              <i></i>
              <img src="@/assets/images/tag-icon.png" alt>
            </div>
          </div>
          <div class="invoice-detail" v-if="invoice==='normal'">
            <template v-if="!invoice2.title">
              <p class="p-desc">暂无信息</p>
            </template>
            <template v-else>
              <p>{{invoice2.title}}</p>
              <p class="p-desc">{{invoice2.code}}</p>
            </template>
          </div>
          <div class="invoice-detail" v-if="invoice==='zengzhi'">
            <template v-if="!invoice3.title">
              <p class="p-desc">暂无信息</p>
            </template>
            <template v-else>
              <p>{{invoice3.title}}</p>
              <p class="p-desc">{{invoice3.code}}</p>
              <p class="p-desc">{{invoice3.organizedAddress}}</p>
              <p class="p-desc">{{invoice3.registerPhone}}</p>
              <p class="p-desc">{{invoice3.bankName}}</p>
              <p class="p-desc">{{invoice3.bankAccount}}</p>
            </template>
          </div>
        </div>
        <div class="invoice edit-invoice" slot="edit">
          <div class="select-con">
            <div :class="{'tag-active':invoice==='normal'}" @click="invoice='normal'">
              <span>增值税普通发票</span>
              <img src="@/assets/images/tag-icon.png" alt>
            </div>
            <div :class="{'tag-active':invoice==='zengzhi'}" @click="invoice='zengzhi'">
              <span>增值税专用发票</span>
              <i></i>
              <img src="@/assets/images/tag-icon.png" alt>
            </div>
          </div>
          <div class="invoice-input" v-if="invoice==='normal'">
            <div class="input-con">
              <input type="text" placeholder="请输入发票抬头" v-model="editInvoice2.title">
              <input type="text" placeholder="请输入税务登记号（个人用户可不填）" v-model="editInvoice2.code">
            </div>
          </div>
          <div class="invoice-input" v-if="invoice==='zengzhi'">
            <div class="input-con">
              <input type="text" v-model="editInvoice3.title" placeholder="请输入发票抬头">
              <input type="text" v-model="editInvoice3.code" placeholder="请输入税务登记号（个人用户可不填）">
            </div>
            <div class="input-con">
              <input type="text" v-model="editInvoice3.organizedAddress" placeholder="注册地址">
              <input type="text" v-model="editInvoice3.registerPhone" placeholder="注册电话">
            </div>
            <div class="input-con">
              <input type="text" v-model="editInvoice3.bankName" placeholder="开户银行">
              <input type="text" v-model="editInvoice3.bankAccount" placeholder="银行账户">
            </div>
          </div>
            <div @click="saveInvoice(invoice)" class="btn parmary">保存</div>
        </div>
      </edit>
      <div class="express-type">
        <div class="title">物流方式</div>
        <img class="express-img" src="@/assets/images/sf-express.png" alt>
      </div>
      <div class="product-type">
        <div class="title">商品信息</div>
        <div class="p-info" v-for="(item,i) in sku" :key="i">
          <img :src="item.goodsId===4?`${$cdn}images/banner_pro.png`:`${$cdn}images/t_product.png`" alt>
          <div class="p-params">
            <h3>{{item.goodsId === 4?'四维看看 Pro':'四维看看 Lite'}}</h3>
            <p>本机主体 x {{item.goodsCount}}, 拍摄支架 x {{item.goodsCount}}</p>
          </div>
          <div class="p-price">￥ {{item.price}}</div>
        </div>
        <div class="p-detail">
          <div>
            <span>商品总价：</span>
            <span>￥{{getSum()[1]}}</span>
          </div>
          <div>
            <span>税费及其他费用：</span>
            <span>￥0</span>
          </div>
          <div>
            <span>运费：</span>
            <span>￥0</span>
          </div>
          <div>
            <span>合计：</span>
            <span>￥{{getSum()[1]}}</span>
          </div>
        </div>
        <div class="p-pay">
          <div class="agree"  @click="agree=~agree">
            <span>
              <img v-if="agree"  src="@/assets/images/icon-click.png" alt="">
            </span>
            <span>同意商城销售协议</span>
          </div>
          <div class="c-button purchase" @click="pay">付款</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import vcenter from '@/components/vcenter'
import edit from '@/components/edit'
import citySelect from '@/components/citySelect'
import { mapState } from 'vuex'
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 {
  props: ['sku', 'fromList'],
  data () {
    return {
      agree: -1,
      addressStatus: true,
      tempSelect: '',
      invoiceStatus: true,
      invoice: 'noinvoice',
      paytype: 0
    }
  },
  components: {
    vcenter,
    edit,
    citySelect
  },
  computed: {
    ...mapState({
      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) : {})
      },
      editInvoice2: 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 cloneObj(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) : {})
      },
      editInvoice3: 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 cloneObj(condition ? JSON.parse(state.user.invoice3) : {})
      },
      token: state => state.user.token,
      address: state => state.user.address || {},
      editAdd: state => cloneObj(state.user.address) || {},
      language: state => state.language.current

    })
  },
  methods: {
    backHandle () {
      this.$emit('backList')
    },
    closeHandle () {
      this.$bus.$emit('hideAside')
    },
    handleOper (type) {
      if (type === 'invoiceStatus') {
        this.invoice === 'noinvoice' ? this[type] = true : this[type] = !this[type]
      } else {
        this[type] = !this[type]
      }
    },
    uAddress () {
      this.editAdd.province = this.tempSelect[0]
      this.editAdd.city = this.tempSelect[1]
      this.editAdd.shipAreaPath = this.tempSelect.join(',')
      let {
        shipAddress,
        shipAreaPath,
        province,
        city,
        shipMobile,
        shipName
      } = this.editAdd
      let params = {
        shipAddress,
        shipAreaPath,
        province,
        city,
        shipMobile,
        shipName
      }
      this.$http
        .post('/user/updateAddress', params, {
          headers: {
            token: this.token
          }
        })
        .then(data => {
          this.addressStatus = true
          this.$store.dispatch('getInfo', {
            url: '/user/getReceiverInfo',
            name: 'address'
          })
        })
    },
    getCurrentSelect (data) {
      this.tempSelect = data
    },
    getSum () {
      let sum = 0
      let count = 0
      this.sku.forEach(item => {
        sum += item.goodsCount * item.price
        count += item.goodsCount
      })
      return [count, sum]
    },
    async pay () {
      if (!this.agree) {
        return this.$toast.show('warn', '请同意条款')
      }
      let invoice = this.invoice === 'normal' ? this.invoice2 : this.invoice === 'zengzhi' ? this.invoice3 : null
      let params = {
        goods: this.sku,
        receiver: this.address,
        invoice: invoice,
        payType: this.paytype,
        abroad: this.language === 'en' ? 1 : 0
      }
      let res = await this.$http
        .post('user/order/placeOrder', params, {
          headers: {
            token: this.token
          }
        })
      this.$bus.$emit('hideAside')
      this.$store.dispatch('getCart')
      this.$router.push({name: 'pay',
        params: {
          payType: this.paytype,
          orderId: res.data.data.id,
          orderType: 0,
          orderSn: res.data.data.orderSn
        }})
    },
    saveInvoice (cInvoice) {
      let params = {}
      let invoiceType = ''

      if (cInvoice === 'normal') {
        invoiceType = 2
        params = {
          invoiceType,
          title: this.editInvoice2.title,
          code: this.editInvoice2.code
        }
      } else {
        let {title, code, organizedAddress, registerPhone, bankName, bankAccount} = this.editInvoice3
        invoiceType = 3
        params = {
          invoiceType,
          title,
          code,
          organizedAddress,
          registerPhone,
          bankName,
          bankAccount
        }
      }

      this.$http
        .post('user/invoice/save', params, {
          headers: {
            token: this.token
          }
        })
        .then(data => {
          this.invoiceStatus = true
          this.$store.dispatch('getInvoice', {
            type: invoiceType,
            params: {
              invoiceType: invoiceType
            }
          })
        })
    }
  },
  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 "./detail.scss";
</style>