city-gather/src/subPack-film/order-detail/index.vue

<script setup lang="ts">
import { filterDay, timeFormat } from '../utils'
import { OrderStatus, handleCommonOrderStatusText } from '../utils/order-data'
import { StaticUrl } from '@/config'

definePage({
  name: 'film-order-detail',
  islogin: false,
  style: {
    navigationBarTitleText: '订单详情',
    backgroundColorBottom: '#fff',
  },
})

const orderInfo = ref()
const current = ref(0)
const qrRefs = ref<Record<string, any>>({})
function handleCopy(data: string) {
  uni.setClipboardData({
    data,
    success() {
      uni.showToast({
        title: '复制成功',
        icon: 'none',
      })
    },
  })
}

async function downloadImg() {
  await nextTick()
  const qrInstance = qrRefs.value[current.value]
  console.log(qrInstance, current.value)

  qrInstance.downloadQrcode()
}

async function getData(orderNo: string) {
  const res = await Apis.xsb.orderInfo({ data: { orderNo } })
  // const res = await Apis.film.filmOrderDetail({ data: { id } })

  orderInfo.value = res.data
  if (orderInfo.value.orderMovieItems[0].ticketCode) {
    orderInfo.value.codeList = orderInfo.value.orderMovieItems[0].ticketCode?.split(',')
  }
  else {
    orderInfo.value.codeList = []
  }
}
function call() {
  uni.makePhoneCall({
    phoneNumber: orderInfo.value.phone,
  })
}

function handleNav() {
  uni.openLocation({
    latitude: Number(orderInfo.value?.latitude),
    longitude: Number(orderInfo.value?.longitude),
    name: orderInfo.value.cinemaName,
    address: orderInfo.value.cinemaName,
  })
}
function changeSwiper(e: any) {
  console.log(e.detail.current)
  current.value = e.detail.current
}

onLoad((options) => {
  getData(options?.orderNo as string)
})
</script>

<template>
  <view class="film-order-detail">
    <view class="status">
      <!-- 支付成功，待出票  -->
      {{ orderInfo.hbOrderStatus == 0 ? "待支付" : handleCommonOrderStatusText(orderInfo) }}
    </view>
    <view class="status-desc">
      如需改签、退款，请直接联系商家
    </view>
    <!-- 出票状态 -->
    <view v-if="orderInfo.hbOrderStatus === OrderStatus.OrderAccepted" class="status-box block">
      <view class="icon-box">
        <image class="icon" :src="`${StaticUrl}/film-ing-icon.png`" />
        <view class="state">
          正在出票
        </view>
      </view>
      <view class="notice">
        预计1-15分钟内出票，若遇到影院系统导致出票失败，系统
        将自动为您退款
      </view>
    </view>

    <!-- 取票码 -->
    <view class="ticket-info block">
      <view class="ticket-item">
        <view class="seat">
          座位：
          <view v-for="(item, index) in orderInfo.orderMovieItems" :key="index">
            {{ `${item.name} ` }} &nbsp;
          </view>
        </view>
        <!-- <view class="code-box">
          <view class="code">
            取票码：{{ item.ticketCode || '暂无' }}
          </view>
          <image class="icon" :src="`${StaticUrl}/film-copy.png`" @click="handleCopy(item.ticketCode)" />
        </view>
        <view class="notice">
          (前为取票码，后为验票码)
        </view> -->
        <template v-if="orderInfo.codeList.length > 0">
          <swiper class="swiper w-[100%]" :indicator-dots="true" @change="changeSwiper">
            <swiper-item
              v-for="(item, index) in orderInfo.codeList" :key="index"
              class="flex items-center justify-center"
            >
              <QCode
                :ref="(el) => { if (el) qrRefs[index] = el; }" class="my-20rpx" :text="item" :qwidth="90"
                :qr-key="`qr${index}`"
              />
            </swiper-item>
          </swiper>
          <view class="qrcode-box">
            <!-- <view class="qrcode">
            </view> -->
            <view class="download-btn" @click="downloadImg">
              下载到手机
            </view>
          </view>
        </template>
      </view>
      <!-- <view class="open-box">
        <view class="text">
          展开(共{{ orderInfo.orderMovieItems.length }}个)
        </view>
        <image class="arrow" :src="`${StaticUrl}/film-black-arrow.png`" mode="scaleToFill" />
      </view> -->
    </view>

    <!-- 退款信息 -->
    <view v-if="false" class="refund-info block">
      <!-- 全退 -->
      <view class="sub-title">
        退款信息
      </view>
      <!-- 部分退 -->
      <view class="flex items-center">
        <image class="mr-16rpx h-30rpx w-30rpx" :src="`${StaticUrl}/film-error.png`" mode="scaleToFill" />
        <view class="sub-title">
          出票失败已退款：6排6座、6排7座
        </view>
      </view>
      <view class="item">
        <view class="label gray">
          退款金额
        </view>
        <view class="value">
          ￥159.9
        </view>
      </view>
      <view class="desc">
        退还金额:159.9元 退还积分:100(已过期10)
      </view>
      <view class="item">
        <view class="label gray">
          退款方式
        </view>
        <view class="value">
          原支付方式退回
        </view>
      </view>
      <view class="item">
        <view class="label gray">
          退款时间
        </view>
        <view class="value">
          2024-12-13 11：12：30
        </view>
      </view>
      <view class="item">
        <view class="label gray">
          预计到帐
        </view>
        <view class="value">
          1-3个工作日
        </view>
      </view>
    </view>

    <!-- 退款原因 -->
    <view v-if="false" class="refund-reason block">
      <view class="sub-title">
        退款原因
      </view>
      <view class="reason">
        影院场次临时调整
      </view>
    </view>

    <!-- 影片信息 -->
    <view class="movie-info block">
      <image class="img" :src="orderInfo.orderImage" />
      <view class="title-box">
        <view class="title">
          {{ orderInfo.movieName }}
        </view>

        <view class="time-box">
          {{ filterDay(timeFormat(orderInfo.session, 'yyyy-MM-dd')) == '今天' ? (`今天${timeFormat(orderInfo.session, 'HH:mm')}`) : timeFormat(orderInfo.session) }} 英语3D
        </view>
      </view>
    </view>

    <!-- 影院信息 -->
    <view class="film-info block">
      <view class="title">
        {{ orderInfo.cinemaName }}
      </view>
      <view class="icon-box">
        <view class="icon-item" @click="handleNav">
          <image class="icon" :src="`${StaticUrl}/film-nav-icon.png`" />
          <view class="text">
            导航
          </view>
        </view>
        <view class="icon-item" @click="call">
          <image class="icon" :src="`${StaticUrl}/film-phone.png`" />
          <view class="text">
            电话
          </view>
        </view>
      </view>
    </view>

    <!-- 座位信息 -->
    <view class="seat-info block">
      <view class="room-num">
        {{ orderInfo.hallName }}
      </view>
      <!-- <view class="area-price">
        普通区￥29.9
      </view> -->
      <view class="seat-list">
        <view v-for="(item, index) in orderInfo.orderMovieItems" :key="index" class="item">
          <view class="label">
            {{ item.name }}
          </view>
          <view class="value">
            ￥{{ item.price }}
          </view>
        </view>
      </view>
    </view>

    <!-- 价格信息 -->
    <view class="goods-price-box block">
      <view class="item">
        <view class="label">
          商品金额
        </view>
        <view class="value">
          ￥{{ orderInfo.orderMoney }}
        </view>
      </view>
      <view class="notice">
        座位跨区,按最高价格计算。订单总价=最高座位价格×座位数
      </view>
      <view class="item">
        <view class="label">
          积分（{{ orderInfo.offsetPoints || 0 }}）
        </view>
        <view class="value price">
          -￥{{ orderInfo.offsetPoints / 100 }}
        </view>
      </view>
      <!-- <view class="item">
        <view class="label">
          平台券
        </view>
        <view class="value price">
          -￥14
        </view>
      </view> -->
      <view class="line" />
      <view class="total-box">
        <view class="reduce">
          总计￥{{ orderInfo.orderMoney }}共减￥{{ orderInfo.offsetPoints / 100 }}
        </view>
        <view class="text">
          实际付款
        </view>
        <view class="total">
          ￥{{ orderInfo.total }}
        </view>
      </view>
    </view>

    <view class="order-info block">
      <view class="sub-title">
        订单信息
      </view>
      <view class="item">
        <view class="label gray">
          订单编号
        </view>
        <view class="value">
          {{ orderInfo.orderNumber }}
          <image class="icon" :src="`${StaticUrl}/film-copy.png`" @click="handleCopy(orderInfo.orderNumber)" />
        </view>
      </view>
      <view class="item">
        <view class="label gray">
          支付方式
        </view>
        <view class="value">
          微信支付
        </view>
      </view>
      <view class="item">
        <view class="label gray">
          支付时间
        </view>
        <view class="value">
          {{ orderInfo.payTime || '-' }}
        </view>
      </view>
      <view class="item">
        <view class="label gray">
          下单时间
        </view>
        <view class="value">
          {{ orderInfo.createTime }}
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.film-order-detail{
  padding: 20rpx 24rpx 300rpx;
  background: #F9F9F9;
  .block{
    background: #FFFFFF;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    padding: 24rpx;
    margin-bottom: 20rpx;
  }
  .sub-title {
    font-weight: bold;
    font-size: 32rpx;
    color: #222222;
  }

  .item{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20rpx;
    .label{
      font-size: 28rpx;
      color: #222222;
    }
    .label.gray{
      color: #AAAAAA;
    }
    .value{
      font-size: 28rpx;
      color: #222222;
    }
    .value.price {
      color: #FF4A39;
    }
  }
  .item:first-child {
    margin-top: 0 !important;
  }
  .status{
    font-weight: bold;
    font-size: 36rpx;
    color: #222222;
    margin-bottom: 20rpx;
  }
  .status-desc{
    font-size: 28rpx;
    color: #AAAAAA;
    margin-bottom: 20rpx;
  }
  .status-box{
    .icon-box{
        margin-bottom: 20rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        .icon {
          width: 80rpx;
          height: 80rpx;
          margin-bottom: 20rpx;
        }
      .state{
        font-weight: bold;
        font-size: 32rpx;
        color: #222222;
      }
    }
    .notice{
      font-size: 24rpx;
      color: #AAAAAA;
      line-height: 40rpx;
    }
  }

  .ticket-info{
    .seat{
      font-weight: bold;
      font-size: 28rpx;
      color: #222222;
      display: flex;
    }
    .code-box{
      display: flex;
      align-items: center;
      margin-top: 20rpx;
      .code{
        font-weight: bold;
        font-size: 28rpx;
        color: #222222;
      }
      .icon{
        width: 30rpx;
        height: 30rpx;
        margin-left: 20rpx;
      }
    }
    .notice{
      font-size: 24rpx;
      color: #AAAAAA;
      margin-top: 20rpx;
    }
    .qrcode-box{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-top: 24rpx;
      .qrcode{
        width: 160rpx;
        height: 160rpx;
        background: #AAAAAA;
        border-radius: 16rpx;
      }
      .download-btn{
        width: 180rpx;
        height: 44rpx;
        line-height: 44rpx;
        text-align: center;
        background: #9ED605;
        border-radius: 26rpx 26rpx 26rpx 26rpx;
        font-size: 28rpx;
        color: #FFFFFF;
        margin-top: 24rpx;
      }
    }

    .open-box{
      display: flex;
      align-items: center;
      .text{
        font-size: 24rpx;
        color: #222222;
      }
      .arrow{
        width: 32rpx;
        height: 32rpx;
        transform: rotate(90deg);
      }
    }
  }

  .refund-info{
    .desc{
      font-size: 24rpx;
      color: #AAAAAA;
      margin-top: 20rpx;
    }
  }

  .refund-reason{
    .reason{
      font-size: 28rpx;
      color: #AAAAAA;
      margin-top: 20rpx;
    }
  }

  .movie-info{
    display: flex;
    align-items: center;
    .img{
      width: 152rpx;
      height: 208rpx;
      margin-right: 24rpx;
      border-radius: 16rpx;
      vertical-align: bottom;
    }
    .title-box{
      display: flex;
      flex-direction: column;
      justify-content: center;

      .title{
        font-weight: bold;
        font-size: 32rpx;
        color: #222222;
        margin-bottom: 20rpx;
      }
      .time-box{
        font-size: 24rpx;
        color: #AAAAAA;
      }
    }
  }

  .film-info{
    display: flex;
    align-items: center;
    justify-content: space-between;
    .title{
      font-weight: bold;
      font-size: 32rpx;
      color: #222222;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .icon-box{
      display: flex;
      justify-content: space-between;
      width: 140rpx;
      .icon-item{
        display: flex;
        flex-direction: column;
        align-items: center;
        .icon{
          width: 40rpx;
          height: 40rpx;
          margin-bottom: 20rpx;
        }
        .text{
          font-size: 28rpx;
          color: #222222;
        }
    }
  }
  }

  .seat-info{
    .room-num{
      font-size: 28rpx;
      color: #222222;
      margin-bottom: 20rpx;
    }
    .area-price{
      font-size: 24rpx;
      color: #AAAAAA;
      margin: 20rpx 0;
    }
    .seat-list{

    }
  }

  .goods-price-box{
    .notice{
      font-size: 24rpx;
      color: #AAAAAA;
      margin-top: 16rpx;
    }
    .line{
      height: 2rpx;
      background: #F0F0F0;
      margin-top: 20rpx;
    }

    .total-box{
      display: flex;
      justify-content: flex-end;
      align-items: center;
      margin-top: 30rpx;
      .reduce{
        font-size: 24rpx;
        color: #222222;
      }
      .text{
        font-weight: bold;
        font-size: 32rpx;
        color: #222222;
        margin: 0 12rpx;
      }
      .total{
        font-weight: bold;
        font-size: 32rpx;
        color: #FF4A39;
      }
    }
  }

  .order-info{

    .icon{
      width: 30rpx;
      height: 30rpx;
      margin-left: 20rpx;
    }
  }
}
</style>