NurseStationPersonAppletUl/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>
		<image @tap='goTemplate' class="TemplateMessage" src="../../static/dingyue.png" mode=""
			v-if="personRoleLoginFlag=='stationRole'||personRoleLoginFlag=='wholeRole'"></image>
		<view class="centerfloat">
			<view class="title">
				在线学习
			</view>
			<view class="cards">
				<image src="../../static/xxpx.png" mode="" @tap='gostudy'></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='gostudy'>
				查看更多
				<u-icon name="arrow-right" color='#969494'></u-icon>
			</view>
			<view class="items">
				<view class="item">
					<image src="../../static/jnks.png" mode=""></image>
					<view class="toptext">
						护理 I 致力于打造专业护理人才
					</view>
					<view class="centertext">
						生活小窍门,是指人们在日常生活中总结出来的知识和经验,和生活小常识非常相似
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		selectOrderByNursePersonCount
	} 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: {}, //项目数量对象
				personRoleLoginFlag: 'notRoleName', //身份认证
			};
		},
		onShow() {
			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 {}
			const value2 = uni.getStorageSync('personRoleLoginFlag');
			if (value2) {
				that.personRoleLoginFlag = value2
			} else {}
		},
		methods: {
			...mapActions(["personopenPopup"]),
			//项目数量
			OrderByNursePersonCount() {
				selectOrderByNursePersonCount(this.nurserStationPersonId).then(res => {
					this.selectOrderByNursePersonCountlist = res.data
				})
			},
			goMymission(item) {
				if (this.personRoleLoginFlag == 'nursePersonRole' || this.personRoleLoginFlag == 'wholeRole') {
					this.personopenPopup();
				}
				setTimeout(e => {
					uni.navigateTo({
						url: `/pages/Mymission/Mymission?orderStatus=${item}`
					})
				}, 0)
			},
			//跳转到模板消息订阅界面
			goTemplate() {
				uni.navigateTo({
					url: "/pages/template/template"
				})
			},
			gostudy() {
				uni.navigateTo({
					url: '/pages/study/study'
				})
			},
		},
	}
</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: 150rpx;
					width: 100%;
					color: #666666;

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

					.centertext {
						font-size: 22rpx;
						position: absolute;
						top: 60rpx;
						left: 150rpx;
						overflow: hidden; //超出的文本隐藏
						display: -webkit-box;
						-webkit-line-clamp: 2; // 超出多少行
						-webkit-box-orient: vertical;
					}

					.toptext {
						font-size: 30rpx;
						position: absolute;
						top: 5rpx;
						left: 150rpx;
						width: 75%;
						overflow: hidden; //超出的文本隐藏
						display: -webkit-box;
						-webkit-line-clamp: 1; // 超出多少行
						-webkit-box-orient: vertical;
						// overflow: hidden; //超出的文本隐藏
						// text-overflow: ellipsis; //溢出用省略号显示
						// white-space: nowrap; // 默认不换行；
					}
				}
			}

			.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 #4271B9;
			}
		}

		.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: #4271B9;
				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>