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

<template>
  <div :class="['scroll-Y', theme]">
    <!-- <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="choice_card">
      <div class="suggestion-list">
        <van-checkbox-group v-model="ids" @change="checkboxChange">
          <div 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="orderNum"  v-if="tabIndex == 1">{{ item.orderNo }}</div>
              <div class="orderNum"  v-else>
                <span>税号: {{ item.taxNo }}</span> 
                <!-- 失败重试    -->
                <div class="failureReason" v-if="item.status === 'FAILED'">
                  <span @click.stop="showFailureReason(item.errorMessage)"><van-icon name="info" /> 失败原因</span>
                </div>
                <div class="right">
                  <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="van-hairline--bottom"></div>
              <div class="carno-box">
                <!-- ids.indexOf(item.id) > -1 &&  -->
                <div :class="['carno', 'active']" v-if="tabIndex == 1">
                  <span class="left">{{ item.vehicleNo }}</span>
                  <div class="right" @click.stop>
                    <van-checkbox color="#ED1C24" :name="item.id" icon-size="20" checked-color="var(--k-color-primary-01)" />
                  </div>
                </div>
                
                <div :class="['payfee', (ids.indexOf(item.id) > -1 || tabIndex == 2) && 'active']"></div>
              </div>
              <!-- 未开票 -->
              <div class="my-not-invoiced-list" v-if="tabIndex == 1">
                <div class="left">
                  <div class="choice_card_index">
                    <div class="choice_card_index_icon">
                      <img class="car-icon" :src="require(`../static/images/vector.svg`)" />
                      <div class="choice_card_index_text">入场时间</div>
                    </div>
                    <div class="choice_card_index_icon">
                      <img class="car-icon" :src="require(`../static/images/car_time.svg`)" />
                      <div class="choice_card_index_text">停车时长</div>
                    </div>
                    <!-- {{ item.enterTime }} -->
                  </div>
                  <div class="choice_card_index">
                    <div class="choice_card_index_icon">
                      {{ item.enterTime }}
                    </div>
                    <div class="choice_card_index_icon">
                      {{ item.serviceMin | parkingTime }}
                    </div>
                    <!-- {{ item.enterTime }} -->
                  </div>
                  <div class="choice_card_index">
                    <div class="choice_card_index_icon bg_parkingRoom2">
                      <img class="car-icon" :src="require(`../static/images/parking_room.svg`)" />
                      <div class="choice_card_index_text2">{{ item.parkName }}</div>
                    </div>
                    <!-- {{ item.enterTime }} -->
                  </div>
                  <div class="van-hairline--bottom"></div>
                  <div class="choice_card_index orderno-box2" style="padding-top: 16px;padding-bottom: 17px;">
                    <!-- ids.indexOf(item.id) > -1 && -->
                    <div :class="['orderFee', 'active']" >{{ item.totalPaidAmount || item.invoiceTotalAmount |currency }}</div>
                    <!-- <div class="orderDetail">查看详情</div> -->
                    <!-- <van-icon name="arrow" /> -->
                  </div>
                </div>
                <!-- <div class="right" @click.stop>
                  <van-checkbox color="#ED1C24" :name="item.id" icon-size="20" checked-color="var(--k-color-primary-01)" />
                </div> -->
              </div>
              <!-- 已开票 -->
              <div class="my-not-invoiced-list my-invoiced-list" v-if="tabIndex == 2">
                <div class="left">
                  
                  <div class="invoiceHeader">{{ item.invoiceHeader }}</div>
                  <div class="choice_card_index" style="margin-bottom: 10px;">
                    <div class="choice_card_index_icon">
                      <img class="car-icon" :src="require(`../static/images/vector.svg`)" />
                      <div class="choice_card_index_text">开票时间</div>
                    </div>
                    <!-- {{ item.enterTime }} -->
                  </div>
                  <div class="choice_card_index">
                    <div class="choice_card_index_icon3">
                      {{ item.createTime ? item.createTime : '-' }}
                    </div>
                    <!-- {{ item.enterTime }} -->
                  </div>
                  <!-- 停车场名称 -->
                  <div class="choice_card_index">
                    <div class="choice_card_index_icon bg_parkingRoom2 ">
                      <img class="car-icon" :src="require(`../static/images/parking_room.svg`)" />
                      <div class="choice_card_index_text2">{{ item.parkName }}</div>
                    </div>
                  </div>
                  <div class="van-hairline--bottom"></div>
                  <div class="choice_card_index orderno-box2 orderDetail-box">
                    <div class="orderFee2" >{{ item.totalPaidAmount || item.invoiceTotalAmount | currency }}</div>
                    <div class="orderDetail" v-if="item.status === 'COMPLETE'">查看详情</div>
                    <!-- v-if="/FAILED|3/.test(item.status)"  -->
                    <div v-if="/FAILED|3/.test(item.status)" class="try-again" @click="tryGoToInvoicing(item)">重新开票</div>
                    <!-- <van-icon name="arrow" /> -->
                  </div>
                  <!-- <div class="choice_card_index mb0">
                    停车时长: <span>{{ item.serviceMin | parkingTime }}</span>  _{{
                      item.serviceMin
                    }}
                  </div> -->
                </div>
                <!-- 0：已提交申请(待开票) 1:开票中  2：开票完成 3：开票失败 -->
                
              </div>
              
            </div>
          </div>
        </van-checkbox-group>
        
      </div>
    </div>
    <div v-show="isLoadMore" :class="{ noData: !list.length }">
      <img :src="noData" v-if="!list.length" alt=""/>
      <span v-if="!list.length">当前暂无开票数据</span>
      <div v-else class="no-more-data">
        没有更多啦
        </div>
    </div>
    <div style="height:14vh;background-color: transparent;width: 100%;"></div>
    <div class="flewx" v-if="tabIndex == 1">
      <div class="priceBtn">
        <div>
          开票金额：
          <span class="price">{{ totalNum | currency}} 元</span>
        </div>
        <div
          class="flewx_index3"
          @click="goToInvoicing"
        >
          去开票
        </div>
      </div>
      <!-- 开启底部安全区适配 -->
      <van-number-keyboard safe-area-inset-bottom />
    </div>
  </div>
</template>

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

<style lang="less" scoped>
.scroll-Y {
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100vh;
  // padding-bottom: 100px;
  background: #F4F7FF;
  .uni-list-cell {
    margin-bottom: 20px !important;
  }
  .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;
    z-index:99999;
    div {
      width: 45%;
      text-align: center;
      height: 78px;
      line-height: 78px;
    }

    .actived {
      color: var(--k-color-primary-01);
    }
  }

  .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: var(--k-color-primary-01);
    }

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

    .choice_select_ew {
      transform: translateX(510px);
      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: #FBFCFF;
      border-radius: 8px;
      // margin-bottom: 20px;
      // margin: 20px 0;
      // border-radius: 20px;
      // background-color: #fff;
      .orderNum {
        font-family: 'PingFang SC';
        font-style: normal;
        font-weight: 400;
        font-size: 28px;
        padding: 20px 35px 16px;
        color: #999999;
        display: flex;
        justify-content: space-between;
        .right {
          font-size: 30px;
          font-weight: 400;
          color: var(--k-color-primary-01);
          line-height: 42px;
          text-align: right;
        }
      }
      .carno-box {
        display: flex;
        justify-content: space-between;
        .invoiceTitleName {
          font-family: 'PingFang SC';
          font-style: normal;
          font-weight: 400;
          font-size: 28px;
          //padding: 31px 35px 22px;
          color: #999999;
        }
        .carno {
          padding: 31px 28px 22px 35px;
          font-size: 36px;
          line-height: 1;
          font-weight: 600;
          color: #999999;
          //line-height: 50px;
          display: flex;
          justify-content: space-between;
          width: 100%;
          .left {
            flex: 1;
          }
          .right {
            flex: 0 0 40px;
            font-size: 40px;
            display: flex;
            justify-content: right;
            flex-wrap: nowrap;
            white-space: nowrap;
          }
        }

        .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;
        }
        .invoiceHeader {
          font-family: 'PingFang SC';
          font-style: normal;
          font-weight: 600;
          font-size: 32px;
          padding: 31px 35px 20px;
          
        }
        .right {
          flex: 0 0 40px;
          font-size: 40px;
          display: flex;
          justify-content: right;
          flex-wrap: nowrap;
          white-space: nowrap;
        }
      }
      .failureReason {
        text-align: right;
        font-weight: normal;
        font-size: 25px;
        color: #bbb;
        align-self: center;
        border: 1px solid #999999;
        border-radius: 2px;
        position:absolute;
        right: 168px;
        z-index: 500;
      }
      .my-invoiced-list {
        align-items: flex-end;
        .right {
          flex: 0 0 150px;
          font-size: 30px;
          font-weight: 400;
          color: var(--k-color-primary-01);
          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;
        background: var(--k-color-primary-01);
        border: 1px solid var(--k-color-primary-01);
        border-radius: 32.5px;
        padding: 11px 33px;
        color:#fff;
      }
      .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;
      }
      .choice_card_index {
        // width: calc(100% - 48px);
        font-size: 28px;
        font-weight: 400;
        color: #999999;
        line-height: 40px;
        display: flex;
        margin-bottom: 22px;
        padding-left: 35px;
        padding-bottom: 0;
        .choice_card_index_icon {
          width: 50%;
          height: 40px;
          line-height: 40px;
          display: flex;
          color: #333;
          .car-icon {
            margin-right: 12px;
          }
        }
        .choice_card_index_icon3 {
          // width: 50%;
          height: 40px;
          line-height: 40px;
          display: flex;
          color: #333;
          .car-icon {
            margin-right: 12px;
          }
        }
        .bg_parkingRoom {
          background-color: #f4f7ff;
          width:calc(100% - 40px);
          padding: 11px 0px 15px 8px ;
        }
        .bg_parkingRoom2 {
          background-color: #f4f7ff;
          width:calc(100% - 42px);
          padding: 11px 0px 15px 8px ;
        }
        .choice_card_index_text {
          display: inline-block;
          line-height: 42px;
          font-family: 'PingFang SC';
          font-style: normal;
          font-weight: 400;
          font-size: 28px;
          color: #666;
        }
        .choice_card_index_text2 {
          display: inline-block;
          line-height: 40px;
          font-family: 'PingFang SC';
          font-style: normal;
          font-weight: 400;
          font-size: 28px;
          color: #333;
        }
        // justify-content: space-between;
        &.mt0 {
          margin-top: 0;
        }
        &.mb0 {
          margin-bottom: 0;
        }
        &.pb0 {
          padding-bottom: 0;
        }
        .status-box {
          font-size: 30px;
          font-weight: 400;
          color: var(--k-color-primary-01);
          line-height: 42px;
          &.other {
            color: #999999;
          }
        }
      }
      .orderno-box {
        display: flex;
        justify-content: space-between;
        font-weight: 600;
        color: #333;
        padding-top: 31px;
        line-height: 28px;
      }
      .orderno-box2 {
        display: flex;
        justify-content: space-between;
        font-weight: 600;
        color: #333;
        margin-bottom: 0;
      }
      .orderFee {
        font-family: 'PingFang SC';
        font-style: normal;
        font-weight: 500;
        font-size: 34px;
        line-height: 40px;
        color:#999;
        // vertical-align: middle;
        align-self: center;
        // margin-top:5px;
        // padding: 10px 0;
      }
      .orderFee2 {
        font-family: 'PingFang SC';
        font-style: normal;
        font-weight: 500;
        font-size: 34px;
        line-height: 40px;
        color:#333;
        // vertical-align: middle;
        align-self: center;
        // margin-top:5px;
        // padding: 10px 0;
      }
      .active {
          color: #333333;
        }
      .orderDetail-box {
        height: 81px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .orderDetail {
        height: 50px;
        width: 179px;
        text-align: center;
        line-height: 50px;
        margin-right: 30px;
        //margin-left: 176px;
        border-radius: 4.333vw;
        //padding: 11px 33px;
        border: 1px solid #333333;
        font-family: 'PingFang SC';
        font-style: normal;
        font-weight: 400;
        font-size: 28px;
        color: #333333;
      }
    }
  }
}

.suggestion-list {
  display: flex;
  flex-direction: column;
  background: #F4F7FF;
  border-radius: 15px;
  .van-checkbox-group{
    // padding-bottom:104px;
  }
}

.flewx {
  width: 100%;
  //height: 150px;
  padding-top: 33px;
  background-color: #fafbff;
  box-shadow: 0 0 2px 0 hsla(0, 6%, 58%, 0.6);
  position: fixed;
  bottom: 0;
  display: flex;
  align-items: center;
  // justify-content: space-between;
  padding-bottom: 50px;

  // .checkAll {
  // 	.checkboxItem {
  // 		position: relative;
  // 		top: -2px;
  // 	}
  // }
  .priceBtn {
    width: 100%;
    padding: 0 30px 0 24px;
    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: 270px;
      height: 80px;
      border-radius: 90px;
      text-align: center;
      font-size: 32px;
      line-height: 80px;
      background: var(--k-color-primary-01);
      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: none;
  margin: 0 auto;

  img {
    width: 454px;
    height: 378px;
    margin-bottom: 40px;
  }

  span {
    color: #999;
    display: block;
  }
}
.no-more-data {
  width: 100%;
  position: relative;
  text-align: center;
  box-sizing: border-box;
  margin-top: 45px;
  font-size: 22px;
  font-weight: 400;
  color: #999999;
  line-height: 41px;
  background:rgba(255,255,255,0);
  padding:0 24px;
  &::before {
    content: '';
    display: block;
    width: calc(40% - 49px);
    position: absolute;
    left: 49px;
    top: 16px;
    border-top: 1px dashed #cfcfcf;
  }
  &::after {
    content: '';
    display: block;
    width: calc(40% - 49px);
    position: absolute;
    right: 49px;
    top: 16px;
    border-top: 1px dashed #cfcfcf;
  }
}
.choice_card {
  width: calc(100% - 48px);
  margin: 43px 24px;
  // margin-top: 30px;
  // padding: 30px;
  // border-radius: 20px;
  position: relative;
  background-color: #fafbff;
  border-radius: 4px;
  // border: 1px solid #d8dae0;
  &.mt30 {
    margin-top: 30px;
  }
  .carno-box {
    display: flex;
    //padding-bottom: 18px;
    // border-bottom: 1px solid #d8dae0;`
    justify-content: space-between;
    .carno {
      font-family: 'PingFang SC';
      font-style: normal;
      font-weight: 400;
      font-size: 28px;
      line-height: 5.6vw;
      color: #999999;
      padding: 20px 35px;
    }
    .servicefee {
      font-size: 30px;
      font-weight: 600;
      color: #333333;
      line-height: 42px;
    }
    .status-box {
      font-family: 'PingFang SC';
      font-style: normal;
      font-weight: 400;
      font-size: 30px;
      color: var(--k-color-primary-01);
      line-height: 42px;
      &.other {
        color: #b15124;
      }
    }
  }
}

</style>