zgt_branch
guotao_Z 1 year ago
parent 2e74396251
commit 27f1600197

@ -0,0 +1,270 @@
// pages/course/course.js
/*Page({
/**
* 页面的初始数据
data: {
},
/**
* 生命周期函数--监听页面加载
onLoad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
onReady() {
},
/**
* 生命周期函数--监听页面显示
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
onHide() {
},
/**
* 生命周期函数--监听页面卸载
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
onReachBottom() {
},
/**
* 用户点击右上角分享
onShareAppMessage() {
}
})*/
// pages/index/index.js
Page({
data: {
mounth:"11", // 显示月份
// 头部数据 (数据也可以存储在数据库中读取出来,这样代码可以减少许多)
allOver:[{
id:0, // ID
week:"日", // 周
date:"23" // 日
},{
id:1,
week:"一",
date:"24"
},{
id:2,
week:"二",
date:"25"
},{
id:3,
week:"三",
date:"26"
},{
id:4,
week:"四",
date:"27"
},{
id:5,
week:"五",
date:"28"
},{
id:6,
week:"六",
date:"29"
}],
// 课程数据 (如果要从数据库取数据,需要进行排序)
courseInfo:[{
id:0,
week:"星期日",
// 代表当天拥有的课程
courseList:[
// 同理也需要排序可以根据position来进行定位
{
id:0,
position:1,
ifexist:false,
},{
id:1,
position:2,
ifexist:true, // 存在与否属性
courseName:"高等数学", // 课程名称
courseRoom:"A-201" // 课程教室
},{
id:2,
position:3,
ifexist:false,
},{
id:3,
position:4,
ifexist:false,
}]
},{
id:1,
week:"星期一",
courseList:[{
id:0,
position:1,
ifexist:true,
courseName:"线性代数",
courseRoom:"B-301",
},{
id:1,
position:2,
ifexist:true,
courseName:"计算机导论",
courseRoom:"N25-101"
},{
id:2,
position:3,
ifexist:false,
},{
id:3,
position:4,
ifexist:false,
}]
},{
id:2,
week:"星期二",
courseList:[{
id:0,
position:1,
ifexist:false
},{
id:1,
position:2,
ifexist:true,
courseName:"数据结构",
courseRoom:"S3-201"
},{
id:2,
position:3,
ifexist:false,
},{
id:3,
position:4,
ifexist:false,
}]
},{
id:3,
week:"星期三",
courseList:[{
id:0,
position:1,
ifexist:false,
},{
id:1,
position:2,
ifexist:false,
},{
id:2,
position:3,
ifexist:true,
courseName:"互联网开发",
courseRoom:"N18-214"
},{
id:3,
position:4,
ifexist:false,
}]
},{
id:4,
week:"星期四",
courseList:[{
id:0,
position:1,
ifexist:true,
courseName:"程序设计基础",
courseRoom:"N25-333"
},{
id:1,
position:2,
ifexist:false,
},{
id:2,
position:3,
ifexist:false,
},{
id:3,
position:4,
ifexist:false,
}]
},{
id:5,
week:"星期五",
courseList:[{
id:0,
position:1,
ifexist:true,
courseName:"接口技术",
courseRoom:"N25-331"
},{
id:1,
position:2,
ifexist:false,
},{
id:2,
position:3,
ifexist:false,
},{
id:3,
position:4,
ifexist:false,
}]
},{
id:6,
week:"星期六",
courseList:[{
id:0,
position:1,
ifexist:true,
courseName:"Java程序设计",
courseRoom:"S5-101"
},{
id:1,
position:2,
ifexist:false,
},{
id:2,
position:3,
ifexist:false,
},{
id:3,
position:4,
ifexist:false,
}]
}]
},
onLoad(options) {
},
})

@ -0,0 +1,3 @@
{
"usingComponents": {}
}

@ -0,0 +1,64 @@
<!--pages/course/course.wxml-->
<text>pages/course/course.wxml</text>
<!--pages/index/index.wxml-->
<view class="farther_box">
<!-- 头部 -->
<view class="header_box">
<view class="header_item" style="font-weight: bold;font-size: 29rpx;margin-top: 10rpx;">
<view>10</view>
<view>月</view>
</view>
<block wx:for="{{allOver}}" wx:key="id">
<view class="header_item">
<view style="font-weight: bold;margin-bottom: 15rpx;">{{item.week}}</view>
<view style="color: #b2b2b2;">{{item.date}}</view>
</view>
</block>
</view>
<!-- 下划线 -->
<view style="width: 100%;height: 1rpx;background-color:#ccc ;margin: 8rpx 0;"></view>
<!-- 表体 -->
<view class="content_box">
<!-- 左 -->
<view class="content_left">
<view class="content_left_item" wx:for="{{8}}" wx:key="*this">
{{index+1}}
</view>
</view>
<!-- 右 -->
<view class="content_right">
<!-- 课表内容 -->
<view class="content_right_week_item" wx:for="{{courseInfo}}" wx:for-item="item1" wx:for-index="index1" wx:key="id">
<view class="content_right_course_item">
<view class="course_box" wx:for="{{4}}" wx:for-item="item2" wx:for-index="index2" wx:key="*this">
<!-- 根据每个课表的存在属性来判断是否显示 -->
<block wx:if="{{item1.courseList[index2].ifexist}}">
<view class="course_item">
<view style="font-size: small;text-align: center;padding: 5rpx;">
{{item1.courseList[index2].courseRoom}}
</view>
<view style="padding-top: 5rpx;">
{{item1.courseList[index2].courseName}}
</view>
</view>
</block>
</view>
</view>
</view>
<!-- 背景网格线 -->
<view style="position: absolute;width: 100%;height: 100%;z-index: 1;" >
<view class="gildLines">
<view style="flex: 1;border-bottom: 1rpx dashed #ccc;"wx:for="{{8}}" wx:key="*this"></view>
</view>
</view>
</view>
</view>
</view>

@ -0,0 +1,77 @@
/* pages/course/course.wxss */
page{
width: 100%;
height: 100%;
}
.farther_box{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
/* 头部样式 */
.header_box{
width: 100%;
display: flex;
}
.header_item{
flex: 5;
text-align: center;
/*border: 1rpx solid black;*/
margin-left: 10rpx;
margin-right: 10rpx;
}
/* 表体样式 */
.content_box{
display: flex;
height: 100%;
}
/* 左边 */
.content_left{
flex: 1;
text-align: center;
display: flex;
padding-top: 50rpx;
flex-direction: column;
}
.content_left_item{
flex: 1;
}
/* 右边 */
.content_right{
flex: 8;
display: flex;
position: relative;
}
.content_right_week_item{
height: 100%;
flex: 1;
z-index: 99;
}
.content_right_course_item{
display: flex;
flex-direction: column;
height: 100%;
}
.course_box{
flex: 1;
margin:8rpx 2rpx;
}
.course_item{
width: 100%;
height: 100%;
background-color: #9afffa;
border-radius: 15rpx;
}
.block{
flex: 1;
}
.gildLines{
display: flex;
height: 100%;
flex-direction: column;
}
Loading…
Cancel
Save