feat: 服务评价开发

hooks/usePageList.js

@@ -0,0 +1,33 @@
+import { computed, ref, watch } from "vue";
+import useDebounce from '@/utils/useDebounce'
+
+export default function usePageList(callback, options = {}) {
+  const keyword = ref('')
+  const list = ref([])
+  const page = ref(1)
+  const pageSize = ref(options.pageSize || 20)
+  const pages = ref(0);
+  const loading = ref(false)
+  const total = ref(0)
+
+  const hasMore = computed(() => page.value < pages.value)
+
+  const handleKeywordChange = useDebounce(() => {
+    getList()
+  }, options.debounce || 1000)
+
+  function changePage(p) {
+    if (loading.value) return
+    page.value = p
+    getList()
+  }
+
+  function getList() {
+    typeof callback === 'function' && callback()
+  }
+
+  watch(keyword, handleKeywordChange);
+
+  return { total, page, pageSize, keyword, list, pages, changePage, loading, hasMore }
+
+}

pages.json

@@ -36,6 +36,20 @@
         "disableScroll": true
       }
     },
+    {
+      "path": "pages/rate/rate-list",
+      "style": {
+        "navigationBarTitleText": "服务评价",
+        "disableScroll": true
+      }
+    },
+    {
+      "path": "pages/rate/rate-detail",
+      "style": {
+        "navigationBarTitleText": "服务评价",
+        "disableScroll": true
+      }
+    },
     {
       "path": "pages/message/message",
       "style": {

pages/home/consult.vue

@@ -70,7 +70,7 @@ const consultItems = ref([
     id: "rating",
     label: "服务评价",
     icon: "/static/home/service-rating.png",
-    path: "",
+    path: "/pages/rate/rate-list",
   },
 ]);
 

pages/rate/rate-detail.vue

@@ -0,0 +1,251 @@
+<template>
+  <full-page v-if="record">
+    <view class="flex items-center px-15 py-10 border-b">
+      <view>
+        <image class="box-50" :src="record.avatar"></image>
+      </view>
+      <view class="ml-10">
+        <view class="text-base font-semibold leading-normal">
+          {{ record.userName || "" }}
+        </view>
+        <view class="text-sm text-gray">{{ record.job }}</view>
+      </view>
+    </view>
+    <view class="px-15 py-10">
+      <view class="text-sm mb-10">请您对我的本次服务进行评价</view>
+      <view class="flex items-center px-10 py-5 mb-10 border rounded">
+        <view v-for="i in 5" :key="i" class="mr-5 w-star" @click="changeRate(i)">
+          <uni-icons v-if="i <= starCount" type="star-filled" :size="30" color="#FF9900"></uni-icons>
+          <uni-icons v-else type="star" :size="30" color="#FF9900"></uni-icons>
+        </view>
+        <view class="flex-shrink-0 w-star text-sm text-primary whitespace-nowrap">
+          {{ rateText }}
+        </view>
+      </view>
+      <template v-if="enable">
+        <view class="flex flex-wrap text-sm">
+          <view v-for="tag in tags" :key="tag._id"
+            class="py-5 px-10 mr-10 mb-10 max-w-full break-all rounded-full bg-gray border" :class="selectedTag[tag._id]
+              ? 'text-white bg-primary border-primary'
+              : ''
+              " @click="toggle(tag)">
+            {{ tag.text }}
+          </view>
+        </view>
+        <view class="px-10 py-5 border rounded">
+          <textarea v-model="words" :auto-height="true" class="text-sm block w-full min-h-100"
+            placeholder="展开说说您对我本次服务的想法吧……" placeholder-class="text-gray text-sm" :maxlength="1000" />
+          <view class="text-gray text-right">
+            {{ words.length }} / {{ 1000 }}
+          </view>
+        </view>
+      </template>
+      <template v-else>
+        <view v-if="record.tags && record.tags.length" class="flex flex-wrap text-sm">
+          <view v-for="(tag, i) in record.tags" :key="i"
+            class="py-5 px-10 mr-10 mb-10 max-w-full break-all rounded-full text-white bg-primary border-primary border-[1px] border-solid">
+            {{ tag }}
+          </view>
+        </view>
+        <view v-if="record.words && record.words.length"
+          class="px-10 py-5 border border-solid border-gray-100 rounded pointer-events-none">
+          <textarea :value="record.words" :disabled="true" class="text-sm block w-full min-h-[100px]"
+            placeholder-class="text-gray text-sm" :maxlength="1000" />
+        </view>
+      </template>
+      <view class="h-20"></view>
+    </view>
+    <template #footer>
+      <view v-if="enable" class="flex-shrink-0 px-15 py-10 text-center bg-white">
+        <view class="pb-10 text-sm">
+          {{ record.userName ? `您正在对 ${record.userName} 进行匿名评价` : "您正在进行匿名评价" }}
+        </view>
+        <view class="py-10 text-base text-white rounded bg-primary" @click="confirm()">
+          提交
+        </view>
+      </view>
+    </template>
+  </full-page>
+  <view v-else class="h-screen relative">
+    <view v-if="isError" class="empty">
+      <image class="empty__icon" src="/static/empty.svg"></image>
+      <text class="empty__txt">{{ emptyTxt }} {{ record }}</text>
+    </view>
+    <view v-else-if="rated" class="empty text-green-500">
+      <uni-icons type="checkbox-filled" color=" " size="60"></uni-icons>
+      <text class="text-gray text-base block mt-4">评价已完成</text>
+    </view>
+    <view v-else class="empty text-gray">
+      <!-- <view class="animate-spin ease-linear duration-[2500]">
+        <uni-icons type="spinner-cycle animate-spin" color=" " size="50"></uni-icons>
+      </view> -->
+      <text class="text-base block mt-4">评价尚未完成</text>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue';
+import { onLoad } from "@dcloudio/uni-app";
+import api from "@/utils/api.js";
+import { toast } from "@/utils/widget";
+
+import FullPage from '@/components/full-page.vue';
+
+
+// import { submitRateRecord, getRateRecord } from "@/api/knowledgeBase.js";
+
+const RateText = {
+  1: "很不满意",
+  2: "不满意",
+  3: "一般",
+  4: "满意",
+  5: "很满意",
+};
+const RateStar = {
+  1: "oneStar",
+  2: "twoStar",
+  3: "threeStar",
+  4: "fourStar",
+  5: "fiveStar",
+};
+
+const id = ref("");
+const corpId = ref("");
+const isError = ref(true);
+const record = ref(null);
+const enable = ref(false);
+const rateTags = ref([]);
+const rated = ref(false);
+const emptyTxt = ref("正在获取评价信息...");
+const rate = ref(0);
+const words = ref("");
+const selectedTag = ref({});
+const loading = ref(false);
+
+const tags = computed(() => {
+  if (enable.value) {
+    const key = RateStar[rate.value];
+    const group = rateTags.value.find((i) => i.rateStar === key);
+    return group && Array.isArray(group.rateTags) ? group.rateTags : [];
+  }
+  return [];
+});
+
+const starCount = computed(() => {
+  return rate.value % 1 === 0 && rate.value >= 0 && rate.value <= 5
+    ? rate.value
+    : 0;
+})
+
+const emptyStarCount = computed(() => {
+  return 5 - starCount.value;
+});
+
+const rateText = computed(() => {
+  return RateText[starCount.value] || "";
+});
+
+async function confirm() {
+  if (!enable.value) return;
+  if (![1, 2, 3, 4, 5].includes(rate.value)) {
+    toast("请选择评分");
+    return;
+  }
+  const tagsText = tags.value
+    .filter((i) => selectedTag.value[i._id])
+    .map((i) => i.text);
+  loading.value = true;
+  const { message, success } = await api('submitRateRecord', {
+    id: id.value,
+    corpId: corpId.value,
+    rate: rate.value,
+    tags: tagsText,
+    words: words.value,
+  });
+  if (success) {
+    await toast("评价成功");
+    uni.navigateBack();
+  } else {
+    toast(message);
+    loading.value = false;
+  }
+}
+
+async function init() {
+  const res = await api('getRateRecord', {
+    id: id.value,
+    corpId: corpId.value,
+  });
+  if (res && res.success) {
+    enable.value = typeof res.enable == 'boolean' ? res.enable : false;
+    rated.value = typeof res.rated == 'boolean' ? res.rated : false;
+    record.value = res.record;
+    rate.value = res.record && res.record.rate ? res.record.rate : 0;
+    rateTags.value = Array.isArray(res.rateTags) ? res.rateTags : [];
+    if (record.value && record.value.updateTime) {
+      words.value = typeof record.value.words == 'string' ? record.value.words : '';
+    } else if (record.value && Date.now() > record.value.expireTime) {
+      rate.value = 5
+    }
+  }
+}
+
+function changeRate(i) {
+  if (!enable.value) return;
+  rate.value = i;
+  selectedTag.value = {};
+}
+
+function toggle(i) {
+  if (!enable.value) return;
+  selectedTag.value[i._id] = !selectedTag.value[i._id];
+}
+
+onLoad(opts => {
+  corpId.value = opts.corpId;
+  id.value = opts.id;
+  if (id.value && corpId.value) {
+    init();
+  }
+})
+</script>
+
+<style scoped lang="scss">
+.h-screen {
+  height: 100vh;
+}
+
+.min-h-100 {
+  min-height: 200rpx;
+}
+
+.box-50 {
+  width: 100rpx;
+  height: 100rpx;
+}
+
+.w-star {
+  width: 16%;
+}
+
+.empty {
+  position: absolute;
+  left: 50%;
+  top: 40%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+
+  @at-root &__icon {
+    display: block;
+    margin-bottom: 16rpx;
+    width: 240rpx;
+    height: 240rpx;
+  }
+
+  @at-root &__txt {
+    font-size: 32rpx;
+    color: #666;
+  }
+}
+</style>

pages/rate/rate-list.vue

@@ -0,0 +1,437 @@
+<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 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
+  })
+  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
+})
+
+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>

utils/api.js

@@ -36,7 +36,10 @@ const urlsConfig = {
     addArticleSendRecord: 'addArticleSendRecord',
     addArticleReadRecord: 'addArticleReadRecord',
     getMiniAppReceivedArticleList: 'getMiniAppReceivedArticleList',
-    getPageDisease: 'getPageDisease'
+    getPageDisease: 'getPageDisease',
+    searchRateList: 'searchRateList',
+    submitRateRecord: 'submitRateRecord',
+    getRateRecord: 'getRateRecord',
   },
   member: {
     addCustomer: 'add',