LJ-ancient-city-h5/pages/ticket/index.vue

<template>
  <view class="content">
    <u-navbar
        title="票夹"
        bgColor="#DCF9FF"
        :autoBack="false"
        :fixed="true"
    >
      <view slot="left"></view>
    </u-navbar>
    <!-- 曲面背景 -->
    <view class="ticket_bg">
    </view>
    <view class="ticket">
      <view class="now_ticket" v-for="data in ticketList" @click="toDetail(data)">
        <view class="flex-between" style="padding: 10px">
          <view class="info-left">
            <view class="item">
              <text style="font-size: 20px;color: #FFFFFF;font-weight: bold">{{data.title}}</text>
              <text style="font-size: 15px;color: #FFFFFFE5">
                {{ data.date }} {{ data.openStartTime }}-{{ data.openEndTime }}
              </text>
            </view>
          </view>
<!--          <view :class="[data.state == 1 ? 'info-right-default' :(data.state == 2 ?'info-right' : 'info-right-gray'), 'flex']">
            <view class="circle flex">
              {{data.state | matchState}}
            </view>
          </view>-->
        </view>
        <view class="flex-between list-item__footer">
          <view class="item">
            <text style="font-size: 14px;color: #FFFFFFCC">共{{data.ticketNum}}张</text>
          </view>
          <view class="item">
            <text style="font-size: 14px;color: #FFFFFFCC;margin-right: 10px">未检票 {{ data.ticketNum - data.checkedTickets }}</text>
            <text style="font-size: 14px;color: #FFFFFFCC">已检票 {{ data.checkedTickets }}</text>
          </view>
        </view>
      </view>
      <text style="color: #333333;padding: 0px 15px;box-sizing: border-box;display: inline-block;margin-top: 15px;">历史票</text>
      <view class="list-item" v-for="data in dataList" @click="toDetail(data)">
        <view class="flex-between" style="padding: 10px">
          <view class="info-left">
            <view class="item">
              <text style="font-size: 20px;color: #222222;font-weight: bold">{{data.title}}</text>
              <text style="font-size: 15px;color: #606266">
                {{ data.date }} {{ data.openStartTime }}-{{ data.openEndTime }}
              </text>
            </view>
          </view>
          <view :class="[data.state == 1 ? 'info-right-default' :(data.state == 2 ?'info-right' : 'info-right-gray'), 'flex']">
            <view class="circle flex">
              {{data.state | matchState}}
            </view>
          </view>
        </view>
        <view class="flex-between list-item__footer">
          <view class="item">
            <text style="font-size: 14px;color: #7B7F86">共{{data.ticketNum}}张</text>
          </view>
          <view class="item">
            <text style="font-size: 14px;color: #7B7F86;margin-right: 10px">未检票 {{ data.ticketNum - data.checkedTickets }}</text>
            <text style="font-size: 14px;color: #7B7F86">已检票 {{ data.checkedTickets }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      userInfo: {},
      ticketList: [
        {
          title: '兰花街1、2、3',
          date: '2024.05.08',
          openStartTime: '08:00',
          openEndTime: '20:00',
          state: 2,
          ticketState: 3,
          ticketNum: 3,
          checkedTickets: 0
        }
      ],
      dataList: [
        {
          title: '兰花街1、2、3',
          date: '2024.05.08',
          openStartTime: '08:00',
          openEndTime: '20:00',
          state: 3,
          ticketState: 1,
          ticketNum: 2,
          checkedTickets: 1
        },
        {
          title: '兰花街1、2、3',
          date: '2024.05.08',
          openStartTime: '08:00',
          openEndTime: '20:00',
          state: 4,
          ticketState: 2,
          ticketNum: 1,
          checkedTickets: 1
        }
      ],
    };
  },
  filters: {
    matchState(code) {
      switch (code) {
        case 1:
          return '未出票';
        case 2:
          return '已出票';
        case 3:
          return '已结束';
        case 4:
          return '已退票';
      }

    }
  },
  onLoad() {
    console.log('onLoad')
  },
  onShow() {
    console.log('onShow');
    this.userInfo = uni.getStorageSync('userInfo')
    this.userInfo = {
      ...this.userInfo,
      phone: '18322568765'
    };
    // this.isLogin = this.userInfo.username ? true : false;
    console.log('onShow', this.isLogin, 'XXX');
  },
  methods: {
    toDetail(item) {
      console.log('toDetail', item)
      uni.navigateTo({
        url: '/pages/ticket/detail?info=' + JSON.stringify(item)
      });
    },
  }
};
</script>
<style lang="scss" scoped>
.content {
  width: 100vw;
  background: rgba(243, 244, 246, 1);
  //overflow: hidden;
  position: relative;

  .ticket {
    width: 100%;
    top: 64px;
    position: relative;

    &_bg {
      position: absolute;
      top: 44px;
      z-index: 0;
      width: 100%;
      height: 130px;
      overflow: hidden;

      &::after {
        content: '';
        position: absolute;
        width: 160%;
        height: 100%;
        background: linear-gradient(179.48deg, #DCF9FF 0.45%, rgba(207, 254, 242, 0) 99.55%);
        left: -30%;
        border-radius: 0 0 50% 50%;
      }
    }

    .now_ticket {
      margin-top: 10px;
      //height: 120px;
      width: calc(100% - 30px);
      margin-left: 15px;
      border-radius: 8px;
      //box-shadow: 0px 0px 8px 0px #D2DBEE80;
      font-size: 16px;
      box-sizing: border-box;
      overflow: hidden;
      background: radial-gradient(circle at left 90px, transparent 5px,  #01DCEA 0,#01DCEA 100%) left top / 50% 100% no-repeat,
      radial-gradient(circle at right 90px, transparent 5px,  #01DCEA 0,#01DCEA 100%) right top / 50% 100% no-repeat !important;
      filter: drop-shadow(3px 0px 6px #56A0CA29);

      &__footer {
        height: 40px;
        //padding: 0 20px;
        box-sizing: border-box;
        position: relative;
        width: calc(100% - 20px);
        margin-left: 10px;
        &:before {
          content: '';
          position: absolute;
          //border-top: 2px dashed transparent; /* 虚线的颜色和宽度 */
          background: linear-gradient(transparent,transparent) padding-box,
          repeating-linear-gradient(90deg,#FFFFFF80 0, #FFFFFF80 8px,transparent 0,transparent 13px);
          width: 100%;
          height: 2px;
          top: 0;
        }
      }

      .info {
        &-left {
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          width: calc(100% - 55px);
          min-height: 70px;

          .item {
            display: flex;
            flex-direction: column;
          }
        }
      }
    }

    .list-item {
      margin-top: 10px;
      //height: 120px;
      background: white;
      width: calc(100% - 30px);
      margin-left: 15px;
      border-radius: 8px;
      //box-shadow: 0px 0px 8px 0px #D2DBEE80;
      font-size: 16px;
      box-sizing: border-box;
      overflow: hidden;
      background: radial-gradient(circle at left 94px, transparent 5px,  white 0,white 100%) left top / 50% 100% no-repeat,
      radial-gradient(circle at right 94px, transparent 5px,  white 0,white 100%) right top / 50% 100% no-repeat;
      filter: drop-shadow(3px 0px 6px #56A0CA29);

      &__footer {
        height: 40px;
        //padding: 0 20px;
        box-sizing: border-box;
        position: relative;
        width: calc(100% - 20px);
        margin-left: 10px;
        &:before {
          content: '';
          position: absolute;
          //border-top: 2px dashed transparent; /* 虚线的颜色和宽度 */
          background: linear-gradient(transparent,transparent) padding-box,
          repeating-linear-gradient(90deg,#F3F4F6 0, #F3F4F6 8px,transparent 0,transparent 13px);
          width: 100%;
          height: 2px;
          top: 0;
        }
      }

      .info {
        &-left {
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          width: calc(100% - 55px);
          min-height: 70px;

          .item {
            display: flex;
            flex-direction: column;
          }
        }

        &-right {
          width: 70px;
          height: 70px;
          background: #fff;
          border: 2.5px solid #D0F4FF;
          border-radius: 50%;

          .circle {
            width: 54px;
            height: 54px;
            background: #D0F4FF;
            border-radius: 50%;
            flex-shrink: 0;
            color: #48CEF9;
            display: flex;
            justify-content: center;
            align-items: center;
            transform: rotate(-15deg);
            font-size: 14px;
          }
        }

        &-right-default {
          width: 70px;
          height: 70px;
          background: #fff;
          border: 2.5px solid #E8F0FC;
          border-radius: 50%;

          .circle {
            width: 54px;
            height: 54px;
            background: #E8F0FC;
            border-radius: 50%;
            flex-shrink: 0;
            color: #A7B7D1;
            display: flex;
            justify-content: center;
            align-items: center;
            transform: rotate(-15deg);
            font-size: 14px;
          }
        }

        &-right-gray {
          width: 70px;
          height: 70px;
          background: #fff;
          border: 2.5px solid #EDF1F6;
          border-radius: 50%;

          .circle {
            width: 54px;
            height: 54px;
            background: #EDF1F6;
            border-radius: 50%;
            flex-shrink: 0;
            color: #B2BCCB;
            display: flex;
            justify-content: center;
            align-items: center;
            transform: rotate(-15deg);
            font-size: 14px;
          }
        }
      }
    }
  }
}
</style>