GameServicePlatform/components/order-card/index.vue

<template>
  <view class="order-card cyber-card" @click="handleClick">
    <!-- 订单头部 -->
    <view class="order-header">
      <view class="order-info">
        <text class="order-no">订单号: {{ order.orderNo }}</text>
        <view class="status-badge" :style="{ background: getStatusColor(order.status) }">
          {{ getStatusText(order.status) }}
        </view>
      </view>
      <text class="order-time">{{ formatTime(order.createTime) }}</text>
    </view>

    <!-- 分割线 -->
    <view class="cyber-divider"></view>

    <!-- 服务信息 -->
    <view class="service-info">
      <image :src="order.serviceCover" class="service-cover" mode="aspectFill" />

      <view class="service-detail">
        <view class="service-name">{{ order.serviceName }}</view>
        <view class="category-tag">{{ order.categoryName }}</view>

        <!-- 选手信息 (如果已接单) -->
        <view v-if="order.playerName" class="player-info">
          <image :src="order.playerAvatar" class="player-avatar" />
          <text class="player-name">{{ order.playerName }}</text>
          <text v-if="order.status === 3" class="online-dot">●</text>
        </view>
      </view>

      <view class="price-info">
        <view class="price-value">¥{{ order.actualPrice }}</view>
      </view>
    </view>

    <!-- 订单操作按钮 -->
    <view class="order-actions">
      <!-- 待支付 -->
      <template v-if="order.status === 0">
        <button class="action-btn btn-cancel" @click.stop="handleCancel">取消订单</button>
        <button class="action-btn btn-primary" @click.stop="handlePay">立即支付</button>
      </template>

      <!-- 待接单/已接单 -->
      <template v-else-if="order.status === 1 || order.status === 2">
        <button class="action-btn btn-outline" @click.stop="handleContact">联系商家</button>
        <button class="action-btn btn-cancel" @click.stop="handleCancel">取消订单</button>
      </template>

      <!-- 进行中 -->
      <template v-else-if="order.status === 3">
        <button class="action-btn btn-outline" @click.stop="handleContact">联系选手</button>
        <button class="action-btn btn-primary" @click.stop="handleDetail">查看详情</button>
      </template>

      <!-- 待确认 -->
      <template v-else-if="order.status === 4">
        <button class="action-btn btn-outline" @click.stop="handleRefund">申请退款</button>
        <button class="action-btn btn-primary" @click.stop="handleConfirm">确认完成</button>
      </template>

      <!-- 已完成 -->
      <template v-else-if="order.status === 5">
        <button class="action-btn btn-outline" @click.stop="handleDetail">查看详情</button>
        <button class="action-btn btn-primary" @click.stop="handleEvaluate">去评价</button>
      </template>

      <!-- 已评价 -->
      <template v-else-if="order.status === 6">
        <button class="action-btn btn-outline" @click.stop="handleDetail">查看评价</button>
        <button class="action-btn btn-primary" @click.stop="handleRebuy">再来一单</button>
      </template>

      <!-- 已取消 -->
      <template v-else-if="order.status === 9">
        <button class="action-btn btn-outline" @click.stop="handleDelete">删除订单</button>
        <button class="action-btn btn-primary" @click.stop="handleRebuy">再来一单</button>
      </template>
    </view>

    <!-- 霓虹发光效果 -->
    <view class="scan-line"></view>
  </view>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'
import { OrderStatus } from '../../mock/orders'

const props = defineProps({
  order: {
    type: Object,
    required: true
  }
})

const emit = defineEmits(['click', 'action'])

const handleClick = () => {
  emit('click', props.order)
}

const handleAction = (action) => {
  emit('action', { action, order: props.order })
}

const handleCancel = () => handleAction('cancel')
const handlePay = () => handleAction('pay')
const handleContact = () => handleAction('contact')
const handleDetail = () => handleAction('detail')
const handleConfirm = () => handleAction('confirm')
const handleEvaluate = () => handleAction('evaluate')
const handleRefund = () => handleAction('refund')
const handleRebuy = () => handleAction('rebuy')
const handleDelete = () => handleAction('delete')

const getStatusColor = (status) => {
  const statusMap = {
    0: 'rgba(255, 170, 0, 0.2)',
    1: 'rgba(0, 255, 255, 0.2)',
    2: 'rgba(0, 255, 136, 0.2)',
    3: 'rgba(0, 153, 255, 0.2)',
    4: 'rgba(157, 0, 255, 0.2)',
    5: 'rgba(0, 255, 136, 0.2)',
    6: 'rgba(122, 126, 157, 0.2)',
    9: 'rgba(255, 51, 102, 0.2)'
  }
  return statusMap[status] || 'rgba(0, 255, 255, 0.2)'
}

const getStatusText = (status) => {
  const statusObj = Object.values(OrderStatus).find(s => s.code === status)
  return statusObj ? statusObj.text : '未知'
}

const formatTime = (time) => {
  return time.substring(0, 16)
}
</script>

<style lang="scss" scoped>
.order-card {
  margin-bottom: 24rpx;
  padding: 24rpx;
  background: linear-gradient(135deg, rgba(20, 25, 50, 0.95) 0%, rgba(10, 14, 39, 0.9) 100%);
  border: 1px solid rgba(0, 255, 255, 0.2);
  border-radius: 16rpx;
  position: relative;
  overflow: hidden;
}

.order-header {
  margin-bottom: 20rpx;
}

.order-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12rpx;
}

.order-no {
  font-size: 26rpx;
  color: #a0a4c4;
}

.status-badge {
  padding: 6rpx 16rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  font-weight: bold;
  color: #ffffff;
  backdrop-filter: blur(10rpx);
}

.order-time {
  font-size: 24rpx;
  color: #7a7e9d;
}

.service-info {
  display: flex;
  gap: 20rpx;
  margin-bottom: 24rpx;
}

.service-cover {
  width: 160rpx;
  height: 120rpx;
  border-radius: 12rpx;
  border: 1px solid rgba(0, 255, 255, 0.2);
}

.service-detail {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.service-name {
  font-size: 28rpx;
  font-weight: bold;
  color: #ffffff;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.category-tag {
  display: inline-block;
  padding: 4rpx 12rpx;
  background: rgba(0, 255, 255, 0.1);
  border: 1px solid rgba(0, 255, 255, 0.3);
  border-radius: 6rpx;
  font-size: 22rpx;
  color: #00ffff;
  align-self: flex-start;
}

.player-info {
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.player-avatar {
  width: 36rpx;
  height: 36rpx;
  border-radius: 50%;
  border: 1px solid rgba(0, 255, 255, 0.3);
}

.player-name {
  font-size: 24rpx;
  color: #a0a4c4;
}

.online-dot {
  width: 12rpx;
  height: 12rpx;
  color: #00ff88;
  font-size: 20rpx;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.price-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
}

.price-value {
  font-size: 36rpx;
  font-weight: bold;
  color: #00ffff;
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

.order-actions {
  display: flex;
  justify-content: flex-end;
  gap: 16rpx;
}

.action-btn {
  padding: 14rpx 32rpx;
  border-radius: 8rpx;
  font-size: 26rpx;
  font-weight: bold;
  border: none;
  transition: all 0.3s ease;

  &.btn-primary {
    background: linear-gradient(135deg, #00ffff 0%, #0099ff 100%);
    color: #0a0e27;
  }

  &.btn-outline {
    background: transparent;
    border: 1px solid #00ffff;
    color: #00ffff;
  }

  &.btn-cancel {
    background: rgba(122, 126, 157, 0.2);
    border: 1px solid rgba(122, 126, 157, 0.4);
    color: #7a7e9d;
  }

  &:active {
    transform: scale(0.95);
  }
}

.scan-line {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(0, 255, 255, 0.6) 50%, transparent 100%);
  animation: scan 3s infinite;
}

@keyframes scan {
  0%, 100% {
    opacity: 0;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(200rpx);
  }
}
</style>