LJ-ancient-city-h5/pages/order/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-item flex-column-center">
      <view class="top-ticket flex-between">
        <view class="title">{{ detailInfo.state | matchState}}</view>
        <view class="btn" v-if="detailInfo.state == '2' || detailInfo.state == '3'" @click="toTicketDetails">
          <text class="iconfont icon-ticket"
                style="font-size: 14px;margin-right: 5px"></text>
          查看票夹
        </view>
      </view>
      <view class="item-card">
        <view style="color: #1D2633;font-size: 20px;font-weight: bold;margin-bottom: 15px">
          {{detailInfo.title}}
        </view>
        <view class="time flex-between">
          <view style="background: #E7F9FD;color: #2ABED2;padding: 2px 12px;border-radius: 14px">
            时间<text style="margin-left: 20px">{{ detailInfo.date }} {{ detailInfo.openStartTime }}-{{ detailInfo.openEndTime }}</text>
          </view>
          <text style="color: #7B7F86;font-size: 13px">
            共{{detailInfo.swiperItem && detailInfo.swiperItem.length}}张
          </text>
        </view>
      </view>
      <view class="item-card">
        <text style="font-size: 16px;font-weight: bold">游玩人</text>
        <view class="id-card">
          <view class="id-card_item" v-for="(item,index) in detailInfo.swiperItem" :key="index">
            <text>{{ item.username }}</text>
            <text>【身份证】{{ item.idNumber }}</text>
          </view>
        </view>
        <text style="font-size: 16px;font-weight: bold">联系方式</text>
        <view class="id-card">
          <view class="id-card_item">
            <text>18322568765</text>
          </view>
        </view>
      </view>
      <view class="item-card">
        <text  v-if="detailInfo.state == '1' || detailInfo.state == '2' || detailInfo.state == '3'" style="font-size: 16px;font-weight: bold">订单服务</text>
        <view class="service-card flex-between" v-if="detailInfo.state == '1' || detailInfo.state == '2' || detailInfo.state == '3'" >
          <view class="service-card_item">
            <text class="iconfont icon-refund-ticket"
                  style="font-size: 18px;margin-right: 5px;color: #01DCEA"></text>{{detailInfo.state == '3'?'当前退票服务已停止':'订单退票'}}
          </view>
          <view class="service-card_item" v-if="detailInfo.state == '1' || detailInfo.state == '2'" @click="handleRefundTicket">去申请</view>
        </view>
        <text style="font-size: 16px;font-weight: bold">订单信息</text>
        <view class="order-card">
          <view class="order-card_item">
            <text>订单编号：L240516144032021</text>
            <text>创建时间：2024-05-16 14:40:32</text>
            <text v-if="detailInfo.state == '4'">退票时间：2024-05-16 14:40:32</text>
          </view>
        </view>
      </view>
    </view>
    <u-modal closeOnClickOverlay :show="ticketModal.show" :title="ticketModal.title">
      <view style="color: #333333;font-size: 18px;font-weight: 500">
        确定提交退票申请吗？
      </view>
      <template #confirmButton>
        <view class="modal_btn flex-between">
          <view class="modal_btn_cancel" @click="onClose">
            取消
          </view>
          <view class="modal_btn_ok" @click="onConfirm">
            确定
          </view>
        </view>
      </template>
    </u-modal>
  </view>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      ticketModal: {
        show: false,
        title: '',
      },
      userInfo: {},
      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>`
    };
  },
  filters: {
    matchState(code) {
      switch (code) {
        case 1:
          return '未出票';
        case 2:
          return '已出票';
        case 3:
          return '已结束';
        case 4:
          return '已退票';
      }

    }
  },
  onLoad(options) {
    this.detailInfo = {
      ...JSON.parse(options.info),
      // 轮播图 二维码区域
      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 // 是否使用
      }]
    };
    console.log('onLoad', this.detailInfo)
  },
  onShow() {
    this.userInfo = uni.getStorageSync('userInfo')
    this.userInfo = {
      ...this.userInfo,
      phone: '18322568765'
    };
    // this.isLogin = this.userInfo.username ? true : false;
  },
  methods: {
    toTicketDetails() {
      uni.navigateTo({
        url: '/pages/ticket/detail?info=' + JSON.stringify(this.detailInfo)
      });
    },
    handleLeftClick() {
      //获取页面栈的长度
      const canNavBack = getCurrentPages()
      //判断是否刷新了浏览器，刷新了浏览器，页面栈只有当前一个
      if (canNavBack && canNavBack.length > 1) {
        uni.navigateBack({
          delta: 1
        })
      } else {
        history.back()
      }
    },
    getGuideInfo() {
      // this.isLogin = true;
    },
    /**
     * 退票申请
     */
    handleRefundTicket() {
      this.ticketModal.show = true;
    },
    onClose() {
      this.ticketModal.show = false;

    },
    onConfirm() {
      this.ticketModal.show = false;

    }
  }
};
</script>
<style lang="scss" scoped>
.app-container {
  width: 100vw;
  position: relative;
  height: 100vh;

  &-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;
      }
    }
    .item-card {
      background: #fff;
      color: #333;
      box-sizing: border-box;
      padding: 15px 10px;
      border-radius: 8px;
      width: calc(100vw - 30px);
      margin-top: 15px;

      .id-card{
        //height: 50px;

        &_item {
          display: flex;
          flex-direction: column;
          padding: 10px 20px;
          font-size: 14px;
          color: #333333;
          text {
            height: 26px;
            line-height: 26px;
          }

          &:not(:last-child) {
            border-bottom: 1px solid #EDF1F6;
          }
        }
      }

      .service-card{
        //height: 50px;

        &_item {
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: flex-end;
          padding: 10px 20px;
          font-size: 14px;
          color: #333333;
          text {
            height: 26px;
            line-height: 26px;
          }

          &:nth-child(2) {
            border: 1px solid #E7EBF4;
            padding: 2px 16px;
            border-radius: 14px;
            color: #636B85;
          }
        }
      }

      .order-card{
        //height: 50px;

        &_item {
          display: flex;
          flex-direction: column;
          padding: 10px 20px;
          font-size: 14px;
          color: #7B7F86;
          text {
            height: 26px;
            line-height: 26px;
          }
        }
      }
    }
  }
}

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