微信小程序个人详细信息设置保存样式模板制作设计下载

今天给大家带来个人详细信息设置保存，制作好以后效果图如下：

一、wxml页面代码如下：

<import src="../common/head.wxml"/>
<import src="../common/foot.wxml"/>

<view class="container">
  

  <form class="page-body" bindsubmit="submitForm" report-submit="true">
    <view class="center-class">
      <block>
        <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}"></image>
        <text class="userinfo-nickname">{{userInfo.nickName}}</text>
      </block>
    </view>

    <view class="weui-cells weui-cells_after-title">
      <view class="weui-cell weui-cell_input">
        <view class="weui-cell__hd">
          <view class="weui-label">学院</view>
        </view>
        <view class="weui-cell__bd">
          <input class="weui-input" type="text" disabled="{{true}}" value="{{myUserInfo.userCollege}}" name="address"></input>
        </view>
      </view>
      <view class="weui-cell weui-cell_input">
        <view class="weui-cell__hd">
          <view class="weui-label">方向</view>
        </view>
        <view class="weui-cell__bd">
          <input class="weui-input" type="text" disabled="{{true}}" value="{{myUserInfo.userProfession}}" name="time"></input>
        </view>
      </view>
      <view class="weui-cell weui-cell_input">
        <view class="weui-cell__hd">
          <view class="weui-label">姓名</view>
        </view>
        <view class="weui-cell__bd">
          <input class="weui-input" type="text" disabled="{{true}}" value="{{myUserInfo.userName}}" name="time"></input>
        </view>
      </view>
      <view class="weui-cell weui-cell_input">
        <view class="weui-cell__hd">
          <view class="weui-label">学号</view>
        </view>
        <view class="weui-cell__bd">
          <input class="weui-input" type="text" disabled="{{true}}" value="{{myUserInfo.userStudentId}}" name="time"></input>
        </view>
      </view>
      <view class="weui-cell weui-cell_input">
        <view class="weui-cell__hd">
          <view class="weui-label">手机号</view>
        </view>
        <view class="weui-cell__bd">
          <input class="weui-input" type="text" disabled="{{true}}" value="{{myUserInfo.userMobile}}" name="time"></input>
        </view>
      </view>
    </view>
    <view class="btn-area">
      <button type="primary" size="40" formType="submit" loading="{{loading}}">保存</button>
    </view>
  </form>

</view>

二、wxss样式文件代码如下：

@import "../common/lib/weui.wxss";
.userinfo-avatar {
  border-radius: 128rpx;
  width: 128rpx;
  height: 128rpx;
  margin-top: 150rpx;
}
.userinfo-nickname {
  font-size: 38rpx;
}
.center-class {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0 50rpx;
  box-sizing: border-box;
  margin-bottom: 15rpx;
}

三、js页面代码如下：


var app = getApp()

Page({
  data: {
    myUserInfo: null,
    hasLogin: false
  },

  updateUserInfo: function(myUserInfo) {
    this.setData({
      myUserInfo: myUserInfo
    })
  },

  onLoad: function() {
    this.getUserInfo();
    app.getUserInfo(this.updateUserInfo);
    this.setData({
      hasLogin: app.globalData.hasLogin
    })
    this.getUserInfo();
  },
  onShow: function() {
    this.getUserInfo();
    app.getUserInfo(this.updateUserInfo);
    this.setData({
      hasLogin: app.globalData.hasLogin
    })
    this.getUserInfo();
  },

  // get the user info 
  getUserInfo: function () {
    var that = this

    if (app.globalData.hasLogin === false) {
      wx.login({
        success: _getUserInfo
      })
    } else {
      _getUserInfo()
    }

    function _getUserInfo() {
      wx.getUserInfo({
        success: function (res) {
          that.setData({
            hasUserInfo: true,
            userInfo: res.userInfo
          })
          that.update()
        }
      })
    }
  },

  submitForm: function(e) {
    var self = this
    var form_id = e.detail.formId
    var formData = e.detail.value

    console.log('form_id is:', form_id)

    self.setData({
      loading: true
    })

    app.getUserOpenId(function(err, openid) {
      if (!err) {
        wx.request({
          url: templateMessageUrl,
          method: 'POST',
          data: {
            form_id,
            openid,
            formData
          },
          success: function(res) {
            console.log('submit form success', res)
            wx.showToast({
              title: '发送成功',
              icon: 'success'
            })
            self.setData({
              loading: false
            })
          },
          fail: function({errMsg}) {
            console.log('submit form fail, errMsg is:', errMsg)
          }
        })
      } else {
        console.log('err:', err)
      }
    })
  }
})

模板简介：该模板名称为【微信小程序个人详细信息设置保存样式模板制作设计下载】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。