文件路径： E:/homework/uniappv3tswallpaper/pages/classify/classify.vue

在该文件中添加了获取数据的函数同时传递了 pageSize 参数，并渲染到页面上。

<template><view class="classLayout pageBg"><custom-nav-bar title="分类"></custom-nav-bar><view class="classify"><theme-item v-for="item in classifyList" :key="item._id" :items="item"></theme-item></view></view>
</template><script setup>import {ref} from 'vue';import {apiGetClassify} from "@/api/apis.js"const classifyList = ref([])const getClassify = async () => {let res = await apiGetClassify({pageSize: 15})console.log(res)classifyList.value = res.data}getClassify()
</script><style lang="scss" scoped>.classify {padding: 30rpx;display: grid;grid-template-columns: repeat(3, 1fr);gap: 15rpx;}
</style>

文件路径： E:/homework/uniappv3tswallpaper/components/theme-item/theme-item.vue

该文件中引用了获取更新时间的函数 formatTimeDifference 。

<template><view class="themeItem"><navigator url="/pages/classlist/classlist" class="box" v-if="!isMore"><image class="pic" :src="items.picurl" mode="aspectFill"></image><view class="mask">{{items.name}}</view><view class="tab">{{formatTimeDifference(items.updateTime)}}</view></navigator><navigator url="/pages/classify/classify" open-type="reLaunch" class="box more" v-if="isMore"><image class="pic" src="../../common/images/more.jpg" mode="aspectFill"></image><view class="mask"><uni-icons type="more-filled" size="34" color="#fff"></uni-icons><view class="text">更多</view></view></navigator></view>
</template><script setup>import {formatTimeDifference} from "@/utils/common.js"defineProps({isMore: {type: Boolean,default: false},items: {type: Object,default () {return {name: "默认名称",picurl: "../../common/images/classify1.jpg",select: true,updateTime: Date.now() - 1000 * 60 * 60 * 5,}}}})
</script><style lang="scss">.themeItem {.box {height: 340rpx;border-radius: 10rpx;overflow: hidden;position: relative;.pic {width: 100%;height: 100%;}.mask {position: absolute;bottom: 0;left: 0;width: 100%;height: 70rpx;background-color: rgba(0, 0, 0, 0.2);color: #fff;display: flex;align-items: center;justify-content: center;font-weight: 600;backdrop-filter: blur(20rpx);}.tab {position: absolute;left: 0%;top: 0%;background: rgba(250, 190, 90, 0.7);backdrop-filter: blur(20rpx);color: #fff;padding: 6rpx 14rpx;border-radius: 0 0 20rpx 0;transform: scale(0.8);transform-origin: left top;}}.box.more {.mask {height: 100%;width: 100%;flex-direction: column;}.text {font-size: 28rpx;}}}
</style>

文件路径： E:/homework/uniappv3tswallpaper/utils/common.js

获取更新时间的函数，由 通义千问 完成。

export function formatTimeDifference(timestamp) {const now = new Date().getTime();const diff = (now - timestamp) / 1000; // 时间戳转换为秒if (diff <= 60) { // 小于一分钟return '刚刚更新';} else if (diff < 3600) { // 小于一小时const minutes = Math.floor(diff / 60);return `${minutes}分钟前更新`;} else if (diff < 86400) { // 小于一天const hours = Math.floor(diff / 3600);return `${hours}小时前更新`;} else if (diff < 2678400) { // 小于一个月（大约30天）const days = Math.floor(diff / 86400);return `${days}天前更新`;} else if (diff < 7948800) { // 小于三个月（大约90天）const months = Math.floor(diff / 2678400);return `${months}月前更新`;} else {return ''; // 大于三个月不返回}
}