antissoft / lvqianmeiye_ERP

  <template>
    <view class="page-shell order-list-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>
  
        <scroll-view class="status-scroll" scroll-x>
          <view class="status-row">

            <view v-for="item in statuses" :key="item.key" class="status-chip" :class="{ active: activeStatus === item.key }" @tap="selectStatus(item.key)">

              {{ item.label }}
            </view>
          </view>
        </scroll-view>
  

        <view v-for="item in orders" :key="item.id" class="order-card glass-card" @tap="goDetail(item)">

          <view class="order-top">

            <text class="order-status">{{ statusText(item.orderStatus) }}</text>
            <text class="order-time">{{ formatTime(item.createTime) }}</text>

          </view>
          <view class="order-main">

            <image v-if="firstImg(item)" class="order-thumb" :src="firstImg(item)" mode="aspectFill" />
            <view v-else class="order-art">

              <view class="order-art-ring"></view>

              <text class="order-art-label">{{ shortLabel(firstName(item)) }}</text>

            </view>
            <view class="order-copy">

              <text class="order-name">{{ firstName(item) }}</text>
              <text class="order-sku">{{ itemsSummary(item) }}</text>
              <text class="order-store">{{ item.storeName }} · 门店自提</text>
              <text class="order-amount">¥{{ item.payAmount }}</text>

            </view>
          </view>
        </view>

  
        <view v-if="!loading && !orders.length" class="empty-tip">暂无相关订单</view>
        <view v-if="loading" class="empty-tip">正在加载…</view>

      </view>
    </view>
  </template>
  
  <script>

  import { getMyOrders } from '@/api/mall'
  import { orderStatusText } from '@/utils/orderStatus'

  
  export default {
    data() {
      return {

        orders: [],
        activeStatus: 0,

        statuses: [

          { key: 0, label: '全部' },
          { key: 1, label: '待付款' },
          { key: 2, label: '待自提' },
          { key: 3, label: '已完成' },
          { key: 4, label: '已取消' }
        ],
        currentPage: 1,
        pageSize: 10,
        total: 0,
        loading: false,
        finished: false

      }
    },
    onLoad(options) {

      if (options.status !== undefined && options.status !== '') {
        this.activeStatus = Number(options.status) || 0

      }

      this.resetAndLoad()

    },

    onReachBottom() {
      this.loadList()

    },

    methods: {

      resetAndLoad() {
        this.currentPage = 1
        this.orders = []
        this.total = 0
        this.finished = false
        this.loadList()
      },
      loadList() {
        if (this.loading || this.finished) return
        this.loading = true
        const params = { currentPage: this.currentPage, pageSize: this.pageSize }
        if (this.activeStatus) params.OrderStatus = this.activeStatus
        getMyOrders(params)
          .then((res) => {
            const list = (res && res.list) || []
            this.orders = this.orders.concat(list)
            const pagination = (res && res.pagination) || {}
            this.total = pagination.total || this.orders.length
            if (list.length < this.pageSize || this.orders.length >= this.total) {
              this.finished = true
            } else {
              this.currentPage += 1
            }
            this.loading = false
          })
          .catch(() => {
            this.loading = false
          })
      },
      selectStatus(key) {
        if (this.activeStatus === key) return
        this.activeStatus = key
        this.resetAndLoad()
      },
      statusText(status) {
        return orderStatusText(status)
      },
      formatTime(time) {
        return time ? String(time).replace('T', ' ').slice(0, 16) : ''
      },
      firstItem(item) {
        const items = item.items || []
        return items[0] || {}
      },
      firstName(item) {
        return this.firstItem(item).productName || '绿纤商品'
      },
      firstImg(item) {
        return this.firstItem(item).productImg || ''
      },
      itemsSummary(item) {
        const items = item.items || []
        if (!items.length) return ''
        const first = items[0]
        const qty = items.reduce((sum, it) => sum + (it.quantity || 0), 0)
        const skuText = first.skuName ? `${first.skuName} · ` : ''
        return items.length > 1 ? `${skuText}共 ${qty} 件` : `${skuText}× ${first.quantity}`
      },

      shortLabel(title) {
        return String(title || '绿纤').replace(/\s+/g, '').slice(0, 2)
      },
      goBack() {
        uni.navigateBack({ fail: () => uni.redirectTo({ url: '/pages/profile/profile' }) })
      },
      goDetail(item) {
        uni.navigateTo({ url: `/packageProfile/order-detail/order-detail?id=${item.id}` })
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  @import '@/styles/mixins.scss';
  @import '@/styles/subpage.scss';
  
  .status-scroll {
    white-space: nowrap;
    margin-bottom: 24rpx;
  }
  
  .status-row {
    display: inline-flex;
    padding-bottom: 6rpx;
  }
  
  .status-chip {
    @include selection-chip;
    min-width: 138rpx;
    padding: 22rpx 28rpx;
    margin-right: 16rpx;
    text-align: center;
    font-size: 24rpx;
    color: $text-secondary;

    transition: transform 240ms ease, box-shadow 240ms ease, background 240ms ease, color 240ms ease;
  }
  
  .status-chip:active {
    transform: translateY(-2rpx) scale(0.98);

  }
  
  .status-chip.active {
    @include selection-chip-active;
  }
  
  .order-card {
    padding: 30rpx;
    margin-bottom: 22rpx;

    transition: transform 340ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 340ms ease;
    animation: lfRevealUp 760ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  
  .order-card:nth-of-type(1) { animation-delay: 0.08s; }
  .order-card:nth-of-type(2) { animation-delay: 0.16s; }
  .order-card:nth-of-type(3) { animation-delay: 0.24s; }
  .order-card:nth-of-type(4) { animation-delay: 0.32s; }
  
  .order-card:active {
    transform: translateY(-4rpx);

  }
  
  .order-top,
  .order-main {
    display: flex;
  }
  
  .order-top {
    justify-content: space-between;
    align-items: center;
  }
  
  .order-status {
    @include chip-soft;
  }
  
  .order-time {
    font-size: 22rpx;
    color: $text-tertiary;
  }
  
  .order-main {
    margin-top: 22rpx;
  }
  

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

    animation: lfPulseSoft 5.2s ease-in-out infinite;

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

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

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

  .order-name,
  .order-sku,
  .order-store,
  .order-amount {

    display: block;

    margin-top: 14rpx;
  }
  
  .order-name {
    margin-top: 0;

    font-size: 30rpx;
    line-height: 1.5;
    font-weight: 700;
  }
  
  .order-sku,

  .order-store {

    font-size: 24rpx;
    color: $text-secondary;
  }
  
  .order-amount {
    font-size: 34rpx;
    color: $brand-primary-deep;
    font-weight: 700;
  }
  </style>