微信小程序用户管理页面 - 显示用户信息并修改身份

在上面的代码中，我们使用了一个block标签来循环渲染用户列表。每个用户都被渲染为一个user-item元素，其中包含用户的姓名、账号、身份和一个按钮，用于修改用户身份。按钮的点击事件绑定了一个editRole函数，该函数将会在用户点击按钮时被调用。

接下来，我们需要在小程序的JS文件中定义editRole函数，以便用户可以使用该函数来修改用户身份。在该函数中，我们将使用wx.request函数来发送HTTP请求到localhost:8084/updateuser接口，以更新用户身份。

Page({
  data: {
    users: []
  },
  onLoad: function () {
    var that = this
    wx.request({
      url: 'http://localhost:8084/getalluser',
      success: function (res) {
        that.setData({
          users: res.data
        })
      }
    })
  },
  editRole: function (event) {
    var accountId = event.currentTarget.dataset.account
    wx.showActionSheet({
      itemList: ['管理员', '普通用户'],
      success: function (res) {
        var role = res.tapIndex == 0 ? '管理员' : '普通用户'
        wx.request({
          url: 'http://localhost:8084/updateuser',
          method: 'POST',
          data: {
            accountId: accountId,
            role: role
          },
          success: function (res) {
            wx.showToast({
              title: '修改成功',
            })
          }
        })
      }
    })
  }
})

在上面的代码中，我们定义了一个Page对象，其中包含了一个data属性，用于存储用户数据。在onLoad函数中，我们使用wx.request函数来发送HTTP请求到localhost:8084/getalluser接口，以获取所有用户数据，并将其存储在data属性中。

在editRole函数中，我们首先获取用户的账号信息，并使用wx.showActionSheet函数来显示一个选项列表，以允许用户选择新的身份。当用户选择身份后，我们将使用wx.request函数来发送HTTP请求到localhost:8084/updateuser接口，以更新用户身份。如果更新成功，我们将使用wx.showToast函数来显示一个成功提示。

最后，我们还需要在小程序的CSS文件中定义样式，以便正确显示用户列表和按钮。

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx;
}

.header {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 30rpx;
}

.user-list {
  width: 100%;
}

.user-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1rpx solid #ccc;
  padding: 20rpx 0;
}

.user-name {
  font-size: 28rpx;
  font-weight: bold;
}

.user-account {
  font-size: 24rpx;
  color: #999;
}

.user-role {
  font-size: 24rpx;
}

.user-edit {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.btn {
  display: inline-block;
  padding: 10rpx 20rpx;
  font-size: 24rpx;
  background-color: #007aff;
  color: #fff;
  border-radius: 5rpx;
  margin-left: 20rpx;
}

在上面的代码中，我们定义了一些基本的样式，用于设置用户列表和按钮的外观。我们使用了flex布局来对用户列表进行布局，并使用border-bottom属性来为每个用户添加一个底部边框。我们还使用了一些其他的CSS属性来设置字体大小、颜色和边距等。