首页 > 小程序教程 > 微信小程序酒业商城个人信息我的资料展示页面设计制作开发教程

微信小程序酒业商城个人信息我的资料展示页面设计制作开发教程

上一篇 下一篇
本文给大家带来的是微信小程序酒业商城个人信息我的资料展示页面设计制作开发教程,制作好以后效果图如下:
一、wxml页面代码如下:
<!--pages/mine/information.wxml-->
<view class="container">
     <view class="userInfo bg-color-white">
      <view class="userInfo-hd">
          <text class="font-color-333 font-size-18">我的登录信息</text>
          <text class="font-color-999">由微信授权登录</text>
      </view>
         <view class="userInfo-bd font-size-18">{{userInfo.nickName}}</view>
         <image class="avatarsize" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
     </view>
     <view class="hd-title font-color-999">
         以下请务必填写真实信息,负责将影响资金结算
     </view>
     <view class="listgroup" style="margin-top:0;">
           <navigator url="enterInput?type=name&name={{user.name}}" class="view-list arrow-right line-before-bottom " hover-class="weui-cell_active">
              <view class="list__hd">
                    <view class="weui-label font-color-666">真实姓名</view>
            </view>
            <view class="list__bd">
                 <view class="choose">{{user.name}}</view>
            </view>
           </navigator>
            <navigator url="enterInput?type=phone&phone={{user.phone}}" class="view-list arrow-right line-before-bottom" hover-class="weui-cell_active">
               <view class="list__hd">
                    <view class="weui-label font-color-666">手机号码</view>
                 </view>
            <view class="list__bd">
               <view class="choose">{{user.phone}}</view>
            </view>
           </navigator>
          <view  class="view-list arrow-right  line-before-bottom" >
                 <view class="list__hd">
                    <view class="weui-label font-color-666">客户性别</view>
            </view>
            <view class="list__bd ">
                <view class="weui-cell__bd">
                    <picker bindchange="bindSexChange" value="{{sexIndex}}" range="{{sexs}}">
                        <view class=" choose">{{user.sex || sexs[sexIndex]}}</view>
                    </picker>
                </view> 
               
            </view>
           </view>
            <view class="view-list arrow-right" >
            <view class="list__hd">
                    <view class="weui-label font-color-666">客户年龄</view>
            </view>
            <view class="list__bd">                
              <view class="weui-cell__bd">
                    <picker bindchange="bindAgeChange" value="{{ageIndex}}" range="{{ages}}">
                       <view class="choose">{{user.age || ages[ageIndex]}}</view>
                    </picker>
                </view> 
            </view>
        </view>
     </view>
     <view class="listgroup">
           <navigator url="bankCard" class="view-list arrow-right" hover-class="weui-cell_active">
              <view class="list__hd">
                    <view class="weui-label font-color-666">结算银行卡</view>
            </view>
            <view class="list__bd">
                 <view class="choose">工商银行(2245)</view>
            </view>
           </navigator>
    </view>      
     <view class="listgroup">
           <navigator url="authentication" class="view-list arrow-right " hover-class="weui-cell_active">
              <view class="list__hd">
                    <view class="weui-label font-color-666">身份验证</view>
            </view>
            <view class="list__bd">
                 <view class="choose"><image class="icon" src="/assets/images/my_rz@2x.png"></image>已验证</view>
            </view>
           </navigator>
    </view>     
     <view class="butbox" style="margin:40rpx auto 30rpx; ">
             <view bindtap="backWind" class="but bg-color-c24e4e font-color-white">保存资料</view>
      </view>
</view>
 
二、wxss样式文件代码如下:
/* pages/mine/information.wxss */
@import '/assets/styles/view-input.wxss';
.userInfo {
    margin-top: 20rpx;
    padding: 0 40rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
    height: 210rpx;
}
.userInfo .avatarsize {
  width: 150rpx;
  height: 150rpx;
  border-radius: 50%;
  margin-left: 40rpx;
}
.userInfo-hd {
  display: flex;
  flex-direction: column;
}
.userInfo-bd {
  display: flex;
  flex: 1;
  justify-content: flex-end;
}

.listgroup{
    margin-top: 20rpx;
}
.view-list .choose{
    display: flex;
    justify-content: flex-end;
    font-size:36rpx;
}

.view-list .choose .icon{
    width:50rpx;
    height: 50rpx;
    margin-right: 20rpx;
}
三、js页面代码如下:
// pages/mine/information.js
const app=getApp();
Page({
  data:{
     sexs: ["男", "女"],
     sexIndex: null,
     ages:["20岁以下","20~30岁",'30~40岁','50~60岁','60岁以上'],
     ageIndex:null
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  app.getUserInfo((userInfo)=>{
      //更新数据
      this.setData({
        userInfo:userInfo,
        user:{
          name:'测试',
          phone:'13297090782',
          sex:'男',
          age:'20~30岁',
        }
      })
    })
     
    
  },
   bindSexChange(e) {
          console.log('picker account 发生选择改变,携带值为', e.detail.value);
          this.setData({
              "sexIndex": e.detail.value,
              "user.sex":this.data.sexs[e.detail.value]
          })
      },
  bindAgeChange (e) {
      this.setData({
          "ageIndex": e.detail.value,
           "user.age":this.data.ages[e.detail.value]
      });
  },
  backWind(){
     //关闭并返回 
     wx.navigateBack({
       delta: 1, // 回退前 delta(默认为1) 页面
       success: function(res){
         // success
       },
       fail: function() {
         // fail
       },
       complete: function() {
         // complete
       }
     })
  },
  changeData(data){
     let changetype=data.name || data.phone;
     if(data.name){
       this.setData({
         "user.name": changetype
       })
     }else{
        this.setData({
         "user.phone": changetype
       })

     }
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})

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

相关搜索
  • 下载密码 lanrenmb
  • 下载次数 22,755次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 07-18
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
微信模板 微信图片 微信公众平台 单页式简历模板 微信文章 企业网站 微信素材 html5 自适应 表格式简历模板
您可能会喜欢的其他模板