JM-MiniApp/pages/user/userInfo.vue

374 lines
10 KiB
Vue
Raw Normal View History

2023-10-19 23:23:22 +08:00
<script setup>
import { onLoad } from "@dcloudio/uni-app"
// import mySwiper from "@/components/mySwiper.vue"
2023-11-07 00:12:02 +08:00
import {ref,onMounted,nextTick,computed} from "vue"
2023-11-07 23:40:53 +08:00
import unCombox from '@/uni_modules/uni-combox/components/uni-combox/uni-combox.vue'
2023-10-19 23:23:22 +08:00
import {useStore} from '@/store/index.js'
2023-11-07 23:40:53 +08:00
const store = useStore()
2023-10-19 23:23:22 +08:00
import api from "@/api/index.js"
onLoad(() => {
// console.log(useStore.userInfo)
userinfo.value = JSON.parse(uni.getStorageSync('userInfo'))
console.log(userinfo.value)
avatar.value = uni.getStorageSync('avatarUrl')
2023-11-07 23:40:53 +08:00
if(uni.getStorageSync('operation_info')) {
h_info.value = JSON.parse(uni.getStorageSync('operation_info'))
if(h_info.value) {
// console.log(h_info.value)
getHospital(h_info.value.hospitalId)
}
2023-11-07 00:12:02 +08:00
}
2023-10-19 23:23:22 +08:00
})
2023-11-07 23:40:53 +08:00
// 变量
const h_queryParams = ref({
page:1,
pageSize:1000,
key:''
})
const hospitals = ref(null)
2023-11-07 00:12:02 +08:00
const userinfo = ref({})
2023-10-19 23:23:22 +08:00
const avatar = ref(null)
2023-11-07 23:40:53 +08:00
const h_info = ref({})
2023-11-07 00:12:02 +08:00
const inputDialog = ref(null)
const input_title = ref(null)
2023-11-07 23:40:53 +08:00
const hValue = ref('') // 医院
const hValueId = ref('') // 医院id
// const form_data = ref({})
2023-11-07 00:12:02 +08:00
// const userForm = ref(null)
2023-10-19 23:23:22 +08:00
// 方法
2023-11-07 23:40:53 +08:00
async function getHospitalList() {
const res = await api.getHospitalList(h_queryParams.value)
if(res.code == 0) {
hospitals.value = res.data.list
}
}
2023-12-11 01:12:26 +08:00
function onInputH() {
console.log(hValue.value)
2023-11-07 23:40:53 +08:00
h_queryParams.value.key = hValue.value
getHospitalList()
}
2023-11-07 00:12:02 +08:00
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)
2023-10-19 23:23:22 +08:00
function toDetail(type) {
2023-11-07 00:12:02 +08:00
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() {
2023-11-07 23:40:53 +08:00
inputDialog.value.close()
2023-11-07 00:12:02 +08:00
}
const startDate = computed(() => getDate('start'))
const endDate = computed(() => getDate('end'))
2023-11-07 23:40:53 +08:00
const choosed_h = ref(null)
2023-11-07 00:12:02 +08:00
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}`;
}
2023-11-07 23:40:53 +08:00
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() {
2023-11-14 23:48:34 +08:00
// console.log(choosed_h.value,h_info.value,userinfo.value)
2023-11-07 23:40:53 +08:00
let obj = {
id: userinfo.value.userId,
// isSurgery: 1, //是否已经手术 0为手术1已经手术
surgery_time: h_info.value?.surgery_time, //手术时间
nickname: userinfo.value.nickname,
// avatar: '',
phone: userinfo.value.phone,
hospitalId:choosed_h.value?.ID
}
const res = await api.userinfoUpdae(obj)
2023-11-14 23:48:34 +08:00
// console.log('res is ',res)
2023-11-07 23:40:53 +08:00
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);
console.log(loginRes,'微信登录返回信息');
}
});
});
let res2=await api.wx_login({code:res.code},userId);
if(res2.code === 0) {
uni.setStorageSync('userInfo',JSON.stringify(userinfo.value))
// is_login.value = custom.checkLogin()
store.checkLogin()
}
else{
uni.clearStorage();
}
2023-10-19 23:23:22 +08:00
}
</script>
<template>
<view class="userInfoBox page-box page-bg-gray">
<view class="avatar-box">
<image :src="avatar" mode="aspectFill"></image>
</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>
2023-11-07 00:12:02 +08:00
<view class="rb-card" @tap="toDetail(2)">
2023-10-19 23:23:22 +08:00
<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>
2023-11-07 00:12:02 +08:00
<view class="rb-card" @tap="toDetail(3)">
2023-10-19 23:23:22 +08:00
<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">
2023-11-07 23:40:53 +08:00
<!-- {{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>
2023-10-19 23:23:22 +08:00
</view>
</view>
</view>
2023-11-07 00:12:02 +08:00
<view class="rb-card" @tap="toDetail(4)">
2023-10-19 23:23:22 +08:00
<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">
2023-11-07 23:40:53 +08:00
<!-- {{h_info?.name}} -->
2023-12-11 01:12:26 +08:00
<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> -->
2023-10-19 23:23:22 +08:00
</view>
</view>
</view>
</view>
2023-11-07 00:12:02 +08:00
<!--修改姓名/电话 弹窗 -->
<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>
2023-11-07 23:40:53 +08:00
<view class="pb-item pb-item-btn" @tap="finishFunc">确定</view>
2023-11-07 00:12:02 +08:00
</view>
</view>
</uni-popup>
2023-11-07 23:40:53 +08:00
<view class="pb-item pb-item-btn" style="margin-top: 40rpx;" @tap="sumbmitFunc">确定</view>
2023-10-19 23:23:22 +08:00
</view>
</template>
<style scoped lang="scss">
.avatar-box{
display: flex;
align-items: center;
justify-content: space-around;
width: 100%;
padding: 20rpx 0;
background: #26758d;
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;
2023-11-07 00:12:02 +08:00
}
.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%;
}
2023-10-19 23:23:22 +08:00
}
</style>