92 lines
2.8 KiB
Vue
92 lines
2.8 KiB
Vue
<template>
|
|
<view class="page edge">
|
|
<fy-header title="我的资料" back />
|
|
<fy-scroll class="edge-scroll" @refresh="load">
|
|
<view class="head">
|
|
<view class="av">{{ initial }}</view>
|
|
<view class="meta">
|
|
<text class="name">{{ name }}</text>
|
|
<text class="sub">{{ deptLine }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="group">
|
|
<view v-for="r in rows" :key="r.k" class="row">
|
|
<text class="k">{{ r.k }}</text>
|
|
<text class="v">{{ r.v || '-' }}</text>
|
|
</view>
|
|
</view>
|
|
</fy-scroll>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import FyHeader from '../../components/fy-header.vue'
|
|
import FyScroll from '../../components/fy-scroll.vue'
|
|
import { store } from '../../utils/store.js'
|
|
import { oaGet } from '../../utils/api.js'
|
|
|
|
export default {
|
|
components: { FyHeader, FyScroll },
|
|
data() { return { profile: {} } },
|
|
computed: {
|
|
me() { return store.me || {} },
|
|
name() {
|
|
return this.profile.realName || this.me.name || '未填写'
|
|
},
|
|
initial() { return this.name.slice(0, 1) },
|
|
deptLine() {
|
|
return [this.profile.dept || this.me.department, this.profile.role || this.me.title].filter(Boolean).join(' · ')
|
|
},
|
|
rows() {
|
|
const m = this.me
|
|
const p = this.profile || {}
|
|
return [
|
|
{ k: '手机', v: p.phone || m.phone },
|
|
{ k: '部门', v: p.dept || m.department },
|
|
{ k: '职务', v: p.role || m.title },
|
|
{ k: '工号', v: p.jobNo || m.jobId },
|
|
{ k: '状态', v: p.employeeStatus || m.employeeStatus || '在职' }
|
|
]
|
|
}
|
|
},
|
|
onShow() { this.load() },
|
|
methods: {
|
|
load() {
|
|
oaGet('/profile', store.token).then((d) => { this.profile = d || {} }).catch(() => {})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.head {
|
|
margin: 16rpx 24rpx 20rpx;
|
|
padding: 32rpx 24rpx;
|
|
background: #fff;
|
|
border-radius: 20rpx;
|
|
border: 1rpx solid rgba(17, 24, 39, 0.06);
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.av {
|
|
width: 96rpx; height: 96rpx; border-radius: 22rpx;
|
|
background: #E8F1FF; color: #1677FF;
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-size: 40rpx; font-weight: 650; flex-shrink: 0;
|
|
}
|
|
.meta { margin-left: 20rpx; min-width: 0; }
|
|
.name { display: block; font-size: 34rpx; font-weight: 650; color: #111827; }
|
|
.sub { display: block; margin-top: 6rpx; font-size: 24rpx; color: #6B7280; }
|
|
.group {
|
|
margin: 0 24rpx 32rpx;
|
|
background: #fff;
|
|
border-radius: 20rpx;
|
|
border: 1rpx solid rgba(17, 24, 39, 0.06);
|
|
overflow: hidden;
|
|
}
|
|
.row { display: flex; justify-content: space-between; align-items: center; padding: 28rpx 24rpx; gap: 24rpx; }
|
|
.row + .row { border-top: 1rpx solid #F0F2F5; }
|
|
.k { color: #6B7280; font-size: 28rpx; flex-shrink: 0; }
|
|
.v { font-size: 28rpx; color: #111827; text-align: right; }
|
|
</style>
|