You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

615 lines
12 KiB

<template>
<view class="page">
<view class="courcon">
<view class="leftfix">
<view class="courhead">
<view class="ctitle">日期</view>
<view class="ctitle">15日内</view>
</view>
<view class="leftcon">
<view class="courcell" v-for="(item, index) in timelist" :key="index">
{{item.time}}
</view>
</view>
</view>
<view class="rightcon">
<view class="courheadr">
<view class="chcell" v-for="(item, index) in datelist" :key="index">
<view class="ctitle">{{item.day}}</view>
<view class="ctitle">{{item.week}}</view>
</view>
</view>
<view class="courcellr">
<view class="courow" v-for="(row, ii) in timelist" :key="ii">
<view class="coucell" v-for="(col, kk) in datelist" :key="kk">
<block v-for="(item, index) in courselist" :key="index">
<view class="courheadtext" v-if="row.time==item.time && col.day==item.day"
:style="{color:colorlist[ii].fcolor,backgroundColor:colorlist[ii].color,borderLeftColor:colorlist[ii].fcolor}" >
<view class="ctxt">{{item.timeslot}}</view>
<view class="ctxt">{{item.name}}</view>
<view class="ctxt">{{item.info}}</view>
<view class="ctxt">{{item.room}}</view>
</view>
</block>
</view>
</view>
</view>
</view>
</view>
<!-- 是否登录 -->
<openlogin ref="loginId" @getPhoneNumber="getPhoneNumber"></openlogin>
<!-- service 客服-->
<service ref="serviceId" @goservice="goservice"></service>
<!-- top 返回顶部-->
<top ref="topId"></top>
</view>
</template>
<script>
import { myCache,getRemoteFile,getRemoteHtmlFile } from '../../utils/utils.js';
import openlogin from "../components/openlogin.vue";
import top from "../components/top.vue";
import service from "../components/service.vue";
export default {
components: {
openlogin,top,service
},
data() {
return {
openId:"",
phone:"",
userid:"",
id:'',
type:'',// 1 老师课程表 2、精品课程表
name:'精品', // 精品课程名称
colorlist:[
{
time:'08:30',
fcolor:'#ce4b62',
color:'#ffdbdf'
},
{
time:'10:00',
fcolor:'#0c7e07',
color:'#f4fff3'
},
{
time:'11:00',
fcolor:'#b871d7',
color:'#faebfe'
},
{
time:'14:00',
fcolor:'#95440f',
color:'#ffe9cb'
},
{
time:'15:00',
fcolor:'#116c94',
color:'#cbefff'
},
{
time:'16:00',
fcolor:'#867ae0',
color:'#f4f0ff'
},
{
time:'17:00',
fcolor:'#37acc0',
color:'#e0f8fa'
},
{
time:'18:00',
fcolor:'#e8739d',
color:'#feecfa'
},
{
time:'19:00',
fcolor:'#4d8ae3',
color:'#eaf0ff'
},
{
time:'20:00',
fcolor:'#f2960f',
color:'#fbeacc'
}
],
timelist:[
{
time:'08:30',
fcolor:'#ce4b62',
color:'#ffdbdf'
},
{
time:'10:00',
fcolor:'#0c7e07',
color:'#f4fff3'
},
{
time:'11:00',
fcolor:'#9344b9',
color:'#fbf6ff'
},
{
time:'14:00',
fcolor:'#95440f',
color:'#ffe9cb'
},
{
time:'15:00',
fcolor:'#116c94',
color:'#cbefff'
},
{
time:'16:00',
fcolor:'#788ab8',
color:'#f4f0ff'
},
{
time:'17:00',
fcolor:'#7dced1',
color:'#e0f8fa'
},
{
time:'18:00',
fcolor:'#e8739d',
color:'#feecfa'
},
{
time:'19:00',
fcolor:'#4d8ae3',
color:'#eaf0ff'
},
{
time:'20:00',
fcolor:'#f2960f',
color:'#fbeacc'
}
],
datelist:[
{
day:'06-01',
week:'周日'
},
{
day:'06-02',
week:'周一'
},
{
day:'06-03',
week:'周二'
},
{
day:'06-04',
week:'周三'
},
{
day:'06-05',
week:'周四'
},
{
day:'06-06',
week:'周五'
},
{
day:'06-07',
week:'周六'
},
{
day:'06-08',
week:'周日'
},
{
day:'06-09',
week:'周一'
},
{
day:'06-10',
week:'周二'
},
{
day:'06-11',
week:'周三'
},
{
day:'06-12',
week:'周四'
},
{
day:'06-13',
week:'周五'
},
{
day:'06-14',
week:'周六'
},
{
day:'06-15',
week:'周日'
}
],
courselist:[
{
day:'06-01',
time:'08:30',
timeslot:'08:30-09:30',
name:'团课',
info:'进修课程提升课',
room:'大教室'
},
{
day:'06-01',
time:'15:00',
timeslot:'15:00-16:00',
name:'团课',
info:'进修课程提升课',
room:'大教室'
},
{
day:'06-01',
time:'17:00',
timeslot:'17:00-18:00',
name:'团课',
info:'进修课程提升课',
room:'大教室'
},
{
day:'06-01',
time:'19:00',
timeslot:'19:00-20:00',
name:'团课',
info:'进修课程提升课',
room:'大教室'
},
{
day:'06-01',
time:'20:00',
timeslot:'20:00-21:00',
name:'团课',
info:'进修课程提升课',
room:'大教室'
},
{
day:'06-02',
time:'10:00',
timeslot:'10:00-11:00',
name:'小课班',
info:'新课程一',
room:'大教室'
},
{
day:'06-02',
time:'11:00',
timeslot:'11:00-12:00',
name:'小课班',
info:'新课程一',
room:'大教室'
},
{
day:'06-02',
time:'14:00',
timeslot:'14:00-15:00',
name:'小课班',
info:'新课程一',
room:'大教室'
},
{
day:'06-02',
time:'16:00',
timeslot:'16:00-17:00',
name:'小课班',
info:'新课程一',
room:'大教室'
},
{
day:'06-02',
time:'18:00',
timeslot:'18:00-19:00',
name:'小课班',
info:'新课程一',
room:'大教室'
},
{
day:'06-03',
time:'14:00',
timeslot:'14:00-15:00',
name:'小课班',
info:'新课程一',
room:'大教室'
},
{
day:'06-04',
time:'10:00',
timeslot:'10:00-11:00',
name:'小课班',
info:'新课程一',
room:'大教室'
},
{
day:'06-05',
time:'14:00',
timeslot:'14:00-13:00',
name:'小课班',
info:'新课程一',
room:'大教室'
}
],
};
},
onLoad(option) {
// 课程表类型
if(option.type){
this.type=option.type;
}
if(option.name){
this.name=option.name;
}
if(option.id&&option.id!=='undefined'){
this.id=option.id;
// this.loadinfo();
}
else{
// uni.showModal({
// title: '提示',
// content: '当前信息不存在..',
// cancelText: '取消',
// confirmText: '确定',
// success: ress => {
// // 返回
// uni.navigateBack({
// delta: 1
// });
// }
// });
}
},
onReady(){
if(this.type=='1'){
uni.setNavigationBarTitle({
title: "教练课程表",
});
}
else if(this.type=='2'){
uni.setNavigationBarTitle({
title: this.name+"课程表",
});
}
},
onShow() {
this.openId = myCache('openId');
this.phone = myCache('phone');
this.userid = myCache('userid');
},
onPullDownRefresh() {
setTimeout(()=>{
uni.stopPullDownRefresh()
},500);
},
onPageScroll(e) {
//调用子组件方法
this.$refs.topId.topData(e.scrollTop);
},
methods: {
goservice(val){
console.log(val);
},
iflogin(){
this.openId = myCache('openId');
this.phone = myCache('phone');
this.userid = myCache('userid');
if(this.userid==""||this.userid=="0"){
this.$refs.loginId.open();
return false;
}
else{
return true;
}
},
async loadinfo(){
// 详情
uni.showLoading();
var params = {
id: this.id
};
try{
const {data: res1} = await uni.$http.post('/alipay/productById',params);
// console.log(res1);
if (res1) {
if(res1.state!==1){
uni.showModal({
title: '提示',
content: '当前信息获取异常,请返回..',
cancelText: '取消',
confirmText: '确定',
success: ress => {
// 返回
uni.navigateBack({
delta: 1
});
}
});
return false;
}
this.productall=res1;
this.teacherName=res1.name;
this.sex=res1.sex;
this.html=res1.content;
this.$forceUpdate();
}
else{
uni.showModal({
title: '提示',
content: '当前信息不存在..',
cancelText: '取消',
confirmText: '确定',
success: ress => {
// 返回
uni.navigateBack({
delta: 1
});
}
});
}
}
catch(e){
console.log(e)
}
},
getPhoneNumber(e){
if(e.phone){
this.phone = e.phone
}
if(e.userid){
this.userid = e.userid
}
}
}
}
</script>
<style lang="less" scoped>
.page {
padding: 0;
position: relative;
background-color: #f8f8f8;
min-height: 100vh;
}
.courcon{
display: flex;
position: relative;
min-height: 100vh;
overflow: auto;
.leftfix{
position: absolute;
left: 0;
top:0;
width: 120rpx;
display: flex;
flex-direction: column;
}
.leftcon{
margin-top: 120rpx;
}
.courhead{
border-radius: 8rpx;
background-color: #ffffff;
display: flex;
flex-direction: column;
width: 120rpx;
height: 120rpx;
justify-content: center;
align-items: center;
position: absolute;
left: 0;
top: 0;
}
.ctitle{
font-size: 30rpx;
color:#000;
}
.courcell{
width: 120rpx;
height: 180rpx;
border-bottom: 1rpx dotted #ccc;
display: flex;
align-items: center;
justify-content: center;
background-color: #ffffff;
}
.rightcon{
margin-left: 120rpx;
width: auto;
overflow-x: auto;
overflow-y: hidden;
display: flex;
flex-direction: column;
flex: 1;
}
.courheadr{
border-radius: 8rpx;
background-color: #ffffff;
display: flex;
flex: 1;
flex-direction: row;
height: 120rpx;
align-items: flex-start;
}
.chcell{
display: flex;
flex-direction: column;
flex-shrink: 0;
width: 240rpx;
height: 120rpx;
justify-content: center;
align-items: center;
background-color: #fff;
}
.courcellr{
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
.courow{
display: flex;
flex-direction: row;
height: 180rpx;
align-items: flex-start;
border-bottom: 1rpx dotted #ccc;
}
.coucell{
display: flex;
flex-direction: column;
width: 240rpx;
height: 177rpx;
justify-content: center;
align-items: center;
border-radius: 10rpx;
}
.courheadtext{
display: flex;
flex-direction: column;
width: 240rpx;
height: 180rpx;
justify-content: center;
align-items: center;
border-radius: 10rpx;
border-radius: 10rpx;
border-left-width: 10rpx;
border-left: solid;
}
.ctxt{
font-size: 28rpx;
line-height: 36rpx;
}
}
.bbtn{
margin: 20rpx 30rpx 54rpx;
font-size: 32rpx;
font-family: PingFang SC-Medium, PingFang SC;
font-weight: 500;
color: #FCFCFD;
width: 314rpx;
height: 76rpx;
line-height: 76rpx;
background: #89965f;
box-shadow: 0rpx 12rpx 64rpx 2rpx rgba(137,150,95,0.4);
border-radius: 10rpx;
opacity: 1;
&::after{
border:none;
}
}
</style>