CosScene/clients/pages/event/mine.vue

<script setup>
import { ref } from "vue";
import { onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
import { getMyEvents, getMyRegistrations } from "@/api/event";

const tab = ref("created");
const createdList = ref([]);
const joinedList = ref([]);
const createdPage = ref(1);
const joinedPage = ref(1);
const createdTotal = ref(0);
const joinedTotal = ref(0);
const createdFinished = ref(false);
const joinedFinished = ref(false);
const loading = ref(false);

const statusLabels = {
  upcoming: "即将开始",
  ongoing: "进行中",
  ended: "已结束",
  cancelled: "已取消",
};
const statusColors = {
  upcoming: "#6366f1",
  ongoing: "#22c55e",
  ended: "#9ca3af",
  cancelled: "#ef4444",
};
const auditLabels = {
  pending: "待审核",
  approved: "已通过",
  rejected: "已驳回",
};
const auditColors = {
  pending: "#f59e0b",
  approved: "#22c55e",
  rejected: "#ef4444",
};

async function fetchCreated(reset = false) {
  if (loading.value) return;
  if (reset) {
    createdPage.value = 1;
    createdFinished.value = false;
    createdList.value = [];
  }
  loading.value = true;
  try {
    const res = await getMyEvents({ page: createdPage.value, page_size: 20 });
    const items = res.items || [];
    if (reset) createdList.value = items;
    else createdList.value.push(...items);
    createdTotal.value = res.total || 0;
    if (createdList.value.length >= createdTotal.value) createdFinished.value = true;
    createdPage.value++;
  } catch (e) {
    console.error(e);
  } finally {
    loading.value = false;
  }
}

async function fetchJoined(reset = false) {
  if (loading.value) return;
  if (reset) {
    joinedPage.value = 1;
    joinedFinished.value = false;
    joinedList.value = [];
  }
  loading.value = true;
  try {
    const res = await getMyRegistrations({ page: joinedPage.value, page_size: 20 });
    const items = res.items || [];
    if (reset) joinedList.value = items;
    else joinedList.value.push(...items);
    joinedTotal.value = res.total || 0;
    if (joinedList.value.length >= joinedTotal.value) joinedFinished.value = true;
    joinedPage.value++;
  } catch (e) {
    console.error(e);
  } finally {
    loading.value = false;
  }
}

function switchTab(t) {
  tab.value = t;
  if (t === "created" && createdList.value.length === 0) fetchCreated(true);
  if (t === "joined" && joinedList.value.length === 0) fetchJoined(true);
}

function goDetail(id) {
  uni.navigateTo({ url: `/pages/event/detail?id=${id}` });
}

function formatDate(d) {
  if (!d) return "";
  const dt = new Date(d);
  return `${dt.getMonth() + 1}月${dt.getDate()}日`;
}

onPullDownRefresh(async () => {
  if (tab.value === "created") await fetchCreated(true);
  else await fetchJoined(true);
  uni.stopPullDownRefresh();
});

onReachBottom(() => {
  if (tab.value === "created" && !createdFinished.value) fetchCreated();
  if (tab.value === "joined" && !joinedFinished.value) fetchJoined();
});

fetchCreated(true);
</script>

<template>
  <view class="mine-event-page">
    <view class="tabs">
      <view class="tab-item" :class="{ active: tab === 'created' }" @tap="switchTab('created')">
        我发布的
      </view>
      <view class="tab-item" :class="{ active: tab === 'joined' }" @tap="switchTab('joined')">
        我参加的
      </view>
    </view>

    <view v-if="tab === 'created'" class="card-list">
      <view
        v-for="item in createdList"
        :key="item.id"
        class="ev-card"
        @tap="goDetail(item.id)"
      >
        <view class="card-title-row">
          <text class="card-title">{{ item.title }}</text>
          <view class="dual-tags">
            <view class="mini-tag" :style="{ background: auditColors[item.audit_status] || '#9ca3af' }">
              {{ auditLabels[item.audit_status] || item.audit_status }}
            </view>
            <view class="mini-tag" :style="{ background: statusColors[item.status] || '#9ca3af' }">
              {{ statusLabels[item.status] || item.status }}
            </view>
          </view>
        </view>
        <view class="card-sub">
          <text>{{ item.city }}</text>
          <text v-if="item.location_name"> · {{ item.location_name }}</text>
        </view>
        <view class="card-bottom">
          <text class="card-date">{{ formatDate(item.start_time) }}</text>
          <text class="reg-count">{{ item.registration_count }}人报名</text>
        </view>
      </view>
      <view v-if="loading" class="loading-tip">加载中...</view>
      <view v-else-if="createdFinished && createdList.length" class="loading-tip">没有更多了</view>
      <view v-else-if="!loading && !createdList.length" class="empty-tip">
        <uni-icons type="info" size="40" color="#d1d5db" />
        <text>还没有发布活动</text>
      </view>
    </view>

    <view v-if="tab === 'joined'" class="card-list">
      <view
        v-for="reg in joinedList"
        :key="reg.id"
        class="ev-card"
        @tap="goDetail(reg.event_id)"
      >
        <view class="card-title-row">
          <text class="card-title">活动 #{{ reg.event_id }}</text>
          <view class="mini-tag" style="background: #22c55e">{{ reg.status === 'registered' ? '已报名' : reg.status }}</view>
        </view>
        <view class="card-bottom">
          <text class="card-date">{{ formatDate(reg.created_at) }}</text>
        </view>
      </view>
      <view v-if="loading" class="loading-tip">加载中...</view>
      <view v-else-if="joinedFinished && joinedList.length" class="loading-tip">没有更多了</view>
      <view v-else-if="!loading && !joinedList.length" class="empty-tip">
        <uni-icons type="info" size="40" color="#d1d5db" />
        <text>还没有参加活动</text>
      </view>
    </view>
  </view>
</template>

<style scoped>
.mine-event-page {
  min-height: 100vh;
  background: #f5f6fa;
}
.tabs {
  display: flex;
  background: #fff;
  border-bottom: 1rpx solid #e5e7eb;
}
.tab-item {
  flex: 1;
  text-align: center;
  padding: 24rpx 0;
  font-size: 28rpx;
  color: #6b7280;
  position: relative;
}
.tab-item.active {
  color: #6366f1;
  font-weight: 600;
}
.tab-item.active::after {
  content: "";
  position: absolute;
  left: 30%;
  right: 30%;
  bottom: 0;
  height: 4rpx;
  background: #6366f1;
  border-radius: 4rpx;
}

.card-list {
  padding: 0 20rpx;
}
.ev-card {
  background: #fff;
  border-radius: 20rpx;
  padding: 24rpx 28rpx;
  margin-top: 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
}
.card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #1e1e2e;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dual-tags {
  display: flex;
  gap: 8rpx;
  flex-shrink: 0;
  margin-left: 12rpx;
}
.mini-tag {
  font-size: 20rpx;
  color: #fff;
  padding: 2rpx 12rpx;
  border-radius: 16rpx;
}
.card-sub {
  font-size: 24rpx;
  color: #6b7280;
  margin-top: 10rpx;
}
.card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12rpx;
}
.card-date {
  font-size: 22rpx;
  color: #9ca3af;
}
.reg-count {
  font-size: 22rpx;
  color: #6366f1;
}

.loading-tip {
  text-align: center;
  font-size: 26rpx;
  color: #9ca3af;
  padding: 30rpx 0;
}
.empty-tip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16rpx;
  padding: 120rpx 0;
  font-size: 28rpx;
  color: #9ca3af;
}
</style>