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

<script setup>
import { ref, watch, onMounted, computed } from 'vue'
import { getUserOrder } from '@/api/user'
import Paging from '@/components/pc/Paging/index.vue'
import { useI18n } from 'vue-i18n'
import { PAYSIDMAP } from '../data.ts'
const { locale: language, t } = useI18n()
const props = defineProps({
  item: {
    type: Object,
    default: {}
  },
  i: {
    type: Number
  }
})
const showInvoice = ref(true)
function changeIvoiceStatus(i, item) {
  // this.$bus.$emit('order/showInvoice', {
  //   order: item,
  //   orderId: item.id,
  //   data: this.getItemInvoice(item),
  //   invoiceId: item.invoice && item.invoice.id
  // })
}

function 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
}
function  toPay(item) {
      this.$router.push({
        name: 'pay',
        query: {
          payType: 0,
          orderId: item.id,
          orderType: 0,
          orderSn: item.orderSn
        }
      })
    }
</script>

<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.tradeTime }}</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">
          <div class="od-name">
            <div>
              <p>{{$t('manage.myOrders.memerText')}}</p>
              <p>{{$t('manage.Spending.listLabel.payType')}}：{{ PAYSIDMAP[item.payType] }}</p>
              <p style="word-break: break-all;" v-if="item.incrementIds" :title="item.incrementIds">{{$t('manage.member.memberPackage')}}：{{ item.incrementIds.join(",") }}</p>
              <p v-else>{{$t('manage.member.memberPackage')}}：{{ item.incrementId }}</p>
            </div>
          </div>
          <div class="count">{{item.count}}</div>
          <div class="sum">{{item.amount}}</div>
          <div class="sum total-momey">{{item.amount}}</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="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>
          </div>
        </div>
      </div>
</template>

<style lang="less" scoped>
.text-ellipsis{
  overflow:hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow:ellipsis;
}
.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;
      min-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;
      }
    }
    .sum-price {
      display: flex;
      height: 40px;
      line-height: 40px;
      padding: 0 40px;
      border-bottom: 1px solid #EBEBEB;
      div {
        flex: 2;
        color: #4a4a4a;
        font-size: 14px;
        &:last-child {
          flex: 1;
          text-align: right;
        }
      }
    }

    .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;
          display: inline-block;
          width: 104px;
          height: 32px;
          line-height: 32px;
          color: #fff;
          text-align: center;
          cursor: pointer;
          border-radius: 4px;
        }
        .expreeNum {
          margin-right: 60px;
          color: #323233;
          
        }
      }
    }

  }

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

  }

  .total-momey {
    font-weight: 400;
    color: #202020;
    font-size: 20px;
  }
</style>