NurseStationPersonApp/pages/Mymission/Mymission.vue

<template>
	<view class="app">
		<view class="inputs">
			<i class="icon"></i>
			<input type="text" name="" v-model='nurseItemName' 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="" v-if="list.length>0">
				<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 @tap='gotask(item)' :src="baseurl+item.itemPictureUrl" mode=""></image>
					<view class="detailsinfo" @tap='gotask(item)'>
						<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" @tap='goconfirmCompletion(item)'>去完成</view>
					</view>
				</view>
				<view class="Apayment" @tap='gotask(item)' 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 class="">
				<!-- //暂无未完成订单 -->
				<view class="noorder" v-if="list.length==0&&choicetab==0">
					<image src="../../static/noorder.png" mode=""></image>
					<view class="">
						暂无待完成服务
					</view>
				</view>
				<!-- //暂无完成订单 -->
				<view class="noorder" v-if="list.length==0&&choicetab==1">
					<image src="../../static/noorder.png" mode=""></image>
					<view class="">
						暂无已完成服务
					</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: '', //护理员id
				orderStatus: 'NOT_FINISH', //  orderStatus:订单状态 未完成：NOT_FINISH，服务完成：COMPLETE
				pageNum: 1,
				pageSize: 10,
				//未完成任务
				list: [],
				total: 0,
				nurseItemName: '',
			}
		},
		watch: {
			nurseItemName() {
				this.selectMissioninfo()
			}
		},
		methods: {
			//去完成
			goconfirmCompletion(item) {
				uni.navigateTo({
					url: `/pages/confirmCompletion/confirmCompletion?orderDetailsId=${item.id}&orderNo=${item.orderNo}`
				})
			},
			//任务list
			selectMissioninfo() {
				selectMission(this.nursePersonId, this.orderStatus, this.pageNum, this.pageSize, this.nurseItemName).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, this.nurseItemName).then(
					res => {
						this.list = res.rows
						this.total = res.total
					})
			},
			// goorderdetails() {
			// 	uni.navigateTo({
			// 		url: '/pages/orderDetails/orderDetails'
			// 	})
			// },
		},
		onShow() { //加载的时候执行（没有次数限制）
			this.baseurl = baseurl
			var that = this
			try {
				const value = uni.getStorageSync('nursePersonId');
				if (value) {
					that.nursePersonId = value
					this.selectMissioninfo();
				}
			} catch (e) {}
		},
		onReachBottom() { //下滑加载
			if (this.list.length >= this.total) {} else {
				this.pageNum++
				selectMission(this.nursePersonId, this.orderStatus, this.pageNum, this.pageSize, this.nurseItemName).then(
					res => {
						res.rows.forEach(e => {
							this.list.push(e)
						})
					})
			}
		},
		onPullDownRefresh() { //下拉刷新
			this.pageNum = 1;
			selectMission(this.nursePersonId, this.orderStatus, this.PageNum, this.PageSize, this.nurseItemName).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%;

		.noorder {
			margin-top: 20%;

			image {
				display: block;
				margin: 0 auto;
				width: 200rpx;
				height: 240rpx;
			}

			view {
				margin-top: 100rpx;
				text-align: center;
				font-size: 36rpx;
				color: #BFBFBF;
			}
		}

		.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>