NurseStationPersonApp/pages/Mymission/Mymission.vue

<template>
	<view class="app">
		<view class="inputs">
			<i class="icon"></i>
			<input type="text" name="" id="" class="input" placeholder="请输入搜索内容">
		</view>
		<view class="tab">
			<view class="tab-item" @tap="testTabClick(index)" v-for="(item,index) in tabList"
				:class="tabIndex == index?'active':''">
				{{item.name}}
			</view>
			<view class="Apayment" v-if='choicetab==0' v-for="(item,index) in list" :key="item.id">
				<view class="names">{{item.serviceDate}} {{item.serviceStartTime}}-{{item.serviceEndTime}}
					<span>待完成</span>
				</view>
				<image :src="baseurl+item.itemPictureUrl" mode=""></image>
				<view class="detailsinfo">
					<view class="change">
						{{item.nurseItemName}}
					</view>
					<view class="time">
						服务时长：{{item.itemServeDurationUnit}}
					</view>
					<view class="price">
						￥{{item.totalPrice}}
					</view>
				</view>
				<view class="anniu">
					<view class="logistics" @tap='gotask(item)'>详情</view>
					<view class="logistics harvest">去完成</view>
				</view>
			</view>
			<view class="Apayment" v-if='choicetab==1' v-for="(item,uindex) in list" :key="uindex">
				<view class="names">{{item.serviceDate}} {{item.serviceStartTime}}-{{item.serviceEndTime}}
					<span>已完成</span>
				</view>
				<image src="../../static/fuwutu.png" mode=""></image>
				<view class="detailsinfo">
					<view class="change">
						{{item.nurseItemName}}
					</view>
					<view class="time">
						服务时长：{{item.itemServeDurationUnit}}
					</view>
					<view class="price">
						￥{{item.totalPrice}}
					</view>
				</view>
				<view class="anniu">
					<view class="evaluate">查看评价</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		selectMission
	} from '@/api/Mymission.js'
	import baseurl from '@/api/baseurl.js'
	export default {
		data() {
			return {
				baseurl: '',
				choicetab: 0, //切换
				tabIndex: 0, //切换
				tabList: [{
					name: "待完成"
				}, {
					name: "已完成"
				}, ],
				nursePersonId: 2, //护理员id
				orderStatus: 'NOT_FINISH', //  orderStatus:订单状态 未完成：NOT_FINISH，服务完成：COMPLETE
				pageNum: 1,
				pageSize: 10,
				//未完成任务
				list: [],
				total: 0,
			}
		},
		methods: {
			//任务list
			selectMissioninfo() {
				selectMission(this.nursePersonId, this.orderStatus, this.pageNum, this.pageSize).then(res => {
					this.list = res.rows
					this.total = res.total
				})
			},
			//跳转详情页
			gotask(item) {
				uni.navigateTo({
					url: `/pages/taskDetails/taskDetails?orderDetailsId=${item.id}`
				})
			},
			//任务切换
			testTabClick(index) {
				this.list = []
				this.tabIndex = index
				this.choicetab = index
				this.pageNum == 1
				if (this.choicetab == 0) {
					this.orderStatus = 'NOT_FINISH'
				} else {
					this.orderStatus = 'COMPLETE'
				}
				selectMission(this.nursePersonId, this.orderStatus, this.pageNum, this.pageSize).then(res => {
					this.list = res.rows
					this.total = res.total
				})
			},
			// goorderdetails() {
			// 	uni.navigateTo({
			// 		url: '/pages/orderDetails/orderDetails'
			// 	})
			// },
		},
		onLoad() { //开局调用
			this.baseurl = baseurl
			this.selectMissioninfo();
		},
		onReachBottom() { //下滑加载
			if (this.list.length >= this.total) {} else {
				this.pageNum++
				selectMission(this.nursePersonId, this.orderStatus, this.pageNum, this.pageSize).then(res => {
					res.rows.forEach(e => {
						this.list.push(e)
					})
				})
			}
		},
		onPullDownRefresh() { //下拉刷新
			this.pageNum = 1;
			selectMission(this.nursePersonId, this.orderStatus, this.PageNum, this.PageSize).then(res => {
				this.list = res.rows
				this.total = res.total
			})
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
	}
</script>

<style lang="scss">
	.app {
		background-color: #F4F5F7;
		width: 100%;
		height: 100vh;
		padding: 1rpx 3%;

		.tab .active {
			background: #4C7BC9;
		}

		// 切换
		.tab-item {
			width: 50%;
			text-align: center;
			line-height: 70rpx;
			color: #ffffff;
			background: #BAB7B8;
			display: inline-block;
			box-shadow: 0rpx 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
			border-radius: 20rpx;
			font-size: 34rpx;
		}

		.Apayment {
			width: 100%;
			height: 391rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
			border-radius: 20rpx;
			line-height: 70rpx;
			padding: 1%;
			font-size: 30rpx;
			color: #969394;
			margin-top: 20rpx;
			position: relative;

			image {
				display: block;
				width: 170rpx;
				height: 170rpx;
				border-radius: 10rpx;
				margin: 30rpx 0 0 20rpx;
			}

			.anniu {
				// width: 375rpx;
				float: right;
				margin: 30rpx 20rpx 0 0;

				.evaluate {
					background: #4C7BC9;
					width: 216rpx;
					height: 68rpx;
					text-align: center;
					color: #ffffff;
					border-radius: 26rpx;
				}

				.logistics {
					width: 175rpx;
					height: 68rpx;
					text-align: center;
					color: #ffffff;
					background: #E1AE3C;
					border-radius: 26rpx;
					display: inline-block;
				}

				.harvest {
					background: #4C7BC9;
					margin: 0 0 0 15rpx;
				}
			}

			.detailsinfo {
				width: 60%;
				height: 200rpx;
				border-radius: 10rpx;
				position: absolute;
				top: 25%;
				left: 35%;

				.change {
					width: 100%;
					color: #000000;
					font-size: 34rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.time {
					width: 100%;
					font-size: 32rpx;
					color: #999999;
					position: absolute;
					top: 32%;
				}

				.price {
					width: 100%;
					font-size: 30rpx;
					color: #D43953;
					position: absolute;
					top: 65%;
				}
			}

			.names {
				width: 95%;
				margin-left: 20rpx;
				border-bottom: 1rpx solid #D8D4D4;

				span {
					color: #4C7BC9;
					float: right;
				}
			}
		}

		.inputs {
			box-shadow: 0rpx 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
			border: 1rpx solid #f0f0f0;
			width: 99%;
			height: 65rpx;
			margin: 20rpx auto;
			border-radius: 20rpx;
			background-color: #Ffffff;
			position: relative;

			.input {
				position: absolute;
				height: 65rpx;
				left: 10%;
				line-height: 65rpx;
				font-size: 26rpx;
				color: #BEBEC0;
			}

			.icon {
				background: url(@/static/sousuo.png) no-repeat;
				width: 30rpx;
				height: 28rpx;
				background-size: cover;
				position: absolute;
				top: 30%;
				left: 5%;
			}
		}
	}
</style>