添加修改页面的UI

pages/ChangeUserInfo/ChangeUserInfo.js

@@ -5,8 +5,30 @@ Page({
    * 页面的初始数据
    */
   data: {
+    activeNames: [" "],
+    list: 50,
 
   },
+  onChange(event) {
+    console.log(event.detail);
+  },
+  selectHeadicon(event) {
+    console.log(event.currentTarget.dataset.index);
+  },
+  onChange2(event) {
+    this.setData({
+      activeNames: event.detail,
+    });
+  },
+  onOpen2(event) {
+    console.log("展开");
+  },
+  onClose2(event) {
+    console.log("关闭");
+  },
+  onConfirm(event) {
+    console.log("点击了确认修改!");
+  },
 
   /**
    * 生命周期函数--监听页面加载

pages/ChangeUserInfo/ChangeUserInfo.json

@@ -1,3 +1,12 @@
 {
-  "usingComponents": {}
+  "usingComponents": {
+    "van-field": "@vant/weapp/field/index",
+    "van-collapse": "@vant/weapp/collapse/index",
+    "van-collapse-item": "@vant/weapp/collapse-item/index",
+    "van-grid": "@vant/weapp/grid/index",
+    "van-grid-item": "@vant/weapp/grid-item/index",
+    "van-image": "@vant/weapp/image/index",
+    "van-button": "@vant/weapp/button/index"
+
+  }
 }

pages/ChangeUserInfo/ChangeUserInfo.wxml

@@ -1,2 +1,26 @@
-<!--pages/ChangeUserInfo/ChangeUserInfo.wxml-->
-<text>pages/ChangeUserInfo/ChangeUserInfo.wxml</text>
+<van-cell-group>
+  <van-field 
+    label="用户名"
+    value="Yeomai"
+    placeholder="请输入用户名"
+    border="true"
+    bind:change="onChange"
+  />
+</van-cell-group>
+
+<van-collapse value="{{ activeNames }}" bind:change="onChange2" bind:open="onOpen2" bind:close="onClose2">
+  <van-collapse-item title="头像" name="1">
+    <view style="display: flex;  justify-content: center;  padding: 20rpx 0;">
+      <van-image width="120rpx" height="120rpx" src="https://api.yeomai.site/Images/Headicons/Headicon18.png" />
+    </view>
+    <van-grid icon-size="80rpx">
+      <scroll-view scroll-y style="min-height: 200rpx;max-height: 620rpx;" class="scroll-area">
+        <van-grid-item  wx:for="{{ list }}" wx:key="index" icon="https://api.yeomai.site/Images/Headicons/Headicon{{index + 1}}.png" text="{{index + 1}}" bind:click="selectHeadicon" data-index="{{index + 1}}"/>
+      </scroll-view>
+   </van-grid>
+  </van-collapse-item>
+</van-collapse>
+
+<view class="button-container" style="text-align: center;padding: 20rpx;">
+  <van-button type="primary" bind:click="onConfirm">确认修改</van-button>
+</view>