330 lines
8.1 KiB
Vue
330 lines
8.1 KiB
Vue
<template>
|
|
<view class="content">
|
|
<u-navbar
|
|
:is-back="false"
|
|
title="计划列表"
|
|
title-color="black"
|
|
:background="{ backgroundColor: '#F7F8FC' }"
|
|
:border-bottom="false"
|
|
>
|
|
<view slot="right">
|
|
<image
|
|
src="/static/images/icon-date.png"
|
|
mode="scaleToFill"
|
|
style="width: 40rpx; height: 40rpx; margin-right: 32rpx"
|
|
@click="toggleDate"
|
|
/>
|
|
</view>
|
|
</u-navbar>
|
|
|
|
<view
|
|
class="selectTab"
|
|
:class="{
|
|
'tab-completed': activeTab === 'completed',
|
|
'tab-incomplete': activeTab === 'incomplete',
|
|
}"
|
|
>
|
|
<view
|
|
class="tab-item"
|
|
:class="{ active: activeTab === 'completed' }"
|
|
@click="switchTab('completed')"
|
|
>
|
|
<view class="label">已完成计划</view>
|
|
<view class="count">{{ completedPlanList.length }}</view>
|
|
</view>
|
|
<view
|
|
class="tab-item"
|
|
:class="{ active: activeTab === 'incomplete' }"
|
|
@click="switchTab('incomplete')"
|
|
>
|
|
<view class="label">未完成计划</view>
|
|
<view class="count">{{ incompletePlanList.length }}</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="planList" :class="{ activeList: activeTab === 'incomplete' }">
|
|
<!-- <view class="plan-item">
|
|
<view class="plan-header">
|
|
<image
|
|
src="/static/images/icon-date.png"
|
|
mode="scaleToFill"
|
|
style="width: 40rpx; height: 40rpx"
|
|
/>
|
|
<view class="date">05-21</view>
|
|
<view>1天前</view>
|
|
</view>
|
|
<view class="plan-content">
|
|
<view class="plan-content-top">
|
|
<view class="place">校门A区教学楼</view>
|
|
<u-tag text="9:00~12:00" type="info" border-color="transparent" />
|
|
</view>
|
|
<view class="plan-content-main">
|
|
北大门右侧操场跑道/南广场升旗台/A区第二食堂3楼
|
|
</view>
|
|
</view>
|
|
</view> -->
|
|
<view
|
|
class="plan-item"
|
|
v-for="(item, index) in activeTab === 'completed'
|
|
? completedPlanList
|
|
: incompletePlanList"
|
|
:key="index"
|
|
>
|
|
<view class="plan-header">
|
|
<image
|
|
src="/static/images/icon-date.png"
|
|
mode="scaleToFill"
|
|
style="width: 40rpx; height: 40rpx"
|
|
/>
|
|
<view class="date">{{ item.date }}</view>
|
|
<view>{{ item.date ? getDateDiff(item.date) : "-" }}</view>
|
|
</view>
|
|
<view class="plan-content">
|
|
<view class="plan-content-top">
|
|
<view class="place">{{ item.name }}</view>
|
|
<u-tag text="9:00~12:00" type="info" border-color="transparent" />
|
|
</view>
|
|
<view class="plan-content-main">
|
|
{{ item.areas }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<u-empty
|
|
v-if="
|
|
!loading &&
|
|
((activeTab === 'completed' && completedPlanList.length === 0) ||
|
|
(activeTab === 'incomplete' && incompletePlanList.length === 0))
|
|
"
|
|
mode="list"
|
|
></u-empty>
|
|
</view>
|
|
|
|
<!-- :max-date="maxDate" -->
|
|
<u-calendar
|
|
v-model="showCalendar"
|
|
mode="range"
|
|
@change="changeDate"
|
|
></u-calendar>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { GetPlanList } from "@/api/apiList";
|
|
|
|
import { GetNowTime } from "@/utils/common";
|
|
import { getDateDiff } from "@/utils/utils";
|
|
|
|
export default {
|
|
data() {
|
|
const todayStr = GetNowTime(new Date());
|
|
|
|
return {
|
|
activeTab: "completed",
|
|
|
|
// maxDate: "2049-12-31", // 默认最大日期为当天
|
|
|
|
showCalendar: false,
|
|
|
|
// 请求参数
|
|
params: {
|
|
// "Item1.IsCompleted": 1, // '0 1 2' 0未完成 1已完成 2不用管
|
|
dateBegin: todayStr,
|
|
dateEnd: todayStr,
|
|
},
|
|
|
|
// 计划列表
|
|
completedPlanList: [],
|
|
incompletePlanList: [],
|
|
loading: false, // 添加加载状态
|
|
};
|
|
},
|
|
onShow() {
|
|
// 页面每次展示时都获取所有列表
|
|
this.fetchAllPlanLists();
|
|
},
|
|
methods: {
|
|
getDateDiff,
|
|
|
|
toggleDate() {
|
|
this.showCalendar = !this.showCalendar;
|
|
},
|
|
switchTab(tab) {
|
|
this.activeTab = tab;
|
|
},
|
|
|
|
changeDate(e) {
|
|
this.params.dateBegin = e.startDate;
|
|
this.params.dateEnd = e.endDate;
|
|
// 日期更改后，重新获取所有列表
|
|
this.fetchAllPlanLists();
|
|
},
|
|
|
|
// 统一获取所有列表数据
|
|
async fetchAllPlanLists() {
|
|
if (this.loading) return; // 防止重复加载
|
|
this.loading = true;
|
|
uni.showLoading({ title: "加载中..." }); // 显示加载提示
|
|
try {
|
|
await Promise.all([this.fetchListData(1), this.fetchListData(0)]);
|
|
} catch (error) {
|
|
console.error("获取所有列表时出错:", error);
|
|
} finally {
|
|
this.loading = false;
|
|
uni.hideLoading(); // 隐藏加载提示
|
|
}
|
|
},
|
|
|
|
async fetchListData(status) {
|
|
const requestParams = {
|
|
...this.params,
|
|
"Item1.IsCompleted": status, // 0未完成 1已完成 2不用管
|
|
};
|
|
|
|
const res = await GetPlanList(requestParams);
|
|
if (res.succeed) {
|
|
if (status === 1) {
|
|
this.completedPlanList = res.data || [];
|
|
} else {
|
|
this.incompletePlanList = res.data || [];
|
|
}
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
page {
|
|
background: #f7f8fc !important;
|
|
}
|
|
.content {
|
|
// height: 100vh;
|
|
padding-bottom: 100rpx;
|
|
background: #f7f8fc;
|
|
.selectTab {
|
|
display: flex;
|
|
// background: url("@/static/images/plan-tab2.png") no-repeat 0 0;
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
background-position: 0 0;
|
|
transition: opacity 0.3s ease;
|
|
border-radius: 16rpx;
|
|
padding: 32rpx 0;
|
|
margin: 0 32rpx 32rpx;
|
|
|
|
.tab-item {
|
|
flex: 1;
|
|
text-align: center;
|
|
position: relative;
|
|
transition: all 0.3s;
|
|
position: relative;
|
|
z-index: 1;
|
|
|
|
.label {
|
|
font-size: 28rpx;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.count {
|
|
font-size: 36rpx;
|
|
color: #ffffff;
|
|
font-weight: 500;
|
|
}
|
|
|
|
&.active {
|
|
.label {
|
|
color: #ffffff;
|
|
font-weight: 500;
|
|
}
|
|
|
|
// &::after {
|
|
// content: "";
|
|
// position: absolute;
|
|
// bottom: -46rpx;
|
|
// left: 50%;
|
|
// transform: translateX(-50%) rotate(45deg);
|
|
// width: 32rpx;
|
|
// height: 32rpx;
|
|
// background: #383edd;
|
|
// border-radius: 10rpx;
|
|
// z-index: 1;
|
|
// }
|
|
|
|
// &::before {
|
|
// content: "";
|
|
// position: absolute;
|
|
// bottom: -34rpx;
|
|
// left: 50%;
|
|
// transform: translateX(-50%);
|
|
// width: 8rpx;
|
|
// height: 8rpx;
|
|
// background: #ffffff;
|
|
// border-radius: 4rpx;
|
|
// z-index: 2;
|
|
// }
|
|
}
|
|
}
|
|
}
|
|
|
|
.tab-completed {
|
|
background-image: url("/static/images/plan-tab1.png");
|
|
}
|
|
|
|
.tab-incomplete {
|
|
background-image: url("/static/images/plan-tab2.png");
|
|
}
|
|
|
|
.planList {
|
|
padding: 0 32rpx;
|
|
.plan-item {
|
|
border-radius: 16rpx;
|
|
margin-top: 32rpx;
|
|
background: linear-gradient(
|
|
to bottom,
|
|
#edf2ff 0%,
|
|
#fafcff 30%,
|
|
#ffffff 100%
|
|
);
|
|
.plan-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
gap: 20rpx;
|
|
padding: 20rpx;
|
|
border-bottom: 1px solid #f2f2f2;
|
|
}
|
|
.plan-content {
|
|
padding: 20rpx;
|
|
padding-bottom: 32rpx;
|
|
&-top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
.place {
|
|
font-size: 32rpx;
|
|
color: #333;
|
|
}
|
|
}
|
|
&-main {
|
|
margin-top: 32rpx;
|
|
background-color: #f3f3f3;
|
|
padding: 32rpx;
|
|
border-radius: 16rpx;
|
|
}
|
|
}
|
|
}
|
|
&.activeList {
|
|
.plan-item {
|
|
background: linear-gradient(
|
|
to bottom,
|
|
#fef7ec 0%,
|
|
#fffdfa 30%,
|
|
#ffffff 100%
|
|
);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|