385 lines
9.8 KiB
Vue
385 lines
9.8 KiB
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>
|
||
|
||
|