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
Split 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={}) {
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>
<view class="class-arrange-root">
<!-- 顶部日期选择 -->
<view class="date-bar">
<view class="date-item" v-for="(item, idx) in weekList" :key="idx" :class="{active: idx === selectedDayIndex}">
<view class="week">{{ item.week }}</view>
<view class="day">{{ item.day }}</view>
</view>
</view>
<!-- "查看更多"按钮移到日期条下方 -->
<view class="more-bar-wrapper">
<view class="more-bar" @click="openCalendar">
<text>查看更多</text>
<uni-icons type="arrowdown" size="18" color="#bdbdbd" />
</view>
</view>
<!-- 日历底部弹窗 -->
<uni-popup ref="calendarPopup" type="bottom">
<uni-calendar @confirm="onCalendarConfirm" @close="closeCalendar" />
</uni-popup>
<!-- 课程卡片列表 -->
<view class="course-list">
<view class="course-card" v-for="(course, idx) in courseList" :key="idx">
<view class="card-header">
<view class="status-end">已结束</view>
</view>
<view class="card-body">
<view class="row">时间：{{ course.date }}</view>
<view class="row">教室：{{ course.classroom }}</view>
<view class="row">课程：{{ course.name }}</view>
<view class="row">人数：{{ course.count }}</view>
</view>
<view class="card-footer">
<view class="sign-info">已签到学生 (0/{{ course.count }})</view>
<button class="detail-btn" @click="viewDetail(course)">详情</button>
</view>
</view>
</view>
</view>
<view class="class-arrange-root">
<!-- 顶部日期选择 -->
<view class="date-bar">
<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="day">{{ item.day }}</view>
</view>
</view>
<!-- "查看更多"按钮移到日期条下方 -->
<view class="more-bar-wrapper">
<view class="more-bar" @click="openCalendar">
<text>查看更多</text>
<uni-icons type="arrowdown" size="18" color="#bdbdbd" />
</view>
</view>
<!-- 日历底部弹窗 -->
<uni-popup ref="calendarPopup" type="bottom">
<uni-calendar @change="onCalendarChange" />
</uni-popup>
<!-- 课程卡片列表 -->
<view class="course-list">
<view class="course-card" v-for="(course, idx) in courseList" :key="idx">
<view class="card-header">
<view class="status-end">{{ getStatusText(course.status) }}</view>
</view>
<view class="card-body">
<view class="row">时间：{{ course.course_date }}</view>
<view class="row">教室：{{ course.venue.venue_name }}</view>
<view class="row">课程：{{ course.course.course_name }}</view>
<view class="row">人数：{{ course.available_capacity }}</view>
</view>
<view class="card-footer">
<view class="sign-info"></view>
<button class="detail-btn" @click="viewDetail(course)">详情</button>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
weekList: [
{ week: '星期一', day: 11 },
{ week: '星期二', day: 12 },
{ week: '星期三', day: 13 },
{ week: '星期四', day: 14 },
{ week: '星期五', day: 15 },
{ week: '星期六', day: 16 },
{ week: '星期日', day: 17 },
],
selectedDayIndex: 4,
courseList: [
{
date: '2025-06-15',
classroom: '时间范围教室',
name: '大课7+1类型',
count: 10,
},
{
date: '2025-06-15',
classroom: '时间范围教室',
name: '大课5+1',
count: 10,
},
],
};
},
methods: {
openCalendar() {
this.$refs.calendarPopup.open();
},
closeCalendar() {
this.$refs.calendarPopup.close();
},
viewDetail(course) {
// 跳转到课程详情页
this.$navigateTo({
url: '/pages/market/clue/class_arrangement_detail?date=' + course.date
});
},
onCalendarConfirm(e) {
this.closeCalendar();
// 这里可以处理选中的日期 e.fulldate
uni.showToast({ title: '选择日期：' + e.fulldate, icon: 'none' });
},
},
};
import apiRoute from '@/api/apiRoute.js';
export default {
data() {
return {
weekList: [],
selectedDayIndex: 4,
date: '',
courseList: [],
resource_id:''
};
},
onLoad(options) {
this.resource_id = options.resource_id
this.getDate();
},
methods: {
async getDate(date = '', day = '') {
try {
let res = await apiRoute.getDate({
'date': date,
'day': day
})
this.weekList = res.data.dates
this.date = res.data.date
let data = await apiRoute.courseAllList({
'schedule_date': this.date
})
this.courseList = data.data
} catch (error) {
console.error('获取信息失败:', error);
}
},
openCalendar() {
this.$refs.calendarPopup.open();
},
closeCalendar() {
console.log(123123)
this.$refs.calendarPopup.close();
},
viewDetail(course) {
// 跳转到课程详情页
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>
<style lang="less" scoped>
.class-arrange-root {
background: #232323;
min-height: 100vh;
padding-bottom: 30rpx;
}
.date-bar {
display: flex;
align-items: center;
background: #232323;
padding: 0 0 10rpx 0;
overflow-x: auto;
border-bottom: 1px solid #333;
.date-item {
flex: 1;
text-align: center;
color: #bdbdbd;
padding: 16rpx 0 0 0;
.week {
font-size: 22rpx;
}
.day {
font-size: 28rpx;
margin-top: 4rpx;
}
&.active {
color: #29d3b4;
.day {
border-radius: 50%;
background: #333;
color: #29d3b4;
padding: 2rpx 10rpx;
}
}
}
}
.more-bar-wrapper {
width: 100%;
display: flex;
justify-content: center;
margin: 10rpx 0 0 0;
}
.more-bar {
display: flex;
align-items: center;
color: #bdbdbd;
font-size: 22rpx;
cursor: pointer;
background: #333;
border-radius: 20rpx;
padding: 8rpx 24rpx;
}
.course-list {
margin-top: 20rpx;
.course-card {
background: #434544;
border-radius: 10rpx;
margin: 0 0 20rpx 0;
padding: 0 0 20rpx 0;
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.08);
.card-header {
display: flex;
justify-content: flex-end;
padding: 10rpx 20rpx 0 0;
.status-end {
background: #e95c6b;
color: #fff;
border-radius: 10rpx;
padding: 4rpx 18rpx;
font-size: 22rpx;
}
}
.card-body {
padding: 0 20rpx;
.row {
color: #fff;
font-size: 24rpx;
margin: 8rpx 0;
}
}
.card-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20rpx;
.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>
.class-arrange-root {
background: #232323;
min-height: 100vh;
padding-bottom: 30rpx;
}
.date-bar {
display: flex;
align-items: center;
background: #232323;
padding: 0 0 10rpx 0;
overflow-x: auto;
border-bottom: 1px solid #333;
.date-item {
flex: 1;
text-align: center;
color: #bdbdbd;
padding: 16rpx 0 0 0;
.week {
font-size: 22rpx;
}
.day {
font-size: 28rpx;
margin-top: 4rpx;
}
&.active {
color: #29d3b4;
.day {
border-radius: 50%;
background: #333;
color: #29d3b4;
padding: 2rpx 10rpx;
}
}
}
}
.more-bar-wrapper {
width: 100%;
display: flex;
justify-content: center;
margin: 10rpx 0 0 0;
}
.more-bar {
display: flex;
align-items: center;
color: #bdbdbd;
font-size: 22rpx;
cursor: pointer;
background: #333;
border-radius: 20rpx;
padding: 8rpx 24rpx;
}
.course-list {
margin-top: 20rpx;
.course-card {
background: #434544;
border-radius: 10rpx;
margin: 0 0 20rpx 0;
padding: 0 0 20rpx 0;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
.card-header {
display: flex;
justify-content: flex-end;
padding: 10rpx 20rpx 0 0;
.status-end {
background: #e95c6b;
color: #fff;
border-radius: 10rpx;
padding: 4rpx 18rpx;
font-size: 22rpx;
}
}
.card-body {
padding: 0 20rpx;
.row {
color: #fff;
font-size: 24rpx;
margin: 8rpx 0;
}
}
.card-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20rpx;
.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>
<view class="detail-root">
<view class="header">
<view class="title">课程安排详情</view>
<view class="date">日期：{{ date }}</view>
</view>
<view class="section">
<view class="section-title">学员列表</view>
<view class="student-list">
<view v-for="(stu, idx) in students" :key="idx" class="student-item">
<view class="avatar">{{ stu.name.charAt(0) }}</view>
<view class="info">
<view class="name">{{ stu.name }}</view>
<view class="desc">{{ stu.desc }}</view>
</view>
</view>
<view
v-for="n in emptyArray"
:key="n"
class="student-item empty"
@tap="addStudent"
:data-index="n"
>
<view class="avatar empty-avatar">+</view>
<view class="info">
<view class="name">空位</view>
<view class="desc">点击添加学员</view>
</view>
</view>
</view>
</view>
</view>
<view class="detail-root">
<view class="header">
<view class="title">课程安排详情</view>
<view class="date">日期：{{ course_info.course_date }} {{course_info.time_slot}}</view>
</view>
<view class="section">
<view class="section-title">学员列表</view>
<view class="student-list">
<view v-for="(stu, idx) in students" :key="idx" class="student-item">
<view class="avatar">{{ stu.name.charAt(0) }}</view>
<view class="info">
<view class="name">{{ stu.name }}</view>
<view class="desc">{{ getStatusText(stu.status)}}</view>
</view>
</view>
<view v-for="n in course_info.available_capacity" :key="n" class="student-item empty" @tap="addStudent" :data-index="n">
<view class="avatar empty-avatar">+</view>
<view class="info">
<view class="name">空位</view>
<view class="desc">点击添加学员</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
date: '',
students: [
{ name: '张三', desc: '已签到' },
{ name: '李四', desc: '未签到' },
],
maxCount: 5,
};
},
computed: {
emptyCount() {
return this.maxCount - this.students.length;
},
emptyArray() {
return Array.from({length: this.emptyCount}, (v, i) => i + 1);
},
},
onLoad(query) {
this.date = query.date || '';
},
methods: {
addStudent(e) {
const n = e.currentTarget.dataset.index;
uni.showToast({ title: '添加学员功能待实现，空位号：' + n, icon: 'none' });
},
},
};
import apiRoute from '@/api/apiRoute.js';
export default {
data() {
return {
course_id:'',
course_info:[],
date: '',
students: [
// {
// name: '张三',
// desc: '已签到'
// },
// {
// name: '李四',
// desc: '未签到'
// },
],
resource_id:''
};
},
onLoad(query) {
this.course_id = query.id || '';
this.resource_id = query.resource_id
this.courseInfo();
},
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>
<style lang="less" scoped>
.detail-root {
background: #232323;
min-height: 100vh;
padding-bottom: 30rpx;
}
.header {
padding: 40rpx 30rpx 20rpx 30rpx;
.title {
color: #fff;
font-size: 36rpx;
font-weight: bold;
}
.date {
color: #29d3b4;
font-size: 26rpx;
margin-top: 10rpx;
}
}
.section {
margin: 30rpx;
background: #434544;
border-radius: 16rpx;
padding: 30rpx 20rpx;
}
.section-title {
color: #ffd86b;
font-size: 28rpx;
margin-bottom: 20rpx;
}
.student-list {
display: flex;
flex-wrap: wrap;
gap: 20rpx;
}
.student-item {
background: #333;
border-radius: 12rpx;
display: flex;
align-items: center;
padding: 18rpx 24rpx;
min-width: 260rpx;
.avatar {
width: 60rpx;
height: 60rpx;
border-radius: 50%;
background: #29d3b4;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 32rpx;
margin-right: 18rpx;
}
.info {
.name {
color: #fff;
font-size: 28rpx;
}
.desc {
color: #bdbdbd;
font-size: 22rpx;
margin-top: 4rpx;
}
}
&.empty {
border: 2rpx dashed #ffd86b;
background: #232323;
.avatar.empty-avatar {
background: #ffd86b;
color: #232323;
font-size: 36rpx;
}
.info .name {
color: #ffd86b;
}
.info .desc {
color: #ffd86b;
}
}
}
</style>
.detail-root {
background: #232323;
min-height: 100vh;
padding-bottom: 30rpx;
}
.header {
padding: 40rpx 30rpx 20rpx 30rpx;
.title {
color: #fff;
font-size: 36rpx;
font-weight: bold;
}
.date {
color: #29d3b4;
font-size: 26rpx;
margin-top: 10rpx;
}
}
.section {
margin: 30rpx;
background: #434544;
border-radius: 16rpx;
padding: 30rpx 20rpx;
}
.section-title {
color: #ffd86b;
font-size: 28rpx;
margin-bottom: 20rpx;
}
.student-list {
display: flex;
flex-wrap: wrap;
gap: 20rpx;
}
.student-item {
background: #333;
border-radius: 12rpx;
display: flex;
align-items: center;
padding: 18rpx 24rpx;
min-width: 260rpx;
.avatar {
width: 60rpx;
height: 60rpx;
border-radius: 50%;
background: #29d3b4;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 32rpx;
margin-right: 18rpx;
}
.info {
.name {
color: #fff;
font-size: 28rpx;
}
.desc {
color: #bdbdbd;
font-size: 22rpx;
margin-top: 4rpx;
}
}
&.empty {
border: 2rpx dashed #ffd86b;
background: #232323;
.avatar.empty-avatar {
background: #ffd86b;
color: #232323;
font-size: 36rpx;
}
.info .name {
color: #ffd86b;
}
.info .desc {
color: #ffd86b;
}
}
}
</style>
Write Preview
Loading…
Cancel
Save