修改密码

pages/password/password.vue

@@ -2,15 +2,28 @@
   <view class="page">
     <fy-header title="修改密码" back />
     <view class="body">
-      <text class="hint">首次登录或管理员要求改密，请设置新密码后继续。</text>
+      <view class="hero">
+        <view class="mark">
+          <wd-icon name="lock-on" size="44rpx" color="#1677FF" />
+        </view>
+        <text class="title">设置新密码</text>
+        <text class="hint">首次登录或管理员要求改密时，请设置新密码后继续使用。</text>
+      </view>
       <view class="card group">
         <view class="field">
           <text class="lab">新密码</text>
-          <view class="box"><input v-model="next" password placeholder="至少 6 位" /></view>
+          <view class="box">
+            <input v-model="next" :password="!showNext" placeholder="至少 6 位" placeholder-class="ph" />
+            <text class="eye" @click="showNext = !showNext">{{ showNext ? '隐藏' : '显示' }}</text>
+          </view>
         </view>
         <view class="field">
           <text class="lab">确认新密码</text>
-          <view class="box"><input v-model="confirm" password placeholder="再输入一次" /></view>
+          <view class="box" :class="{ bad: mismatch }">
+            <input v-model="confirm" :password="!showConfirm" placeholder="再输入一次" placeholder-class="ph" />
+            <text class="eye" @click="showConfirm = !showConfirm">{{ showConfirm ? '隐藏' : '显示' }}</text>
+          </view>
+          <text v-if="mismatch" class="tip">两次输入不一致</text>
         </view>
       </view>
       <wd-button type="primary" block size="large" @click="ok">确认修改</wd-button>
@@ -26,8 +39,13 @@ import { toast } from '../../utils/format.js'
 
 export default {
   components: { FyHeader },
+  computed: {
+    mismatch() {
+      return this.confirm.length > 0 && this.next !== this.confirm
+    }
+  },
   data() {
-    return { next: '', confirm: '', error: '', off: null, left: false }
+    return { next: '', confirm: '', error: '', off: null, left: false, showNext: false, showConfirm: false }
   },
   onShow() {
     if (this.off) this.off()
@@ -53,12 +71,36 @@ export default {
 </script>
 
 <style scoped>
-.body { padding: 16rpx 24rpx 48rpx; }
-.hint { font-size: 26rpx; color: #6B7280; display: block; margin: 8rpx 8rpx 20rpx; line-height: 1.5; }
-.group { padding: 8rpx 24rpx 24rpx; margin-bottom: 24rpx; }
-.field { margin-top: 20rpx; }
-.lab { font-size: 26rpx; color: #6B7280; display: block; margin-bottom: 10rpx; }
-.box { height: 92rpx; background: #F5F7FA; border-radius: 16rpx; padding: 0 24rpx; display: flex; align-items: center; }
+.body { padding: 32rpx 32rpx 48rpx; }
+.hero { display: flex; flex-direction: column; align-items: center; margin: 16rpx 0 36rpx; }
+.mark {
+  width: 96rpx;
+  height: 96rpx;
+  border-radius: 28rpx;
+  background: #E8F1FF;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 20rpx;
+}
+.title { font-size: 36rpx; font-weight: 650; color: #111827; }
+.hint { margin-top: 10rpx; font-size: 24rpx; color: #6B7280; line-height: 1.55; text-align: center; }
+.group { padding: 8rpx 28rpx 28rpx; margin-bottom: 32rpx; }
+.field { margin-top: 24rpx; }
+.lab { font-size: 26rpx; color: #374151; display: block; margin-bottom: 12rpx; }
+.box {
+  height: 96rpx;
+  background: #F5F7FA;
+  border-radius: 16rpx;
+  padding: 0 24rpx;
+  display: flex;
+  align-items: center;
+  border: 1rpx solid transparent;
+}
+.box.bad { border-color: #FECACA; background: #FEF2F2; }
 .box input { flex: 1; font-size: 30rpx; color: #111827; }
-.err { color: #DC2626; font-size: 24rpx; margin-top: 16rpx; display: block; }
+.ph { color: #9CA3AF; }
+.eye { font-size: 26rpx; color: #1677FF; padding-left: 16rpx; }
+.tip { display: block; margin-top: 10rpx; font-size: 22rpx; color: #DC2626; }
+.err { color: #DC2626; font-size: 26rpx; margin-top: 20rpx; display: block; text-align: center; }
 </style>