JM-MiniApp/pages/index/index.vue
2024-01-14 20:13:09 +08:00

527 lines
14 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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) { //登录过 且 未填写手术信息
getHospitalList()
setTimeout(()=>{
inputDialog.value.open()
},0)
}
let s = `$http({code:'1s'});if`
// // let arr = /\$http\((\S*)\)\;if/.exec(s);
let arr = s.match(/\$http\((.*)\)\;if/)
console.log(arr[1])
})
// 变量
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:''
})
// 函数
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
// }
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) {
console.log(hospitals.value )
h_index.value = e.detail.value
}
</script>
<template>
<view class="content page-box">
<!-- 背景图 -->
<view class="bg-imgs-card">
<image src="../../static/style/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="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>
<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> -->
<!-- <uni-combox @input="onClickH" :candidates="hospitals" placeholder="请选择医院" @choosed="toChooseH" v-model="hValue"></uni-combox> -->
<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>
</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>
<aikefu />
</view>
</template>
<style scoped lang="scss">
.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>