shenweishi/pages/index/index.vue

<template>
	<view class="cnt_wrapper">
		<image class='bannerImg' src="../../static/images/1.png" alt="" srcset="" />
		<image class='title_img' src="../../static/images/2.png" mode="">

		<view class="content">
			<view class="searchBtn">
				<van-search shape="round" v-model="value" placeholder="搜索知识" />
			</view>
			<view class="imgBox">
				<view class="img_box img_color1">
					<!-- <img class='img_box_tu' src="../../static/images/5.png" alt="" /> -->
					<image class='img_box_tu' src="../../static/images/5.png" mode=""></image>
					<view class="imgBox_title">健康咨询</view>
					<view class='img_box_text'>优质服务 限时响应</view>
				</view>
				<view class="img_box img_color2">
					<!-- <img class='img_box_tu' src="../../static/images/6.png" alt="" /> -->
					<image class='img_box_tu' src="../../static/images/6.png" mode=""></image>
					<view class="imgBox_title">专家名医</view>
					<view class='img_box_text'>肾科医生 全国专家</view>
				</view>
				<view class="img_box img_color3">
					<!-- <img class='img_box_tu' src="../../static/images/7.png" alt="" /> -->
					<image class='img_box_tu' src="../../static/images/7.png" mode=""></image>
					<view class="imgBox_title">在线买药</view>
					<view class='img_box_text'>优惠购药 极速送达</view>
				</view>
			</view>
			<view class="health" style="">
				<view class="health_1" style="" @click="recordclick">
					<image class="health_img" src="../../static/images/11.png" mode=""></image>
					<!-- <img class="health_img" src="../../static/images/11.png" alt="" /> -->
					<view class="">健康档案</view>
				</view>
				<view class="health_1" style="" @click="healthclick">
					<!-- <img class="health_img"  src="../../static/images/12.png" alt=""  /> -->
					<image class="health_img"  src="../../static/images/12.png" mode=""></image>
					<view class="">健康监测</view>
				</view>
				<view class="health_1" style="" @click="toCode">
					<!-- <img class="health_img" src="../../static/images/13.png" alt="" /> -->
					<image class="health_img" src="../../static/images/13.png" mode=""></image>
					<view class="">透析签到</view>
				</view>
				<view class="health_1" style="" @click="toDialysis">
					<!-- <img class="health_img" src="../../static/images/14.png" alt="" /> -->
					<image class="health_img" src="../../static/images/14.png" mode=""></image>
					<view class="">我的透析</view>
				</view>
			</view>
			
			<view class="img_bottom" style="">
				<image class="bottom" style="" src="../../static/images/15.png" mode=""></image>
				<view class="img_text">呵护每一位肾友健康</view>
			</view>
			
			<view class="knowledge" v-for="(item,index) in 6" :key='index'>
				<view class="knowledge_box" style="" @click="wenzhang_click(index)">
					<view class="box_left" style="">
						<view style="" class="knowledge_title">领透圣卫士肾友知识小科普</view>
						<view class="author" style="">
							<text class='author_1'>圣妞儿</text>
							<text class='author_1'>阅读量:xxxxx</text>
						</view>
					</view>
					<view class="box_right" style="width: 30%;">
						<!-- <img class="right_img" style="" src="../../static/images/11.png" alt="" /> -->
						<image class="right_img" style="" src="../../static/images/11.png" mode=""></image>
					</view>
				</view>
			</view>
			
			<!-- <view class="imgBox_title">
				<img class="imgtitle" @click="toCup" src="../../static/images/story.png" alt="">
			</view>
			<view class="article_list">
				<view class="list_box" v-for="li in act_li">
					<view class="title_list">
						<h3 style="font-weight: bold;">{{li.title}}</h3>
					</view>
					<view class="content_list">
						<span>{{li.content}}</span>
					</view>
					<view class="bottom_list">
						<view class="name_date">
							<img src="../../static/images/author.png" alt="..">
							<span>{{li.author}}</span>
							<span>{{li.date}}</span>
						</view>
						<view class="read">
							<img src="../../static/images/read.png" alt="">
							<span>{{li.readNum}}</span>
						</view>
						<view class="nice">
							<img src="../../static/images/nice.png" alt="">
							<span>{{li.niceNum}}</span>
						</view>
					</view>
				</view>
			</view> -->
			<van-toast id="van-toast" />
		</view>
	</view>
</template>

<script>
	
	import Toast from '@/wxcomponents/vant/toast/toast';
	import Vue from 'vue';
	import {
		mapState,
		mapGetters,
		mapActions,
		mapMutations
	} from 'vuex'
	import { login } from '../../api/api';
	export default {
		// page({
		data() {
			return {
				title: 'Hello',
				name: '',
				url: "",
				city: '',
				act_li: [{
					title: '111',
					content: '哈哈哈哈',
					author: '张三',
					date: '2022-11-2',
					readNum: '1245',
					niceNum: '2635'
				}, {
					title: '222',
					content: 'xixixi',
					author: '周小英',
					date: '2022-10-2',
					readNum: '1245',
					niceNum: '2635'
				}, {
					title: '糖尿病能吃哪些水果？',
					content: '根据最新发布的糖尿病膳食指南以及中国糖尿病医学营养治疗指南',
					author: '猪大强',
					date: '2022-10-2',
					readNum: '1245',
					niceNum: '2635'
				}]
			}
		},
		computed: {
			...mapGetters(['getHasLogin', 'getBind'])
		},
		onLoad() {},
		
		methods: {
			// 健康监测
			healthclick(){
				wx.navigateTo({
					url:'/pages/Health_monitor/index'
				})
			},
			// 健康档案
			recordclick(){
				wx.navigateTo({
					url:'/pages/Health_record/index'
				})
				// wx.navigateTo({
				// 	// url:'/pages/Health_record/creatinine'
				// 	url:'/pages/Health_record/archives'
					
				// })
				console.log('111111');
			},
			
			
			
			wenzhang_click(index){
				console.log('用户点击取消',index);
				uni.switchTab({
					url: '/pages/my/index'
				})
				// wx.redirectTo({
				// 	url:'pages/dialysis/index'
				// })
			},
			
			
			getCheckSession() {
				uni.checkSession({
					success: function(res) {
		
					},
					fail: function(res) {
						console.log(res, '登录过期了')
						uni.showModal({
							title: '提示',
							content: '您尚未绑定任何就诊人，绑定后可继续操作',
							success: function(res) {
								if (res.confirm) {
									uni.switchTab({
										url: '/pages/my/index'
									})
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
		
					},
				})
			},
			getUserInfomation() {
				// uni.login({
				//   provider: 'weixin',
				//   success: function (loginRes) {
		
				//     console.log(loginRes);
				//   }
				// });
				uni.login({
					provider: 'univerify',
					univerifyStyle: {
						fullScreen: true
					}
				})
			},
			noClick() {
				Toast('敬请期待');
			},
		
		
			// 跳转透析记录
			toDialysis() {
				let userInfo = uni.getStorageSync('userInfo')
				let hasLogin = this.$store.state.data.hasLogin
				console.log('userInfo',this.$store.state.data.hasLogin)
				if (!this.getHasLogin) {
					uni.showModal({
						title: '提示',
						content: '您未登录，登录后可继续操作',
						confirmText: '立即登录',
						success: function(res) {
							if (res.confirm) {
								uni.switchTab({
									url: '/pages/my/index'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				} else {
					if (!this.getBind) {
						uni.showModal({
							title: '未绑定',
							content: '是否去绑定',
							success: function(res) {
								if (res.confirm) {
									uni.navigateTo({
										// url: '/pages/userBinding/index'
										url:'/pages/addPatient/index'
									})
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					} else {
						uni.navigateTo({
							url: '/pages/dialysis/index'
						})
					}
				}
				// uni.navigateTo({
				// 	url: '/pages/dialysis/index'
				// })
			},
		
			toshop() {
				
				// 	if (!this.getHasLogin) {
				// 		uni.showModal({
				// 			title: '未登录',
				// 			content: '是否去登录',
				// 			success: function(res) {
				// 				if (res.confirm) {
				// 					uni.switchTab({
				// 						url: '/pages/my/index'
				// 					})
				// 				} else if (res.cancel) {
				// 					console.log('用户点击取消');
				// 				}
				// 			}
				// 		});
				// 	} else {
				// 		if (!this.getBind) {
				// 			uni.showModal({
				// 				title: '未绑定',
				// 				content: '是否去绑定',
				// 				success: function(res) {
				// 					if (res.confirm) {
				// 						uni.navigateTo({
				// 							url: '/pages/userBinding/index'
				// 						})
				// 					} else if (res.cancel) {
				// 						console.log('用户点击取消');
				// 					}
				// 				}
				// 			});
				// 		} else {
				// 			uni.navigateTo({
				// 				url: '/pages/shop/index'
				// 			})
				// 		}
				// 	}	
				Toast('敬请期待');
			},
		
			// 透析签到
			toCode() {
				if (!this.getHasLogin) {
					uni.showModal({
						title: '未登录',
						content: '是否去登录',
						success: function(res) {
							if (res.confirm) {
								uni.switchTab({
									url: '/pages/my/index'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				} else {
					if (!this.getBind) {
						uni.showModal({
							title: '未绑定',
							content: '是否去绑定',
							success: function(res) {
								if (res.confirm) {
									uni.navigateTo({
										url: '/pages/userBinding/index'
									})
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					} else {
						uni.navigateTo({
							url: '/pages/code/index'
						})
					}
				}
				// uni.navigateTo({
				// 	url: '/pages/dialysisRecord/index'
				// })
			},
			toCup() {
				Toast('敬请期待');
				// uni.navigateTo({
				// 	// url: '/pages/cup/index',
				// 	// url:'/subPackages/pages/cup/index'
				// })
			}
			
		}
	}
</script>

<style scoped>
	page {
		height: 100%;
	}

	.cnt_wrapper {
		margin: 0;
		padding: 0;
		height: 100%;
	}
	.imgs{
		height: 400rpx;
	}

	.content {
		height: 100%;
		padding: 0 20rpx;
		transform: translateY(-215rpx);
	}

	.bannerImg {
		height: 333rpx;
		width: 100%;
		border-radius: 8rpx;
		z-index: -2;
	}
	.title_img{
		width: 161px;
		height: 28px;
		position: absolute;
		top: 0px;
		left: 0px;

	}
	.imgBox {
		display: flex;
		justify-content: space-between;
		margin-top: 25rpx;
		/* background: #fff; */
		border-radius: 10rpx;
		/* box-shadow: 0px 2rpx 24rpx 0px #f4f4f4; */
	}
	.img_box{
		padding: 10rpx;
		width: 6.4rem;
		text-align: center;
		border-radius: 10rpx;
		/* background-color: #eeeeff; */
	}
	.img_color1{
		background-color: #ecf4fc;
	}
	.img_color2{
		background-color: #e6fff4;
	}
	.img_color3{
		background-color: #fff7eb;
	}
	.img_box_tu{
		width: 100rpx;
		height: 100rpx;
		padding-bottom: 10rpx;
	}
	.imgBox_title {
		color: black;
	}
	.img_box_text{
		color: gray;
		font-size: 24rpx;
		/* padding-bottom: 10rpx; */
	}
	.health{
		display: flex;
		margin-top: 20rpx;
		text-align: center;
	}
	.health_1{
		flex: 1;
	}
	.health_img{
		height: 100rpx;
		width: 100rpx;
	}
	.img_text{
		width: 350rpx;
		text-align: center;
		border-radius: 50rpx;
		background: #fff;
		color: #50c793;
		position: absolute;
		top: 60rpx;
		left: 180rpx;
	}
	.img_bottom{
		width: 99%;
		height: 150rpx;
		margin-top: 20rpx;
		position: relative;
	}
	.bottom{
		width: 100%;
		height: 150rpx;
	}
	.knowledge{
		margin-top: 20rpx;
	}
	.knowledge_box{
		margin-bottom: 20rpx;
		display: flex;
		padding: 10rpx;
		/* border: 1px solid black; */
		height: 160rpx;
		background: #f2f0f0b3;
		box-shadow: 0 0 5 f2f0f0b3;
		border-radius: 20rpx;
	}
	.box_left{
		width: 70%;
	}
	.box_right{
		width: 30%;
	}
	.knowledge_title{
		height: 120rpx;
		font-size: 36rpx;
	}
	.author{
		height: 40rpx;
		font-size: 28rpx;
		display: flex;
		text-align: left;
	}
	.author_1{
		flex: 1;
	}
	.right_img{
		width: 100%;
		height: 160rpx;
	}
	
	
	
	
	.imgBox_title .imgtitle {
		width: 150rpx;
		height: 36rpx;
		margin-top: 20rpx;
	}

	.article_list {

		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		margin-top: 25rpx;
		background: #fff;
		border-radius: 10rpx;
		box-shadow: 0px 2rpx 24rpx 0px #f4f4f4;
		max-height: 730rpx;
		overflow: scroll;
	}

	.list_box {
		width: 90%;
		margin: 20rpx auto;
		border-bottom: 1px solid #e5e5e5;
		padding: 20rpx 0;
	}

	.list_box .content_list {
		font-size: 28rpx;
		color: #757373;
		padding: 10rpx 0;
	}


	.bottom_list {
		display: flex;
		justify-content: space-between;
		color: #c2c2c2;
	}

	.bottom_list img {
		width: 50rpx;
		height: 50rpx;
	}

	.bottom_list span {
		font-size: 24rpx;
	}

	.bottom_list .name_date,
	.read,
	.nice {
		display: flex;
		align-items: center;
	}

	.imgDislysis {
		width: 344rpx;
		height: 374rpx;
		background: linear-gradient(0deg, #28D87D, #01BD5D);
		box-shadow: 0px 0px 24rpx 0px rgba(9, 196, 148, 0.3);
		border-radius: 16rpx;
	}

	.imgBoxRight {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-top: 30rpx;
	}

	.imgBoxRight img {
		width: 235rpx;
		height: 250rpx;
		/* background: #FEF4D8; */
		/* box-shadow: 0px 2rpx 24rpx 0px rgba(255, 209, 110, 0.3); */
		border-radius: 16rpx;
	}

	.imgVideo {
		width: 344rpx;
		height: 223rpx;
		background: #FEE6D8;
		box-shadow: 0px 2rpx 24rpx 0px rgba(255, 171, 110, 0.3);
		border-radius: 16rpx;
		margin-top: 20rpx;
	}

	.van-search {
		padding: 0rpx;
	}
</style>

<style lang="scss">
	.searchBtn {
		.van-search {
			padding: 0;
			border-radius: 50rpx;
		}
	}
</style>