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.

459 lines
9.9 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<view class="page">
<view class="lcon">
<scroll-view class="scrolllist" scroll-with-animation>
<view class="tabicl" v-for="(item, index) in list" :key="index" :class="index==tabCurrentIndex?'cur':''" @tap="tabSelect" :data-id="index">
<view class="ptext">{{item.name}}</view>
<view class="pline"></view>
</view>
<view class="bcon">
<view class="bcell">
<view class="btip">上课节数</view>
<view class="btxt">{{list[tabCurrentIndex].claCount}}</view>
</view>
<view class="bcell">
<view class="btip">预计提成</view>
<view class="btxt"><text style="font-size: 26rpx;">¥</text>{{list[tabCurrentIndex].totalFee}}</view>
</view>
</view>
<view class="hcon">
<view class="hcell">课程名称</view>
<view class="hcell">上课日期</view>
<view class="hcell">上课教室</view>
<view class="hcell">课程时长</view>
</view>
</scroll-view>
<!-- 列表 -->
<swiper class="swiper-box" :duration="300" :current="tabCurrentIndex" @animationfinish="animationfinish">
<swiper-item class="swiper-item" v-for="tabItem in list" :key="tabItem.id">
<scroll-view scroll-y style="height: 100%;width: 100%;">
<view class="scell" v-if="tabItem.slist.length>0">
<view v-for="(item, index) in tabItem.slist" :key="index" class="oitem">
<view class="ocell">
{{item.courseName}}
</view>
<view class="ocell">
{{item.realClaDate}}
</view>
<view class="ocell">
{{item.roomName}}
</view>
<view class="ocell">
{{item.realStartTime+' '+item.realEndTime}}
</view>
</view>
</view>
<uni-load-more v-if="tabItem.slist.length<1" iconType="circle" :status="tabItem.loadStatus" />
</scroll-view>
</swiper-item>
</swiper>
</view>
<!-- 是否登录 -->
<openlogin ref="loginId" @getPhoneNumber="getPhoneNumber"></openlogin>
</view>
</template>
<script>
import { myCache,getRemoteFile } from '../../utils/utils.js';
import openlogin from "../components/openlogin.vue";
export default {
components: {
openlogin
},
data() {
return {
openId:"",
phone:"",
userid:"",
tabCurrentIndex: 0,
scrollLeft: 0,//tabs
// 1今日2昨日3本月 4上月
list:[
{
id:1,
order_state:1,
value:"today",
claCount: 0,
totalFee: 0,
loadStatus:'noMore', // 'more',
name:'今日',
slist:[
{
id:1,
name1:"普拉提",
name2:"2025年03月12日",
name3:"公共教室3",
name4:"1.5小时",
},
{
id:1,
name1:"普拉提",
name2:"2025年03月12日",
name3:"公共教室3",
name4:"1.5小时",
},
],
},
{
id:2,
order_state:2,
value:"yesterday",
claCount: 0,
totalFee: 0,
loadStatus:'noMore', // 'more',
name:'昨日',
slist:[
{
id:1,
name1:"普拉提",
name2:"2025年03月12日",
name3:"公共教室3",
name4:"1.5小时",
},
{
id:1,
name1:"普拉提",
name2:"2025年03月12日",
name3:"公共教室3",
name4:"1.5小时",
},
],
},
{
id:3,
order_state:3,
value:"thisMonth",
claCount: 0,
totalFee: 0,
loadStatus:'noMore', // 'more',
name:'本月',
slist:[
{
id:1,
name1:"普拉提",
name2:"2025年03月12日",
name3:"公共教室3",
name4:"1.5小时",
},
{
id:1,
name1:"普拉提",
name2:"2025年03月12日",
name3:"公共教室3",
name4:"1.5小时",
},
],
},
{
id:4,
order_state:4,
value:"lastMonth",
claCount: 0,
totalFee: 0,
loadStatus:'noMore', // 'more',
name:'上月',
slist:[
{
id:1,
name1:"普拉提",
name2:"2025年03月12日",
name3:"公共教室3",
name4:"1.5小时",
},
{
id:1,
name1:"普拉提",
name2:"2025年03月12日",
name3:"公共教室3",
name4:"1.5小时",
},
],
},
],
};
},
onLoad(option) {
if(option.id||option.id==0){
if(parseInt(option.id)==0){
this.tabCurrentIndex=0;
}
else{
this.tabCurrentIndex=parseInt(option.id);
}
this.scrollLeft = (this.tabCurrentIndex - 1) * 60;
}
},
onShow(option){
this.reset();
},
onReady(){
this.openId = myCache('openId');
var user = myCache('user');
this.userid = user.userid? user.userid:'';
this.phone = user.userphone;
if(this.userid==""||this.userid=="0"){
uni.navigateTo({
url: `/pages/login/login`
});
}
},
onPullDownRefresh() {
setTimeout(()=>{
uni.stopPullDownRefresh()
},100);
},
methods: {
getPhoneNumber(e){
if(e.phone){
this.phone = e.phone
}
if(e.userid){
this.userid = e.userid
}
},
async getOrderList() {
if(this.list[this.tabCurrentIndex].loadStatus!=="noMore")
{
uni.showLoading({
title: '数据加载中...'
});
var para={
time: this.list[this.tabCurrentIndex].value
// time: "thisMonth"
}
const {data: res} = await uni.$http.post('/api/my/teacherClaTotal', para);
if(res&&res.data){
var data=res.data;
this.list[this.tabCurrentIndex].loadStatus="noMore";
this.list[this.tabCurrentIndex].slist=data.claTimeList;
this.list[this.tabCurrentIndex].totalFee=data.totalFee;
this.list[this.tabCurrentIndex].claCount=data.claCount;
this.$forceUpdate();
}
else{
this.list[this.tabCurrentIndex].loadStatus="noMore";
this.list[this.tabCurrentIndex].slist=[];
this.list[this.tabCurrentIndex].totalFee=0;
this.list[this.tabCurrentIndex].claCount=0;
this.$forceUpdate();
uni.showModal({
title: '提示',
content: res.message? res.message : '当前信息不存在..',
cancelText: '取消',
confirmText: '确定',
success: ress => {
// 返回
uni.navigateBack({
delta: 1
});
}
});
}
}
},
loadData(){
console.log('loadData');
// 加载
if(this.list[this.tabCurrentIndex].loadStatus=="more") {
this.list[this.tabCurrentIndex].loadStatus="loading";
setTimeout(() => {
this.getOrderList();
}, 300);
}
},
tabSelect(e) {
console.log(e)
this.tabCurrentIndex = e.currentTarget.dataset.id;
this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
// 重新加载 暂不需要加载
// this.list[this.tabCurrentIndex].loadStatus="more";
// this.list[this.tabCurrentIndex].slist=[];
this.loadData();
},
animationfinish({ detail: { current } }) {
this.tabCurrentIndex = current;
this.loadData();
},
// 联系教练
gototeacher(item){
var data={
id:item.id,
name:"教练A"
}
// 联系教练
var data=encodeURIComponent(JSON.stringify(data));
uni.navigateTo({
url: `/pages/teacher/chat?data=${data}`
})
},
reset(){
// 重新加载数据
this.list.forEach((cell,idx)=>{
this.list[idx].loadStatus='more';
this.list[idx].slist=[];
});
this.$forceUpdate();
this.loadData();
}
}
}
</script>
<style lang="less" scoped>
.page {
padding: 0;
position: relative;
background-image: url('@/static/image/bg.jpg');
background-attachment: fixed;
background-size: cover;
background-position: center center;
min-height: calc(100vh - var(--window-top) - var(--window-bottom));
}
.zcon{
padding: 0;
position: relative;
background: #6f8c6e;
padding: 30rpx;
margin: 30rpx;
height: 160rpx;
display: flex;
flex-direction: column;
border-radius: 20rpx;
.ztip{
font-size: 26rpx;
color: #fff;
margin-bottom: 5rpx;
}
.ztxt{
font-size: 40rpx;
color: #fff;
font-weight: 600;
}
}
.scrolllist{
height: 280rpx;
background: #fff;
white-space: nowrap;
width: 100%;
}
.bcon{
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 100%;
.bcell{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 50%;
.btip{
color: #888;
font-size: 26rpx;
}
.btxt{
font-size: 40rpx;
font-weight: 600;
color:#000;
}
}
}
.tabicl{
width: 140rpx;
height: 80rpx;
line-height: 80rpx;
position: relative;
display: inline-block;
overflow: hidden;
margin-right: 20rpx;
}
.ptext{
font-size: 30rpx;
text-align: center;
color: #000;
font-weight: 600;
height: 75rpx;
}
.cur .ptext{
color: #89965f;
font-size: 33rpx;
font-weight: 600;
}
.cur .pline{
width: 40%;
height: 9rpx;
background: #89965f;
border-radius: 6rpx;
opacity: 1;
margin-left: 30%;
}
.hcon{
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 100%;
padding-bottom: 10rpx;
margin-top: 10rpx;
border-top: 1rpx solid #e5e5e5;
border-bottom: 1rpx solid #e5e5e5;
}
.hcell{
width: 25%;
font-size: 26rpx;
font-weight: 600;
color: #000;
padding: 10rpx;
text-align: center;
}
.swiper-box {
flex: 1;
height: calc(100vh - var(--window-top) - 410rpx) !important;
}
.swiper-item {
height: 100%;
}
.lcon{
background: #fff;
padding: 30rpx;
margin: 30rpx;
border-radius: 20rpx;
}
.scell{
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
.oitem{
display: flex;
flex-direction: row;
background-color: #FFFFFF;
width: 100%;
border-bottom: 1rpx solid #e5e5e5;
align-items: center;
justify-content: center;
.ocell{
width: 25%;
font-size: 26rpx;
color: #333;
padding: 10rpx 10rpx 15rpx;
text-align: center;
}
}
}
</style>