antissoft / lvqianmeiye_ERP

  <template>
    <view class="page-shell pickup-code-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="goBack">‹</view>
          <view class="subpage-title-wrap">
            <text class="subpage-title">核销码</text>
            <text class="subpage-subtitle">到店出示核销码，任意门店核销后即可完成自提</text>
          </view>
        </view>
  
        <view class="subpage-hero glass-card">

          <text class="hero-kicker">待自提</text>
          <text class="hero-title">门店自提取件码</text>
          <text class="hero-desc">订单编号 {{ info.orderNo }} · {{ info.storeName }}</text>

        </view>
  
        <lf-pickup-code

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

        />
  

        <view class="subpage-card">
          <view class="section-head">
            <text class="section-title">核销信息</text>
            <text class="section-link">门店自提</text>
          </view>
          <view class="info-list">
            <view class="info-row">

              <text class="info-label">自提门店</text>
              <text class="info-value">{{ info.storeName || '—' }}</text>

            </view>
            <view class="info-row">
              <text class="info-label">核销方式</text>

              <text class="info-value">到店出示取件码核销</text>

            </view>
            <view class="info-row">

              <text class="info-label">取件码</text>
              <text class="info-value">{{ info.pickupCode }}</text>

            </view>
          </view>
        </view>
  
        <view class="cta-row">

          <view class="secondary-button" @tap="copyCode">复制取件码</view>

          <view class="primary-button" @tap="goOrderDetail">返回订单</view>
        </view>
      </view>
    </view>
  </template>
  
  <script>

  import { getPickupCode } from '@/api/mall'

  
  export default {
    data() {
      return {

        orderId: '',
        info: {}

      }
    },
    onLoad(options) {

      this.orderId = options.orderId || options.id || ''
      this.loadCode()

    },
    methods: {

      loadCode() {
        getPickupCode(this.orderId)
          .then((data) => {
            this.info = data || {}
          })
          .catch(() => {})
      },
      copyCode() {
        if (!this.info.pickupCode) return
        uni.setClipboardData({
          data: this.info.pickupCode,
          success: () => uni.showToast({ title: '取件码已复制', icon: 'none' })
        })

      },
      goBack() {
        uni.navigateBack({ fail: () => this.goOrderDetail() })
      },
      goOrderDetail() {

        uni.redirectTo({ url: `/packageProfile/order-detail/order-detail?id=${this.orderId}` })

      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  @import '@/styles/mixins.scss';
  @import '@/styles/subpage.scss';
  
  .product-card {
    display: flex;
    padding: 28rpx;
    margin-bottom: 24rpx;
  }
  
  .product-art {
    width: 180rpx;
    height: 180rpx;
    border-radius: 28rpx;
    flex-shrink: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(241, 246, 241, 0.96);
    border: 1rpx solid rgba(120, 146, 121, 0.14);
    box-shadow: inset 0 1rpx 0 rgba(255, 255, 255, 0.65);
    overflow: hidden;
  }
  
  .product-art-ring {
    width: 96rpx;
    height: 96rpx;
    border-radius: 50%;
    border: 1rpx solid rgba(120, 146, 121, 0.18);
    background: rgba(255, 255, 255, 0.45);
    animation: lfPulseSoft 5.2s ease-in-out infinite;
  }
  
  .product-art-label {
    position: absolute;
    font-size: 24rpx;
    letter-spacing: 4rpx;
    color: $brand-primary-deep;
    font-weight: 600;
  }
  
  .product-art::before {
    content: '';
    position: absolute;
    right: -30rpx;
    top: -30rpx;
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(210, 191, 156, 0.22), rgba(210, 191, 156, 0));
    animation: lfFloatSoft 9.8s ease-in-out infinite;
  }
  
  .product-copy {
    flex: 1;
    margin-left: 22rpx;
  }
  
  .product-name,
  .product-spec,
  .product-qty,
  .product-amount {
    display: block;
  }
  
  .product-name {
    font-size: 30rpx;
    line-height: 1.5;
    font-weight: 700;
  }
  
  .product-spec,
  .product-qty {
    margin-top: 14rpx;
    font-size: 24rpx;
    line-height: 1.7;
    color: $text-secondary;
  }
  
  .product-amount {
    margin-top: 18rpx;
    font-size: 34rpx;
    font-weight: 700;
    color: $brand-primary-deep;
  }
  </style>