Auth 功能、Empty组件

app.wxss

@@ -2,4 +2,5 @@
 
 page{
    font-family: PingFangSC-Regular; 
+   /* background-color: #f7f7f7; */
 }

components/card/index.wxss

@@ -1,5 +1,6 @@
 /* components/card/index.wxss */
 .card {
+  background-color: white;
   border: 1px solid #e7e7e7;
   box-shadow: 1px 1px 1px #eee;
 }

components/cell/index.wxss

@@ -1,5 +1,6 @@
 /* components/cell/index.wxss */
 .cell {
+  background-color: white;
   border-bottom: 1px solid #E7E7E7;
   display: flex;
   flex-direction: column;

components/empty/index.js

@@ -4,7 +4,18 @@ Component({
    * 组件的属性列表
    */
   properties: {
-
+    loading: {
+      type: Boolean,
+      value: true,
+    },
+    empty: {
+      type: Boolean,
+      value: false,
+    },
+    message: {
+      type: Boolean,
+      value: '页面迷路了！'
+    }
   },
 
   /**

components/empty/index.wxml

@@ -1,4 +1,10 @@
 <!--components/empty/index.wxml-->
 <view class="empty">
-  
+  <view class="empty-loading" wx:if="{{loading && !empty}}">
+  	<view class="load-indicator">加载中<dot></dot></view>
+  </view>
+  <view class="empty-bd" wx:if="{{empty}}">
+    <view class="empty-logo">{{message}}</view>
+    <view class="empty-refresh"></view>
+  </view>
 </view>

components/empty/index.wxss

@@ -1 +1,50 @@
-/* components/empty/index.wxss */
+/* components/empty/index.wxss */
+
+.empty {
+  position: relative;
+  width: 100%;
+}
+
+.empty-loading {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+}
+.empty-bd {
+  padding: 10px 0;
+  text-align: center;
+  font-size: 17px;
+  color: #888;
+}
+
+.load-indicator {
+  font-size: 16px;
+  color: #888;
+  text-align: center;
+}
+dot {
+  display: inline-block;
+  overflow: hidden;
+  height: 1em;
+  line-height: 1;
+  vertical-align: -.25em;
+}
+
+dot::after {
+  display: block;
+  white-space: pre-wrap;
+  content: "...\A..\A.";
+  animation: loading 3s infinite step-start both;
+}
+
+@keyframes loading {
+  33% {
+    transform: translate3d(0, -2em, 0);
+  }
+
+  66% {
+    transform: translate3d(0, -1em, 0);
+  }
+}

components/focus/index.wxml

@@ -1,5 +1,5 @@
 <!--components/focus/index.wxml-->
-<view class="focus">
+<view class="focus" wx:if="{{items.length > 0}}">
   <view class="focus_icon">
     <image src="images/focus.png" style="width: 40px; height: 20px"></image>
   </view>

components/swiper/index.wxml

@@ -1,5 +1,5 @@
 <!--components/swiper/index.wxml-->
-<view class="e-swiper">
+<view class="e-swiper" wx:if="{{images.length > 0}}">
   <swiper autoplay="{{true}}" 
     interval="{{2000}}" 
     duration="{{500}}" 

models/auth.js

@@ -1,35 +1,50 @@
 import { HTTP, Method, HTTPConst } from '../utils/http.js'
 
-const token_url = ''
+const AuthConst = {
-
+  token_url: '/api/user/getToken', // 获取token
+  check_register_url: '/api/miniuser/isRegister',
+  mobile_code_url: '/api/miniuser/getSmsCode', // 获取验证码
+  verify_update_phone_url: '/api/miniuser/updateMiniUser' // mobile 验证
+}
 class AuthModel extends HTTP {
   constructor() {
     super()
   }
   // 获取短信验证码
-  getMsgCode (phone) {
+  getMsgCode (phone, success) {
     let params = {
-      url: '',
+      url: AuthConst.mobile_code_url,
-      method: Method.POST,
+      method: Method.GET,
       data: {
-        
+        phone: phone,
       },
       success: (data)=> {
         wx.showToast({
           title: '短信验证码已发送！',
           icon: 'none'
         })
+        success(data)
       }
     }
     this.request(params)
   }
-  // 验证和注册
+  checkRegister (success) {
+    let params = {
+      url: AuthConst.check_register_url,
+      method: Method.POST,
+      success: success,
+    }
+    this.request(params)
+  }
+  // 提交验证和注册
   register (phone, name, vscode, success) {
     let params = {
-      url: '',
+      url: AuthConst.verify_update_phone_url,
       method: Method.POST,
       data: {
-
+        phone: phone,
+        realName: name,
+        verificationCode: vscode,
       },
       success: (data) => {
         if (data) {
@@ -51,7 +66,7 @@ class AuthModel extends HTTP {
     this._fetchWXCode().then(res => {
       if (!res) return
       let params = {
-        url: token_url,
+        url: AuthConst.token_url,
         method: Method.GET,
         data: {
           code: res

pages/article/index.js

@@ -11,7 +11,7 @@ Page({
   data: {
     nodes: '',
     isStar: true, // 是否
-    showBtn: true,
+    showBtn: false,
     aId: '',
     title: '',
     date: '',

pages/article/index.wxss

@@ -1,4 +1,7 @@
 /* pages/article/index.wxss */
+.contianer {
+  overflow: hidden;
+}
 .page_hd {
   padding: 0 15px;
   display: flex;

pages/billboards/park/park-list/index.js

@@ -7,6 +7,7 @@ Page({
    * 页面的初始数据
    */
   data: {
+    loading: true,
     list: [],
     curCode: '',
     curPage:1,
@@ -34,6 +35,9 @@ Page({
     const {curCode} = this.data
     const page = this.data.curPage
     billboard.fetchBailList(curCode, page, res => {
+      this.setData({
+        loading:false,
+      })
       console.log(res)
       const list = res.list 
       if (page == 1) {

pages/billboards/park/park-list/index.wxss

@@ -13,7 +13,7 @@
 .page_empty {
   width: 100%;
   height: 100px;
-  margin-top: 100px;
+  margin-top: 20px;
   font-size: 14px;
   color: #aaa;
   text-align: center;

pages/home/index.js

@@ -6,6 +6,7 @@ import { HomeModel } from '../../models/home.js'
 let homeModel = new HomeModel()
 Page({
   data: {
+    loading: true,
     currPage: 1,
     banners: [],
     hots: [],
@@ -47,6 +48,9 @@ Page({
   fetchHomeList() {
     let page = this.data.currPage
     homeModel.getHomeList(page, res => {
+      this.setData({
+        loading: false
+      })
       console.log('啦啦啦')
       const datas = res.list
       let tempDatas = []
@@ -130,10 +134,10 @@ Page({
   },
   clickListItem(e) {
     console.log(e.detail)
-    this.gotoArticePage(e.detail.id)
+    // this.gotoArticePage(e.detail.id)
-    // wx.redirectTo({
+    wx.redirectTo({
-    //   url: '/pages/register/index',
+      url: '/pages/register/index',
-    // })
+    })
   },
   gotoArticePage(id) {
     wx.navigateTo({

pages/home/index.json

@@ -5,6 +5,7 @@
   "usingComponents": {
     "e-swiper": "/components/swiper/index",
     "e-focus": "/components/focus/index",
-    "e-cell": "/components/cell/index"
+    "e-cell": "/components/cell/index",
+    "e-empty": "/components/empty/index"
   }
 }

pages/home/index.wxml

@@ -11,4 +11,5 @@
       showTop="{{item.showTop}}" 
       bind:clickListItem="clickListItem"/>
   </block>
+  <e-empty loading="{{loading}}" empty="{{list.length == 0}}"/>
 </view>

pages/register/index.js

@@ -1,4 +1,7 @@
 // pages/register/index.js
+import {AuthModel} from '../..//models/auth.js'
+let auth = new AuthModel()
+
 Page({
 
   /**
@@ -18,9 +21,11 @@ Page({
         rules: { required: true, message: '验证码必填' },
       },
     ],
-    formData: {
+    formData: {},
-
+    time: 60,
-    }
+    fetchCode: true,
+    interval: null,
+    btnTitle: '获取验证码'
   },
 
   /**
@@ -28,6 +33,67 @@ Page({
    */
   onLoad: function (options) {
 
+  },
+  onHide () {
+    clearInterval(this.data.interval)
+  },
+  // 重新获取Code
+  refetchCodeDownTime () {
+    
+    this.data.interval = setInterval(() => {
+      const time = this.data.time - 1
+      const title = `${time}s 重新发送`
+      this.setData({
+        fetchCode: false,
+        time: time,
+        btnTitle: title
+      })
+      if (time == 0) {
+        this.setData({
+          fetchCode: true,
+          time: 60,
+          btnTitle: '重新发送'
+        })
+        clearInterval(this.data.interval)
+      }
+    }, 1000)
+  },
+  // 调用获取 Code 接口
+  onGetMsgCode () {
+    this.selectComponent('#form').validate((valid, errors) => {
+      if (!valid) {
+        let emptyPhone = false
+        errors.forEach(item => {
+          if (item.name === 'mobile') {
+            emptyPhone = true
+            wx.showToast({
+              title: item.message,
+              icon: 'none'
+            })
+          }
+        })
+        if (!emptyPhone) {
+          
+          // console.log(this.data.formData)
+          this.fetchMsgCodeApi()
+        }
+      }
+    })
+  },
+  fetchMsgCodeApi () {
+    auth.getMsgCode(this.data.formData.mobile, res => {
+      console.log(res)
+      this.refetchCodeDownTime()
+    })
+  },
+  registerApi () {
+    const {mobile, name, vcode} = this.data.formData
+    auth.register(modile, name, vcode, res => {
+      console.log(res)
+      wx.reLaunch({
+        url: '/pages/home/index',
+      })
+    })
   },
   formInputChange (e) {
     const { field } = e.currentTarget.dataset
@@ -40,6 +106,7 @@ Page({
       console.log('valid', valid, errors)
       if (!valid) {
         const firstError = Object.keys(errors)
+        console.log(firstError)
         if (firstError.length) {
           const error = errors[firstError[0]].message
           wx.showToast({
@@ -48,9 +115,7 @@ Page({
           })
         }
       } else {
-        wx.showToast({
+        this.registerApi()
-          title: '校验通过'
-        })
       }
     })
   }

pages/register/index.wxml

@@ -13,9 +13,9 @@
           <mp-cell icon="/images/common/phone.png" prop="mobile" ext-class="">
               <input bindinput="formInputChange" data-field="mobile" class="weui-input" placeholder="请输入手机号"/>
           </mp-cell>
-          <mp-cell prop="vcode" ext-class=" weui-cell_vcode">
+          <mp-cell prop="vcode" ext-class="weui-cell_vcode">
               <input bindinput="formInputChange" data-field="vcode" class="weui-input" placeholder="请输入验证码"/>
-              <view slot="footer" class="weui-vcode-btn">获取验证码</view>
+              <view slot="footer" class="weui-vcode-btn" bindtap="{{fetchCode ? 'onGetMsgCode' : ''}}">{{btnTitle}}</view>
           </mp-cell>
         </mp-cells>
       </mp-form>

utils/http.js

@@ -47,11 +47,18 @@ class HTTP {
           }
         } else {
           console.log('请求错误')
+          wx.showToast({
+            title: '服务器错误！',
+            icon: 'none'
+          })
           params.error && params.error(res)
         }
       },
       fail: function (res) {
-        console.log('服务器错误')
+        wx.showToast({
+          title: '网络连接错误，请求失败！',
+          icon: 'none'
+        })
         params.fail && params.fail(res)
       },
     })