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

<template>
  <scroll-view
    class="scroll-Y"
    id="slideview"
    scroll-y
    lower-threshold="50"
    scroll-top="0"
    scroll-left="0"
    scroll-with-animation="false"
    enable-back-to-top="false"
    @scrolltolower="bindscrolltolower"
  >
    <!--    <authorize ref="authorize"></authorize>-->
    <!--    <ul>-->
    <!--      <li v-for="i in 100" :key="i">{{ i }}</li>-->
    <!--    </ul>-->
    <template>
      <uni-view
        class="choice_card"
        v-for="(item, index) in list"
        :key="index"
        @click="toDetail(item.orderno)"
      >
        <uni-view
          class="choice_card_index choice_card_index1"
          style="font-size: 30px; margin: 0 12px"
        >
          <uni-view style="margin-left: 6px"
            >{{ item.orderno + '-' + item.carno }}
          </uni-view>
          <uni-view style="color: red; margin-right: 6px"
            >{{ (item.servicefee / 100) | currency }}
          </uni-view>
        </uni-view>
        <uni-view class="choice_card_index choice_card_index2"
          >{{ item.parkname }}
        </uni-view>
        <uni-view class="choice_card_index choice_card_index3">
          <uni-view>入场时间 : {{ item.entertime }}</uni-view>
          <uni-view style="margin-right: 20px">
            <uni-icons
              class="align-top"
              color="#B3B3B3"
              size="14"
              type="arrowright"
            />
          </uni-view>
        </uni-view>
        <uni-view
          class="choice_card_index choice_card_index3"
          style="padding-bottom: 20px"
        >
          <uni-view>停车时长 : {{ item.serviceMin | parkingTime }}</uni-view>
          <uni-view style="margin-right: 20px">
            {{
              item.refundStatus === 1
                ? '已退款'
                : item.payStatus === 1
                ? '支付成功'
                : '支付失败'
            }}
          </uni-view>
        </uni-view>
      </uni-view>
      <uni-view class="notice-info">
        <uni-view
          >{{ list.length === 4 ? '查看更多' : '没有更多数据了' }}
        </uni-view>
        <uni-icons
          v-if="list.length === 4"
          type="arrowdown"
          size="14"
          color="##b5b3b3"
        ></uni-icons>
      </uni-view>
    </template>
  </scroll-view>
</template>

<script>
// const app = getApp()
import uni from '@/utils/uniHooks';

const app = {};
let canloading = true;
let pageNum = 1;
import moment from 'moment';
import authorize from '@/components/authorize/authorize.vue';
import { mapState } from 'vuex';

export default {
  components: {
    authorize,
  },
  data() {
    return {
      list: [],
    };
  },
  computed: {
    ...mapState({
      mallId: (state) => state.mallId,
      openId: (state) => state.openid,
      member: (state) => state.member,
    }),
  },
  // 分享
  onShareAppMessage() {
    return {
      title: '缴费记录', // 标题
      path: '/pages/parkingFee/parkingFeeList?mallid=' + app.globalData.mallid,
      imageUrl: '', // 图标
    };
  },
  // 分享
  onShareTimeline() {
    return {
      title: '缴费记录', // 标题
      path: '/pages/parkingFee/parkingFeeList?mallid=' + app.globalData.mallid,
      imageUrl: '', // 图标
    };
  },
  mounted() {
    setTimeout(() => {
      uni.setNavigationBarTitle({
        title: "缴费记录"
      })
    }, 300)
    this.list = [];
    // 重新获取数据
    canloading = true;
    pageNum = 1;
    const member = uni.getStorageSync('member');
    console.log(114, member);
    if (member) {
      this.loadData();
    } /*else {
			this.$refs.authorize.login("/pages/parkingFee/parkingFee", () => {
				this.loadData()
			});
		}*/
  },
  // mounted() {
  //   console.log(123, this.$route)
  // },
  // onReachBottom: function() {
  //   console.log('canloading', canloading)
  //   if (canloading) {
  //     pageNum++
  //     this.loadData()
  //   }
  // },
  filters: {
    parkingTime(val) {
      const days = parseInt(val / 60 / 24);
      const hours = parseInt((val / 60) % 24);
      const minutes = parseInt(val % 60);
      if (days > 0) {
        return `${days}天 ${hours}小时 ${minutes}分钟`;
      }
      if (hours > 0) {
        return `${hours}小时 ${minutes}分钟`;
      }
      return `${minutes}分钟`;
    },
  },
  methods: {
    bindscrolltolower: function () {
      if (canloading) {
        pageNum++;
        this.loadData();
      }
    },
    // 获取停车记录
    loadData: function () {
      canloading = false;
      const params = {
        mallid: this.mallId,
        vipcode: this.member?.vipcode,
        openId: this.openId,
        page: pageNum || 1,
        pageSize: 4,
      };
      uni.showLoading({
        title: '加载中',
      });
      this.$md(params);
      uni.request({
        url: this.$baseURL + 'api/1.0/park/parkOrderList',
        data: params,
        method: 'POST',
        header: JSON.parse(uni.getStorageSync('handleUser')),
        success: (res) => {
          uni.hideLoading();
          if (res.data.code !== 0) {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: 'none',
            });
            this.initPage();
          } else {
            // 合并数据
            const records = res.data.data || [];
            if (records.length) {
              const list = this.list;
              this.list = [...list, ...records];
            } else {
              this.initPage();
            }
          }
          canloading = true;
        },
        fail: (err) => {
          uni.hideLoading();
          canloading = true;
          this.initPage();
          uni.showToast({
            title: res.data.msg,
            duration: 2000,
            icon: 'none',
          });
        },
      });
    },
    // 页码复原
    initPage: function () {
      pageNum--;
      if (pageNum <= 0) {
        pageNum = 0;
      }
    },
    // 查看详情
    toDetail(orderno) {
      this.$router.push({
        path: './parkingFeeDetailSuccess?orderNo=' + orderno,
      });
    },
  },
};
</script>

<style lang="less" scoped>
.scroll-Y {
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #f2f2f2;
}

.wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.parkingFeeList-item {
  background: #fff;
  display: flex;
  flex-direction: column;
  margin-top: 8px;

  .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30px 36px;
    box-sizing: border-box;

    span {
      font-size: 16px;
    }
  }

  .item-bottom {
    border-top: 1px solid #f2f2f2;
    display: flex;
    flex-direction: column;
    padding: 0px 36px;
    box-sizing: border-box;
    padding-top: 8px;

    uni-view {
      display: flex;
      flex-direction: column;
    }

    span {
      color: #999;
      font-size: 14px;
      margin-bottom: 10px;
    }
  }
}

.choice_card {
  width: 92%;
  margin-left: 4%;
  margin-top: 30px;
  margin-bottom: 30px;
  border-radius: 20px;
  background-color: #fff;
  position: relative;

  .choice_card_index {
    margin-left: 18px;
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: 28px;
  }

  .choice_card_index1 {
    border-bottom: 1px solid #f2f2f2;
    display: flex;
    align-items: center;
    padding-top: 22px;
    padding-bottom: 22px;
    justify-content: space-between;
  }

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

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

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

.notice-info {
  text-align: center;
  color: #b5b3b3;
  padding-bottom: 30px;

  uni-view {
    margin-bottom: -7px;
  }
}
</style>