小程序用户和登录页面展示

用户页面wxml

 <!--pages/home/home.wxml-->

<view class="container">

  <view class="top-view">

    <view class="user">

      <view class="row">

        <image class="avatar" wx:if="{{userInfo}}" src="{{userInfo.avatarUrl}}"></image>

        <image class="avatar" wx:else="{{userInfo}}" src="/static/2.png"></image>

        <!-- 点击跳转到登录注册页面 -->

        <view class="name" wx:if="{{userInfo}}">

          <view bindtap="onClickLogout">

            {{userInfo.nickName}}

          </view>

        </view>

        <view class="name" wx:else="{{userInfo}}">

          <navigator url="/pages/auth/auth">登录</navigator>

          |

          <navigator url="/pages/auth/auth">注册 </navigator>

        </view>



      </view>

      <view class="site">查看个人主页</view>

    </view>



    <view class="numbers">

      <view class="row">

        <text>0</text>

        <text>关注</text>

      </view>

      <view class="row">

        <text>0</text>

        <text>粉丝</text>

      </view>

      <view class="row">

        <text>0</text>

        <text>赞与收藏</text>

      </view>

      <view class="row">

        <text>0</text>

        <text>好友动态</text>

      </view>

    </view>



  </view>



  <view class="middle-view">

    <view class="item">

      <image src="/static/images/icon/transaction_order1_icon_show.png"></image>

      <text>待支付</text>

    </view>

    <view class="item">

      <image src="/static/images/icon/transaction_order2_icon_show.png"></image>

      <text>待支付</text>

    </view>

    <view class="item">

      <image src="/static/images/icon/transaction_order3_icon_show.png"></image>

      <text>待支付</text>

    </view>

    <view class="item">

      <image src="/static/images/icon/transaction_order4_icon_show.png"></image>

      <text>待支付</text>

    </view>

    <view class="item">

      <image src="/static/images/icon/transaction_order5_icon_show.png"></image>

      <text>待支付</text>

    </view>

  </view>

  <view class="function-view">

    <view class="row">

      <view class="left">我的钱包</view>

      <view class="right">

        <text>¥20</text>

        <image class="go-icon" src='/static/images/icon/to_icon_show_small.png'></image>

      </view>

    </view>

    <view class="row">

      <view class="left">我的优惠券</view>

      <view class="right">

        <text>暂无课用</text>

        <image class="go-icon" src='/static/images/icon/to_icon_show_small.png'></image>

      </view>

    </view>

    <view class="row">

      <view class="left">领劵中心</view>

      <view class="right">

        <text>你的福利都在这里</text>

        <image class="go-icon" src='/static/images/icon/to_icon_show_small.png'></image>

      </view>

    </view>

  </view>

  <view class="contact-view">

    <button open-type="contact">

      <image src="/static/images/icon/wechat_contact_icon_show.png"></image>

    </button>

    <button bindtap="onClickCall">

      <image src="/static/images/icon/phone_contact_icon_show.png"></image>

    </button>

  </view>

</view>

用户页面js

 // pages/home/home.js



var app = getApp();



Page({



  /**

   * 页面的初始数据

   */

  data: {

    userInfo: null,

  },



  /**

   * 生命周期函数--监听页面加载(第一次打开时会执行)

   */

  onLoad: function (options) {



  },



  /**

   * 生命周期函数--监听页面初次渲染完成（第一次打开时会执行）

   */

  onReady: function () {



  },



  /**

   * 生命周期函数--监听页面显示

   */

  onShow: function () {

    //本地storage中获取值

    // var phone = wx.getStorageSync('phone')

    // this.setData({

    //   phone:phone

    // })

    //从全局变量中获取值

    this.setData({

      // phone:app.globalData.phone

      userInfo: app.globalData.userInfo

    }) 

  },

   /**

   * 用户注销

   */

  onClickLogout:function(){

    app.delUserInfo();

    this.setData({

      userInfo: null

    })

  },



  /**

   * 生命周期函数--监听页面隐藏

   */

  onHide: function () {



  },



  /**

   * 生命周期函数--监听页面卸载

   */

  onUnload: function () {



  },



  /**

   * 页面相关事件处理函数--监听用户下拉动作

   */

  onPullDownRefresh: function () {



  },



  /**

   * 页面上拉触底事件的处理函数

   */

  onReachBottom: function () {



  },



  /**

   * 用户点击右上角分享

   */

  onShareAppMessage: function () {



  }

})

用户页面css

 /* pages/home/home.wxss */



.top-view{

  background-color: #01ccb6;



  color: white;

  padding: 40rpx;

}



.top-view .user{

  display: flex;

  flex-direction: row;

  justify-content: space-between;

  align-items: center;

}

.top-view .user .row{

  display: flex;

  flex-direction: row;

  justify-content: flex-start;

  align-items: center;

}

.top-view .user .avatar{

  width: 100rpx;

  height: 100rpx;

  border-radius: 50%;

}



.top-view .user .name{

  display: flex;

  flex-direction: row;

  justify-content: space-around;

  width: 200rpx;

}



.top-view .site{

  background-color: rgba(0, 0, 0, 0.16);

  padding: 20rpx;

  border-top-left-radius: 32rpx;

  border-bottom-left-radius: 32rpx;

}



.top-view .numbers{

  display: flex;

  flex-direction: row;

  justify-content: space-between;

  font-size: 28rpx;

  padding: 40rpx;

  padding-bottom: 0rpx;

}



.top-view .numbers .row{

   display: flex;

  flex-direction: column;

  align-items: center;

}





.middle-view{

  padding: 40rpx;

  display: flex;

  flex-direction: row;

  justify-content: space-between;

  font-size: 25rpx;

  border-bottom: 18rpx solid #f5f5f5;

}



.middle-view .item{

  display: flex;

  flex-direction: column;

  align-items: center;

}



.middle-view .item image{

  width: 50rpx;

  height: 50rpx;

  margin-bottom: 20rpx;

}



.function-view{

  padding: 40rpx;

  font-size: 28rpx;

}



.function-view .row{

  padding: 30rpx 0;

  border-bottom: 1px solid #efefef;

  

  display: flex;

  flex-direction: row;

  justify-content: space-between;

}



.function-view .row .right{

  color: #8c8c8c;

}

.function-view .row .go-icon{

  margin: 0 20rpx;

  width: 16rpx;

  height: 16rpx;

}





.contact-view{

  padding: 40rpx;

  display: flex;

  flex-direction: row;

  justify-content: space-around;

}



.contact-view button {

  background-color: transparent;

  border: 0;

  padding: 0;

}

.contact-view button::after{

  border: 0;

}

.contact-view  image{

  width: 204rpx;

  height: 66rpx;

}

登录注册页wxml

 <!--pages/auth/auth.wxml-->



<view class="logo">

  <image src='/static/2.png'></image>

  <text>交流交易社区</text>

</view>



<view class="form">

  <view class="row-group">

    <text>手机</text>

    <!-- value属性是后端对于前端的绑定，bindinput的前端变化时后端数据也会相应变化 -->

    <input placeholder="请填写手机号码" placeholder-class='txt' maxlength='11' value="{{phone}}" bindinput="bindPhoneInput" />

  </view>

   <view class="row-group">

    <text>验证码</text>

    <input placeholder="请填写验证码" placeholder-class='txt' maxlength='4' value="{{code}}" bindinput="bindCodeInput" />

    <view class="code" bindtap="onClickCheckCode">获取验证码</view>

  </view>



  <view>

    <button class="submit"  open-type="getUserInfo" bindgetuserinfo="onClickSubmit">登录 | 注册</button>

  </view>

</view>

登录注册页js

 // pages/auth/auth.js

var app = getApp()



Page({



  /**

   * 页面的初始数据

   */

  data: {

    phone: "15822539779",

    code: "",

  },

  bindPhoneInput: function (e) {

    this.setData({

      phone: e.detail.value

    });

  },

  bindCodeInput: function (e) {

    this.setData({

      code: e.detail.value

    });

  },



  /** 

   * 点击获取短信验证码

   */

  onClickCheckCode: function (e) {

    // 判断手机号格式是否正确

    if (this.data.phone.length == 0) {

      wx.showToast({

        title: '请填写手机号码',

        icon: 'none'

      })

      return

    }

    var reg = /^(1[3|4|5|6|7|8|9])\d{9}$/;

    if (!reg.test(this.data.phone)) {

      wx.showToast({

        title: '手机格式错误',

        icon: 'none'

      })

      return

    }

    // 发送短信验证码，登录成功之后获取jwt和微信用户信息，保存到globalData和本地存储中。

    wx.request({

      url: "http://127.0.0.1:8000/api/message/",

      data: {

        phone: this.data.phone

      },

      method: 'GET',

      dataType: 'json',

      success: function (res) {

        // 根据后端发送的status判断是否发送成功

        if (res.data.status) {

          // 提示验证码倒计时或者提示发送成功

          wx.showToast({

            title: res.data.message,

            icon: 'none'

          });

        } else {

          // 短信发送失败

          wx.showToast({

            title: res.data.message,

            icon: 'none'

          });

        }

      }

    })

  },

  onClickSubmit(e) {

    console.log(e)

    wx.request({

      url: "http://127.0.0.1:8000/api/login/",

      data: {

        phone: this.data.phone,

        code: this.data.code

      },

      method: 'POST',

      dataType: 'json',

      success: function (res) {

        // 根据status状态判断是否成功

        if (res.data.status) {

          // 1.可以将手机号放到公共的位置，比如app.js里，方便别的页面进行获取

          // app.globalData.phone = res.data.data.phone

          // 2.上述方法是将值存在变量里的，一重启就没有了，我们也可以将值保存在cookie中

          // wx.setStorageSync('phone', res.data.data.phone)

          // 3.将上述两种存储优化一下，在全局的app中定义一个initUserInfo方法，将用户初始化的信息（电话和token）传入该函数，然后上面1和2两部就可以放到该函数内执行了

          // 4.优化，我们还可以将wx的用户信息也初始化到initUserInfo函数内

          app.initUserInfo(res.data.data, e.detail.userInfo)





          // 登录成功之后，自动跳转到上一级页面

          //getCurrentPages方法是记录程序的页面，包括上一页信息，下一页信息等，pages是一个列表，最后一个是元素是当前页面，前一个元素是上一页

          // var pages = getCurrentPages()

          // console.log(pages)

          // 得到上一页

          // prepage  = pages[pages.length-2]

          // 使用该方法就可以之前跳转到登录之前的上一页

          wx.navigateBack({})

        } else {

          wx.showToast({

            title: "登录失败",

            icon: 'none'

          });

        }

      }

    })

  },

  /** 

   * 生命周期函数--监听页面加载

   */

  onLoad(options) {



  },



  /**

   * 生命周期函数--监听页面初次渲染完成

   */

  onReady() {



  },



  /**

   * 生命周期函数--监听页面显示

   */

  onShow() {



  },



  /**

   * 生命周期函数--监听页面隐藏

   */

  onHide() {



  },



  /**

   * 生命周期函数--监听页面卸载

   */

  onUnload() {



  },



  /**

   * 页面相关事件处理函数--监听用户下拉动作

   */

  onPullDownRefresh() {



  },



  /**

   * 页面上拉触底事件的处理函数

   */

  onReachBottom() {



  },



  /**

   * 用户点击右上角分享

   */

  onShareAppMessage() {



  }

})

登录注册页css

 /* pages/auth/auth.wxss */





.logo{

  display: flex;

  flex-direction: column;

  align-items: center;

}



.logo image {

  margin-top: 140rpx;

  width: 216rpx;

  height: 100rpx;

}



.logo text {

  margin-top: 26rpx;

  margin-bottom: 50rpx;

  font-size: 24rpx;

  line-height: 24rpx;

  font-weight: 400;

  color: #8c8c8c;

  text-align: center;

}



.form{

  padding: 40rpx;

}



.form .row-group{

  padding: 20rpx 0;

  border-bottom: 1rpx solid #ddd;

  position: relative;

}



.form .row-group text{

  font-size: 28rpx;

  padding:10rpx 0;

}



.form .row-group input{

  padding: 10rpx 0;

}



.form .row-group .txt{

  color: #ccc;

}



.form .row-group .code{

  position: absolute;

  right: 0;

  bottom: 26rpx;

  z-index: 2;



  width: 206rpx;

  height: 60rpx;

  border: 2rpx solid #00c8b6;

  border-radius: 12rpx;

  font-size: 26rpx;

  font-weight: 400;

  color: #00c8b6;

  display: flex;

  align-items: center;

  justify-content: center;

}



.form .submit{

  margin-top: 80rpx;

  color: #fff;

  border: 2rpx solid #00c8b6;

  background-color: #00c8b6;

  font-size: 32rpx;

  font-weight: bold;

}

小程序用户和登录页面展示

用户页面wxml

用户页面js

用户页面css

登录注册页wxml

登录注册页js

登录注册页css

添加新评论

最新文章

分类

最近回复

归档

其它