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

<template>
  <view>
    <fl-page-header :autoback="true"
                    :left="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-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-3 text-center"></text>
          <text class="col-3 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 - 230rpx)"
              @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-3 font-16 row justify-center items-center">
              <u-image :src="item.url"
                       width="154rpx"
                       height="118rpx"></u-image>
            </view>
            <view class="col-3  row justify-center items-center text-center"
                  style="font-weight:bolder">
              {{ item.name }}
            </view>
            <view class="col-3  row justify-center items-center"
                  :style="{color:item.canReserve!=0?'#40BE94':'#AFAFAF'}">
              {{ item.canReserve+'/'+item.total }}
            </view>
            <view class="col-3 row justify-center items-center cursur">
              <text v-if="item.canReserve!=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/reserve',item)">查看</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" />
  </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.elector
  },
  onShow () {
    this.getPageData();
  },
  beforeDestroy () { },
  methods: {
    getPageData (scroll) {
    },
    handleLink (path, item) {
      uni.setStorageSync('elector-link', item)
      uni.navigateTo({
        url: path,
      });
    },
    scrollRequest () {
      console.log('scrollRequest');
      this.tableParams.page++;
      this.getPageData(true);
    },
    handleFinishAll () {
    },
    handlePageType () {
      this.listData = [];
      this.getPageData();
    },
    handleContractClick (rowData) {
    },
    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: 14rpx 0;
}
/deep/ .u-image__image {
  border-radius: 20rpx 0 0 20rpx !important;
}
</style>