用户登录, 退出

app/app.js

@@ -1,27 +1,30 @@
 //app.js
+import {getLoginInfo} from './utils/apis'
 App({
   onLaunch: function () {
     //调用API从本地缓存中获取数据
   },
-  getUserInfo:function(cb){
+  getLoginInfo:function(cb){
     var that = this
-    if(this.globalData.userInfo){
+    if (this.globalData.loginInfo){
-      typeof cb == "function" && cb(this.globalData.userInfo)
+      cb && cb(this.globalData.loginInfo)
     }else{
       //调用登录接口
-      wx.login({
+      getLoginInfo({
-        success: function () {
+        success(data) {
-          wx.getUserInfo({
+          that.setLoginInfo(data)
-            success: function (res) {
+          cb && cb(data)
-              that.globalData.userInfo = res.userInfo
-              typeof cb == "function" && cb(that.globalData.userInfo)
-            }
-          })
         }
       })
     }
   },
+  setLoginInfo(loginInfo) {
+    if (loginInfo.session_3rd) {
+      wx.setStorageSync('session_3rd', loginInfo.session_3rd)
+    }
+    this.globalData.loginInfo = loginInfo
+  },
   globalData:{
-    userInfo:null
+    loginInfo:null
   }
 })

app/app.json

@@ -1,9 +1,10 @@
 {
   "pages": [
+    "pages/mine/mine",
+    "pages/login/login",
     "pages/index/index",
     "pages/index/address",
     "pages/shop/show",
-    "pages/mine/mine",
     "pages/order/show",
     "pages/order/quasi",
     "pages/order/list",

app/app.wxss

@@ -14,6 +14,7 @@ page {
 .grey-color {
   color: #999 !important;
 }
+
 .text-large {
   font-size: 1.2em;
 }
@@ -46,6 +47,17 @@ button[type=primary], .weui-btn_primary {
   background-color: #ff5801;
 }
 
+.weui-btn_primary {
+  line-height: 2.55555556;
+  font-size: 18px;
+  text-align: center;
+  box-sizing: border-box;
+  text-decoration: none;
+  border-radius: 5px;
+  -webkit-tap-highlight-color: transparent;
+  overflow: hidden;
+}
+
 .weui-btn_mini {
   display: inline-block;
   line-height: 2.3;
@@ -59,7 +71,8 @@ button[type="primary"][plain] {
   color: #ff5801;
   border-color: #ff5801;
 }
-button[type="primary"][disabled] {
+
+button[type="primary"][disabled], button[loading][type="primary"] {
   background-color: #ffa97c;
 }
 
@@ -77,5 +90,3 @@ button[type="primary"][disabled] {
   margin-top: 15px;
   padding: 0 15px;
 }
-
-

app/pages/login/login.js

@@ -0,0 +1,121 @@
+// login.js
+import WxValidate from '../../utils/WxValidate'
+import Countdown from '../../utils/countdown'
+import { alert, getPrevPage } from '../../utils/util'
+import { getCode, login } from '../../utils/apis'
+var initCount = 10
+Page({
+  data: {
+    codeLabel: '获取验证码',
+    phone: '13000000004',
+  },
+  onLoad: function (options) {
+    // 页面初始化 options为页面跳转所带来的参数
+    this.callback = options.callback
+    this.countdown = new Countdown(this, 'count')
+    this.initValidate()
+  },
+  onReady: function () {
+    // 页面渲染完成
+  },
+  onShow: function () {
+    // 页面显示
+  },
+  onHide: function () {
+    // 页面隐藏
+  },
+  onUnload: function () {
+    // 页面关闭
+    if (this.countdown) {
+      this.countdown.stop()
+    }
+  },
+  initValidate() {
+    this.validate = new WxValidate({
+      phone: {
+        required: true,
+        tel: true,
+      },
+      code: {
+        required: true,
+      },
+    }, {
+        phone: {
+          required: '请输入手机号',
+          tel: '请输入有效手机号码'
+        },
+        code: {
+          required: '请输入验证码',
+        },
+      })
+  },
+  onInputPhone(e) {
+    this.setData({
+      phone: e.detail.value
+    })
+  },
+  onGetCode(e) {
+    var that = this
+    var {phone, count} = this.data
+    if (count > 0) {
+      return;
+    }
+    if (!/^1[34578]\d{9}$/.test(phone)) {
+      return alert('请输入有效手机号码')
+    }
+    that.setData({
+      count: initCount
+    })
+    that.countdown.start()
+    getCode({
+      phone,
+      success(data) {
+        that.setData({
+          codeLabel: '重新获取验证码'
+        })
+      },
+      error() {
+        that.countdown.stop()
+        that.setData({
+          count: 0
+        })
+      }
+    })
+  },
+  formSubmit(e) {
+    var that = this
+    var {loading} = this.data
+    if(loading) {
+      return;
+    }
+
+    this.setData({
+      loading: true
+    })
+
+    if (!this.validate.checkForm(e)) {
+      const error = this.validate.errorList[0]
+      that.setData({
+        loading: false
+      })
+      return alert(error.msg)
+    }
+
+    var {phone, code} = e.detail.value
+    login({
+      phone, code,
+      success(data) {
+        that.setData({
+          loading: false
+        })
+        getPrevPage()[that.callback](data)
+        wx.navigateBack()
+      },
+      error() {
+        that.setData({
+          loading: false
+        })
+      }
+    })
+  }
+})

app/pages/login/login.json

@@ -0,0 +1,3 @@
+{
+  "navigationBarTitleText": "登录"
+}

app/pages/login/login.wxml

@@ -0,0 +1,29 @@
+<!--login.wxml-->
+<form catchsubmit="formSubmit">
+  <view class="weui-cells">
+    <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 type="digit" value="{{phone}}" maxlength="11" bindinput="onInputPhone" name="phone" class="weui-input" placeholder="请输入手机号" />
+      </view>
+      <view class="weui-cell__ft">
+        <view class="weui-vcode-btn" bindtap="onGetCode">
+          {{count > 0 ? count + ' 秒': codeLabel}}
+        </view>
+      </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 name="code" type="digit" class="weui-input" placeholder="请输入验证码" />
+      </view>
+    </view>
+  </view>
+  <view class="weui-btn-area">
+    <button class="weui-btn" loading="{{loading}}" type="primary" formType="submit">确定</button>
+  </view>
+</form>

app/pages/login/login.wxss

@@ -0,0 +1,8 @@
+/* login.wxss */
+.weui-label {
+  width: 5em;
+}
+.weui-vcode-btn {
+  min-width: 4em;
+  text-align: center;
+}

app/pages/mine/mine.js

@@ -1,8 +1,23 @@
 // pages/mine/mine.js
+import { getUserInfo, makePhoneCall } from '../../utils/util'
+import { logout } from '../../utils/apis'
+
+const app = getApp()
 Page({
   data:{},
   onLoad:function(options){
     // 页面初始化 options为页面跳转所带来的参数
+    var that = this
+    getUserInfo(userInfo => {
+      this.setData({
+        userInfo
+      })
+    })
+    app.getLoginInfo(loginInfo => {
+      that.setData({
+        loginInfo: loginInfo.user_info
+      })
+    })
   },
   onReady:function(){
     // 页面渲染完成
@@ -15,5 +30,34 @@ Page({
   },
   onUnload:function(){
     // 页面关闭
+  },
+  onPhoneTap(e) {
+    makePhoneCall(e.currentTarget.dataset.phone)
+  },
+  onLogout(e) {
+    var that = this
+    var {loginInfo: {phone}, loading} = this.data
+    if(loading) {
+      return
+    }
+    this.setData({
+      loading: true
+    })
+    logout({
+      phone,
+      success(data) {
+        app.setLoginInfo(data)
+        that.setData({
+          loginInfo: null,
+          loading: false
+        })
+      }
+    })
+  },
+  callback(loginInfo) {
+    app.setLoginInfo(loginInfo)
+    this.setData({
+      loginInfo: loginInfo.user_info
+    })
   }
 })

app/pages/mine/mine.wxml

@@ -2,24 +2,30 @@
 <!--pages/mine/mine.wxml-->
 <view class="header">
   <view>
-    <image class="avatar" src="/images/default-image.png"></image>
+    <image class="avatar" src="{{loginInfo ? userInfo.avatarUrl: '/images/default-image.png'}}"></image>
   </view>
   <view>
-    未登录
+    {{loginInfo ? userInfo.nickName : '未登录'}}
+  </view>
+  <view wx:if="{{loginInfo}}" class="classname">
+    {{loginInfo.phone}}
   </view>
 </view>
 <view class="weui-cells">
-  <navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
+  <navigator wx:if="{{loginInfo}}" url="/pages/address/list" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
     <view class="weui-cell__bd">收货地址</view>
     <view class="weui-cell__ft weui-cell__ft_in-access"></view>
   </navigator>
-  <navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
+  <view data-phone="400-926-2108" bindtap="onPhoneTap" class="weui-cell weui-cell_access">
     <view class="weui-cell__bd">客服热线</view>
     <view class="weui-cell__ft weui-cell__ft_in-access">400-926-2108</view>
-  </navigator>
+  </view>
 </view>
 <view class="button-sp-area">
-  <button class="weui-btn" type="primary">
+  <button loading="{{loading}}" bindtap="onLogout" wx:if="{{loginInfo}}"  class="weui-btn weui-btn_plain" >
-    立即登录
+    退出账号
   </button>
+  <navigator url="/pages/login/login?callback=callback" wx:else class="weui-btn weui-btn_primary" hover-class="button-hover">
+    立即登录
+  </navigator>
 </view>

app/pages/mine/mine.wxss

@@ -14,3 +14,7 @@
     border-radius: 50%;
     border: 5rpx solid rgba(255, 255, 255, 0.6);
 }
+
+.weui-btn_plain {
+  background-color: #fff;
+}

app/utils/apis.js

@@ -1,61 +1,140 @@
 import {
-    fetch, coordFormat,
+  fetch, coordFormat,
-    alert, confirm
+  alert, confirm
 } from './util'
 
 // 获取商店列表
 export function getSellers(options) {
-    var {
+  var {
-        page, address,
+    page, address,
-        success
+    success
-    } = options
+  } = options
-    page = page || 0
+  page = page || 0
-    var location = coordFormat(address.location)
+  var location = coordFormat(address.location)
-    fetch({
+  fetch({
-        url: 'index.php?m=Mall&c=Seller&a=getSellers',
+    url: 'index.php?m=Mall&c=Seller&a=getSellers',
-        data: {
+    data: {
-            page,
+      page,
-            city_name: address.city,
+      city_name: address.city,
-            city_id: address.city_id,
+      city_id: address.city_id,
-            district_name: address.district,
+      district_name: address.district,
-            district_id: address.district_id,
+      district_id: address.district_id,
-            longitude: location.longitude,
+      longitude: location.longitude,
-            latitude: location.latitude
+      latitude: location.latitude
-        },
+    },
-        success
+    success
-    })
+  })
 }
 
 // 获取商店详情
 export function getSellerInfo(options) {
-    var {
+  var {
-        seller_id, address,
+    seller_id, address,
-        success, complete
+    success, complete
-    } = options
+  } = options
-    var location = coordFormat(address.location)
+  var location = coordFormat(address.location)
-    fetch({
+  fetch({
-        url: 'index.php?m=Mall&c=Seller&a=getSellerInfo',
+    url: 'index.php?m=Mall&c=Seller&a=getSellerInfo',
-        data: {
+    data: {
-            seller_id,
+      seller_id,
-            longitude: location.longitude,
+      longitude: location.longitude,
-            latitude: location.latitude
+      latitude: location.latitude
-        },
+    },
-        success, complete
+    success, complete
-    })
+  })
 }
 
 // 获取商店评论
 export function getReviews(options) {
-    var {
+  var {
-        seller_id, page,
+    seller_id, page,
-        success
+    success
-    } = options
+  } = options
-    page = page || 0
+  page = page || 0
-    fetch({
+  fetch({
-        url: 'index.php?m=Mall&c=Seller&a=getReviews',
+    url: 'index.php?m=Mall&c=Seller&a=getReviews',
-        data: {
+    data: {
-            seller_id, page
+      seller_id, page
-        },
+    },
-        success
+    success
-    })
+  })
 }
+
+// 短信验证码
+export function getCode(options) {
+  const {
+    phone, success, error
+  } = options
+  fetch({
+    url: "index.php?m=Api&c=Common&a=checkMSG",
+    data: {
+      phone,
+      key: 'fast_login'
+    },
+    success, error
+  })
+}
+
+// 登录
+export function login(options) {
+  const {
+    phone, code,
+    success, error
+  } = options
+  wx.login({
+    success(res) {
+      fetch({
+        url: 'index.php?m=Api&c=WeixinMall&a=login',
+        data: {
+          phone, code,
+          wx_code: res['code'],
+          session_3rd: wx.getStorageSync('session_3rd')
+        },
+        success, error
+      })
+    },
+    error(res) {
+      alert(res['errMsg'])
+      error && error(res['errMsg'])
+    }
+  })
+
+}
+// 退出账号
+export function logout(options) {
+  const {
+    phone, 
+    success, error
+  } = options
+  fetch({
+    url: 'index.php?m=Api&c=WeixinMall&a=logout',
+    data: {
+      phone
+    },
+    success, error
+  })
+}
+
+// 获取登录信息
+export function getLoginInfo(options) {
+  const {
+    success, error
+  } = options
+  wx.login({
+    success(res) {
+      fetch({
+        url: 'index.php?m=Api&c=WeixinMall&a=getLoginInfo',
+        data: {
+          wx_code: res['code'],
+          session_3rd: wx.getStorageSync('session_3rd')
+        },
+        success, error
+      })
+    },
+    error(res) {
+      alert(res['errMsg'])
+      error && error(res['errMsg'])
+    }
+  })
+}
+

app/utils/util.js

@@ -296,3 +296,21 @@ export function splitByKeyword(text, keyword) {
     }
     return res
 }
+
+var userInfo
+export function getUserInfo(cb) {
+  if(userInfo) {
+    return cb(userInfo)
+  } else {
+    wx.getUserInfo({
+      success(res) {
+        userInfo = res.userInfo
+        cb(userInfo)
+      },
+      fail(res) {
+        console.log(res)
+        alert('获取用户信息失败')
+      }
+    })
+  }
+}