JM-MiniApp/pages/user/userInfo.vue

<script setup>
	import { onLoad } from "@dcloudio/uni-app"
	// import mySwiper from "@/components/mySwiper.vue"
	import {ref,onMounted,nextTick} from "vue"
	import {useStore} from '@/store/index.js'
	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')
	})
	const userinfo = ref(null)
	const avatar = ref(null)
	// 方法
	function toDetail(type) {
		
	}
</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>
			<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="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(1)">
			  <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-10-1
					  <uni-icons type="forward" color="gray" size="20"></uni-icons>
				  </view>
			  </view>
			</view>
			<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="paperplane" color="gray" size="26"></uni-icons>
					  手术医院</view>
				  <view class="rbc-content-row rbc-content-right">
					  金山医院 
					  <uni-icons type="forward" color="gray" size="20"></uni-icons>
				  </view>
			  </view>
			</view>
		</view>
	</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;
	}
</style>