personalhubs/src/views/pc/order/components/orderItem.vue

<template>
  <div class="order-item" :key="i">
        <!-- <div class="o-top"></div> -->
        <div class="o-title">
          <span>
            <span class="orderSn table-header">{{$t('manage.myOrders.numbers')}}{{item.orderSn}}</span>
            <span class="orderTime">{{ item.orderTime }}</span>
          </span>
          <span class="table-header">{{$t('manage.myOrders.quantity')}}</span>
          <span class="table-header">{{$t('manage.myOrders.subtotal')}}</span>
          <span class="table-header">{{$t('manage.myOrders.total1')}}</span>
        </div>
        <div class="o-detail" v-for="(sub,index) in item.orderItems" :key="index">
          <div class="od-name">
            <img class="thumbnail" :src="sub.pic" alt>
            <div>
              <p>{{$t(`manage.cameraName.${sub.goodsId}`)}}</p>
              <p v-for="(sb,i) in $t(`manage.orderDetail.${sub.goodsId}`)" :key="i" v-html="sb"></p>
            </div>
          </div>
          <div class="count">{{sub.goodsCount}}</div>
          <div class="sum">{{sub.goodsPrice*sub.goodsCount}}</div>
          <div class="sum"></div>
        </div>
        <div class="sum-price">
          <div>￥{{item.goodsAmount}}</div>
        </div>
        <div class="inovice-con" :class="{'ic-active':item.showInvoice}">
          <div class="o-invoiceTitle">
            <span>{{$t('manage.myOrders.invoice')}}</span>
            <span v-if="getStatus(item) !== 'shipped'" @click="edit"><i class="iconfont icon-edit"></i>{{$t('manage.myOrders.edit')}}</span>
            <!-- <span v-else><i class="iconfont icon-choice"></i>发票已寄出</span> -->
          </div>
          <div class="o-invoice">
            <editInvoice :data="getItemInvoice(item)" :orderId='item.id' :invoiceId="item.invoice&&(item.invoice.id)"/>
          </div>
        </div>
        <div class="bottom-area">
          <div class="bottom-left">
            <template v-if="getStatus(item) === 'unpaid'">
              <span></span>
            </template>
             <template v-else-if="getStatus(item) === 'shipped'">
              <span class="expreeNum">{{$t('manage.myOrders.wlNum')}}{{item.orderItems[0].expressNum}}</span>
            </template>
            <template v-else-if="getStatus(item) === 'unshipped'">
              <span class="expreeNum">{{$t('manage.myOrders.unshipped')}}</span>
            </template>
            <template v-else-if="getStatus(item) === 'finish'">
              <span class="expreeNum">{{$t('manage.myOrders.finish')}}</span>
            </template>
            <template v-else-if="getStatus(item) === 'partShipped'">
              <span class="expreeNum">{{$t('manage.myOrders.partShipped')}}</span>
            </template>
            <template v-else-if="getStatus(item) === 'received'">
              <span class="expreeNum">{{$t('manage.myOrders.received')}}：{{item.orderItems[0].expressNum}}</span>
            </template>
            <template v-else-if="getStatus(item) === 'expire'">
              <span class="expreeNum">{{$t('manage.myOrders.expire')}}</span>
            </template>
            <template v-else>
              <span class="expreeNum">{{$t('manage.myOrders.hasCancal')}}</span>
            </template>
          </div>
          <div class="to-pay">
            <template v-if="getStatus(item) !== 'expire'">
              <span class="cancel btns" @click="changeIvoiceStatus(i,item)">{{item.invoice && item.invoice.type ? $t('manage.myOrders.invoiceInfo') : $t('manage.myOrders.invoice')}}</span>
              <template v-if="getStatus(item) === 'unpaid'">
                <span class="cancel btns" @click="cancal(item)">{{$t('manage.myOrders.cancal')}}</span>
                <span class="pay btns" @click="toPay(item)">{{$t('manage.myOrders.pay')}}</span>
              </template>
            </template>
          </div>
        </div>
      </div>
</template>

<script>
import { mapState } from 'vuex'
import editInvoice from '@/components/editInvoice'

export default {
  props: {
    item: Object,
    i: Number
  },
  inject: ['getList'],
  provide () {
    return {
      hideInvoice: this.hideInvoice,
      saveInvoiceData: this.saveInvoice
    }
  },
  data () {
    return {
      showInvoice: true
    }
  },
  computed: {
    ...mapState({
      token: state => state.user.token,
      language: state => state.language.current,
      myorder: state => {
        let type = Object.prototype.toString.call(state.user.myorder)
        if (type === '[object Object]') {
          return state.user.myorder
        }
        let condition = state.user.myorder && state.user.myorder !== 'null' && type !== '[object Array]'
        return condition ? JSON.parse(state.user.myorder) : {}
      }
    })
  },
  components: {
    editInvoice
  },
  mounted () {
    this.$set(this.item, 'showInvoice', false)
  },
  methods: {
    edit () {
      this.showInvoice = false
    },
    hideInvoice () {
      this.showInvoice = true
    },
    changeIvoiceStatus (i, item) {
      // item.showInvoice = !item.showInvoice
      // this.$set(this.item, 'showInvoice', item.showInvoice)
      this.$bus.$emit('order/showInvoice', {
        order: item,
        orderId: item.id,
        data: this.getItemInvoice(item),
        invoiceId: item.invoice&&(item.invoice.id)
      })
    },
    saveInvoice (data) {
      this.$set(this.item, 'invoice', data)
    },
    getItemInvoice (item) {
      let invoice = item.invoice
      console.log(item)
      if (!invoice) {
        return ''
      }
      invoice['typeName'] = this.$t(`manage.invoiceTypeName.${invoice.type}`)
      return invoice
    },
    getStatus (item) {
      let temp = ''
      let sPay = function () {
        switch (item.shippingStatus) {
          case 'unshipped':
            temp = 'unshipped'
            break
          case 'partShipped':
            temp = 'partShipped'
            break
          case 'shipped':
            temp = 'shipped'
            break
          case 'received':
            temp = 'received'
            break
          default:
            break
        }
      }
      let pPay = function () {
        switch (item.paymentStatus) {
          case 'unpaid':
            temp = 'unpaid'
            break
          case 'paid':
            sPay()
            break
          default:
            break
        }
      }

      switch (item.orderStatus) {
        case 'unprocessed':
          pPay()
          break
        case 'completed':
          temp = 'finish'
          break
        case 'processed':
          sPay()
          break
        case 'expire':
          temp = 'expire'
          break
        default:
          break
      }
      return temp
    },
    toPay (item) {
      this.$router.push({
        name: 'pay',
        query: {
          payType: 0,
          orderId: item.id,
          orderType: 0,
          orderSn: item.orderSn
        }
      })
    },
    async cancal (item) {
      this.$toast.showConfirm('warn', this.$t('toast.15'), async () => {
        let params = {
          orderId: item.id
        }
        let res = await this.$http({
          method: 'post',
          data: params,
          headers: {
            token: this.token
          },
          url: '/user/order/cancel'
        })
        let data = res.data
        if (data.code === 0) {
          return this.$toast.show('success', this.$t('toast.37'), () => {
            this.currentPage = this.currentPage >= this.maxPage ? this.maxPage : this.currentPage
            this.getList()
          })
        }
        return this.$toast.show('error', this.$t('toast.38'))
      })
    }
  }
}
</script>

<style lang="less" scoped>
.order-item {
    margin-bottom: 40px;
    border: 1px solid #EBEBEB;
    .inovice-con{
      max-height: 0;
      overflow: hidden;
    }
    .ic-active{
      max-height: 500px;
      transition: 0.3s ease max-height;
    }
    .o-top {
      color: #68b8f1;
      line-height: 60px;
      height: 60px;
      font-size: 16px;
      padding: 0 20px;
      user-select: none;
      border-bottom: 1px solid #EBEBEB;
    }
    .o-title,.o-invoiceTitle {
      user-select: none;
      display: flex;
      height: 32px;
      padding: 0 20px;
      align-items: center;
      line-height: 32px;
      // border-bottom: 1px solid #EBEBEB;
      background: #F7F7F7;
      span {
        font-size: 14px;
        flex: 1;
        text-align: center;
        &:first-child {
          flex: 5;
          text-align: left;
        }
      }
    }
    .orderSn {
      color: #323233;
      margin-right: 15px;
    }
    .o-invoiceTitle{
      align-items: center;
      .iconfont{
        vertical-align: middle;
        font-size: 20px;
        margin-right: 5px;
      }
      .icon-edit{
        color: #15BEC8;
      }
      .icon-choice{
        color: #02e430;
      }
      span {
        display: inline-block;
        vertical-align: middle;
        &:last-child{
          transform: translateX(11px);
          cursor: pointer;
        }
        &:first-child {
          flex: 1;
          transform: translateX(0);
          text-align: left;
        }
      }
    }
    .o-invoice{
      display: flex;
      align-items: center;
      padding: 10px 20px 10px 85px;
      color: #4a4a4a;
      font-size: 14px;
      border-bottom: 1px solid #EBEBEB;
    }

    .o-detail {
      display: flex;
      align-items: center;
      height: 86px;
      line-height: 86px;
      padding: 0 20px;
      color: #4a4a4a;
      font-size: 14px;
      border-bottom: 1px solid #EBEBEB;
      .od-name {
        display: flex;
        align-items: center;
        flex: 5;
        .thumbnail {
          width: 55px;
          margin-right: 10px;
        }
        p {
          line-height: 1.5;
          font-size: 14px;
          color: #969696;
          &:first-of-type{
           font-weight: bold;
           color: #2d2d2d;
          }
        }
      }
      .count {
        flex: 1;
        text-align: center;
      }
      .sum {
        flex: 1;
        text-align: center;
      }
    }
    position: relative;
    .sum-price {
      position: absolute;
      color: #4a4a4a;
      display: flex;
      align-items: center;
      justify-content: center;
      right: 1px;
      top: 33px;
      bottom: 51px;
      background-color: #fff;
      width: calc(calc(100% - 40px) / 8 + 20px);
      border-left: 1px solid #EBEBEB;
      font-weight: 400;
      color: #202020;
      font-size: 20px;
      
    }

    .bottom-area{
      position: relative;
      .bottom-left{
        position: absolute;
        top: 50%;
        left: 20px;
        color: #a0a0a0;
        transform: translateY(-50%);
        font-size: 14px;
        color: #323233;
      }
      .to-pay {
        text-align: right;
        height: 50px;
        line-height: 50px;
        padding: 0 25px;
        .cancel {
          font-size: 14px;
          // border: 1px solid #ccc;
          display: inline-block;
          text-align: center;
          cursor: pointer;
          background: #fff;
          color: #202020;
          border: 1px solid #323233;
          width: 104px;
          height: 32px;
          line-height: 32px;
          border-radius: 4px;
        }
        .pay {
          background: #15BEC8;
          font-size: 14px;
          color: #fff;
          display: inline-block;
          width: 104px;
          height: 32px;
          line-height: 32px;
          text-align: center;
          cursor: pointer;
          border-radius: 4px;
        }
        .expreeNum {
          margin-right: 60px;
          color: #323233;
          
        }
      }
    }

  }

  .table-header {
    font-weight: 600;
    color: #202020;

  }
</style>