用户登录, 退出

2017-05-09 15:13:10 +08:00 · 2017-05-09 15:13:10 +08:00 · 6c2f94b236
commit 6c2f94b236
parent 952c42afdf
12 changed files with 440 additions and 113 deletions
--- a/app/app.js
+++ b/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){
-      typeof cb == "function" && cb(this.globalData.userInfo)
+    if (this.globalData.loginInfo){
+      cb && cb(this.globalData.loginInfo)
    }else{
      //调用登录接口
-      wx.login({
-        success: function () {
-          wx.getUserInfo({
-            success: function (res) {
-              that.globalData.userInfo = res.userInfo
-              typeof cb == "function" && cb(that.globalData.userInfo)
-            }
-          })
+      getLoginInfo({
+        success(data) {
+          that.setLoginInfo(data)
+          cb && cb(data)
        }
      })
    }
  },
+  setLoginInfo(loginInfo) {
+    if (loginInfo.session_3rd) {
+      wx.setStorageSync('session_3rd', loginInfo.session_3rd)
+    }
+    this.globalData.loginInfo = loginInfo
+  },
  globalData:{
-    userInfo:null
+    loginInfo:null
  }
 })
--- a/app/app.json
+++ b/app/app.json
@ -1,46 +1,47 @@
-{
-  "pages": [
-    "pages/index/index",
-    "pages/index/address",
-    "pages/shop/show",
-    "pages/mine/mine",
-    "pages/order/show",
-    "pages/order/quasi",
-    "pages/order/list",
-    "pages/address/list",
-    "pages/address/add",
-    "pages/address/select",
-    "pages/shop/category",
-    "pages/shop/search"
-  ],
-  "window": {
-    "backgroundColor": "#f8f8f8",
-    "backgroundTextStyle": "light",
-    "navigationBarBackgroundColor": "#ff5801",
-    "navigationBarTitleText": "爱跑腿外卖",
-    "navigationBarTextStyle": "light"
-  },
-  "tabBar": {
-    "selectedColor": "#ff5801",
-    "list": [
-      {
-        "pagePath": "pages/index/index",
-        "iconPath": "images/tabbar/Shop_Tabbar_TakeOut_Empty@2x.png",
-        "selectedIconPath": "images/tabbar/Shop_Tabbar_TakeOut_Full@2x.png",
-        "text": "首页"
-      },
-      {
-        "pagePath": "pages/order/list",
-        "iconPath": "images/tabbar/Shop_Tabbar_Order_Empty@2x.png",
-        "selectedIconPath": "images/tabbar/Shop_Tabbar_Order_Full@2x.png",
-        "text": "订单"
-      },
-      {
-        "pagePath": "pages/mine/mine",
-        "iconPath": "images/tabbar/Shop_Tabbar_My_Empty@2x.png",
-        "selectedIconPath": "images/tabbar/Shop_Tabbar_My_Full@2x.png",
-        "text": "我的"
-      }
-    ]
-  }
+{
+  "pages": [
+    "pages/mine/mine",
+    "pages/login/login",
+    "pages/index/index",
+    "pages/index/address",
+    "pages/shop/show",
+    "pages/order/show",
+    "pages/order/quasi",
+    "pages/order/list",
+    "pages/address/list",
+    "pages/address/add",
+    "pages/address/select",
+    "pages/shop/category",
+    "pages/shop/search"
+  ],
+  "window": {
+    "backgroundColor": "#f8f8f8",
+    "backgroundTextStyle": "light",
+    "navigationBarBackgroundColor": "#ff5801",
+    "navigationBarTitleText": "爱跑腿外卖",
+    "navigationBarTextStyle": "light"
+  },
+  "tabBar": {
+    "selectedColor": "#ff5801",
+    "list": [
+      {
+        "pagePath": "pages/index/index",
+        "iconPath": "images/tabbar/Shop_Tabbar_TakeOut_Empty@2x.png",
+        "selectedIconPath": "images/tabbar/Shop_Tabbar_TakeOut_Full@2x.png",
+        "text": "首页"
+      },
+      {
+        "pagePath": "pages/order/list",
+        "iconPath": "images/tabbar/Shop_Tabbar_Order_Empty@2x.png",
+        "selectedIconPath": "images/tabbar/Shop_Tabbar_Order_Full@2x.png",
+        "text": "订单"
+      },
+      {
+        "pagePath": "pages/mine/mine",
+        "iconPath": "images/tabbar/Shop_Tabbar_My_Empty@2x.png",
+        "selectedIconPath": "images/tabbar/Shop_Tabbar_My_Full@2x.png",
+        "text": "我的"
+      }
+    ]
+  }
 }
--- a/app/app.wxss
+++ b/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;
 }
-
-
--- a/app/pages/login/login.js
+++ b/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
+        })
+      }
+    })
+  }
+})
--- a/app/pages/login/login.json
+++ b/app/pages/login/login.json
@ -0,0 +1,3 @@
+{
+  "navigationBarTitleText": "登录"
+}
--- a/app/pages/login/login.wxml
+++ b/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>
--- a/app/pages/login/login.wxss
+++ b/app/pages/login/login.wxss
@ -0,0 +1,8 @@
+/* login.wxss */
+.weui-label {
+  width: 5em;
+}
+.weui-vcode-btn {
+  min-width: 4em;
+  text-align: center;
+}
--- a/app/pages/mine/mine.js
+++ b/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
+    })
  }
 })
--- a/app/pages/mine/mine.wxml
+++ b/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>
--- a/app/pages/mine/mine.wxss
+++ b/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;
+}
--- a/app/utils/apis.js
+++ b/app/utils/apis.js
@ -1,61 +1,140 @@
 import {
-    fetch, coordFormat,
-    alert, confirm
+  fetch, coordFormat,
+  alert, confirm
 } from './util'

 // 获取商店列表
 export function getSellers(options) {
-    var {
-        page, address,
-        success
-    } = options
-    page = page || 0
-    var location = coordFormat(address.location)
-    fetch({
-        url: 'index.php?m=Mall&c=Seller&a=getSellers',
-        data: {
-            page,
-            city_name: address.city,
-            city_id: address.city_id,
-            district_name: address.district,
-            district_id: address.district_id,
-            longitude: location.longitude,
-            latitude: location.latitude
-        },
-        success
-    })
+  var {
+    page, address,
+    success
+  } = options
+  page = page || 0
+  var location = coordFormat(address.location)
+  fetch({
+    url: 'index.php?m=Mall&c=Seller&a=getSellers',
+    data: {
+      page,
+      city_name: address.city,
+      city_id: address.city_id,
+      district_name: address.district,
+      district_id: address.district_id,
+      longitude: location.longitude,
+      latitude: location.latitude
+    },
+    success
+  })
 }

 // 获取商店详情
 export function getSellerInfo(options) {
-    var {
-        seller_id, address,
-        success, complete
-    } = options
-    var location = coordFormat(address.location)
-    fetch({
-        url: 'index.php?m=Mall&c=Seller&a=getSellerInfo',
-        data: {
-            seller_id,
-            longitude: location.longitude,
-            latitude: location.latitude
-        },
-        success, complete
-    })
+  var {
+    seller_id, address,
+    success, complete
+  } = options
+  var location = coordFormat(address.location)
+  fetch({
+    url: 'index.php?m=Mall&c=Seller&a=getSellerInfo',
+    data: {
+      seller_id,
+      longitude: location.longitude,
+      latitude: location.latitude
+    },
+    success, complete
+  })
 }

 // 获取商店评论
 export function getReviews(options) {
-    var {
-        seller_id, page,
-        success
-    } = options
-    page = page || 0
-    fetch({
-        url: 'index.php?m=Mall&c=Seller&a=getReviews',
+  var {
+    seller_id, page,
+    success
+  } = options
+  page = page || 0
+  fetch({
+    url: 'index.php?m=Mall&c=Seller&a=getReviews',
+    data: {
+      seller_id, page
+    },
+    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: {
-            seller_id, page
+          phone, code,
+          wx_code: res['code'],
+          session_3rd: wx.getStorageSync('session_3rd')
        },
-        success
-    })
-}
+        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'])
+    }
+  })
+}
+
--- a/app/utils/util.js
+++ b/app/utils/util.js
@ -295,4 +295,22 @@ 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('获取用户信息失败')
+      }
+    })
+  }
 }