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

<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-base 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-base block w-full min-h-100"
            placeholder="展开说说您对我本次服务的想法吧……" placeholder-class="text-gray text-base" :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>