beauty-miniapp-uni/pages/orders/list.vue

<template>
  <view class="container">
    <view class="card filters">
      <scroll-view class="sc" scroll-x>
        <view class="row">
          <view
            v-for="s in statuses"
            :key="s.value"
            class="chip"
            :class="{ on: s.value === activeStatus }"
            @tap="activeStatus = s.value"
          >
            {{ s.label }}
          </view>
        </view>
      </scroll-view>
    </view>

    <view v-if="list.length === 0" class="card empty">
      <view class="e1">暂无订单</view>
      <view class="e2 muted">从项目页预约或购买后，会在这里展示。</view>
      <view class="btn btn-primary ebtn" @tap="goProjects">去看看项目</view>
    </view>

    <view v-else class="list">
      <view v-for="o in list" :key="o.id" class="card item" @tap="open(o.id)">
        <view class="row between">
          <view class="n">{{ o.projectName }}</view>
          <view
            class="st"
            :class="{
              w: o.status === '待付款',
              g: o.status === '已完成',
              d: o.status === '已取消',
              p: o.status !== '待付款' && o.status !== '已完成' && o.status !== '已取消'
            }"
          >
            {{ o.status }}
          </view>
        </view>
        <view class="row between meta">
          <view class="muted">{{ typeLabel(o.orderType) }}</view>
          <view class="amt">¥{{ o.amount }}</view>
        </view>
        <view class="muted meta2" v-if="o.orderType === 'booking'">
          {{ o.appointmentDate }} {{ o.appointmentSlot }} · {{ o.technicianName }}
        </view>
        <view class="muted meta2" v-else>核销码：{{ o.verifyCode }}</view>
      </view>
    </view>
  </view>
</template>

<script>
import { demoOrders } from '@/common/demoOrders'

export default {
  data() {
    return {
      statuses: [
        { value: 'all', label: '全部' },
        { value: '待付款', label: '待付款' },
        { value: '待核销', label: '待核销' },
        { value: '已完成', label: '已完成' },
        { value: '已取消', label: '已取消' }
      ],
      activeStatus: 'all',
      orders: []
    }
  },
  computed: {
    list() {
      if (this.activeStatus === 'all') return this.orders
      return this.orders.filter((x) => x.status === this.activeStatus)
    }
  },
  onShow() {
    this.orders = demoOrders
  },
  methods: {
    open(id) {
      const o = this.orders.find((x) => x.id === id) || this.orders[0]
      const payload = encodeURIComponent(JSON.stringify(o))
      uni.navigateTo({ url: `/pages/orders/detail?payload=${payload}` })
    },
    goProjects() {
      uni.switchTab({ url: '/pages/projects/list' })
    },
    typeLabel(t) {
      return t === 'booking' ? '预约订单' : '购买卡券'
    }
  }
}
</script>

<style lang="scss" scoped>
.filters {
  padding: 16rpx;
}
.sc {
  white-space: nowrap;
}
.chip {
  padding: 14rpx 18rpx;
  margin-right: 12rpx;
  border-radius: 999rpx;
  font-size: 26rpx;
  background: rgba(17, 24, 39, 0.06);
  color: #111827;
  flex: 0 0 auto;
}
.on {
  background: rgba(59, 130, 246, 0.14);
  color: #1d4ed8;
}
.empty {
  margin-top: 18rpx;
  padding: 26rpx;
}
.e1 {
  font-size: 36rpx;
  font-weight: 900;
}
.e2 {
  margin-top: 10rpx;
  font-size: 26rpx;
}
.ebtn {
  margin-top: 18rpx;
}
.list {
  margin-top: 18rpx;
}
.item {
  padding: 22rpx;
  margin-bottom: 18rpx;
}
.n {
  font-size: 32rpx;
  font-weight: 900;
  max-width: 520rpx;
}
.st {
  padding: 10rpx 14rpx;
  border-radius: 999rpx;
  font-size: 24rpx;
  font-weight: 800;
}
.w {
  background: rgba(245, 158, 11, 0.16);
  color: #b45309;
}
.p {
  background: rgba(59, 130, 246, 0.16);
  color: #1d4ed8;
}
.g {
  background: rgba(16, 185, 129, 0.16);
  color: #047857;
}
.d {
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
}
.meta {
  margin-top: 10rpx;
}
.amt {
  font-weight: 900;
}
.meta2 {
  margin-top: 10rpx;
  font-size: 26rpx;
}
</style>