From fe75cffbf3bae6777aa2794fd89fa5dc37f5df8d Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期二, 15 七月 2025 10:11:23 +0800
Subject: [PATCH] 项目初始化
---
src/pages_template/pages/comment/index.vue | 265 +++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 265 insertions(+), 0 deletions(-)
diff --git a/src/pages_template/pages/comment/index.vue b/src/pages_template/pages/comment/index.vue
new file mode 100644
index 0000000..46e33ea
--- /dev/null
+++ b/src/pages_template/pages/comment/index.vue
@@ -0,0 +1,265 @@
+<template>
+ <view>
+ <view class="comment" v-for="(res, index) in commentList" :key="res.id">
+ <view class="left">
+ <image :src="res.url" mode="aspectFill"></image>
+ </view>
+ <view class="right">
+ <view class="top">
+ <view class="name">{{ res.name }}</view>
+ <view class="like" :class="{ highlight: res.isLike }">
+ <view class="num">{{ res.likeNum }}</view>
+ <u-icon v-if="!res.isLike" name="thumb-up" :size="30" color="#9a9a9a"
+ @click="getLike(index)"></u-icon>
+ <u-icon v-if="res.isLike" name="thumb-up-fill" :size="30" @click="getLike(index)"></u-icon>
+ </view>
+ </view>
+ <view class="content">{{ res.contentText }}</view>
+ <view class="reply-box">
+ <view class="item" v-for="(item, index) in res.replyList" :key="item.index">
+ <view class="username">{{ item.name }}</view>
+ <view class="text">{{ item.contentStr }}</view>
+ </view>
+ <view class="all-reply" @tap="toAllReply" v-if="res.replyList != undefined">
+ 鍏眥{ res.allReply }}鏉″洖澶�
+ <u-icon class="more" name="arrow-right" :size="26"></u-icon>
+ </view>
+ </view>
+ <view class="bottom">
+ {{ res.date }}
+ <view class="reply">鍥炲</view>
+ </view>
+ </view>
+ </view>
+ </view>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import tab from '@/plugins/tab';
+
+const commentList = ref([]);
+
+onMounted(() => {
+ getComment();
+});
+
+const toAllReply = () => tab.navigateTo('/pages_template/pages/comment/reply')
+
+const getLike = (index) => {
+ commentList.value[index].isLike = !commentList.value[index].isLike;
+ if (commentList.value[index].isLike) {
+ commentList.value[index].likeNum++;
+ } else {
+ commentList.value[index].likeNum--;
+ }
+};
+
+const getComment = () => {
+ commentList.value = [
+ {
+ id: 1,
+ name: '鍙惰交鐪�',
+ date: '12-25 18:58',
+ contentText: '鎴戜笉淇′紛鏈椾細娌℃湁鍚庣画鍙嶅簲锛岀編鍥借偗瀹氫細涓轰粖澶╃殑浜嬫儏浠樺嚭浠ｄ环鐨�',
+ url: 'https://cdn.uviewui.com/uview/template/SmilingDog.jpg',
+ allReply: 12,
+ likeNum: 33,
+ isLike: false,
+ replyList: [
+ {
+ name: 'uview',
+ contentStr: 'uview鏄熀浜巙niapp鐨勪竴涓猆I妗嗘灦锛屼唬鐮佷紭缇庣畝娲侊紝瀹囧畽瓒呯骇鏃犳晫褰╄櫣鏃嬭浆濂界敤锛岀敤瀹冿紒'
+ },
+ {
+ name: '绮樼矘',
+ contentStr: '浠婂ぉ鍚冧粈涔堬紝鏄庡ぉ鍚冧粈涔堬紝鏅氫笂鍚冧粈涔堬紝鎴戝彧鏄竴鍙皬鐚挭涓轰粈涔堣鐑︽伡杩欎箞澶�'
+ }
+ ]
+ },
+ {
+ id: 2,
+ name: '鍙惰交鐪�1',
+ date: '01-25 13:58',
+ contentText: '鎴戜笉淇′紛鏈椾細娌℃湁鍚庣画鍙嶅簲锛岀編鍥借偗瀹氫細涓轰粖澶╃殑浜嬫儏浠樺嚭浠ｄ环鐨�',
+ allReply: 0,
+ likeNum: 11,
+ isLike: false,
+ url: 'https://cdn.uviewui.com/uview/template/niannian.jpg',
+ },
+ {
+ id: 3,
+ name: '鍙惰交鐪�2',
+ date: '03-25 13:58',
+ contentText: '鎴戜笉淇′紛鏈椾細娌℃湁鍚庣画鍙嶅簲锛岀編鍥借偗瀹氫細涓轰粖澶╃殑浜嬫儏浠樺嚭浠ｄ环鐨�',
+ allReply: 0,
+ likeNum: 21,
+ isLike: false,
+ allReply: 2,
+ url: '../../../static/logo.png',
+ replyList: [
+ {
+ name: 'uview',
+ contentStr: 'uview鏄熀浜巙niapp鐨勪竴涓猆I妗嗘灦锛屼唬鐮佷紭缇庣畝娲侊紝瀹囧畽瓒呯骇鏃犳晫褰╄櫣鏃嬭浆濂界敤锛岀敤瀹冿紒'
+ },
+ {
+ name: '璞嗗寘',
+ contentStr: '鎯冲悆鍐扮硸钁姦绮樿眴鍖咃紝浣嗘病閽�5555.........'
+ }
+ ]
+ },
+ {
+ id: 4,
+ name: '鍙惰交鐪�3',
+ date: '06-20 13:58',
+ contentText: '鎴戜笉淇′紛鏈椾細娌℃湁鍚庣画鍙嶅簲锛岀編鍥借偗瀹氫細涓轰粖澶╃殑浜嬫儏浠樺嚭浠ｄ环鐨�',
+ url: 'https://cdn.uviewui.com/uview/template/SmilingDog.jpg',
+ allReply: 0,
+ likeNum: 150,
+ isLike: false
+ }
+ ];
+};
+</script>
+
+<style lang="scss" scoped>
+.comment {
+ display: flex;
+ padding: 30rpx;
+ margin-bottom: 20rpx;
+ background-color: #ffffff;
+ border-radius: 12rpx;
+ box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
+ transition: all 0.3s;
+
+ &:hover {
+ box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
+ }
+
+ .left {
+ image {
+ width: 72rpx;
+ height: 72rpx;
+ border-radius: 50%;
+ background-color: #f2f2f2;
+ border: 2rpx solid #eaeaea;
+ box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
+ }
+ }
+
+ .right {
+ flex: 1;
+ padding-left: 24rpx;
+ font-size: 28rpx;
+ line-height: 1.6;
+
+ .top {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 12rpx;
+
+ .name {
+ color: #5677fc;
+ font-weight: 500;
+ font-size: 30rpx;
+ }
+
+ .like {
+ display: flex;
+ align-items: center;
+ color: #9a9a9a;
+ font-size: 26rpx;
+ padding: 4rpx 12rpx;
+ border-radius: 30rpx;
+ transition: all 0.2s;
+
+ &:active {
+ background-color: rgba(86, 119, 252, 0.1);
+ }
+
+ .num {
+ margin-right: 8rpx;
+ color: #9a9a9a;
+ }
+ }
+
+ .highlight {
+ color: #5677fc;
+
+ .num {
+ color: #5677fc;
+ }
+ }
+ }
+
+ .content {
+ margin-bottom: 16rpx;
+ color: #333333;
+ line-height: 1.8;
+ }
+
+ .reply-box {
+ background-color: #f7f7f7;
+ border-radius: 12rpx;
+ margin-top: 12rpx;
+ margin-bottom: 8rpx;
+ overflow: hidden;
+
+ .item {
+ padding: 20rpx;
+ border-bottom: solid 1rpx rgba(0, 0, 0, 0.05);
+
+ .username {
+ font-size: 26rpx;
+ color: #5677fc;
+ font-weight: 500;
+ margin-bottom: 6rpx;
+ }
+
+ .text {
+ font-size: 28rpx;
+ color: #333333;
+ }
+ }
+
+ .all-reply {
+ padding: 20rpx;
+ display: flex;
+ color: #5677fc;
+ align-items: center;
+ font-size: 26rpx;
+ transition: all 0.2s;
+
+ &:active {
+ background-color: rgba(86, 119, 252, 0.1);
+ }
+
+ .more {
+ margin-left: 6rpx;
+ }
+ }
+ }
+
+ .bottom {
+ margin-top: 20rpx;
+ display: flex;
+ font-size: 24rpx;
+ color: #9a9a9a;
+ align-items: center;
+
+ .reply {
+ color: #5677fc;
+ margin-left: 16rpx;
+ padding: 4rpx 16rpx;
+ border-radius: 30rpx;
+ transition: all 0.2s;
+
+ &:active {
+ background-color: rgba(86, 119, 252, 0.1);
+ }
+ }
+ }
+ }
+}
+</style>
--
Gitblit v1.9.3