智慧养老首页

<template>
	<view>
		<view class="header"><!-- 头部 -->
			
			<view class="title"><!-- 额头 -->
			
				<view class="icon">
					<image src="../../static/logo.png" mode=""></image>
					<span>智慧养老</span>
				</view>
				<view>
					<uni-icons @click="getLocation()" type="location" size="30" color="#559DF1"></uni-icons>
				</view>
			</view>
			
			<view class="search"><!-- 搜索框 -->
				<u-input style="padding-left: 35px;background-color: #fff;" v-model="search" type="text" border=""
					placeholder="搜索养老机构/服务" @click="gotoSearch()" />
				<uni-icons class="icon_search" type="search" size="20" color="#559DF1"></uni-icons>
			</view>
			
		</view>
		
		<view class="main">
			
			<view class="focus"><!-- focus:重点 -->
				<swiper style="height: 200px;" :indicator-dots="true" :autoplay="true" :interval="3000"
					:duration="1000"><!-- 轮播图 -->
					
					<swiper-item><!-- 三个小播片 -->
						<view class="swiper-item">
							<view class="left_text">
								<h3>养老机构上签约已开通</h3>
								<p style="font-size: 9px;color: #999;">提交预约申请 通过即可享受服务</p>
								<u-button class="item_btn" type="primary">立即体验</u-button>
							</view>
							<view class="right_img">
								<image style="width: 80px;height: 150px;" src="../../static/c1.png" mode=""></image>
							</view>
						</view>
					</swiper-item>
					
					<swiper-item>
						<view class="swiper-item">
							<view class="left_text">
								<h3>养老机构上签约已开通</h3>
								<p style="font-size: 9px;color: #999;">提交预约申请 通过即可享受服务</p>
								<u-button class="item_btn" type="primary">立即体验</u-button>
							</view>
							<view class="right_img">
								<image style="width: 80px;height: 150px;" src="../../static/c2.png" mode=""></image>
							</view>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item">
							<view class="left_text">
								<h3>养老机构上签约已开通</h3>
								<p style="font-size: 9px;color: #999;">提交预约申请 通过即可享受服务</p>
								<u-button class="item_btn" type="primary">立即体验</u-button>
							</view>
							<view class="right_img">
								<image style="width: 80px;height: 150px;" src="../../static/c3.png" mode=""></image>
							</view>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item">
							<view class="left_text">
								<h3>养老机构上签约已开通</h3>
								<p style="font-size: 9px;color: #999;">提交预约申请 通过即可享受服务</p>
								<u-button class="item_btn" type="primary">立即体验</u-button>
							</view>
							<view class="right_img">
								<image style="width: 80px;height: 150px;" src="../../static/c4.png" mode=""></image>
							</view>
						</view>
					</swiper-item>
					
				</swiper>
			</view>
			
			<view class="navi"><!-- 三个彩色框 -->
				<view class="navi_item">
					<uni-icons type="hand-up" size="40px" color="#fff"></uni-icons>
					<span>一键呼救</span>
				</view>
				<view class="navi_item">
					<uni-icons type="hand-up" size="40px" color="#fff"></uni-icons>
					<span>健康监测</span>
				</view>
				<view class="navi_item">
					<uni-icons type="hand-up" size="40px" color="#fff"></uni-icons>
					<span>健康评估</span>
				</view>
			</view>
			
			
		<view class="more">
				
				<view class="more_title">
					<p style="font-size: 18px;">推荐机构</p>
					<a href="javascript:0">查看更多</a>
				</view>
				
				<view class="more_navi">
					<scroll-view class="scroll_nav" scroll-x="true" scroll-left="120">
						
						<view class="scr_items">
							<view class="scr_items_img"></view>
							<view class="scr_items_text">
								<p>巴拉巴拉养老社区</p>
								<p>距离1.11m</p>
							</view>
						</view>
						<view class="scr_items">
							<view class="scr_items_img"></view>
							<view class="scr_items_text">
							<p>巴拉巴拉养老社区</p>
							<p>距离1.11m</p>
							</view>
						</view>
						<view class="scr_items">
							<view class="scr_items_img"></view>
							<view class="scr_items_text">
								<p>巴拉巴拉养老社区</p>
								<p>距离1.11m</p>
							</view>
						</view>
						
					</scroll-view>
				</view>
				
		</view>
			
			<view class="he_navi">
				
				<view class="more_title">
					<p style="font-size: 18px;">健康资讯</p>
					<a href="javascript:0">查看更多</a>
				</view>
				
				<view class="he_navi_main">
					<view class="he_msg">
						<view class="he_msg_text">
							<p>巴拉巴拉养老院</p>
							<p>巴拉巴拉</p>
						</view>
						<view class="he_msg_img"></view>
					</view>
					<view class="he_msg">
						<view class="he_msg_text">
							<p>内容标题示例,内容标题示例,</p>
							<p>内容标题示例,内容标题示例,</p>
						</view>
						<view class="he_msg_img"></view>
					</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				search: '',
			}
		},
		methods: {
			getLocation(){
				uni.navigateTo({
					url:"/pages/index/address/address"
				})
			},
			gotoSearch(){
				uni.navigateTo({
					url:"/pages/index/search/search"
				})
			}
		}
	}
</script>

<style>
	.header {
		padding: 20px;
		background-color: #fcfcfc;
	}

	.title {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.title .icon {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.title image {
		width: 35px;
		height: 35px;
		margin-right: 10px;
	}

	.search {
		margin-top: 20px;
		position: relative;
	}

	.search .icon_search {
		position: absolute;
		top: 7px;
		left: 8px;
	}

	.main .focus {
		padding: 20px;
	}

	.main .swiper-item {
		height: 150px;
		background-color: #F2F7FB;
		border-radius: 10px;
		display: flex;
		justify-content: space-between;
	}

	.main .swiper-item .left_text {
		padding: 25px;

	}

	.main .swiper-item .item_btn {
		width: 80px;
		height: 30px;
		font-size: 12px;
		float: left;
		top: 20px;
	}

	.main .navi {
		background-color: #fff;
		height: 150px;
		display: flex;
		justify-content: space-between;
		padding: 0px 20px 0px 20px;
		display: flex;
		align-items: center;
		margin-top: -30px;
	}

	.main .navi .navi_item {
		width: 95px;
		height: 80px;
		background-color: #FA746B;
		border-radius: 10px;
		color: #fff;
		display: flex;
		flex-direction: column;
		justify-content: center;
		text-align: center;
	}

	.main .navi .navi_item span {
		margin-top: 5px;
	}

	.main .navi .navi_item:nth-child(2) {
		background-color: #FDDB78;
	}

	.main .navi .navi_item:nth-child(3) {
		background-color: #28D094;
	}

	.more {
		margin-top: 10px;
		background-color: #fff;
		height: 200px;
		padding: 20px;
	}

	.more_title {
		height: 30px;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}

	.more_title a {
		text-decoration: none;
		font-size: 11px;
		color: #999;
	}

	.more_title a::after {
		content: '';
		width: 4px;
		height: 4px;
		border-top: 3px solid #999;
		border-right: 3px solid #999;
		transform: rotate(45deg);
		display: inline-block;
		margin-left: 2px;
		margin-bottom: 1px;
	}

	.more_navi {
		margin-top: 10px;
		height: 120px;
		background-color: #fff;
	}

	.scroll_nav {
		white-space: nowrap;
		width: 100%;
		height: 100%;
	}

	.scr_items {
		display: inline-block;
		width: 70%;
		height: 100%;
		border: 1px solid #F0F6FF;
		border-radius: 15px;
		margin-right: 10px;
	}

	.scr_items_img {
		width: 50px;
		height: 50px;
		background-image: url('../../static/c1.png');
		background-size: 100%;
		display: inline-block;
	}

	.scr_items_text {
		display: inline-block;
	}

	.he_navi {
		background-color: #fff;
		margin-top: 10px;
		height: 200px;
		padding: 20px;

	}

	.he_msg {
		display: flex;
		justify-content: space-between;
		margin-top: 5px;
	}

	.he_msg_img {
		width: 50px;
		height: 50px;
		background-image: url('../../static/c1.png');
		background-size: 100%;
	}
</style>
<template>
	<view class="">
		<view class="header">
			<view class="title">
				<view class="icon">
					<image src="../../static/u30.jpg" mode=""></image>
					<p>健康资讯</p>
				</view>
			</view>
		</view>
		
		<view class="main">
			<view class="he_navi">
				<view class="he_navi_main">
					<view class="he_msg">
						<view class="he_msg_text">
							<p>海拉鲁大陆迷失森林</p>
							<p>剑之试炼</p>
							<span>内容来源 白诘报社 15分钟前</span>
						</view>
						<view class="he_msg_img"></view>
					</view>
					<view class="he_msg">
						<view class="he_msg_text">
							<p>海拉鲁大陆迷失森林</p>
							<p>剑之试炼</p>
							<span>内容来源 白诘报社 15分钟前</span>
						</view>
						<view class="he_msg_img"></view>
					</view>
					<view class="he_msg">
						<view class="he_msg_text">
							<p>海拉鲁大陆迷失森林</p>
							<p>剑之试炼</p>
							<span>内容来源 白诘报社 15分钟前</span>
						</view>
						<view class="he_msg_img"></view>
					</view>
				</view>
				
				<view class="navi_item" style="margin-top: 30px;">
					<view class="item_main" v-for="(item,i) in list" :key="i" @click="gotocon()">
						<view class="item_img">
							<image :src="item.newsImg" mode=""></image>
						</view>
						<view class="item_text">
							<h3>{{item.newsName}}</h3>
							<span>内容来源 白诘报社 15分钟前</span>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				pageNum: 1,
				pageSize: 3,
				flag: 0
			}
		},
		mounted() {
			uni.request({
				url: "http://127.0.0.1:5502/system/news/list?pageNum=1&pageSize=3",
				success: (res) => {
					this.list = res.data.rows
				}
			})
		},
		methods: {
			gotocon(){
				uni.navigateTo({
					url:"./healthmsg/healthmsg"
				})
			}
		},
		onReachBottom() {
			console.log(1)

			uni.showLoading({
				title: "加载"
			});
			setTimeout(function() {
				uni.hideLoading();
			}, 500)
			uni.request({
				url: "http://127.0.0.1:5502/system/news/list",
				data: {
					pageNum: this.pageNum,
					pageSize: this.pageSize + 1
				},
				success: (res) => {
					console.log(res)
					this.list.push(res.data.rows[0])
					console.log(this.list)
				}
			})
		}
	}
</script>

<style>
	.header {
		padding: 20px;
		background-color: #fcfcfc;
	}

	.title {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.title .icon {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.title image {
		width: 35px;
		height: 35px;
		margin-right: 10px;
	}

	.he_navi {
		background-color: #fff;
		margin-top: 10px;
		height: 250px;
		padding: 20px;

	}

	.he_msg {
		display: flex;
		justify-content: space-between;
		margin-top: 5px;
	}

	.he_msg_img {
		width: 50px;
		height: 50px;
		background-image: url('../../static/c1.png');
		background-size: 100%;
	}

	span {
		font-size: 10px;
		color: #B3B3B3;
	}

	span::after {
		content: '×';
		float: right;
	}
</style>
<template>
	<view class="">
		
			<view class="title">
				<view class="icon">
					<image src="/static/u30.jpg" mode=""></image>
					<span>健康监测</span>
				</view>
			</view>

		
		<view class="content">
			<view class="user_msg">
				<p>{{username}}的签约机构</p>
						<button @click="open">切换</button>
						<uni-popup ref="popup" type="bottom" class="user_msg_tc">
							<view class="user_msg_ttchuang">
								<h4>请选择签约人</h4>
								<view @click="qiehuan(i)" v-for="(item,i) in list1">{{item}}</view>
								<button @click="quxiao">取消</button>
							</view>
							
						</uni-popup>
			</view>
		</view>
		<view class="main">
			<view class="focus">
				<view class="focus_text">
					<p style="font-size: 20px;width: 180px;line-height: 1.5;">哈特诺村塞尔达的家(原林克的家)</p>
					<span>哈特诺村旮旯角</span>
				</view>
				<view class="focus_img"></view>
			</view>
			
			<view class="navi">
				<view class="navi_item">
					<uni-icons type="hand-up" size="40px" color="#fff"></uni-icons>
					<span>一键呼救</span>
				</view>
				<view class="navi_item">
					<uni-icons type="hand-up" size="40px" color="#fff"></uni-icons>
					<span>健康监测</span>
				</view>
				<view class="navi_item">
					<uni-icons type="hand-up" size="40px" color="#fff"></uni-icons>
					<span>健康评估</span>
				</view>
				<view class="navi_item">
					<uni-icons type="hand-up" size="40px" color="#fff"></uni-icons>
					<span>健康评估</span>
				</view>
				<view class="navi_item">
					<uni-icons type="hand-up" size="40px" color="#fff"></uni-icons>
					<span>健康评估</span>
				</view>
				<view class="navi_item">
					<uni-icons type="hand-up" size="40px" color="#fff"></uni-icons>
					<span>健康评估</span>
				</view>
			</view>
			
			<view style="margin-top: 60px;">
				<p>室内环境</p>
				<view class="room">
					<view class="room_item" v-for="(item, i) in list.slice(0,3)" :key="i">
						{{item.temperature}}
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: '唔西迪西',
				list: [],
				list1:['张三','李四','王五']
			}
		},
		methods: {
               open(){
        // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ,type 属性将失效 ,仅支持 ['top','left','bottom','right','center']
        this.$refs.popup.open('top')
      },
	  qiehuan(i){
		  uni.showModal({
		  	title:"是否更换签约人"+this.list1[i]
		  })
	  }

		},
		mounted(){
			uni.request({
				url:"http://127.0.0.1:5502/system/environment/listTemperatureMinByRoomId?roomId=1",
				success: (res) => {
					console.log(res)
					this.list = res.data.rows
				}
			})
		}
	}
</script>

<style>
	/* .header {
		padding: 20px;
		background-color: #fcfcfc;
	} */

	.title {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.title .icon {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.title image {
		width: 35px;
		height: 35px;
		margin-right: 10px;
	}

	.main {
		padding: 10px;
	}

	.main .focus,
	.room {
		padding: 20px;
		border-radius: 15px;
		height: 160px;
		background-color: #fff;
		margin-top: 10px;
		margin-bottom: 40px;
		display: flex;
	}

	.main .focus .focus_text {
		display: flex;
		height: 100%;
		flex-direction: column;
		justify-content: space-between;
	}

	.main .focus .focus_text span {
		position: relative;
		width: 125px;
	}

	.main .focus .focus_text span::after {
		content: '';
		width: 6px;
		height: 6px;
		border-top: 2px solid #989898;
		border-right: 2px solid #989898;
		transform: rotate(45deg);
		display: block;
		position: absolute;
		right: 0;
		top: 8px;
	}

	.main .focus .focus_img {
		width: 60px;
		height: 60px;
		background: url('../../static/c1.png');
		background-size: 100%;

	}

	.main .navi {
		height: 150px;
		display: flex;
		justify-content: space-between;
		padding: 0px 20px 0px 20px;
		align-items: center;
		margin-top: -30px;
		flex-wrap: wrap;

	}

	.main .navi .navi_item {
		flex: 0 30%;
		height: 80px;
		margin-top: 15px;
		background-color: #FA746B;
		border-radius: 10px;
		color: #fff;
		display: flex;
		flex-direction: column;
		justify-content: center;
		text-align: center;
	}

	.main .navi .navi_item span {
		margin-top: 5px;
	}

	.main .navi .navi_item:nth-child(2) {
		background-color: #FDDB78;
	}

	.main .navi .navi_item:nth-child(3) {
		background-color: #28D094;
	}

	.user_msg {
		display: flex;
		width: 100%;
		height: 50px;
		padding: 30px 0px 10px 10px;
		align-items: center;
	
	}
	.user_msg .user_msg_tc{
		background-color: aliceblue;
		color: black;
		font-size: 20px;
	 display: flex;
	 align-items: center;
	}
	.user_msg_ttchuang{
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.content p {
		font-size: 25px;
		letter-spacing: 2px;

	}

	.content button {
		height: 40px;
		line-height: 38px;
		color: #3686F8;
		border: 1px solid #3686F8;
		border-radius: 20px;
		box-shadow: 0px 0px 0px 1px #A1C9FB;
	}

	.room {
		margin-top: 10px;
		display: flex;
		justify-content: space-around;
	}

	.room_item {
		height: 100%;
		border: 1px solid #A7C5A3;
		border-radius: 5px;
		flex:0 30%;
	}
</style>
<template>
	<view class=""><!-- ”我的“ -->
		
			<view class="title"><!-- 头部 -->
				
				<view class="icon">
					<image src="../../static/u30.jpg" mode=""></image>
					<span>我的</span>
				</view>
				<image src="../../u32.svg" mode="" class="title_1"></image>
			</view>
		
		
		<view class="main"><!-- 用户名片部分 -->
			<view class="focus">
				
				<view class="user_msg">
					<view class="user_img">
						<image src="../../static/u39.svg" style="width: 70px;height: 70px;" mode=""></image>
					</view>
					
					<view class="user">
						<view class="user_name">
							唔西迪西
						</view>
						<view class="user_age">
							女 30岁
						</view>
					</view>
				</view>
				
				<view class="user_op">
					<button type="warn">本人</button>
					<button type="default">已签约</button>
				</view>
				
			</view>
		</view>
		
		<view class="todo"><!-- 下半部分 -->
			
				<view class="li_1" @click="yyjl">
					<image src="/static/u48.svg" mode=""></image>
					<span>预约记录</span>
					<image src="/static/u45.svg" mode=""></image>
				</view>
				
				<view class="li_1" @click="jtcy">
						<image src="/static/u54.svg" mode=""></image>
						<span>家庭成员管理</span>
						<image src="/static/u45.svg" mode=""></image>
				</view>
			
				<view class="li_1" @click="yyjl">
						<image src="/static/u60.svg" mode=""></image>
						<span>我的健康档案</span>
						<image src="/static/u45.svg" mode=""></image>
				</view>
				
				<view class="li_1" @click="yyjl">
						<image src="/static/u66.svg" mode=""></image>
						<span>我的服务包</span>
						<image src="/static/u45.svg" mode=""></image>
				</view>
				
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				search: '',
			}
		},
		methods: {
			yyjl(){
				uni.navigateTo({
					url:'/pages/index/my/my'
				})
			},
			jtcy(){
				uni.navigateTo({
					url:"/pages/index/family/family"
				})
			}

		},
		mounted() {
			uni.request({
				url:"http://127.0.0.1:5502/getInfo",
				success: (res) => {
					console.log(res)
				}
			})
			 
		}
	}
</script>

<style>
	.title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		
	}

	.title .icon {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.title image {
		width: 35px;
		height: 35px;
		margin-left: 10px;
	}
    .title .title_1{
		width: 20px;
		height: 20px;
		margin-right: 10px;
	}

	.main {
		padding: 20px;
	}

	.focus {
		width: 100%;
		height: 180px;
		border-radius: 13px;
		background-color: #2984F8;
		color: #fcfcfc;
		padding: 10px;
		display: flex;
		justify-content: space-between;
	}

	.user_msg {
		display: flex;
		
	}
	 
	 .user{
		 display: flex;
		 flex-direction: column;
		 margin-left: 3px;
	 }
	 .user .user_name{
	 		 margin-top: 25px;
	 		 font-size: 25px;
	 }
	 .user .user_age{
		 margin-top: 5px;
	 }
	 
	 
	.user_op{
		display: flex;
		
	}
	.user_op :nth-child(1){
		flex: 1;
		background-color: #FA746B;
	}
	
	.user_op button{
		height: 20px;
		width: 55px;
		background-color: #28D094;
		font-size: 10px;
		color: white;
		border-radius: 20px;
	}
	.todo{
		margin-top: 20px;
		background-color: #fff;
		padding: 10px;
		width: 100%;
		height: 300px;
	}
	.todo ul{
		padding: 0px;
		list-style: none;
		
	}
	 
	.todo image{
		width: 20px;
		height: 20px;
		margin: 4px;
	}
	.todo span{
		width: 100%;
		position: absolute;
	}
	.todo span::after{
		content: '';
		width: 8px;
		height: 8px;
		border-top: 1px solid #ccc;
		border-right: 1px solid #ccc;
		transform: rotate(45deg);
		display: block;
		position: absolute;
		right: 0;
		top: 7px;
	}
	.li_1{
		display: flex;
		justify-content: space-between;
		margin-bottom: 0%;
		width: 100%;
		height: 40px;
		border-bottom:1px solid #ccc;
		position: relative;
	}
	.li_1 span{
		margin-left: 30px;
		/* position: absolute; */
		top:10px;
	
	}
</style>

  • 12
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值