special/pages/subpack/pages/application/componenets/page4.vue

<template>
	<view class="page4-warp">
		<view class="info-dot">打卡记录（{{listTotal}}次）</view>
		<view class="flow-list">
			<up-steps current="2" direction="column">
				<up-steps-item v-for="(flow, index) in listData" :key="index" class="position-relative"
					:title="flow.nodeTitle">
					<template #icon>
						<view class="flow-icon"></view>
					</template>
					<template #desc>
						<view class="flow-des">
							<view class="flow-des-top">
								<view> {{flow.createTime??' '}}</view>
								<!-- <view :class="`flow-des-top-tips`">查看</view> -->
							</view>
							<view class="flow-des-bg">
								<view v-if="flow.fileList.length>0">
									<view>打卡图片({{flow.imgNum}}张):</view>
									<view class="flow-des-img">
										<!-- <up-image v-for="(item, index1) in flow.fileList" :key="index1"
											:width="'161rpx'" :height="'161rpx'" :src="item" mode="aspectFill"
											@click="previewImg(flow.fileList,index1)">
											<template #error>
												<image src="@/pages/subpack/static/images/error-img.png"
													style="width: 161rpx;height: 161rpx;" mode="aspectFill" />
											</template>
										</up-image> -->
										<image v-for="(item, index1) in flow.fileList" :key="index1" :src="item"
											style="width: 161rpx;height: 161rpx;" mode="aspectFill"
											@click="previewImg(flow.fileList,index1)"></image>
									</view>
								</view>
								<view :class="`flow-des-des`" v-if="flow.remark">
									{{flow.remark}}
								</view>
							</view>
						</view>
					</template>
				</up-steps-item>
			</up-steps>

			<view v-if="listData.length === 0">
				<up-empty text="暂无打卡记录" />
			</view>
		</view>
		<view v-if="computeShowBtn" class="btn-box">
			<view class="flex-row ">
				<up-button class="up-button" type="error" style="width: 250rpx;" @tap="dieHandle">死亡</up-button>
				<view class="btn-place"></view>
				<up-button class="up-button" type="success" style="width: 250rpx;" @tap="endHandle">结束</up-button>
				<view class="btn-place"></view>
				<up-button class="up-button" type="primary" @tap="clockHandle">‌打卡</up-button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		onUnmounted,
		computed,
		getCurrentInstance
	} from 'vue';
	import {
		useStore
	} from 'vuex';
	import {
		onLoad,
	} from "@dcloudio/uni-app"
	import {
		getClockList,
		completeTask
	} from '@/common/config/application-api.js'
	import errorImage from '@/pages/subpack/static/images/error-img.png';

	const listData = ref([]);
	const listTotal = ref(0);

	const {
		proxy
	} = getCurrentInstance();


	const props = defineProps({
		item: {
			type: Object,
			default () {
				return {}
			}
		}
	})

	onMounted(() => {
		console.log('onMounted Page4');
		uni.$on('reloadLine', () => {
			getList();
		})
	})

	onUnmounted(() => {
		uni.$off('reloadLine')
	})

	// 图片预览
	const previewImg = (imgList, index) => {
		// console.log(imgList);
		if (imgList.length > 0) {
			uni.previewImage({
				urls: imgList,
				current: index
			})
		}
	}

	const computeShowBtn = computed(() => {
		return proxy.vuex_user.roles.includes('nurse') && props.item.dealStatus !== 'complete' && props.item
			.dealStatus !== 'wait_complete'
	})


	function getList() {
		if (!props.item.applyId) return false;
		let params = {
			pageNum: 1,
			pageSize: 500,
			applyId: props.item.applyId
		}
		getClockList({
			params
		}).then(data => {
			//数组倒叙
			listData.value = data.reverse();
			listData.value.map(v => {
				const imgs = v.imgPaths.split(",").filter(item => item.trim() !== "");
				let fileList = []
				imgs.forEach(function(item) {
					let url = uni.$u.http.config.baseURL + '/prod-api/' + item;
					fileList.push(url);
				})
				//截取前三张图片
				v.fileList = fileList.slice(0, 3);
			})
			listTotal.value = data.length;
		})
	}

	// function imgErrorHandle(index, index1) {
	// 	listData.value[index].fileList[index1] = errorImage;
	// }

	// 死亡
	function dieHandle() {
		uni.$u.route('/pages/subpack/pages/nurse/clockIn', {
			type: 1,
			id: props.item.applyId
		})
	}

	//结束
	function endHandle() {
		uni.$u.route('/pages/subpack/pages/nurse/end-care', {
			id: props.item.applyId
		});
		return;
		console.log(props.item);
		uni.showModal({
			title: '结束护理',
			content: '确定此次护理吗？',
			showCancel: true,
			success: (e) => {
				if (e.confirm) {
					let params = props.item;
					params.dealStatus = 'wait_complete';
					params.payStatus = 'dis_pay';
					completeTask(params)
						.then(res => {
							uni.$emit('renderApplyList')
							uni.navigateBack();
						})
						.catch(err => {
							console.log(err);
						})
				}
			}
		})
	}

	//打卡
	function clockHandle() {
		uni.$u.route('/pages/subpack/pages/nurse/clockIn', {
			type: 0,
			id: props.item.applyId
		})
	}


	function init() {
		getList();
	}

	init();
</script>

<style lang="scss" scoped>
	.flow-icon {
		width: 18rpx;
		height: 18rpx;
		border-radius: 50%;
		background: #207DFF;
	}

	.info-dot {
		position: relative;
		margin: 20rpx;
		padding-left: 20rpx;
		font-size: 36rpx;
		color: #0B0B0B;
	}

	.info-dot::before {
		content: '';
		position: absolute;
		width: 12rpx;
		height: 12rpx;
		border-radius: 50%;
		top: calc(50% - 6rpx);
		left: 0;
		background: #4794FF;
	}

	.flow-list {
		margin: 24rpx !important;
		padding: 30rpx;
		border-radius: 10rpx;
		background-color: #fff;
	}

	.flow-time {
		font-size: 28rpx;
		color: #888888;
	}

	.flow-des {

		&-bg {
			background: rgba(115, 190, 255, 0.08);
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			padding: 24rpx 40rpx 30rpx 40rpx;
			margin-top: 10rpx;
		}

		&-top {
			font-size: 32rpx;
			color: #222222;
			display: flex;
			align-items: center;
			justify-content: space-between;

			&-tips {
				font-size: 28rpx;
				color: #207DFF;
			}

			&-tips1 {
				color: #1FBC99;
			}

			&-tips0 {
				color: #FA7E00;
			}

			&-tips2 {
				color: #fa3534;
			}
		}

		&-des {
			margin-top: 25rpx;
			font-size: 28rpx;
			color: #888888;
		}
	}

	.flow-des-img {
		display: flex;
		// gap: 10rpx;
		// flex-wrap: wrap;
		// margin: 10rpx 0;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-top: 12px;
	}

	.btn-box {
		padding: 20rpx 36rpx;
		background-color: #fff;
		position: fixed;
		bottom: calc(50px + var(--status-bar-height));
		/* bottom: 50px; */
		width: 690rpx;

		.btn-place {
			width: 50rpx;
		}
	}
</style>