468 lines
13 KiB
Vue
468 lines
13 KiB
Vue
<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> |