EP24 使用ai工具写js并完成分类页面的渲染

文件路径： 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 ''; // 大于三个月不返回
	}
}