JM-MiniApp/pages/index/index.vue

<script setup>
	// 引入依赖
	import uniDatetimePicker from '@/uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue' 
	import uniEasyinput from '@/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue' 
	import unCombox from '@/uni_modules/uni-combox/components/uni-combox/uni-combox.vue' 
	import { onLoad,onShow } from "@dcloudio/uni-app"
	import mySwiper from "@/components/mySwiper.vue"
	import aikefu from "@/components/aikefu.vue"
	import {ref,onMounted,nextTick,watch} from "vue"
	import api from '@/api/index.js'
	import {useStore} from '@/store/index.js'
	// import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue' 
	const store = useStore()
	const h_index = ref(0)
	onShow((e) => {
		getLbtList()
		// if(!store.userInfo && !store.operation_info) { //没登录过 且 未填写手术信息
		if(!store.userInfo) { //没登录过
			// getHospitalList()		
			// setTimeout(()=>{
			// 	inputDialog.value.open()
			// },0)
		} else {
			// setTimeout(()=>{
			// 	inputDialog.value.close()
			// },0)
			getTodayTodoList()
		}
	})
	
	// 变量
	const hospitals = ref([])
	// const hospitals_show = ref(false)
	const inputDialog = ref()
	const inputClose = ref()
	const choosed_h = ref(null)
	const blur_h = ref(0)
	const surgery_time = ref(null) // 手术时间
	const isSurgery = ref(-1) //是否已经手术 0为手术，1已经手术
	const lbt_list = ref([])
	// 失去焦点的监听
	// watch(blur_h,(val1,val2) => {
	// 	// hospitals.value = null
	// 	if(!choosed_h) { // 未选择值
			
	// 	}
	// })
	const h_queryParams = ref({
		page:1,
		pageSize:1000,
		key:''
	})
	const todayTodoList = ref([])
	const todayTodoListShow = ref({})
	// 函数
	async function getTodayTodoList() {
		const userInfo = uni.getStorageSync('userInfo')
		if(userInfo) {
			let user_info = JSON.parse(userInfo)
			if(user_info.userId) {
				const res = await api.todayTodoList({userId:user_info.userId})
				if(res.code == 0) {
					todayTodoList.value = res.data
					// 测试开始
					// let o = [
					// {
					// 	remindTime: '2024.1.1',
					// 	content: '测试'
					// },
					// {
					// 	remindTime: '2024.1.1',
					// 	content: '快去测试343232423快去测试快去测试快去测试快去测试快去测试'
					// },
					// ]
					// console.log(o)
					// todayTodoList.value.push(...o)
					// 测试结束
					if(todayTodoList.value.length > 0) {
						showTodo()
					}
				}
			}
		}
	}
	function showTodo() {
		let start_num = 0
		setInterval(() => {
			if(!(start_num < todayTodoList.value.length)) {
				start_num = 0
			}
			todayTodoListShow.value = todayTodoList.value[start_num]
			start_num++
		}, 2000)
	}
	function subscribeFunc() {
		uni.requestSubscribeMessage({
	         tmplIds: ['PgxoZOOSDgBcmIGd_EVLDnYUmL3eu6NQTAZCsHQeuWY'],
	         success: (res) => {
	             console.log(res);
	         },
			fail(res) {
				 console.log(res);
			}
	    })
	}
	async function getHospitalList() {
		const res = await api.getHospitalList(h_queryParams.value)
		if(res.code == 0) {
			hospitals.value = res.data.list
			console.log(hospitals.value )
		}
	}
	async function getLbtList() { // 获取轮播图
		const res = await api.getLbtList()
		if(res.code == 0) {
			if(res.data.list) {
				lbt_list.value = res.data.list
			}
		}
	}
	function toClose() {
		inputDialog.value.close()
	}
	function radioChange(e) {
		isSurgery.value = e.detail.value
	}
	const single = ref('')
	function maskClick(e){
	}
	const hValue = ref('') // 医院
	const hValueId = ref('') // 医院id
	function onClickH() {
		h_queryParams.value.key = hValue.value
		getHospitalList()
		
	}
	function toExam() { // 视力测试
		uni.navigateTo({
			url:"/pages/index/visionTest"
		})
	}
	function toChooseH(item) {
		// console.log(item)
		choosed_h.value = item
		hValue.value = item.name
		// hospitals.value = null
	}
	// function blurFunc() {
	// 	blur_h.value = 1
	// 	hospitals.value = null
	// }
	function focusFunc() {
		// blur_h.value = 0
	}
	function toBlur(){
		// hospitals.value = null
	}
	async function toSave() {
		if(isSurgery.value == -1) {
			return
		}
		if(!surgery_time.value) {
			return
		}
		// if(!choosed_h.value || !choosed_h.value.ID) {
		// 	return
		// }
		let user_info = JSON.parse(uni.getStorageSync('userInfo'))
		let h_query = {
			isSurgery:parseInt(isSurgery.value),
			surgery_time:surgery_time.value,
			userId:user_info.userId,
			// hospitalId:choosed_h.value?.ID
			hospitalId:hospitals.value[h_index.value]?.ID
			
		}
		// console.log(h_query);return
		const res = await api.hospital(h_query)
		if(res.code == 0) {
			uni.showToast({
				title:"保存成功",
				icon:"success",
				duration:2000
			})
			uni.setStorageSync('operation_info',JSON.stringify(h_query))
			store.operation_info = JSON.stringify(h_query)
			toClose()
		}
		else{
			uni.showToast({
				title:res.msg,
				icon:"error",
				duration:2000,
				success() {
					if(res.code === 7) // 登录失败
					{
						// // 清空缓存
						// uni.removeStorageSync('userInfo');
						// uni.removeStorageSync('access_token');
						// uni.removeStorageSync('avatarUrl');
						// uni.switchTab({
						// 	url:'/pages/user/index'
						// })
						store.afterFailLogin()
					}
				}
			})
		}
	}
	function todoFunc(state_index) {
		let url = '/pages/index/todo'
		url = '/pages/index/done?state_index='+state_index
		// if(state_index === 0) {
		// 	url = '/pages/index/done?state_index='+state_index
		// }
		subscribeFunc()
		uni.navigateTo({
			url
		})
	}
	function toVisionList() {
		uni.navigateTo({
			url:"/pages/index/visionList"
		})
	}
	function toNote(index) {
		uni.navigateTo({
			url:"/pages/index/note_list?index="+index
		})
	}
	
	function bindPickerChange(e) {
		h_index.value = e.detail.value
	}
	// 手机号登录
	async function getPhoneNumber (e) {
		await store.getAccess_token({code:e.detail.code})
		toClose()
	}
</script>
<template>
	<view class="content page-box">
		<!-- 背景图 -->
		<view class="bg-imgs-card">
			<image src="https://jmyl-app.oss-cn-chengdu.aliyuncs.com/miniapp/bg.png" mode="aspectFill"></image>
		</view>
		<!-- 轮播图 -->
		<mySwiper :indicatorDots="true" :isRadius="true" height="160"  class="index-siwper margin-b-card" :lbt_list="lbt_list" style="width: 100%;" />
		<!-- <view class="main-cards" @tap="toExam">
			<view class="mc-row">
				<view>视力测试</view>
				<uni-icons type="forward" color="#9bc027" size="20"></uni-icons>
			</view>
		</view> -->
		<!-- 提示弹幕 -->
		<!-- <view class="todayTodoListBox" v-if="todayTodoList.length>0">
			<uni-icons type="sound-filled" color="#fc9467" size="30"></uni-icons>
			<view class="tlb-item-box">
				<view class="tlb-item" @tap="todoFunc(1)">
					<view class="tlb-content ">{{todayTodoListShow.remindTime}}: &nbsp;{{todayTodoListShow.content}}</view>
				</view>
			</view>
		</view> -->
		<view class="attention-card">
			<!-- <view class="part-title">
				测试记录
			</view> -->
			<!-- <view class="ac-parts">
				<view @tap="toVisionList" class="ac-part" style="color: gray;" >
					视力测试记录
					<uni-icons type="forward" color="gray" size="20"></uni-icons>
				</view>
			</view> -->
		</view>
		<!-- <view class="attention-card">
			<view class="part-title">
				事务处理
			</view>
		</view> -->
		<view class="main-cards">
			<view @tap="todoFunc(0)" class="mc-part" style="margin-left: 0;">
				<image class="mc-bg-card" src="../../static/style/done.png" mode=""></image>
				<view class="mc-part-text">已完成事项</view>
				<!-- <image src="../../static/done.png" mode="widthFix"></image> -->
			</view>
			<view @tap="todoFunc(1)" class="mc-part mc-part2" style="margin-right: 0;">
				<image class="mc-bg-card" src="../../static/style/undone.png" mode=""></image>
				<view class="mc-part-text">待完成事项</view>
				<!-- <image style="transform: rotate(0deg);" src="../../static/undone.png" mode="widthFix"></image> -->
			</view>
		</view>
		<view class="attention-card">
			<!-- <view class="part-title">
				注意事项
			</view> -->
			<view class="ac-parts">
				<!-- <view @tap="toNote(0)" class="ac-part" style="background: linear-gradient(45deg, #ffa2a2,#ffd3d3, #ffffff00);">
					术前注意事项
					<uni-icons type="forward" color="#ffa2a2" size="20"></uni-icons>
				</view> -->
				<view @tap="toNote(0)" class="ac-part" >
					<view class="note-text">术前注意事项</view>
					<image class="note-bg" src="../../static/style/note1.png" mode=""></image>
				</view>
				<view @tap="toNote(1)" class="ac-part" >
					<view class="note-text">术中注意事项</view>
					<image class="note-bg" src="../../static/style/note3.png" mode=""></image>
				</view>
				<view @tap="toNote(2)" class="ac-part" >
					<view class="note-text">术后注意事项</view>
					<image class="note-bg" src="../../static/style/note2.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="test-card" @tap="toExam">
			<view class="test-text">视力自测小助手</view>
			<image class="test-img" src="../../static/style/test.png" mode=""></image>
		</view>
		<aikefu />
		<!-- 提示弹幕 -->
		<view class="todayTodoListBox" v-if="todayTodoList.length>0">
			<uni-icons type="sound-filled" color="#fc9467" size="30" style="margin-right: 5px;"></uni-icons>
			<view class="tlb-item-box">
				<view class="tlb-item" @tap="todoFunc(1)">
					<view class="tlb-content ">{{todayTodoListShow.remindTime}}: &nbsp;{{todayTodoListShow.content}}</view>
				</view>
			</view>
		</view>
		<uni-popup ref="inputDialog" @tap="toBlur" :is-mask-click='false'>
			<view class="pop-box">
				<view class="pb-title">您好, 请先登录</view>
				<view class="pb-content">
					<!-- <view class="pb-item">
						<view class="pb-item-left">已经手术</view>
						<view class="pb-item-right">
							<radio-group @change="radioChange">
								<label class="radio"><radio value="1" />是</label>
								<label class="radio"><radio value="0" />否</label>
							</radio-group>
						</view>
					</view>
					<view class="pb-item">
						<view class="pb-item-left">手术时间</view>
						<view class="pb-item-right">
							<uniDatetimePicker type="date" :clear-icon="false" v-model="surgery_time" @maskClick="maskClick" ></uniDatetimePicker>
						</view>
					</view>
					<view class="pb-item">
						<view class="pb-item-left">医院名称</view>
						<view class="pb-item-right">
							 <picker @change="bindPickerChange" :value="h_index" :range="hospitals" range-key="name">
								<view class="uni-input">{{hospitals[h_index]?.name}}</view>
							 </picker>
						</view>
					</view> -->
					<!-- <view class="pb-item pb-item-btn" @tap="toSave">提交</view> -->
					<!-- <view class="pb-item pb-item-btn" @tap="toSave">获取手机号</view> -->
					<button class="buy-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">手机号登录</button>
				</view>
			</view>
			<!-- <view class="pop-close" @tap="toClose">
				关闭
			</view> -->
		</uni-popup>
		
	</view>
</template>
<style scoped lang="scss">
	.todayTodoListBox{
		display: flex;
		// align-items: center;
		margin-top: 1vh;
		.tlb-item-box{
			color: #f97a44;
			font-weight: 900;
			font-size: 4.2vw;
			display: flex;
			align-items: center;
			.tlb-item{
				display: flex;
				align-items: center;
			}
		}
	}
	.buy-btn{
	  display: block;
	  margin-top:1rem;
	  background-color: #26758d;
	  color: white;
	  border-radius: 50rpx;
	  font-weight: 200;
	  font-size: 24rpx;
	  width: 80%;
	  padding: 10rpx 0;
	  margin: 0 auto;
	}
	.test-card{
		padding: 30rpx 20rpx;
		margin: 20rpx 0;
		margin-top: 60rpx;
		position: relative;
		width: 50%;
		.test-text{
			position: relative;
			z-index: 2;
		}
		.test-img{
			position: absolute;
			top: 0px;
			left: 0px;
			width: 100%;
			height: 100%;
			z-index: 1;
		}
	}
	.bg-imgs-card{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0px;
		left: 0px;
		image{
			width: 100%;
			height: 100%;
		}
		z-index: -1;
	}
	.pb-item-btn{
		padding: 20rpx 0;
		text-align: center;
		color: white;
		background: #26758d;
		justify-content: center;
		width: 66%;
		margin: 0 auto;
		border-radius: 10rpx;
	}
	.h_res_show_aprt{
		position: absolute;
		bottom: 100%;
		width: 100%;
		background: white;
		z-index: 10;
		box-shadow: 1px 2px 10px #02020236;
		border: 1px solid #e3e3e3;
		max-height: 400rpx;
		overflow-y: auto;
		left: 0;
		.h_res_show_aprt_row{
			padding: 20rpx 10rpx;
			border-bottom: 2rpx #e3e3e3 solid;
			color: gray;
		}
		.h_res_show_aprt_row:last-child{
			border-bottom:unset
		}
	}
	.mc-row{
		display:flex;
		// width: 100%;
		// justify-content: space-between;
		width: 100%;
		justify-content: space-between;
		border: 1px solid #9bc027;
		padding: 20px 10px;
		border-radius: 10px;
		color: #9bc027;
		font-size: 16px;
		font-weight: 900;
	}
	.radio{
		margin-right:20rpx;
	}
	.pb-item{
		display: flex;
		align-items: center;
		margin-bottom: 40rpx;
		// justify-content: space-between;
		.pb-item-left{
			width: 30%;
			color: gray;
		}
		.pb-item-right{
			position: relative;
			margin-left: 10rpx;
			width: 75%;
		}
	}
	:deep(){
		.uni-popup__wrapper{
			width: 100%;
		}
	}
	.part-title{
		border-left: 10rpx solid #fe915d;
		padding-left: 20rpx;
		font-weight: 900;
	}
	.attention-card{
		// margin-top: 20rpx;
		width: 100%;
		.ac-parts{
			margin-top: 20rpx;
			.ac-part{
				// display: flex;
				// align-items: center;
				// justify-content: space-between;
				padding:30rpx 20rpx;
				// color: white;
				margin: 20rpx 0;
				position: relative;
				.note-text{
					position: relative;
					z-index: 2;
				}
				.note-bg{
					position: absolute;
					/* z-index: 1; */
					height: 100%;
					width: 100%;
					right: 0px;
					top: 0px;
					z-index: 1;
				}
			}
		}
	}
	.main-cards{
		.mc-part{
			.mc-part-text{
				position: relative;
				z-index: 10;
				font-size: 28rpx;
				font-weight: 900;
				display: flex;
				align-items: center;
				height: 100%;
			}
			width: 50%;
			/* text-align: center; */
			background: linear-gradient(220deg, #9cd2bc, #fff);
			// color: white;
			color: #484848;
			padding: 40rpx 20rpx;
			margin: 0 20rpx;
			border-radius: 20rpx;
			height: 100rpx;
			position: relative;
			overflow: hidden;
			image{
				position: absolute;
				left: 0;
				top: 0px;
				width: 100%;
				height: 100%;
				// position: absolute;
				// width: 66%;
				// right: 0;
				// bottom: -20%;
				// z-index: 1;
				// transform: rotate(45deg);
			}
		}
		.mc-part2{
			background: linear-gradient(220deg, #9cd2bc, #fff);
			// text-align: right;
		}
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		margin-top: 20rpx;
	}
	.pop-box{
		.pb-title{
			text-align: center;
			margin-bottom: 40rpx;
		}
		background-color: white;
		padding: 20rpx;
		width: 80%;
		margin: 0 auto;
		border-radius: 20rpx;
	}
	.pop-close{
		text-align: center;
		color: white;
		margin-top: 20rpx;
	}
	.page-box{
		padding: 0 20rpx;
		min-height: unset;
	}
	.content {
		display: flex;
		flex-direction: column;
		// align-items: center;
		justify-content: center;
		position: relative;
		height: 100%;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	image{will-change: transform}
</style>