初始化

2026-06-29 10:54:33 +08:00
parent 761cee968e
commit 4983006317
156 changed files with 25687 additions and 0 deletions
@@ -0,0 +1,176 @@
+<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>
+