【微信小程序-原生开发】TDesign 实战模板——个人信息编辑页

效果预览

技术要点

• TDesign 表单组件的使用，详见官方文档
  https://tdesign.tencent.com/miniprogram/components/input

完整代码实现

<t-cell bindtap="editInfo" title="{{userInfo.nickname}}" description="{{userInfo.slogan || '诚挚缘分，成就梦想'}}" arrow>
  <view class="avatar" slot="left-icon">
    <t-avatar image="{{userInfo.avatarUrl}}" icon="user" />
  </view>
</t-cell>

editInfo: function () {
    wx.navigateTo({
      url: '/pages/me/infoForm/index'
    })
  },

个人信息编辑页

pages\me\infoForm\index.wxml

<t-input bindclear="inputChange" bindchange="inputChange" data-prop='nickname' clearable value="{{userInfo.nickname}}" label="昵称：" placeholder="请输入" />

<radio-group class="radioBox" bindchange="inputChange" data-prop='gender'>
  <radio color='#027CBE' checked="{{userInfo.gender === '1'}}" value='1'>男</radio>
  <radio color='pink' checked="{{userInfo.gender === '2'}}" value='2'>女</radio>
</radio-group>

<t-input bindclear="inputChange" bindchange="inputChange" data-prop='status' clearable value="{{userInfo.status}}" label="近况：" placeholder="请输入当前状态/正在忙的事情" />

<t-input bindclear="inputChange" bindchange="inputChange" data-prop='phone' clearable value="{{userInfo.phone}}" label="手机：" placeholder="请输入手机号" />

<t-input bindclear="inputChange" bindchange="inputChange" data-prop='wechatNo' clearable value="{{userInfo.wechatNo}}" label="微信：" placeholder="请输入微信号" />

<t-input bindclear="inputChange" bindchange="inputChange" data-prop='email' clearable value="{{userInfo.email}}" label="邮箱：" placeholder="请输入电子邮箱" />

<t-input bindclear="inputChange" bindchange="inputChange" data-prop='slogan' clearable value="{{userInfo.slogan}}" label="格言：" placeholder="请输入" />

<t-input bindclear="inputChange" bindchange="inputChange" data-prop='dream' clearable value="{{userInfo.dream}}" label="梦想：" placeholder="请输入" />

<t-input bindclear="inputChange" bindchange="inputChange" data-prop='hobby' clearable value="{{userInfo.hobby}}" label="爱好：" placeholder="请输入" />

<t-input bindclear="inputChange" bindchange="inputChange" data-prop='skill' clearable value="{{userInfo.skill}}" label="擅长：" placeholder="请输入" />

<t-input disabled bindtap="searchPlace" value="{{placeInfo.title}}" label="住址：" placeholder="请选择">
  <t-icon capture-catch:tap="getLocation" slot="suffix" size='26' name="location" />
</t-input>

<t-textarea bindchange="inputChange" data-prop='brief' value="{{userInfo.brief}}" label="个人简介：" placeholder="请输入" maxlength="200" disableDefaultPadding="{{true}}" indicator t-class="textareaClass" />

<t-button bindtap="save" theme="primary" size="large" block t-class="fixedBottomBtn">保存</t-button>

pages\me\infoForm\index.json

{
  "navigationBarTitleText": "修改个人信息",
  "usingComponents": {
    "t-input": "tdesign-miniprogram/input/input",
    "t-button": "tdesign-miniprogram/button/button",
    "t-icon": "tdesign-miniprogram/icon/icon",
    "t-textarea": "tdesign-miniprogram/textarea/textarea"
  }
}

pages\me\infoForm\index.js

Page({
  data: {
    userInfo: {}, // 用户信息
    placeInfo: null // 地址信息
  },
  // 生命周期-页面加载时，获取当前用户信息
  onLoad() {
    let userInfo = wx.getStorageSync('userInfo')
    this.setData({
      userInfo: userInfo,
      placeInfo: userInfo.placeInfo
    })
  },
  // 表单信息发生改变时，同步更新变量 userInfo
  inputChange: function (e) {
    let prop = e.currentTarget.dataset.prop
    let value = e.detail.value
    this.data.userInfo[prop] = value
    this.setData({
      userInfo: this.data.userInfo
    })
  },
  // 跳转到公用的地点搜索页，搜索地址（以便获取含经纬度的地址信息）
  searchPlace() {
    wx.navigateTo({
      url: '/pages/common/searchPlace/index'
    })
  },
  // 地图导航（地址信息中必须有经纬度）
  getLocation() {
    let placeInfo = this.data.placeInfo
    if (!placeInfo) {
      this.searchPlace()
      return
    }
    wx.openLocation({
      address: placeInfo.title,
      name: placeInfo.title,
      longitude: +placeInfo.longitude,
      latitude: +placeInfo.latitude,
      scale: 18
    })
  },
  // 保存更新用户信息
  save: function () {
    let nickname = this.data.userInfo.nickname
    if (!nickname) {
      wx.showToast({
        icon: 'none',
        title: "昵称不能为空",
      })
      return
    }

    let id = this.data.userInfo._id
    let placeInfo = this.data.placeInfo
    if (placeInfo) {
      this.setData({
        // 给对象的指定属性赋值
        'userInfo.placeInfo': placeInfo
      })
    }

    // 对象深拷贝
    let newData = JSON.parse(JSON.stringify(this.data.userInfo))

    // 删除多余的表单字段
    delete newData._openid
    delete newData._id
    wx.cloud.database().collection('user').doc(id).update({
      data: {
        ...newData,
        updateTime: new Date()
      }
    }).then(
      res => {
        // 更新全局的用户信息
        wx.setStorageSync('userInfo', this.data.userInfo)
        wx.showToast({
          icon: "success",
          title: `保存成功`,
        })
        // 等待一会后跳转页面，否则无法看到保存成功的提示
        setTimeout(() => {
          wx.navigateBack()
        }, 1000)
      }
    )
  },
})

pages\me\infoForm\index.wxss

.fixedBottomBtn {
  background-color: #027CBE !important;
  border-radius: 0 !important;
  position: fixed !important;
  bottom: 0rpx;
  z-index: 999;
}

.radioBox {
  padding: 30rpx;
  display: flex;
  justify-content: space-around;
}

.textareaClass {
  height: 324rpx;
}

.t-textarea__label {
  font-size: 30rpx !important;
  padding-bottom: 30rpx !important;
}

/* 被禁用输入框,强制黑色 */
.t-input__control--disabled {
  color: black !important;
}