antissoft / lvqianmeiye_ERP

<template>
  <view class="page-shell payment-success-page">
    <view class="page-blur"></view>
    <view class="page-blur-secondary"></view>
    <view class="page-blur-tertiary"></view>

    <view class="page-content subpage-content">
      <view class="subpage-nav">
        <view class="subpage-back" @tap="goMall">‹</view>
        <view class="subpage-title-wrap">
          <text class="subpage-title">下单成功</text>
          <text class="subpage-subtitle">核销二维码已准备好，支持任意时间任意门店核销自提</text>
        </view>
      </view>

      <view class="subpage-hero glass-card success-hero">
        <view class="success-mark">
          <view class="success-mark-ring"></view>
          <text class="success-mark-check">✓</text>
        </view>
        <text class="hero-kicker">PICKUP READY</text>
        <text class="hero-title">你的门店取件码已经生成</text>
        <text class="hero-desc">订单编号 {{ order.orderNo }} · {{ statusText }}</text>
      </view>

      <lf-pickup-code
        v-if="order.pickupCode"
        :code="order.pickupCode"
        title="门店自提取件码"
        desc="到自提门店出示取件码，门店核销后即可完成自提。"
      />

      <view class="subpage-card">
        <view class="info-list">
          <view class="info-row">
            <text class="info-label">商品名称</text>
            <text class="info-value">{{ mainItemName }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">商品数量</text>
            <text class="info-value">{{ totalQuantity }} 件</text>
          </view>
          <view class="info-row">
            <text class="info-label">自提门店</text>
            <text class="info-value">{{ order.storeName || '—' }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">实付金额</text>
            <text class="info-value">¥{{ order.payAmount }}</text>
          </view>
        </view>
      </view>

      <view class="subpage-card">
        <view class="section-head">
          <text class="section-title">接下来怎么做</text>
          <text class="section-link">门店自提</text>
        </view>
        <view class="next-list">
          <view v-for="(item, index) in nextSteps" :key="item.title" class="next-item">
            <view class="next-index">{{ index + 1 }}</view>
            <view class="next-copy">
              <text class="next-title">{{ item.title }}</text>
              <text class="next-desc">{{ item.desc }}</text>
            </view>
          </view>
        </view>
      </view>

      <view class="cta-row">
        <view class="secondary-button" @tap="goMall">继续逛逛</view>
        <view class="primary-button" @tap="viewOrders">查看订单</view>
      </view>
    </view>
  </view>
</template>

<script>
import { getOrderDetail } from '@/api/mall'
import { ORDER_STATUS_TEXT } from '@/utils/orderStatus'

export default {
  data() {
    return {
      orderId: '',
      order: {},
      nextSteps: [
        { title: '保存取件码', desc: '订单详情页会持续展示取件码，不必担心找不到。' },
        { title: '到自提门店', desc: '前往下单时选择的自提门店，向门店出示取件码。' },
        { title: '完成自提', desc: '门店核销成功后即可当场领取商品。' }
      ]
    }
  },
  computed: {
    statusText() {
      return ORDER_STATUS_TEXT[this.order.orderStatus] || '待自提'
    },
    mainItemName() {
      const items = this.order.items || []
      if (!items.length) return '—'
      return items.length > 1 ? `${items[0].productName} 等 ${items.length} 件` : items[0].productName
    },
    totalQuantity() {
      const items = this.order.items || []
      return items.reduce((sum, it) => sum + (it.quantity || 0), 0)
    }
  },
  onLoad(options) {
    this.orderId = options.orderId
    this.loadOrder()
  },
  methods: {
    loadOrder() {
      getOrderDetail(this.orderId)
        .then((data) => {
          this.order = data || {}
        })
        .catch(() => {})
    },
    viewOrders() {
      uni.navigateTo({ url: `/packageProfile/order-detail/order-detail?id=${this.orderId}` })
    },
    goMall() {
      uni.reLaunch({ url: '/packageMall/main/main' })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/mixins.scss';
@import '@/styles/subpage.scss';

.success-hero {
  min-height: 260rpx;
  padding-right: 180rpx;
}

.success-mark {
  position: absolute;
  right: 40rpx;
  top: 34rpx;
  width: 112rpx;
  height: 112rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 18rpx 40rpx rgba(54, 77, 64, 0.08);
}

.success-mark-ring {
  position: absolute;
  inset: 10rpx;
  border-radius: 50%;
  border: 2rpx solid rgba(100, 140, 118, 0.2);
  animation: lfPulseSoft 4.8s ease-in-out infinite;
}

.success-mark-check {
  position: relative;
  z-index: 2;
  font-size: 42rpx;
  font-weight: 700;
  color: $brand-primary-deep;
}

.next-item {
  display: flex;
  align-items: flex-start;
  padding: 18rpx 0;
  border-bottom: 1rpx solid rgba(100, 140, 118, 0.08);
}

.next-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.next-index {
  width: 52rpx;
  height: 52rpx;
  margin-right: 18rpx;
  flex-shrink: 0;
  border-radius: 18rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  font-weight: 700;
  color: $brand-primary-deep;
  background: rgba(210, 191, 156, 0.14);
}

.next-copy {
  flex: 1;
}

.next-title,
.next-desc {
  display: block;
}

.next-title {
  font-size: 28rpx;
  font-weight: 600;
  color: $text-primary;
}

.next-desc {
  margin-top: 10rpx;
  font-size: 23rpx;
  line-height: 1.8;
  color: $text-secondary;
}
</style>