冲刺记录12

今日任务:底部导航栏功能实现

遇到困难:无

<template>
    <div class="background-container">
        <!-- 模糊查询输入框 -->
        <input type="text" v-model="searchQuery" placeholder="请输入搜索关键字" class="search-input">
        <!-- 排序按钮 -->
        <div class="sorting-buttons">
            <button @click="sortByDate" class="sort-btn">按日期排序</button>
            <button @click="sortByLikes" class="sort-btn">按点赞数排序</button>
        </div>
        <!-- 展示从数据库中读取的所有结果 -->
        <div v-for="item in sortedItems" :key="item.id" class="item-container">
            <img :src="item.photo" alt="照片" class="photo">
            <p>地点: {{ item.place }}</p>
            <p>备注: {{ item.remark }}</p>
            <p>时间: {{ item.date }}</p>
            <!-- 操作按钮容器 -->
            <div class="action-buttons">
                <!-- 点赞按钮 -->
                <button @click="toggleLike(item)" :class="{ 'liked': likedItems.includes(item.id) }" class="like-btn">
                    <svg class="heart-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                        <path v-if="likedItems.includes(item.id)" class="red-heart"
                            d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
                        <path v-else class="gray-heart"
                            d="M16.5 3C14.76 3 13.09 3.81 12 5.09 10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.64 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 6.14-7.9 10.05z" />
                    </svg>
                    {{ item.likes }}
                </button>
                <!-- 查看评论按钮 -->
                <button @click="toggleComment(item)" class="comment-btn">查看发表评论</button>
            </div>
            <!-- 评论输入框 -->
            <div v-if="item.showComment" class="comment-modal" @click="closeModal(item)">
                <div class="modal-content">
                    <textarea v-model="item.comment" placeholder="请输入评论,恶语伤人哟" class="comment-input"></textarea>
                    <button @click="addComment(item)" class="comment-btn">发表评论</button>
                    <!-- 评论区域 -->
                    <div v-if="item.comments.length > 0" class="comments-section">
                        <div v-for="(comment, index) in item.comments" :key="index" class="comment">
                            {{ comment }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                items: [], // 用于存储从数据库读取的所有结果
                likedItems: [], // 用于存储用户已经点赞的项目的 id
                searchQuery: '', // 用于存储用户的模糊查询关键字
                sortBy: '', // 用于存储排序选项
            };
        },
        mounted() {
            // 页面加载后立即获取后端数据
            this.fetchData();
            // 从本地存储中加载用户点赞数据
            this.loadLikedItems();
        },
        computed: {
            // 根据用户输入的搜索关键字过滤项目列表
            filteredItems() {
                return this.items.filter(item => {
                    return (
                        (item.place?.toLowerCase() ?? '').includes(this.searchQuery.toLowerCase()) ||
                        (item.remark?.toLowerCase() ?? '').includes(this.searchQuery.toLowerCase()) ||
                        (item.date?.toLowerCase() ?? '').includes(this.searchQuery.toLowerCase())
                    );
                });
            },
            // 根据sortBy属性对过滤后的项目列表进行排序
            sortedItems() {
                let sortedData = this.filteredItems;
                if (this.sortBy === 'date') {
                    sortedData.sort((a, b) => new Date(b.date) - new Date(a.date));
                } else if (this.sortBy === 'likes') {
                    sortedData.sort((a, b) => b.likes - a.likes);
                }
                return sortedData;
            },
        },
        methods: {
            async toggleComment(item) {
                item.showComment = !item.showComment;
                if (item.showComment) {
                    await this.look(item);
                }
            },
            async look(item) {
                try {
                    const response = await fetch(`http://192.168.1.176:8081/book/${item.id}/comments`);
                    if (response.ok) {
                        const commentsData = await response.json();
                        if (typeof commentsData.comment === 'string') {
                            item.comments = [commentsData.comment];
                        } else {
                            console.error('获取评论数据格式错误:', commentsData);
                            item.comments = [];
                        }
                    } else {
                        console.error('获取评论失败:', response.statusText);
                        alert('获取评论失败,请稍后重试!');
                    }
                } catch (error) {
                    console.error('请求失败:', error);
                    alert('请求失败,请稍后重试!');
                }
            },
            async fetchData() {
                try {
                    const response = await fetch('http://192.168.1.176:8081/book');
                    if (response.ok) {
                        const data = await response.json();
                        data.forEach(item => {
                            item.likes = item.likes;
                            item.comment = '';
                            item.comments = [];
                            item.showComment = false;
                        });
                        this.items = data;
                    } else {
                        console.error('获取数据失败:', response.statusText);
                        alert('获取数据失败,请稍后重试!');
                    }
                } catch (error) {
                    console.error('请求失败:', error);
                    alert('请求失败,请稍后重试!');
                }
            },
posted @ 2024-05-01 20:56  徐星凯  阅读(8)  评论(0编辑  收藏  举报