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

原文地址：https://blog.csdn.net/weixin_43659550/article/details/142418105

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！