antissoft / lvqianmeiye_ERP

<template>
  <view class="page-shell order-detail-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">{{ statusText }}</text>
        <text class="hero-title">{{ mainItemName }}</text>
        <text class="hero-desc">订单编号 {{ order.orderNo }}</text>
      </view>

      <view v-for="item in items" :key="item.id" class="order-item-card glass-card">
        <image v-if="item.productImg" class="order-thumb" :src="item.productImg" mode="aspectFill" />
        <view v-else class="order-art">
          <view class="order-art-ring"></view>
          <text class="order-art-label">{{ shortLabel(item.productName) }}</text>
        </view>
        <view class="order-copy">
          <text class="order-name">{{ item.productName }}</text>
          <text class="order-sku">{{ item.skuName || '默认规格' }} × {{ item.quantity }}</text>
          <text class="order-amount">¥{{ item.amount }}</text>
        </view>
      </view>

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

      <view v-else-if="order.orderStatus === 1" class="subpage-card wait-card">
        <text class="wait-title">支付完成后自动生成取件码</text>
        <text class="wait-desc">当前订单尚未完成支付，支付成功后将自动生成取件码与自提信息。</text>
      </view>

      <lf-pickup-complete
        v-else-if="order.orderStatus === 3"
        title="该订单已完成核销"
        desc="门店已完成核销与自提，本页不再展示取件码，可在下方查看核销时间与订单状态。"
        :status="statusText"
        :time="order.pickupTime"
      />

      <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">{{ order.orderNo }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">自提门店</text>
            <text class="info-value">{{ order.storeName || '—' }}</text>
          </view>
          <view v-if="order.pickupCode" class="info-row">
            <text class="info-label">取件码</text>
            <text class="info-value">{{ order.pickupCode }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">下单时间</text>
            <text class="info-value">{{ formatTime(order.createTime) }}</text>
          </view>
          <view v-if="order.payTime" class="info-row">
            <text class="info-label">支付时间</text>
            <text class="info-value">{{ formatTime(order.payTime) }}</text>
          </view>
          <view v-if="order.pickupTime" class="info-row">
            <text class="info-label">核销时间</text>
            <text class="info-value">{{ formatTime(order.pickupTime) }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">实付金额</text>
            <text class="info-value">¥{{ order.payAmount }}</text>
          </view>
          <view v-if="order.remark" class="info-row">
            <text class="info-label">订单备注</text>
            <text class="info-value">{{ order.remark }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">订单状态</text>
            <text class="info-value">{{ statusText }}</text>
          </view>
        </view>
      </view>

      <view class="cta-row">
        <view class="secondary-button" @tap="secondaryAction">{{ secondaryLabel }}</view>
        <view class="primary-button" @tap="primaryAction">{{ primaryLabel }}</view>
      </view>
    </view>
  </view>
</template>

<script>
import { getOrderDetail, cancelOrder, prepay, mockPay } from '@/api/mall'
import { orderStatusText } from '@/utils/orderStatus'

export default {
  data() {
    return {
      orderId: '',
      order: {}
    }
  },
  computed: {
    items() {
      return this.order.items || []
    },
    statusText() {
      return orderStatusText(this.order.orderStatus)
    },
    mainItemName() {
      const items = this.items
      if (!items.length) return '绿纤商品'
      return items.length > 1 ? `${items[0].productName} 等 ${items.length} 件` : items[0].productName
    },
    primaryLabel() {
      switch (this.order.orderStatus) {
        case 1:
          return '立即支付'
        case 2:
        case 3:
          return '继续选购'
        default:
          return '返回订单'
      }
    },
    secondaryLabel() {
      if (this.order.orderStatus === 1) return '取消订单'
      if (this.order.orderStatus === 2 && this.order.pickupCode) return '复制取件码'
      return '联系客服'
    }
  },
  onLoad(options) {
    this.orderId = options.id
    this.loadOrder()
  },
  onShow() {
    if (this.orderId) this.loadOrder()
  },
  methods: {
    loadOrder() {
      getOrderDetail(this.orderId)
        .then((data) => {
          this.order = data || {}
        })
        .catch(() => {})
    },
    formatTime(time) {
      return time ? String(time).replace('T', ' ').slice(0, 16) : ''
    },
    shortLabel(title) {
      return String(title || '绿纤').replace(/\s+/g, '').slice(0, 2)
    },
    goBack() {
      uni.navigateBack({ fail: () => uni.redirectTo({ url: '/packageProfile/order-list/order-list' }) })
    },
    primaryAction() {
      if (this.order.orderStatus === 1) {
        this.payOrder()
        return
      }
      if (this.order.orderStatus === 2 || this.order.orderStatus === 3) {
        uni.reLaunch({ url: '/packageMall/main/main' })
        return
      }
      uni.redirectTo({ url: '/packageProfile/order-list/order-list' })
    },
    secondaryAction() {
      if (this.order.orderStatus === 1) {
        this.doCancel()
        return
      }
      if (this.order.orderStatus === 2 && this.order.pickupCode) {
        uni.setClipboardData({
          data: this.order.pickupCode,
          success: () => uni.showToast({ title: '取件码已复制', icon: 'none' })
        })
        return
      }
      uni.showToast({ title: '已为您接入专属客服', icon: 'none' })
    },
    doCancel() {
      uni.showModal({
        title: '取消订单',
        content: '确认取消该订单吗？',
        success: (res) => {
          if (!res.confirm) return
          cancelOrder(this.orderId)
            .then(() => {
              uni.showToast({ title: '订单已取消', icon: 'none' })
              this.loadOrder()
            })
            .catch(() => {})
        }
      })
    },
    payOrder() {
      uni.showLoading({ title: '支付中', mask: true })
      prepay({ OrderId: this.orderId })
        .then((pay) => {
          if (pay && pay.mock === true) {
            return mockPay({ OrderId: this.orderId }).then(() => {
              uni.hideLoading()
              uni.showToast({ title: '支付成功', icon: 'none' })
              this.loadOrder()
            })
          }
          const params = (pay && pay.prepayParams) || {}
          uni.hideLoading()
          uni.requestPayment({
            provider: 'wxpay',
            timeStamp: params.timeStamp,
            nonceStr: params.nonceStr,
            package: params.package,
            signType: params.signType,
            paySign: params.paySign,
            success: () => {
              // TODO: 真实支付以微信回调 PayNotify 为准，此处刷新订单状态
              this.loadOrder()
            },
            fail: () => uni.showToast({ title: '支付未完成', icon: 'none' })
          })
        })
        .catch(() => {
          uni.hideLoading()
        })
    }
  }
}
</script>

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

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

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

.order-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;
}

.order-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);
}

.order-art-label {
  position: absolute;
  font-size: 24rpx;
  letter-spacing: 4rpx;
  color: $brand-primary-deep;
  font-weight: 600;
}

.order-copy {
  flex: 1;
  margin-left: 20rpx;
}

.order-name,
.order-sku,
.order-amount,
.wait-title,
.wait-desc {
  display: block;
}

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

.order-sku {
  margin-top: 16rpx;
  font-size: 24rpx;
  color: $text-secondary;
}

.order-amount {
  margin-top: 18rpx;
  font-size: 34rpx;
  font-weight: 700;
  color: $brand-primary-deep;
}

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

.wait-title {
  font-size: 30rpx;
  font-weight: 700;
  color: $text-primary;
}

.wait-desc {
  margin-top: 14rpx;
  font-size: 24rpx;
  line-height: 1.8;
  color: $text-secondary;
}
</style>