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

<template>
  <view class="app-container">
    <u-navbar
        title="票信息"
        bgColor="#01DCEA"
        :fixed="true"
        :autoBack="false"
        :titleStyle="{color: '#fff'}"
        leftIconColor="#fff"
        leftIconSize="28"
        @leftClick="handleLeftClick"
    >
    </u-navbar>
    <!-- 曲面背景 -->
    <view class="app-container_bg">
    </view>
    <view class="app-container-item flex-column-center">
      <view class="title-card flex-column-center">
        <view style="color: white;font-size: 24px;font-weight: bold;margin-bottom: 10px">
          {{detailInfo.title}}
        </view>
        <view style="background: #E7F9FD;color: #2ABED2;padding: 2px 12px;border-radius: 14px">
          {{ detailInfo.date }} {{ detailInfo.openStartTime }}-{{ detailInfo.openEndTime }}
        </view>
      </view>
      <view class="ticket-swiper-card">
        <!--票数显示区域-->
        <view class="info-ticket-num flex-align-center">
          <text>{{swiperCurrent + 1}}</text><text v-show="detailInfo.swiperItem.length > 1">/&nbsp;{{detailInfo.swiperItem.length}}</text><text>张</text>
        </view>
        <!--票类型显示区域-->
        <view v-if="detailInfo.swiperItem[swiperCurrent].isUse || (!detailInfo.swiperItem[swiperCurrent].isUse && isObsoleteTime)" :class="[detailInfo.swiperItem[swiperCurrent].isUse?'info-right-default' : 'info-right-gray', 'flex']">
          <view class="circle flex">
            {{ detailInfo.swiperItem[swiperCurrent].isUse ? '已检票' : '已失效' }}
          </view>
        </view>
        <!--票二维码显示区域-->
        <view class="info-ticket-swiper">
          <view class="swiper_btn flex" @click="handleSwiperChange('left')" v-if="detailInfo.swiperItem.length > 1">
            <text class="iconfont icon-swiper-left"
                  style="font-size: 24px;color: #7B7F86"></text>
          </view>
          <swiper class="swiper" :current="swiperCurrent" :indicator-dots="false" :autoplay="false" :circular="true" :vertical="false" :duration="500" @change="swiperChange">
            <swiper-item class="swiper-item flex-align-center" v-for="(item,index) in detailInfo.swiperItem" :key="index">
              <view class="qr-info flex-column-center" v-if="!isTicketTime">
                <text style="font-size: 18px" v-if="isNotYetTime">未到时间~</text>
              </view>
              <view class="qr-info flex-column" style="justify-content: flex-end;" v-else-if="isTicketTime">
                <text style="color: #333333" v-if="!item.isUse">{{item.username}}</text>
                <text style="color: #333333" v-if="!item.isUse">{{item.idNumber}}</text>
                <text v-if="!item.isUse">二维码实时更新，请勿截屏使用</text>
              </view>
              <view class="qr-img flex-column-center" v-if="isTicketTime && !item.isUse">
                <img :src="picUrl.qrImage"></img>
              </view>
              <view class="qr-img flex-column-center" v-else>
                <text style="color: #333333" >{{item.username}}</text>
                <text style="color: #333333">{{item.idNumber}}</text>
              </view>
              <!--未使用&未过时间-->
              <view v-if="!item.isUse && !isObsoleteTime && !item.isQuickEntry" class="quick-entry-btn flex" @click="openQuickEntry(item, index)">开通快速入园</view>
              <view v-if="!item.isUse && !isObsoleteTime && item.isQuickEntry" class="quick-entry-tips flex">已开通快速入园</view>
            </swiper-item>
          </swiper>
          <view class="swiper_btn flex" @click="handleSwiperChange('right')" v-if="detailInfo.swiperItem.length > 1">
            <text class="iconfont icon-swiper-right"
                  style="font-size: 24px;color: #7B7F86"></text>
          </view>
        </view>
        <!--温馨提示显示区域-->
        <view class="info-ticket-tips flex-column-center">
          <view>
            <text>温馨提示</text>
            <text class="iconfont icon-tips-fill"
                  style="font-size: 14px;color: #F7931A;margin-left: 5px"></text>
          </view>
          <text>已开通快速入园的游客可直接刷脸入园，也可通过二维码、身份证、现场手输身份证号入园。</text>
        </view>
      </view>
      <view class="order-detail">
        <view class="title flex-between" @click="toOrderDetail">
          <text>订单信息</text>
          <text class="iconfont icon-swiper-right" style="font-size: 14px;color: #333333"></text>
        </view>
        <text style="font-size: 13px;color: #7B7F86;height: 30px;line-height: 30px">查看订单详情</text>
      </view>
    </view>
    <u-modal closeOnClickOverlay v-if="quickEntryModal.show" :show="quickEntryModal.show" title="">
      <view class="flex-column modal_area">
        <view class="modal_icon flex">
          <view class="circle_icon flex">
            <text class="iconfont icon-bulb" style="font-size: 30px;color: #ffffff"></text>
          </view>
        </view>
        <view class="modal_title">
          是否开通快速入园
        </view>
        <text class="modal_content">
          <text style="color: #FFAF51">开通快速入园后，可直接刷脸快速入园。</text>
          点击<text style="color: #FFAF51"> “立即开通” </text>拍摄人脸照片，开通快速入园；取消后也可在票夹内手动开通。
        </text>
      </view>
      <template #confirmButton>
        <view class="modal_btn flex-between">
          <view class="modal_btn_cancel" @click="onClose">
            取消
          </view>
          <view class="modal_btn_ok" @click="onConfirm">
            立即开通（{{quickEntryModal.timerCount}}s）
          </view>
        </view>
      </template>
    </u-modal>
    <u-modal closeOnClickOverlay v-if="takePhotosModal.show" :show="takePhotosModal.show" title="">
      <view class="flex-column modal_area">
        <view class="modal_title flex-column-center">
          <view>请 {{quickEntryList[quickEntryIndex].username}} 做好准备</view>
          <view>即将开始拍摄照片</view>
        </view>
        <text class="modal_content">
          拍摄人脸照片，开通快速入园；取消后也可在票夹内手动开通。
        </text>
      </view>
<!--      <button id="fileInput" @click="chooseImageFuc"></button>-->
      <template #confirmButton>
        <view class="modal_btn flex-between">
          <view class="modal_btn_cancel" @click="onTakePhotosClose">
            取消
          </view>
          <view ref="takePhotosRef" class="modal_btn_ok" @click="onTakePhotosConfirm">
            开始
          </view>
        </view>
      </template>
    </u-modal>
    <u-modal closeOnClickOverlay v-if="quickEntryTipsModal.show" :show="quickEntryTipsModal.show" title="">
      <view class=" modal_area" style="width: 100%">
        <view class="modal_title flex-column-center">
          <view>已全部部分开通快速入园</view>
        </view>
        <view style="display: flex;flex-direction: column;justify-content: flex-start;width: 100%">
          <view style="color: #333333;font-size: 15px;font-weight: 700">游玩人：</view>
          <view style="display: flex;flex-direction: column;width: 100%;padding: 10px;color: #636B85;font-size: 14px">
            <text v-for="item in quickEntryList.filter(v=>v.isQuickEntry)" style="height: 24px;line-height: 24px;display: flex;justify-content: flex-start;align-items: center">{{item.username}}&nbsp;&nbsp;&nbsp;{{item.idNumber}}</text>
          </view>
        </view>
      </view>
      <template #confirmButton>
        <view class="modal_btn flex-between">
          <view class="modal_btn_ok" style="width: 100%;" @click="onQuickEntryTipsClose">
            确定（{{quickEntryTipsModal.timerCount}}s）
          </view>
        </view>
      </template>
    </u-modal>
  </view>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      // 是否开通快速入园
      quickEntryModal: {
        show: false,
        timer: null, // 倒计时
        timerCount: 10, // 倒计时计数
      },
      // 开始拍照
      takePhotosModal: {
        show: false,
      },
      // 开通快速入园提示
      quickEntryTipsModal: {
        show: false,
        timer: null, // 倒计时
        timerCount: 5, // 倒计时计数
      },
      swiperCurrent: 0,
      userInfo: {},
      ticketInfo: {
        title: '兰花街1、2、3',
        date: '2024.06.14',
        openStartTime: '08:00',
        openEndTime: '20:00',
        state: 2,
        checkedTickets: 0,
        // 轮播图 二维码区域
        swiperItem:[{
          username: '刘琳琳', // 姓名
          idNumber: '430822199903010465', // 身份证号
          avatar: '',
          qrCodeUrl:'',
          isQuickEntry: false,
          isUse: false, // 是否使用
        }, {
          username: '刘琳X', // 姓名
          idNumber: '430822199903010464', // 身份证号
          avatar: '',
          qrCodeUrl:'',
          isQuickEntry: true,
          isUse: false, // 是否使用
        }, {
          username: '刘琳Y', // 姓名
          idNumber: '430822199903010463', // 身份证号
          avatar: '',
          qrCodeUrl:'',
          isQuickEntry: false,
          isUse: false, // 是否使用
        }],
      },
      quickEntryList: [], // 开通快速入园的列表
      quickEntryIndex: 0, //
      detailInfo: {},
      loading: true,
      isLogin: true,
      picUrl: this.$require,
      content: `<p>1、票型有效期：仅限游玩当日有效。</p> <p>2、检票方式：刷脸（开通快速入园后）、刷 身份证（原件）、刷二维码或现场手输身份证号入园。</p> <p>3、退改规则：一经检票，不得退票。</p> <p>4、实名制一证一票。门票仅限入园1次，不可重复入园。</p> <p>5、禁止携带宠物入园。</p>`
    };
  },
  computed: {
    // 已到时间
    isTicketTime() {
      const startTime = new Date(`${this.detailInfo.date} ${this.detailInfo.openStartTime}`); // 开始时间
      const endTime = new Date(`${this.detailInfo.date} ${this.detailInfo.openEndTime}`); // 结束时间
      const currentTime = new Date();
      console.log(startTime, endTime, currentTime);
      return (startTime <= currentTime) && (endTime >= currentTime);
    },
    // 未到时间
    isNotYetTime(){
      const startTime = new Date(`${this.detailInfo.date} ${this.detailInfo.openStartTime}`); // 开始时间
      const currentTime = new Date();
      return (startTime >= currentTime);
    },
    // 已过时间
    isObsoleteTime() {
      const endTime = new Date(`${this.detailInfo.date} ${this.detailInfo.openEndTime}`); // 结束时间
      const currentTime = new Date();
      return (endTime <= currentTime);
    },
  },
  filters: {
    matchState(code) {
      switch (code) {
        case 1:
          return '已检票';
        case 2:
          return '已失效';
      }
    }
  },
  onLoad(options) {
    // this.detailInfo = JSON.parse(options.info);
    console.log('onLoad')
    let swiperArr = [];
    this.ticketInfo.swiperItem.forEach(item=>{
      swiperArr.push({
        ...item,
        username: this.$sun.desensitization(item.username, 1, 2),
        idNumber: this.$sun.desensitizationIdNumber(item.idNumber)
      })
    });
    this.detailInfo = {
      ...this.ticketInfo,
      swiperItem: swiperArr
    };
  },
  onShow() {
    this.userInfo = uni.getStorageSync('userInfo')
    this.userInfo = {
      ...this.userInfo,
      phone: '18322568765'
    };
    // this.isLogin = this.userInfo.username ? true : false;
  },
  methods: {
    /**
     * 订单详情
     */
    toOrderDetail() {
      console.log(this.ticketInfo);
      uni.navigateTo({
        url: '/pages/order/detail?info=' + JSON.stringify(this.ticketInfo)
      });
    },
    swiperChange(e) {
      console.log(e);
      this.swiperCurrent = e.detail.current;
    },
    /**
     * 二维码区域切换
     */
    handleSwiperChange(type) {
      if (type == 'left') {
        let nextIndex = this.swiperCurrent - 1;
        if (nextIndex < 0) {
          nextIndex = this.detailInfo.swiperItem.length - 1; // 循环到最后一页
        }
        this.swiperCurrent = nextIndex;
      } else {
        let nextIndex = this.swiperCurrent + 1;
        if (nextIndex >= this.detailInfo.swiperItem.length) {
          nextIndex = 0; // 循环到第一页
        }
        this.swiperCurrent = nextIndex;
      }
    },
    handleLeftClick() {
      //获取页面栈的长度
      const canNavBack = getCurrentPages()
      //判断是否刷新了浏览器，刷新了浏览器，页面栈只有当前一个
      if (canNavBack && canNavBack.length > 1) {
        uni.navigateBack({
          delta: 1
        })
      } else {
        history.back()
      }
    },
    getGuideInfo() {
      // this.isLogin = true;
    },
    /**
     * 开通快速入园
     * @param data
     * @param index
     */
    openQuickEntry(data, index) {
      console.log(data, index);
      let _this = this;
      _this.quickEntryList = _this.detailInfo.swiperItem.filter(item=> !item.isQuickEntry);
      _this.quickEntryIndex = 0;
      console.log(_this.quickEntryList, _this.quickEntryIndex);
      _this.quickEntryModal.show = true;
      _this.quickEntryModal.timer = setInterval(() => {
        if (_this.quickEntryModal.timerCount > 1) {
          _this.quickEntryModal.timerCount = _this.quickEntryModal.timerCount - 1;
        } else {
          _this.onConfirm();
        }
      }, 1000);
    },
    onClose() {
      this.quickEntryModal.show = false;
      this.quickEntryModal.timer && clearInterval(this.quickEntryModal.timer);
      this.quickEntryModal.timerCount = 10;
      this.quickEntryModal.timer = null;
    },
    onConfirm() {
      this.onClose();
      this.openTakePhotos();
    },
    /**
     * 打开准备拍照的 Modal 开始
     * @param data
     */
    openTakePhotos() {
      let _this = this;
      _this.takePhotosModal.show = true;
    },
    onTakePhotosClose() {
      this.takePhotosModal.show = false;
      if (this.quickEntryIndex < this.quickEntryList.length - 1) {
        this.quickEntryIndex = this.quickEntryIndex + 1;
        this.openTakePhotos();
      } else {
        this.openQuickEntryTips();
      }
    },
    onTakePhotosConfirm() {
      let _this = this;
      _this.takePhotosModal.show = false;
      uni.chooseImage({
        count: 1, // 默认9，设置图片的数量
        sourceType: ['camera'], // 可选择的源类型，'album'从相册选择，'camera'使用相机拍照
        success: (res) => {
          // 成功选择图片后的回调
          console.log(res.tempFilePaths, _this.quickEntryIndex,  _this.quickEntryList.length);
          _this.quickEntryList[_this.quickEntryIndex].isQuickEntry = true;
          _this.quickEntryList[_this.quickEntryIndex].avatar = [res.tempFilePaths];
          let index = _this.detailInfo.swiperItem.findIndex(v=>v.idNumber == _this.quickEntryList[_this.quickEntryIndex].idNumber);
          _this.detailInfo.swiperItem[index].isQuickEntry = true;
          if (_this.quickEntryIndex < _this.quickEntryList.length - 1) {
            _this.quickEntryIndex = _this.quickEntryIndex + 1;
            _this.openTakePhotos();
          } else {
            _this.openQuickEntryTips();
          }
          // blob:http://localhost:8080/2060af0e-0a26-480a-bd2d-9ce4e6f6652a
          // res.tempFilePaths 是一个包含拍照文件本地临时路径的数组
        },
        fail: (err) => {
          // 选择图片失败的回调
          console.log('选择图片失败：', err);
        }
      });
    },
    /**
     * 开通快速入园成功提示
     * @param data
     * @param index
     */
    openQuickEntryTips() {
      let _this = this;
      console.log(_this.ticketInfo.swiperItem, _this.quickEntryList);
      if (_this.quickEntryList.filter(item=> item.isQuickEntry).length > 0) {
        _this.quickEntryTipsModal.show = true;
        _this.quickEntryTipsModal.timer = setInterval(() => {
          if (_this.quickEntryTipsModal.timerCount > 1) {
            _this.quickEntryTipsModal.timerCount = _this.quickEntryTipsModal.timerCount - 1;
          } else {
            _this.onQuickEntryTipsClose();
          }
        }, 1000);
      }
    },
    onQuickEntryTipsClose() {
      this.quickEntryTipsModal.show = false;
      this.quickEntryTipsModal.timer && clearInterval(this.quickEntryTipsModal.timer);
      this.quickEntryTipsModal.timerCount = 5;
      this.quickEntryTipsModal.timer = null;
    },
  }
};
</script>
<style lang="scss" scoped>
.app-container {
  width: 100vw;
  background: rgba(243, 244, 246, 1);
  //overflow: hidden;
  position: relative;

  &_bg {
    position: absolute;
    top: 44px;
    z-index: 0;
    width: 100%;
    height: 200px;
    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%);
      background: linear-gradient(180deg, #01DCEA 0%, rgba(29, 211, 236, 0) 100%);
      left: -30%;
      border-radius: 0 0 50% 50%;
    }
  }

  &-item {
    position: absolute;
    top: 44px;
    width: 100%;

    .top-ticket {
      background: #01DCEA;
      height: 80px;
      width: 100%;
      padding: 0 20px;
      box-sizing: border-box;

      .title {
        color: #fff;
        font-size: 24px;
        font-weight: bold;
      }

      .btn {
        padding: 4px 16px;
        background: #fff;
        font-size: 14px;
        border-radius: 16px;
        color: #00B6CE;
      }
    }
    .title-card {
      background: transparent;
      color: #333;
      box-sizing: border-box;
      width: 100%;
      margin-top: 10px;
    }

    .ticket-swiper-card {
      width: calc(100% - 30px);
      margin-top: 10px;
      background: #fff;
      border-radius: 8px;
      min-height: 460px;
      position: relative;

      .info {
        &-ticket-tips {
          background: #F7931A12;
          width: calc(100% - 16px);
          min-height: 90px;
          position: absolute;
          bottom: 5px;
          left: 8px;
          border-radius: 8px;
          padding: 8px 12px;
          box-sizing: border-box;
          align-items: flex-start;
          text {
            &:first-child {
              color: #F7931A;
              font-size: 15px;
              font-weight: bold;
            }
            &:last-child {
              color: #B17E52;
              font-size: 14px;
              margin-top: 5px;
            }
          }
        }
        &-ticket-swiper {
          position: absolute;
          top: 60px;
          z-index: 2;
          width: 100%;
          padding: 0 5px;
          box-sizing: border-box;
          height: 280px;
          display: flex;
          justify-content: space-around;

          .swiper_btn {
            width: 50px;
            height: calc(100% - 60px - 35px);
            margin-top: 60px;
          }

          .swiper {
            width: 260px;
            height: 280px;
          }

          .swiper-item {
            flex-direction: column;
            box-sizing: border-box;
            .qr-info {
              width: 100%;
              height: 60px;
              font-size: 13px;
              color: #A8ABB1;
            }
            .qr-img {
              width: 160px;
              height: 160px;
              margin-top: 5px;
              box-sizing: border-box;
              font-size: 13px;
              background: #F1F9FB;
              color: #333333;

              img {
                width: 100%;
                height: 100%;
              }
            }
            .quick-entry-btn {
              background: #0ED6E2;
              color: #fff;
              font-size: 18px;
              font-weight: 500;
              line-height: 27px;
              text-align: center;
              width: 174px;
              height: 35px;
              margin-top: 20px;
              border-radius: 20px;
            }
            .quick-entry-tips {
              background: #fff;
              color: #42D7E0;
              font-size: 18px;
              font-weight: 500;
              line-height: 27px;
              text-align: center;
              width: 174px;
              height: 35px;
              margin-top: 20px;
            }
          }
        }
        &-ticket-num {
          position: absolute;
          left: 15px;
          top: 15px;
          text {
            &:nth-child(1) {
              color: #2ABED2;
              font-size: 18px;
              font-weight: 500;
              margin-right: 5px;
            }
            &:nth-child(2){
              color: #333333;
              font-size: 13px;
            }
            &:nth-child(3){
              color: #333333;
              font-size: 13px;
            }
          }
        }
        &-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-default {
          width: 70px;
          height: 70px;
          background: #fff;
          border: 2.5px solid #E8F0FC;
          border-radius: 50%;
          position: absolute;
          right: 15px;
          top: 15px;

          .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%;
          position: absolute;
          right: 15px;
          top: 15px;

          .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;
          }
        }
      }
    }

    .order-detail {
      width: calc(100% - 30px);
      margin-top: 10px;
      background: #fff;
      border-radius: 8px;
      min-height: 80px;
      position: relative;
      display: flex;
      flex-direction: column;
      padding: 10px;
      box-sizing: border-box;
      .title {
        width: 100%;
        font-size: 16px;
      }
    }
  }
}

.modal_area {
  position: relative;
  .modal_icon {
    position: absolute;
    left: -10px;
    top: calc(-25px - 72px / 2);
    width: 72px;
    height: 72px;
    background: #FF9237;
    border-radius: 50%;
    box-sizing: border-box;
    .circle_icon {
      width: 63px;
      height: 63px;
      background: #FF9237;
      border-radius: 50%;
      border: 2px solid white;
      box-sizing: border-box;
    }
  }
  .modal_title {
    color: #1D2633;
    font-size: 20px;
    font-weight: bold;
    //height: 30px;
    line-height: 30px;
    margin-bottom: 20px;
  }

  .modal_content {
    color: #333333;
    font-size: 15px;
    line-height: 24px;
  }
}

.modal_btn {
  &_cancel {
    height: 44px;
    line-height: 44px;
    border-radius: 4px;
    background: #fff;
    color: #01DCEA;
    width: calc((100% - 20px) / 2);
    border: 1px solid #01DCEA;
    text-align: center;
  }
  &_ok {
    height: 44px;
    line-height: 44px;
    border-radius: 4px;
    color: #fff;
    background: #01DCEA;
    width: calc((100% - 10px) / 2);
    border: 1px solid #01DCEA;
    text-align: center;
  }
}
</style>