260 lines
9.2 KiB
Vue
260 lines
9.2 KiB
Vue
<template>
|
||
<div class="home-nav-right">
|
||
<!-- <d-tooltip position="left">
|
||
<a :href="gitcodeNet" target="_blank">
|
||
<div class="home-nav-item text-CG700">旧版</div>
|
||
</a>
|
||
<template #content>
|
||
<div class="home-nav-tooltip-wrapper">
|
||
<div class="home-nav-text">
|
||
如需访问旧版与项目仓库，可
|
||
<a class="home-nav-link" :href="gitcodeNet" target="_blank">返回旧版查看 >></a>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</d-tooltip> -->
|
||
<!-- <d-tooltip position="left">
|
||
<a class="home-nav-link" :href="helpDoc" target="_blank">
|
||
<div class="home-nav-item">
|
||
<Icon name="gt-ask" class="home-nav-icon" size="20px" />
|
||
</div>
|
||
</a>
|
||
<template #content>
|
||
<div class="home-nav-tooltip-wrapper">
|
||
<div class="home-nav-text">
|
||
查看使用
|
||
<a class="home-nav-link" :href="helpDoc" target="_blank">帮助文档</a>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</d-tooltip> -->
|
||
<!-- <d-tooltip position="left">
|
||
<a class="home-nav-link" :href="reportBug" target="_blank">
|
||
<div class="home-nav-item">
|
||
<Icon name="gt-file-code" class="home-nav-icon" size="20px" />
|
||
</div>
|
||
</a>
|
||
<template #content>
|
||
<div class="home-nav-tooltip-wrapper">
|
||
<div class="home-nav-text">产品使用相关的bug都可以</div>
|
||
<a class="home-nav-link" :href="reportBug" target="_blank">戳此提交>>></a>
|
||
</div>
|
||
</template>
|
||
</d-tooltip> -->
|
||
<d-tooltip position="left">
|
||
<a class="home-nav-link" :href="`mailto:${contact}`">
|
||
<div class="home-nav-item">
|
||
<Icon name="gt-organizations" class="home-nav-icon" size="20px" />
|
||
</div>
|
||
</a>
|
||
<template #content>
|
||
<div class="home-nav-tooltip-wrapper">
|
||
<div class="home-nav-text">
|
||
如需组织入驻支持可邮件联系：<a class="home-nav-link devui-link-light" :href="`mailto:${contact}`">{{ contact }}</a>
|
||
，请在正文附带组织介绍及联系方式哦~
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</d-tooltip>
|
||
<!-- <d-tooltip position="left"><a class="home-nav-link" href="https://www.wjx.cn/vm/ey1fzaK.aspx" target="_blank" rel="noopener noreferrer"><div class="home-nav-item"><Icon name="gt-nps" class="home-nav-icon" size="20px" /></div></a><template #content><div class="home-nav-tooltip-wrapper"><div class="home-nav-text">在线参与 GitCode 用户调查</div></div></template></d-tooltip> -->
|
||
<d-popover v-if="popVisible" :offset="OffsetOptions" :position="['left']" class="no-arrow" :is-open="popVisible">
|
||
<div class="home-nav-link">
|
||
<div class="home-nav-item">
|
||
<Icon name="gt-nps" class="home-nav-icon" size="20px" />
|
||
</div>
|
||
</div>
|
||
<template #content>
|
||
<div class="g-card px-5 pt-4 pb-5 w-[410px]" >
|
||
<div class="opinion-box" v-if="process">
|
||
<div class="tab-step">
|
||
<div
|
||
v-for="item in opinionStep"
|
||
:key="item.index"
|
||
class="tab-item w-8 h-1 mr-1 cursor-pointer"
|
||
:class="opStep===item.index?'bg-G900':'bg-G400'"
|
||
@click="swTab(item)"
|
||
><span class="cursor-pointer"></span></div>
|
||
</div>
|
||
<div class="">
|
||
<div v-if="opStep === 0" class="rate relative overflow-hidden">
|
||
<div v-if="rateActive!==null || rateNow!==null" class="absolute top-0 right-0 text-G900"><span>{{ rateIcon[rateActive === null?rateNow:rateActive].title }}</span></div>
|
||
<div class="font-[600] text-G900 mt-3 text-sm leading-[20px]"><span>评价您对我们产品的体验</span></div>
|
||
<div class="flex gap-1 items-center mt-3">
|
||
<div
|
||
v-for="ico in rateIcon"
|
||
:key="ico.name"
|
||
class="opinion-item cursor-pointer border border-G300 rounded-[3px] px-2 py-1.5"
|
||
:class="{active:rateNow===ico.index}"
|
||
@mouseover="activeOp(ico.index)"
|
||
@mouseleave="activeOp(null)"
|
||
@click="selOpini(ico)"
|
||
><Icon :name="ico.name" size="24px"/></div>
|
||
</div>
|
||
</div>
|
||
<div v-if="opStep === 1" class="Opinion relative overflow-hidden">
|
||
<div v-if="rateNow!==null" class="absolute top-0 right-0 text-G900"><span>{{ rateIcon[rateNow].title }}</span></div>
|
||
<div class="font-[600] text-G900 mt-3 text-sm leading-[20px]"><span>有什么可以改进的吗？</span></div>
|
||
<div class="mt-3">
|
||
<d-textarea v-model="opinionText" :rows="4" placeholder="请输入反馈（可选）" show-count maxlength="200"></d-textarea>
|
||
</div>
|
||
<div>
|
||
<d-button color="primary" variant="solid" @click="handleSubmit">提交</d-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="finish flex items-center" v-else>
|
||
<div class="flex justify-center items-center w-[30px] h-[30px] rounded-[50%] bg-[#0EB07B]">
|
||
<Icon name="gt-success" size="14px" color="#fff"/>
|
||
</div>
|
||
<div class="ml-2 font-[600] text-G900 text-sm leading-[20px]"><span>谢谢您的反馈！</span></div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</d-popover>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { nextTick, reactive, ref } from 'vue';
|
||
import { useReport } from '@/utils/hooks/useReport';
|
||
const gitcodeNet = 'https://gitcode.net';
|
||
const helpDoc = 'https://gitcode.com/Gitcode-offical-team/GitCode-Docs/wiki';
|
||
const reportBug = 'https://gitcode.com/Gitcode-offical-team/GitCode-Docs/issues';
|
||
const contact = 'kefu@gitcode.com';
|
||
const opinionStep = [{ index: 0, offset_x: -30 }, { index: 1, offset_x: -80 }];
|
||
const opStep = ref<number>(0);
|
||
const rateNow = ref(null);
|
||
const rateActive = ref(null);
|
||
const process = ref(true);
|
||
const popVisible = ref(true);
|
||
const opinionText = ref<string>('');
|
||
const rateIcon = [
|
||
{ name: 'gt-nps-1', title: '非常好', index: 0 },
|
||
{ name: 'gt-nps-2', title: '好', index: 1 },
|
||
{ name: 'gt-nps-3', title: '一般', index: 2 },
|
||
{ name: 'gt-nps-4', title: '不好', index: 3 },
|
||
{ name: 'gt-nps-5', title: '非常不好', index: 4 }
|
||
];
|
||
const store:any = localStorage.getItem('spmStatus');
|
||
const status = store ? JSON.parse(store) : null;
|
||
if (status !== null) {
|
||
const { nps_global } = status;
|
||
popVisible.value = nps_global.expire && nps_global.expire < Date.now();// 过期后才能重新展示
|
||
}
|
||
const swTab = (item:any) => { // 切换步骤
|
||
if (rateNow.value === null && item.index === 1) return;
|
||
OffsetOptions.crossAxis = item.offset_x;
|
||
opStep.value = item.index;
|
||
window.dispatchEvent(new Event('resize'));// 触发更新位置
|
||
};
|
||
const activeOp = (index:any) => { // hover等级
|
||
rateActive.value = index;
|
||
};
|
||
const selOpini = (item:any) => { // 设置等级
|
||
rateNow.value = item.index;
|
||
swTab(opinionStep[1]);
|
||
};
|
||
const OffsetOptions = reactive({ mainAxis: 10, crossAxis: -30 });
|
||
const handleSubmit = () => { // 提交意见
|
||
useReport('nps_global', {
|
||
nps_score: rateNow.value as any + 1,
|
||
nps_comment: opinionText.value
|
||
}).then(res => {
|
||
process.value = false;
|
||
OffsetOptions.crossAxis = 0;
|
||
window.dispatchEvent(new Event('resize'));// 触发更新位置
|
||
const nextStatus = status || {};
|
||
nextStatus.nps_global = { expire: Date.now() + 86400000 * 15 };// 记录提交的过期时间
|
||
localStorage.setItem('spmStatus', JSON.stringify(nextStatus));
|
||
setTimeout(() => { popVisible.value = false; }, 500);
|
||
});
|
||
};
|
||
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.home-nav-right {
|
||
position: fixed;
|
||
right: 16px;
|
||
bottom: 120px;
|
||
z-index: 20;
|
||
@media screen and (max-width: 768px) { // 小屏不显示工具栏
|
||
display: none;
|
||
}
|
||
.home-nav-item {
|
||
margin-top: 12px;
|
||
width: 44px;
|
||
height: 44px;
|
||
border-radius: 50%;
|
||
background-color: #fff;
|
||
text-align: center;
|
||
line-height: 44px;
|
||
box-shadow: 0 2px 6px 0 rgba(37, 43, 58, 0.12);
|
||
.home-nav-icon {
|
||
color: rgba(0, 0, 0, 0.5) !important;
|
||
}
|
||
&:hover {
|
||
cursor: pointer;
|
||
.home-nav-icon {
|
||
color: rgba(0, 0, 0, 1) !important;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.home-nav-tooltip-wrapper {
|
||
padding: 6px 12px;
|
||
max-width: 190px;
|
||
font-size: 12px;
|
||
line-height: 18px;
|
||
@apply whitespace-normal break-all;
|
||
}
|
||
.home-nav-link {
|
||
color: rgba(59, 130, 246, 1);
|
||
cursor: pointer;
|
||
}
|
||
.opinion-box{
|
||
display: flex;
|
||
flex-direction: column;
|
||
.tab-step{
|
||
display: flex;
|
||
.tab-item{
|
||
border-radius: 2px;
|
||
position: relative;
|
||
span{
|
||
width: 100%;
|
||
height: 12px;
|
||
position: absolute;
|
||
top: -4px;
|
||
left: 0;
|
||
z-index: 1;
|
||
}
|
||
}
|
||
}
|
||
.rate{
|
||
.opinion-item{
|
||
width: 40px;
|
||
height: 36px;
|
||
&:hover,&.active{
|
||
background:var(--color-B500);
|
||
border-color: transparent;
|
||
.icon{color: #fff !important;}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
<style lang="scss">
|
||
.no-arrow{
|
||
&.devui-popover__content.devui-flexible-overlay{
|
||
background: transparent;
|
||
padding: 0;
|
||
border:none;
|
||
box-shadow: none;
|
||
}
|
||
.devui-flexible-overlay__arrow{
|
||
display: none !important;
|
||
}
|
||
}
|
||
</style>
|