<template>
|
<view class="container">
|
<u-navbar :is-fixed="false" :border-bottom="false" :is-back="true" back-icon-color="#fff" title="个人资料"
|
back-icon-size="35" :background="{ background: '#0BB9C8' }" title-color="#fff">
|
<view class="complie" slot="right" @click="submit">完成</view>
|
</u-navbar>
|
|
<view class="content">
|
<view class="avatar" style="height: 420rpx">
|
<image :src="detail.avatar" class="avatar-image" mode=""></image>
|
<view class="a" @click="handleChooseImg">更换头像</view>
|
</view>
|
|
<view class="detail-content">
|
|
<view class='row-content'>
|
<span class="title">
|
名 称
|
</span>
|
<span>
|
{{detail.nick_name}}
|
</span>
|
</view>
|
|
<view class='row-content'>
|
<span class="title">
|
单 位
|
</span>
|
<span>
|
{{detail.deptName}}
|
</span>
|
</view>
|
|
<view class='row-content' v-show="detail.rname[0] == '保安'">
|
<span class="title">
|
性 别
|
</span>
|
<span>
|
{{detail.list.sex == 1 ? '男' : detail.list.sex == 2 ? '女' : ''}}
|
</span>
|
</view>
|
|
<view class='row-content' v-show="detail.rname[0] == '保安'">
|
<span class="title">
|
年 龄
|
</span>
|
<span>
|
{{detail.age}}
|
</span>
|
</view>
|
|
<view class='row-content' v-show="detail.rname[0] == '保安'">
|
<span class="title">
|
籍 贯
|
</span>
|
<span>
|
{{detail.list.nativeplace}}
|
</span>
|
</view>
|
|
<view class='row-content' v-show="detail.rname[0] == '保安'">
|
<span class="title">
|
联系电话
|
</span>
|
<span>
|
{{detail.list.phone}}
|
</span>
|
</view>
|
|
<view class='row-content' v-show="detail.rname[0] == '保安'">
|
<span class="title">
|
证件编号
|
</span>
|
<span>
|
{{detail.list.securitynumber}}
|
</span>
|
</view>
|
|
</view>
|
|
</view>
|
<!-- -->
|
<!-- <view class="back" @click="logout">退出登录</view> -->
|
<u-toast ref="uToast" />
|
</view>
|
</template>
|
|
<script>
|
import pickRegions from '@/components/pick-regions/pick-regions.vue';
|
export default {
|
components: {
|
pickRegions
|
},
|
data() {
|
return {
|
sexPicker: [{
|
name: '男'
|
},
|
{
|
name: '女'
|
}
|
],
|
detail: {}
|
};
|
},
|
onLoad() {
|
|
if (this.$store.state
|
.UserData) {
|
this.detail = this.$store.state
|
.UserData
|
|
var usercode = this.detail.cardid;
|
var date = new Date();
|
var year = date.getFullYear();
|
var birthday_year = parseInt(usercode.substr(6, 4));
|
var userage = year - birthday_year;
|
|
this.detail.age = userage;
|
}
|
|
},
|
methods: {
|
logout() {
|
this.$u.func.logout();
|
},
|
submit() {
|
// let detail = this.detail
|
// if (!detail.phone && !/^1\d{10}$/.test(detail.phone)) {
|
// return uni.showToast({
|
// title: '请输入正确的手机号',
|
// duration: 2000,
|
// icon: 'none'
|
// });
|
// }
|
var that = this;
|
uni.request({
|
url: this.$store.state.piAPI + "/blade-user/update-info",
|
method: "post",
|
data: {
|
realName: this.detail.nick_name,
|
avatar: this.detail.avatar,
|
id: this.detail.user_id
|
},
|
success: (res) => {
|
if (res.data.msg == "操作成功") {
|
that.$refs.uToast.show({
|
title: '修改成功',
|
type: 'success',
|
callback: () => {
|
uni.navigateBack();
|
}
|
})
|
}
|
}
|
});
|
|
},
|
changeDefaultPicker(name, e) {
|
this.detail[name] = e.detail.value;
|
},
|
changePicker(name, e) {
|
this.detail[name] = this[`${name}Picker`][e.detail.value].name;
|
},
|
handleChooseImg() {
|
let that = this;
|
uni.chooseImage({
|
count: 1,
|
success(e) {
|
that.detail.avatar = e.tempFilePaths[0];
|
}
|
});
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss">
|
.container {
|
|
height: 100vh;
|
overflow: hidden;
|
|
background: #0ED2F7;
|
/* fallback for old browsers */
|
background: -webkit-linear-gradient(to left, #B2FEFA, #0ED2F7);
|
/* Chrome 10-25, Safari 5.1-6 */
|
background: linear-gradient(to left, #B2FEFA, #0ED2F7);
|
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
|
|
|
|
}
|
|
.complie {
|
vertical-align: middle;
|
padding: 10rpx 20rpx;
|
font-size: 32rpx;
|
font-family: Source Han Sans CN;
|
font-weight: 400;
|
color: #fff;
|
}
|
|
.content {
|
height: 100%;
|
overflow-y: auto;
|
}
|
|
.avatar {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
flex-direction: column;
|
|
font-size: 30rpx;
|
font-family: Source Han Sans CN;
|
font-weight: 400;
|
color: #fff;
|
|
background: #0BB9C8;
|
/* fallback for old browsers */
|
background: -webkit-linear-gradient(to left, #0BB9C8, #0cd9e7, #0cd9e7, #0BB9C8);
|
/* Chrome 10-25, Safari 5.1-6 */
|
background: linear-gradient(to left, #0BB9C8, #0cd9e7, #0cd9e7, #0BB9C8);
|
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
|
|
.avatar-image {
|
width: 162rpx;
|
height: 162rpx;
|
background: #ffffff;
|
border-radius: 50%;
|
background-color: #82848a;
|
margin-bottom: 15rpx;
|
}
|
}
|
|
.detail-content {
|
margin-top: 8px;
|
margin-left: 2.5%;
|
padding: 8px 2.5%;
|
width: 95%;
|
background-color: rgba(65, 64, 66, 0.1);
|
border-radius: 5px;
|
display: flex;
|
flex-direction: column;
|
|
min-height: calc(100% - 634rpx);
|
|
.row-content {
|
width: 100%;
|
height: 60px;
|
/* background-color: seashell; */
|
display: flex;
|
align-items: center;
|
/* justify-content: center; */
|
color: #fff;
|
margin: 0 auto;
|
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
|
|
.title {
|
margin-left: 6%;
|
display: inline-block;
|
width: 21%;
|
min-width: 144rpx;
|
}
|
}
|
|
}
|
|
|
|
|
.back {
|
margin-top: 40rpx;
|
text-align: center;
|
height: 109rpx;
|
background: #ffffff;
|
|
font-size: 34rpx;
|
font-family: Source Han Sans CN;
|
font-weight: bold;
|
color: #141414;
|
line-height: 109rpx;
|
}
|
</style>
|
