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-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 - 310rpx)"
              @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">{{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">
              <u-button v-if="item.typeNum!=0"
                        shape="circle"
                        text="查看"
                        style="width: 108rpx; height: 56rpx;background:#40BE94;color:#fff"
                        :loading="item.btnLoading"
                        @click="handleContractClick(item)" />

              <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></my-tabbar>
  </view>
</template>
<script>
import pageData from "../../static/pageData.json";
import { getLabelByOptions, calcRouteParams } from "@/util/form";
export default {
  data () {
    return {
      pageType: "unfinish",
      listData: [],
      contractTypeOptions: [
        {
          label: "艺术品推广及代销服务合同",
          value: 1,
          class: "border-primary",
        },
        {
          label: "著作权代理转让服务合同",
          value: 2,
          class: "border-cyan",
        },
        {
          label: "登记授权委托书",
          value: 3,
          class: "border-draft",
        },
        {
          label: "作品登记承诺书",
          value: 5,
          class: "border-yell",
        },
        {
          label: "著作权代理转让服务合同-附表",
          value: 6,
          class: "border-cyan",
        },
      ],
      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.pageType === "finished"
        ? (this.pageType = "unfinish")
        : (this.pageType = "finished");
      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: 34rpx 0;
}
</style>