<template>
<view class="mine">
<!-- 我的头像，昵称 -->
<view class="my_information">
<view class="my_avatar">
<img :src="userInfo.icon" alt="" />
</view>
<view class="my_nickname">
{{userInfo.nickName}}
<image src="../../static/mine/图层9.png"
style="width: 40rpx; height: 40rpx;padding-left: 5rpx; vertical-align:middle;" mode=""></image>
</view>
</view>
<view class="my_message">
<view class="my_list">
<view class="my_list_left">
<view class="my_list_left_icon">
<image src="../../static/mine/图层 3.png" mode=""></image>
</view>
<view class="my_list_left_title">
任务记录
</view>
</view>
<view class="my_list_right" @click="gotodetails">
<view class="my_list_right_title">
</view>
<view class="my_list_right_icon">
<image src="../../static/mine/返回 (1).png" mode=""></image>
</view>
</view>
</view>
<view class="my_list">
<view class="my_list_left">
<view class="my_list_left_icon">
<image src="../../static/mine/图层 4.png" mode=""></image>
</view>
<view class="my_list_left_title">
姓名
</view>
</view>
<view class="my_list_right">
<view class="my_list_right_title">
{{userInfo.name}}
</view>
<view class="my_list_right_icon" @click="setmy">
<image src="../../static/mine/返回 (1).png" mode=""></image>
</view>
</view>
</view>
<view class="my_list">
<view class="my_list_left">
<view class="my_list_left_icon">
<image src="../../static/mine/图层 5.png" mode=""></image>
</view>
<view class="my_list_left_title">
性别
</view>
</view>
<view class="my_list_right">
男
<!-- <view class="my_list_right_title" v-if="userInfo.status === 0">
</view>
<view class="my_list_right_title" v-if="userInfo.status === 1">
女
</view> -->
<view class="my_list_right_icon">
<image src="../../static/mine/返回 (1).png" mode=""></image>
</view>
</view>
</view>
<view class="my_list">
<view class="my_list_left">
<view class="my_list_left_icon">
<image src="../../static/mine/图层 6.png" mode=""></image>
</view>
<view class="my_list_left_title">
联系方式
</view>
</view>
<view class="my_list_right">
<view class="my_list_right_title">
{{userInfo.phone}}
</view>
<view class="my_list_right_icon">
<image src="../../static/mine/返回 (1).png" mode=""></image>
</view>
</view>
</view>
</view>
<view class="my_message">
<view class="my_list">
<view class="my_list_left">
<view class="my_list_left_icon">
<image src="../../static/mine/图层 7.png" mode=""></image>
</view>
<view class="my_list_left_title">
所在职位
</view>
</view>
<view class="my_list_right">
<view class="my_list_right_title">
<span v-if="userInfo.type === 1">医生</span>
<span v-if="userInfo.type === 2">护士</span>
</view>
<view class="my_list_right_icon">
<image src="../../static/mine/返回 (1).png" mode=""></image>
</view>
</view>
</view>
<view class="my_list">
<view class="my_list_left">
<view class="my_list_left_icon">
<image src="../../static/mine/图层 8.png" mode=""></image>
</view>
<view class="my_list_left_title">
所在医院
</view>
</view>
<view class="my_list_right">
<view class="my_list_right_title">
<span >{{userInfo.hospital || ''}}</span>
</view>
<view class="my_list_right_icon">
<image src="../../static/mine/返回 (1).png" mode=""></image>
</view>
</view>
</view>
</view>
<!-- 修改弹出层 -->
<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0">
<view class="popup_box">
<view class="popup_title">
修改姓名
</view>
<view class="popup_input">
<view class="input-container">
<input class="uni-input" v-model="inputValue" />
</view>
</view>
<view class="popup_btn">
<view class="btn_no" @click="cancel">
取消
</view>
<view class="btn_yes" @click="setok">
确定
</view>
</view>
</view>
</uni-popup>
</view>
</template>
<script>
import {request} from '../../request/request.js'
export default {
created() {
this.getInfoList()
},
data() {
return {
my_name: '张天琪',
// 用于存储输入框的值
inputValue: '',
userInfo:{
}
}
},
methods: {
//修改信息
setmy() {
this.$refs.popup.open('center')
},
//取消修改
cancel() {
this.$refs.popup.close()
},
// 获取个人信息
async getInfoList(){
const res = await request({url:'/user/info'})
this.userInfo = res
},
//确定修改
setok() {
// 获取输入框的值
this.my_name = this.inputValue;
this.$refs.popup.close()
},
//任务详情
gotodetails(){
uni.redirectTo({
url:'/pages/taskdetails/taskdetails'
})
}
}
}
</script>
<style lang="scss" scoped>
.mine {
width: 100%;
height: 100vh;
background: #F5F5F7;
box-sizing: border-box;
.my_information {
width: 500rpx;
height: 135rpx;
display: flex;
justify-content: center;
align-items: center;
padding-top: 30rpx;
margin: 0rpx 0rpx 73rpx 38rpx;
.my_avatar {
width: 126rpx;
height: 135rpx;
background: #fff;
margin-right: 20rpx;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
img{
height: 80rpx;
width: 80rpx;
}
}
.my_nickname {
width: 289rpx;
height: 78rpx;
font-size: 40rpx;
font-weight: 700;
}
}
.my_message {
width: 683rpx;
background: #FFFFFF;
border-radius: 20rpx 20rpx 20rpx 20rpx;
margin-left: 35rpx;
margin-bottom: 20rpx;
display: flex;
flex-wrap: wrap;
align-content: space-around;
.my_list {
width: 683rpx;
height: 120rpx;
display: flex;
justify-content: space-between;
align-items: center;
.my_list_left {
width: 35%;
height: 120rpx;
display: flex;
align-items: center;
justify-content: flex-start;
.my_list_left_icon {
width: 35rpx;
height: 35rpx;
padding: 0rpx 20rpx 0rpx 20rpx;
image {
width: 100%;
height: 100%;
}
}
.my_list_left_title {
font-weight: 400;
font-size: 28rpx;
color: #070707;
}
}
.my_list_right {
width: 60%;
height: 120rpx;
display: flex;
align-items: center;
justify-content: flex-end;
.my_list_right_title {
font-weight: 400;
font-size: 28rpx;
color: #070707;
}
.my_list_right_icon {
width: 30rpx;
height: 30rpx;
padding: 0rpx 30rpx 0rpx 30rpx;
image {
width: 100%;
height: 100%;
}
}
}
}
}
.popup_box {
width: 553rpx;
height: 321rpx;
background: #FFFFFF;
border-radius: 20rpx 20rpx 20rpx 20rpx;
display: flex;
justify-content: center;
flex-wrap: wrap;
align-items: center;
.popup_title {
width: 100%;
height: 80rpx;
font-weight: 400;
font-size: 32rpx;
color: #070707;
text-align: center;
line-height: 80rpx;
}
.popup_input {
width: 461rpx;
height: 71rpx;
background: #EDEDED;
border-radius: 20rpx 20rpx 20rpx 20rpx;
display: flex;
justify-content: center;
align-items: center;
.input-container {
display: flex;
align-items: center;
}
}
.popup_btn {
width: 100%;
height: 86rpx;
border-top: 1rpx solid #ccc;
display: flex;
justify-content: space-between;
align-items: center;
.btn_no {
width: 48%;
height: 86rpx;
text-align: center;
line-height: 86rpx;
border-right: 1px solid #ccc;
}
.btn_yes {
width: 50%;
height: 86rpx;
text-align: center;
line-height: 86rpx;
}
}
}
}
</style>