251 lines
7.2 KiB
Vue
251 lines
7.2 KiB
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> |