<template> <view class="container"> <view class="course-list"> <view v-for="(course,index) in courses" :key="course.id"> <view class="course-item"> <view class="course-item-image"> <image class="course-image" :src="course.keChengTuPian" mode="aspectFill"></image> </view> <view class="course-item-content"> <view class="course-title"> <text>{{ course.keChengMingCheng }}</text> <!-- <image style="width: 25rpx;height: 25rpx;padding-left: 20rpx;" :src="course.isShouCang ? '/static/edu-icon/favi-icon.png' : '/static/edu-icon/no-favi-icon.png'"> </image> --> </view> <view class="course-type">{{ course.keChengLeXing }}</view> <view class="course-teacher"> <u-icon name="account" size="28"></u-icon> {{ course.shouKeZhe }} </view> <view class="course-date"> <u-icon name="clock" size="28"></u-icon> {{ getDateWeek(course.shouKeShiJian) }} </view> <!-- <view class="course-price">¥{{ course.jiaGe }}元</view> --> <!-- <button :class="['button', getButtonClass(course)]">{{ getButtonText(course) }}</button> --> </view> </view> <u-line /> </view> </view> </view> </template> <script setup> import { ref } from 'vue' import { onLoad } from '@dcloudio/uni-app' // 日期格式:xxxx年xx月xx日(星期x) function getDateWeek(val) { const date = new Date(val); const daysOfWeek = ['日', '一', '二', '三', '四', '五', '六']; const year = date.getFullYear(); const month = date.getMonth() + 1; // 注意:月份从0开始 const day = date.getDate(); const dayOfWeek = daysOfWeek[date.getUTCDay()]; // const result = `${year}年${month}月${day}日(星期${dayOfWeek})` return `${year}年${month}月${day}日(星期${dayOfWeek})` } const courses = ref([]); const initCourse = () =>{ // 获取列表 courses.value = [{ id: 1, keChengMingCheng: "前端开发基础前端开发基础前端开发基础", keChengLeXing: "精英训练营", shouKeZhe: "张老师", shouKeShiJian: "2023-10-01", keChengTuPian: "https://tse3-mm.cn.bing.net/th/id/OIP-C.YKoZzgmubNBxQ8j-mmoTKAHaEK?rs=1&pid=ImgDetMain", jiaGe: 99.00, isGouMai: false, isShouCang: true, fuFeiLeiXing: "免费" // 新增字段,标识课程的付费类型 }, { id: 2, keChengMingCheng: "Vue.js 从入门到精通", keChengLeXing: "领袖锻造营", shouKeZhe: "李老师", shouKeShiJian: "2023-09-15", keChengTuPian: "https://pic3.zhimg.com/v2-e52354ffdbd94a8e0a7649eacd34a788_r.jpg?source=1940ef5c", jiaGe: 199.00, isGouMai: false, isShouCang: false, fuFeiLeiXing: "会员免费" }, { id: 3, keChengMingCheng: "React 开发实战", keChengLeXing: "领袖锻造营", shouKeZhe: "王老师", shouKeShiJian: "2023-11-05", keChengTuPian: "https://desk-fd.zol-img.com.cn/t_s960x600c5/g4/M03/00/0C/Cg-4zFS8bC-Ie9zBADCvovJAqiEAATJ8wDX__cAMK-6184.jpg", jiaGe: 149.00, isGouMai: false, isShouCang: false, fuFeiLeiXing: "付费" }, { id: 4, keChengMingCheng: "Node.js 全栈开发", keChengLeXing: "合规专训营", shouKeZhe: "赵老师", shouKeShiJian: "2023-08-20", keChengTuPian: "https://pic3.zhimg.com/v2-e52354ffdbd94a8e0a7649eacd34a788_r.jpg?source=1940ef5c", jiaGe: 299.00, isGouMai: true, isShouCang: false, fuFeiLeiXing: "付费" }, { id: 5, keChengMingCheng: "移动端开发技巧", keChengLeXing: "精英训练营", shouKeZhe: "钱老师", shouKeShiJian: "2025-07-18", keChengTuPian: "https://desk-fd.zol-img.com.cn/t_s960x600c5/g4/M03/00/0C/Cg-4zFS8bC-Ie9zBADCvovJAqiEAATJ8wDX__cAMK-6184.jpg", jiaGe: 89.00, isGouMai: true, isShouCang: false, fuFeiLeiXing: "付费" }, { id: 6, keChengMingCheng: "11Vue.js 从入门到精通", keChengLeXing: "领袖锻造营", shouKeZhe: "李老师11", shouKeShiJian: "2023-09-15", keChengTuPian: "https://pic3.zhimg.com/v2-e52354ffdbd94a8e0a7649eacd34a788_r.jpg?source=1940ef5c", jiaGe: 199.00, isGouMai: true, isShouCang: false, fuFeiLeiXing: "会员免费" }, { id: 7, keChengMingCheng: "113Vue.js 从入门到精通", keChengLeXing: "领袖锻造营", shouKeZhe: "李老师11", shouKeShiJian: "2025-09-15", keChengTuPian: "https://pic3.zhimg.com/v2-e52354ffdbd94a8e0a7649eacd34a788_r.jpg?source=1940ef5c", jiaGe: 199.00, isGouMai: true, isShouCang: false, fuFeiLeiXing: "会员免费" }] } onLoad(() => { initCourse(); console.log('onLoad') }) </script> <style lang="scss" scoped> .container { // height: 100vh; width: 100vw; background-color: #fff; padding: 0 20rpx env(safe-area-inset-bottom, 0); } .course-item { margin: 20rpx 0; display: flex; overflow: hidden; .course-item-image { width: 200rpx; height: 260rpx; flex: 0 0 auto; margin-right: 20rpx; .course-image { width: 100%; } } .course-item-content { flex: 1; position: relative; view { margin-bottom: 15rpx; } .course-title { font-weight: bold; margin-right: 10px; font-size: 28rpx; color: #000; } .course-type, .course-teacher, .course-date, .course-price { font-size: 30rpx; color: #000; } .course-price { color: #fe0000; letter-spacing: 2rpx; } .button::after { content: none; /* 移除内容 */ } .button { position: absolute; right: 0; bottom: 0; min-width: 80px; padding: 0 40rpx; white-space: nowrap; height: 45rpx; line-height: 45rpx; font-size: 22rpx; /* padding: 0; */ border-radius: 50rpx; color: white; border: none; } .free { background-color: #006af4; } .purchase { background-color: #fe0000; } .member-free { background-color: transparent; background-image: url('~@/static/images/bg-label.png'); background-size: cover; background-repeat: no-repeat; color: #000; height: initial; padding: 6rpx 0 3rpx; border-radius: 0; } .replay { background-color: #006af4; } .purchased { background-color: #006af4; } } } </style>