uni-admission-fee/pages/ticket/index.vue

<template>
  <view>
    <fl-page-header :autoback="false">
      <template v-slot:center>
        <view class="row items-center">
          <text class="font-16">智慧门票</text>
        </view>
      </template>
    </fl-page-header>

    <view :style="{
        minHeight: 'calc(100vh - ' + filterBoxTop + ' - 226rpx'+')',
      }">

      <view class="row justify-end item-center"
            style="color:#fff">
        <u-image src="../../static/icon-ticket-addr.png"
                 width="26rpx"
                 height="38rpx"></u-image>
        <text class="fl-ml-xs fl-mr-md">场馆列表</text>
      </view>
      <view class="row justify-center fl-pt-sm fl-mb-sm">
        <view class="row items-center fl-px-sm"
              style="font-size:28rpx;border-radius:20rpx;background:#40BE94;color:#fff;height:70rpx;width:calc(100% - 62rpx)">
          <text class="col-6 text-center">场馆名称</text>
          <text class="col-3 text-center">门票种类</text>
          <text class="col-3 text-center">门票预约</text>
        </view>
      </view>
      <u-list v-if="listData.length > 0"
              class="col-12"
              height="calc(100vh - 430rpx)"
              @scrolltolower="scrollRequest">
        <u-list-item v-for="(item, index) in listData"
                     :key="index"
                     class="fl-mb-sm fl-px-sm">
          <view class="fl-card row">
            <view class="col-6 font-16 row justify-center items-center"
                  style="font-weight:bolder">{{item.name}}</view>
            <view class="col-3  row justify-center items-center"
                  :style="{color:item.typeNum!=0?'#40BE94':'#AFAFAF'}">
              {{ item.typeNum }}种
            </view>
            <view class="col-3 row justify-center items-center cursur">

              <text v-if="item.typeNum!=0"
                    class="font-14 row justify-center items-center cursor"
                    style="width: 108rpx; height: 56rpx;background:#40BE94;color:#fff;border-radius:20rpx"
                    @click="handleLink('/pages/ticket/elector')">查看</text>

              <text v-else
                    class="font-14 row justify-center items-center"
                    style="width: 108rpx; height: 56rpx;background:#AFAFAF;color:#fff;border-radius:20rpx">暂无</text>
            </view>
          </view>
        </u-list-item>

        <view style="width: 100%"
              class="row items-center justify-center">
          <u-line dashed
                  :length="110"
                  style="display: inline-block"></u-line>
          <view style="color:#9ebfb3;font-size: 26rpx; margin: 30rpx">~人家是有底线的啦~</view>
          <u-line dashed
                  :length="110"
                  style="display: inline-block"></u-line>
        </view>
      </u-list>
    </view>

    <u-toast ref="uToast" />
    <my-tabbar :currentPage="'pages/ticket/index'"></my-tabbar>
  </view>
</template>
<script>
import pageData from "../../static/pageData.json";
import { getLabelByOptions, calcRouteParams } from "@/util/form";
export default {
  data () {
    return {
      listData: [],
      filterBoxTop: null,
      pageLoading: false,
      tableParams: {
        page: 1,
        pageSize: 12,
      },
      btnLoading: false,
    };
  },
  onLoad (pageParams) {
    this.filterBoxTop = uni.getSystemInfoSync()["statusBarHeight"] + 44 + "px";
    this.listData = pageData.ticketData
  },
  onShow () {
    this.getPageData();
  },
  beforeDestroy () { },
  methods: {
    getPageData (scroll) {
    },
    handleLink (path, params = {}) {
      uni.navigateTo({
        url: path + calcRouteParams(params),
      });
    },
    scrollRequest () {
      console.log('scrollRequest');
      this.tableParams.page++;
      this.getPageData(true);
    },
    handleFinishAll () {
    },
    handlePageType () {
      this.listData = [];
      this.getPageData();
    },
    handleLabelByOptions (val, options) {
      return getLabelByOptions(val, options);
    },
    handleTabBack (path) {
      uni.switchTab({
        url: path
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.fl-card {
  border-radius: 20rpx;
  background-color: #fff;
  padding: 34rpx 0;
}
</style>