Browse Source

feat(member): 添加课程详情功能并优化课表页面

- 在 member.js 中新增 courseInfo 方法获取课程详情
- 修改 timetable/index.vue 中的课程列表展示和点击事件- 更新 timetable/info.vue 中的课程详情展示逻辑
- 优化课程详情页面样式
master
liutong 1 year ago
parent
commit
ac44f4446b
  1. 11
      api/member.js
  2. 59
      pages/student/timetable/index.vue
  3. 44
      pages/student/timetable/info.vue

11
api/member.js

@ -58,4 +58,15 @@ export default {
return res; return res;
}) })
}, },
//课程详情
courseInfo(data) {
let url = '/member/course_info'
return http.get(url, data).then(res => {
return res;
})
},
} }

59
pages/student/timetable/index.vue

@ -37,7 +37,7 @@
style="height: 100vh;" style="height: 100vh;"
> >
<view class="ul"> <view class="ul">
<view v-for="(v,k) in tableList" :key="k" class="li" @click="openViewCourseInfo({id:v.id})"> <view v-for="(v,k) in tableList" :key="k" class="li" @click="openViewCourseInfo(v)">
<view class="top_box"> <view class="top_box">
<view class="center_box"> <view class="center_box">
<view>班级{{v.classes_name}}</view> <view>班级{{v.classes_name}}</view>
@ -92,29 +92,29 @@ export default {
}, },
data() { data() {
return { return {
loading:false,// loading: false,//
lowerThreshold: 100,// lowerThreshold: 100,//
isReachedBottom: false,//|true=|false= isReachedBottom: false,//|true=|false=
// //
filteredData:{ filteredData: {
page:1,// page: 1,//
limit:10,// limit: 10,//
total:10,// total: 10,//
schedule_date:'',// schedule_date: '',//
venue_id:'',//id venue_id: '',//id
}, },
tableList:[],// tableList: [],//
venuesInfo:{},// venuesInfo: {},//
// //
today: '', today: '',
dateList:[]// dateList: []//
} }
}, },
onLoad(options) { onLoad(options) {
if(options.venue_id){ if (options.venue_id) {
this.filteredData.venue_id = options.venue_id this.filteredData.venue_id = options.venue_id
} }
}, },
@ -132,17 +132,16 @@ export default {
methods: { methods: {
// //
async init(){ async init() {
await this.getThisDate() await this.getThisDate()
await this.getHeadDate() await this.getHeadDate()
await this.getList() await this.getList()
// await this.getDateList(); //
}, },
// //
async getHeadDate() { async getHeadDate() {
let res = await memberApi.getDate() let res = await memberApi.getDate()
if (res.code != 1){ if (res.code != 1) {
// //
uni.showToast({ uni.showToast({
title: res.msg, title: res.msg,
@ -152,7 +151,7 @@ export default {
} }
this.dateList = [] this.dateList = []
res.data.forEach((v,k)=>{ res.data.forEach((v, k) => {
let today = v.date.split("-")[2]; // "09" let today = v.date.split("-")[2]; // "09"
this.dateList.push({ this.dateList.push({
date: v.date, date: v.date,
@ -163,7 +162,7 @@ export default {
}) })
console.log('xxx',res) console.log('xxx', res)
}, },
@ -199,13 +198,13 @@ export default {
this.filteredData.total = 10// this.filteredData.total = 10//
}, },
// //
async getList(){ async getList() {
this.loading = true this.loading = true
let data = {...this.filteredData} let data = {...this.filteredData}
// //
if(this.filteredData.page * this.filteredData.limit > this.filteredData.total || this.filteredData.limit > this.filteredData.total ){ if (this.filteredData.page * this.filteredData.limit > this.filteredData.total || this.filteredData.limit > this.filteredData.total) {
this.loading = false this.loading = false
uni.showToast({ uni.showToast({
title: '暂无更多', title: '暂无更多',
@ -217,7 +216,7 @@ export default {
let res = await memberApi.courseList(data) let res = await memberApi.courseList(data)
this.loading = false this.loading = false
this.isReachedBottom = false; this.isReachedBottom = false;
if (res.code != 1){ if (res.code != 1) {
uni.showToast({ uni.showToast({
title: res.msg, title: res.msg,
icon: 'none' icon: 'none'
@ -234,27 +233,25 @@ export default {
}, },
// //
async selectDate(date){ async selectDate(date) {
this.loadData() this.loadData()
this.filteredData.schedule_date = date this.filteredData.schedule_date = date
this.getList() this.getList()
}, },
// //
openViewTimetableInfo(item){ openViewCourseInfo(item) {
// courses_id=id
uni.navigateTo({ uni.navigateTo({
url: `/pages/student/timetable/info?id=${item.courses_id}` url: `/pages/student/timetable/info?id=${item.id}`
}) })
}, },
// //
more(){ more() {
uni.navigateTo({ uni.navigateTo({
url: '/pages/student/timetable/list' url: '/pages/student/timetable/list'
}) })
} }
} }
} }
</script> </script>

44
pages/student/timetable/info.vue

@ -3,49 +3,46 @@
<view class="main_box"> <view class="main_box">
<view class="main_section"> <view class="main_section">
<view class="section_1"> <view class="section_1">
<view class="title_box">青少儿篮球课</view> <view class="title_box">{{infoData.courses_name}}</view>
<view class="ul"> <view class="ul">
<view class="li"> <view class="li">
<view class="title">课程名称</view> <view class="title">课程名称</view>
<view class="content">青少年篮球课</view> <view class="content">{{infoData.courses_name}}</view>
</view> </view>
<view class="li"> <view class="li">
<view class="title">班级</view> <view class="title">班级</view>
<view class="content">班级名称</view> <view class="content">{{infoData.classes_name}}</view>
</view> </view>
<view class="li"> <view class="li">
<view class="title">上课时间</view> <view class="title">上课时间</view>
<view class="content">2020.03.25 15:30-17:00</view> <view class="content">{{infoData.date_time}} {{infoData.time_slot.replace(',', '-')}}</view>
</view> </view>
<view class="li"> <view class="li">
<view class="title">上课地址</view> <view class="title">上课地址</view>
<view class="content">xxxx体育馆302室</view> <view class="content">{{infoData.address}}</view>
</view> </view>
<view class="li">
<view class="title">课程名称</view>
<view class="content">青少年篮球课</view>
</view>
<view class="li"> <view class="li">
<view class="title">教练</view> <view class="title">教练</view>
<view class="content">包子皮</view> <view class="content">{{infoData.staff_name}}</view>
</view> </view>
<view class="li"> <view class="li">
<view class="title">教练号码</view> <view class="title">教练号码</view>
<view class="content">18888888888</view> <view class="content">{{infoData.staff_phone}}</view>
</view> </view>
<view class="li"> <view class="li">
<view class="title">扣除课时</view> <view class="title">扣除课时</view>
<view class="content">2个课时</view> <view class="content">{{infoData.hour}}个课时</view>
</view> </view>
<view class="state_box"> <view class="state_box" v-if="infoData.status == 2">
<view>已上</view> <view>已上</view>
</view> </view>
</view> </view>
@ -56,6 +53,7 @@
<script> <script>
// import user from '@/api/user.js'; // import user from '@/api/user.js';
import memberApi from '@/api/member.js';
import AQTabber from "@/components/AQ/AQTabber.vue" import AQTabber from "@/components/AQ/AQTabber.vue"
@ -65,7 +63,7 @@ export default {
}, },
data() { data() {
return { return {
formData:{}, infoData:{},//
// //
filteredData: { filteredData: {
id: '',//id id: '',//id
@ -81,7 +79,22 @@ export default {
methods: { methods: {
// //
async init(){ async init(){
await this.getInfo()
},
//
async getInfo(){
let res = await memberApi.courseInfo({
id: this.filteredData.id,
})
if(res.code != 1){
uni.showToast({
title: res.msg,
icon: 'none'
})
return
}
this.infoData = res.data
}, },
@ -126,7 +139,8 @@ export default {
.section_1{ .section_1{
border-radius: 22rpx; border-radius: 22rpx;
padding: 20rpx 40rpx; padding: 20rpx 40rpx;
background: #333333 100%; background: #fff;
color: #333333;
width: 100%; width: 100%;
.title_box{ .title_box{
padding: 10rpx; padding: 10rpx;

Loading…
Cancel
Save