xinelu-nurse-app/pages/homepage/homepage.vue

<template>
	<view class="app">
		<image class="circular" :src="beijingurl" mode=""></image>
		<view class="topfloat">
			<image src="../../static/gongdan.png" mode="" @tap="goMymission('')"></image>
			<view class="tapbtn" @tap="goMymission('')">
				立即处理
			</view>
			<view class="btns">
				<view class="btn" @tap="goMymission('NOT_FINISH')">
					<view class="number" v-if="selectOrderByNursePersonCountlist.notFinishCount>=0">
						{{selectOrderByNursePersonCountlist.notFinishCount}}项
					</view>
					<view class="number" v-else>
						0项
					</view>
					<view class="text">
						待处理
					</view>
				</view>
				<view class="btn" @tap="goMymission('COMPLETE')">
					<view class="number" style="color: #333333;"
						v-if='selectOrderByNursePersonCountlist.completeCount>=0'>
						{{selectOrderByNursePersonCountlist.completeCount}}项
					</view>
					<view class="number" style="color: #333333;" v-else>
						0项
					</view>
					<view class="text">
						已完成
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="centerfloat">
			<view class="title">
				在线学习
			</view>
			<view class="cards">
				<image src="../../static/xxpx.png" mode="" @tap='goLearningtraining'></image>
				<image src="../../static/jnks.png" mode="" @tap='gostudy'></image>
				<image src="../../static/zxkf.png" mode="" @tap='gostudy'></image>
			</view>
		</view> -->
		<view class="centerfloat bottomfloat">
			<view class="title">
				护理新闻
			</view>
			<view class="righttitle" @tap='goHealthknowledge'>
				查看更多
				<u-icon name="arrow-right" color='#969494'></u-icon>
			</view>
			<view class="items">
				<view class="item" v-for='(item,index) in NurseNewslist' @tap='goHealthitem(item)'>
					<image :src="item.leadThumbnailUrl" mode=""></image>
					<view class="toptext">
						{{item.informationTitle}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		selectOrderByNursePersonCount,
		selectNurseNews
	} from '@/api/homepage/index.js'
	import {
		mapActions
	} from "vuex";
	import baseurl from '@/api/baseurl.js'
	export default {
		data() {
			return {
				beijingurl: null, //背景
				nurserStationPersonId: null, //护理员id
				selectOrderByNursePersonCountlist: {}, //项目数量对象
				NurseNewslist: [],
			};
		},
		onShow() {
			this.selectNurseNewsinfo();
			this.selectOrderByNursePersonCountlist = {}
			this.beijingurl = baseurl + '/profile/nursePersonAppletPicture/person_center.png'
			var that = this
			const value = uni.getStorageSync('nursePersonId');
			if (value) {
				that.nurserStationPersonId = value
				that.OrderByNursePersonCount();
			} else {}
		},
		methods: {
			...mapActions(["personopenPopup"]),
			//项目数量
			OrderByNursePersonCount() {
				selectOrderByNursePersonCount(this.nurserStationPersonId).then(res => {
					this.selectOrderByNursePersonCountlist = res.data
				})
			},
			goMymission(item) {
				uni.navigateTo({
					url: `/pages/Mymission/Mymission?orderStatus=${item}`
				})
			},
			gostudy() {
				uni.navigateTo({
					url: '/pages/study/study'
				})
			},
			goHealthknowledge() {
				uni.navigateTo({
					url: '/pages/Healthknowledge/Healthknowledge',
				});
			},
			//跳转学习培训
			goLearningtraining() {
				uni.navigateTo({
					url: '/pages/Learningtraining/Learningtraining'
				})
			},
			//护理新闻
			selectNurseNewsinfo() {
				selectNurseNews().then(res => {
					if (res.rows) {
						res.rows.forEach(e => {
							e.leadThumbnailUrl = baseurl + e.leadThumbnailUrl
						})
					}
					this.NurseNewslist = res.rows
				})
			},
			//跳转详情
			goHealthitem(item) {
				uni.navigateTo({
					url: `/pages/Healthitem/Healthitem?item=${encodeURIComponent(JSON.stringify(item))}`
				})
			},
		},
	}
</script>
<style lang="scss">
	page {
		background-color: #fff;
	}

	.app {
		position: relative;

		.TemplateMessage {
			display: block;
			width: 94%;
			margin: 30rpx auto;
			background-color: #f4f6f7;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			font-size: 36rpx;
		}

		.bottomfloat {
			position: relative;

			.items {
				width: 100%;

				.item {
					position: relative;
					height: 170rpx;
					width: 100%;
					color: #666666;
					padding: 0 0 20rpx;
					margin: 20rpx 0;
					border-bottom: 1rpx solid #cdc9c9;

					image {
						position: absolute;
						top: 0;
						left: 0;
						width: 150rpx;
						height: 150rpx;
					}

					.toptext {
						line-height: 30rpx;
						font-size: 26rpx;
						position: absolute;
						top: 5rpx;
						left: 170rpx;
						width: 70%;
						text-overflow: -o-ellipsis-lastline;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 5; //行数需设置
						line-clamp: 5;
						-webkit-box-orient: vertical;
						text-align: justify;
					}
				}
			}

			.righttitle {
				position: absolute;
				right: 20rpx;
				top: 0;
				color: #969494;
				font-size: 24rpx;
			}
		}

		.centerfloat {
			width: 94%;
			margin: 50rpx auto 0;

			.cards {
				display: flex;
				justify-content: space-between;

				image {
					width: 31%;
					height: 240rpx;
				}
			}

			.title {
				height: 29rpx;
				font-size: 30rpx;
				line-height: 29rpx;
				color: #333333;
				margin: 0 0 40rpx 0;
				padding-left: 10rpx;
				border-left: 6rpx solid #18CBB3;
			}
		}

		.topfloat {
			z-index: 999;
			display: block;
			width: 94%;
			height: 510rpx;
			margin: 160rpx auto 0;
			position: relative;
			box-shadow: 0rpx 3rpx 18rpx 0rpx rgba(79, 108, 254, 0.43);

			.btns {
				position: absolute;
				top: 380rpx;
				display: flex;
				justify-content: space-around;
				width: 100%;
				text-align: center;

				.btn {
					width: 200rpx;

					.text {
						font-size: 30rpx;
						color: #999999;
					}

					.number {
						font-size: 34rpx;
						color: #F14941;
					}
				}
			}

			.tapbtn {
				width: 239rpx;
				height: 70rpx;
				background: #4C7BC9;
				border-radius: 35rpx;
				text-align: center;
				line-height: 70rpx;
				color: #fff;
				position: absolute;
				top: 210rpx;
				left: 60rpx;
			}

			image {
				width: 100%;
				height: 100%;
			}
		}

		.circular {
			z-index: -1;
			width: 100%;
			height: 500rpx;
			position: absolute;
			top: 0;
		}
	}
</style>