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;">
				<view class="calendar-box">
			           <pushangyuqi-calendar @onDayClick="onDayClick"></pushangyuqi-calendar>
				</view>
			</u-popup>
		<mescroll-body top="200upx" ref="mescrollRef">
			<view class="sms-list">
				<view v-for="(item,index) in dataList" :key="index" class="item">
					<view class="justify-between align-center">
						<view class="title">{{item.content}}</view>
						<view class="state" :style="{'color':item.status==0?'#FF5030':'#2CAE5C'}">
							{{item.status==0?"未完成":"已完成"}}</view>
					</view>
					<view class="personnel">
						{{item.personnel}}
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import pushangyuqiCalendar from '../components/pushangyuqi-calendar/pushangyuqi-calendar.vue'
	import {
		getMyDoctorOrderList,
		cancelOrder
	} from '@/api/doctorOrder.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: 0
					},
					{
						name: "固定任务",
						val: 1
					},
					{
						name: "工作计划",
						val: 2
					},
				],
				isShow:false,
				showType: 0,
				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: [{
						orderId: 1,
						content: '发送20条营销短信',
						status: 0,
						personnel: '管理员张三分配'
					},
					{
						orderId: 2,
						content: '发送20条营销短信',
						status: 1,
						personnel: '管理员张三分配'
					},
					{
						orderId: 3,
						content: '发送20条营销短信',
						status: 0,
						personnel: '管理员张三分配'
					}
				]
			}
		},
		onLoad() {
			// uni.$on('refreshDoctorOrder', () => {
			// 	this.mescroll.resetUpScroll()
			// })
		},
		methods: {
			//时间筛选
			openCalendar(){
				this.isShow=!this.isShow
			},
			//日历
			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 = {
					status: this.showType,
					page: page.num,
					pageSize: page.size
				};
				// getMyDoctorOrderList(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_doctor/doctorOrderIM?orderId=' + item.orderId
					})
				}
			}
		}
	}
</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>