Initial commit
This commit is contained in:
78
wechat-mini-program/pages/index/index.js
Normal file
78
wechat-mini-program/pages/index/index.js
Normal file
@@ -0,0 +1,78 @@
|
||||
const app = getApp()
|
||||
|
||||
Page({
|
||||
data: {
|
||||
projects: [],
|
||||
categories: [],
|
||||
userInfo: {},
|
||||
hasUserInfo: false,
|
||||
canIUse: wx.canIUse('button.open-type.getUserInfo'),
|
||||
canIUseGetUserProfile: false,
|
||||
canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName') // 如需尝试获取用户信息可改为false
|
||||
},
|
||||
onLoad() {
|
||||
if (wx.getUserProfile) {
|
||||
this.setData({
|
||||
canIUseGetUserProfile: true
|
||||
})
|
||||
}
|
||||
this.fetchData();
|
||||
},
|
||||
fetchData() {
|
||||
const { request } = require('../../utils/request')
|
||||
|
||||
request({ url: '/projects' })
|
||||
.then((data) => {
|
||||
const list = Array.isArray(data) ? data : (data && data.results) || []
|
||||
this.setData({ projects: list })
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
this.setData({
|
||||
projects: [
|
||||
{
|
||||
id: 1,
|
||||
title: 'Python 数据分析实战',
|
||||
category: '编程开发',
|
||||
image:
|
||||
'https://images.unsplash.com/photo-1526379095098-d400fd0bf935?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3',
|
||||
students: 1205,
|
||||
rating: 4.8,
|
||||
duration: '12 周'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: '零基础英语口语速成',
|
||||
category: '语言学习',
|
||||
image:
|
||||
'https://images.unsplash.com/photo-1543269865-cbf427effbad?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3',
|
||||
students: 850,
|
||||
rating: 4.9,
|
||||
duration: '8 周'
|
||||
}
|
||||
]
|
||||
})
|
||||
})
|
||||
|
||||
request({ url: '/categories' })
|
||||
.then((data) => {
|
||||
const list = Array.isArray(data) ? data : data
|
||||
this.setData({ categories: list })
|
||||
})
|
||||
.catch(() => {
|
||||
this.setData({
|
||||
categories: [
|
||||
{ name: '全部', color: 'bg-blue-100 text-blue-600' },
|
||||
{ name: '编程', color: 'bg-orange-100 text-orange-600' },
|
||||
{ name: '设计', color: 'bg-purple-100 text-purple-600' }
|
||||
]
|
||||
})
|
||||
})
|
||||
},
|
||||
goToDetail(e) {
|
||||
const id = e.currentTarget.dataset.id;
|
||||
wx.navigateTo({
|
||||
url: `/pages/detail/detail?id=${id}`,
|
||||
})
|
||||
}
|
||||
})
|
||||
6
wechat-mini-program/pages/index/index.json
Normal file
6
wechat-mini-program/pages/index/index.json
Normal file
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"navigationBarTitleText": "首页",
|
||||
"navigationBarBackgroundColor": "#2563eb",
|
||||
"navigationBarTextStyle": "white",
|
||||
"usingComponents": {}
|
||||
}
|
||||
65
wechat-mini-program/pages/index/index.wxml
Normal file
65
wechat-mini-program/pages/index/index.wxml
Normal file
@@ -0,0 +1,65 @@
|
||||
<view class="page-container">
|
||||
<!-- Header -->
|
||||
<view class="header">
|
||||
<view class="header-content">
|
||||
<view>
|
||||
<view class="greeting">你好,学员</view>
|
||||
<view class="title">今天想学点什么?</view>
|
||||
</view>
|
||||
<view class="bell-btn">🔔</view>
|
||||
</view>
|
||||
|
||||
<!-- Search Bar -->
|
||||
<view class="search-bar">
|
||||
<icon type="search" size="16" color="#9ca3af"></icon>
|
||||
<input type="text" placeholder="搜索项目名称..." placeholder-class="search-placeholder"/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="content-body">
|
||||
<!-- Banner -->
|
||||
<view class="banner">
|
||||
<view>
|
||||
<view class="banner-title">热门实训项目</view>
|
||||
<view class="banner-desc">参与项目实战,提升就业能力</view>
|
||||
<view class="banner-btn">立即查看</view>
|
||||
</view>
|
||||
<view class="banner-circle"></view>
|
||||
</view>
|
||||
|
||||
<!-- Categories -->
|
||||
<view class="section">
|
||||
<view class="section-header">
|
||||
<text class="section-title">热门分类</text>
|
||||
<text class="see-all">查看全部</text>
|
||||
</view>
|
||||
<scroll-view scroll-x="true" class="categories-scroll" enable-flex="true">
|
||||
<view class="categories-list">
|
||||
<block wx:for="{{categories}}" wx:key="name">
|
||||
<view class="category-item" style="background-color: {{index == 0 ? '#dbeafe' : (index == 1 ? '#ffedd5' : (index == 2 ? '#f3e8ff' : '#dcfce7'))}}; color: {{index == 0 ? '#2563eb' : (index == 1 ? '#ea580c' : (index == 2 ? '#9333ea' : '#16a34a'))}}">
|
||||
{{item.name}}
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<!-- Projects -->
|
||||
<view class="projects-list">
|
||||
<block wx:for="{{projects}}" wx:key="id">
|
||||
<view class="project-card" bindtap="goToDetail" data-id="{{item.id}}">
|
||||
<image class="project-image" src="{{item.image}}" mode="aspectFill"></image>
|
||||
<view class="project-info">
|
||||
<view class="project-category-tag">{{item.category}}</view>
|
||||
<view class="project-title">{{item.title}}</view>
|
||||
<view class="project-meta">
|
||||
<view class="meta-item"><text class="icon">👥</text> {{item.students}}</view>
|
||||
<view class="meta-item"><text class="icon">⭐</text> {{item.rating}}</view>
|
||||
<view class="meta-item"><text class="icon">🕒</text> {{item.duration}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
224
wechat-mini-program/pages/index/index.wxss
Normal file
224
wechat-mini-program/pages/index/index.wxss
Normal file
@@ -0,0 +1,224 @@
|
||||
.page-container {
|
||||
padding-bottom: 50rpx;
|
||||
background-color: #f9fafb;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.header {
|
||||
background-color: #2563eb;
|
||||
padding: 40rpx 30rpx 80rpx 30rpx;
|
||||
border-bottom-left-radius: 40rpx;
|
||||
border-bottom-right-radius: 40rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.greeting {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
color: white;
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.bell-btn {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
padding: 15rpx;
|
||||
border-radius: 50%;
|
||||
color: white;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
position: absolute;
|
||||
bottom: -40rpx;
|
||||
left: 30rpx;
|
||||
right: 30rpx;
|
||||
background-color: white;
|
||||
border-radius: 30rpx;
|
||||
padding: 20rpx 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.search-bar input {
|
||||
margin-left: 20rpx;
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.search-placeholder {
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.content-body {
|
||||
padding: 60rpx 30rpx 0 30rpx;
|
||||
}
|
||||
|
||||
.banner {
|
||||
background: linear-gradient(to right, #fb923c, #ef4444);
|
||||
border-radius: 30rpx;
|
||||
padding: 30rpx;
|
||||
color: white;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 8rpx 16rpx rgba(239, 68, 68, 0.2);
|
||||
margin-bottom: 40rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.banner-circle {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
right: -20rpx;
|
||||
bottom: -20rpx;
|
||||
filter: blur(20rpx);
|
||||
}
|
||||
|
||||
.banner-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.banner-desc {
|
||||
font-size: 24rpx;
|
||||
opacity: 0.9;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.banner-btn {
|
||||
background-color: white;
|
||||
color: #f97316;
|
||||
font-size: 24rpx;
|
||||
padding: 10rpx 24rpx;
|
||||
border-radius: 30rpx;
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.see-all {
|
||||
font-size: 24rpx;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.categories-scroll {
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.categories-list {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.category-item {
|
||||
padding: 16rpx 40rpx;
|
||||
border-radius: 40rpx;
|
||||
font-size: 28rpx;
|
||||
margin-right: 20rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.projects-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 30rpx;
|
||||
}
|
||||
|
||||
.project-card {
|
||||
background-color: white;
|
||||
padding: 24rpx;
|
||||
border-radius: 30rpx;
|
||||
box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.project-image {
|
||||
width: 192rpx;
|
||||
height: 192rpx;
|
||||
border-radius: 20rpx;
|
||||
flex-shrink: 0;
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.project-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.project-category-tag {
|
||||
font-size: 20rpx;
|
||||
color: #3b82f6;
|
||||
background-color: #eff6ff;
|
||||
padding: 4rpx 12rpx;
|
||||
border-radius: 8rpx;
|
||||
display: inline-block;
|
||||
align-self: flex-start;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.project-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
color: #1f2937;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.project-meta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.meta-item {
|
||||
font-size: 20rpx;
|
||||
color: #9ca3af;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-right: 4rpx;
|
||||
}
|
||||
Reference in New Issue
Block a user