You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
613 lines
14 KiB
613 lines
14 KiB
<template>
|
|
<view class="note-detail-container">
|
|
<!-- 笔记内容区域 -->
|
|
<view class="content-scroll">
|
|
<!-- 轮播图区域 -->
|
|
<view class="banner-content">
|
|
<swiper
|
|
class="top-banner"
|
|
:circular="true"
|
|
:interval="6000"
|
|
:duration="800"
|
|
:indicator-dots="false"
|
|
:autoplay="true"
|
|
@change="swiperChange"
|
|
>
|
|
<swiper-item v-for="(item, index) in topBanner" :key="index">
|
|
<image
|
|
class="top-banner"
|
|
:src="showImg(item)"
|
|
mode="aspectFill"
|
|
></image>
|
|
</swiper-item>
|
|
</swiper>
|
|
|
|
<view class="dot-container">
|
|
<view
|
|
:class="['dot-line', index == swiperIndex ? 'active' : '']"
|
|
v-for="(item, index) in topBanner"
|
|
:key="index"
|
|
></view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
<!-- 内容卡片 -->
|
|
<view class="content-card">
|
|
<!-- 作者信息 -->
|
|
<view class="author-section">
|
|
<image
|
|
class="author-avatar"
|
|
:src="showImg(noteDetail.user.avatar)"
|
|
mode="aspectFill"
|
|
/>
|
|
<view class="author-info">
|
|
<text class="author-name">{{ noteDetail.user.name }}</text>
|
|
</view>
|
|
<view
|
|
class="follow-btn"
|
|
:class="{ followed: noteDetail.user.isFollowed }"
|
|
@click="toggleFollow"
|
|
>
|
|
{{ noteDetail.user.isFollowed ? "已关注" : "关注" }}
|
|
</view>
|
|
</view>
|
|
<!-- 笔记标题 -->
|
|
<view class="note-title">
|
|
{{ noteDetail.title }}
|
|
</view>
|
|
|
|
<!-- 标签 -->
|
|
<view
|
|
class="tags-section"
|
|
v-if="noteDetail.tags && noteDetail.tags.length"
|
|
>
|
|
<view class="tag-item" v-for="tag in noteDetail.tags" :key="tag">
|
|
#{{ tag }}
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 笔记内容 -->
|
|
<view class="note-content">
|
|
<text class="content-text">{{ noteDetail.content }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="" style="width: auto;height: 1rpx;background-color: #999999;margin: 60rpx 32rpx;">
|
|
|
|
</view>
|
|
|
|
<!-- 评论区域 -->
|
|
<view class="comments-section">
|
|
<view class="comments-header">
|
|
<text class="comments-title"
|
|
>评论 ({{ noteDetail.comments.length }})</text
|
|
>
|
|
</view>
|
|
|
|
<view
|
|
class="comment-item"
|
|
v-for="comment in noteDetail.comments"
|
|
:key="comment.id"
|
|
>
|
|
<image
|
|
class="comment-avatar"
|
|
:src="showImg(comment.user.avatar)"
|
|
mode="aspectFill"
|
|
/>
|
|
<view class="comment-content">
|
|
<view class="comment-header">
|
|
<text class="comment-user">{{ comment.user.name }}</text>
|
|
<text class="comment-time">{{
|
|
formatTime(comment.createTime)
|
|
}}</text>
|
|
</view>
|
|
<text class="comment-text">{{ comment.content }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 底部占位 -->
|
|
<view class="bottom-placeholder"></view>
|
|
</view>
|
|
|
|
<!-- 底部评论输入框 -->
|
|
<view class="comment-input-section-box">
|
|
<view class="comment-input-section">
|
|
<input
|
|
class="comment-input"
|
|
v-model="commentText"
|
|
placeholder="写下你的想法..."
|
|
@confirm="submitComment"
|
|
/>
|
|
<button
|
|
class="send-btn"
|
|
@click="submitComment"
|
|
:disabled="!commentText.trim()"
|
|
>
|
|
发送
|
|
</button>
|
|
<view class="like-section">
|
|
<image class="like-icon" mode="widthFix" :src="showImg('/uploads/20250826/3f4c0ccaaaccbef50bf8c5c27ff6a87b.png')"></image>
|
|
<!-- <text
|
|
class="like-icon"
|
|
:class="{ liked: noteDetail.isLiked }"
|
|
@click="toggleLike"
|
|
>♥</text
|
|
> -->
|
|
<text class="like-count">{{ noteDetail.likes }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import headerVue from "@/components/header.vue";
|
|
|
|
export default {
|
|
name: "NoteDetail",
|
|
components: {
|
|
headerVue,
|
|
},
|
|
data() {
|
|
return {
|
|
noteId: "",
|
|
commentText: "",
|
|
topBanner: ["/uploads/20250826/17356ed4dcdeedcd13de60ca28909d22.png"],
|
|
swiperIndex: 0,
|
|
noteDetail: {
|
|
id: "",
|
|
title: "",
|
|
content: "",
|
|
image: "",
|
|
tags: [],
|
|
likes: 0,
|
|
isLiked: false,
|
|
createTime: "",
|
|
user: {
|
|
id: "",
|
|
name: "",
|
|
avatar: "",
|
|
isFollowed: false,
|
|
},
|
|
comments: [],
|
|
},
|
|
};
|
|
},
|
|
onLoad(options) {
|
|
if (options.id) {
|
|
this.noteId = options.id;
|
|
this.loadNoteDetail();
|
|
} else {
|
|
this.loadMockData();
|
|
}
|
|
},
|
|
methods: {
|
|
swiperChange(e) {
|
|
this.swiperIndex = e.detail.current;
|
|
},
|
|
// 加载笔记详情
|
|
async loadNoteDetail() {
|
|
try {
|
|
uni.showLoading({ title: "加载中..." });
|
|
// 模拟API调用
|
|
const res = await this.getNoteDetail(this.noteId);
|
|
this.noteDetail = res.data;
|
|
} catch (error) {
|
|
console.error("加载笔记详情失败:", error);
|
|
uni.showToast({
|
|
title: "加载失败",
|
|
icon: "none",
|
|
});
|
|
} finally {
|
|
uni.hideLoading();
|
|
}
|
|
},
|
|
|
|
// 加载模拟数据
|
|
loadMockData() {
|
|
this.noteDetail = {
|
|
id: "mock001",
|
|
title: "首期「桃园山河令」",
|
|
content:
|
|
"一周前，我们种下了一片想象中的桃园，并向江湖发出了一封「桃园山河令」，邀请你来分享属于自己的“桃园时刻”。未曾想到，这片初生的桃园，会迎来五湖四海如此多的“桃园客”——这是我们想送给每一位「EpicSoul交响」星球上「三个桃子」粉丝的名字。这些回响，来自每一位被「三个桃子」IP故事所触动的你。因为是你们，用一个个真实、温暖的故事，让我们想象中的那片桃园，迅速地枝繁叶茂，长满了沉甸甸的果实。",
|
|
image: "https://des.dayunyuanjian.cn/epicSoul/canal-town.jpg",
|
|
tags: ["时间里的约定", "审美", "治愈系调色"],
|
|
likes: 30,
|
|
isLiked: false,
|
|
createTime: "2025-08-20 14:30:00",
|
|
user: {
|
|
id: "user001",
|
|
name: "发布者",
|
|
avatar: "/uploads/20250826/b4b7c64ce37481e75742454c037e6407.png",
|
|
isFollowed: false,
|
|
},
|
|
comments: [
|
|
{
|
|
id: "comment001",
|
|
content:
|
|
"我的「桃园时刻」是和发小一起玩耍，阳光透过桃叶洒下斑驳光影，空气中弥漫着桃子的香甜。我们一起摘桃子，分享秘密，笑声在桃园里回荡。",
|
|
createTime: "2025-08-20 15:00:00",
|
|
user: {
|
|
id: "user002",
|
|
name: "@小新",
|
|
avatar:
|
|
"/uploads/20250826/d68433653e8b8cceba9bc4a6ab2a394d.png",
|
|
},
|
|
},
|
|
{
|
|
id: "comment002",
|
|
content:
|
|
"我的「桃园时刻」是和家人一起野餐，在桃树下享受美食，孩子们在周围嬉戏，欢声笑语让时光变得缓慢而美好。",
|
|
createTime: "2025-08-20 16:20:00",
|
|
user: {
|
|
id: "user003",
|
|
name: "Mr.曾",
|
|
avatar:
|
|
"/uploads/20250826/d68433653e8b8cceba9bc4a6ab2a394d.png",
|
|
},
|
|
},
|
|
],
|
|
};
|
|
},
|
|
|
|
// 预览图片
|
|
previewImage(imageUrl) {
|
|
uni.previewImage({
|
|
urls: [imageUrl],
|
|
current: imageUrl,
|
|
});
|
|
},
|
|
|
|
// 切换关注状态
|
|
toggleFollow() {
|
|
this.noteDetail.user.isFollowed = !this.noteDetail.user.isFollowed;
|
|
uni.showToast({
|
|
title: this.noteDetail.user.isFollowed ? "已关注" : "取消关注",
|
|
icon: "none",
|
|
});
|
|
},
|
|
|
|
// 切换点赞状态
|
|
toggleLike() {
|
|
this.noteDetail.isLiked = !this.noteDetail.isLiked;
|
|
this.noteDetail.likes += this.noteDetail.isLiked ? 1 : -1;
|
|
},
|
|
|
|
// 提交评论
|
|
async submitComment() {
|
|
if (!this.commentText.trim()) {
|
|
return;
|
|
}
|
|
|
|
const newComment = {
|
|
id: "comment" + Date.now(),
|
|
content: this.commentText,
|
|
createTime: new Date().toISOString(),
|
|
user: {
|
|
id: "current_user",
|
|
name: "我",
|
|
avatar:
|
|
"https://des.dayunyuanjian.cn/epicSoul/avatar-current.png",
|
|
},
|
|
};
|
|
|
|
this.noteDetail.comments.unshift(newComment);
|
|
this.commentText = "";
|
|
|
|
uni.showToast({
|
|
title: "评论成功",
|
|
icon: "success",
|
|
});
|
|
},
|
|
|
|
// 格式化时间
|
|
formatTime(timeString) {
|
|
const time = new Date(timeString);
|
|
const year = time.getFullYear();
|
|
const month = String(time.getMonth() + 1).padStart(2, "0");
|
|
const day = String(time.getDate()).padStart(2, "0");
|
|
return `${year}/${month}/${day}`;
|
|
},
|
|
|
|
// 模拟API - 获取笔记详情
|
|
async getNoteDetail(noteId) {
|
|
return new Promise((resolve) => {
|
|
setTimeout(() => {
|
|
this.loadMockData();
|
|
resolve({
|
|
code: 200,
|
|
data: this.noteDetail,
|
|
});
|
|
}, 100);
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.note-detail-container {
|
|
min-height: 100vh;
|
|
background: #f5f5f5;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.content-scroll {
|
|
flex: 1;
|
|
padding: 0;
|
|
}
|
|
|
|
// 笔记图片
|
|
.note-image-container {
|
|
width: 100%;
|
|
height: 500rpx;
|
|
overflow: hidden;
|
|
|
|
.note-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
|
|
// 作者信息
|
|
.author-section {
|
|
display: flex;
|
|
align-items: center;
|
|
background: #fff;
|
|
|
|
.author-avatar {
|
|
width: 95rpx;
|
|
height: 95rpx;
|
|
border-radius: 50%;
|
|
margin-right: 24rpx;
|
|
}
|
|
|
|
.author-info {
|
|
flex: 1;
|
|
|
|
.author-name {
|
|
display: block;
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
}
|
|
|
|
.follow-btn {
|
|
border-radius: 30rpx;
|
|
font-size: 28rpx;
|
|
color: #fff;
|
|
font-weight: bold;
|
|
border: 2rpx solid #02fcfc;
|
|
color: #333333;
|
|
background-color: white;
|
|
padding: 12rpx 30rpx;
|
|
&.followed {
|
|
background: #ccc;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 内容卡片容器
|
|
.content-card {
|
|
margin: 32rpx;
|
|
background: #fff;
|
|
border-radius: 0rpx;
|
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
|
|
overflow: hidden;
|
|
padding: 40rpx;
|
|
}
|
|
|
|
// 笔记标题
|
|
.note-title {
|
|
font-size: 36rpx;
|
|
font-weight: 600;
|
|
color: #333;
|
|
line-height: 1.4;
|
|
margin-bottom: 14rpx;
|
|
margin-top: 24rpx;
|
|
}
|
|
|
|
// 标签
|
|
.tags-section {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 16rpx;
|
|
margin-bottom: 32rpx;
|
|
|
|
.tag-item {
|
|
// background: #f8f9fa;
|
|
// border-radius: 20rpx;
|
|
font-size: 26rpx;
|
|
color: #666;
|
|
}
|
|
}
|
|
|
|
// 笔记内容
|
|
.note-content {
|
|
.content-text {
|
|
font-size: 30rpx;
|
|
line-height: 1.6;
|
|
color: #333;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
// 评论区域
|
|
.comments-section {
|
|
margin: 0 32rpx 32rpx;
|
|
border-radius: 0rpx;
|
|
.comments-header {
|
|
margin-bottom: 32rpx;
|
|
|
|
.comments-title {
|
|
font-size: 34rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
}
|
|
|
|
.comment-item {
|
|
display: flex;
|
|
margin-bottom: 32rpx;
|
|
|
|
.comment-avatar {
|
|
width: 64rpx;
|
|
height: 64rpx;
|
|
border-radius: 32rpx;
|
|
margin-right: 24rpx;
|
|
}
|
|
|
|
.comment-content {
|
|
flex: 1;
|
|
|
|
.comment-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 12rpx;
|
|
|
|
.comment-user {
|
|
font-size: 30rpx;
|
|
font-weight: bold;
|
|
color: #000000;
|
|
}
|
|
|
|
.comment-time {
|
|
font-size: 26rpx;
|
|
color: #999;
|
|
}
|
|
}
|
|
|
|
.comment-text {
|
|
font-size: 28rpx;
|
|
line-height: 1.5;
|
|
color: #000000;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.comment-input-section-box{
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 999;
|
|
box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
|
|
border-top: 1rpx solid #f0f0f0;
|
|
background: #fff;
|
|
}
|
|
// 底部评论输入
|
|
.comment-input-section {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 24rpx 32rpx 0;
|
|
padding-bottom: max(env(safe-area-inset-bottom),24rpx);
|
|
|
|
.comment-input {
|
|
flex: 1;
|
|
height: 80rpx;
|
|
background: #f8f9fa;
|
|
border-radius: 40rpx;
|
|
padding: 0 32rpx;
|
|
font-size: 28rpx;
|
|
border: none;
|
|
margin-right: 16rpx;
|
|
}
|
|
|
|
.send-btn {
|
|
width: 140rpx;
|
|
height: 67rpx;
|
|
line-height: 67rpx;
|
|
background: #94fafa;
|
|
color: #000000;
|
|
border-radius: 40rpx;
|
|
font-size: 30rpx;
|
|
border: none;
|
|
font-weight: 500;
|
|
margin-right: 24rpx;
|
|
|
|
&:disabled {
|
|
background: #ccc;
|
|
}
|
|
}
|
|
|
|
.like-section {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8rpx;
|
|
|
|
.like-icon {
|
|
width:36rpx;
|
|
transition: color 0.3s;
|
|
&.liked {
|
|
color: #ff4757;
|
|
}
|
|
}
|
|
|
|
.like-count {
|
|
font-size: 30rpx;
|
|
color: #666;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
|
|
.bottom-placeholder {
|
|
height: 130rpx;
|
|
width: 100%;
|
|
padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
|
|
padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
|
|
box-sizing: content-box;
|
|
}
|
|
.banner-content {
|
|
width: 100%;
|
|
height: 1000rpx;
|
|
position: relative;
|
|
|
|
.top-banner {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.dot-container {
|
|
position: absolute;
|
|
bottom: 43rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
left: 0;
|
|
|
|
.dot-line {
|
|
width: 52rpx;
|
|
height: 4rpx;
|
|
margin: 0 8rpx;
|
|
background: RGBA(189, 170, 173, 0.8);
|
|
|
|
&.active {
|
|
background: white;
|
|
}
|
|
}
|
|
}
|
|
|
|
.page-indicator {
|
|
position: absolute;
|
|
bottom: 20rpx;
|
|
right: 20rpx;
|
|
// background: rgba(0, 0, 0, 0.5);
|
|
border-radius: 10rpx;
|
|
padding: 10rpx 20rpx;
|
|
|
|
.page-text {
|
|
font-size: 24rpx;
|
|
color: #fff;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|