ykt-team-wxapp/pages/rate/rate-list.vue

<template>
  <full-page @reachBottom="getMore">
    <template #header>
      <scroll-view scroll-x class="bg-white whitespace-nowrap px-15 py-10 sticky top-0 z-10 w-full"
        :show-scrollbar="false">
        <view v-for="(tab, index) in tabs" :key="index"
          class="inline-block px-15 py-5 mr-10 text-sm rounded-full border transition-colors" :class="[
            activeTab === tab.value
              ? 'bg-orange-100 text-orange-500 border-orange-500'
              : 'bg-white text-gray-600 border-gray-200'
          ]" @click="selectTab(tab.value)">
          {{ tab.name }}
        </view>
      </scroll-view>
    </template>
    <view class="bg-gray-100 min-h-screen">
      <!-- Survey List -->
      <view v-if="loading && list.length === 0" class="loading-container">
        <uni-icons type="spinner-cycle" size="30" color="#999" />
        <text class="loading-text">加载中...</text>
      </view>

      <view v-else-if="!loading && list.length === 0" class="empty-container">
        <empty-data text="暂无评价" />
      </view>

      <view v-else class="p-15">
        <view v-for="item in list" :key="item._id" class="bg-white rounded-lg p-15 mb-15 shadow-sm"
          @click="goToDetail(item)">
          <!-- Header -->
          <view class="flex items-start justify-between mb-10">
            <view class="flex items-start flex-1 mr-10 relative">
              <view class="text-xs text-green-600 border border-green-600 px-5 rounded mr-5 flex-shrink-0 mt-1 tag-box">
                服务评价
              </view>
              <view class="text-base font-bold text-gray-800 leading-normal line-clamp-2">
                请您对我的今日服务做出评价
              </view>
            </view>

            <view class="flex items-center flex-shrink-0 ml-2">
              <text v-if="item.rate" class="text-sm mr-2 text-gray-400">查看</text>
              <text v-else class="text-sm mr-2 text-danger">未评价</text>
              <uni-icons type="right" size="14" color="#9ca3af"></uni-icons>
            </view>
          </view>

          <view class="text-sm text-gray-600 mb-5 flex items-start">
            <text class="text-gray-400 mr-2 field-label">服务人员:</text>
            <text>{{ item.userName || '-' }}</text>
          </view>

          <view class="text-sm text-gray-600 mb-10 pb-10 border-b border-gray-100 flex items-start">
            <text class="text-gray-400 mr-2 field-label">团队:</text>
            <text>{{ item.teamName || '-' }}</text>
          </view>

          <view class="flex items-center justify-between">
            <view class="text-sm text-gray-400">
              服务时间: {{ item.time || '-' }}
            </view>
            <view class="text-sm text-gray-400">
              人员: {{ item.customerName || '-' }}
            </view>
          </view>
        </view>

        <view v-if="loading && list.length > 0" class="loading-more">
          <uni-icons type="spinner-cycle" size="20" color="#999" />
          <text>加载中...</text>
        </view>

        <view v-if="!hasMore" class="no-more">
          没有更多了
        </view>
      </view>
    </view>
  </full-page>

</template>

<script setup>
import { ref } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { storeToRefs } from "pinia";
import dayjs from "dayjs";
import api from "@/utils/api.js";
import usePageList from '@/hooks/usePageList';

import useAccountStore from "@/store/account.js";
import EmptyData from "@/components/empty-data.vue";
import FullPage from '@/components/full-page.vue';

const { openid } = storeToRefs(useAccountStore());

const tabs = ref([{ name: "全部", value: "" }]);
const activeTab = ref("");
const corpId = ref('')
const teamId = ref('')


const inited = ref(false);
const { list, page, pages, pageSize, total, loading, hasMore, changePage } = usePageList(getList)

const selectTab = async (memberId) => {
  if (activeTab.value === memberId) return;
  activeTab.value = memberId;
  changePage(1)
};

const loadCustomers = async () => {
  const miniAppId = openid.value || uni.getStorageSync("openid");
  if (!miniAppId) return;
  try {
    const res = await api("getMiniAppCustomers", { miniAppId, corpId: corpId.value });
    if (res && res.success) {
      const list = Array.isArray(res.data) ? res.data : [];
      tabs.value = [
        { name: "全部", value: "" },
        ...list.map((c) => ({ name: c.name || "未命名", value: c._id })),
      ];
    } else {
      uni.showToast({ title: res?.message || "获取档案失败", icon: "none" });
    }
  } catch (err) {
    console.error("loadCustomers failed:", err);
    uni.showToast({ title: "获取档案失败", icon: "none" });
  }
};

async function getList() {
  if (loading.value) return;
  const customerIds = activeTab.value ? [activeTab.value] : tabs.value.map(i => i.value);
  const res = await api('searchRateList', {
    corpId: corpId.value,
    page: page.value,
    pageSize: pageSize.value,
    customerIds,
    teamId: teamId.value
  })
  const arr = res && Array.isArray(res.list) ? res.list.map(i => ({
    ...i,
    time: i.createTime ? dayjs(i.createTime).format('YYYY-MM-DD HH:mm') : '-',
  })) : [];
  list.value = page.value === 1 ? arr : [...list.value, ...arr];
  total.value = res && typeof res.total === 'number' ? res.total : 0;
  pages.value = res && typeof res.pages === 'number' ? res.pages : 0;
};

function goToDetail(item) {
  uni.navigateTo({
    url: `/pages/rate/rate-detail?id=${item._id}&corpId=${item.corpId}`
  })
}

function getMore() {
  if (hasMore.value && !loading.value) {
    changePage(page.value + 1)
  }
}

onLoad(opts => {
  corpId.value = opts.corpId
  teamId.value = opts.teamId
})

onShow(async () => {
  if (!inited.value) {
    await loadCustomers();
    inited.value = true
  }
  await changePage(1)
});

</script>

<style scoped>
.min-h-screen {
  min-height: 100vh;
}

.bg-gray-100 {
  background-color: #f7f8fa;
}

.bg-white {
  background-color: #ffffff;
}

.p-15 {
  padding: 30rpx;
}

.px-15 {
  padding-left: 30rpx;
  padding-right: 30rpx;
}

.py-10 {
  padding-top: 20rpx;
  padding-bottom: 20rpx;
}

.py-5 {
  padding-top: 10rpx;
  padding-bottom: 10rpx;
}

.px-5 {
  padding-left: 10rpx;
  padding-right: 10rpx;
}

.mr-10 {
  margin-right: 20rpx;
}

.mr-5 {
  margin-right: 10rpx;
}

.ml-2 {
  margin-left: 10rpx;
}

.mr-2 {
  margin-right: 10rpx;
}

.mb-15 {
  margin-bottom: 30rpx;
}

.mb-10 {
  margin-bottom: 20rpx;
}

.mb-5 {
  margin-bottom: 10rpx;
}

.mt-1 {
  margin-top: 6rpx;
}

.pb-10 {
  padding-bottom: 20rpx;
}

.flex {
  display: flex;
}

.items-start {
  align-items: flex-start;
}

.items-center {
  align-items: center;
}

.justify-between {
  justify-content: space-between;
}

.flex-1 {
  flex: 1;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.relative {
  position: relative;
}

.border {
  border-width: 1px;
  border-style: solid;
}

.border-b {
  border-bottom-width: 1px;
  border-bottom-style: solid;
}

.rounded-full {
  border-radius: 9999px;
}

.rounded {
  border-radius: 8rpx;
}

.rounded-lg {
  border-radius: 12rpx;
}

.shadow-sm {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.text-xs {
  font-size: 22rpx;
}

.text-sm {
  font-size: 28rpx;
}

.text-base {
  font-size: 32rpx;
}

.font-bold {
  font-weight: 600;
}

.leading-normal {
  line-height: 1.4;
}

/* Colors - Adjusting to match image roughly */
.text-orange-500 {
  color: #f29e38;
}

.bg-orange-100 {
  background-color: #fff8eb;
}

.border-orange-500 {
  border-color: #f29e38;
}

.text-gray-600 {
  color: #333333;
}

.text-gray-500 {
  color: #999999;
}

.text-gray-400 {
  color: #999999;
}

.text-gray-800 {
  color: #1a1a1a;
}

.border-gray-200 {
  border-color: #e5e5e5;
}

.border-gray-100 {
  border-color: #f5f5f5;
}

.text-green-600 {
  color: #4b8d5f;
}

.border-green-600 {
  border-color: #4b8d5f;
}

.text-red-500 {
  color: #e04a4a;
}

.sticky {
  position: sticky;
}

.top-0 {
  top: 0;
}

.z-10 {
  z-index: 10;
}

.w-full {
  width: 100%;
}

.whitespace-nowrap {
  white-space: nowrap;
}

.inline-block {
  display: inline-block;
}

.tag-box {
  border-radius: 4rpx;
  line-height: 1.2;
}

.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  word-break: break-all;
}

.field-label {
  flex-shrink: 0;
  white-space: nowrap;
}

.loading-container,
.empty-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
}

.loading-text {
  margin-top: 20rpx;
  font-size: 28rpx;
  color: #999;
}

.loading-more,
.no-more {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30rpx 0;
  font-size: 24rpx;
  color: #999;
  gap: 10rpx;
}
</style>