美化了样式

pages/personCenter/component/modifyNamePop/modifyNamePop.js

@@ -0,0 +1,49 @@
+Component({
+  properties: {
+    show: {
+      type: Boolean,
+      value: false
+    },
+    nickname: {
+      type: String,
+      value: ''
+    }
+  },
+  data: {
+    inputVal: ''
+  },
+  methods: {
+    onInput(e) {
+      this.setData({
+        inputVal: e.detail.value
+      });
+    },
+    onCancel() {
+      this.triggerEvent('cancel');
+    },
+    onConfirm() {
+      const newName = this.data.inputVal.trim();
+      if (!newName) {
+        wx.showToast({
+          title: '昵称不能为空',
+          icon: 'none'
+        });
+        return;
+      }
+
+      if (newName.length > 20) {
+        wx.showToast({
+          title: '昵称最长不超过20个字符',
+          icon: 'none'
+        })
+        return ;
+      }
+      this.triggerEvent('confirm', { nickname: newName });
+    }
+  },
+  observers: {
+    nickname(val) {
+      this.setData({ inputVal: val });
+    }
+  }
+});

pages/personCenter/component/modifyNamePop/modifyNamePop.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

pages/personCenter/component/modifyNamePop/modifyNamePop.wxml

@@ -0,0 +1,15 @@
+<view wx:if="{{show}}" class="popup-mask">
+  <view class="popup-container">
+    <text class="popup-title">修改昵称</text>
+    <input 
+      class="popup-input" 
+      placeholder="请输入新的昵称" 
+      value="{{nickname}}"
+      bindinput="onInput"
+    />
+    <view class="popup-btns">
+      <button class="btn cancel-btn" bindtap="onCancel">取消</button>
+      <button class="btn confirm-btn" bindtap="onConfirm">确定</button>
+    </view>
+  </view>
+</view>

pages/personCenter/component/modifyNamePop/modifyNamePop.wxss

@@ -0,0 +1,57 @@
+.popup-mask {
+  position: fixed;
+  top: 0; left: 0; right: 0; bottom: 0;
+  background: rgba(0, 0, 0, 0.4);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.popup-container {
+  width: 80%;
+  background: #fff;
+  border-radius: 10px;
+  padding: 20rpx;
+  box-sizing: border-box;
+}
+
+.popup-title {
+  display: block;
+  font-size: 32rpx;
+  font-weight: bold;
+  text-align: center;
+  margin-bottom: 20rpx;
+}
+
+.popup-input {
+  width: 100%;
+  border: 1px solid #ddd;
+  border-radius: 6rpx;
+  padding: 10rpx;
+  box-sizing: border-box;
+  font-size: 28rpx;
+}
+
+.popup-btns {
+  display: flex;
+  justify-content: space-around;
+  margin-top: 20rpx;
+}
+
+.btn {
+  flex: 1;
+  margin: 0 10rpx;
+  padding: 12rpx 0;
+  border-radius: 6rpx;
+}
+
+.cancel-btn {
+  background: #f5f5f5;
+  color: #333;
+}
+
+.confirm-btn {
+  background: #f5f5f5;
+  color: #ff8d1a;
+}