template-parking-h5/src/pages/parkingFee/components/officeBlue/parkingReceipt/parkingReceipt.vue

<template>
  <div
    :class="['scroll-Y',theme]"
    @scrolltolower="scrollLower"
  >
    <!-- <authorize ref="authorize"></authorize> -->
    <div class="choice">
      <!-- <LoginDom></LoginDom> -->
      <div
        v-for="(item, index) in invoiceList"
        :key="index"
        :class="index + 1 === tabIndex ? 'actived' : ''"
        @click="invoice(index + 1)"
      >
        {{ item }}
      </div>
    </div>
    <div class="choice_select">
      <div :class="tabIndex == 1 ? 'choice_select_ews' : 'choice_select_ew'" />
    </div>
    <!-- 开票列表 -->
    <div class="choice_card" :style="{ height: height }">
      <div class="suggestion-list">
        <van-checkbox-group v-model="ids" @change="checkboxChange">
          <label
            class="uni-list-cell uni-list-cell-pd"
            @click.stop="goToDeatil(item)"
            v-for="(item, index) in list"
            :key="index"
            :index="item.id"
            :activity="total - 1"
          >
            <div class="choice_card_item">
              <div class="carno-box">
                <div
                  :class="['carno', ids.indexOf(item.id) > -1 && 'active']"
                  v-if="tabIndex == 1"
                >
                  <span>{{ item.vehicleNo }}</span>
                </div>
                <div class="invoiceTitleName" v-else>
                  {{ item.titleName }}的停车发票&nbsp;<van-icon
                  name="arrow"
                  color="#D8DAE0"
                />
                </div>
                <div
                  :class="[
                    'payfee',
                    (ids.indexOf(item.id) > -1 || tabIndex == 2) && 'active',
                  ]"
                >
                  ￥{{

                    item.totalPaidAmount || item.invoiceTotalAmount
                  }}
                </div>
              </div>
              <div class="line"></div>
              <!-- 未开票 -->
              <div class="my-not-invoiced-list" v-if="tabIndex == 1">
                <div class="left">
                  <div class="choice_card_index">{{ item.parkName }}</div>
                  <div class="choice_card_index">
                    订单号: {{ item.orderNo }}
                  </div>
                  <div class="choice_card_index">
                    入场时间: {{ item.enterTime }}
                  </div>
                  <div class="choice_card_index mb0">
                    停车时长: {{ item.serviceMin | parkingTime  }}
                  </div>
                </div>
                <div class="right" @click.stop>
                  <van-checkbox
                    color="#ED1C24"
                    :name="item.id"
                    icon-size="20"
                    checked-color="#064C8A"
                  />
                </div>
              </div>
              <!-- 已开票 -->
              <div
                class="my-not-invoiced-list my-invoiced-list"
                v-if="tabIndex == 2"
              >
                <div class="left">
                  <div class="choice_card_index">
                    税号: {{ item.taxNo }}
                  </div>
                  <div class="choice_card_index">
                    开票时间:
                    {{ item.createTime ? item.createTime : '-' }}
                  </div>
                  <!-- <div class="choice_card_index mb0">
                    停车时长: <span>{{ item.serviceMin | parkingTime }}</span>  _{{
                      item.serviceMin
                    }}
                  </div> -->
                </div>
                <div class="right">
                  <!-- 0：已提交申请(待开票) 1:开票中  2：开票完成 3：开票失败 -->
                  <div class="choice_card_status">
                    {{ statusObj[item.status||'FAILED'].name }}
                  </div>
                  <div v-if="/FAILED|3/.test(item.status)" class="try-again" @click="tryGoToInvoicing(item)">
                    重新开票
                  </div>
                </div>
              </div>
              <!-- 失败重试 -->
              <div class="failureReason" v-if="item.status === 'FAILED'">
                <span @click.stop="showFailureReason(item.errorMessage)"
                ><van-icon name="info" /> 失败原因</span
                >
              </div>
            </div>
          </label>
        </van-checkbox-group>
        <div v-show="isLoadMore" :class="{ noData: !list.length }">
          <img :src="noData" v-if="!list.length" mode="widthFix" />
          <span v-if="!list.length">暂无数据</span>
          <div v-else class="no-more-data">没有更多了</div>
        </div>
      </div>
    </div>
    <div class="flewx" v-if="tabIndex == 1">
      <div class="priceBtn">
        <div>
          开票金额
          <span class="price">{{ totalNum }} 元</span>
        </div>
        <div
          :class="{
            flewx_index3: true,
            blue_flewx_index3: custTypeId === 1,
            green_flewx_index3: custTypeId === 2,
          }"
          @click="goToInvoicing"
        >
          去开票
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import parkingReceiptCouponJs from '../../../mixins/parkingReceipt/parkingReceipt'
export default {
  mixins:[parkingReceiptCouponJs]
}
</script>

<style lang="less" scoped>
.scroll-Y {
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 100vh;
  // padding-bottom: 100px;
  background: #f4f7ff;

  .choice {
    width: 750px;
    background-color: #fafbff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    height: 88px;
    position: fixed;
    top: 0;
    left: 0;

    div {
      width: 30%;
      text-align: center;
      height: 78px;
      line-height: 78px;
    }

    .actived {
      color: #064c8a;
    }
  }

  .choice_select {
    width: 750px;
    height: 10px;
    background-color: #fafbff;
    position: fixed;
    top: 74px;
    left: 0;

    div {
      width: 64px;
      height: 4px;
      border-radius: 2px;
      background-color: #064c8a;
    }

    .choice_select_ews {
      transform: translateX(230px);
      transition-duration: 0.1s;
    }

    .choice_select_ew {
      transform: translateX(455px);
      transition-duration: 0.1s;
    }
  }

  .shanghaiClassify {
    position: fixed;
    width: 750px;
    z-index: 2;
  }

  .blueClassify {
    .colorClassify('blue');
  }

  .greenClassify {
    .colorClassify('green');
  }

  .choice_card {
    margin: 112px 20px 0px;
    width: 710px;

    // background-color: #fff;
    .choice_card_item {
      // border: 2px solid #ddd;
      background: #fafbff;
      border-radius: 4px;
      border: 1px solid #d8dae0;
      padding: 36px 30px 30px 30px;
      // margin: 20px 0;
      margin-bottom: 30px;
      // border-radius: 20px;
      // background-color: #fff;

      .carno-box {
        display: flex;
        justify-content: space-between;
        margin-bottom: 18px;

        .carno {
          font-size: 36px;
          font-weight: 600;
          color: #999999;
          line-height: 50px;
        }

        .payfee {
          font-size: 30px;
          font-weight: 600;
          color: #999999;
          line-height: 42px;
        }
        .active {
          color: #333333;
        }
      }

      .line {
        width: 100%;
        border-bottom: 1px solid #d8dae0;
        margin-bottom: 20px;
      }

      .my-not-invoiced-list {
        display: flex;
        justify-content: space-between;
        .left {
          flex: 1;
        }
        .right {
          flex: 0 0 40px;
          font-size: 40px;
          display: flex;
          justify-content: right;
          flex-wrap: nowrap;
          white-space: nowrap;
        }
      }
      .failureReason {
        margin-top: 10px;
        text-align: right;
        font-weight: normal;
        font-size: 25px;
        color: #bbb;
      }
      .my-invoiced-list {
        align-items: flex-end;
        .right {
          flex: 0 0 150px;
          font-size: 30px;
          font-weight: 400;
          color: #064c8a;
          line-height: 42px;
          text-align: right;
        }
      }

      .choice_card_index {
        font-size: 28px;
        font-weight: 400;
        color: #999999;
        line-height: 40px;
        margin-bottom: 12px;
        &.mb0 {
          margin-bottom: 0;
        }
      }
      .choice_card_status {
        display: flex;
        white-space: nowrap;
        align-items: center;
        //padding-top: 10px;
      }
      .try-again {
        margin-left: 10px;
        color: #e89e42;
        border: 1px solid #e89e42;
        border-radius: 10px;
        padding: 10px;
      }
      .choice_card_index1 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        //border: 400;
        border-bottom: 1px solid #f8f8f8;
        padding: 10px 0;
        font-size: 28px;
        margin-bottom: 10px;
      }

      .choice_card_index2 {
        // padding-top: 20px;
        color: #bbbbbb;
      }

      .choice_card_index3 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #bbbbbb;
      }

      .choice_card_index4 {
        color: #bbbbbb;
        // padding-bottom: 20px;
      }
    }
  }
}

.suggestion-list {
  display: flex;
  flex-direction: column;
  // background: #fff;
  border-radius: 15px;
}

.flewx {
  width: 100%;
  //height: 150px;
  padding-top: 20px;
  background-color: #fafbff;
  position: fixed;
  bottom: 0;
  display: flex;
  align-items: center;
  // justify-content: space-between;
  padding-bottom: 25px;
  //padding-bottom: constant(safe-area-inset-bottom);
  //padding-bottom: env(safe-area-inset-bottom);

  // .checkAll {
  // 	.checkboxItem {
  // 		position: relative;
  // 		top: -2px;
  // 	}
  // }
  .priceBtn {
    width: 100%;
    padding: 0 30px 20px;
    display: flex;
    align-items: center;
    margin-right: 20px;
    justify-content: space-between;
    font-size: 28px;
    font-weight: 400;
    color: #333333;

    .price {
      font-size: 36px;
      font-weight: 600;
      color: #333333;
      line-height: 50px;
    }

    .flewx_index3 {
      width: 150px;
      height: 70px;
      border-radius: 40px;
      text-align: center;
      font-size: 28px;
      line-height: 70px;
      color: #fff;
      background: #064c8a;
      border-radius: 45px;
      font-size: 34px;
      font-weight: 400;
      color: #ffffff;
    }

    .blue_flewx_index3 {
      .color-background-color('blue');
    }

    .green_flewx_index3 {
      .color-background-color('green');
    }
  }
}

.uni-input_type {
  width: 42px;
  height: 42px;
  margin-right: 10px;
  border: 1px solid #f2f2f2;
  border-radius: 50%;

  img {
    width: 40px;
    height: 40px;
  }
}

.noData {
  width: 100%;
  padding-top: 15%;
  text-align: center;
  // background: #f2f2f2;
  margin: 0 auto;

  img {
    width: 200px;
    margin-bottom: 2%;
  }

  span {
    color: #999;
    display: block;
  }
}

.no-more-data {
  margin-top: 40px;
  text-align: center;
  font-size: 29px;
  font-weight: 400;
  color: #999999;
  line-height: 41px;
}
</style>