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

<template>
  <div
    class="scroll-Y"
  >
    <div class="choice" v-if="custTypeId === 0">
      <div
        v-for="(item, index) in invoiceList"
        :key="index"
        :class="index + 1 == tabIndex ? 'actived' : ''"
        @click="invoice(index + 1)"
      >{{ item }}
      </div
      >
    </div>
    <div
      class="shanghaiClassify"
      :class="{
        blueClassify: custTypeId === 1,
        greenClassify: custTypeId === 2,
      }"
      v-else
    >
      <div
        :class="{ classifyItem: true, isChecked: tabIndex === index + 1 }"
        v-for="(item, index) in invoiceList"
        :key="index"
      >
        <div @click="invoice(index + 1)">{{ item }}</div>
      </div>
    </div>
    <div class="choice_select" v-if="custTypeId === 0"
    >
      <div :class="tabIndex == 1 ? 'choice_select_ews' : 'choice_select_ew'"
      />
    </div>
    <!-- 开票列表 -->
    <scroll-view class="choice_card" :style="{ height: height }" @scrolltolower="scrollLower">
      <div class="suggestion-list">
        <van-checkbox-group  v-model="ids" v-if="isJingAn" @change="radioChange" style="background-color: #f2f2f2">
          <label
            class="uni-list-cell uni-list-cell-pd"
            @click="goToDeatil(item)"
            v-for="(item, index) in list"
            :key="index"
            :index="item.id"
            :activity="total - 1"
          >
            <div class="choice_card_item">
              <div class="choice_card_index choice_card_index1">
                <div v-if="tabIndex == 1"
                >{{ item.orderNo }}-{{ item.vehicleNo }}
                </div
                >
                <div v-else>{{ item.titleName }}的停车发票</div>
                <div v-if="tabIndex == 1" style="color: #ed1c24"
                >￥{{item.totalPaidAmount}}
                </div
                >
                <div v-else style="color: #ed1c24"
                >{{item.totalPaidAmount}}
                </div
                >
              </div>
              <div
                class="choice_card_index choice_card_index2"
                v-if="tabIndex == 1"
              >{{ item.parkName }}
              </div
              >
              <div
                class="choice_card_index choice_card_index3"
                v-if="tabIndex == 1"
              >
                <div>入场时间: {{ item.enterTime }}</div>
                <div
                >
                  <radio
                    color="#ED1C24"
                    :value="item.id"
                    :checked="index === current"
                  />
                </div>
              </div>
              <div
                class="choice_card_index choice_card_index2"
                v-if="tabIndex == 1"
              >
                停车时长: {{ item.serviceMin | parkingTime }}
              </div>
              <div
                class="choice_card_index choice_card_index2"
                v-if="tabIndex == 2"
              >税号: {{ item.taxNo }}
              </div
              >
              <div
                class="choice_card_index choice_card_index3"
                v-if="tabIndex == 2"
                style="padding-bottom: 20px"
              >
                <div
                >开票时间:
                  {{ item.createTime ? item.createTime : '-' }}
                </div
                >
                <!-- 0：已提交申请(待开票) 1:开票中  2：开票完成 3：开票失败 -->
                <div
                  class="choice_card_status"
                  v-if="item.status === 'COMPLETE'"
                  style="color: #8cc63f"
                >
                  开票完成
                  <img
                    class="arrow"
                    :src="arrowIcon"
                    mode="heightFix"
                    style="height: 40px"
                  />
                </div>
                <div
                  class="choice_card_status"
                  v-else-if="item.status === 3"
                  style="color: #ed1c24"
                >
                  开票失败
                  <img
                    class="arrow"
                    :src="arrowIcon"
                    mode="heightFix"
                    style="height: 40px"
                  />
                </div>
                <div class="choice_card_status" v-else style="color: #f7931e">
                  开票中
                  <img
                    class="arrow"
                    :src="arrowIcon"
                    mode="heightFix"
                    style="height: 40px"
                  />
                </div>

              </div>
            </div>

          </label>
        </van-checkbox-group>
        <van-checkbox-group  v-model="ids" v-else @change="checkboxChange">
          <label
            class="uni-list-cell uni-list-cell-pd"
            @click="goToDeatil(item)"
            v-for="(item, index) in list"
            :key="index"
            :index="item.id"
            :activity="total - 1"
          >
            <div class="choice_card_item">
              <div class="choice_card_index choice_card_index1">
                <div v-if="tabIndex == 1"
                >{{ item.orderNo }}-{{ item.vehicleNo }}
                </div
                >
                <div v-else>{{ item.invoiceHeader }}</div>
                <div v-if="tabIndex == 1" style="color: #ed1c24"
                >￥{{item.totalPaidAmount}}
                </div
                >
                <div v-else style="color: #ed1c24"
                >￥{{item.invoiceTotalAmount}}
                </div
                >
              </div>
              <div
                class="choice_card_index choice_card_index2"
                v-if="tabIndex == 1"
              >{{ item.parkName }}
              </div
              >
              <div
                class="choice_card_index choice_card_index3"
                v-if="tabIndex == 1"
              >
                <div>入场时间: {{ item.enterTime }}</div>
                <div class="my-not-invoiced-item">
                  <van-checkbox
                    shape="square"
                    :name="item.id"
                    icon-size="20"
                    ref="checkboxes"
                    @click="checkboxchange2($event, index)"
                  />
                </div>
              </div>
              <div
                class="choice_card_index choice_card_index2"
                v-if="tabIndex == 1"
              >
                停车时长: {{ item.serviceMin | parkingTime }}
              </div>
              <div
                class="choice_card_index choice_card_index2"
                v-if="tabIndex == 2"
              >税号: {{ item.taxNo }}
              </div
              >
              <div
                class="choice_card_index choice_card_index3"
                v-if="tabIndex == 2"
                style="padding-bottom: 20px"
              >
                <div
                >开票时间:
                  {{ item.createTime ? item.createTime : '-' }}
                </div
                >
                <!-- 0：已提交申请(待开票) 1:开票中  2：开票完成 3：开票失败  -->
                <div
                  class="choice_card_status"
                  v-if="item.status === 'COMPLETE'"
                  style="color: #8cc63f"
                >
                  开票完成
                  <img
                    class="arrow"
                    :src="arrowIcon"
                    style="height: 40px"
                  />
                </div>
                <div
                  class="choice_card_status"
                  v-else-if="item.status === 'FAILED'"
                  style="color: #ed1c24" @click.stop
                >
                  <div>开票失败</div>
                  <!-- <div>重新开票</div> -->
                  <div class="bordClass" type="default" plain="true" @click.stop="tryGoToInvoicing(item)" size="mini" style="margin-left: 10px;color: #E89E42;border-radius: 10px;padding: 10px;">重新开票</div>
                  <!-- <img
                    class="arrow"
                    :src="arrowIcon"
                    mode="heightFix"
                    style="height: 40px"
                  />
                  <div
                    class="choice_card_index choice_card_index3"
                    v-if="tabIndex == 2 && item.status === 'FAILED'"
                    style="padding-bottom: 20rpx;justify-content: flex-end;font-size: 20rpx;"
                  @click.stop="showFailureReason(item.failureReason)"
                  >
                    <icon type="info" size="12" color="#d7d7d7" style="margin-right: 10rpx;"/>失败原因
                  </div> -->
                </div>
                <div 
                class="choice_card_status" 
                v-else
                style="color: #f7931e">
                  开票中
                  <img
                    class="arrow"
                    :src="arrowIcon"
                    style="height: 40px"
                  />
                </div>
              </div>
              <div
                class="choice_card_index choice_card_index3"
                v-if="tabIndex == 2 && item.status === 'FAILED'"
                style="padding-bottom: 20px;justify-content: flex-end;font-size: 20px;"
                @click.stop="showFailureReason(item)"
              >
              <van-icon name="info"  size="12" color="#d7d7d7" style="margin-right: 10px;"/>
                <!-- <van-icon name="info-o" > -->
                <!-- <icon type="info" size="12" color="#d7d7d7" style="margin-right: 10px;"/> -->
                失败原因
              </div>
            </div>
          </label>
        </van-checkbox-group>
        <div v-show="isLoadMore" :class="{ noData: !list.length }">
          <img :src="noData" v-if="!list.length" alt="widthFix"/>
          <span v-if="!list.length">暂无数据</span>
          <uni-load-more :status="loadStatus" v-else></uni-load-more>
        </div>
        <!-- <div class="noData" v-if="!list.length">
                        <span>暂无数据</span>
                    </div> -->
      </div>
    </scroll-view>
    <div class="flewx" v-if="tabIndex == 1">
      <!-- <radio-group class="checkAll" @click="isCheckAll = !isCheckAll">
				<label>
					<radio style="transform: scale(0.7);position: relative;top: -2px;"
						color='#1FBB81' value="all" :checked="isCheckAll" /> 本页全选
				</label>
			</radio-group> -->
      <div class="priceBtn">
        <div
        >开票金额
          <span class="price">{{ totalNum.toFixed(2) }} 元</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 parkingReceiptJs from '../../../mixins/parkingReceipt/parkingReceipt'

export default {
  mixins: [parkingReceiptJs]
}
</script>

<style lang="less" scoped>
//@import '../../../styles/common.less';
.scroll-Y {
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 100vh;
  // padding-bottom: 100px;
  background: #f2f2f2;
  margin-bottom: 40px;

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

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

    .actived {
      color: #000000;
    }
  }

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

    div {
      width: 70px;
      height: 4px;
      border-radius: 25%;
      background-color: #000000;
    }

    .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: 98px 20px 0px;
    width: 710px;
    // background-color: #fff;
    .choice_card_item {
      // border: 2px solid #ddd;
      padding: 10px 20px;
      margin: 20px 0;
      border-radius: 20px;
      background-color: #fff;

      .choice_card_index {
        // padding-top: 6px;
        padding-bottom: 10px;
        font-size: 24px;

        .choice_card_status {
          display: flex;
          align-items: center;
          .bordClass {
            border: 1px solid #E89E42 !important;
          }
        }
      }

      .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;
  padding-bottom:120px;
}

//:global {
//  .van-checkbox__icon--checked .van-icon{
//    color: #c8c9cc;
//  }
//}


.flewx {
  width: 100%;
  height: 100px;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  // padding-bottom: constant(safe-area-inset-bottom);
  // padding-bottom: env(safe-area-inset-bottom);
  padding-bottom: 20px;
  // .checkAll {
  // 	.checkboxItem {
  // 		position: relative;
  // 		top: -2px;
  // 	}
  // }
  .priceBtn {
    display: flex;
    align-items: center;
    margin-right: 20px;
    justify-content: space-around;

    .price {
      color: #ed1c24;
      font-size: 36px;
      margin: 0 10px;
    }

    .flewx_index3 {
      width: 150px;
      height: 70px;
      border-radius: 40px;
      text-align: center;
      font-size: 28px;
      line-height: 70px;
      color: #fff;
      background-image: linear-gradient(to right, #7e50a3, #433c7f);
      margin-left: 50px;
      margin-right: 30px;
    }

    .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: 15% auto 0;

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

  span {
    color: #999;
    display: block;
  }
}
</style>
<style lang="less">
.my-not-invoiced-item {
  .van-checkbox__icon--checked .van-icon{
    color: #ED1C24;
    background-color: #fff;
    border-color: #c8c9cc;
  }
}
</style>