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

<script setup lang="ts">
import router from '@/router'

defineProps<{
  order: Api.xsbOrderList
}>()

const _emit = defineEmits<{
  refresh: []
}>()

async function handlePay(orderNumber: string) {
  const res = await useUserStore().handleCommonPayMent(orderNumber)
  if (res.payType !== 1) {
    // await useUserStore().getWxCommonPayment(res, 1)
    useGlobalToast().show('当前只支持积分支付')
  }
  else {
    _emit('refresh')
  }
}

async function handleCancel(order: Api.xsbOrderList) {
  await useUserStore().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
    class="blockc order-item"
    @click.self="handleOrder(order.orderNumber as string)"
  >
    <view class="top-box">
      <view class="title">
        {{ order.movieName }}
      </view>
      <view class="status">
        <template v-if="order.hbOrderStatus === OrderStatus.PaddingPay">
          <view class="flex items-center">
            待支付( 还剩 <wd-count-down
              :time="useUserStore().handleFilmCommonOrderStatusText(order)"
              @finish="() => _emit('refresh')"
            /> )
          </view>
        </template>
        <text v-else>
          {{ useUserStore().handleFilmCommonOrderStatusText(order) }}
        </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="order.orderImage" mode="scaleToFill" />
      <view class="info">
        <view class="info-item">
          影院：{{ order.cinemaName }}
        </view>
        <view class="info-item">
          场次：{{ order.session.replace('T', ' ') }}
        </view>
        <view class="info-item">
          数量：{{ order.orderMovieItems?.length }}张
        </view>
        <view class="info-item">
          总价：￥{{ order.orderMoney }}
        </view>
      </view>
    </view>
    <view class="btn-box">
      <template v-if="order.hbOrderStatus === OrderStatus.PaddingPay">
        <!-- 待支付 -->
        <view
          class="btn cancel"
          custom-style="width: 128rpx;height: 38rpx;font-size: 24rpx;color: #AAAAAA;box-sizing: border-box;"
          @click.stop="handleCancel(order)"
        >
          取消订单
        </view>
        <view
          class="btn"
          custom-style="width: 128rpx;height: 38rpx;font-size: 24rpx;color: #222222;box-sizing: border-box"
          @click.stop="handlePay(order.orderNumber as string)"
        >
          付款
        </view>
      </template>
      <wd-button
        v-if="order.orderMovieItems[0].ticketCode"
        custom-style="width: 188rpx;height: 44rpx;font-size: 28rpx;box-sizing: border-box"
        @click.stop="handleCopy(order.orderMovieItems[0].ticketCode as string)"
      >
        复制取票码
      </wd-button>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.blockc {
  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>