443 lines
10 KiB
Vue
443 lines
10 KiB
Vue
<template>
|
|
<view class="article-container">
|
|
<!-- 头部信息 -->
|
|
<view class="header">
|
|
<view class="user-info">
|
|
<text class="username">{{ obj.tp }}</text>
|
|
<text class="post-time">{{ obj.timer }}</text>
|
|
</view>
|
|
<!-- <view :class="ista ? 'follow-btnfn' : 'follow-btn'" @click="ista = !ista"
|
|
>关注</view
|
|
> -->
|
|
</view>
|
|
|
|
<!-- 正文内容 -->
|
|
<view class="content">
|
|
<text class="intro-text"> </text>
|
|
|
|
<!-- 文章分段 -->
|
|
<view class="section">
|
|
<!-- <view class="section-number">01</view> -->
|
|
<view class="section-content">
|
|
<text class="section-title">{{ obj.title }}</text>
|
|
<text class="section-text">
|
|
{{ obj.conent }}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="card-body">
|
|
<view class="img-list">
|
|
<image
|
|
v-for="(imgUrl, imgIndex) in obj.imglist"
|
|
:key="imgIndex"
|
|
:src="imgUrl"
|
|
mode="aspectFill"
|
|
class="list-img"
|
|
/>
|
|
</view>
|
|
</view>
|
|
<view class="article-container">
|
|
<!-- ... existing code ... -->
|
|
<view class="comment-count">评论{{ cont.length }}</view>
|
|
<view class="divider"></view>
|
|
<!-- ... existing code ... -->
|
|
</view>
|
|
<view class="comment-container">
|
|
<view class="comment-card" v-for="(item, index) in cont" :key="index">
|
|
<!-- 用户信息行 -->
|
|
<view class="user-row">
|
|
<view class="user-info">
|
|
<text class="username">{{ item.name }}</text>
|
|
<text class="post-time">{{ item.time }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 评论内容 -->
|
|
<text class="comment-content">{{ item.content }}</text>
|
|
<!-- 操作按钮 -->
|
|
<view class="action-bar">
|
|
<!-- <view class="action-btn">
|
|
<uni-icons type="chat" size="16" color="#666"></uni-icons>
|
|
<text class="action-text">回复</text>
|
|
</view> -->
|
|
<view class="action-btn">
|
|
<uni-icons type="hand-up" size="16" color="#666"></uni-icons>
|
|
<text class="action-text">
|
|
<text class="stat-number">
|
|
<image
|
|
v-if="item.iszan"
|
|
@click="delmingdfun(item, index)"
|
|
src="@/static/img/index/xin.png"
|
|
:style="stylie"
|
|
></image>
|
|
<image
|
|
v-else
|
|
src="@/static/img/index/xin-3.png"
|
|
@click="mingdfun(item, index)"
|
|
:style="stylie"
|
|
></image>
|
|
<text> </text>
|
|
</text>
|
|
{{ item.zannum }}</text
|
|
>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 分割线 -->
|
|
<view class="divider" v-if="index < cont.length - 1"></view>
|
|
</view>
|
|
|
|
<view class="comment-input-area">
|
|
<textarea
|
|
v-model="newComment"
|
|
placeholder="请输入评论内容"
|
|
class="comment-input"
|
|
auto-height
|
|
></textarea>
|
|
<button @click="submitNewComment" class="submit-btn">提交评论</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import imgage from "@/static/logn.png"; // 导入图片资源
|
|
export default {
|
|
data() {
|
|
return {
|
|
newComment: "", // 用于存储新评论的内容
|
|
stylie: {
|
|
width: "20px", // 设置宽度为 20px
|
|
height: "20px", // 设置高度为 20px
|
|
marginRight: "10px", // 设置右边距为 10px
|
|
},
|
|
ista: false,
|
|
imgage: imgage,
|
|
obj: {},
|
|
cont: [
|
|
{
|
|
img: imgage, //图片
|
|
name: "aminf", //名字
|
|
content: "确实", //内容
|
|
time: "2025-06-2 13:00", //时间
|
|
zannum: 0, //点赞数
|
|
iszan: false, // 点赞状态，默认为未赞
|
|
},
|
|
],
|
|
};
|
|
},
|
|
onLoad(options) {
|
|
if (options.item) {
|
|
try {
|
|
this.obj = {};
|
|
const item = JSON.parse(decodeURIComponent(options.item));
|
|
this.obj = item;
|
|
item.pingcontent.forEach((any) => {
|
|
this.cont.push(any);
|
|
});
|
|
} catch (error) {
|
|
console.error("解析参数出错:", error);
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
submitNewComment() {
|
|
if (this.newComment.trim()) {
|
|
const userInfo = this.$options.filters.isLogin();
|
|
const currentDate = new Date();
|
|
const time = `${currentDate.getFullYear()}-${String(
|
|
currentDate.getMonth() + 1
|
|
).padStart(2, "0")}-${String(currentDate.getDate()).padStart(
|
|
2,
|
|
"0"
|
|
)} ${String(currentDate.getHours()).padStart(2, "0")}:${String(
|
|
currentDate.getMinutes()
|
|
).padStart(2, "0")}`;
|
|
// 添加新评论到列表（假设用户名为"匿名用户"，实际可替换为登录用户名）
|
|
this.cont.push({
|
|
img: userInfo.face, //图片
|
|
name: userInfo.nickName, //名字
|
|
content: this.newComment, //内容
|
|
time: time, //时间
|
|
zannum: 0, //点赞数
|
|
iszan: false, // 点赞状态，默认为未赞
|
|
});
|
|
|
|
// 清空输入框
|
|
this.newComment = "";
|
|
}
|
|
},
|
|
mingdfun(item, index) {
|
|
if (!this.cont[index].iszan) {
|
|
this.cont[index].zannum++;
|
|
this.cont[index].iszan = true; // 点赞状态改为已赞
|
|
}
|
|
},
|
|
delmingdfun(item, index) {
|
|
if (this.cont[index].iszan) {
|
|
this.cont[index].zannum--;
|
|
this.cont[index].iszan = false; // 点赞状态改为已赞
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.article-container {
|
|
padding: 20rpx;
|
|
background-color: #fff;
|
|
border-radius: 12rpx;
|
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
|
|
margin: 20rpx;
|
|
|
|
.header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20rpx;
|
|
.avatar {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
margin-right: 10px;
|
|
}
|
|
.user-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.username {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
|
|
.post-time {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
margin-top: 8rpx;
|
|
}
|
|
}
|
|
|
|
.follow-btn {
|
|
color: #1890ff;
|
|
border: 1rpx solid #1890ff;
|
|
padding: 8rpx 20rpx;
|
|
border-radius: 20rpx;
|
|
font-size: 24rpx;
|
|
}
|
|
.follow-btnfn {
|
|
color: #ffffff;
|
|
border: 1rpx solid red;
|
|
background: red;
|
|
padding: 8rpx 20rpx;
|
|
border-radius: 20rpx;
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
|
|
.content {
|
|
.intro-text {
|
|
font-size: 28rpx;
|
|
line-height: 1.6;
|
|
color: #333;
|
|
margin-bottom: 30rpx;
|
|
display: block;
|
|
}
|
|
|
|
.section {
|
|
// display: flex;
|
|
margin-bottom: 30rpx;
|
|
|
|
.section-number {
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
color: #1890ff;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.section-content {
|
|
flex: 1;
|
|
|
|
.section-title {
|
|
font-size: 30rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
display: block;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.section-text {
|
|
font-size: 28rpx;
|
|
line-height: 1.6;
|
|
color: #666;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.footer {
|
|
border-top: 1rpx solid #eee;
|
|
padding-top: 20rpx;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
}
|
|
.img-list {
|
|
display: flex;
|
|
// flex-wrap: wrap;
|
|
gap: 10px; /* 图片之间的间距 */
|
|
}
|
|
|
|
.list-img {
|
|
width: 200rpx; /* 图片宽度，根据需求调整 */
|
|
height: 200rpx; /* 图片高度，根据需求调整 */
|
|
border-radius: 8rpx; /* 图片圆角 */
|
|
object-fit: cover; /* 图片填充方式 */
|
|
}
|
|
.comment-container {
|
|
// padding: 20rpx;
|
|
background-color: #f8f8f8;
|
|
|
|
.comment-card {
|
|
background-color: #fff;
|
|
border-radius: 12rpx;
|
|
padding: 24rpx;
|
|
margin-bottom: 20rpx;
|
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
|
|
|
.user-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 16rpx;
|
|
|
|
.user-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.username {
|
|
font-size: 30rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
|
|
.post-time {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
margin-top: 4rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.comment-content {
|
|
font-size: 28rpx;
|
|
line-height: 1.5;
|
|
color: #333;
|
|
margin-bottom: 20rpx;
|
|
display: block;
|
|
}
|
|
|
|
.reply-section {
|
|
background-color: #f5f5f5;
|
|
border-radius: 8rpx;
|
|
padding: 16rpx;
|
|
margin-bottom: 20rpx;
|
|
|
|
.reply-item {
|
|
margin-bottom: 12rpx;
|
|
|
|
.reply-user {
|
|
font-size: 26rpx;
|
|
font-weight: bold;
|
|
color: #1890ff;
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
.reply-content {
|
|
font-size: 26rpx;
|
|
color: #666;
|
|
}
|
|
}
|
|
}
|
|
|
|
.action-bar {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 30rpx;
|
|
|
|
.action-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.action-text {
|
|
font-size: 26rpx;
|
|
color: #666;
|
|
margin-left: 8rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.divider {
|
|
height: 1rpx;
|
|
background-color: #eee;
|
|
margin: 24rpx -24rpx 0;
|
|
}
|
|
}
|
|
|
|
.no-more {
|
|
text-align: center;
|
|
font-size: 26rpx;
|
|
color: #999;
|
|
padding: 20rpx 0;
|
|
}
|
|
}
|
|
.divider {
|
|
height: 1rpx;
|
|
background-color: #eee;
|
|
margin: 24rpx -24rpx 0;
|
|
}
|
|
.comment-count {
|
|
font-size: 30rpx;
|
|
color: #333;
|
|
font-weight: bold;
|
|
padding: 15rpx 0;
|
|
margin: 0 20rpx;
|
|
border-bottom: 1rpx solid #f0f0f0;
|
|
}
|
|
.comment-input-area {
|
|
width: 95%;
|
|
display: flex;
|
|
align-items: center;
|
|
// padding-bottom: 220rpx;
|
|
gap: 20rpx;
|
|
padding: 20rpx;
|
|
background-color: #fff;
|
|
border-radius: 12rpx 12rpx 0 0; /* 顶部圆角，底部贴边 */
|
|
box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.05); /* 顶部阴影 */
|
|
|
|
/* 新增固定定位样式 */
|
|
position: fixed;
|
|
bottom: 0; /* 底部对齐 */
|
|
left: 0; /* 左侧对齐 */
|
|
right: 0; /* 右侧对齐 */
|
|
margin: 0 20rpx; /* 左右保留边距 */
|
|
box-sizing: border-box; /* 内边距不影响宽度 */
|
|
}
|
|
.submit-btn {
|
|
width: 160rpx; /* 按钮固定宽度 */
|
|
padding: 12rpx 0;
|
|
background-color: red;
|
|
color: #fff;
|
|
border-radius: 8rpx;
|
|
font-size: 28rpx;
|
|
white-space: nowrap;
|
|
}
|
|
.comment-container {
|
|
padding-bottom: 130rpx;
|
|
}
|
|
</style>
|