refactor: remove registration page and update login UI with agreement checkbox

2026-04-09 16:18:27 +08:00
parent 1559181b2e
commit cc93fb03b0
11 changed files with 211 additions and 595 deletions
--- a/app.json
+++ b/app.json
@@ -21,7 +21,6 @@
    "pages/myMembershipCard/index",
    "pages/notice/index",
    "pages/questions/index",
-    "pages/register/index",
    "pages/sportsGroundList/index",
    "pages/userInfo/index",
    "pages/loginIndex/index",
--- a/pages/login/index.js
+++ b/pages/login/index.js
@@ -8,7 +8,7 @@ Page({
  data: {
    showUnclickMask: false,
    isGoHome: false,
-    isLogin: false,
+    isAgree: false
  },

  /**
@@ -98,75 +98,72 @@ Page({
    }
  },

-  // 登录
-  loginClick() {
+  // 跳转到协议
+  pushAgreement() {
    wx.navigateTo({
-      url: '/pages/loginIndex/index',
+      url: '/pages/agreement/index',
    })
  },

-  // 注册
-  registerClick(e) {
-    wx.redirectTo({
-      url: '/pages/register/index?codeType=' + 2,
+  checkboxChange(e) {
+    this.setData({
+      isAgree: e.detail.value.length > 0
    })
  },

-  // 微信登录
-  wxLogin(e) {
-    if (e.detail.errMsg == 'getUserInfo:fail auth deny') {
+
+
+  // 手机号一键登录/注册
+  onGetPhoneNumber(e) {
+    if (!this.data.isAgree) {
+      wx.showToast({
+        title: '请阅读并同意服务条款及隐私政策',
+        icon: 'none',
+        duration: 2000
+      })
      return;
    }
-    this.setData({
-      showUnclickMask: true
-    })
+
+    if (e.detail.errMsg === 'getPhoneNumber:fail user deny') {
+      return;
+    }
+
+    this.setData({ showUnclickMask: true });
    let that = this;
-    wx.getUserProfile({
-      desc: '用于完善会员资料',
-      success: (res) => {
+
+    // 前端获取到手机号授权 code 后，再去获取 wx.login 的 code
    wx.login({
      success: function (r) {
-            app.$api.memberLoginWX({
-              avatar: res.userInfo.avatarUrl,
-              code: r.code,
-              nickname: res.userInfo.nickName
+        // 调用后端接口。
+        // 注意：这里复用了 memberLoginWXPhone。请让后端把接收参数改为 phoneCode 和 loginCode，
+        // 或者您自己在 api.js 里新建一个专属的一键登录接口。后端收到 phoneCode 后去微信服换取真实手机号并完成注册登录。
+        app.$api.memberLoginWXPhone({
+          loginCode: r.code,
+          phoneCode: e.detail.code
        }).then(res => {
-              wx.setStorageSync('information', res.information);
          if (!res.authorization) {
-                wx.redirectTo({
-                  url: '/pages/register/index?codeType=' + 1,
-                })
+            that.setData({ showUnclickMask: false });
+            wx.showToast({ title: '登录失败，未返回Token', icon: 'none' });
            return;
          }
+          wx.setStorageSync('information', res.information);
          wx.setStorageSync('accessToken', res.authorization.accessToken);
+
+
+          that.setData({ showUnclickMask: false });
          let route = wx.getStorageSync('history');
          wx.removeStorageSync('history');
          if (!route || route == '/pages/login/index') {
-                return wx.redirectTo({
-                  url: '/pages/mine/index',
-                })
+            return wx.redirectTo({ url: '/pages/mine/index' })
          }
-              wx.redirectTo({
-                url: route,
-              })
-            }, err => {
-              that.setData({
-                showUnclickMask: false
-              })
+          wx.redirectTo({ url: route })
+        }).catch(err => {
+          that.setData({ showUnclickMask: false });
        });
      },
      fail: function (res) {
-            that.setData({
-              showUnclickMask: false
+        that.setData({ showUnclickMask: false });
+      }
    })
-          },
-        })
-      },
-      fail: (res) => {
-        that.setData({
-          showUnclickMask: false
-        })
-      },
-    })
-  },
+  }
 })
--- a/pages/login/index.wxml
+++ b/pages/login/index.wxml
@@ -1,14 +1,25 @@
 <!--pages/login/index.wxml-->
 <header isHistory="{{true}}" isGoHome="{{isGoHome}}"></header>
+
 <view class='container' wx:if="{{!isLogin}}">
-  <button class='login-btn' bindtap='loginClick'>登录</button>
-  <button class='register-btn' bindtap='registerClick'>注册</button>
-  <view class='line-between'>
-    <view class='line-between-text'>快速微信登录</view>
+  <view class="auth-box">
+    <image class="app-logo" src="../../images/45@3x.png"></image>
+    <view class="auth-tip">欢迎登录智慧云馆</view>
  </view>
-  <view class='wechat-btn'>
-    <image src='../../images/47@3x.png' bindtap='wxLogin'></image>
+
+  <view class='agreement'>
+    <checkbox-group bindchange="checkboxChange">
+      <checkbox value="agree" checked="{{isAgree}}" color="#ffda2e"/>
+    </checkbox-group>
+    <view class="agreement-text">
+      我已阅读并同意<text class="protocol" catchtap='pushAgreement'>《智慧云馆服务条款》及《隐私政策》</text>
    </view>
  </view>

+  <!-- 手机号一键授权登录/注册 -->
+  <button class='login-btn' open-type="getPhoneNumber" bindgetphonenumber="onGetPhoneNumber">微信授权并登录</button>
+  
+</view>
+
 <view class='unclick-mask' wx:if="{{showUnclickMask}}"></view>
+
--- a/pages/login/index.wxss
+++ b/pages/login/index.wxss
@@ -15,57 +15,43 @@
  line-height: 80rpx;
 }

-.register-btn {
-  margin-top: 38rpx;
-  height: 80rpx;
-  border-radius: 40rpx;
-  background: none;
-  border: 2rpx solid #6e602f;
-  font-size: 26rpx;
-  line-height: 80rpx;
-  color: #cdb02e;
+.auth-box {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 50rpx;
 }

-.line-between {
-  position: relative;
-  height: 4rpx;
-  margin-top: 190rpx;
-  margin-bottom: 70rpx;
-  background: #3f3e49;
+.app-logo {
+  width: 600rpx;
+  height: 150rpx;
 }

-.line-between .line-between-text {
-  position: absolute;
-  top: 0;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  padding: 0 40rpx;
-  background: #252330;
-  font-size: 24rpx;
+.auth-tip {
+  margin-top: 30rpx;
+  font-size: 28rpx;
+  color: #fff;
+}
+
+.agreement {
+  display: flex;
+  align-items: flex-start;
+  margin-top: 40rpx;
+  font-size: 22rpx;
  color: rgba(255, 255, 255, 0.6);
 }

-.wechat-btn {
-  position: relative;
-  width: 100rpx;
-  height: 100rpx;
-  margin: 0 auto;
+.agreement-text {
+  flex: 1;
+  line-height: 1.6;
 }

-.wechat-btn>button {
-  position: absolute;
-  background: none;
-  width: 100%;
-  height: 100%;
+.agreement .protocol {
+  color: #b1992f;
 }

-.wechat-btn>button::after {
-  border: none;
-}
-
-.wechat-btn>image {
-  width: 100%;
-  height: 100%;
+.agreement checkbox {
+  transform: scale(0.6);
 }

 .unclick-mask{
--- a/pages/register/index.js
+++ b/pages/register/index.js
@@ -1,315 +0,0 @@
-// pages/register/index.js
-const app = getApp();
-let timer = '';
-let codeType = 0;
-let changeType = '';
-Page({
-
-  /**
-   * 页面的初始数据
-   */
-  data: {
-    isFocus: '',
-    body: {},
-    code: "获取验证码",
-    isGetCode: false,
-    ageList: [{
-      label: '男',
-      value: 0
-    }, {
-      label: '女',
-      value: 1
-    }, {
-      label: '不选择',
-      value: 2
-    }],
-    isShowSexPopup: false,
-    sexLabel: '选择性别(选填)',
-    changeFrom: {},
-    unClick: false,
-  },
-
-  /**
-   * 生命周期函数--监听页面加载
-   */
-  onLoad: function(options) {
-    let that = this;
-    changeType = options.changeType ? options.changeType : '';
-    codeType = options.codeType;
-    this.setData({
-      changeFrom: options
-    })
-  },
-
-  /**
-   * 生命周期函数--监听页面初次渲染完成
-   */
-  onReady: function() {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面显示
-   */
-  onShow: function() {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面隐藏
-   */
-  onHide: function() {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面卸载
-   */
-  onUnload: function() {
-
-  },
-
-  /**
-   * 页面相关事件处理函数--监听用户下拉动作
-   */
-  onPullDownRefresh: function() {
-
-  },
-
-  /**
-   * 页面上拉触底事件的处理函数
-   */
-  onReachBottom: function() {
-
-  },
-
-  /**
-   * 用户点击右上角分享
-   */
-  onShareAppMessage: function() {
-    return {
-      title: '智慧云馆'
-    }
-  },
-
-  // 输入框获取聚焦时
-  inputFocus(event) {
-    let key = event.currentTarget.dataset.type;
-    this.setData({
-      isFocus: key
-    })
-  },
-
-  // 输入框输入时
-  inputChange(event) {
-    let key = event.currentTarget.dataset.type;
-    this.data.body[key] = event.detail.value;
-  },
-
-  // 输入框失去焦点时
-  inputBlur(event) {
-    let key = event.currentTarget.dataset.type;
-    this.setData({
-      isFocus: ''
-    })
-  },
-
-  // 获取验证码
-  getCode() {
-    if (this.data.isGetCode) {
-      return;
-    }
-    if (!this.data.body.phone) {
-      wx.showToast({
-        title: '请输入手机号',
-        icon: 'none',
-      })
-      return;
-    }
-    this.data.isGetCode = true;
-
-    if (this.data.changeFrom.codeType != 3) {
-      app.$api.smsRegister({
-        mobile: this.data.body.phone,
-        'type': codeType
-      }).then(res => {
-        clearTimeout(timer);
-        this.countdown(60);
-      }, err => {
-        this.data.isGetCode = false;
-      })
-    }
-    if (this.data.changeFrom.codeType == 3) {
-      app.$api.memberSmsUpdate({
-        mobile: this.data.body.phone,
-      }).then(res => {}, err => {})
-    }
-  },
-
-  // 倒计时
-  countdown(val) {
-    if (val == 0) {
-      this.data.isGetCode = false;
-      clearTimeout(timer);
-      return;
-    }
-    let that = this;
-    timer = setTimeout(function() {
-      val--
-      that.countdown(val);
-      that.setData({
-        code: val == 0 ? '获取验证码' : val + ' s'
-      })
-    }, 1000)
-  },
-
-  // 点击选择性别
-  changeSex() {
-    this.setData({
-      isShowSexPopup: true
-    })
-  },
-
-  // 取消选择性别
-  cancelSex() {
-    this.setData({
-      isShowSexPopup: false
-    })
-  },
-
-  // 选择性别
-  selectedSex(e) {
-    this.data.body.sex = e.detail.value;
-    this.setData({
-      isShowSexPopup: false,
-      sexLabel: e.detail.label == '不选择' ? "选择性别(选填)" : e.detail.label
-    })
-  },
-
-  // 注册
-  registerClick(e) {
-    if (this.data.unClick) {
-      return;
-    }
-    if (!this.data.body.phone) {
-      wx.showToast({
-        title: '请输入手机号',
-        icon: 'none',
-      })
-      return;
-    }
-    if (!this.data.body.code) {
-      wx.showToast({
-        title: '请输入验证码',
-        icon: 'none',
-      })
-      return;
-    }
-    if (this.data.body.age > 100) {
-      wx.showToast({
-        title: '输入年龄不得超过100',
-        icon: 'none',
-      })
-      return;
-    }
-    this.data.unClick = true;
-    if (codeType == 2) {
-      app.$api.memberRegister({
-        address: this.data.body.address ? this.data.body.address : '',
-        age: this.data.body.age ? this.data.body.age : '',
-        captcha: this.data.body.code ? this.data.body.code : '',
-        mobile: this.data.body.phone ? this.data.body.phone : '',
-        name: this.data.body.name ? this.data.body.name : '',
-        sex: this.data.body.sex ? this.data.body.sex : '',
-      }).then(res => {
-        this.data.unClick = false;
-        wx.setStorageSync('accessToken', res.authorization.accessToken);
-        // if (wx.getStorageSync('history').indexOf("basketballGym") > -1) {
-          wx.redirectTo({
-            url: '/pages/myAccount/index?isPass=' + 1,
-          })
-        // } else {
-        //   wx.redirectTo({
-        //     url: '/pages/facialCapturing/index?isPass=' + 1,
-        //   })
-        // }
-        
-      }, err => {
-        this.data.unClick = false;
-      })
-    } else if (codeType == 1) {
-      app.$api.memberLoginWXPhone({
-        avatar: wx.getStorageSync('information').avatar,
-        nickname: wx.getStorageSync('information').nickname,
-        openId: wx.getStorageSync('information').openId,
-        address: this.data.body.address ? this.data.body.address : '',
-        age: this.data.body.age ? this.data.body.age : '',
-        captcha: this.data.body.code ? this.data.body.code : '',
-        mobile: this.data.body.phone ? this.data.body.phone : '',
-        name: this.data.body.name ? this.data.body.name : '',
-        sex: this.data.body.sex ? this.data.body.sex : '',
-      }).then(res => {
-        this.data.unClick = false;
-        wx.setStorageSync('accessToken', res.authorization.accessToken);
-        // if (wx.getStorageSync('history').indexOf("basketballGym") > -1) {
-          wx.redirectTo({
-            url: '/pages/myAccount/index?isPass=' + 1,
-          })
-        // } else {
-        //   wx.redirectTo({
-        //     url: '/pages/facialCapturing/index?isPass=' + 1,
-        //   })
-        // }
-      }, err => {
-        this.data.unClick = false;
-      })
-    }
-  },
-
-  // 保存修改
-  saveClick() {
-    let body = {};
-    if (this.data.changeFrom.label == "phone") {
-      if (!this.data.body.code) {
-        wx.showToast({
-          title: '请输入验证码',
-          icon: 'none',
-        })
-        return;
-      }
-      body.mobile = this.data.body.phone ? this.data.body.phone : this.data.changeFrom.value;
-      body.captcha = this.data.body.code;
-    } else {
-      if (this.data.changeFrom.label == 'age' && this.data.body.age > 100) {
-        wx.showToast({
-          title: '输入年龄不得超过100',
-          icon: 'none',
-        })
-        return;
-      }
-      if (this.data.changeFrom.label == 'nickname' && this.data.body.nickname === '') {
-        wx.showToast({
-          title: '请输入昵称',
-          icon: 'none',
-        })
-        return;
-      }
-      body[this.data.changeFrom.label] = this.data.body[this.data.changeFrom.label] != undefined ? this.data.body[this.data.changeFrom.label] : this.data.changeFrom.value
-    }
-
-    app.$api.memberUpdateInformation(body).then(res => {
-      wx.showToast({
-        title: '保存成功',
-        duration: 2000
-      });
-      setTimeout(function() {
-        wx.navigateBack({
-          delta: 1,
-        })
-      }, 2000);
-
-    }, err => {
-
-    })
-  }
-})
--- a/pages/register/index.json
+++ b/pages/register/index.json
@@ -1,6 +0,0 @@
-{
-    "usingComponents": {
-      "action-sheet": "/component/actionSheet/actionSheet",
-      "header": "/component/header/header"
-    }
-}
--- a/pages/register/index.wxml
+++ b/pages/register/index.wxml
@@ -1,46 +0,0 @@
-<!--pages/register/index.wxml-->
-<header isHistory="{{true}}" isLogin="{{changeFrom.codeType != 3}}"></header>
-<view class='container'>
-<!-- 输入手机号 -->
-  <view class='{{isFocus == "phone" ? "input-box isActive" : "input-box"}}' wx:if="{{changeFrom.label == 'phone' || changeFrom.codeType != 3}}">
-    <input value="{{changeFrom.value}}" placeholder='输入手机号' placeholder-class='placeholder' maxlength="11" bindfocus="inputFocus" bindblur='inputBlur' bindinput='inputChange' data-type='phone'></input>
-  </view>
-  <!-- 输入验证码 -->
-  <view class='{{isFocus == "code" ? "input-box isActive" : "input-box"}}' wx:if="{{changeFrom.label == 'phone' || changeFrom.codeType != 3}}">
-    <input placeholder='输入验证码' placeholder-class='placeholder' bindfocus='inputFocus' bindblur='inputBlur' bindinput='inputChange' data-type='code'></input>
-    <button bindtap='getCode'>{{code}}</button>
-  </view>
-  <!-- 姓名 -->
-  <view value="{{changeFrom.value}}" class='{{isFocus == "name" ? "input-box isActive" : "input-box"}}' wx:if="{{changeFrom.label == 'name' && changeFrom.codeType == 3}}">
-    <input value='{{changeFrom.value}}' placeholder='输入姓名(选填)' placeholder-class='placeholder' bindfocus="inputFocus" bindblur='inputBlur' bindinput='inputChange' maxlength='8' data-type='name'></input>
-  </view>
-  <!-- 性别 -->
-  <view class='{{isFocus == "sex" ? "input-box isActive" : "input-box"}}' bindtap='changeSex' wx:if="{{changeFrom.label == 'sex' && changeFrom.codeType == 3}}">
-    <text wx:if="{{sexLabel == '选择性别(选填)'}}">{{sexLabel}}</text>
-    <text style='color: #FFF' wx:else>{{sexLabel}}</text>
-    <image src='../../images/46@3x.png'></image>
-  </view>
-  <!-- 年龄 -->
-  <view class='{{isFocus == "age" ? "input-box isActive" : "input-box"}}' wx:if="{{changeFrom.label == 'age' && changeFrom.codeType == 3}}">
-    <input value="{{changeFrom.value}}" placeholder='年龄(选填)' placeholder-class='placeholder' type='number' bindfocus="inputFocus" bindblur='inputBlur' bindinput='inputChange' data-type='age'></input>
-  </view>
-  <!-- 地址 -->
-  <view class='{{isFocus == "address" ? "input-box isActive" : "input-box"}}' wx:if="{{changeFrom.label == 'address' && changeFrom.codeType == 3}}">
-    <input value="{{changeFrom.value}}" placeholder='居住地(选填)' placeholder-class='placeholder' bindfocus="inputFocus" bindblur='inputBlur' bindinput='inputChange' data-type='address'></input>
-  </view>
-
-    <!-- 昵称 -->
-  <view class='{{isFocus == "nickname" ? "input-box isActive" : "input-box"}}' wx:if="{{changeFrom.label == 'nickname' && changeFrom.codeType == 3}}">
-    <input value="{{changeFrom.value}}" placeholder='昵称(选填)' placeholder-class='placeholder' bindfocus="inputFocus" bindblur='inputBlur' bindinput='inputChange' maxlength='8' data-type='nickname'></input>
-  </view>
-
-  <!-- <button class='register-btn' open-type='getUserInfo' bindgetuserinfo='registerClick' wx:if="{{isShowAuthBtn}}">注册</button> -->
-  <button class='register-btn' bindtap='registerClick' wx:if="{{changeFrom.codeType != 3}}">完成</button>
-  <button class='register-btn' bindtap='saveClick' wx:if="{{changeFrom.codeType == 3}}">保存</button>
-</view>
-
-<!-- <view class='sex-popup-box'>
-  <view class='sex-popup-body'></view>
-</view> -->
-
-<action-sheet value="{{ageList}}" bindcancel="cancelSex" bindselected="selectedSex" wx:if="{{isShowSexPopup}}"></action-sheet>
--- a/pages/register/index.wxss
+++ b/pages/register/index.wxss
@@ -1,67 +0,0 @@
-/* pages/register/index.wxss */
-page {
-  position: relative;
-}
-
-.container {
-  min-height: calc(100vh - 230rpx);
-  padding: 230rpx 124rpx 0 124rpx;
-}
-
-.input-box {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-top: 30rpx;
-  border-bottom: 2rpx solid #3f3e49;
-}
-
-.input-box>input {
-  /* flex: 1; */
-  margin: 20rpx 0;
-  font-size: 24rpx;
-  font-weight: bold;
-  color: #fff;
-}
-
-.input-box>text {
-  margin: 30rpx 0;
-  color: rgba(255, 255, 255, 0.6);
-  font-size: 24rpx;
-}
-
-.input-box>image {
-  width: 12rpx;
-  height: 22rpx;
-}
-
-.input-box.isActive {
-  border-bottom: 2rpx solid #6e602f;
-}
-
-.input-box .placeholder {
-  color: rgba(255, 255, 255, 0.6);
-}
-
-.input-box>button {
-  padding: 0;
-  width: 200rpx;
-  background: none;
-  font-size: 24rpx;
-  color: rgba(255, 255, 255, 0.6);
-  text-align: center;
-}
-
-.input-box>button::after {
-  border: none;
-}
-
-.register-btn {
-  margin-top: 200rpx;
-  height: 80rpx;
-  border-radius: 40rpx;
-  background: #ffda2e;
-  color: #252330;
-  font-size: 26rpx;
-  line-height: 80rpx;
-}
--- a/pages/userInfo/index.js
+++ b/pages/userInfo/index.js
@@ -71,29 +71,53 @@ Page({
  },

  // 切换头像 
-  changeAvatar() {
+  onChooseAvatar(e) {
    let that = this;
-    wx.chooseImage({
-      count: 1,
-      success: function (e) {
+    const { avatarUrl } = e.detail;
+    if (!avatarUrl) return;
+
    wx.showLoading({
      title: '正在上传...',
      mask: true,
    })
    app.$api.uploadAvatar({
-          filePath: e.tempFilePaths[0]
+      filePath: avatarUrl
    }).then(res => {
      wx.showToast({
        title: '上传成功',
        icon: 'success',
      })
      that.getData();
-        }, err => {});
+    }, err => {
+      wx.hideLoading();
+    });
  },
-      fail: function (res) {
-        console.log(res);
-      },
-    })
+
+  // 修改昵称
+  onNicknameChange(e) {
+    let newName = e.detail.value;
+    // 防止重复触发
+    if (!newName || newName === this.data.members.nickname) return;
+    
+    // 乐观反显更新
+    this.setData({
+      'members.nickname': newName
+    });
+
+    wx.showLoading({ title: '保存中...', mask: true });
+    app.$api.memberUpdateInformation({
+      nickname: newName
+    }).then(res => {
+      wx.hideLoading();
+      wx.showToast({
+        title: '修改成功',
+        icon: 'success',
+      });
+      // 这里的静默获取能确保和数据库端同步
+      this.getData();
+    }, err => {
+      wx.hideLoading();
+    });
  },

  // 修改性别
@@ -153,14 +177,34 @@ Page({
    })
  },

-  // 修改信息
-  changeMessage(e) {
-    let label = e.currentTarget.dataset.label;
-    let value = e.currentTarget.dataset.value ? e.currentTarget.dataset.value : "";
-    wx.removeStorageSync('history');
-    wx.navigateTo({
-      url: `/pages/register/index?label=${label}&value=${value}&codeType=3`,
-    })
+  // 在当前页直接修改文本类别的信息（姓名、年龄、地址）
+  onInfoChange(e) {
+    let type = e.currentTarget.dataset.type;
+    let newValue = e.detail.value;
+
+    if (newValue === undefined || newValue === this.data.members[type]) return;
+
+    let updateData = {};
+    updateData[type] = newValue;
+    
+    // 乐观反显
+    let key = 'members.' + type;
+    this.setData({
+      [key]: newValue
+    });
+
+    wx.showLoading({ title: '保存中...', mask: true });
+    app.$api.memberUpdateInformation(updateData).then(res => {
+      wx.hideLoading();
+      wx.showToast({
+        title: '修改成功',
+        icon: 'success',
+      });
+      // 静默获取同步服务器
+      this.getData();
+    }, err => {
+      wx.hideLoading();
+    });
  },

  // 获取数据
--- a/pages/userInfo/index.wxml
+++ b/pages/userInfo/index.wxml
@@ -3,46 +3,41 @@
 <view class='container' wx:if="{{members.nickname}}">
  <!-- 昵称信息 -->
  <view class='list'>
-    <view class='cell avatar' bindtap='changeAvatar'>
+    <button class='cell avatar cell-btn' open-type="chooseAvatar" bindchooseavatar="onChooseAvatar">
      <text class='title'>头像</text>
      <view class='right-cell'>
-        <image class='avatar-img' src='{{members.avatar ? members.avatar : "../../images/avatar.png"}}' mode='aspcetFill'></image>
+        <image class='avatar-img' src='{{members.avatar ? members.avatar : "../../images/avatar.png"}}' mode='aspectFill'></image>
        <image class='right-arrow' src='../../images/46@3x.png'></image>
      </view>
-    </view>
-    <view class='cell' bindtap='changeMessage' data-label='nickname' data-value='{{members.nickname}}'>
+    </button>
+    <view class='cell'>
      <text class='title'>昵称</text>
-      <text class='message'>{{members.nickname}}</text>
-      <image class='right-arrow' src='../../images/46@3x.png'></image>
+      <input type="nickname" class='message nickname-input' placeholder="请输入昵称" value="{{members.nickname}}" bindblur="onNicknameChange" bindchange="onNicknameChange" bindconfirm="onNicknameChange" />
    </view>
-    <view class='cell unLine' bindtap='changeMessage' data-label='phone' data-value='{{members.mobile}}'>
+    <view class='cell unLine'>
      <text class='title'>手机号</text>
      <text class='message'>{{members.mobile}}</text>
-      <image class='right-arrow' src='../../images/46@3x.png'></image>
    </view>
  </view>

  <!-- 真实信息 -->
  <view class='list'>
-    <view class='cell'  bindtap='changeMessage' data-label='name' data-value='{{members.name}}'>
+    <view class='cell'>
      <text class='title'>姓名</text>
-      <text class='message'>{{members.name}}</text>
-      <image class='right-arrow' src='../../images/46@3x.png'></image>
+      <input class='message nickname-input' placeholder="请输入姓名" value="{{members.name}}" data-type="name" bindblur="onInfoChange" bindconfirm="onInfoChange" />
    </view>
    <view class='cell' bindtap='changeSex' >
      <text class='title'>性别</text>
      <text class='message'>{{members.sex == 0 ? "男" : (members.sex == 1 ? "女" : "")}}</text>
      <image class='right-arrow' src='../../images/46@3x.png'></image>
    </view>
-    <view class='cell'  bindtap='changeMessage' data-label='age' data-value='{{members.age}}'>
+    <view class='cell'>
      <text class='title'>年龄</text>
-      <text class='message'>{{members.age}}</text>
-      <image class='right-arrow' src='../../images/46@3x.png'></image>
+      <input type="number" class='message nickname-input' placeholder="请输入年龄" value="{{members.age}}" data-type="age" bindblur="onInfoChange" bindconfirm="onInfoChange" />
    </view>
-    <view class='cell unLine address'  bindtap='changeMessage' data-label='address' data-value='{{members.address}}'>
+    <view class='cell unLine address'>
      <text class='title'>地址</text>
-      <text class='message'>{{members.address}}</text>
-      <image class='right-arrow' src='../../images/46@3x.png'></image>
+      <input class='message nickname-input' placeholder="请输入地址" value="{{members.address}}" data-type="address" bindblur="onInfoChange" bindconfirm="onInfoChange" />
    </view>
  </view>
 </view>
--- a/pages/userInfo/index.wxss
+++ b/pages/userInfo/index.wxss
@@ -24,6 +24,19 @@
  height: 120rpx;
 }

+.list .cell-btn {
+  background: transparent;
+  padding: 0 30rpx;
+  margin: 0;
+  width: 100%;
+  text-align: left;
+  line-height: normal;
+}
+
+.list .cell-btn::after {
+  border: none;
+}
+
 .list .cell.unLine {
  border-bottom: none;
 }
@@ -59,3 +72,8 @@
  font-size: 24rpx;
  line-height: 30rpx;
 }
+
+.list .cell .nickname-input {
+  text-align: right;
+  width: 100%;
+}