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

541 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()
// console.log("store:",store)
// if(!store.userInfo && !store.operation_info) { //没登录过 且 未填写手术信息
if(!store.userInfo) { //没登录过
// console.log("没有store.userInfo",store.userInfo)
// getHospitalList()
setTimeout(()=>{
inputDialog.value.open()
},0)
// uni.navigateTo({
// url:'/pages/login/login'
// })
} else {
setTimeout(()=>{
inputDialog.value.close()
},0)
}
})
// 变量
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) {
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="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">
<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>
<aikefu />
</view>
</template>
<style scoped lang="scss">
.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>