php
/
ZhiHuiJiaoWu_UniApp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

1

master
于宏哲PHP 9 months ago
parent
9c692f4f96
commit
1d109e3d83
3 changed files with 464 additions and 330 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 16
      api/apiRoute.js
  2. 420
      pages/market/clue/class_arrangement.vue
  3. 358
      pages/market/clue/class_arrangement_detail.vue

16
api/apiRoute.js
View File

@ -334,4 +334,20 @@ export default {
async updateCallUp(data={}) { async updateCallUp(data={}) {
return await http.post('/per_update_call_up', data); return await http.post('/per_update_call_up', data);
}, },
async getDate(data={}) {
return await http.get('/course/get_date', data);
},
async courseAllList(data = {}) {
return await http.get('/course/courseAllList', data);
},
async addSchedule(data = {}) {
return await http.post('/course/addSchedule', data);
},
async scheduleList(data = {}) {
return await http.get('/course/scheduleList', data);
},
} }

420
pages/market/clue/class_arrangement.vue
View File

@ -1,196 +1,238 @@
<template> <template>
<view class="class-arrange-root"> <view class="class-arrange-root">
<!-- 顶部日期选择 --> <!-- 顶部日期选择 -->
<view class="date-bar"> <view class="date-bar">
<view class="date-item" v-for="(item, idx) in weekList" :key="idx" :class="{active: idx === selectedDayIndex}"> <view class="date-item" v-for="(item, idx) in weekList" :key="idx" :class="{active: item.status}" @click="getDate(item.date,item.day)">
<view class="week">{{ item.week }}</view> <view class="week">{{ item.week }}</view>
<view class="day">{{ item.day }}</view> <view class="day">{{ item.day }}</view>
</view> </view>
</view> </view>
<!-- "查看更多"按钮移到日期条下方 --> <!-- "查看更多"按钮移到日期条下方 -->
<view class="more-bar-wrapper"> <view class="more-bar-wrapper">
<view class="more-bar" @click="openCalendar"> <view class="more-bar" @click="openCalendar">
<text>查看更多</text> <text>查看更多</text>
<uni-icons type="arrowdown" size="18" color="#bdbdbd" /> <uni-icons type="arrowdown" size="18" color="#bdbdbd" />
</view> </view>
</view> </view>
<!-- 日历底部弹窗 --> <!-- 日历底部弹窗 -->
<uni-popup ref="calendarPopup" type="bottom"> <uni-popup ref="calendarPopup" type="bottom">
<uni-calendar @confirm="onCalendarConfirm" @close="closeCalendar" /> <uni-calendar @change="onCalendarChange" />
</uni-popup> </uni-popup>
<!-- 课程卡片列表 --> <!-- 课程卡片列表 -->
<view class="course-list"> <view class="course-list">
<view class="course-card" v-for="(course, idx) in courseList" :key="idx"> <view class="course-card" v-for="(course, idx) in courseList" :key="idx">
<view class="card-header"> <view class="card-header">
<view class="status-end">已结束</view> <view class="status-end">{{ getStatusText(course.status) }}</view>
</view> </view>
<view class="card-body"> <view class="card-body">
<view class="row">时间：{{ course.date }}</view> <view class="row">时间：{{ course.course_date }}</view>
<view class="row">教室：{{ course.classroom }}</view> <view class="row">教室：{{ course.venue.venue_name }}</view>
<view class="row">课程：{{ course.name }}</view> <view class="row">课程：{{ course.course.course_name }}</view>
<view class="row">人数：{{ course.count }}</view> <view class="row">人数：{{ course.available_capacity }}</view>
</view> </view>
<view class="card-footer"> <view class="card-footer">
<view class="sign-info">已签到学生 (0/{{ course.count }})</view> <view class="sign-info"></view>
<button class="detail-btn" @click="viewDetail(course)">详情</button> <button class="detail-btn" @click="viewDetail(course)">详情</button>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
export default { import apiRoute from '@/api/apiRoute.js';
data() { export default {
return { data() {
weekList: [ return {
{ week: '星期一', day: 11 }, weekList: [],
{ week: '星期二', day: 12 }, selectedDayIndex: 4,
{ week: '星期三', day: 13 }, date: '',
{ week: '星期四', day: 14 }, courseList: [],
{ week: '星期五', day: 15 }, resource_id:''
{ week: '星期六', day: 16 }, };
{ week: '星期日', day: 17 }, },
], onLoad(options) {
selectedDayIndex: 4, this.resource_id = options.resource_id
courseList: [ this.getDate();
{
date: '2025-06-15', },
classroom: '时间范围教室', methods: {
name: '大课7+1类型', async getDate(date = '', day = '') {
count: 10, try {
}, let res = await apiRoute.getDate({
{ 'date': date,
date: '2025-06-15', 'day': day
classroom: '时间范围教室', })
name: '大课5+1', this.weekList = res.data.dates
count: 10, this.date = res.data.date
},
], let data = await apiRoute.courseAllList({
}; 'schedule_date': this.date
}, })
methods: { this.courseList = data.data
openCalendar() {
this.$refs.calendarPopup.open();
}, } catch (error) {
closeCalendar() { console.error('获取信息失败:', error);
this.$refs.calendarPopup.close(); }
}, },
viewDetail(course) { openCalendar() {
// 跳转到课程详情页 this.$refs.calendarPopup.open();
this.$navigateTo({ },
url: '/pages/market/clue/class_arrangement_detail?date=' + course.date closeCalendar() {
}); console.log(123123)
}, this.$refs.calendarPopup.close();
onCalendarConfirm(e) { },
this.closeCalendar(); viewDetail(course) {
// 这里可以处理选中的日期 e.fulldate // 跳转到课程详情页
uni.showToast({ title: '选择日期：' + e.fulldate, icon: 'none' }); this.$navigateTo({
}, url: '/pages/market/clue/class_arrangement_detail?id=' + course.id+'&resource_id='+this.resource_id
}, });
}; },
onCalendarConfirm(e) {
// 这里可以处理选中的日期 e.fulldate
uni.showToast({
title: '选择日期：' + e.fulldate,
icon: 'none'
});
this.closeCalendar();
},
onCalendarChange(e) {
this.getDate(e.fulldate, e.date);
this.closeCalendar();
},
getStatusText(status) {
const statusMap = {
pending: '待开始',
upcoming: '即将开始',
ongoing: '进行中',
completed: '已结束'
};
return statusMap[status] || status;
}
},
};
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.class-arrange-root { .class-arrange-root {
background: #232323; background: #232323;
min-height: 100vh; min-height: 100vh;
padding-bottom: 30rpx; padding-bottom: 30rpx;
} }
.date-bar {
display: flex; .date-bar {
align-items: center; display: flex;
background: #232323; align-items: center;
padding: 0 0 10rpx 0; background: #232323;
overflow-x: auto; padding: 0 0 10rpx 0;
border-bottom: 1px solid #333; overflow-x: auto;
.date-item { border-bottom: 1px solid #333;
flex: 1;
text-align: center; .date-item {
color: #bdbdbd; flex: 1;
padding: 16rpx 0 0 0; text-align: center;
.week { color: #bdbdbd;
font-size: 22rpx; padding: 16rpx 0 0 0;
}
.day { .week {
font-size: 28rpx; font-size: 22rpx;
margin-top: 4rpx; }
}
&.active { .day {
color: #29d3b4; font-size: 28rpx;
.day { margin-top: 4rpx;
border-radius: 50%; }
background: #333;
color: #29d3b4; &.active {
padding: 2rpx 10rpx; color: #29d3b4;
}
} .day {
} border-radius: 50%;
} background: #333;
.more-bar-wrapper { color: #29d3b4;
width: 100%; padding: 2rpx 10rpx;
display: flex; }
justify-content: center; }
margin: 10rpx 0 0 0; }
} }
.more-bar {
display: flex; .more-bar-wrapper {
align-items: center; width: 100%;
color: #bdbdbd; display: flex;
font-size: 22rpx; justify-content: center;
cursor: pointer; margin: 10rpx 0 0 0;
background: #333; }
border-radius: 20rpx;
padding: 8rpx 24rpx; .more-bar {
} display: flex;
.course-list { align-items: center;
margin-top: 20rpx; color: #bdbdbd;
.course-card { font-size: 22rpx;
background: #434544; cursor: pointer;
border-radius: 10rpx; background: #333;
margin: 0 0 20rpx 0; border-radius: 20rpx;
padding: 0 0 20rpx 0; padding: 8rpx 24rpx;
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.08); }
.card-header {
display: flex; .course-list {
justify-content: flex-end; margin-top: 20rpx;
padding: 10rpx 20rpx 0 0;
.status-end { .course-card {
background: #e95c6b; background: #434544;
color: #fff; border-radius: 10rpx;
border-radius: 10rpx; margin: 0 0 20rpx 0;
padding: 4rpx 18rpx; padding: 0 0 20rpx 0;
font-size: 22rpx; box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
}
} .card-header {
.card-body { display: flex;
padding: 0 20rpx; justify-content: flex-end;
.row { padding: 10rpx 20rpx 0 0;
color: #fff;
font-size: 24rpx; .status-end {
margin: 8rpx 0; background: #e95c6b;
} color: #fff;
} border-radius: 10rpx;
.card-footer { padding: 4rpx 18rpx;
display: flex; font-size: 22rpx;
justify-content: space-between; }
align-items: center; }
padding: 0 20rpx;
.sign-info { .card-body {
color: #bdbdbd; padding: 0 20rpx;
font-size: 22rpx;
} .row {
.detail-btn { color: #fff;
background: transparent; font-size: 24rpx;
border: 2rpx solid #ffd86b; margin: 8rpx 0;
color: #ffd86b; }
border-radius: 8rpx; }
padding: 6rpx 24rpx;
font-size: 24rpx; .card-footer {
margin-left: 10rpx; display: flex;
} justify-content: space-between;
} align-items: center;
} padding: 0 20rpx;
}
</style> .sign-info {
color: #bdbdbd;
font-size: 22rpx;
}
.detail-btn {
background: transparent;
border: 2rpx solid #ffd86b;
color: #ffd86b;
border-radius: 8rpx;
padding: 6rpx 24rpx;
font-size: 24rpx;
margin-left: 10rpx;
}
}
}
}
</style>

358
pages/market/clue/class_arrangement_detail.vue
View File

@ -1,148 +1,224 @@
<template> <template>
<view class="detail-root"> <view class="detail-root">
<view class="header"> <view class="header">
<view class="title">课程安排详情</view> <view class="title">课程安排详情</view>
<view class="date">日期：{{ date }}</view> <view class="date">日期：{{ course_info.course_date }} {{course_info.time_slot}}</view>
</view> </view>
<view class="section"> <view class="section">
<view class="section-title">学员列表</view> <view class="section-title">学员列表</view>
<view class="student-list"> <view class="student-list">
<view v-for="(stu, idx) in students" :key="idx" class="student-item"> <view v-for="(stu, idx) in students" :key="idx" class="student-item">
<view class="avatar">{{ stu.name.charAt(0) }}</view> <view class="avatar">{{ stu.name.charAt(0) }}</view>
<view class="info"> <view class="info">
<view class="name">{{ stu.name }}</view> <view class="name">{{ stu.name }}</view>
<view class="desc">{{ stu.desc }}</view> <view class="desc">{{ getStatusText(stu.status)}}</view>
</view> </view>
</view> </view>
<view <view v-for="n in course_info.available_capacity" :key="n" class="student-item empty" @tap="addStudent" :data-index="n">
v-for="n in emptyArray" <view class="avatar empty-avatar">+</view>
:key="n" <view class="info">
class="student-item empty" <view class="name">空位</view>
@tap="addStudent" <view class="desc">点击添加学员</view>
:data-index="n" </view>
> </view>
<view class="avatar empty-avatar">+</view> </view>
<view class="info"> </view>
<view class="name">空位</view> </view>
<view class="desc">点击添加学员</view>
</view>
</view>
</view>
</view>
</view>
</template> </template>
<script> <script>
export default { import apiRoute from '@/api/apiRoute.js';
data() { export default {
return { data() {
date: '', return {
students: [ course_id:'',
{ name: '张三', desc: '已签到' }, course_info:[],
{ name: '李四', desc: '未签到' }, date: '',
], students: [
maxCount: 5, // {
}; // name: '张三',
}, // desc: '已签到'
computed: { // },
emptyCount() { // {
return this.maxCount - this.students.length; // name: '李四',
}, // desc: '未签到'
emptyArray() { // },
return Array.from({length: this.emptyCount}, (v, i) => i + 1); ],
}, resource_id:''
}, };
onLoad(query) { },
this.date = query.date || ''; onLoad(query) {
}, this.course_id = query.id || '';
methods: { this.resource_id = query.resource_id
addStudent(e) { this.courseInfo();
const n = e.currentTarget.dataset.index; },
uni.showToast({ title: '添加学员功能待实现，空位号：' + n, icon: 'none' }); methods: {
}, getStatusText(status) {
}, const statusMap = {
}; 0: '待上课',
1: '已上课',
2: '请假'
};
return statusMap[status] || status;
},
async scheduleList() {
try {
let res = await apiRoute.scheduleList({
'schedule_id': this.course_id
})
console.log(res);
this.students = res.data
} catch (error) {
console.error('获取信息失败:', error);
}
},
async courseInfo() {
try {
let res = await apiRoute.courseInfo({
'id': this.course_id
})
this.course_info = res.data
this.scheduleList();
} catch (error) {
console.error('获取信息失败:', error);
}
},
async addStudent(e) {
const data = {
'resources_id':this.resource_id,
'person_type':'customer_resource',
'schedule_id':this.course_id,
'course_date':this.course_info.course_date,
'time_slot':this.course_info.time_slot
};
try {
let res = await apiRoute.addSchedule(data)
if(res.code == 1){
uni.showToast({
title: '添加成功',
icon: 'none'
});
this.courseInfo();
}else{
uni.showToast({
title: res.msg,
icon: 'none'
});
}
} catch (error) {
uni.showToast({
title: '添加失败',
icon: 'none'
});
}
// const n = e.currentTarget.dataset.index;
// uni.showToast({
// title: '添加学员功能待实现，空位号：' + n,
// icon: 'none'
// });
},
},
};
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.detail-root { .detail-root {
background: #232323; background: #232323;
min-height: 100vh; min-height: 100vh;
padding-bottom: 30rpx; padding-bottom: 30rpx;
} }
.header {
padding: 40rpx 30rpx 20rpx 30rpx; .header {
.title { padding: 40rpx 30rpx 20rpx 30rpx;
color: #fff;
font-size: 36rpx; .title {
font-weight: bold; color: #fff;
} font-size: 36rpx;
.date { font-weight: bold;
color: #29d3b4; }
font-size: 26rpx;
margin-top: 10rpx; .date {
} color: #29d3b4;
} font-size: 26rpx;
.section { margin-top: 10rpx;
margin: 30rpx; }
background: #434544; }
border-radius: 16rpx;
padding: 30rpx 20rpx; .section {
} margin: 30rpx;
.section-title { background: #434544;
color: #ffd86b; border-radius: 16rpx;
font-size: 28rpx; padding: 30rpx 20rpx;
margin-bottom: 20rpx; }
}
.student-list { .section-title {
display: flex; color: #ffd86b;
flex-wrap: wrap; font-size: 28rpx;
gap: 20rpx; margin-bottom: 20rpx;
} }
.student-item {
background: #333; .student-list {
border-radius: 12rpx; display: flex;
display: flex; flex-wrap: wrap;
align-items: center; gap: 20rpx;
padding: 18rpx 24rpx; }
min-width: 260rpx;
.avatar { .student-item {
width: 60rpx; background: #333;
height: 60rpx; border-radius: 12rpx;
border-radius: 50%; display: flex;
background: #29d3b4; align-items: center;
color: #fff; padding: 18rpx 24rpx;
display: flex; min-width: 260rpx;
align-items: center;
justify-content: center; .avatar {
font-size: 32rpx; width: 60rpx;
margin-right: 18rpx; height: 60rpx;
} border-radius: 50%;
.info { background: #29d3b4;
.name { color: #fff;
color: #fff; display: flex;
font-size: 28rpx; align-items: center;
} justify-content: center;
.desc { font-size: 32rpx;
color: #bdbdbd; margin-right: 18rpx;
font-size: 22rpx; }
margin-top: 4rpx;
} .info {
} .name {
&.empty { color: #fff;
border: 2rpx dashed #ffd86b; font-size: 28rpx;
background: #232323; }
.avatar.empty-avatar {
background: #ffd86b; .desc {
color: #232323; color: #bdbdbd;
font-size: 36rpx; font-size: 22rpx;
} margin-top: 4rpx;
.info .name { }
color: #ffd86b; }
}
.info .desc { &.empty {
color: #ffd86b; border: 2rpx dashed #ffd86b;
} background: #232323;
}
} .avatar.empty-avatar {
</style> background: #ffd86b;
color: #232323;
font-size: 36rpx;
}
.info .name {
color: #ffd86b;
}
.info .desc {
color: #ffd86b;
}
}
}
</style>
Write Preview
Loading…
Cancel
Save