|
@@ -1,147 +1,79 @@
|
|
|
<template>
|
|
<template>
|
|
|
- <view class="calendar-page">
|
|
|
|
|
|
|
+ <view class="message-page">
|
|
|
<!-- 导航栏 -->
|
|
<!-- 导航栏 -->
|
|
|
- <u-navbar bgColor="red">
|
|
|
|
|
|
|
+ <u-navbar fixed title="消息" placeholder>
|
|
|
|
|
+ <view class="u-nav-slot" slot="right"></view>
|
|
|
<view class="u-nav-slot" slot="left">
|
|
<view class="u-nav-slot" slot="left">
|
|
|
- <text class="text-bold text-xxl text-white">{{ $t('schedule') }}</text>
|
|
|
|
|
|
|
+ <text class="cuIcon-filter"></text>
|
|
|
</view>
|
|
</view>
|
|
|
- <view class="u-nav-slot" slot="right"></view>
|
|
|
|
|
</u-navbar>
|
|
</u-navbar>
|
|
|
- <!-- 日历 -->
|
|
|
|
|
- <uni-calendar insert foldAble :selected="selected" @change="change" />
|
|
|
|
|
- <!-- hint -->
|
|
|
|
|
- <view class="bg-gray flex justify-between align-center padding-lr-sm">
|
|
|
|
|
- <view v-for="(item, index) in hints" :key="index">
|
|
|
|
|
- <view class="flex justify-between align-center">
|
|
|
|
|
- <view class="hint-icon" :style="{ 'background-color': item.color}"></view>
|
|
|
|
|
- <text class="text-sm">{{ item.title }}</text>
|
|
|
|
|
|
|
+
|
|
|
|
|
+ <!-- tabs -->
|
|
|
|
|
+ <scroll-view scroll-x class="bg-white nav">
|
|
|
|
|
+ <view class="flex text-center">
|
|
|
|
|
+ <view class="cu-item flex-sub" :class="tabIndex==index?'text-red cur':''" v-for="(item,index) in tabs" :key="index" @tap="tabSelect" :data-id="index">
|
|
|
|
|
+ {{ item.name }}
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
|
|
+ </scroll-view>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- List -->
|
|
|
|
|
+ <u-gap height="1"></u-gap>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- List -->
|
|
|
|
|
+ <view class="message-content">
|
|
|
|
|
+ <class-interaction-page v-show="tabIndex==0" />
|
|
|
</view>
|
|
</view>
|
|
|
- <!-- 列表 -->
|
|
|
|
|
- <scroll-list ref="list" :option="option" @load="load" @refresh="refresh">
|
|
|
|
|
- <view class="list-item" v-for="(item, index) in list" :key="index">
|
|
|
|
|
- <view class="avatar">{{ index + 1 }}</view>
|
|
|
|
|
- <view class="info">
|
|
|
|
|
- <view class="info-item"></view>
|
|
|
|
|
- <view class="info-item"></view>
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
- </scroll-list>
|
|
|
|
|
</view>
|
|
</view>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
<script>
|
|
|
import Api from '../../api/api.js';
|
|
import Api from '../../api/api.js';
|
|
|
-import UniCalendar from '../../components/uni-calendar/uni-calendar.vue';
|
|
|
|
|
|
|
+import ClassInteractionPage from './class_interaction_page.vue'
|
|
|
export default {
|
|
export default {
|
|
|
components: {
|
|
components: {
|
|
|
- UniCalendar
|
|
|
|
|
|
|
+ ClassInteractionPage
|
|
|
},
|
|
},
|
|
|
data() {
|
|
data() {
|
|
|
return {
|
|
return {
|
|
|
- currentDate: '',
|
|
|
|
|
- show: false,
|
|
|
|
|
- mode: 'range',
|
|
|
|
|
- selected: [
|
|
|
|
|
- { date: '2022-01-05', info: '签到', data: { custom: '自定义信息', name: '自定义消息头' } },
|
|
|
|
|
- { date: '2022-01-09', info: '打卡', data: { custom: '自定义信息', name: '自定义消息头' } },
|
|
|
|
|
- { date: '2022-02-03', info: '打卡', data: { custom: '自定义信息', name: '自定义消息头' } }
|
|
|
|
|
- ],
|
|
|
|
|
option: {
|
|
option: {
|
|
|
size: 10,
|
|
size: 10,
|
|
|
- auto: false
|
|
|
|
|
|
|
+ auto: false,
|
|
|
|
|
+ loadDisabled: false
|
|
|
},
|
|
},
|
|
|
list: [],
|
|
list: [],
|
|
|
- hints: [
|
|
|
|
|
- { index: 0, color: 'red', title: '未上课' },
|
|
|
|
|
- { index: 1, color: 'green', title: '已上课' },
|
|
|
|
|
- { index: 2, color: 'blue', title: '未上完课' },
|
|
|
|
|
- { index: 3, color: 'grey', title: '班级取消' }
|
|
|
|
|
- ]
|
|
|
|
|
|
|
+ tabIndex: 0
|
|
|
};
|
|
};
|
|
|
},
|
|
},
|
|
|
|
|
+ computed: {
|
|
|
|
|
+ tabs() {
|
|
|
|
|
+ return [
|
|
|
|
|
+ { 'index': 0, 'name': this.$i18n.t('classInteraction') },
|
|
|
|
|
+ { 'index': 1, 'name': this.$i18n.t('notification') }
|
|
|
|
|
+ ]
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
onReady() {},
|
|
onReady() {},
|
|
|
mounted() {
|
|
mounted() {
|
|
|
- // let now = new Date()
|
|
|
|
|
- // let ye = new Intl.DateTimeFormat('en', { year: 'numeric' }).format(now)
|
|
|
|
|
- // let mo = new Intl.DateTimeFormat('en', { month: '2-digit' }).format(now)
|
|
|
|
|
- // this.currentDate = `${ye}${mo}` /// 202201
|
|
|
|
|
-
|
|
|
|
|
- let now = new Date();
|
|
|
|
|
- var year = now.getFullYear();
|
|
|
|
|
- var month = now.getMonth() + 1;
|
|
|
|
|
- this.currentDate = `${year}${month}`; /// 202201
|
|
|
|
|
- console.log(this.currentDate);
|
|
|
|
|
-
|
|
|
|
|
- this.getClassSchedule();
|
|
|
|
|
},
|
|
},
|
|
|
methods: {
|
|
methods: {
|
|
|
- async getClassSchedule() {
|
|
|
|
|
- Api.classSchedule(this.currentDate).then(res => {
|
|
|
|
|
- console.log(res);
|
|
|
|
|
- });
|
|
|
|
|
- },
|
|
|
|
|
- previousBtnDidClick() {
|
|
|
|
|
- console.log('previousBtnDidClick');
|
|
|
|
|
- },
|
|
|
|
|
- nextBtnDidClick() {
|
|
|
|
|
- console.log('nextBtnDidClick');
|
|
|
|
|
- },
|
|
|
|
|
- change(e) {
|
|
|
|
|
- console.log(e);
|
|
|
|
|
- },
|
|
|
|
|
- uploadAction() {
|
|
|
|
|
- uni.navigateTo({ url: '../test/upload' });
|
|
|
|
|
- },
|
|
|
|
|
- monitoringBtnClick() {
|
|
|
|
|
- uni.navigateTo({
|
|
|
|
|
- url: '../launch/index'
|
|
|
|
|
- });
|
|
|
|
|
- },
|
|
|
|
|
- // 加载数据
|
|
|
|
|
- load(paging) {
|
|
|
|
|
- setTimeout(() => {
|
|
|
|
|
- let list = [];
|
|
|
|
|
- for (var i = 0; i < paging.size; i++) {
|
|
|
|
|
- list.push(i);
|
|
|
|
|
- }
|
|
|
|
|
- this.list = [...this.list, ...list];
|
|
|
|
|
- // 加载成功 参数对象{list: 当前列表,total: 数据总长度(后端查询的total)}
|
|
|
|
|
- this.$refs.list.loadSuccess({ list: this.list, total: 50 });
|
|
|
|
|
- // 加载失败
|
|
|
|
|
- // this.$refs.list.loadFail()
|
|
|
|
|
- }, this.$u.random(100, 1000));
|
|
|
|
|
- },
|
|
|
|
|
- // 刷新刷剧
|
|
|
|
|
- refresh(paging) {
|
|
|
|
|
- setTimeout(() => {
|
|
|
|
|
- let list = [];
|
|
|
|
|
- for (var i = 0; i < paging.size; i++) {
|
|
|
|
|
- list.push(i);
|
|
|
|
|
- }
|
|
|
|
|
- this.list = list;
|
|
|
|
|
- // 刷新成功 参数对象{list: 当前列表,total: 数据总长度(后端查询的total)}
|
|
|
|
|
- this.$refs.list.refreshSuccess({ list: this.list, total: 50 });
|
|
|
|
|
- // 刷新失败
|
|
|
|
|
- // this.$refs.list.refreshFail()
|
|
|
|
|
- }, this.$u.random(100, 1000));
|
|
|
|
|
|
|
+ tabSelect(e) {
|
|
|
|
|
+ this.tabIndex = e.currentTarget.dataset.id
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
};
|
|
};
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
-<style scoped>
|
|
|
|
|
- .hint-box {
|
|
|
|
|
- height: 5px;
|
|
|
|
|
- }
|
|
|
|
|
- .hint-item {
|
|
|
|
|
- margin: 0 5px 0 5px;
|
|
|
|
|
|
|
+<style lang="scss">
|
|
|
|
|
+ .message-page {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ .message-content {
|
|
|
|
|
+ padding: 0px 0px 120px;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
- .hint-icon {
|
|
|
|
|
- width: 8px;
|
|
|
|
|
- height: 8px;
|
|
|
|
|
- border-radius: 50%;
|
|
|
|
|
- margin-right: 5px;
|
|
|
|
|
- }
|
|
|
|
|
-</style>
|
|
|
|
|
|
|
+
|
|
|
|
|
+</style>
|