Leo_Ding/JinShan_uniapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
qiuyuan 2025-07-30 14:05:22 +08:00
parent 967b9289d0
commit 945dcd18c7
2 changed files with 586 additions and 772 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

627
pages/neighborDetail/index.vue
View File

@ -13,65 +13,63 @@
<text class="title">{{ postData.title }}</text> <text class="title">{{ postData.title }}</text>
<text class="content-text">{{ postData.content }}</text> <text class="content-text">{{ postData.content }}</text>
<view class="images" v-if="postData.images && postData.images.length"> <view class="images" v-if="postData.images && postData.images.length">
<image v-for="(img, index) in postData.images" :key="index" :src="img" class="post-image" :class="{ <image v-for="(img, index) in postData.images" :key="index" :src="`${IMAGE_BASE_URL}`+img"
class="post-image" :class="{
'single-img': postData.images.length === 1, 'single-img': postData.images.length === 1,
'double-img': postData.images.length === 2, 'double-img': postData.images.length === 2,
'multi-img': postData.images.length >= 3 'multi-img': postData.images.length >= 3
}" mode="aspectFill" @click="previewImage(index)"></image> }" mode="aspectFill" @click="previewImage(index)"></image>
</view> </view>
</view> </view>
<!-- <view class="post-footer">
<view class="post-actions">
<view class="action-item">
<text class="action-text">{{ getTotalComments() }}</text>
</view>
</view>
</view> -->
</view> </view>
<!-- 评论列表 --> <!-- 评论列表 -->
<view class="comments-container"> <view class="comments-container">
<view class="comments-title">评论 ({{ getTotalComments() }})</view> <view class="section-header">
<text class="section-title">评论 ({{ getTotalComments() }})</text>
</view>
<view class="comments-list"> <view class="comments-list">
<view v-for="(comment, index) in flatComments" :key="comment.id" class="comment-item" :style="{ <view v-for="comment in flatComments" :key="comment.id" class="comment-item"
'--level': comment.level, :class="{'is-reply': comment.toUserName}">
'--indent': comment.level > 0 ? (comment.level * 60) + 'rpx' : '0' <view class="comment-header">
}"> <image class="avatar" :src="comment.pusherPortrait" mode="aspectFill"></image>
<!-- 层级视觉指示线条 --> <view class="comment-user-info">
<view class="comment-level-indicator" v-if="comment.level > 0"></view> <text class="username">{{ comment.pusherName }}</text>
<view class="meta-info">
<!-- 评论内容区 --> <text v-if="comment.toUserName" class="reply-to">
<view class="comment-content-wrapper"> 回复 {{ comment.toUserName }}
<image class="comment-avatar" :src="comment.pusherPortrait" mode="aspectFill"></image>
<view class="comment-main">
<view class="comment-meta">
<text class="comment-username">{{ comment.pusherName }}</text>
<text class="comment-time">{{ formatTime(comment.createdAt) }}</text>
</view>
<view class="comment-text">{{ comment.content }}</view>
<view class="comment-actions">
<text class="reply-btn" @click="handleReply(comment.id)">回复</text>
<!-- 只在一级评论显示折叠按钮 -->
<text class="fold-btn" v-if="comment.level === 0 && hasChildren(comment)"
@click="toggleFold(comment.id)">
{{ getChildCount(comment) }}条回复{{ foldedComments.includes(comment.id) ? '展开' : '折叠' }}
</text> </text>
<text class="time">{{ formatTime(comment.createdAt) }}</text>
</view>
</view>
</view>
<view class="comment-content">{{ comment.content }}</view>
<view class="comment-actions">
<!-- <view class="action-item" @click="toggleLike(comment.id)">
<text class="action-icon">{{ comment.isLiked ? '👍' : '👎' }}</text>
<text class="action-count">{{ comment.likeCount || 0 }}</text>
</view> -->
<view class="action-item" @click="handleReply(comment.id)">
<text class="action-text">回复</text>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
<!-- 加载更多 -->
<view class="load-more" v-if="showLoadMore && !loading" @click="loadMoreComments">
<text>加载更多</text>
</view> </view>
</view> </view>
<!-- 新评论输入框 --> <!-- 新评论输入框 -->
<view class="comment-input-container"> <view class="comment-input-container">
<!-- 回复提示条 -->
<view class="replying-bar" v-if="replyingTo"> <view class="replying-bar" v-if="replyingTo">
<text class="replying-text">回复 @{{ getReplyUsername(replyingTo) }}</text> <text class="replying-text">回复 @{{ getReplyUsername(replyingTo) }}</text>
<text class="cancel-reply" @click="cancelReply">取消</text> <text class="cancel-reply" @click="cancelReply">取消</text>
</view> </view>
<view class="input-wrapper"> <view class="input-wrapper">
<input class="comment-input" v-model="newComment" :placeholder="replyingTo ? '输入回复内容...' : '写下你的评论...'" <input class="comment-input" v-model="newComment" :placeholder="replyingTo ? '输入回复内容...' : '写下你的评论...'"
@confirm="submitComment" /> @confirm="submitComment" />
@ -84,21 +82,13 @@
</template> </template>
<script> <script>
import { import { get, post } from '@/utils/request';
get, import { formatTime } from '@/utils/timeFormat';
post import { IMAGE_BASE_URL,BASE_URL } from '@/utils/config';
} from '@/utils/request';
import {
formatTime
} from '@/utils/timeFormat';
// import uniIcons from '@/components/uni-icons/uni-icons.vue';
export default { export default {
components: {
// uniIcons
},
data() { data() {
return { return {
IMAGE_BASE_URL,
Id: '', Id: '',
flatComments: [], flatComments: [],
newComment: "", newComment: "",
@ -109,8 +99,8 @@
loading: false, loading: false,
error: '', error: '',
submitting: false, submitting: false,
foldedComments: [], // 存储被折叠的评论ID foldedComments: [],
showLoadMore: false, // 是否显示加载更多 showLoadMore: false,
currentPage: 1, currentPage: 1,
pageSize: 10, pageSize: 10,
}; };
@ -125,9 +115,33 @@
} }
}, },
methods: { methods: {
// 扁平化评论结构（核心修改）
updateFlatComments() {
const flattenComments = (comments, parentUser = '') => {
return comments.reduce((arr, comment) => {
// 添加回复关系和点赞状态
const newComment = {
...comment,
toUserName: parentUser,
isLiked: false,
likeCount: comment.likeCount || 0
};
arr.push(newComment);
if (comment.children && comment.children.length) {
arr.push(...flattenComments(comment.children, comment.pusherName));
}
return arr;
}, []);
};
this.flatComments = flattenComments(this.postData.histories || []);
},
// 检查用户是否已登录 // 检查用户是否已登录
checkLogin() { checkLogin() {
const token = uni.getStorageSync('token'); // 假设token存储在本地 const token = uni.getStorageSync('token');
return !!token; return !!token;
}, },
@ -140,7 +154,7 @@
success: (res) => { success: (res) => {
if (res.confirm) { if (res.confirm) {
uni.navigateTo({ uni.navigateTo({
url: '/pages/mine/index' // 替换为实际的个人中心页面路径 url: '/pages/mine/index'
}); });
} }
} }
@ -151,65 +165,28 @@
previewImage(index) { previewImage(index) {
if (!this.postData.images || !this.postData.images.length) return; if (!this.postData.images || !this.postData.images.length) return;
const fullImageUrls = this.postData.images.map(imagePath => {
return IMAGE_BASE_URL + imagePath;
});
uni.previewImage({ uni.previewImage({
current: index, current: index,
urls: this.postData.images urls: fullImageUrls // 传递完整的 URL 数组
}); });
}, },
// 检查评论是否有子评论 // 切换点赞状态
hasChildren(comment) { toggleLike(commentId) {
return comment.children && comment.children.length > 0; const comment = this.flatComments.find(item => item.id === commentId);
}, if (comment) {
comment.isLiked = !comment.isLiked;
// 获取子评论数量 comment.likeCount += comment.isLiked ? 1 : -1;
getChildCount(comment) {
if (!this.hasChildren(comment)) return 0;
return comment.children.length;
},
// 切换折叠状态
toggleFold(commentId) {
const index = this.foldedComments.indexOf(commentId);
if (index === -1) {
this.foldedComments.push(commentId);
} else {
this.foldedComments.splice(index, 1);
} }
this.updateFlatComments();
}, },
// 更新平铺评论列表（处理折叠逻辑）
updateFlatComments() {
const flattenWithFold = (comments, level = 0, parentFolded = false) => {
return comments.reduce((arr, comment) => {
// 只有一级评论才检查折叠状态
const isFolded = level === 0 && this.foldedComments.includes(comment.id);
const currentFolded = parentFolded || isFolded;
if (!parentFolded) {
arr.push({
...comment,
level,
isFolded
});
}
// 如果是一级评论且被折叠，则不显示子评论
if (comment.children && comment.children.length && !(level === 0 && isFolded)) {
arr.push(...flattenWithFold(comment.children, level + 1, currentFolded));
}
return arr;
}, []);
};
this.flatComments = flattenWithFold(this.postData.histories || []);
},
// 加载更多评论 // 加载更多评论
loadMoreComments() { loadMoreComments() {
this.currentPage++; this.currentPage++;
// 这里应该调用API获取更多评论，示例中简化处理
this.getDetail(); this.getDetail();
}, },
@ -222,14 +199,12 @@
pageSize: this.pageSize pageSize: this.pageSize
}); });
if (!res?.success) throw new Error(res?.message || '获取详情失败'); if (!res?.success) throw new Error(res?.message || '获取详情失败');
if (this.currentPage === 1) { if (this.currentPage === 1) {
this.postData = res.data; this.postData = res.data;
} else { } else {
// 合并评论数据 // 合并评论数据
this.postData.histories = [...this.postData.histories, ...res.data.histories]; this.postData.histories = [...this.postData.histories, ...res.data.histories];
} }
this.updateFlatComments(); this.updateFlatComments();
this.showLoadMore = (res.data.histories.length >= this.pageSize); this.showLoadMore = (res.data.histories.length >= this.pageSize);
} catch (err) { } catch (err) {
@ -242,22 +217,16 @@
formatTime(isoTime) { formatTime(isoTime) {
if (!isoTime) return ''; if (!isoTime) return '';
return formatTime(isoTime); // 使用统一的格式化方法 return formatTime(isoTime);
}, },
// 计算总评论数 // 计算总评论数
getTotalComments() { getTotalComments() {
const count = (comments) => { return this.flatComments.length;
return comments.reduce((total, comment) => {
return total + 1 + (comment.children ? count(comment.children) : 0);
}, 0);
};
return count(this.postData.histories || []);
}, },
// 提交评论/回复 // 提交评论/回复
async submitComment() { async submitComment() {
// 检查用户是否已登录
if (!this.checkLogin()) { if (!this.checkLogin()) {
this.goToLogin(); this.goToLogin();
this.newComment = ""; this.newComment = "";
@ -266,7 +235,6 @@
const content = this.newComment.trim(); const content = this.newComment.trim();
if (!content || this.submitting) return; if (!content || this.submitting) return;
try { try {
this.submitting = true; this.submitting = true;
const requestData = { const requestData = {
@ -274,12 +242,10 @@
reciprocityId: this.postData.id, reciprocityId: this.postData.id,
rootHistoryId: this.replyingTo || "" rootHistoryId: this.replyingTo || ""
}; };
const response = await post( const response = await post(
'/api/v1/app_auth/reciprocities/send', '/api/v1/app_auth/reciprocities/send',
requestData requestData
); );
if (response.success) { if (response.success) {
this.newComment = ''; this.newComment = '';
this.replyingTo = null; this.replyingTo = null;
@ -309,7 +275,6 @@
// 处理回复按钮点击 // 处理回复按钮点击
handleReply(commentId) { handleReply(commentId) {
// 检查用户是否已登录
if (!this.checkLogin()) { if (!this.checkLogin()) {
this.goToLogin(); this.goToLogin();
return; return;
@ -332,150 +297,96 @@
// 获取被回复人的用户名 // 获取被回复人的用户名
getReplyUsername(commentId) { getReplyUsername(commentId) {
const findUser = (comments) => { const comment = this.flatComments.find(item => item.id === commentId);
for (const c of comments) { return comment ? comment.pusherName : '';
if (c.id === commentId) return c.pusherName;
if (c.children && c.children.length) {
const user = findUser(c.children);
if (user) return user;
}
}
return "";
};
return findUser(this.postData.histories);
} }
} }
}; };
</script> </script>
<style lang="scss"> <style lang="scss">
/* 使用SCSS增强样式能力 */ /* 基础变量定义 */
$primary-color: #4361ee; // 更现代的蓝色 $primary-color: #3881FF;
$primary-light: #e9f0ff; // 浅蓝色背景 $text-color: #333;
$text-color: #2d3748; // 深灰色文字 $light-text: #999;
$light-text: #718096; // 浅灰色文字 $border-color: #eee;
$border-color: #e2e8f0; // 更柔和的边框色 $bg-color: #f8f8f8;
$bg-color: #f7fafc; // 浅灰色背景 $radius-md: 16rpx;
$comment-bg: #ffffff; // 白色评论背景 $radius-sm: 8rpx;
$shadow-sm: 0 1rpx 3rpx rgba(0, 0, 0, 0.05); // 小阴影 $spacing-lg: 32rpx;
$shadow-md: 0 4rpx 6rpx rgba(0, 0, 0, 0.08); // 中等阴影 $spacing-md: 24rpx;
$radius-lg: 24rpx; // 大圆角 $spacing-sm: 16rpx;
$radius-md: 16rpx; // 中圆角
$radius-sm: 8rpx; // 小圆角
$transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); // 平滑过渡
.content { .content {
padding: 32rpx; padding: $spacing-lg;
background-color: $bg-color; background-color: white;
/* 增加底部内边距，确保内容不被输入框遮挡 */
padding-bottom: 240rpx; padding-bottom: 240rpx;
min-height: 100vh; min-height: 100vh;
box-sizing: border-box; box-sizing: border-box;
} }
/* 主帖样式优化 */ /* 主帖样式 */
.post-container { .post-container {
background-color: white; background-color: white;
border-radius: $radius-lg; padding: 0 0 $spacing-lg 0;
padding: 48rpx; margin-bottom: $spacing-lg;
margin-bottom: 40rpx; border-bottom: 1rpx solid $border-color;
box-shadow: $shadow-sm;
transition: $transition;
border: 1rpx solid $border-color;
&:hover {
box-shadow: $shadow-md;
transform: translateY(-1rpx);
}
&:active {
transform: translateY(0);
}
}
.post-header { .post-header {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 40rpx; margin-bottom: $spacing-md;
}
.avatar { .avatar {
width: 96rpx; width: 96rpx;
height: 96rpx; height: 96rpx;
border-radius: 50%; border-radius: 50%;
margin-right: 32rpx; margin-right: $spacing-md;
border: 2rpx solid white;
box-shadow: $shadow-sm;
background-color: #f5f5f5;
transition: $transition;
&:hover {
transform: scale(1.05);
}
} }
.post-info { .post-info {
flex: 1; flex: 1;
display: flex;
flex-direction: column;
}
.username { .username {
font-size: 32rpx; font-size: 32rpx;
font-weight: 600; font-weight: 600;
color: $text-color; color: $text-color;
line-height: 1.5; display: block;
margin-bottom: 8rpx;
} }
.time { .time {
font-size: 26rpx; font-size: 24rpx;
color: $light-text; color: $light-text;
line-height: 1.5; }
}
} }
.post-content { .post-content {
.title { .title {
font-size: 36rpx; font-size: 36rpx;
font-weight: 600; font-weight: 600;
color: #1a1a1a; color: $text-color;
margin-bottom: 32rpx; margin-bottom: $spacing-md;
display: block; display: block;
line-height: 1.6; line-height: 1.4;
letter-spacing: -0.01em;
} }
.content-text { .content-text {
font-size: 30rpx; font-size: 30rpx;
color: $text-color; color: $text-color;
line-height: 1.7; line-height: 1.6;
margin-bottom: 40rpx; margin-bottom: $spacing-lg;
display: block;
word-break: break-word;
}
} }
.images { .images {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 24rpx; gap: $spacing-sm;
margin-top: 32rpx;
}
.post-image { .post-image {
border-radius: $radius-md; border-radius: $radius-md;
background-color: #f5f5f5; background-color: $bg-color;
object-fit: cover;
transition: $transition;
box-shadow: $shadow-sm;
cursor: zoom-in;
&:hover {
transform: scale(1.02);
box-shadow: $shadow-md;
}
&:active {
transform: scale(0.98);
}
&.single-img { &.single-img {
width: 100%; width: 100%;
@ -483,186 +394,161 @@
} }
&.double-img { &.double-img {
width: calc(50% - 12rpx); width: calc(50% - 8rpx);
height: 360rpx; height: 360rpx;
} }
&.multi-img { &.multi-img {
width: calc(33.33% - 16rpx); width: calc(33.33% - 10.67rpx);
height: 240rpx; height: 240rpx;
} }
} }
}
/* 评论区样式优化 */ }
.comments-container {
background-color: white;
border-radius: $radius-lg;
padding: 0 40rpx;
margin-bottom: 32rpx;
box-shadow: $shadow-sm;
border: 1rpx solid $border-color;
} }
.comments-title { /* 评论区样式（核心修改） */
.comments-container {
background-color: white;
padding: 0;
.section-header {
padding: $spacing-md 0;
border-bottom: 1rpx solid $border-color;
margin-bottom: $spacing-md;
.section-title {
font-size: 32rpx; font-size: 32rpx;
font-weight: 600; font-weight: 600;
color: $text-color; color: $text-color;
padding: 40rpx 0;
border-bottom: 1rpx solid $border-color;
position: relative;
&::after {
content: "";
position: absolute;
left: 0;
bottom: -1rpx;
width: 80rpx;
height: 4rpx;
background-color: $primary-color;
} }
} }
.comments-list { .comments-list {
display: flex;
flex-direction: column;
}
.comment-item { .comment-item {
position: relative; padding: $spacing-md 0;
padding: 20rpx 0; border-bottom: 1rpx solid $border-color;
transition: $transition;
margin-bottom: 8rpx;
&:not(:last-child) { &.is-reply {
border-bottom: 1rpx solid rgba($border-color, 0.5); margin-left: 80rpx;
} /* 回复评论缩进 */
padding-left: $spacing-md;
&:hover { background-color: rgba(248, 248, 248, 0.5);
background-color: rgba($primary-light, 0.2);
border-radius: $radius-md; border-radius: $radius-md;
} margin-bottom: $spacing-sm;
} }
.comment-level-indicator { .comment-header {
position: absolute;
top: 70rpx;
width: 4rpx;
background-color: rgba($border-color, 0.5);
left: calc(60rpx + var(--indent) - 40rpx);
height: calc(100% - 70rpx);
}
.comment-content-wrapper {
display: flex; display: flex;
align-items: flex-start;
padding-left: var(--indent);
}
.comment-avatar {
width: 64rpx;
height: 64rpx;
border-radius: 50%;
margin-right: 24rpx;
flex-shrink: 0;
background-color: #f5f5f5;
border: 1rpx solid $border-color;
transition: $transition;
&:hover {
transform: scale(1.1);
}
}
.comment-main {
flex: 1;
padding-top: 0;
}
.comment-meta {
display: flex;
justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 8rpx; margin-bottom: $spacing-sm;
.avatar {
width: 72rpx;
height: 72rpx;
border-radius: 50%;
margin-right: $spacing-sm;
} }
.comment-username { .comment-user-info {
flex: 1;
.username {
font-size: 28rpx; font-size: 28rpx;
font-weight: 600;
color: $text-color; color: $text-color;
font-weight: 500; display: block;
margin-bottom: 4rpx;
} }
.comment-time { .meta-info {
display: flex;
align-items: center;
.reply-to {
font-size: 24rpx;
color: $primary-color;
margin-right: $spacing-sm;
}
.time {
font-size: 24rpx; font-size: 24rpx;
color: $light-text; color: $light-text;
} }
}
}
}
.comment-text { .comment-content {
font-size: 28rpx; font-size: 28rpx;
color: $text-color; color: $text-color;
line-height: 1.6; line-height: 1.5;
margin-bottom: 12rpx; margin-bottom: $spacing-sm;
padding: 8rpx 0; padding-left: 88rpx;
word-break: break-word; /* 与头像对齐 */
} }
.comment-actions { .comment-actions {
display: flex;
gap: $spacing-lg;
padding-left: 88rpx;
/* 与头像对齐 */
.action-item {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 32rpx; color: $light-text;
padding: 4rpx 0;
}
.reply-btn,
.fold-btn {
font-size: 24rpx; font-size: 24rpx;
color: $primary-color;
padding: 6rpx 12rpx;
border-radius: $radius-sm;
transition: $transition;
cursor: pointer;
background-color: rgba($primary-color, 0.05);
&:hover { .action-icon {
background-color: rgba($primary-color, 0.1); margin-right: 8rpx;
} }
&:active { &:active {
transform: scale(0.95); opacity: 0.7;
}
}
}
} }
} }
.fold-btn { /* 加载更多 */
.load-more {
display: flex;
align-items: center;
justify-content: center;
padding: $spacing-lg 0;
color: $light-text; color: $light-text;
background-color: rgba($light-text, 0.05); font-size: 28rpx;
cursor: pointer;
&:hover { &:active {
background-color: rgba($light-text, 0.1); color: $primary-color;
}
} }
} }
/* 评论输入框样式优化 */ /* 底部输入区 */
.comment-input-container { .comment-input-container {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
background-color: white; background-color: white;
padding: 24rpx 32rpx; padding: $spacing-md;
border-top: 1rpx solid $border-color; border-top: 1rpx solid $border-color;
box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.08); box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.08);
z-index: 100; z-index: 100;
}
.replying-bar { .replying-bar {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 16rpx 24rpx; padding: $spacing-sm $spacing-md;
background-color: $primary-light; background-color: $bg-color;
border-radius: $radius-md; border-radius: $radius-md;
margin-bottom: 16rpx; margin-bottom: $spacing-sm;
font-size: 26rpx; font-size: 26rpx;
}
.replying-text { .replying-text {
color: $primary-color; color: $primary-color;
@ -674,133 +560,44 @@
padding: 8rpx 16rpx; padding: 8rpx 16rpx;
border-radius: $radius-sm; border-radius: $radius-sm;
cursor: pointer; cursor: pointer;
transition: $transition;
background-color: rgba($primary-color, 0.1);
&:hover { &:active {
background-color: rgba($primary-color, 0.2); opacity: 0.7;
}
} }
} }
.input-wrapper { .input-wrapper {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 16rpx; gap: $spacing-md;
}
.comment-input { .comment-input {
flex: 1; flex: 1;
height: 88rpx; height: 80rpx;
padding: 0 32rpx; background-color: $bg-color;
border-radius: 40rpx;
padding: 0 $spacing-md;
font-size: 28rpx; font-size: 28rpx;
border: 1rpx solid $border-color;
border-radius: 48rpx;
background-color: #f5f5f5;
transition: $transition;
outline: none;
&:focus {
border-color: $primary-color;
background-color: #fff;
box-shadow: 0 0 0 4rpx rgba($primary-color, 0.1);
}
&::placeholder {
color: #a0aec0;
}
} }
.send-btn { .send-btn {
min-width: 140rpx;
height: 88rpx;
background-color: $primary-color; background-color: $primary-color;
color: white; color: white;
border: none;
border-radius: 48rpx;
font-size: 28rpx; font-size: 28rpx;
font-weight: 500; padding: 16rpx 32rpx;
transition: $transition; border-radius: 40rpx;
cursor: pointer; min-width: 120rpx;
display: flex; text-align: center;
align-items: center;
justify-content: center;
padding: 0 32rpx;
&:hover { &:disabled {
background-color: darken($primary-color, 5%); opacity: 0.5;
box-shadow: $shadow-sm;
} }
&:active { &:active {
background-color: darken($primary-color, 10%); opacity: 0.8;
transform: scale(0.98);
}
&:disabled {
background-color: #edf2f7;
color: #a0aec0;
cursor: not-allowed;
box-shadow: none;
} }
} }
/* 加载更多按钮 */
.load-more {
display: flex;
align-items: center;
justify-content: center;
padding: 32rpx 0;
color: $light-text;
font-size: 28rpx;
cursor: pointer;
transition: $transition;
&:hover {
color: $primary-color;
}
text {
margin-right: 16rpx;
}
}
/* 添加一些动画效果 */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20rpx); }
to { opacity: 1; transform: translateY(0); }
}
.comment-item {
animation: fadeIn 0.3s ease-out forwards;
}
/* 响应式调整 */
@media (max-width: 480px) {
.content {
padding: 24rpx;
padding-bottom: 220rpx;
}
.post-container {
padding: 32rpx;
}
.comment-input-container {
padding: 24rpx;
}
.comment-item {
padding: 16rpx 0;
margin-bottom: 8rpx;
}
.comment-avatar {
width: 56rpx;
height: 56rpx;
}
.comment-text {
font-size: 26rpx;
} }
} }
</style> </style>

45
pages/serviceTickets/index.vue
View File

@ -1,6 +1,37 @@
<template> <template>
<view class="container"> <view class="container">
<view class="content"> <view class="content">
<!-- 选择区域 -->
<view class="form-item">
<view class="label" @click="showSelect = true" style="margin-bottom: 0;">
<u-icon name="list" color="#3B8CFF" size="38"></u-icon>
选择区域
<view class="select-box">
{{ workOrderArea || '请选择' }}
<u-icon name="arrow-down" color="#999" size="30"></u-icon>
</view>
</view>
<u-picker :show="showSelect" :columns="areaList" keyName="label" @confirm="handleConfirm"
@cancel="handleCancel">
</u-picker>
</view>
<!-- 工单分类 -->
<view class="form-item">
<view class="label" @click="showSelect = true" style="margin-bottom: 0;">
<u-icon name="list" color="#3B8CFF" size="38"></u-icon>
工单类型
<view class="select-box">
{{ workOrderCategory || '请选择' }}
<u-icon name="arrow-down" color="#999" size="30"></u-icon>
</view>
</view>
<u-picker :show="showSelect" :columns="categoryList" keyName="label" @confirm="handleConfirm"
@cancel="handleCancel">
</u-picker>
</view>
<view class="form-item"> <view class="form-item">
<view class="label"> <view class="label">
<u-icon name="order" color="#3B8CFF" size="38"></u-icon> <u-icon name="order" color="#3B8CFF" size="38"></u-icon>
@ -44,20 +75,6 @@
<text class="note">注：照片可识别工单内容，支持分批上传，但最大数量为8</text> <text class="note">注：照片可识别工单内容，支持分批上传，但最大数量为8</text>
</view> </view>
<!-- 工单分类 -->
<view class="form-item">
<view class="label" @click="showSelect = true">
<u-icon name="list" color="#3B8CFF" size="38"></u-icon>
工单类型
<view class="select-box">
{{ workOrderCategory || '请选择' }}
<u-icon name="arrow-down" color="#999" size="30"></u-icon>
</view>
</view>
<u-picker :show="showSelect" :columns="categoryList" keyName="label" @confirm="handleConfirm"
@cancel="handleCancel">
</u-picker>
</view>
<!-- 工单地点 --> <!-- 工单地点 -->
<view class="form-item"> <view class="form-item">