feat(aihr): complete uni-app role workflows
This commit is contained in:
@@ -0,0 +1,614 @@
|
||||
<template>
|
||||
<view class="page today-page">
|
||||
<view v-if="message" class="status-message">{{ message }}</view>
|
||||
|
||||
<view class="mentor-hero">
|
||||
<view class="hero-copy">
|
||||
<text class="hero-role">生活顾问</text>
|
||||
<text class="hero-title">客服管家</text>
|
||||
<text class="hero-sub">有问题，随时问老师傅</text>
|
||||
</view>
|
||||
<image class="mentor-image" src="/static/mentor.png" mode="aspectFit" />
|
||||
<view class="mentor-bubble">
|
||||
<text>{{ mentorBubbleText }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="voice-panel">
|
||||
<button class="voice-primary" @click="goSop">
|
||||
<text class="voice-mark">问</text>
|
||||
<text>问老师傅</text>
|
||||
</button>
|
||||
<button class="voice-secondary" @click="goSop">
|
||||
<text class="keyboard-mark">键</text>
|
||||
<text>打字问</text>
|
||||
</button>
|
||||
</view>
|
||||
|
||||
<view class="mentor-chips">
|
||||
<view class="chip-row">
|
||||
<button v-for="item in quickQuestions" :key="item" class="chip" @click="ask(item)">
|
||||
{{ item }}
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="section-card login-section" v-if="!loggedIn">
|
||||
<view>
|
||||
<text class="login-title">登录后查看今日安排</text>
|
||||
<text class="login-desc">训练任务、复习提醒和成长数据会按你的手机号展示。</text>
|
||||
</view>
|
||||
<button class="primary-button login-button" @click="goLogin">去登录</button>
|
||||
</view>
|
||||
|
||||
<view class="section-card" v-else-if="home?.primary">
|
||||
<view class="section-head">
|
||||
<view class="section-title">
|
||||
<text class="section-icon">日</text>
|
||||
<text>今日安排</text>
|
||||
</view>
|
||||
<button class="section-link" @click="openTool('训练')">查看全部</button>
|
||||
</view>
|
||||
<view class="schedule-list">
|
||||
<view class="schedule-row">
|
||||
<text class="step-dot blue">1</text>
|
||||
<view class="schedule-copy">
|
||||
<text class="schedule-title">每日小训：{{ home.primary.title.replace('三角色对练', '') }}</text>
|
||||
<text class="schedule-desc">{{ home.primary.desc }}</text>
|
||||
</view>
|
||||
<button class="schedule-action blue-action" @click="openTool(home.primary.cta)">开始</button>
|
||||
</view>
|
||||
<view class="schedule-row" v-if="home.review">
|
||||
<text class="step-dot orange">2</text>
|
||||
<view class="schedule-copy">
|
||||
<text class="schedule-title">今日复习：{{ home.review.title }}</text>
|
||||
<text class="schedule-desc">{{ home.review.desc }}</text>
|
||||
</view>
|
||||
<button class="schedule-action orange-action" @click="ask(home.review.title)">去复习</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="loggedIn" class="section-card">
|
||||
<view class="section-head">
|
||||
<view class="section-title">
|
||||
<text class="section-icon">图</text>
|
||||
<text>{{ loggedIn ? '我的地图' : '常用入口' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="mapTiles.length" class="map-grid">
|
||||
<button
|
||||
v-for="tile in mapTiles"
|
||||
:key="tile.title"
|
||||
class="map-tile"
|
||||
:class="tile.tone"
|
||||
@click="openTool(tile.title)"
|
||||
>
|
||||
<image class="map-icon" :src="tile.icon" mode="aspectFit" />
|
||||
<view class="map-copy">
|
||||
<text class="map-title">{{ tile.title }}</text>
|
||||
<text class="map-desc">{{ tile.desc }}</text>
|
||||
</view>
|
||||
<text class="map-arrow">›</text>
|
||||
</button>
|
||||
</view>
|
||||
<view v-else class="empty">暂无工具入口</view>
|
||||
</view>
|
||||
|
||||
<button class="tip-card" @click="ask('催费话术')">
|
||||
<text class="tip-mark">贴</text>
|
||||
<text>今日小贴士：催费沟通先共情，再说明，再给方案。</text>
|
||||
<text class="tip-arrow">›</text>
|
||||
</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue';
|
||||
import { onShow } from '@dcloudio/uni-app';
|
||||
import type { RoleHome } from '@/types/api';
|
||||
import { getMobileHome } from '@/services/home';
|
||||
import { getAuth, isLoggedIn, rememberLoginRedirect } from '@/services/auth';
|
||||
|
||||
const home = ref<RoleHome | null>(null);
|
||||
const message = ref('');
|
||||
const loggedIn = ref(false);
|
||||
const quickQuestions = ['催费话术', '投诉应对', '收费标准'];
|
||||
const pendingSopQueryKey = 'aihr_sop_pending_query';
|
||||
|
||||
const iconFor = (title: string) => {
|
||||
if (title.includes('SOP') || title.includes('查')) return '/static/map-icons/ask.png';
|
||||
if (title.includes('练')) return '/static/map-icons/practice.png';
|
||||
if (title.includes('学') || title.includes('案例')) return '/static/map-icons/learn.png';
|
||||
return '/static/map-icons/report.png';
|
||||
};
|
||||
|
||||
const toneFor = (title: string) => {
|
||||
if (title.includes('SOP') || title.includes('查')) return 'ask';
|
||||
if (title.includes('练')) return 'practice';
|
||||
if (title.includes('学') || title.includes('案例')) return 'learn';
|
||||
return 'report';
|
||||
};
|
||||
|
||||
const mapTiles = computed(() => {
|
||||
if (!home.value?.tools?.length) return [];
|
||||
return home.value.tools.map((item) => ({
|
||||
title: item.title,
|
||||
desc: item.desc.replace(/\n/g, ' / '),
|
||||
tone: toneFor(item.title),
|
||||
icon: iconFor(item.title)
|
||||
}));
|
||||
});
|
||||
|
||||
const mentorName = computed(() => {
|
||||
if (!loggedIn.value) return '同事';
|
||||
const phone = getAuth().phone.trim();
|
||||
return phone ? `尾号${phone.slice(-4)}的同事` : '同事';
|
||||
});
|
||||
|
||||
const mentorBubbleText = computed(() =>
|
||||
loggedIn.value ? `${mentorName.value}，今天先做两件事` : '同事，登录后看今天任务'
|
||||
);
|
||||
|
||||
const loadHome = async () => {
|
||||
loggedIn.value = isLoggedIn();
|
||||
message.value = '';
|
||||
if (!loggedIn.value) {
|
||||
home.value = null;
|
||||
return;
|
||||
}
|
||||
try {
|
||||
home.value = await getMobileHome('user');
|
||||
} catch (error) {
|
||||
home.value = null;
|
||||
message.value = error instanceof Error ? error.message : '首页数据加载失败';
|
||||
}
|
||||
};
|
||||
|
||||
const goSop = () => {
|
||||
uni.switchTab({ url: '/pages/user/sop/index' });
|
||||
};
|
||||
|
||||
const ask = (query: string) => {
|
||||
uni.setStorageSync(pendingSopQueryKey, query);
|
||||
uni.switchTab({ url: '/pages/user/sop/index' });
|
||||
};
|
||||
|
||||
const goLogin = () => {
|
||||
rememberLoginRedirect('/pages/user/today/index');
|
||||
uni.navigateTo({ url: '/pages/auth/login/index' });
|
||||
};
|
||||
|
||||
const openTool = (title: string) => {
|
||||
if (title.includes('问') || title.includes('SOP') || title.includes('sop')) {
|
||||
goSop();
|
||||
return;
|
||||
}
|
||||
if (title.includes('练') || title.includes('训练') || title.includes('开始')) {
|
||||
uni.switchTab({ url: '/pages/user/practice/index' });
|
||||
return;
|
||||
}
|
||||
if (title.includes('案例') || title.includes('素材') || title.includes('提交')) {
|
||||
uni.navigateTo({ url: '/pages/user/cases/index' });
|
||||
return;
|
||||
}
|
||||
uni.navigateTo({ url: `/pages/common/building/index?title=${encodeURIComponent(title)}` });
|
||||
};
|
||||
|
||||
onShow(loadHome);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.today-page {
|
||||
min-height: 100vh;
|
||||
padding: 0 14px 86px;
|
||||
background: #f4f7fb;
|
||||
}
|
||||
|
||||
.mentor-hero {
|
||||
position: relative;
|
||||
height: 224px;
|
||||
margin: 0 -14px;
|
||||
overflow: hidden;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(237, 247, 255, 0.72), rgba(244, 247, 251, 0.98)),
|
||||
linear-gradient(135deg, #d9ecff 0%, #f7fbff 45%, #dfeff2 100%);
|
||||
}
|
||||
|
||||
.mentor-hero::before {
|
||||
position: absolute;
|
||||
right: -36px;
|
||||
bottom: 12px;
|
||||
width: 190px;
|
||||
height: 96px;
|
||||
border-radius: 30px;
|
||||
background: rgba(255, 255, 255, 0.46);
|
||||
content: '';
|
||||
}
|
||||
|
||||
.hero-copy {
|
||||
position: absolute;
|
||||
left: 22px;
|
||||
top: 34px;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.hero-role,
|
||||
.hero-title {
|
||||
color: #11235a;
|
||||
font-size: 22px;
|
||||
font-weight: 900;
|
||||
line-height: 1.08;
|
||||
}
|
||||
|
||||
.hero-sub {
|
||||
margin-top: 8px;
|
||||
color: #1e3a8a;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.mentor-image {
|
||||
position: absolute;
|
||||
right: 88px;
|
||||
bottom: 14px;
|
||||
z-index: 1;
|
||||
width: 104px;
|
||||
height: 138px;
|
||||
border-radius: 24px;
|
||||
box-shadow: 0 14px 36px rgba(15, 23, 42, 0.14);
|
||||
}
|
||||
|
||||
.mentor-bubble {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 80px;
|
||||
z-index: 3;
|
||||
width: 128px;
|
||||
padding: 12px 14px;
|
||||
border-radius: 18px;
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
|
||||
}
|
||||
|
||||
.mentor-bubble text {
|
||||
color: #111827;
|
||||
font-size: 17px;
|
||||
font-weight: 700;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.voice-panel {
|
||||
position: relative;
|
||||
z-index: 4;
|
||||
display: grid;
|
||||
margin: -34px 8px 0;
|
||||
padding: 16px;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 14px;
|
||||
border-radius: 22px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 14px 38px rgba(15, 23, 42, 0.12);
|
||||
}
|
||||
|
||||
.voice-primary,
|
||||
.voice-secondary {
|
||||
display: flex;
|
||||
min-height: 64px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
border-radius: 18px;
|
||||
background: transparent;
|
||||
color: #1d4ed8;
|
||||
font-size: 20px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.voice-secondary {
|
||||
color: #4b5563;
|
||||
background: #f1f5f9;
|
||||
}
|
||||
|
||||
.voice-primary text:last-child,
|
||||
.voice-secondary text:last-child {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.voice-mark,
|
||||
.keyboard-mark {
|
||||
display: flex;
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #2563eb, #1d9bf0);
|
||||
color: #ffffff;
|
||||
font-size: 18px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.keyboard-mark {
|
||||
background: #e5e7eb;
|
||||
color: #4b5563;
|
||||
}
|
||||
|
||||
.mentor-chips {
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.mentor-chips .chip-row {
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.mentor-chips .chip {
|
||||
min-height: 42px;
|
||||
flex: 1;
|
||||
border: 1px solid rgba(203, 213, 225, 0.7);
|
||||
background: #ffffff;
|
||||
box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
|
||||
color: #1f2937;
|
||||
font-size: 15px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.section-card {
|
||||
margin-top: 18px;
|
||||
padding: 18px;
|
||||
border-radius: 18px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.07);
|
||||
}
|
||||
|
||||
.login-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.login-title,
|
||||
.login-desc {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.login-title {
|
||||
color: #111827;
|
||||
font-size: 18px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.login-desc {
|
||||
margin-top: 6px;
|
||||
color: #64748b;
|
||||
font-size: 13px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.login-button {
|
||||
min-width: 84px;
|
||||
}
|
||||
|
||||
.section-head,
|
||||
.section-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.section-head {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
gap: 9px;
|
||||
color: #111827;
|
||||
font-size: 21px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.section-icon {
|
||||
display: flex;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 8px;
|
||||
background: #dbeafe;
|
||||
color: #2563eb;
|
||||
font-size: 13px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.section-link {
|
||||
color: #64748b;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.schedule-list {
|
||||
display: flex;
|
||||
margin-top: 16px;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.schedule-row {
|
||||
display: flex;
|
||||
min-height: 82px;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
border-radius: 15px;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.step-dot {
|
||||
display: flex;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
flex: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
color: #ffffff;
|
||||
font-size: 15px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.step-dot.blue {
|
||||
background: #2563eb;
|
||||
}
|
||||
|
||||
.step-dot.orange {
|
||||
background: #f97316;
|
||||
}
|
||||
|
||||
.schedule-copy {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.schedule-title {
|
||||
color: #111827;
|
||||
font-size: 16px;
|
||||
font-weight: 900;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.schedule-desc {
|
||||
color: #64748b;
|
||||
font-size: 13px;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.schedule-action {
|
||||
width: 68px;
|
||||
min-height: 42px;
|
||||
flex: none;
|
||||
border-radius: 12px;
|
||||
color: #ffffff;
|
||||
font-size: 16px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.blue-action {
|
||||
background: #2563eb;
|
||||
}
|
||||
|
||||
.orange-action {
|
||||
background: #f97316;
|
||||
}
|
||||
|
||||
.map-grid {
|
||||
display: grid;
|
||||
margin-top: 16px;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.map-tile {
|
||||
position: relative;
|
||||
display: flex;
|
||||
min-height: 108px;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 16px 12px;
|
||||
border-radius: 17px;
|
||||
overflow: hidden;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.map-tile.ask {
|
||||
background: linear-gradient(135deg, #1d4ed8, #2682ff);
|
||||
}
|
||||
|
||||
.map-tile.practice {
|
||||
background: linear-gradient(135deg, #16a34a, #22c55e);
|
||||
}
|
||||
|
||||
.map-tile.learn {
|
||||
background: linear-gradient(135deg, #f59e0b, #fb923c);
|
||||
}
|
||||
|
||||
.map-tile.report {
|
||||
background: linear-gradient(135deg, #ef4444, #f97316);
|
||||
}
|
||||
|
||||
.map-icon {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
flex: none;
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
|
||||
.map-copy {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.map-title {
|
||||
color: #ffffff;
|
||||
font-size: 24px;
|
||||
font-weight: 900;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.map-desc {
|
||||
margin-top: 6px;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
font-size: 13px;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.map-arrow {
|
||||
color: #ffffff;
|
||||
font-size: 28px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.tip-card {
|
||||
display: flex;
|
||||
margin-top: 18px;
|
||||
min-height: 58px;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 0 14px;
|
||||
border-radius: 16px;
|
||||
background: #ffffff;
|
||||
color: #475569;
|
||||
box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
|
||||
}
|
||||
|
||||
.tip-mark {
|
||||
display: flex;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
flex: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
background: #fef3c7;
|
||||
color: #d97706;
|
||||
font-size: 13px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.tip-card text:nth-child(2) {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.tip-arrow {
|
||||
color: #94a3b8;
|
||||
font-size: 24px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user