antissoft / lvqianmeiye_ERP

<template>
  <view class="page-shell order-confirm-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-card pickup-card">
        <view class="pickup-head">
          <view>
            <text class="pickup-kicker">PICKUP ACCESS</text>
            <text class="pickup-main">任意时间 · 任意门店</text>
          </view>
          <text class="pickup-action">二维码核销</text>
        </view>
        <text class="pickup-detail">支付成功后自动生成核销二维码，到任意门店出示即可核销自提，无需提前选择门店。</text>
        <view class="meta-grid pickup-meta">
          <text class="meta-pill">门店自提</text>
          <text class="meta-pill">任意门店可用</text>
          <text class="meta-pill rose">任意时间可核销</text>
        </view>
      </view>

      <view class="product-card glass-card">
        <image class="product-image" :src="product.image" mode="aspectFill" />
        <view class="product-copy">
          <text class="product-name">{{ product.name }}</text>
          <text class="product-spec">{{ product.specs[0] || '默认规格' }} · 1 件</text>
          <text class="product-desc">{{ product.desc }}</text>
          <text class="product-price">¥{{ product.price }}</text>
        </view>
      </view>

      <view class="subpage-card">
        <view class="section-head">
          <text class="section-title">自提说明</text>
          <text class="section-link">购买须知</text>
        </view>
        <view class="flow-list">
          <view v-for="(item, index) in pickupSteps" :key="item.title" class="flow-item">
            <view class="flow-index">{{ index + 1 }}</view>
            <view class="flow-copy">
              <text class="flow-title">{{ item.title }}</text>
              <text class="flow-desc">{{ item.desc }}</text>
            </view>
          </view>
        </view>
      </view>

      <view class="subpage-card">
        <view class="info-list">
          <view class="info-row">
            <text class="info-label">商品金额</text>
            <text class="info-value">¥{{ product.price }}</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">任意门店通用</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 accent">¥{{ product.price }}</text>
          </view>
        </view>
      </view>

      <view class="cta-row">
        <view class="secondary-button" @tap="goBack">返回商品</view>
        <view class="primary-button" @tap="submitOrder">提交并支付</view>
      </view>
    </view>
  </view>
</template>

<script>
import { findProductById } from '@/packageMall/data/products'
import { saveLatestPickupOrder } from '@/packageMall/data/orderFlow'

export default {
  data() {
    return {
      product: findProductById(1),
      pickupSteps: [
        { title: '提交订单', desc: '完成支付后，本单会立即进入门店自提流程。' },
        { title: '生成核销码', desc: '小程序自动生成专属二维码，无需等待发货。' },
        { title: '任意门店核销', desc: '支持任意时间前往任意门店出示二维码并完成核销。' }
      ]
    }
  },
  onLoad(options) {
    this.product = findProductById(options.productId)
  },
  methods: {
    goBack() {
      uni.navigateBack({ fail: () => uni.redirectTo({ url: `/packageMall/product-detail/product-detail?id=${this.product.id}` }) })
    },
    submitOrder() {
      saveLatestPickupOrder({
        orderId: 5001,
        productId: this.product.id,
        createdAt: new Date().toISOString().slice(0, 16).replace('T', ' ')
      })
      uni.navigateTo({ url: `/packageMall/payment-success/payment-success?orderId=5001&productId=${this.product.id}` })
    }
  }
}
</script>

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

.pickup-card {
  margin-bottom: 24rpx;
}

.pickup-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20rpx;
}

.pickup-kicker,
.pickup-main,
.pickup-detail,
.pickup-action,
.flow-title,
.flow-desc {
  display: block;
}

.pickup-kicker {
  font-size: 20rpx;
  letter-spacing: 4rpx;
  color: rgba(143, 118, 86, 0.82);
}

.pickup-main {
  margin-top: 16rpx;
  font-size: 30rpx;
  font-weight: 700;
}

.pickup-action {
  @include chip-soft;
  white-space: nowrap;
}

.pickup-detail {
  margin-top: 14rpx;
  font-size: 24rpx;
  line-height: 1.8;
  color: $text-secondary;
}

.pickup-meta {
  margin-top: 16rpx;
}

.product-card {
  display: flex;
  padding: 28rpx;
  margin-bottom: 24rpx;
}

.product-image {
  width: 180rpx;
  height: 180rpx;
  border-radius: 28rpx;
  flex-shrink: 0;
}

.product-copy {
  flex: 1;
  margin-left: 22rpx;
}

.product-name,
.product-spec,
.product-desc,
.product-price {
  display: block;
}

.product-name {
  font-size: 30rpx;
  line-height: 1.5;
  font-weight: 700;
}

.product-spec,
.product-desc {
  margin-top: 12rpx;
  font-size: 24rpx;
  line-height: 1.7;
  color: $text-secondary;
}

.product-price {
  margin-top: 16rpx;
  font-size: 36rpx;
  font-weight: 700;
  color: $brand-primary-deep;
}

.flow-list {
  margin-top: 6rpx;
}

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

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

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

.flow-copy {
  flex: 1;
}

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

.flow-desc {
  margin-top: 10rpx;
  font-size: 23rpx;
  line-height: 1.8;
  color: $text-secondary;
}

.accent {
  color: $brand-primary-deep;
}
</style>