You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

468 lines
13 KiB
Vue

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<script setup>
import { onLoad } from "@dcloudio/uni-app"
// import mySwiper from "@/components/mySwiper.vue"
import {ref,onMounted,nextTick,computed} from "vue"
import unCombox from '@/uni_modules/uni-combox/components/uni-combox/uni-combox.vue'
import {useStore} from '@/store/index.js'
const store = useStore()
import api from "@/api/index.js"
import custom from "@/utils/index.js"
const h_index = ref(0)
onLoad(async (e) => {
await getHospitalList()
is_login.value = custom.checkLogin()
if(!is_login.value) { // 未登录
userinfo.value = JSON.parse(decodeURIComponent(e.token_info))
} else { // 已登录
userinfo.value = JSON.parse(uni.getStorageSync('userInfo'))
h_info.value = userinfo.value
h_info.value.surgery_time = h_info.value.SurgeryTime
userinfo.value.avatar = uni.getStorageSync('avatarUrl')
h_index.value = hospitals.value.findIndex((item,i) => {
return item.ID == userinfo.value.HospitalId
})
if(userinfo.value.HospitalId) {
getHospital(userinfo.value.HospitalId)
}
}
})
// 变量
const is_login = ref(false)
const h_queryParams = ref({
page:1,
pageSize:1000,
key:''
})
const hospitals = ref([])
const userinfo = ref({})
const avatar = ref(null)
const h_info = ref({})
const inputDialog = ref(null)
const input_title = ref(null)
const hValue = ref('') // 医院
const hValueId = ref('') // 医院id
// const form_data = ref({})
// const userForm = ref(null)
// 方法
async function getHospitalList() {
const res = await api.getHospitalList(h_queryParams.value)
if(res.code == 0) {
hospitals.value = res.data.list
}
}
function onInputH() {
h_queryParams.value.key = hValue.value
getHospitalList()
}
async function getHospital(id) {
const res = await api.getHospitalInfo(id)
if(res.code === 0) {
h_info.value.name = res.data.name
}
else{
uni.showToast({
title:res.msg,
icon:"error",
duration:2000,
mask:true,
success() {}
})
}
}
const edit_type= ref(null)
function toDetail(type) {
edit_type.value = type
switch(type){
case 1: // 修改昵称
inputDialog.value.open()
input_title.value = '修改昵称'
break;
case 2: // 修改电话
inputDialog.value.open()
input_title.value = '修改电话'
break;
default:
break;
}
}
function finishFunc() {
inputDialog.value.close()
}
const startDate = computed(() => getDate('start'))
const endDate = computed(() => getDate('end'))
const choosed_h = ref(null)
const date = ref(null)
function getDate(type) {
const date = new Date();
let year = date.getFullYear();
let month = date.getMonth() + 1;
let day = date.getDate();
if (type === 'start') {
year = year - 60;
} else if (type === 'end') {
year = year + 2;
}
month = month > 9 ? month : '0' + month;
day = day > 9 ? day : '0' + day;
return `${year}-${month}-${day}`;
}
function bindDateChange(e) {
// console.log(e)
h_info.value.surgery_time = e.detail.value
}
function toChooseH(item) {
// console.log(item)
choosed_h.value = item
hValue.value = item.name
// hospitals.value = null
}
async function sumbmitFunc() {
await custom.uploadImage(userinfo.value.avatar, async (file) => {
userinfo.value.avatar = file.data.file.url
})
let obj = {
id: userinfo.value.userId,
// isSurgery: userinfo.value.isSurgery,//是否已经手术 0 - 未手术1 - 已经手术
surgery_time: h_info.value?.surgery_time, //手术时间
nickname: userinfo.value.nickname,
avatar: userinfo.value.avatar,
phone: userinfo.value.phone,
hospitalId:hospitals.value[h_index.value]?.ID
}
if(!obj.hospitalId) {
uni.showToast({
title: "请选择医院",
icon: "error",
duration: 2000
})
return
}
obj.isSurgery = parseInt(userinfo.value.IsSurgery)
// if(!is_login.value) { // 新用户 - 先登录
// }
userinfo.value.SurgeryTime = obj.surgery_time
const res = await api.userinfoUpdae(obj) // 更新用户信息
if(res.code === 0) {
uni.showToast({
title:res.msg,
icon:"success",
duration:2000,
async success() {
await wx_login(userinfo.value.userId)
uni.navigateBack()
}
})
}
else{
uni.showToast({
title:res.msg,
icon:"error",
duration:2000
})
}
}
async function wx_login(userId){
let res=await new Promise(resolve=>{
uni.login({
provider: 'weixin', //使用微信登录
success: function (loginRes) {
resolve(loginRes);
}
});
});
let res2=await api.wx_login({code:res.code},userId);
if(res2.code === 0) {
userinfo.value.HospitalId = hospitals.value[h_index.value]?.ID
h_info.value.hospitalId = userinfo.value.HospitalId
uni.setStorageSync('avatarUrl', userinfo.value.avatar);//avatarUrl
uni.setStorageSync('userInfo',JSON.stringify(userinfo.value))
uni.setStorageSync('operation_info', JSON.stringify(h_info.value))
// is_login.value = custom.checkLogin()
store.checkLogin()
}
else{
uni.clearStorage();
}
}
function bindPickerChange(e) {
// console.log(hospitals.value )
h_index.value = e.detail.value
}
function onChooseAvatar(e) {
// const { avatarUrl } = e.detail
// console.log(avatarUrl)
userinfo.value.avatar = e.detail.avatarUrl
}
var isOperation = ref([
{
index:0,
name:"否"
},
{
index: 1,
name: "是"
}
])
function bindOperationPickerChange(e) {
userinfo.value.IsSurgery = e.detail.value
// console.log("userinfo.value.IsSurgery is :",userinfo.value.IsSurgery)
}
</script>
<template>
<view class="userInfoBox page-box page-bg-gray">
<view class="avatar-box">
<!-- <image :src="avatar" mode="aspectFill"></image> -->
<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar" style="border-radius: 50%;">
<image :src="userinfo?.avatar" mode="aspectFill"></image>
</button>
</view>
<view class="row-box">
<view class="rb-card" @tap="toDetail(1)">
<view class="rbc-content">
<view class="rbc-content-row rbc-content-left rbc-content-left-box">
<uni-icons type="person" color="gray" size="26"></uni-icons>
姓名</view>
<view class="rbc-content-row rbc-content-right">
{{userinfo?.nickname}}
<uni-icons type="forward" color="gray" size="20"></uni-icons>
</view>
</view>
</view>
<view class="rb-card" @tap="toDetail(2)">
<view class="rbc-content">
<view class="rbc-content-row rbc-content-left rbc-content-left-box">
<uni-icons type="phone" color="gray" size="26"></uni-icons>
电话</view>
<view class="rbc-content-row rbc-content-right">
{{userinfo?.phone}}
<uni-icons type="forward" color="gray" size="20"></uni-icons>
</view>
</view>
</view>
<view class="rb-card" @tap="toDetail(5)">
<view class="rbc-content">
<view class="rbc-content-row rbc-content-left rbc-content-left-box">
<uni-icons type="paperplane" color="gray" size="26"></uni-icons>
已经手术</view>
<view class="rbc-content-row rbc-content-right">
<picker @change="bindOperationPickerChange" :value="userinfo.IsSurgery" :range="isOperation" range-key="name" >
<view class="rbc-content-row rbc-content-right">
<view class="uni-input">{{ isOperation[userinfo.IsSurgery]?.name }}</view>
<uni-icons type="forward" color="gray" size="20"></uni-icons>
</view>
</picker>
</view>
</view>
</view>
<template>
<view class="rb-card" @tap="toDetail(3)">
<view class="rbc-content">
<view class="rbc-content-row rbc-content-left rbc-content-left-box">
<uni-icons type="calendar" color="gray" size="26"></uni-icons>
手术时间</view>
<view class="rbc-content-row rbc-content-right">
<!-- {{h_info?.surgery_time}} -->
<picker mode="date" :value="h_info?.surgery_time" :start="startDate" :end="endDate" @change="bindDateChange">
<view class="rbc-content-row rbc-content-right">
<view class="uni-input"> {{h_info?.surgery_time}}</view>
<uni-icons type="forward" color="gray" size="20"></uni-icons>
</view>
</picker>
</view>
</view>
</view>
<view class="rb-card" @tap="toDetail(4)">
<view class="rbc-content">
<view class="rbc-content-row rbc-content-left rbc-content-left-box">
<uni-icons type="paperplane" color="gray" size="26"></uni-icons>
手术医院</view>
<view class="rbc-content-row rbc-content-right">
<!-- {{h_info?.name}} -->
<!-- <uni-combox :border="false" @input="onInputH" :candidates="hospitals" placeholder="请选择医院" @choosed="toChooseH" v-model="userinfo.HospitalId"></uni-combox> -->
<!-- <uni-icons type="forward" color="gray" size="20"></uni-icons> -->
<picker @change="bindPickerChange" :value="h_index" :range="hospitals" range-key="name">
<view class="rbc-content-row rbc-content-right">
<view class="uni-input">{{hospitals[h_index]?.name}}</view>
<uni-icons type="forward" color="gray" size="20"></uni-icons>
</view>
</picker>
</view>
</view>
</view>
</template>
</view>
<!--修改姓名/电话 弹窗 -->
<uni-popup ref="inputDialog" >
<view class="pop-box">
<view class="pb-title">{{input_title}}</view>
<view class="pb-content">
<view class="pb-item">
<!-- <view class="pb-item-left">事项说明</view> -->
<view class="pb-item-right">
<!-- <input v-if="edit_type == 1" class="uni-input" v-model="userinfo.nickname" focus placeholder="输入您的姓名" />
<input v-else class="uni-input" v-model="userinfo.phone" focus placeholder="输入您的电话" /> -->
<uni-easyinput :inputBorder="false" v-if="edit_type == 1" borderColor="#26758d" v-model="userinfo.nickname" focus placeholder="输入您的姓名"></uni-easyinput>
<uni-easyinput :inputBorder="false" v-else borderColor="#26758d" v-model="userinfo.phone" focus placeholder="输入您的电话"></uni-easyinput>
</view>
</view>
<view class="pb-item pb-item-btn" @tap="finishFunc">确定</view>
</view>
</view>
</uni-popup>
<view class="pb-item pb-item-btn" style="margin-top: 40rpx;" @tap="sumbmitFunc">确定</view>
</view>
</template>
<style scoped lang="scss">
.avatar-wrapper{
width: 160rpx !important;
height: 160rpx;
padding: 0px;
margin: 0 auto;
overflow: hidden;
margin-bottom: 40rpx;
// border: 1px solid #26758d;
background: #ececec;
display: flex;
align-items: center;
justify-content: center;
}
.avatar-box{
display: flex;
align-items: center;
justify-content: space-around;
width: 100%;
padding: 20rpx 0;
background: #26758d;
button{
image{
width: 160rpx;
height: 160rpx;
background-color: white;
border-radius: 50%;
}
}
image{
width: 160rpx;
height: 160rpx;
background-color: white;
border-radius: 50%;
}
}
.rbc-content-right{
display: flex;
align-items: center;
background: white;
border-radius: 50%;
}
.rbc-content-left-box{
uni-icons{
margin-right: 20rpx;
}
display: flex;
align-items: center;
}
.row-box{
padding: 20rpx 0;
.rb-card{
padding: 20rpx;
background: white;
margin-bottom: 2rpx;
.rbc-title{
}
.rbc-content-box{
margin-top: 10rpx;
.rbc-content-row{
width: 50%;
text-align: center;
// padding: 40rpx 20rpx;
// box-shadow: 10rpx 10rpx 10rpx #cdcdcd;
border-radius: 10rpx;
}
}
.rbc-content{
display: flex;
align-items: center;
justify-content: space-between;
}
}
}
.btn-box{
text-align: center;
margin-top: 40rpx;
.btn{
display: inline-block;
padding: 10px 20px;
background: #e2e2e2;
color: #26758d;
border-radius: 10px;
width: 50%;
}
}
.userinfo-box{
position: relative;
image{
width: 120rpx;
height: 120rpx;
border-radius: 50%;
background: white;
margin-right: 20rpx;
}
color: white;
background-color: #26758d;
display: flex;
align-items: center;
padding: 40rpx 20rpx;
}
.user-box{
background: #f6f6f6;
}
.pb-item-btn{
padding: 20rpx 0;
text-align: center;
color: white;
background: #26758d;
justify-content: center;
width: 66%;
margin: 0 auto;
border-radius: 10rpx;
}
.pop-box{
.pb-title{
text-align: center;
margin-bottom: 40rpx;
padding-top: 20rpx;
font-size: 32rpx;
font-weight: 900;
}
background-color: white;
padding: 20rpx;
width: 80%;
margin: 0 auto;
border-radius: 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:100%;
}
}
:deep(){
.uni-popup__wrapper{
width: 100%;
}
}
</style>