com.kasite.client.uniapp.patient/pagesCrm/business/schemeDetail/template/health-education.vue

<template>
	<view>
		<view class="header">
			<view>{{ memberName }}</view>
			<text class="warning">计划阅读：{{ option.ExecDate }}前</text>
			<text class="warning" v-if="option.IsRead">
				实际阅读：{{ isAllRead ? '完成' : '未完成' }}
			</text>
		</view>
		<view class="body">
			<view v-for="(item, index) in list" :key="index" class="article">
				<view class="status" :class="item.IsRead ? 'read' : 'unread'">
					{{ item.IsRead ? '已阅读' : '未阅读' }}
				</view>
				<view class="title">
					<text>{{ index + 1 }}、</text>
					<text>{{ item.PushContent.Title }}</text>
				</view>
				<view class="btn" @click="toArticle(item)">
					<text>立即阅读</text>
					<view class="arrow-right"></view>
				</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';
import path from '../../../static/path';

const props = defineProps(Props);

const list = ref([]);
const option = ref({} as any);
const isAllRead = ref(0);

const init = async (datas) => {
	if (datas && !datas.length) return;
	datas.forEach((item) => {
		try {
			if (typeof item.PushContent == 'string') {
				item.PushContent = JSON.parse(item.PushContent);
			}
		} catch (e) {}
	});
	let isRead = 1;
	for (let i = 0; i < datas.length; i++) {
		if (!datas[i].IsRead) {
			isRead = 0;
			break;
		}
	}
	list.value = datas;
	option.value = datas[0];
	isAllRead.value = isRead;
};

const toArticle = async (row) => {
	const {
		PushContent: { Title, Id },
		Id: planid,
	} = row;
	const index = list.value.findIndex((item) => item.Id == planid);
	const plan = list.value[index];
	let readRes = plan.IsRead;
	if (!plan.IsRead) {
		const resp = await PatientRead({
			Id: planid,
		});
		readRes = !!resp;
	}
	list.value[index].IsRead = readRes;
	const isAllRead = list.value.reduce((res, item) => {
		return res && item.IsRead;
	}, true);
	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, isAllRead);
	} else {
		uni.$emit('changeItemReadStatus', { date: props.date, index: props.index, status: isAllRead });
	}
	common.goToUrl(path.article(Id));
};

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

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

.body {
	padding: 30rpx;
}

.article {
	height: 108rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 40rpx 22rpx;
	background: #f7f7fb;
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	margin-bottom: 29rpx;
	position: relative;
}

.title {
	font-size: 28rpx;
	color: #434349;
	position: relative;
	z-index: 1;
}

.btn {
	padding: 20rpx 10rpx;
	font-size: 28rpx;
	font-weight: normal;
	color: var(--uni-color-primary);
	background: transparent;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8rpx;
}

.status {
	--is-read: #00a9a9;
	--un-read: #f95d3b;
	font-size: 20rpx;
	color: #fefffe;
	padding: 6rpx 13rpx;
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 20rpx 20rpx 20rpx 0;
	z-index: 0;
}

.status::before {
	content: '';
	width: 16rpx;
	height: 16rpx;
	position: absolute;
	bottom: -16rpx;
	left: 0;
}

.status::after {
	content: '';
	width: 32rpx;
	height: 32rpx;
	background-color: #f7f7fb;
	position: absolute;
	bottom: -32rpx;
	left: 0;
	border-radius: 32rpx;
}

.status.read,
.status.read::before {
	background-color: var(--is-read);
}

.status.unread,
.status.unread::before {
	background-color: var(--un-read);
}

.arrow-right {
	--width: 13rpx;
	--height: 10rpx;
	display: inline-block;
	width: calc(var(--width));
	height: calc(var(--height) * 2);
	border-top: var(--height) solid transparent;
	border-bottom: var(--height) solid transparent;
	border-left: var(--width) solid var(--uni-color-primary);
	position: relative;
}

.arrow-right::after {
	content: '';
	border-top: var(--height) solid transparent;
	border-bottom: var(--height) solid transparent;
	border-left: var(--width) solid #f7f7fb;
	position: absolute;
	left: -14rpx;
	top: 50%;
	transform: translateY(-50%);
}
</style>