com.kasite.client.uniapp.patient/pagesCrm/business/schemeDetail/template/return-visit.vue

<template>
	<view>
		<view class="header">
			<view>{{ memberName }}</view>
			<text class="warning">请根据计划安排到院{{ activeTypeName }}</text>
		</view>
		<view class="body">
			<view
				v-for="item in pushContent"
				:key="item.Id"
				:class="{ 'is-active': item.IsActive }"
				class="time-line"
			>
				<view class="dot">
					<view class="location" v-if="item.IsActive"></view>
				</view>
				<view class="wrapper">
					<view class="timestamp">
						<view>{{ item.ExecDate }}</view>
						<view>{{ item.OutPatientPushTypeName }}</view>
					</view>
					<text style="white-space: pre-wrap" class="content">{{ item.PushContent }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue';
import Props from './props';
import { PatientRead } from '../../../service';
import { common } from '@kasite/uni-app-base';

const props = defineProps(Props);

const option = ref({} as any);
const pushContent = ref([]);
const activeTypeName = ref('');

const init = async (datas) => {
	if (datas && !datas.length) return;
	const today = common.dateFormat(new Date()).formatYear;
	activeTypeName.value = '';
	datas.forEach((item) => {
		item.IsActive = item.ExecDate == today;
		if (item.IsActive) activeTypeName.value = item.OutPatientPushTypeName;
	});
	let readRes = datas[0].IsRead;
	if (!readRes) {
		const resp = await PatientRead({
			Id: datas[0].Id,
		});
		readRes = !!resp;
	const pages = getCurrentPages();
	const homePage = pages.find((p: any) => p && p.route && p.route.indexOf('pagesCrm/business/home/home') !== -1);
	const target: any = homePage || (pages.length >= 2 ? pages[pages.length - 2] : undefined);
	const vm = target && (target as any).$vm;
	if (vm && typeof vm.changeItemReadStatus === 'function') {
		vm.changeItemReadStatus(props.date, props.index, 1);
	} else {
		uni.$emit('changeItemReadStatus', { date: props.date, index: props.index, status: 1 });
	}
	}
	pushContent.value = datas;
	option.value = datas[0];
};

watch(
	() => props.content,
	(v) => {
		init(v);
	},
	{
		immediate: true,
		deep: true,
	}
);
</script>

<style lang="scss" scoped>
@import './common.scss';

.body {
	padding: 30rpx;
}

.time-line {
	padding-left: 71rpx;
	position: relative;
	margin-bottom: 38rpx;
}

.timestamp {
	font-weight: bold;
	font-size: 32rpx;
	color: #212326;
	line-height: 48rpx;
	display: flex;
	gap: 20rpx;
	margin-bottom: 22rpx;
}

.dot {
	width: 26rpx;
	height: 26rpx;
	background: #fff;
	border: 4rpx solid #d8d8d8;
	border-radius: 100%;
	position: absolute;
	left: 20rpx;
	top: 5rpx;
	z-index: 1;
}

.time-line::after {
	content: '';
	width: 6rpx;
	height: calc(100% + 38rpx);
	background: #d8d8d8;
	position: absolute;
	top: 5rpx;
	left: 30rpx;
	z-index: 0;
}

.content {
	background: #f7f7fb;
	border-radius: 6rpx;
	padding: 20rpx;
	font-size: 28rpx;
	color: #434349;
	line-height: 48rpx;
	display: block;
}

.time-line:last-child::after {
	display: none;
}

/** 激活状态 */
.time-line.is-active .timestamp {
	color: var(--dominantColor);
}

.time-line.is-active .dot {
	width: 38rpx;
	height: 38rpx;
	border: none;
	background-color: var(--dominantColor);
	left: 14rpx;
	top: -2rpx;
}

.time-line.is-active .dot::after {
	--width: 6rpx;
	content: '';
	position: absolute;
	border-top: var(--width) solid var(--dominantColor);
	border-left: var(--width) solid transparent;
	border-right: var(--width) solid transparent;
	border-bottom: var(--width) solid transparent;
	left: 50%;
	transform: translateX(-50%);
	bottom: -14rpx;
}

.location {
	width: 20rpx;
	height: 20rpx;
	background: #fff;
	border-radius: 100%;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 6rpx;
}

.location::before {
	content: '';
	width: 8rpx;
	height: 8rpx;
	background: var(--dominantColor);
	border-radius: 100%;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
}

.location::after {
	--width: 8rpx;
	content: '';
	position: absolute;
	border-top: calc(var(--width) + 4rpx) solid #fff;
	border-left: var(--width) solid transparent;
	border-right: var(--width) solid transparent;
	border-bottom: calc(var(--width) + 4rpx) solid transparent;
	left: 50%;
	transform: translateX(-50%);
	bottom: -18rpx;
}
</style>