ToB企服应用市场:ToB评测及商务社交产业平台

标题: 小程序用户和登录页面展示 [打印本页]
作者: 曹旭辉    时间: 2022-12-21 20:46
标题: 小程序用户和登录页面展示
用户页面wxml
  1. <view >
  2.   <view >
  3.     <view >
  4.       <view >
  5.         <image  wx:if="{{userInfo}}" src="{{userInfo.avatarUrl}}"></image>
  6.         <image  wx:else="{{userInfo}}" src="/static/2.png"></image>
  7.         
  8.         <view  wx:if="{{userInfo}}">
  9.           <view bindtap="onClickLogout">
  10.             {{userInfo.nickName}}
  11.           </view>
  12.         </view>
  13.         <view  wx:else="{{userInfo}}">
  14.           <navigator url="/pages/auth/auth">登录</navigator>
  15.           |
  16.           <navigator url="/pages/auth/auth">注册 </navigator>
  17.         </view>
  19.       </view>
  20.       <view >查看个人主页</view>
  21.     </view>
  23.     <view >
  24.       <view >
  25.         <text>0</text>
  26.         <text>关注</text>
  27.       </view>
  28.       <view >
  29.         <text>0</text>
  30.         <text>粉丝</text>
  31.       </view>
  32.       <view >
  33.         <text>0</text>
  34.         <text>赞与收藏</text>
  35.       </view>
  36.       <view >
  37.         <text>0</text>
  38.         <text>好友动态</text>
  39.       </view>
  40.     </view>
  42.   </view>
  44.   <view >
  45.     <view >
  46.       <image src="/static/images/icon/transaction_order1_icon_show.png"></image>
  47.       <text>待支付</text>
  48.     </view>
  49.     <view >
  50.       <image src="/static/images/icon/transaction_order2_icon_show.png"></image>
  51.       <text>待支付</text>
  52.     </view>
  53.     <view >
  54.       <image src="/static/images/icon/transaction_order3_icon_show.png"></image>
  55.       <text>待支付</text>
  56.     </view>
  57.     <view >
  58.       <image src="/static/images/icon/transaction_order4_icon_show.png"></image>
  59.       <text>待支付</text>
  60.     </view>
  61.     <view >
  62.       <image src="/static/images/icon/transaction_order5_icon_show.png"></image>
  63.       <text>待支付</text>
  64.     </view>
  65.   </view>
  66.   <view >
  67.     <view >
  68.       <view >我的钱包</view>
  69.       <view >
  70.         <text>¥20</text>
  71.         <image  src='/static/images/icon/to_icon_show_small.png'></image>
  72.       </view>
  73.     </view>
  74.     <view >
  75.       <view >我的优惠券</view>
  76.       <view >
  77.         <text>暂无课用</text>
  78.         <image  src='/static/images/icon/to_icon_show_small.png'></image>
  79.       </view>
  80.     </view>
  81.     <view >
  82.       <view >领劵中心</view>
  83.       <view >
  84.         <text>你的福利都在这里</text>
  85.         <image  src='/static/images/icon/to_icon_show_small.png'></image>
  86.       </view>
  87.     </view>
  88.   </view>
  89.   <view >
  90.     <button open-type="contact">
  91.       <image src="/static/images/icon/wechat_contact_icon_show.png"></image>
  92.     </button>
  93.     <button bindtap="onClickCall">
  94.       <image src="/static/images/icon/phone_contact_icon_show.png"></image>
  95.     </button>
  96.   </view>
  97. </view>
复制代码
用户页面js
  1. // pages/home/home.js
  3. var app = getApp();
  5. Page({
  7.   /**
  8.    * 页面的初始数据
  9.    */
  10.   data: {
  11.     userInfo: null,
  12.   },
  14.   /**
  15.    * 生命周期函数--监听页面加载(第一次打开时会执行)
  16.    */
  17.   onLoad: function (options) {
  19.   },
  21.   /**
  22.    * 生命周期函数--监听页面初次渲染完成（第一次打开时会执行）
  23.    */
  24.   onReady: function () {
  26.   },
  28.   /**
  29.    * 生命周期函数--监听页面显示
  30.    */
  31.   onShow: function () {
  32.     //本地storage中获取值
  33.     // var phone = wx.getStorageSync('phone')
  34.     // this.setData({
  35.     //   phone:phone
  36.     // })
  37.     //从全局变量中获取值
  38.     this.setData({
  39.       // phone:app.globalData.phone
  40.       userInfo: app.globalData.userInfo
  41.     })
  42.   },
  43.    /**
  44.    * 用户注销
  45.    */
  46.   onClickLogout:function(){
  47.     app.delUserInfo();
  48.     this.setData({
  49.       userInfo: null
  50.     })
  51.   },
  53.   /**
  54.    * 生命周期函数--监听页面隐藏
  55.    */
  56.   onHide: function () {
  58.   },
  60.   /**
  61.    * 生命周期函数--监听页面卸载
  62.    */
  63.   onUnload: function () {
  65.   },
  67.   /**
  68.    * 页面相关事件处理函数--监听用户下拉动作
  69.    */
  70.   onPullDownRefresh: function () {
  72.   },
  74.   /**
  75.    * 页面上拉触底事件的处理函数
  76.    */
  77.   onReachBottom: function () {
  79.   },
  81.   /**
  82.    * 用户点击右上角分享
  83.    */
  84.   onShareAppMessage: function () {
  86.   }
  87. })
复制代码
用户页面css
  1. /* pages/home/home.wxss */
  3. .top-view{
  4.   background-color: #01ccb6;
  6.   color: white;
  7.   padding: 40rpx;
  8. }
  10. .top-view .user{
  11.   display: flex;
  12.   flex-direction: row;
  13.   justify-content: space-between;
  14.   align-items: center;
  15. }
  16. .top-view .user .row{
  17.   display: flex;
  18.   flex-direction: row;
  19.   justify-content: flex-start;
  20.   align-items: center;
  21. }
  22. .top-view .user .avatar{
  23.   width: 100rpx;
  24.   height: 100rpx;
  25.   border-radius: 50%;
  26. }
  28. .top-view .user .name{
  29.   display: flex;
  30.   flex-direction: row;
  31.   justify-content: space-around;
  32.   width: 200rpx;
  33. }
  35. .top-view .site{
  36.   background-color: rgba(0, 0, 0, 0.16);
  37.   padding: 20rpx;
  38.   border-top-left-radius: 32rpx;
  39.   border-bottom-left-radius: 32rpx;
  40. }
  42. .top-view .numbers{
  43.   display: flex;
  44.   flex-direction: row;
  45.   justify-content: space-between;
  46.   font-size: 28rpx;
  47.   padding: 40rpx;
  48.   padding-bottom: 0rpx;
  49. }
  51. .top-view .numbers .row{
  52.    display: flex;
  53.   flex-direction: column;
  54.   align-items: center;
  55. }
  58. .middle-view{
  59.   padding: 40rpx;
  60.   display: flex;
  61.   flex-direction: row;
  62.   justify-content: space-between;
  63.   font-size: 25rpx;
  64.   border-bottom: 18rpx solid #f5f5f5;
  65. }
  67. .middle-view .item{
  68.   display: flex;
  69.   flex-direction: column;
  70.   align-items: center;
  71. }
  73. .middle-view .item image{
  74.   width: 50rpx;
  75.   height: 50rpx;
  76.   margin-bottom: 20rpx;
  77. }
  79. .function-view{
  80.   padding: 40rpx;
  81.   font-size: 28rpx;
  82. }
  84. .function-view .row{
  85.   padding: 30rpx 0;
  86.   border-bottom: 1px solid #efefef;
  87.   
  88.   display: flex;
  89.   flex-direction: row;
  90.   justify-content: space-between;
  91. }
  93. .function-view .row .right{
  94.   color: #8c8c8c;
  95. }
  96. .function-view .row .go-icon{
  97.   margin: 0 20rpx;
  98.   width: 16rpx;
  99.   height: 16rpx;
  100. }
  103. .contact-view{
  104.   padding: 40rpx;
  105.   display: flex;
  106.   flex-direction: row;
  107.   justify-content: space-around;
  108. }
  110. .contact-view button {
  111.   background-color: transparent;
  112.   border: 0;
  113.   padding: 0;
  114. }
  115. .contact-view button::after{
  116.   border: 0;
  117. }
  118. .contact-view  image{
  119.   width: 204rpx;
  120.   height: 66rpx;
  121. }
复制代码
登录注册页wxml
  1. <view >
  2.   <image src='/static/2.png'></image>
  3.   <text>交流交易社区</text>
  4. </view>
  6. <view >
  7.   <view >
  8.     <text>手机</text>
  9.    
  10.     <input placeholder="请填写手机号码" placeholder-class='txt' maxlength='11' value="{{phone}}" bindinput="bindPhoneInput" />
  11.   </view>
  12.    <view >
  13.     <text>验证码</text>
  14.     <input placeholder="请填写验证码" placeholder-class='txt' maxlength='4' value="{{code}}" bindinput="bindCodeInput" />
  15.     <view  bindtap="onClickCheckCode">获取验证码</view>
  16.   </view>
  18.   <view>
  19.     <button   open-type="getUserInfo" bindgetuserinfo="onClickSubmit">登录 | 注册</button>
  20.   </view>
  21. </view>
复制代码
登录注册页js
  1. // pages/auth/auth.js
  2. var app = getApp()
  4. Page({
  6.   /**
  7.    * 页面的初始数据
  8.    */
  9.   data: {
  10.     phone: "15822539779",
  11.     code: "",
  12.   },
  13.   bindPhoneInput: function (e) {
  14.     this.setData({
  15.       phone: e.detail.value
  16.     });
  17.   },
  18.   bindCodeInput: function (e) {
  19.     this.setData({
  20.       code: e.detail.value
  21.     });
  22.   },
  24.   /**
  25.    * 点击获取短信验证码
  26.    */
  27.   onClickCheckCode: function (e) {
  28.     // 判断手机号格式是否正确
  29.     if (this.data.phone.length == 0) {
  30.       wx.showToast({
  31.         title: '请填写手机号码',
  32.         icon: 'none'
  33.       })
  34.       return
  35.     }
  36.     var reg = /^(1[3|4|5|6|7|8|9])\d{9}$/;
  37.     if (!reg.test(this.data.phone)) {
  38.       wx.showToast({
  39.         title: '手机格式错误',
  40.         icon: 'none'
  41.       })
  42.       return
  43.     }
  44.     // 发送短信验证码，登录成功之后获取jwt和微信用户信息，保存到globalData和本地存储中。
  45.     wx.request({
  46.       url: "http://127.0.0.1:8000/api/message/",
  47.       data: {
  48.         phone: this.data.phone
  49.       },
  50.       method: 'GET',
  51.       dataType: 'json',
  52.       success: function (res) {
  53.         // 根据后端发送的status判断是否发送成功
  54.         if (res.data.status) {
  55.           // 提示验证码倒计时或者提示发送成功
  56.           wx.showToast({
  57.             title: res.data.message,
  58.             icon: 'none'
  59.           });
  60.         } else {
  61.           // 短信发送失败
  62.           wx.showToast({
  63.             title: res.data.message,
  64.             icon: 'none'
  65.           });
  66.         }
  67.       }
  68.     })
  69.   },
  70.   onClickSubmit(e) {
  71.     console.log(e)
  72.     wx.request({
  73.       url: "http://127.0.0.1:8000/api/login/",
  74.       data: {
  75.         phone: this.data.phone,
  76.         code: this.data.code
  77.       },
  78.       method: 'POST',
  79.       dataType: 'json',
  80.       success: function (res) {
  81.         // 根据status状态判断是否成功
  82.         if (res.data.status) {
  83.           // 1.可以将手机号放到公共的位置，比如app.js里，方便别的页面进行获取
  84.           // app.globalData.phone = res.data.data.phone
  85.           // 2.上述方法是将值存在变量里的，一重启就没有了，我们也可以将值保存在cookie中
  86.           // wx.setStorageSync('phone', res.data.data.phone)
  87.           // 3.将上述两种存储优化一下，在全局的app中定义一个initUserInfo方法，将用户初始化的信息（电话和token）传入该函数，然后上面1和2两部就可以放到该函数内执行了
  88.           // 4.优化，我们还可以将wx的用户信息也初始化到initUserInfo函数内
  89.           app.initUserInfo(res.data.data, e.detail.userInfo)
  92.           // 登录成功之后，自动跳转到上一级页面
  93.           //getCurrentPages方法是记录程序的页面，包括上一页信息，下一页信息等，pages是一个列表，最后一个是元素是当前页面，前一个元素是上一页
  94.           // var pages = getCurrentPages()
  95.           // console.log(pages)
  96.           // 得到上一页
  97.           // prepage  = pages[pages.length-2]
  98.           // 使用该方法就可以之前跳转到登录之前的上一页
  99.           wx.navigateBack({})
  100.         } else {
  101.           wx.showToast({
  102.             title: "登录失败",
  103.             icon: 'none'
  104.           });
  105.         }
  106.       }
  107.     })
  108.   },
  109.   /**
  110.    * 生命周期函数--监听页面加载
  111.    */
  112.   onLoad(options) {
  114.   },
  116.   /**
  117.    * 生命周期函数--监听页面初次渲染完成
  118.    */
  119.   onReady() {
  121.   },
  123.   /**
  124.    * 生命周期函数--监听页面显示
  125.    */
  126.   onShow() {
  128.   },
  130.   /**
  131.    * 生命周期函数--监听页面隐藏
  132.    */
  133.   onHide() {
  135.   },
  137.   /**
  138.    * 生命周期函数--监听页面卸载
  139.    */
  140.   onUnload() {
  142.   },
  144.   /**
  145.    * 页面相关事件处理函数--监听用户下拉动作
  146.    */
  147.   onPullDownRefresh() {
  149.   },
  151.   /**
  152.    * 页面上拉触底事件的处理函数
  153.    */
  154.   onReachBottom() {
  156.   },
  158.   /**
  159.    * 用户点击右上角分享
  160.    */
  161.   onShareAppMessage() {
  163.   }
  164. })
复制代码
登录注册页css
  1. /* pages/auth/auth.wxss */
  4. .logo{
  5.   display: flex;
  6.   flex-direction: column;
  7.   align-items: center;
  8. }
  10. .logo image {
  11.   margin-top: 140rpx;
  12.   width: 216rpx;
  13.   height: 100rpx;
  14. }
  16. .logo text {
  17.   margin-top: 26rpx;
  18.   margin-bottom: 50rpx;
  19.   font-size: 24rpx;
  20.   line-height: 24rpx;
  21.   font-weight: 400;
  22.   color: #8c8c8c;
  23.   text-align: center;
  24. }
  26. .form{
  27.   padding: 40rpx;
  28. }
  30. .form .row-group{
  31.   padding: 20rpx 0;
  32.   border-bottom: 1rpx solid #ddd;
  33.   position: relative;
  34. }
  36. .form .row-group text{
  37.   font-size: 28rpx;
  38.   padding:10rpx 0;
  39. }
  41. .form .row-group input{
  42.   padding: 10rpx 0;
  43. }
  45. .form .row-group .txt{
  46.   color: #ccc;
  47. }
  49. .form .row-group .code{
  50.   position: absolute;
  51.   right: 0;
  52.   bottom: 26rpx;
  53.   z-index: 2;
  55.   width: 206rpx;
  56.   height: 60rpx;
  57.   border: 2rpx solid #00c8b6;
  58.   border-radius: 12rpx;
  59.   font-size: 26rpx;
  60.   font-weight: 400;
  61.   color: #00c8b6;
  62.   display: flex;
  63.   align-items: center;
  64.   justify-content: center;
  65. }
  67. .form .submit{
  68.   margin-top: 80rpx;
  69.   color: #fff;
  70.   border: 2rpx solid #00c8b6;
  71.   background-color: #00c8b6;
  72.   font-size: 32rpx;
  73.   font-weight: bold;
  74. }
复制代码
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4