179crm_user_app/pages_company/todoList.vue

<template>
	<view class="content">
		<view class="top-fixed">
			<!-- 事项列表 -->
			<view class="filter">
				<view :class="isShow==false?'time-box':'time-box active'"  @tap="openCalendar()">
					<view class="title">选择日期</view>
					<image :src="isShow==false?'/static/images/company/time_arrow_icon.png':'/static/images/company/time_arrow_blue_icon.png'" class="w24 h24"></image>
				</view>
				<view class="list-box">
					<image src="/static/images/company/list_matters_icon.png" class="w32 h32"></image>
					<view class="title">事项列表</view>
				</view>
			</view>
			</view>
			<view class="top-fixed2">
			<!-- tab切换 -->
			<view class="pub-tab-box">
				<view class="tab-inner">
					<view v-for="(item,index) in taskType" :key="index"
						:class="item.val == showType?'item active':'item'" @click="orderStatusChange(item)">
						<view class="text">
							{{ item.name }}
						</view>
					</view>
				</view>
			</view>
		</view>
			<u-popup :show="isShow" mode="top" :round="12" customStyle="top: 110rpx;" @close="close">
				<view class="calendar-box">
			           <pushangyuqi-calendar @onDayClick="onDayClick"></pushangyuqi-calendar>
				</view>
			</u-popup>
		<mescroll-body top="200upx" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
			<view class="sms-list">
				<view v-for="(item,index) in dataList" :key="index" class="item" @click="showDetail(item)">
					<view class="justify-between align-center">
						<view class="title">{{item.title}}</view>
						<view class="state" :style="{'color':item.status==0?'#FF5030':item.status==1?'#FDBD27':'#2CAE5C'}">
							{{item.statusText}}</view>
					</view>
					<view class="personnel">
						{{item.assigneeName}}
					</view>
				</view>
			</view>
			<view class="h20"></view>
		</mescroll-body>
	</view>
</template>

<script>
	import pushangyuqiCalendar from '../components/pushangyuqi-calendar/pushangyuqi-calendar.vue'
	import {
		getToDoList
	} from '@/api/companyUser.js'
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		components:{
		           pushangyuqiCalendar
		        },
		data() {
			return {
				taskType: [{
						name: "全部",
						val: null
					},
					{
						name: "固定任务",
						val: 0
					},
					{
						name: "工作计划",
						val: 1
					},
				],
				isShow:false,
				showType: null,
				mescroll: null,
				// 上拉加载的配置
				upOption: {
					onScroll: true,
					use: true, // 是否启用上拉加载; 默认true
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 10, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						icon: '/static/images/no_data.png',
						tip: '暂无数据'
					}
				},
				dataList: [],
			}
		},
		onLoad(opt) {
			if(opt.type!==null){
				this.showType=opt.type
			}
			uni.$on('refreshToDoList', () => {
				this.mescroll.resetUpScroll()
			})
		},
		methods: {
			//时间筛选
			openCalendar(){
				this.isShow=!this.isShow
			},
			close(){
				this.isShow=false
			},
			//日历
			onDayClick(data){
			                this.curDate = data;
							 this.isShow = false
			            },
			navgetTo(index) {
				// uni.navigateTo({
				// 	url: index == 0 ? '/pages_health/addServe' : '/pages_health/addCompetitors'
				// })
			},
			// tab切换
			orderStatusChange(item) {
				this.showType = item.val
				this.mescroll.resetUpScroll()
			},
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			/*下拉刷新的回调 */
			downCallback(mescroll) {
				mescroll.resetUpScroll()
			},
			upCallback(page) {
				//联网加载数据
				var that = this;
				var data = {
					cateId: this.showType,
					pageNum: page.num,
					pageSize: page.size
				};
				getToDoList(data).then(res => {
					if(res.code==200){
						//设置列表数据
						if (page.num == 1) {
							that.dataList = res.data.list; 

						} else {
							that.dataList = that.dataList.concat(res.data.list);

						}
						that.mescroll.endBySize(res.data.list.length, res.data.total);

					}else{
						uni.showToast({
							icon:'none',
							title: "请求失败",
						});
						that.dataList = null;
						that.mescroll.endErr();
					}
				});
			},
			showDetail(item) {
				// if (item.orderType == 1) {
					uni.navigateTo({
						url: '/pages_company/todoDetail?type=edit&id=' + item.id
					})
				// }
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color:#EFF3F7;
		background: #EFF3F7;
	}
	.calendar-box{
		padding:0 30rpx;
	}
	.content {
		padding: 20upx;

		.top-fixed {
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index:10076;
		}
		.top-fixed2 {
			width: 100%;
			position: fixed;
			top: 110rpx;
			left: 0;
			z-index: 10;
		}
        .filter{
			background: #FFFFFF;
			padding: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.time-box{
				display: flex;
				align-items: center;
				padding:16rpx 48rpx;
				background: #F5F7FA;
				border-radius: 32rpx 32rpx 32rpx 32rpx;
				.title{
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #626468;
					text-align: center;
					padding-right: 20rpx;
				}
				&.active{
					background: #F0FAFF;
					.title{
						color:#008FD3
					}
				}
			}
			.list-box{
				display: flex;
				align-items: center;
				.title{
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #222426;
					text-align: center;
					padding-left: 16rpx;
				}
			}
		}
		.pub-tab-box {
			box-sizing: border-box;
			width: 100%;
			padding: 0 20upx;
		    background-color: #EFF3F7;

			.tab-inner {
				height: 110upx;
				line-height: 110upx;
				display: flex;
				align-items: center;
				// justify-content: space-between;
				overflow-x: auto;
			}

			.item {
				// flex: 1;
				font-size: 28upx;
				white-space: nowrap;
				line-height: 1;
				font-family: PingFang SC;
				font-weight: 400;
				color: #222426;
				margin-right: 16upx;
				display: flex;
				align-items: center;
				justify-content: center;
                background: #FFFFFF;
                border-radius: 36rpx 36rpx 36rpx 36rpx;
				padding:16rpx 48rpx;
				&:last-child {
					margin-right: 0;
				}

				&.active {
					font-weight: bold;
					color: #fff;
                    background: linear-gradient(120deg, #31A1FE 0%, #008FD3 100%);
				}

				.text {
					position: relative;
					z-index: 1;
				}

				.tab-bg {
					width: 72upx;
					height: 28upx;
					position: absolute;
					top: 17upx;
					left: 50%;
					transform: translateX(-36upx);
					z-index: -1;
				}
			}
		}

		.btn-box2 {
			z-index: 9999;
			width: 100%;
			padding: 30upx;
			position: fixed;
			bottom: 0;
			left: 0;
			box-sizing: border-box;
			// background: #FFFFFF;


			.sub-btn {
				width: 100%;
				height: 88upx;
				line-height: 88upx;
				text-align: center;
				font-size: 30upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				background: #008FD3;
				border-radius: 44upx;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					margin-right: 16rpx;
				}
			}
		}

		.sms-list {
			.item {
				padding: 30rpx;
				background: #FFFFFF;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				margin-bottom: 20rpx;

				.title {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #222426;
					text-align: left;
				}

				.title {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #222426;
					text-align: left;
				}

				.state {
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					text-align: right;
				}

				.personnel {
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #898E91;
					text-align: left;
					margin-top: 16rpx;
				}

			}
		}

	}
</style>