JM-MiniApp/pages/user/userInfo.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>