realtorEasier-webSite/pc/src/page/manage/temp/order.vue

<template>
  <div class="order-layout">
    <div v-if="total">
      <div class="order-item" v-for="(item,i) in myorder.list" :key="i">
        <div class="o-top">{{langOrders.numbers}}{{item.orderSn}}</div>
        <div class="o-title">
          <span>{{langOrders.product}}</span>
          <span>{{langOrders.quantity}}</span>
          <span>{{langOrders.subtotal}}</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>{{cameraName[sub.goodsId]}}</p>
              <p v-for="(sb,i) in detail[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>
        <div class="sum-price">
          <div></div>
          <div>{{langOrders.total}}{{item.goodsAmount}}</div>
        </div>
        <div class="inovice-con" :class="{'ic-active':item.showInvoice}">
          <div class="o-invoiceTitle">
            <span>{{langOrders.invoice}}</span>
            <span v-if="getStatus(item) !== 'shipped'" @click="edit"><i class="iconfont icon-edit"></i>{{langOrders.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">{{langOrders.wlNum}}{{item.orderItems[0].expressNum}}</span>
            </template>
            <template v-else-if="getStatus(item) === 'unshipped'">
              <span class="expreeNum">{{langOrders.unshipped}}</span>
            </template>
            <template v-else-if="getStatus(item) === 'finish'">
              <span class="expreeNum">{{langOrders.finish}}</span>
            </template>
            <template v-else-if="getStatus(item) === 'partShipped'">
              <span class="expreeNum">{{langOrders.partShipped}}</span>
            </template>
            <template v-else-if="getStatus(item) === 'received'">
              <span class="expreeNum">{{langOrders.received}}：{{item.orderItems[0].expressNum}}</span>
            </template>

            <template v-else>
              <span class="expreeNum">{{langOrders.hasCancal}}</span>
            </template>
          </div>
          <div class="to-pay">
            <span class="cancel btns" @click="changeIvoiceStatus(i,item)">{{langOrders.invoice}}</span>
            <template v-if="getStatus(item) === 'unpaid'">
              <span class="cancel btns" @click="cancal(item)">{{langOrders.cancal}}</span>
              <span class="pay btns" @click="toPay(item)">{{langOrders.pay}}</span>
            </template>
          </div>
        </div>

      </div>
    </div>
    <div class="scene-nothing" v-else>
      <img :src="`${$cdn}images/nothing.png`" alt>
      <div>{{langOrders.norecord}}</div>
    </div>
    <div class="paging" v-if="total">
      <Paging @clickHandle="pageChange" @maxPage="data=>maxPage=data" :current="currentPage" :total="total" :equable="pageSize"/>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { mapState } from 'vuex'
import Paging from '@/components/Paging'
import editInvoice from '@/components/editInvoice'
let typeName = {
  2: '增值税普票（电子发票）',
  3: '增值税专用发票'
}

let typeNameEn = {
  'no': 'No invoice required',
  2: 'VAT invoice (E-mail)',
  3: 'VAT special invoice'
}
let cameraName = {
  7: `四维看看 三脚架套装`,
  1: `四维看看 Lite二目相机`,
  4: `四维看看 Pro八目相机`
}

let cameraNameEn = {
  7: `4D KanKan Pro Tripod Set`,
  1: `四维看看 Lite二目相机`,
  4: `4DKanKan Pro Camera`
}
let detail = {
  7: ['四维看看 三脚架套装(标准色)'],
  1: [
    '四维看看 Lite二目相机(静谧黑)',
    '容量套餐(5G)',
    '四维看看 Lite专用三脚架(标准色)'
  ],
  4: ['四维看看 Pro八目相机(静谧黑)', '容量套餐(10G)']
}
let detailEn = {
  7: ['4D KanKan Pro Tripod Set (Standard)'],
  1: [
    '四维看看 Lite二目相机(静谧黑)',
    '容量套餐(5G)',
    '四维看看 Lite专用三脚架(标准色)'
  ],
  4: ['4DKanKan Pro Camera (Night Sky Black)', 'Storage Plan (10G)']
}
export default {
  components: { Paging, editInvoice },
  data () {
    return {
      pageSize: 2,
      currentPage: 1,
      total: 0,
      maxPage: 0,
      showInvoice: false,
      currentI: '',
      currentItem: ''
    }
  },
  watch: {
    currentPage () {
      this.getList()
    }
  },
  computed: {
    ...mapState({
      token: state => state.user.token,
      langToast: state => state.language.home.toast,
      language: state => state.language.current,
      langOrders: state => state.language.home.manage.myOrders,
      cameraName: state => {
        return state.language.current === 'en' ? cameraNameEn : cameraName
      },
      typeName: state => {
        return state.language.current === 'en' ? typeNameEn : typeName
      },

      detail: state => {
        return state.language.current === 'en' ? detailEn : detail
      },
      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) : {}
      }
    })
  },
  mounted () {
    this.$bus.$on('editItem', data => {
      this.currentItem['invoice'] = data
      Vue.set(this.myorder.list, this.currentI, this.currentItem)
    })

    this.getList()
  },
  methods: {
    edit () {
      this.$bus.$emit('isOrderInvoice', false)
    },
    changeIvoiceStatus (i, item) {
      item.showInvoice = !item.showInvoice
      this.$bus.$emit('isOrderInvoice', true)
      this.currentI = i
      this.currentItem = item
      Vue.set(this.myorder.list, i, item)
    },
    getItemInvoice (item) {
      let invoice = item.invoice
      if (!invoice) {
        return ''
      }
      invoice['typeName'] = this.typeName[invoice.type]

      return invoice
    },
    pageChange (data) {
      this.currentPage = data
    },
    async getList () {
      window.scrollTo(0, 0)
      let params = {
        type: '',
        pageNum: this.currentPage,
        pageSize: this.pageSize
      }
      await this.$store.dispatch('getUserOrder', params)
      this.pageSize = this.myorder.pageSize
      this.total = this.myorder.total || 0
    },
    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

        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.langToast['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.langToast['37'], () => {
            this.currentPage = this.currentPage >= this.maxPage ? this.maxPage : this.currentPage
            this.getList()
          })
        }
        return this.$toast.show('error', this.langToast['38'])
      })
    }
  }
}
</script>

<style lang="scss" scoped>
$theme-color: #1fe4dc;
$border-color: #e7e7e7;
.btns {
  cursor: pointer;
  width: 126px;
  display: inline-block;
  height: 36px;
  line-height: 36px;
  color: #2d2d2d;
  text-align: center;
  font-size: 16px;
  background: $theme-color;
  border: 1px solid $theme-color;
  margin-left: 26px;
}
.order-layout {
  width: 90%;
  color: #2d2d2d;
  .order-item {
    margin: 40px;
    border: 1px solid $border-color;
    .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 $border-color;
    }
    .o-title,.o-invoiceTitle {
      user-select: none;
      display: flex;
      height: 50px;
      padding: 0 85px;
      align-items: center;
      line-height: 50px;
      border-bottom: 1px solid $border-color;
      background: #fafafa;
      span {
        font-size: 14px;
        flex: 1;
        text-align: center;
        &:first-child {
          flex: 5;
          text-align: left;
        }
        &:last-child{
          text-align: right;
        }
      }
    }

    .o-invoiceTitle{
      align-items: center;
      .iconfont{
        vertical-align: middle;
        font-size: 20px;
        margin-right: 5px;
      }
      .icon-edit{
        color: #21e4dc;
      }
      .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 $border-color;
    }

    .o-detail {
      display: flex;
      align-items: center;
      height: 100px;
      line-height: 100px;
      padding: 0 85px;
      color: #4a4a4a;
      font-size: 14px;
      border-bottom: 1px solid $border-color;
      .od-name {
        display: flex;
        align-items: center;
        flex: 5;
        .thumbnail {
          width: 55px;
          margin-left: -13px;
          margin-right: 60px;
        }
        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: right;
      }
    }
    .sum-price {
      display: flex;
      height: 50px;
      line-height: 50px;
      padding: 0 85px;
      border-bottom: 1px solid $border-color;
      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: 85px;
        color: #a0a0a0;
        transform: translateY(-50%);
      }
      .to-pay {
        text-align: right;
        height: 90px;
        line-height: 90px;
        padding: 0 25px;
        .cancel {
          font-size: 16px;
          border: 1px solid #ccc;
          display: inline-block;
          text-align: center;
          cursor: pointer;
          background: none;
        }
        .expreeNum {
          margin-right: 60px;
          color: #2d2d2d;
        }
      }
    }

  }
  .scene-nothing{
    padding: 42px 0 150px 0;
    text-align: center;
    img{
      padding-bottom: 22px;
    }
    div{
      font-size: 16px;
      color: #969696;
    }
  }
  .paging {
    // border-left: #e5e5e5 1px solid;
    height: 100%;
    margin-bottom: 40px;
    & /deep/ .layout {
      text-align: left;
      margin-top: 40px;
      margin-left: 15px;
    }
    & /deep/ .layout a:not(:last-child) {
      margin: 10px 8px;
      font-size: 16px;
      display: inline-block;
      font-weight: 500;
      cursor: pointer;
      user-select: none;
      color: #999;
      position: relative;
      transition: color 0.3s;
    }
    & /deep/ .layout a:last-child {
      position: relative;
      top: -5px;
      display: -ms-inline-flexbox;
      display: inline-flex;
      -ms-flex-align: center;
      align-items: center;
      height: 22px;
      padding: 0 9.6px;
      padding: 0 0.6rem;
    }
    & /deep/ .layout a:last-child::before,
    & /deep/ .layout a:last-child::after {
      content: "";
      display: inline-block;
      will-change: transform;
      transition: transform 0.3s;
    }

    & /deep/ .layout a:not(:last-child).active::after,
    & /deep/ .layout a:not(:last-child).active,
    & /deep/ .layout a:not(:last-child):hover,
    & /deep/ .layout a:not(:last-child):hover::after {
      color: #111111;
      transform: scaleX(1);
    }

    & /deep/ .layout a:not(:last-child)::after {
      content: "";
      height: 3px;
      width: 140%;
      background-color: #111;
      display: block;
      margin-left: -20%;
      margin-top: 3px;
      transform-origin: 50% 50%;
      transform: scaleX(0);
      will-change: transform;
      transition: transform 0.3s;
    }
  }
}
@media screen and (min-width: 2000px) {
  .order-layout {
    width: 75%;
  }
}
@media screen and (max-width: 1700px){
  .order-layout {
    width: 95%;
  }
}

@media screen and (max-width: 1500px){
  .order-layout {
    .order-item{
     .o-title,.o-invoiceTitle,.o-detail {
       padding: 0 45px;
      }
      .o-invoice{
       padding: 10px 45px;
      }
    }
  }
}

</style>