我的资料，工资条，我的绩效样式修改

pages/me/archive.vue

@@ -1,46 +1,91 @@
 <template>
-  <view class="page">
+  <view class="page edge">
     <fy-header title="我的资料" back />
-    <view class="card">
+    <fy-scroll class="edge-scroll" @refresh="load">
-      <view v-for="r in rows" :key="r.k" class="row">
+      <view class="head">
-        <text class="k">{{ r.k }}</text>
+        <view class="av">{{ initial }}</view>
-        <text class="v">{{ r.v }}</text>
+        <view class="meta">
+          <text class="name">{{ name }}</text>
+          <text class="sub">{{ deptLine }}</text>
+        </view>
       </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 },
+  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 = store.me || {}
+      const m = this.me
       const p = this.profile || {}
       return [
-        { k: '姓名', v: p.realName || m.name },
         { 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.jobNo || m.jobId },
         { k: '状态', v: p.employeeStatus || m.employeeStatus || '在职' }
       ]
     }
   },
-  onShow() {
+  onShow() { this.load() },
-    oaGet('/profile', store.token).then((d) => { this.profile = d || {} }).catch(() => {})
+  methods: {
+    load() {
+      oaGet('/profile', store.token).then((d) => { this.profile = d || {} }).catch(() => {})
+    }
   }
 }
 </script>
 
 <style scoped>
-.card { margin: 24rpx; overflow: hidden; }
+.head {
-.row { display: flex; justify-content: space-between; padding: 28rpx 24rpx; border-bottom: 1rpx solid #E8ECF2; }
+  margin: 16rpx 24rpx 20rpx;
-.k { color: #6B7280; font-size: 26rpx; }
+  padding: 32rpx 24rpx;
-.v { font-size: 26rpx; }
+  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>

pages/me/payslip.vue

@@ -1,32 +1,51 @@
 <template>
-  <view class="page">
+  <view class="page edge">
     <fy-header title="工资条" back />
-    <view v-if="!rows.length" class="empty">暂无工资条</view>
+    <fy-scroll class="edge-scroll" @refresh="load">
-    <view v-for="r in rows" :key="r.id || r.month" class="card item">
+      <wd-status-tip v-if="!rows.length" image="content" tip="暂无工资条" />
-      <text class="t">{{ r.month || r.period || '工资条' }}</text>
+      <view v-for="r in rows" :key="r.id || r.month" class="card item">
-      <text class="s">应发 {{ r.gross || r.shouldPay || '-' }} · 实发 {{ r.net || r.actual || '-' }}</text>
+        <view class="main">
-    </view>
+          <text class="t">{{ r.month || r.period || '工资条' }}</text>
+          <text class="s">应发 {{ money(r.gross || r.shouldPay) }}</text>
+        </view>
+        <view class="amt">
+          <text class="lab">实发</text>
+          <text class="num">{{ money(r.net || r.actual) }}</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 { asList } from '../../utils/format.js'
 import { oaGet } from '../../utils/api.js'
 
 export default {
-  components: { FyHeader },
+  components: { FyHeader, FyScroll },
   data() { return { rows: [] } },
-  onShow() {
+  onShow() { this.load() },
-    oaGet('/profile/payslips', store.token).then((d) => { this.rows = asList(d) }).catch(() => { this.rows = [] })
+  methods: {
+    load() {
+      oaGet('/profile/payslips', store.token).then((d) => { this.rows = asList(d) }).catch(() => { this.rows = [] })
+    },
+    money(v) {
+      if (v === 0) return '0'
+      return v == null || v === '' ? '-' : String(v)
+    }
   }
 }
 </script>
 
 <style scoped>
-.item { margin: 16rpx 24rpx; padding: 24rpx; }
+.item { margin: 16rpx 24rpx; padding: 28rpx 24rpx; display: flex; align-items: center; }
-.t { display: block; font-weight: 600; }
+.main { flex: 1; min-width: 0; }
-.s { font-size: 24rpx; color: #6B7280; }
+.t { display: block; font-size: 30rpx; font-weight: 650; color: #111827; }
-.empty { padding: 80rpx; text-align: center; color: #6B7280; }
+.s { display: block; margin-top: 8rpx; font-size: 24rpx; color: #6B7280; }
+.amt { text-align: right; margin-left: 16rpx; }
+.lab { display: block; font-size: 22rpx; color: #6B7280; }
+.num { display: block; margin-top: 4rpx; font-size: 32rpx; font-weight: 700; color: #1677FF; }
 </style>

pages/me/performance.vue

@@ -1,32 +1,45 @@
 <template>
-  <view class="page">
+  <view class="page edge">
     <fy-header title="我的绩效" back />
-    <view v-if="!rows.length" class="empty">暂无绩效记录</view>
+    <fy-scroll class="edge-scroll" @refresh="load">
-    <view v-for="r in rows" :key="r.id || r.period" class="card item">
+      <wd-status-tip v-if="!rows.length" image="content" tip="暂无绩效记录" />
-      <text class="t">{{ r.period || r.quarter || '绩效' }}</text>
+      <view v-for="r in rows" :key="r.id || r.period" class="card item">
-      <text class="s">评级 {{ r.grade || r.level || '-' }} · {{ r.score || '' }}</text>
+        <view class="main">
-    </view>
+          <text class="t">{{ r.period || r.quarter || '绩效' }}</text>
+          <text v-if="scoreOf(r)" class="s">得分 {{ scoreOf(r) }}</text>
+        </view>
+        <text class="chip">{{ r.grade || r.level || '-' }}</text>
+      </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 { asList } from '../../utils/format.js'
 import { oaGet } from '../../utils/api.js'
 
 export default {
-  components: { FyHeader },
+  components: { FyHeader, FyScroll },
   data() { return { rows: [] } },
-  onShow() {
+  onShow() { this.load() },
-    oaGet('/profile/performance', store.token).then((d) => { this.rows = asList(d) }).catch(() => { this.rows = [] })
+  methods: {
+    load() {
+      oaGet('/profile/performance', store.token).then((d) => { this.rows = asList(d) }).catch(() => { this.rows = [] })
+    },
+    scoreOf(r) {
+      if (r.score == null || r.score === '') return ''
+      return String(r.score)
+    }
   }
 }
 </script>
 
 <style scoped>
-.item { margin: 16rpx 24rpx; padding: 24rpx; }
+.item { margin: 16rpx 24rpx; padding: 28rpx 24rpx; display: flex; align-items: center; }
-.t { display: block; font-weight: 600; }
+.main { flex: 1; min-width: 0; }
-.s { font-size: 24rpx; color: #6B7280; }
+.t { display: block; font-size: 30rpx; font-weight: 650; color: #111827; }
-.empty { padding: 80rpx; text-align: center; color: #6B7280; }
+.s { display: block; margin-top: 8rpx; font-size: 24rpx; color: #6B7280; }
 </style>