微信小程序黄色风格个人信息编辑页面模板样式制作设计教程

本文给大家带来的是微信小程序黄色风格个人信息编辑页面模板样式制作设计教程，制作好以后效果图如下：

一、wxml页面代码如下：

<view class="page" bindtap="closeErr">
<view class="weui-toptips weui-toptips_warn" wx:if="{{showTopTips}}">{{errorMsg}}</view>
 <!--页头-->
 <view class="page__hd">
  <view class="head">   
    <view><image src="{{userInfo.avatarUrl}}" bindtap="dateAvatar"></image></view>
  </view>
 </view>



<view class="form">
    <view class="page__bd">        
    <form bindsubmit="formSubmit" bindreset="formReset">
        <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" name="nickName" placeholder="请输入昵称" value="{{userInfo.nickName}}"/>
                </view>
            </view>
            <view class="weui-cell weui-cell_input weui-cell_vcode">
                <view class="weui-cell__hd">
                    <view class="weui-label">手机号</view>
                </view>
                <view class="weui-cell__bd">
                    <input class="weui-input" type="number" maxlength="11" name="phone" placeholder="请输入手机号" value="{{userInfo.phone}}" />
                </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">
                    <picker mode="selector" name="gender" value="{{userInfo.gender}}" range="{{sex}}" bindchange="selectsex">
                        <view class="weui-input">{{sex[userInfo.gender]}}</view>
                    </picker>
                </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">
                    <view class="weui-input" name="city"  bindtap="open">{{province}}-{{city}}-{{county}}</view>
                </view>
            </view>

        </view>
        <view class="weui-btn-area">
            <button class="weui-btn" type="primary" formType="submit" >确定</button>
        </view>
        </form>
    </view>
</view>

<view wx:if="{{condition}}" class="citypicker">
<picker-view indicator-style="height: 50px;" style="width: 100%; height: 300px;background:#fff" value="{{value}}" bindchange="bindChange" class="citybody">
    <view class="cityheader">
    <view bindtap="open" class="city-cancel">取消</view>
    <view bindtap="open" class="city-true">确定</view>
    </view>
    <picker-view-column>
    <view wx:for="{{provinces}}" wx:key="item" style="line-height: 50px;padding-left:10px;">{{item}}</view>
    </picker-view-column>
    <picker-view-column>
    <view wx:for="{{citys}}" wx:key="item" style="line-height: 50px;padding-left:10px;">{{item}}</view>
    </picker-view-column>
    <picker-view-column>
    <view wx:for="{{countys}}" wx:key="item" style="line-height: 50px;padding-left:10px;">{{item}}</view>
    </picker-view-column>
</picker-view>
</view>
 </view>

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

/* pages/my/info.wxss */
.head{display:flex;flex-direction: column;background: #efefef;width:100%;padding: 100rpx 0rpx; align-items: center;  justify-content: space-between;}
.head image{width:150rpx;height:150rpx;margin:0 auto;border-radius: 50%;}
.form .weui-cells{z-index: 0;}
.form .weui-input{overflow: hidden;}
.weui-btn{background: #f4de3b!important;color:#000!important;}

三、js页面代码如下：

//index.js
//获取应用实例
var app = getApp();

var util = require('../../utils/util.js');  
var tcity = require("../../utils/citys.js");

Page({
  data: {
    sex:['保密','男','女'],    
    provinces: [],
    province: "",
    citys: [],
    city: "",
    countys: [],
    county: '',
    value: [0, 0, 0],
    values: [0, 0, 0],
    condition: false
  },
   bindChange: function(e) {
    //console.log(e);
    var val = e.detail.value
    var t = this.data.values;
    var cityData = this.data.cityData;
    
    if(val[0] != t[0]){
      console.log('province no ');
      const citys = [];
      const countys = [];

      for (let i = 0 ; i < cityData[val[0]].sub.length; i++) {
        citys.push(cityData[val[0]].sub[i].name)
      }
      for (let i = 0 ; i < cityData[val[0]].sub[0].sub.length; i++) {
        countys.push(cityData[val[0]].sub[0].sub[i].name)
      }

      this.setData({
        province: this.data.provinces[val[0]],
        city: cityData[val[0]].sub[0].name,
        citys:citys,
        county: cityData[val[0]].sub[0].sub[0].name,
        countys:countys,
        values: val,
        value:[val[0],0,0],
      })
      
      return;
    }
    if(val[1] != t[1]){
      console.log('city no');
      const countys = [];

      for (let i = 0 ; i < cityData[val[0]].sub[val[1]].sub.length; i++) {
        countys.push(cityData[val[0]].sub[val[1]].sub[i].name)
      }
      
      this.setData({
        city: this.data.citys[val[1]],
        county: cityData[val[0]].sub[val[1]].sub[0].name,
        countys:countys,
        values: val,
        value:[val[0],val[1],0]
      })
      return;
    }
    if(val[2] != t[2]){
      console.log('county no');
      this.setData({
        county: this.data.countys[val[2]],
        values: val
      })
      return;
    }

  },
  closeErr:function(){ //关闭错误
    //util.clearError(this);
  },
  open:function(){
    this.setData({
      condition:!this.data.condition
    })
  },
  selectsex:function(e){
    this.setData({
        'userInfo.gender':e.detail.value
    })
  },
  dateAvatar:function(){
    var that = this;
    wx.chooseImage({
      count: 1, 
      success: function(res) {
        var tempFilePaths = res.tempFilePaths
        wx.uploadFile({
          url: 'https://xcx.codems.cn/api/upload', 
          filePath: tempFilePaths[0],
          name: 'file',
          formData:{
            'user': app.globalData.userInfo.id
          },
          success: function(res){
            var data = JSON.parse(res.data);
            console.log(data);
            if(data.status == 1){
              that.setData({
                'userInfo.avatarUrl':data.data
              })
              util.clearError(that);
            }else{
              console.log(data.msg);
              util.isError(data.msg, that);
            }
          },
          fail:function(){
            util.isError('上传失败', that);
          }
        })
      }
    })
  },
  formSubmit: function(e) {
    var that = this;
    if(!(/^1[34578]d{9}$/.test(e.detail.value.phone))){
      util.isError('手机号码错误', that);
      return false;
    }
    this.setData({
      'userInfo.province':this.data.province,
      'userInfo.city':this.data.city,
      'userInfo.county':this.data.county,
      'userInfo.nickName':e.detail.value.nickName,
      'userInfo.phone':e.detail.value.phone
    })
    wx.request({
      url: 'https://xcx.codems.cn/api/user/editUser',
      data: {
        'userInfo':that.data.userInfo,
        'sk':app.globalData.sk
      },
      method: 'POST', 
      header: {
        'Content-type':'application/json'
      },
      success: function(res){
        console.log(res);
        if(res.data.status == '1'){
          util.clearError(that);
          app.setUserInfo(res.data.user);
            wx.navigateBack({
              delta: 1
            })
        }else{
          util.isError(res.data.msg, that);
        }
      },
      fail: function(res) {
          util.isError('修改失败', that);
      }
    })
  },
  onLoad: function () {
    var that = this
    wx.getStorage({
      key: 'userInfo',
      success: function(res){
        that.setData({
          userInfo:res.data,
          gender:res.data.gender,
          'province':res.data.province,
          'city':res.data.city,
          'county':res.data.county
        })
      },
      fail: function(res) {
        app.login();
      }
    })
    //console.log(that.userInfo);
    tcity.init(that);

    var cityData = that.data.cityData;

    
    const provinces = [];
    const citys = [];
    const countys = [];

    for(let i=0;i<cityData.length;i++){
      provinces.push(cityData[i].name);
    }
    console.log('省份完成');
    for (let i = 0 ; i < cityData[0].sub.length; i++) {
      citys.push(cityData[0].sub[i].name)
    }
    console.log('city完成');
    for (let i = 0 ; i < cityData[0].sub[0].sub.length; i++) {
      countys.push(cityData[0].sub[0].sub[i].name)
    }

    that.setData({
      'provinces': provinces,
      'citys':citys,
      'countys':countys
    })
    console.log('初始化完成');
  }
})

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