feats

config/index.js

@@ -1,3 +1,5 @@
+const path = require('path')
+
 const config = {
   projectName: 'myApp',
   date: '2020-8-7',
@@ -59,6 +61,10 @@ const config = {
         }
       }
     }
+  },
+  alias: {
+    '@/components': path.resolve(__dirname, '..', 'src/components'),
+    '@/util': path.resolve(__dirname, '..', 'src/util')
   }
 }
 

src/app.js

@@ -1,4 +1,7 @@
+import Taro from '@tarojs/taro'
 import Vue from 'vue'
+import BasicLayout from '@/components/Layout/Basic'
+import { vueAuthPlugin } from '@/util/auth-plugin'
 import store from './store/index'
 
 import './app.scss'
@@ -10,13 +13,57 @@ import './iconfont.scss'
 import ToolClass from './util/PublicMethod/index'
 Vue.prototype.ToolClass = ToolClass
 
+Vue.use(vueAuthPlugin)
+Vue.component('BasicLayout', BasicLayout)
+
 const App = new Vue({
   store,
-  onShow (options) {
+  onLaunch (options) {
+    this.login(options)
   },
   render(h) {
     // this.$slots.default 是将要会渲染的页面
     return h('block', this.$slots.default)
+  },
+  methods: {
+    login(options) {
+      Taro.login({
+        success (res) {
+          if (res.code) {
+            store.dispatch(
+              'user/MainSignIn',
+              { queryData: { code: res.code } }
+            ).then((res) => { // 获取用户信息
+              store.commit(
+                'user/EditUserInfo',
+                { name: 'PersonId', value: res.data.data.person.personId }
+              )
+
+              store.commit(
+                'user/EditUserInfo',
+                { name: 'OpenId', value: res.data.data.person.openId }
+              )
+              
+              store.commit(
+                'user/EditUserInfo',
+                { name: 'SessionKey', value: res.data.data.person.sessionKey }
+              )
+              
+              store.commit(
+                'user/EditUserInfo',
+                { name: 'Phone', value: res.data.data.person.phone }
+              )
+            })
+          } else {
+            Taro.showToast({
+              title: '初始化失败, 请退出重试',
+              icon: 'none',
+              duration: 3000
+            })
+          }
+        }
+      })
+    }
   }
 })
 

src/components/Layout/Basic/index.vue

@@ -0,0 +1,25 @@
+<template>
+  <block>
+    <block v-if="user.PersonId">
+      <slot v-bind:user="user"></slot>
+    </block>
+    <Loading v-else />
+  </block>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import Loading from '@/components/Loading'
+
+export default {
+  name: 'BasicLayout',
+  components: {
+    Loading
+  },
+  computed: {
+    ...mapState({
+      user: s => s.user.UserInfo || {}
+    })
+  }
+}
+</script>

src/components/Loading/index.vue

@@ -0,0 +1,3 @@
+<template>
+  <view style="text-align: center; margin-top: 20vh">Loading</view>
+</template>

src/pages/HuiAiXin/index.vue

@@ -89,19 +89,8 @@ export default {
     BannerSwiper
   },
   created () {
-    let _that = this
-    wx.login({
-      success (res) {
-        _that.MainSignIn({ queryData: { code: res.code } }).then((res) => { // 获取用户信息
-          _that.EditUserInfo({ name: 'PersonId', value: res.data.data.person.personId })
-          _that.EditUserInfo({ name: 'OpenId', value: res.data.data.person.openId })
-          _that.EditUserInfo({ name: 'SessionKey', value: res.data.data.extraInfo.sessionKey })
-          if (res.data.data.person.phone !== undefined && res.data.data.person.phone !== null) {
-            _that.EditUserInfo({ name: 'Phone', value: res.data.data.person.phone })
-          }
-          _that.Init()
-        })
-      }
+    this.$authed(() => {
+      this.Init()
     })
   },
   methods: {

src/pages/HuiShengHuo/index.vue

@@ -1,64 +1,66 @@
 <template>
-  <view class="page HuiShengHuo">
-    <ScrollY :IsRefreshing="IsRefreshing" @Refresh="Refresh">
+  <BasicLayout>
+    <view class="page HuiShengHuo">
+      <ScrollY :IsRefreshing="IsRefreshing" @Refresh="Refresh">
 
-      <!-- banner -->
-      <view class="Banner">
-        <view>
-          <BannerSwiper :List="IndexBanner"></BannerSwiper>
+        <!-- banner -->
+        <view class="Banner">
+          <view>
+            <BannerSwiper :List="IndexBanner"></BannerSwiper>
+          </view>
         </view>
-      </view>
 
-      <!-- 活动照片墙 -->
-      <view class="PhotoList">
-        <view class="flex-h">
-          <view class="flex-item">
-            <image mode="heightFix" src="https://cjgw.oss-cn-hangzhou.aliyuncs.com/ygcxxfb/image/huodongzhaopianqiang.png"></image>
+        <!-- 活动照片墙 -->
+        <view class="PhotoList">
+          <view class="flex-h">
+            <view class="flex-item">
+              <image mode="heightFix" src="https://cjgw.oss-cn-hangzhou.aliyuncs.com/ygcxxfb/image/huodongzhaopianqiang.png"></image>
+            </view>
+            <navigator url="./PhotoList/index" hover-class="other-navigator-hover" class="More">更多 <text class="iconfont iconjiantouright"></text></navigator>
           </view>
-          <navigator url="./PhotoList/index" hover-class="other-navigator-hover" class="More">更多 <text class="iconfont iconjiantouright"></text></navigator>
-        </view>
-        <view class="ListContainer" v-if="PhotoList.length">
-          <scroll-view scroll-x="true">
-            <view class="List">
-              <view v-for="(item, index) in PhotoList" :key="index">
-                <view>
-                  <image mode="aspectFill" class="centerLabel" :src="ToolClass.DemoImg()"></image>
+          <view class="ListContainer" v-if="PhotoList.length">
+            <scroll-view scroll-x="true">
+              <view class="List">
+                <view v-for="(item, index) in PhotoList" :key="index">
+                  <view>
+                    <image mode="aspectFill" class="centerLabel" :src="ToolClass.DemoImg()"></image>
+                  </view>
                 </view>
               </view>
-            </view>
-          </scroll-view>
+            </scroll-view>
+          </view>
         </view>
-      </view>
 
-      <!-- 精彩活动 -->
-      <view class="ActivityList">
-        <view class="flex-h">
-          <view class="flex-item">
-            <image mode="heightFix" src="https://cjgw.oss-cn-hangzhou.aliyuncs.com/ygcxxfb/image/jingcaihuodong.png"></image>
+        <!-- 精彩活动 -->
+        <view class="ActivityList">
+          <view class="flex-h">
+            <view class="flex-item">
+              <image mode="heightFix" src="https://cjgw.oss-cn-hangzhou.aliyuncs.com/ygcxxfb/image/jingcaihuodong.png"></image>
+            </view>
+            <navigator url="./ActivityList/index" hover-class="other-navigator-hover" class="More">更多 <text class="iconfont iconjiantouright"></text></navigator>
           </view>
-          <navigator url="./ActivityList/index" hover-class="other-navigator-hover" class="More">更多 <text class="iconfont iconjiantouright"></text></navigator>
-        </view>
-        <view class="List" v-if="ActivityList.length">
-          <view class="Item" v-for="(item, index) in ActivityList" :key="index">
-            <navigator class="Img" :url="`./ActivityList/ActivityDetail/index?id=${item.activityId}`" hover-class="other-navigator-hover">
-              <image mode="aspectFill" class="centerLabel" :src="item.thumb"></image>
-            </navigator>
-            <view class="Info">
-              <text>{{item.name}}</text>
-              <view class="flex-h">
-                <text class="flex-item">参与截止时间：{{ToolClass.DateFormat(new Date(item.enrollEnd).getTime())}}</text>
-                <navigator :url="`./ActivityList/ActivityDetail/index?id=${item.activityId}`" hover-class="other-navigator-hover" class="Btn" v-if="item.isEnroll">立即报名</navigator>
-                <navigator :url="`./ActivityList/ActivityDetail/index?id=${item.activityId}`" hover-class="other-navigator-hover" class="Btn" v-if="item.isVote">立即投票</navigator>
-                <view v-if="new Date(item.endDate).getTime() <= Date.now()">已结束</view>
+          <view class="List" v-if="ActivityList.length">
+            <view class="Item" v-for="(item, index) in ActivityList" :key="index">
+              <navigator class="Img" :url="`./ActivityList/ActivityDetail/index?id=${item.activityId}`" hover-class="other-navigator-hover">
+                <image mode="aspectFill" class="centerLabel" :src="item.thumb"></image>
+              </navigator>
+              <view class="Info">
+                <text>{{item.name}}</text>
+                <view class="flex-h">
+                  <text class="flex-item">参与截止时间：{{ToolClass.DateFormat(new Date(item.enrollEnd).getTime())}}</text>
+                  <navigator :url="`./ActivityList/ActivityDetail/index?id=${item.activityId}`" hover-class="other-navigator-hover" class="Btn" v-if="item.isEnroll">立即报名</navigator>
+                  <navigator :url="`./ActivityList/ActivityDetail/index?id=${item.activityId}`" hover-class="other-navigator-hover" class="Btn" v-if="item.isVote">立即投票</navigator>
+                  <view v-if="new Date(item.endDate).getTime() <= Date.now()">已结束</view>
+                </view>
               </view>
             </view>
+            <view style="width: 100%; height: 10px;"></view>
           </view>
-          <view style="width: 100%; height: 10px;"></view>
         </view>
-      </view>
 
-    </ScrollY>
-  </view>
+      </ScrollY>
+    </view>
+  </BasicLayout>
 </template>
 
 <script>
@@ -90,19 +92,8 @@ export default {
     BannerSwiper
   },
   created () {
-    let _that = this
-    wx.login({
-      success (res) {
-        _that.MainSignIn({ queryData: { code: res.code } }).then((res) => { // 获取用户信息
-          _that.EditUserInfo({ name: 'PersonId', value: res.data.data.person.personId })
-          _that.EditUserInfo({ name: 'OpenId', value: res.data.data.person.openId })
-          _that.EditUserInfo({ name: 'SessionKey', value: res.data.data.extraInfo.sessionKey })
-          if (res.data.data.person.phone !== undefined && res.data.data.person.phone !== null) {
-            _that.EditUserInfo({ name: 'Phone', value: res.data.data.person.phone })
-          }
-          _that.Init()
-        })
-      }
+    this.$authed(() => {
+      this.Init()
     })
   },
   methods: {

src/store/index.js

@@ -1,8 +1,11 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
+import { storeAuthPlugin } from '@/util/auth-plugin'
+
 Vue.use(Vuex)
 
 const store = new Vuex.Store({
+  plugins: [storeAuthPlugin],
   state: {
   },
   mutations: {

src/util/PublicMethod/index.js

@@ -44,24 +44,26 @@ const ToolClass = {
       ...(config.data || {}),
       header: { ...Header },
       success: (res) => {
-        if (res.header['X-Authorization-Jwt'] !== undefined) { // 更新本地存储token
-          wx.setStorageSync('token', res.header['X-Authorization-Jwt'])
+        const token = res.header['X-Authorization-Jwt'] || res.header['X-Authorization-JWT']
+        if (token) { // 更新本地存储token
+          wx.setStorageSync('token', token)
         }
         if (res.data.code - 0 === 1001) { // token失效
-          wx.login({ // 微信获取code
-            success (subRes) {
-              wx.request({ // 登录获取token
-                url: `${SERVER_API}/login?code=${subRes.code}`,
-                method: `post`,
-                success: (cRes) => {
-                  if (cRes.header['X-Authorization-Jwt'] !== undefined) { // 更新本地存储token
-                    wx.setStorageSync('token', cRes.header['X-Authorization-Jwt'])
-                    _that.WxRequest(config) // 获得token之后重新请求接口
-                  }
-                }
-              })
-            }
-          })
+          // wx.login({ // 微信获取code
+          //   success (subRes) {
+          //     wx.request({ // 登录获取token
+          //       url: `${SERVER_API}/login?code=${subRes.code}`,
+          //       method: `post`,
+          //       success: (cRes) => {
+          //         const token = cRes.header['X-Authorization-Jwt'] || cRes.header['X-Authorization-JWT']
+          //         if (token) { // 更新本地存储token
+          //           wx.setStorageSync('token', token)
+          //           _that.WxRequest(config) // 获得token之后重新请求接口
+          //         }
+          //       }
+          //     })
+          //   }
+          // })
         }
         if (config.success !== undefined && res.data.code - 0 === 1000) {
           config.success(res)

src/util/auth-plugin.js

@@ -0,0 +1,28 @@
+import observe from './observe'
+
+const monitor = observe()
+
+// 只执行一次
+let done = false
+
+// VUEX 插件
+export function storeAuthPlugin(store) {
+  store.subscribe((mutation, state) => {
+    if (!done && mutation.type === 'user/EditUserInfo') {
+      monitor.notify()
+      done = true
+    }
+  })
+}
+
+// VUE 插件
+export function vueAuthPlugin(Vue, options) {
+  // 添加实例 $authed 方法
+  Vue.prototype.$authed = function(next) {
+    if (done) {
+      next()
+    } else {
+      monitor.subscribe(next)
+    }
+  }
+}

src/util/observe.js

@@ -0,0 +1,22 @@
+
+export default function observe() {
+  const listeners = []
+
+  function notify(...args) {
+    listeners.forEach(listener => listener(...args))
+  }
+
+  function subscribe (listener) {
+    listeners.push(listener)
+
+    return function unsubscribe() {
+      const index = listeners.indexOf(listener)
+      listeners.splice(index, 1)
+    }
+  }
+
+  return {
+    notify,
+    subscribe
+  }
+}