<template>
<view class="mine">
<!-- 我的头像，昵称 -->
<view class="my_information">
<view class="my_avatar">
<img @click="chooseavatar" :src="imgSrc" alt="" />
<!-- <img @click="chooseavatar" :src="userInfo.icon" alt="" /> -->
</view>
<view class="my_nickname">
{{userInfo.name || ''}}
</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>
</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>
</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>
<view class="btn" @click="tap_login">
<view class="log_in" >
退出登录
</view>
</view>
<CustomTabbar></CustomTabbar>
<!-- 修改弹出层 -->
<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 CustomTabbar from '@/components/CustomTabbar.vue';
import {request} from '../../request/request.js'
import store from '@/store/index.js'
export default {
components:{
CustomTabbar
},
mounted() {
this.getInfoList()
},
data() {
return {
my_name: '张天琪',
// 用于存储输入框的值
inputValue: '',
icon1:'https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132',
userInfo:{
},
imgSrc:'',
}
},
methods: {
// 退出登陆
tap_login(){
// 删除数据
uni.clearStorageSync();
store.commit('setActiveTab', 'home');
uni.redirectTo({
url:'/pages/index/index'
})
},
chooseavatar(){
uni.chooseImage({
count: 1,
sizeType: ['compressed'],
sourceType: ['album', 'camera'],
success: (res) => {
const tempFilePath = res.tempFilePaths[0];
this.uploadImage(tempFilePath,this.userInfo.id);
}
});
},
async uploadImage(tempFilePath,id){
uni.setStorageSync('icon',tempFilePath)
const data = {
icon:tempFilePath,
id,
}
const res = await request({url:'/user/updateIcon',method:'POST',data})
this.getInfoList()
},
//修改信息
setmy() {
this.$refs.popup.open('center')
},
//取消修改
cancel() {
this.$refs.popup.close()
},
// 获取个人信息
async getInfoList(){
const res = await request({url:'/user/info'})
this.userInfo = res
this.setImage(res.icon)
},
// 查看图片是否可以链接
setImage(icon){
// 获取图片信息
uni.getImageInfo({
src: icon,
success: (res) => {
// 判断是否是微信默认图片
if (icon === this.icon1 ) {
// 将默认图片路径赋值给imgSrc，用于显示默认图片
this.imgSrc = '/static/morentu.png';
} else {
this.imgSrc = icon;
}
},
fail: () => {
// 示例：将默认图片路径赋值给imgSrc，用于显示默认图片
this.imgSrc = '/static/morentu.png';
}
});
},
//确定修改
setok() {
// 获取输入框的值
this.my_name = this.inputValue;
this.$refs.popup.close()
},
//任务详情
gotodetails(){
uni.navigateTo({
url:'/PagesB/taskdetails/taskdetails'
})
}
}
}
</script>
<style lang="scss" scoped>
.btn {
width: 567rpx;
height: 80rpx;
box-shadow: 6rpx 0rpx 10rpx 0rpx #eee;
background-color: #fff;
border-radius: 18rpx 18rpx 18rpx 18rpx;
margin-left: 92rpx;
display: flex;
align-items: center;
justify-content: center;
position:fixed;
bottom: 180rpx;
}
.log_in {
// width: 77rpx;
// height: 34rpx;
font-weight: 400;
font-size: 36rpx;
// color: #eee;
line-height: 34rpx;
text-align: center;
font-style: normal;
text-transform: none;
}
.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: 126rpx;
background: #fff;
margin-right: 20rpx;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
img{
width: 126rpx;
height: 126rpx;
border-radius: 50%;
}
}
.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;
padding: 0 20rpx;
.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;
// margin-top: -20rpx;
image {
width: 100%;
height: 100%;
}
}
.my_list_left_title {
font-family: SourceHanSansSC, SourceHanSansSC;
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-family: SourceHanSansSC, SourceHanSansSC;
font-weight: 400;
font-size: 28rpx;
color: #070707;
margin-right: 20rpx;
}
.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>