This commit is contained in:
parent
f47534b583
commit
7629c52bb7
|
|
@ -24,6 +24,14 @@
|
||||||
"navigationBarTextStyle": "white"
|
"navigationBarTextStyle": "white"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/assistant/knowledge-detail",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "知识详情",
|
||||||
|
"navigationBarBackgroundColor": "#FF8A80",
|
||||||
|
"navigationBarTextStyle": "white"
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/adoption/adoption",
|
"path": "pages/adoption/adoption",
|
||||||
"style": {
|
"style": {
|
||||||
|
|
|
||||||
|
|
@ -39,7 +39,7 @@
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="message-content ai">
|
<view class="message-content ai">
|
||||||
<view class="message-bubble ai">
|
<view class="message-bubble ai" @longpress="copyMessage(message.content)">
|
||||||
<text class="message-text" v-if="!(isThinking && index === messageList.length - 1)">{{ message.content }}</text>
|
<text class="message-text" v-if="!(isThinking && index === messageList.length - 1)">{{ message.content }}</text>
|
||||||
<view class="typing-dots" v-else>
|
<view class="typing-dots" v-else>
|
||||||
<view class="typing-dot"></view>
|
<view class="typing-dot"></view>
|
||||||
|
|
@ -54,7 +54,7 @@
|
||||||
<!-- 用户消息 -->
|
<!-- 用户消息 -->
|
||||||
<view class="message-item user" v-if="message.type === 'user'">
|
<view class="message-item user" v-if="message.type === 'user'">
|
||||||
<view class="message-content user">
|
<view class="message-content user">
|
||||||
<view class="message-bubble user">
|
<view class="message-bubble user" @longpress="copyMessage(message.content)">
|
||||||
<text class="message-text">{{ message.content }}</text>
|
<text class="message-text">{{ message.content }}</text>
|
||||||
</view>
|
</view>
|
||||||
<text class="message-time">{{ message.time }}</text>
|
<text class="message-time">{{ message.time }}</text>
|
||||||
|
|
@ -279,6 +279,26 @@ export default {
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
|
copyMessage(content) {
|
||||||
|
uni.setClipboardData({
|
||||||
|
data: content,
|
||||||
|
success: () => {
|
||||||
|
uni.showToast({
|
||||||
|
title: '已复制到剪贴板',
|
||||||
|
icon: 'success',
|
||||||
|
duration: 1500
|
||||||
|
});
|
||||||
|
},
|
||||||
|
fail: () => {
|
||||||
|
uni.showToast({
|
||||||
|
title: '复制失败',
|
||||||
|
icon: 'none',
|
||||||
|
duration: 1500
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
startVoiceInput() {
|
startVoiceInput() {
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title: '语音功能开发中',
|
title: '语音功能开发中',
|
||||||
|
|
@ -459,12 +479,12 @@ export default {
|
||||||
|
|
||||||
.message-item.user {
|
.message-item.user {
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
padding: 0 0 0 60rpx;
|
padding: 0 0 0 40rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.message-item.ai {
|
.message-item.ai {
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
padding: 0 60rpx 0 0;
|
padding: 0 40rpx 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.message-avatar {
|
.message-avatar {
|
||||||
|
|
@ -511,7 +531,7 @@ export default {
|
||||||
.message-content {
|
.message-content {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
max-width: 65%;
|
max-width: 80%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.message-content.user {
|
.message-content.user {
|
||||||
|
|
@ -547,8 +567,8 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
.message-text {
|
.message-text {
|
||||||
font-size: 28rpx;
|
font-size: 26rpx;
|
||||||
line-height: 1.4;
|
line-height: 1.5;
|
||||||
color: #333333;
|
color: #333333;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,294 @@
|
||||||
|
<template>
|
||||||
|
<view class="knowledge-detail-container page-container-unified">
|
||||||
|
|
||||||
|
<!-- 知识内容卡片 -->
|
||||||
|
<view class="content-card">
|
||||||
|
<view class="knowledge-header">
|
||||||
|
<view class="title-row">
|
||||||
|
<text class="knowledge-title">{{ knowledgeDetail.title }}</text>
|
||||||
|
<view class="header-actions">
|
||||||
|
<view class="action-button" @click="toggleFavorite">
|
||||||
|
<u-icon :name="isFavorited ? 'heart-fill' : 'heart'" size="32" :color="isFavorited ? '#FF8A80' : '#999'"></u-icon>
|
||||||
|
</view>
|
||||||
|
<view class="action-button" @click="shareKnowledge">
|
||||||
|
<u-icon name="share" size="32" color="#999"></u-icon>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="knowledge-meta">
|
||||||
|
<view class="category-tag">
|
||||||
|
<text class="tag-text">{{ knowledgeDetail.category }}</text>
|
||||||
|
</view>
|
||||||
|
<text class="read-count">{{ knowledgeDetail.readCount }}次阅读</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="knowledge-content">
|
||||||
|
<rich-text :nodes="knowledgeDetail.content"></rich-text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
knowledgeId: '',
|
||||||
|
isFavorited: false,
|
||||||
|
knowledgeDetail: {
|
||||||
|
id: 1,
|
||||||
|
title: '猫咪日常饮食指南',
|
||||||
|
category: '饮食',
|
||||||
|
readCount: 1256,
|
||||||
|
content: `
|
||||||
|
<p style="margin-bottom: 16px; line-height: 1.6; color: #333;">猫咪的健康饮食是保证其长寿和活力的关键因素。作为肉食动物，猫咪对蛋白质的需求量很高，同时也需要适量的脂肪和少量的碳水化合物。</p>
|
||||||
|
|
||||||
|
<h3 style="margin: 24px 0 16px 0; color: #FF8A80; font-size: 18px; font-weight: 600;">营养需求</h3>
|
||||||
|
<p style="margin-bottom: 16px; line-height: 1.6; color: #333;">成年猫咪每天需要的营养成分包括：</p>
|
||||||
|
<ul style="margin-bottom: 16px; padding-left: 20px; color: #333;">
|
||||||
|
<li style="margin-bottom: 8px;">蛋白质：26-30%</li>
|
||||||
|
<li style="margin-bottom: 8px;">脂肪：9-15%</li>
|
||||||
|
<li style="margin-bottom: 8px;">碳水化合物：不超过10%</li>
|
||||||
|
<li style="margin-bottom: 8px;">水分：充足的饮水</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h3 style="margin: 24px 0 16px 0; color: #FF8A80; font-size: 18px; font-weight: 600;">喂食建议</h3>
|
||||||
|
<p style="margin-bottom: 16px; line-height: 1.6; color: #333;">建议采用定时定量的喂食方式，成年猫咪每天喂食2-3次，幼猫需要更频繁的喂食。选择高质量的猫粮，避免给猫咪喂食人类食物。</p>
|
||||||
|
|
||||||
|
<h3 style="margin: 24px 0 16px 0; color: #FF8A80; font-size: 18px; font-weight: 600;">注意事项</h3>
|
||||||
|
<p style="margin-bottom: 16px; line-height: 1.6; color: #333;">避免给猫咪喂食巧克力、洋葱、大蒜等对猫咪有害的食物。保持食物和水的新鲜，定期清洁食具。</p>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
onLoad(options) {
|
||||||
|
if (options.id) {
|
||||||
|
this.knowledgeId = options.id;
|
||||||
|
this.loadKnowledgeDetail();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
onShow() {
|
||||||
|
// 每次显示页面时检查收藏状态
|
||||||
|
this.checkFavoriteStatus();
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
loadKnowledgeDetail() {
|
||||||
|
// 这里应该根据knowledgeId从服务器或本地数据加载详细信息
|
||||||
|
// 模拟数据加载
|
||||||
|
const knowledgeData = this.getKnowledgeById(this.knowledgeId);
|
||||||
|
if (knowledgeData) {
|
||||||
|
this.knowledgeDetail = { ...knowledgeData };
|
||||||
|
// 增加阅读次数
|
||||||
|
this.knowledgeDetail.readCount += 1;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
getKnowledgeById(id) {
|
||||||
|
// 模拟从数据源获取知识详情
|
||||||
|
const allKnowledge = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
title: '猫咪日常饮食指南',
|
||||||
|
category: '饮食',
|
||||||
|
readCount: 1256,
|
||||||
|
content: `
|
||||||
|
<p style="margin-bottom: 16px; line-height: 1.6; color: #333;">猫咪的健康饮食是保证其长寿和活力的关键因素。作为肉食动物，猫咪对蛋白质的需求量很高，同时也需要适量的脂肪和少量的碳水化合物。</p>
|
||||||
|
|
||||||
|
<h3 style="margin: 24px 0 16px 0; color: #FF8A80; font-size: 18px; font-weight: 600;">营养需求</h3>
|
||||||
|
<p style="margin-bottom: 16px; line-height: 1.6; color: #333;">成年猫咪每天需要的营养成分包括：</p>
|
||||||
|
<ul style="margin-bottom: 16px; padding-left: 20px; color: #333;">
|
||||||
|
<li style="margin-bottom: 8px;">蛋白质：26-30%</li>
|
||||||
|
<li style="margin-bottom: 8px;">脂肪：9-15%</li>
|
||||||
|
<li style="margin-bottom: 8px;">碳水化合物：不超过10%</li>
|
||||||
|
<li style="margin-bottom: 8px;">水分：充足的饮水</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h3 style="margin: 24px 0 16px 0; color: #FF8A80; font-size: 18px; font-weight: 600;">喂食建议</h3>
|
||||||
|
<p style="margin-bottom: 16px; line-height: 1.6; color: #333;">建议采用定时定量的喂食方式，成年猫咪每天喂食2-3次，幼猫需要更频繁的喂食。选择高质量的猫粮，避免给猫咪喂食人类食物。</p>
|
||||||
|
|
||||||
|
<h3 style="margin: 24px 0 16px 0; color: #FF8A80; font-size: 18px; font-weight: 600;">注意事项</h3>
|
||||||
|
<p style="margin-bottom: 16px; line-height: 1.6; color: #333;">避免给猫咪喂食巧克力、洋葱、大蒜等对猫咪有害的食物。保持食物和水的新鲜，定期清洁食具。</p>
|
||||||
|
`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
title: '猫咪健康体检指南',
|
||||||
|
category: '健康',
|
||||||
|
readCount: 892,
|
||||||
|
content: `
|
||||||
|
<p style="margin-bottom: 16px; line-height: 1.6; color: #333;">定期体检是维护猫咪健康的重要措施，可以及早发现和预防疾病。</p>
|
||||||
|
<h3 style="margin: 24px 0 16px 0; color: #FF8A80; font-size: 18px; font-weight: 600;">体检频率</h3>
|
||||||
|
<p style="margin-bottom: 16px; line-height: 1.6; color: #333;">幼猫建议每3个月体检一次，成年猫每6个月一次，老年猫每3个月一次。</p>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
];
|
||||||
|
return allKnowledge.find(item => item.id == id);
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
checkFavoriteStatus() {
|
||||||
|
// 检查当前知识是否已收藏
|
||||||
|
// 这里应该从本地存储或服务器获取收藏状态
|
||||||
|
const favorites = uni.getStorageSync('knowledge_favorites') || [];
|
||||||
|
this.isFavorited = favorites.includes(this.knowledgeId);
|
||||||
|
},
|
||||||
|
|
||||||
|
toggleFavorite() {
|
||||||
|
this.isFavorited = !this.isFavorited;
|
||||||
|
|
||||||
|
// 更新本地存储的收藏列表
|
||||||
|
let favorites = uni.getStorageSync('knowledge_favorites') || [];
|
||||||
|
if (this.isFavorited) {
|
||||||
|
if (!favorites.includes(this.knowledgeId)) {
|
||||||
|
favorites.push(this.knowledgeId);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
favorites = favorites.filter(id => id !== this.knowledgeId);
|
||||||
|
}
|
||||||
|
uni.setStorageSync('knowledge_favorites', favorites);
|
||||||
|
|
||||||
|
uni.showToast({
|
||||||
|
title: this.isFavorited ? '已收藏' : '已取消收藏',
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
shareKnowledge() {
|
||||||
|
uni.showActionSheet({
|
||||||
|
itemList: ['分享到微信', '分享到朋友圈', '复制链接'],
|
||||||
|
success: (res) => {
|
||||||
|
uni.showToast({
|
||||||
|
title: '分享功能开发中',
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.knowledge-detail-container {
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* 知识内容卡片 */
|
||||||
|
.content-card {
|
||||||
|
background: rgba(255, 255, 255, 0.95);
|
||||||
|
backdrop-filter: blur(20rpx);
|
||||||
|
border-radius: 24rpx;
|
||||||
|
padding: 32rpx;
|
||||||
|
box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.2);
|
||||||
|
border: 1rpx solid rgba(255, 255, 255, 0.3);
|
||||||
|
margin-bottom: 40rpx;
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.knowledge-header {
|
||||||
|
margin-bottom: 32rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-start;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.knowledge-title {
|
||||||
|
font-size: 40rpx;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #FF8A80;
|
||||||
|
flex: 1;
|
||||||
|
line-height: 1.3;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 12rpx;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-button {
|
||||||
|
width: 56rpx;
|
||||||
|
height: 56rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: rgba(255, 255, 255, 0.8);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
background: rgba(255, 138, 128, 0.1);
|
||||||
|
transform: scale(0.95);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.knowledge-meta {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.category-tag {
|
||||||
|
background: rgba(255, 138, 128, 0.1);
|
||||||
|
border: 2rpx solid rgba(255, 138, 128, 0.3);
|
||||||
|
border-radius: 20rpx;
|
||||||
|
padding: 12rpx 20rpx;
|
||||||
|
|
||||||
|
&.small {
|
||||||
|
padding: 8rpx 16rpx;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-text {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #FF8A80;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.read-count {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.knowledge-content {
|
||||||
|
line-height: 1.6;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* 响应式设计 */
|
||||||
|
@media (max-width: 375px) {
|
||||||
|
.knowledge-title {
|
||||||
|
font-size: 36rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-card {
|
||||||
|
padding: 24rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.related-item {
|
||||||
|
padding: 20rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue