city-gather/src/subPack-smqjh/components/film-orderList/film-orderList.vue

<script setup lang="ts">
// import { StaticUrl } from '@/config'
import router from '@/router'

const props = defineProps<{
  orderList: Api.xsbOrderList[]
  subPackOrder?: typeof import('@/subPack-film/utils/order-data')
  subPackConfirm?: typeof import('@/subPack-film/utils/confirm-order')
}>()

const _emit = defineEmits<{
  'after-sale': [item: Api.xsbOrderList]
  'refresh': []
}>()

function resolveModule<T = any>(maybeRef: any): T | undefined {
  if (!maybeRef)
    return undefined
  if (maybeRef.value !== undefined)
    return maybeRef.value as T
  return maybeRef as T
}
async function handlePay(orderNumber: string) {
  const spc = resolveModule(props.subPackConfirm)
  if (!spc)
    return
  const res = await spc.handleCommonPayMent(orderNumber)
  if (res.payType !== 1) {
    await getWxCommonPayment(res)
  }
  else {
    _emit('refresh')
  }
}
async function handleCancel(order: Api.xsbOrderList) {
  const sp = resolveModule(props.subPackOrder)
  if (!sp)
    return
  await handleCommonCancelOrder(order)
  _emit('refresh')
}
function handleCopy(data: string) {
  uni.setClipboardData({
    data,
    showToast: true,
  })
}

function handleOrder(orderNo: string) {
  router.push({
    name: 'film-order-detail',
    params: {
      orderNo,
    },
  })
}
</script>

<template>
  <view
    v-for="(item, index) in orderList" :key="index" class="order-item block"
    @click.self="handleOrder(item.orderNumber as string)"
  >
    <view class="top-box">
      <view class="title">
        {{ item.movieName }}
      </view>
      <view class="status">
        <template v-if="item.hbOrderStatus === props.subPackOrder?.OrderStatus.PaddingPay">
          <view class="flex items-center">
            待支付( 还剩 <wd-count-down
              :time="props.subPackOrder?.handleCommonOrderStatusText(item)"
              @finish="() => _emit('refresh')"
            /> )
          </view>
        </template>
        <text v-else>
          {{ props.subPackOrder?.handleCommonOrderStatusText(item) }}
        </text>
      </view>
    </view>
    <!-- <view class="status-box">
          <view class="reason-box">
            <image class="icon" :src="`${StaticUrl}/film-error.png`" mode="scaleToFill" />
            <view class="reason">
              订单取消原因
            </view>
          </view>
          <view class="info">
            退款金额 ￥240 预计1-3个工作日到账
          </view>
        </view> -->

    <view class="info-box">
      <image class="img" :src="item.orderImage" mode="scaleToFill" />
      <view class="info">
        <view class="info-item">
          影院：{{ item.cinemaName }}
        </view>
        <view class="info-item">
          场次：{{ item.session.replace('T', ' ') }}
        </view>
        <view class="info-item">
          数量：{{ item.orderMovieItems?.length }}张
        </view>
        <view class="info-item">
          总价：￥{{ item.orderMoney }}
        </view>
      </view>
    </view>
    <view class="btn-box">
      <template v-if="item.hbOrderStatus === props.subPackOrder?.OrderStatus.PaddingPay">
        <!-- 待支付 -->
        <view
          class="btn cancel"
          custom-style="width: 128rpx;height: 38rpx;font-size: 24rpx;color: #AAAAAA;box-sizing: border-box;"
          @click.stop="handleCancel(item)"
        >
          取消订单
        </view>
        <view
          class="btn"
          custom-style="width: 128rpx;height: 38rpx;font-size: 24rpx;color: #222222;box-sizing: border-box"
          @click.stop="handlePay(item.orderNumber as string)"
        >
          付款
        </view>
      </template>
      <wd-button
        v-if="item.orderMovieItems[0].ticketCode"
        custom-style="width: 188rpx;height: 44rpx;font-size: 28rpx;box-sizing: border-box"
        @click.stop="handleCopy(item.orderMovieItems[0].ticketCode as string)"
      >
        复制取票码
      </wd-button>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.block {
  background: #FFFFFF;
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
}

  .order-item {
    .top-box {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .title {
        font-size: 32rpx;
        color: #222222;
        font-weight: bold;
      }

      .status {
        font-size: 28rpx;
        color: #222222;
      }
    }

    .status-box {
      margin-top: 24rpx;
      background: #F9F9F9;
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      padding: 24rpx;

      .reason-box {
        display: flex;
        align-items: center;

        .icon {
          width: 30rpx;
          height: 30rpx;
        }

        .reason {
          font-size: 28rpx;
          color: #999999;
          margin-left: 10rpx;
        }
      }

      .info {
        font-size: 24rpx;
        color: #AAAAAA;
        margin-top: 20rpx;
        line-height: 44rpx;
      }
    }

    .info-box {
      margin-top: 20rpx;
      display: flex;

      .img {
        width: 160rpx;
        height: 160rpx;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        background: #999999;
        margin-right: 20rpx;
      }

      .info {
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .info-item {
          font-size: 24rpx;
          color: #222222;
        }
      }
    }

    .btn-box {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin-top: 20rpx;

      .btn {
        width: 128rpx;
        height: 48rpx;
        line-height: 48rpx;
        text-align: center;
        background: #FFFFFF;
        border-radius: 24rpx 24rpx 24rpx 24rpx;
        border: 1rpx solid #222222;
        font-size: 24rpx;
        color: #222222;
      }

      .btn.cancel {
        color: #AAAAAA;
        border: 1rpx solid #AAAAAA;
        margin-right: 20rpx;
      }
    }
  }
</style>