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 { onLoad } from "@dcloudio/uni-app"
	import mySwiper from "@/components/mySwiper.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()
	onLoad((e) => {
		getLbtList()
		if(store.userInfo && !store.operation_info) { //登录过 且 未填写手术信息
			// getHospitalList()		
			setTimeout(()=>{
				// console.log(inputDialog.value)
				inputDialog.value.open()
			},0)
		}
	})
	
	// 变量
	const hospitals = ref(null)
	// 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([
		{
			banner_name: "首页轮播2",
			createtime: 1694851490,
			deletetime: null,
			id: 6,
			image: "http://niunai.zhitou1688.com/uploads/20230922/ea3b3348df5d2b41eb49ddbf86b83516.png",
			is_show: 1,
			type: "index",
			url: "",
			weigh: 6,
		},{
			banner_name: "首页轮播2",
			createtime: 1694851490,
			deletetime: null,
			id: 6,
			image: "/static/vip2.png",
			is_show: 1,
			type: "index",
			url: "",
			weigh: 6,
		}
	])
	// 失去焦点的监听
	// watch(blur_h,(val1,val2) => {
	// 	// hospitals.value = null
	// 	console.log('监听 ',choosed_h.value)
	// 	if(!choosed_h) { // 未选择值
			
	// 	}
	// })
	// 函数
	async function getHospitalList() {
		const res = await api.getHospitalList()
		if(res.code == 0) {
			hospitals.value = res.data.list
		}
	}
	async function getLbtList() { // 获取轮播图
		const res = await api.getLbtList()
		if(res.code == 0) {
			
		}
	}
	function toClose() {
		inputDialog.value.close()
	}
	function radioChange(e) {
		console.log(e)
		isSurgery.value = e.detail.value
	}
	const single = ref('')
	function maskClick(e){
		console.log('maskClick事件:', e);
	}
	const hValue = ref('') // 医院
	const hValueId = ref('') // 医院id
	function onClickH(e) {
		// console.log(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
	// 	// console.log('blurFunc!!',blur_h.value)
	// }
	function focusFunc() {
		// blur_h.value = 0
		console.log('focusFunc')
	}
	function toBlur(){
		// console.log('toBlur')
		hospitals.value = null
	}
	async function toSave() {
		let user_info = JSON.parse(uni.getStorageSync('userInfo'))
		const res = await api.hospital({
			isSurgery:isSurgery.value,
			surgery_time:surgery_time.value,
			userId:user_info.userId,
			hospitalId:choosed_h.value?.ID
		})
		console.log(res)
		if(res.code == 0) {
			toClose()
		}
	}
</script>
<template>
	<view class="content page-box">
		<!-- 轮播图 -->
		<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="main-cards">
			<view class="mc-part" style="margin-left: 0;">
				<view class="mc-part-text">已完成事项</view>
				<image src="../../static/done.png" mode="widthFix"></image>
			</view>
			<view class="mc-part mc-part2" style="margin-right: 0;">
				<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 class="ac-part" style="background: linear-gradient(45deg, #ffa2a2,#ffd3d3, #ffffff00);">
					术前注意事项
					<uni-icons type="forward" color="#ffa2a2" size="20"></uni-icons>
				</view>
				<view class="ac-part" style="background: linear-gradient(45deg, #f9b275,#fff3e9, #ffffff00);">
					术中注意事项
					<uni-icons type="forward" color="#f9b275" size="20"></uni-icons>
				</view>
				<view class="ac-part" style="background: linear-gradient(45deg, #8fdc8a,#fdfdfd, #ffffff00);">
					术后注意事项
					<uni-icons type="forward" color="#8fdc8a" size="20"></uni-icons>
				</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">
							<!-- <uni-datetime-picker type="date" :clear-icon="false" v-model="single" @maskClick="maskClick" /> -->
							<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">
							<uniEasyinput @tap.stop="focusFunc" suffixIcon="search" v-model="hValue" focus placeholder="请输入内容" @iconClick="onClickH"></uniEasyinput>
							<view class="h_res_show_aprt" v-if="hospitals">
								 <view v-for="(item,i) in hospitals" @tap.stop="toChooseH(item)" class="h_res_show_aprt_row text-ellipsis-1">
									 {{item.name}}
								 </view>
							 </view>
						</view>
					</view>
					<view class="pb-item pb-item-btn" @tap="toSave">提交</view>
				</view>
			</view>
			<view class="pop-close" @tap="toClose">
				关闭
			</view>
			<!-- <uni-popup-dialog ref="inputClose" mode="input" title="输入内容" value="对话框预置提示内容!"
				placeholder="请输入内容" @confirm="dialogInputConfirm"></uni-popup-dialog> -->
		</uni-popup>
	</view>
</template>
<style scoped lang="scss">
	.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%;
		}
		.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;
			}
		}
	}
	.main-cards{
		.mc-part{
			.mc-part-text{
				position: relative;
				z-index: 10;
				font-size: 36rpx;
				font-weight: 900;
			}
			width: 50%;
			/* text-align: center; */
			background: linear-gradient(200deg, #82d8f2, #ddecf0);
			color: white;
			padding: 40rpx 20rpx;
			margin: 0 20rpx;
			border-radius: 20rpx;
			height: 100rpx;
			position: relative;
			overflow: hidden;
			image{
				position: absolute;
				width: 66%;
				right: 0;
				bottom: -20%;
				z-index: 1;
				// transform: rotate(315deg);
				transform: rotate(45deg);
			}
		}
		.mc-part2{
			background: linear-gradient(200deg,#bbf4d5, #50c053);
			// 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: 20rpx;
		min-height: unset;
	}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.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;
	}
</style>