yinshu_ui/yinshuacx/pages/patriarch/index.vue

<template>
	<view class="index">
		<div class="home_banner">
			<div class="home_banner_sp">
				<div class="home_banner_sp_box">
					<swiper class="swiper" indicator-dots="true" indicator-color="#fff" indicator-active-color="#FF5E5E" autoplay="true"
					 interval="3000" duration="500">
						<swiper-item v-for="(item,index) in lb_imgs">
							<view class="banner-img">
								<!-- {{item+1}} -->
								<img :src="item" class="img" alt="" mode="aspectFill">
							</view>
						</swiper-item>
					</swiper>
				</div>
			</div>
		</div>
		<div class="home_planting">
			<div class="home_planting_item">
				<div class="planting_img">
					<img src="/static/icon_hp_tz@2x.png" mode="aspectFit" alt="" class="img">
					<span>通知公告：</span>
				</div>
				<div class="planting_box">
					<!-- <div class="notice_list_chang" :animation="animationData"> -->
						<swiper circular class="flex-item xhjs" :vertical="true" :autoplay="true" interval=3000>
						  <swiper-item v-for="(item,index) in gti_s"  class="ok" wx:key="index">
						  <text class="iop">{{item.informationTitle}}</text>
						  </swiper-item>
						</swiper>
					<!-- </div> -->
					<!-- <img src="/static/1@2x.png" alt="" class="img"> -->
				</div>
				<!-- <div class="planting_btn" @click="notice_more_btn">
					更多
				</div> -->
			</div>
		</div>
		<div class="home_consultation">
			<div class="home_consultation_box">
				<!-- <div class="consultation_item" @click="zg_btn"><img src="/static/zige@2x.png" alt="" class="img">资格申请</div> -->
				<div class="consultation_item" @click="fw_btn(0)"><img src="/static/icon_hp_gn_rycj@2x.png" alt="" class="img">绑定学生</div>
				<div class="consultation_item" @click="yy_btn(1)"><img src="/static/icon_hp_gn_rygl@2x.png" alt="" class="img">学生管理</div>
				<!-- <div class="consultation_item" @click="yz_btn"><img src="/static/icon_hp_gn_db@2x.png" alt="" class="img">待办事项</div> -->
			</div>
		</div>
	</view>
</template>

<script>
	import uniPopup from "@/components/popup"
	export default {
		data() {
			return {
				list: [],
				animationData: '', // 滚动
				num: 0,
				info_status: false, // 个人中心状态
				ual_status: false, // 资格申请弹窗
				lb_imgs: [], // 轮播图
				gti_s: [], // 公告
				info: "", // 个人信息
				rooms: [], // 房间
				info_room: "", // 用户入住信息
				news: "", // 消息
				checks: '', // 资格申请状态
				animationLeft: '', // 滑动
				leftStatus: 0, // 滑动状态
				xs: false,
				token:''
			}
		},
		components: {
			uniPopup,
		},
		onLoad() {
			this.init()
			this.token = uni.getStorageSync('token')
		},
		onPullDownRefresh() {
			const token = uni.getStorageSync('token')
			// 首页公告
			this.$http.post("app_announcement/findAllAnnouncement", {
				pageSize: 100,
				currenPage: 1
			}).then(res => {
				// this.gti_s = res.data.list
				this.gti_s = [{
					title: '欢迎各位家长使用爱心小屋预约系统！'
				},{
					title: '哈哈啥多久啊是看得见哈萨克就！'
				},{
					title: '第三是的随口说的艰苦实践的空间里！'
				}]
				this.fn()
			})
		},
		onShow() {
			const token = uni.getStorageSync('token')
			const type = uni.getStorageSync('ztype')
			console.log(type)
		},
		methods: {
			login_btn() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			tz_btn(reservationId, roomType) {
				uni.navigateTo({
					url: `list_examine?type=3&reservationId=${reservationId}&roomType=${roomType}`
				})
			},
			// btn
			btn_zhu() {
				if (this.leftStatus == 0) {
					this.leftStatus = 1
					let animation = uni.createAnimation({
						duration: 500,
						timingFunction: 'ease',
					})
					let animate
					animate = animation.width('300rpx').step()
					setTimeout(res => {
						this.xs = true
					}, 500)
					this.animationLeft = animate.export()
				} else {
					this.leftStatus = 0
					this.xs = false
					let animation = uni.createAnimation({
						duration: 500,
						timingFunction: 'ease',
					})
					let animate
					animate = animation.width('84rpx').step()
					this.animationLeft = animate.export()
				}
			},
			changeTuifang() {
				if (data !== null) {
					showTuifang = true;
				}
			},
			// 时间格式化
			formatDateTime(inputTime) {
				var date = new Date(inputTime);
				var y = date.getFullYear();
				var m = date.getMonth() + 1;
				m = m < 10 ? ('0' + m) : m;
				var d = date.getDate();
				d = d < 10 ? ('0' + d) : d;
				var h = date.getHours();
				h = h < 10 ? ('0' + h) : h;
				var minute = date.getMinutes();
				var second = date.getSeconds();
				minute = minute < 10 ? ('0' + minute) : minute;
				second = second < 10 ? ('0' + second) : second;
				return y + '/' + m + '/' + d
			},
			// 消息按钮
			is_btn() {
				const token = uni.getStorageSync('token')
				if (token) {
					this.h_xx = false
					uni.navigateTo({
						url: "h-information"
					})
				} else {
					this.login_btn()
				}
			},
			init() {
				// 首页轮播图
				this.$http.get("app-api/common/banner", {
					
				}).then(res => {
					console.log(res)
					this.lb_imgs = res.data
					// if(res.code == 200){
					// 	console.log(200)
					// 	uni.navigateTo({
					// 		url: '/pages/login/login'
					// 	})
					// }
				})
				// 首页公告
				this.$http.get("app-api/common/inform").then(res => {
					console.log(res)
					// this.gti_s = res.data.list
					this.gti_s = res.data
					this.fn()
				})



			},
			// 退出登录
			out_btn() {
				uni.removeStorageSync("token")
				uni.reLaunch({
					url: "../login/login"
				})
			},
			// 认证消息
			// renzheng_btn() {
			// 	if (!this.checks) {
			// 		uni.navigateTo({
			// 			url: "qual_apply"
			// 		})
			// 	} else if (this.checks == '2') {
			// 		uni.navigateTo({
			// 			url: "auth_info"
			// 		})
			// 	} else {
			// 		uni.navigateTo({
			// 			url: "qual_result"
			// 		})
			// 	}
			// },

			// 人员管理
			yy_btn() {
				const type = uni.getStorageSync('ztype')
				if (type == 1) {
					// if (this.checks == 2) {
						uni.navigateTo({
							url: "/pages/home/management"
						})
					// } else {
						// uni.showToast({
						// 	title: '您的资格申请还没有通过',
						// 	duration: 1000,
						// 	icon: 'none'
						// });
						return
					// }
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			// // 意见
			// yz_btn() {
			// 	const type = uni.getStorageSync('ztype')
			// 	// if (type == 0) {
					
			// 	// } else {
			// 	// 	uni.navigateTo({
			// 	// 		url: '/pages/login/login'
			// 	// 	})
			// 	// }
   //             uni.showToast({
   //             	title: '暂未开放',
   //             	duration: 1000,
   //             	icon: 'none'
   //             });
			// },
			// 富文本页面 跳转
			fw_btn(e) {
				const type = uni.getStorageSync('ztype')
				// if (type == 1) {
					// let title = ''
					// if (e == 0) {
					// 	title = '入住须知'
					// } else if (e == 1) {
					// 	title = '预约指南'
					// }
					uni.switchTab({
						url: '/pages/tab/fw?studentId=' + e
					})
					uni.setStorageSync('index', 0)
				// } else {
				// 	uni.navigateTo({
				// 		url: '/pages/login/login'
				// 	})
				// }

			},

			// 滚动动画
			fn() {
				let animation = uni.createAnimation({
					duration: 500,
					timingFunction: 'ease',
				})

				console.log(this.gti_s.length,199999)
				let animate
				let hights
				var res = uni.getSystemInfoSync()
				if (res.platform == "ios") {
					uni.getSystemInfo({
						success: res => {
							hights = res.screenHeight / 41
						}
					})
				} else {
					uni.getSystemInfo({
						success: res => {
							hights = res.screenHeight / 40
						}
					})
				}
				let ss = (this.gti_s.length - 1) * -(hights)
				setInterval(() => {
					if (this.num <= ss) {
						this.num = 0
						animate = animation.translate3d(0, this.num, 0).step({
							duration: 0
						})
					} else {
						this.num -= hights
						animate = animation.translate3d(0, this.num, 0).step()
					}
					this.animationData = animate.export()
					console.log(111)
				}, 3000)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.xhjs {
	  width:100%;
	  position:absolute;
	  height:40upx;
	  top:0;
	  // left:19%;
	  // margin-left: 20px;
	  font-size: 30upx;
	  color: #000;
	  font-family: 'PingFang-SC-Medium';
	}
	.index{
		background-color: #F0F0F0;
		min-height:100vh;
	}
	// 退房按钮 
	.index_checkOut_button_right {
		float: left;
		margin-left: 14upx;
		margin-top: 24upx;
	}

	.index_checkOut_button_right img {
		display: block;
		width: 30upx;
		height: 30upx;
		line-height: 84upx;
	}

	.index_checkOut_button_center {
		float: left;
		margin-left: 16upx;
		margin-top: 10upx;
	}

	.index_checkOut_button_center_top {
		font-size: 26upx;
	}

	.index_checkOut_button_center_bottom {
		font-size: 20upx;
	}

	.index_checkOut_button_center p {
		color: #FFFFFF;
	}

	.index_checkOut_button_left {
		float: left;
		display: flex;
		align-items: center;
		height: 84rpx;
		justify-content: center;
		width: 84rpx;
	}

	.index_checkOut_button_left img {
		display: block;
		position: relative;
		width: 80upx;
		height: 80upx;
		line-height: 84upx;
	}

	.index_checkOut_button {
		position: fixed;
		bottom: 80upx;
		right: 30upx;
		background-color: #FF4878;
		width: 84upx;
		height: 84upx;
		border-radius: 50upx;
		box-sizing: border-box;
		z-index: 2;
		box-shadow: 0px 7px 36px 0px rgba(181, 176, 177, 1);
	}

	.dialog-content {
		background-color: #fff;
		width: 620upx;
		margin: 0 auto;
		border-radius: 12px;
		position: relative;
		margin-top: 0 !important;
		height: auto !important;
		padding-top: 20upx;

		.wrapper {
			padding: 0 30upx;

			.title {
				text-align: center;
				padding: 40upx 0 28upx 0;
				font-size: 38upx;
				color: #030303;
				font-weight: bold;

			}

			.wrapp_cont {
				margin: 0 auto;
				font-size: 32upx;
				padding: 20upx 10upx 40upx;
				line-height: 1.5;

				p {
					text-align: center;
					color: #999999;
				}
			}
		}

		.footer-cell {
			height: 86upx;
			width: 100%;
			display: flex;
			border-top: 1px solid #f5f5f5;
			box-sizing: border-box;

			.item {
				flex: 1;
				text-align: center;
				color: #000;
				line-height: 86upx;
				font-size: 34upx
			}

			.items {
				color: #56CBC5;
			}

			.confirm-text {
				color: #FF568C;
				border-left: 1px solid #f5f5f5;
				box-sizing: border-box;
			}
		}
	}

	.sc_box {
		position: relative;
		margin: 0 auto;
		height: 890upx;

		.sc_img {
			width: 100%;
			height: 100%;
		}

		.sc_cont_box {
			position: absolute;
			top: 50%;
			height: 450upx;
			width: 340upx;
			margin-left: -170upx;
			left: 50%;
			margin-top: -160upx;

			.sc_cont_box_title {
				font-size: 36upx;
				color: #FFE440;
				text-shadow: 0 2upx 2upx #B12D39;
			}

			.sc_cont_box_c {
				color: #fff;
				margin-top: 40upx;
				font-size: 26upx;
				letter-spacing: 2upx;
				text-align: center;
			}

			.sc_cont_box_n {
				color: #fff;
				margin-top: 35upx;
				font-size: 26upx;
				text-align: left;
				letter-spacing: 3upx;
				line-height: 1.5;
				padding: 0 10upx;
			}

			.sc_cont_box_btn {
				margin-top: 35upx;
				background: #FFE92F;
				color: #D40B64;
				height: 76upx;
				line-height: 76upx;
				border-radius: 4upx;
				width: 100%;
				font-size: 30upx;
			}
		}
	}

	.info_hei {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, .8);

		.info_box {
			width: 522upx;
			height: 100%;
			background: #fff;
			display: flex;
			justify-content: left;
			flex-direction: column;

			.info_title {
				height: 384upx;
				position: relative;
				z-index: 2;

				.imgs {
					width: 100%;
					height: 100%;
				}

				.info_p {
					position: absolute;
					top: 0;
					width: 100%;
				}

				.info_cont {
					margin-top: 50upx;
					height: 100upx;
					display: flex;
					align-items: center;
					padding-left: 32upx;

					.info_img {
						width: 102upx;
						height: 102upx;
						border-radius: 50%;
						background: rgba(#fff, .5);
						display: flex;
						justify-content: center;
						align-items: center;

						.img {
							width: 98upx;
							height: 98upx;
							border-radius: 50%;
						}
					}

					.info_details {
						margin-left: 22upx;
						height: 90upx;

						.info_details_h {
							display: flex;
							align-items: center;

							span {
								font-size: 36upx;
								color: #fff;
							}

							.info_details_type {
								background: rgba(#fff, .3);
								display: flex;
								align-items: center;
								justify-content: center;
								width: 94upx;
								height: 44upx;
								color: #fff;
								border-radius: 22upx;
								margin-left: 12upx;

								span {
									font-size: 26upx;
								}
							}
						}

						.info_details_phone {
							margin-top: 6upx;
							font-size: 24upx;
							color: #fff;
						}
					}
				}

				.info_is {
					padding: 50upx 32upx;
					font-size: 34upx;
					color: #fff;
				}

				.info_title_fot {
					margin-top: 54upx;
					padding-left: 58upx;
					width: 100%;
					box-sizing: border-box;
					display: flex;
					justify-content: space-between;
					padding-right: 24upx;

					div {
						display: flex;
						text-align: center;
						flex-direction: column;
					}

					p {
						font-size: 36upx;
						color: #fff;
						font-weight: 600;
						margin-bottom: 23upx;
					}

					span {
						font-size: 24upx;
						opacity: .6;
						color: #fff;
					}
				}
			}

			.info_tab {
				flex: 1;
				background: #fff;
				padding: 0 32upx;
				position: relative;

				.info_sign_out {
					width: 568upx;
					height: 100upx;
					box-shadow: 0upx 6upx 16upx 0upx rgba(218, 218, 218, 0.5);
					border-radius: 4upx;
					border: 2upx solid rgba(222, 222, 222, 1);
					position: absolute;
					bottom: 76upx;
					font-size: 32upx;
					color: #333333;
					text-align: center;
					line-height: 100upx;
					// width: ;
				}

				.img {
					width: 64upx;
					height: 64upx;
				}

				.info_tab_item {
					height: 128upx;
					padding-left: 12upx;
					border-bottom: 1upx solid #E5E5E5;
					display: flex;
					align-items: center;

					span {
						font-size: 32upx;
						color: #333;
						margin-left: 28upx;
						display: inline-block;
						flex: 1;
					}

					.info_tab_item_icon {
						width: 32upx;
						height: 32upx;
					}

					.info_status {
						width: 102upx;
						height: 42upx;
						background: #DBFBE2;
						text-align: center;
						line-height: 42upx;
						color: #4FB259;
						font-size: 22upx;
						border-radius: 21upx;
						margin-right: 28upx;
					}
				}
			}
		}
	}

	.index {
		width: 100%;
		padding-bottom: 40upx;
		overflow-x: hidden;
	}

	.homes {
		padding: 0 32upx;
		color: #fff;

		.home_item {
			width: 100%;
			height: 245upx;
			margin-bottom: 20upx;
			border-radius: 16px;
			padding: 16upx 38upx;
			box-sizing: border-box;

			.home_item_title {
				display: flex;
				align-items: center;

				span {
					font-size: 54upx;
					font-weight: bold;
				}

				.home_item_title_btn {
					width: 126upx;
					height: 48upx;
					border-radius: 24upx;
					margin-left: 40upx;
					font-size: 24upx;
					text-align: center;
					line-height: 48upx;
					border-radius: 24upx;
					background: #fff;
				}

				.home_item_title_btn_f {
					color: #5399C1;
				}

				.home_item_title_btn_m {
					color: #FEA97F;
				}

				.home_item_title_btn_j {
					color: #F3C771;
				}
			}

			.home_item_bot {
				margin-top: 36upx;
				display: flex;
				justify-content: left;

				.home_item_num {
					width: 74upx;
					margin-right: 68upx;
					text-align: center;
					font-size: 24upx;

					span {
						opacity: .6;
					}

					.num_box {
						font-size: 24upx;

						span {
							font-size: 40upx;
							opacity: 1;
						}
					}
				}
			}
		}

	}

	.home_consultation {
		// margin-top: 36upx;
		padding: 0 120upx;
		height: 243upx;
		padding-top: 35upx;
		box-sizing: border-box;
		// margin-bottom: 56upx;
        background-color: #fff;
		.home_consultation_box {
			display: flex;
			justify-content: space-between;
			.consultation_item {
				width: 126upx;
				font-size: 28upx;
				color: #333333;
				text-align: center;

				.img {
					width: 125upx;
					height: 125upx;
					margin-bottom: 8upx;
				}
			}
		}
	}

	.home_planting {

		.home_planting_item {
			// width: 100%;
			height: 90upx;
			// box-shadow: 0px 4px 28px 0px rgba(250, 229, 235, 1);
			background: #fff;
			margin-bottom: 16upx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.planting_img {
				display: flex;
				align-items: center;
				// width: 62upx;
				// height: 64upx;
				margin-left: 36upx;
				height: 100%;

				.img {
					width: 31upx;
					height: 36upx;
					margin-right: 15upx;
				}
				span{
					font-size: 30upx;
					color: #1678FF;
				}
			}

			.planting_box {
				height: 40upx;
				overflow: hidden;
				position: relative;
                flex: 1;
				.img {
					width: 396upx;
					position: absolute;
					height: 32upx;
					top: 0;
					right: 10upx;
				}

				.notice_list_chang {
					width: 100%;

					div {
						width: 100%;
						display: flex;
						height: 32upx;
						align-items: center;
					}

					// .planting_box_dian {
					// 	width: 12upx;
					// 	height: 12upx;
					// 	background: #F41E39;
					// 	border-radius: 50%;
					// 	margin-right: 20upx;
					// 	display: inline-block;
					// 	margin-bottom: 0;
					// }

					span {
						font-size: 25upx;
						color: #333;
						width: 396upx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
			}

			.planting_btn {
				margin-right: 24upx;
				font-size: 22upx;
				color: #FF5F9A;
			}
		}
	}

	.home_banner {
		// width: 100%;
		// height: 338upx;
		position: relative;
		// margin-left: -10upx;
		.home_banner_sp {
			width: 100%;
			height: 389upx;
			background: #fff;
			border-radius: 10upx;
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;

			.home_banner_sp_box {
				width: 100%;
				height: 389upx;
				border-radius: 10upx;

				.swiper {
					height: 100%;

					.banner-img {
						height: 100%;
					}

					.img {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
</style>