parking_h5/components/swiper-list-item/swiper-list-item.vue

<!-- 在这个文件对每个tab对应的列表进行渲染 -->
<template>
  <view class="content">
    <z-paging ref="paging" v-model="dataList" @query="queryList" :fixed="false" :auto="false">
      <view class="coupon-list-item" v-for="(item, index) in dataList" :key="index">
        <view class="coupon-list-item-top">
          <view class="clit-left">
            <view class="clit-left-top"
              >￥<text>{{ item.couponContent }}</text></view
            >
            <view class="clit-left-bottom">{{ Number(item.threshold) > 0 ? `停车时长满${item.threshold}分钟` : '无门槛' }}</view>
          </view>
          <view class="clit-center">
            <view>{{ item.couponName }}</view>
            <view>{{ item.vehicleNo }}</view>
          </view>
          <template v-if="Number(item.status) === 0">
            <view class="clit-right">
              <u-button class="clit-right-btn" type="primary" size="default" @click="goToUse(item)">立即使用</u-button>
            </view>
          </template>
          <template v-else-if="Number(item.status) === 1">
            <view class="clit-right">
              <u-image width="128rpx" height="128rpx" src="/static/img/have-used-icon.svg"/>
            </view>
          </template>
          <template v-else-if="Number(item.status) === 2">
            <view class="clit-right">
              <u-image width="128rpx" height="128rpx" src="/static/img/have-overdued-icon.svg"/>
            </view>
          </template>
        </view>
        <view class="coupon-list-item-bottom">
          <view class="coupon-list-item-bottom-left">
            适用停车点：
            <template v-if="item.parkList.length > 1"> 适用多个停车点 </template>
            <template v-else> 仅限{{ item.parkList.map((item) => item.parkName).join('、') }} </template>
          </view>
          <template v-if="Number(item.status) === 0">
            <view class="coupon-list-item-bottom-right">有效期：{{ calcValidity(item.startTime, item.endTime) }} </view>
          </template>
          <template v-else>
            <view class="coupon-list-item-bottom-right">已失效</view>
          </template>
        </view>
        <template v-if="item.parkList.length > 1">
          <view class="clibl-point">
            <u-read-more
              text-indent="0"
              show-height="0"
              :toggle="true"
              :shadow-style="{ backgroundImage: 'none' }"
              fontSize="20rpx"
              close-text="展开所有停车点"
            >
              <view class="clibl-point-content">{{ item.parkList.map((item) => item.parkName).join('、') }}</view>
            </u-read-more>
          </view>
        </template>
      </view>
    </z-paging>
  </view>
</template>

<script>
export default {
  data() {
    return {
      dataList: [],
      firstLoaded: false
    };
  },
  props: {
    tabIndex: {
      type: Number,
      default: function () {
        return 0;
      }
    },
    currentIndex: {
      type: Number,
      default: function () {
        return 0;
      }
    }
  },
  watch: {
    currentIndex: {
      handler(newVal) {
        if (newVal === this.tabIndex) {
          //懒加载，当滑动到当前的item时，才去加载
          if (!this.firstLoaded) {
            setTimeout(() => {
              this.$refs.paging.reload();
            }, 100);
          }
        }
      },
      immediate: true
    }
  },
  methods: {
    queryList(pageNo, pageSize) {
      const params = {
        pageNo: pageNo,
        pageSize: pageSize,
        status: this.currentIndex
      };
      this.$u.api
        .couponListApi(params)
        .then((res) => {
          this.$refs.paging.complete(res.data.rows);
          this.firstLoaded = true;
        })
        .catch((res) => {
          this.$refs.paging.complete(false);
        });
    },
    /**
     * 重载数据
     * @date 2022-12-23
     * @returns {any}
     */
    reloadData() {
      this.$refs.paging.reload();
    },
    goToUse(item) {
      this.$u.route({
        url: 'pages/payLists/payLists'
      });
    },
    /**
     * 计算剩余时间
     * @date 2022-12-23
     * @param {any} datetime
     * @returns {any}
     */
    calcValidity(startTime, endTime) {
      let endTimeStr = new Date(endTime).valueOf(),
        nowTimeStr = new Date(startTime).valueOf() < Date.now() ? Date.now() : new Date(startTime).valueOf(),
        remainTimeStr = endTimeStr - nowTimeStr,
        day = Math.floor(remainTimeStr / (1000 * 3600 * 24)),
        dayOver = remainTimeStr % (1000 * 3600 * 24),
        hours = Math.floor(dayOver / (3600 * 1000)),
        hourOver = dayOver % (3600 * 1000),
        minutes = Math.floor(hourOver / (60 * 1000));
      return `${day}天${hours}小时${minutes}分`;
    }
  }
};
</script>

<style lang="scss" scoped>
/* 注意:父节点需要固定高度，z-paging的height:100%才会生效 */
.content {
  height: 100%;
}
.coupon-list-item {
  background-color: #fff;
  border-radius: 17rpx;
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.08);
  padding: 20rpx 0;
  margin-bottom: 30rpx;
  &-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 26rpx 30rpx 37rpx;
    border-bottom: 1px solid #eeeeee;
    .clit-left {
      color: #ff6d6d;
      font-size: 24rpx;
      width: 30%;
      &-top {
        margin-bottom: 10rpx;
        text {
          font-size: 60rpx;
        }
      }
      &-bottom {
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
    .clit-center {
      font-size: 20rpx;
      color: #333;
      width: 40%;
      margin-left: 2%;
      view:first-child {
        width: 100%;
        font-size: 32rpx;
        color: #666;
        font-weight: 500;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin-bottom: 16rpx;
      }
    }
    .clit-right {
      margin-left: 2%;
      &-btn {
        background-color: #ff6d6d;
      }
    }
  }
  &-bottom {
    font-size: 20rpx;
    color: #999999;
    display: flex;
    justify-content: space-between;
    padding: 10rpx 30rpx 0;
  }
  .clibl-point {
    margin-top: 20rpx;
    font-size: 22rpx;
    &-content {
      font-size: 22rpx;
      padding: 0 30rpx;
    }
  }
}
</style>