fix

src/components/personInfoEdit/personInfoEdit.vue

@@ -0,0 +1,41 @@
+<template>
+  <view>
+    <u-modal
+      showConfirmButton
+      @confirm="confirm"
+      @cancel="cancel"
+      showCancelButton
+      confirmText="修改"
+      :show="show"
+      :title="title"
+    >
+      <slot></slot>
+    </u-modal>
+  </view>
+</template>
+
+<script>
+export default {
+  props: {
+    show: {
+      type: Boolean,
+      default: false,
+    },
+    title: {
+      type: String,
+      default: '',
+    },
+  },
+  methods: {
+    //点击修改
+    confirm() {
+      this.$emit('confirm');
+    },
+
+    //点击修改
+    cancel() {
+      this.$emit('cancel');
+    },
+  },
+};
+</script>

src/pages.json

@@ -202,7 +202,7 @@
         {
           "path": "editData",
           "style": {
-            "navigationBarTitleText": "编辑资料"
+            "navigationBarTitleText": "个人资料"
           }
         },
         {

src/pages/client/clientUser/editData.vue

@@ -2,18 +2,54 @@
   <view class="editData">
     <u-cell-group>
       <u-cell size="large" title="头像" value="头像" isLink url="" @click="onClickAvatar" />
-      <u-cell size="large" title="用户名" value="yizhiyang" isLink url="" />
+      <u-cell
+        size="large"
+        @click="onClickUserName(userName, '用户名')"
+        title="用户名"
+        :value="userName"
+        isLink
+        url=""
+      />
       <u-cell size="large" title="昵称" value="易只烊" isLink url="" />
       <u-cell size="large" title="性别" value="女" isLink url="" />
       <u-cell size="large" title="生日" value="2000-03-01" isLink url="" />
       <u-cell size="large" title="常用地" value="贵阳" isLink url="" />
       <u-cell size="large" title="个人介绍" value="内容" isLink url="" />
     </u-cell-group>
+
+    <!-- 用户协议弹框 -->
+    <personInfoEdit
+      v-if="show"
+      :value="value"
+      :title="title"
+      :show="show"
+      @confirm="confirm"
+      @cancel="cancel"
+    >
+      <u--input
+        style="border: 0.2rpx solid #ccc; border-color: #007bff"
+        v-model="value"
+        @change="change"
+      >
+      </u--input>
+    </personInfoEdit>
   </view>
 </template>
 
 <script>
+import personInfoEdit from '@/components/personInfoEdit/personInfoEdit.vue';
 export default {
+  components: {
+    personInfoEdit,
+  },
+  data() {
+    return {
+      show: '',
+      value: '',
+      userName: 'yizhiyang',
+    };
+  },
+
   methods: {
     // 点击头像
     async onClickAvatar() {
@@ -72,6 +108,29 @@ export default {
       this.user_info.avatar = newImagePath;
       this.$forceUpdate(); // 手动触发组件的重新渲染
     },
+
+    //点击用户名哪一行
+    onClickUserName(userName, value) {
+      this.value = userName; //把行最后的值给value
+      this.title = `编辑${value}`; //弹框标题
+      this.show = true; //打开弹框
+    },
+
+    //点击弹框确认
+    confirm() {
+      this.userName = this.value;
+      this.show = false;
+    },
+
+    //点击弹框取消
+    cancel() {
+      this.show = false;
+    },
+
+    //监听input框输入
+    change(value) {
+      this.value = value;
+    },
   },
 };
 </script>