feat: 登录改版

components/Common/ComplaintsDeal.vue

@@ -3,7 +3,8 @@
 </template>
 
 <script>
-import { mapGetters, mapActions } from 'vuex'
+import Bus from '@/utils/Bus'
+import { mapGetters } from 'vuex'
 import { CUSTOM_SOURCE_TYPE } from '@/utils/constant'
 
 export default {
@@ -17,7 +18,6 @@ export default {
     this.init()
   },
   methods: {
-    ...mapActions({ jumpToLogin: 'users/jumpToLogin' }),
     init() {
       const { uin } = this.$route.query
       const { id } = this.$route.params
@@ -52,7 +52,7 @@ export default {
                 duration: 1500,
                 onClose() {
                   if (process.client && window.self !== window.top) return
-                  self.jumpToLogin()
+                  self.showLogin()
                 }
               })
             }
@@ -66,6 +66,9 @@ export default {
           }
         }
       })
+    },
+    showLogin() {
+      Bus.$emit('showLogin')
     }
   }
 }

components/Questionnaire/QuestionComponents/QuesInput.vue

@@ -40,7 +40,8 @@
 import rulesConstruct from '@/utils/rulesConstruct'
 import { setSendSmsCode, setValidSmsCode } from '@/api/modules/common'
 import { SMS_SOURCE_TYPE } from '@/utils/constant'
-import { mapGetters, mapActions } from 'vuex'
+import { mapGetters } from 'vuex'
+import Bus from '@/utils/Bus'
 
 // console.log('%c [ setValidSmsCode ]-38', 'font-size:13px; background:pink; color:#bf2c9f;', setValidSmsCode)
 
@@ -108,7 +109,6 @@ export default {
     },
   },
   methods: {
-    ...mapActions({ jumpToLogin: 'users/jumpToLogin' }),
     sendValidCode() {
       if (!this.isLogin) {
         const self = this
@@ -117,7 +117,7 @@ export default {
           duration: 1500,
           onClose() {
             if (process.client && window.self !== window.top) return
-            self.jumpToLogin()
+            self.showLogin()
           },
         })
       }
@@ -154,6 +154,9 @@ export default {
         }
       })
     },
+    showLogin() {
+      Bus.$emit('showLogin')
+    }
   },
 }
 </script>

components/Questionnaire/UserInfo.vue

@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import { mapGetters, mapActions } from 'vuex';
+import Bus from '@/utils/Bus'
+import { mapGetters,  } from 'vuex';
 export default {
     name: 'UserInfo',
     data() {
@@ -20,9 +21,8 @@ export default {
         ...mapGetters({ isLogin: 'users/isLogin', userInfo: 'users/userInfo' }),
     },
     methods: {
-        ...mapActions({ jumpToLogin: 'users/jumpToLogin' }),
         jump() {
-          this.jumpToLogin()
+          Bus.$emit('showLogin')
         }
     }
 };

nuxt.config.js

@@ -104,6 +104,10 @@ export default {
         href: '//www.googletagmanager.com',
         rel: 'dns-prefetch',
       },
+      {
+        rel: 'stylesheet',
+        href: `//${STATIC_SOURCE_DOMAIN}/custom-plugins-library/login-center/style.css`,
+      },
     ],
     script: [
       { src: `//${STATIC_SOURCE_DOMAIN}/web-component/complaintsDeal/complaintsDeal.min.js`, defer: true },
@@ -113,6 +117,9 @@ export default {
       //   defer: true,
       //   body: true,
       // },
+      {
+        src: `//${STATIC_SOURCE_DOMAIN}/custom-plugins-library/login-center/login-center.min.js`
+      },
     ],
   },
 

package.json

@@ -53,6 +53,7 @@
     "alife-logger": "^1.8.6",
     "core-js": "^3.15.1",
     "dayjs": "^1.10.6",
+    "js-cookie": "2.2.0",
     "normalize.css": "^8.0.1",
     "nuxt": "^2.15.7",
     "vant": "^2.12.22",

pages/index.vue

@@ -44,6 +44,7 @@ import Scroll from '@/components/Common/Scroll'
 import { mapGetters, mapActions } from 'vuex'
 import debounce from 'lodash/debounce'
 import Bus from '@/utils/Bus'
+import loginAction from '@/plugins/UserAction/login'
 
 export default {
   components: {
@@ -65,6 +66,7 @@ export default {
       stickyPlaceholder: {},
       isProgressSticky: false,
       isShowResult: false,
+      loginInstance: null,
     }
   },
   computed: {
@@ -97,9 +99,12 @@ export default {
   mounted() {
     this.dataInit()
     this.eventBusInit()
+    this.initLoginCenter()
+    Bus.$on('showLogin', this.toggleLogin)
   },
   destroyed() {
     Bus.$off('onFinished')
+    Bus.$off('showLogin')
   },
   methods: {
     ...mapActions({
@@ -107,6 +112,7 @@ export default {
       getUerInfo: 'users/getUerInfo',
       updateIsPageLoading: 'common/updateIsPageLoading',
       getQuestionnaireInfo: 'questionnaire/getQuestionnaireInfo',
+      jumpToLogin: 'users/jumpToLogin',
     }),
     eventBusInit() {
       Bus.$on('onFinished', () => {
@@ -157,6 +163,74 @@ export default {
       100,
       { maxWait: 100 }
     ),
+    // 云平台登录模块初始化
+    initLoginCenter() {
+      if (!window.LoginCenter) return
+      // eslint-disable-next-line no-undef
+      this.loginInstance = LoginCenter({
+        target: document.body,
+        props: {
+          uin: this.$route.query.uin,
+          zIndex: 100000,
+          backUrl: encodeURIComponent(window.location.href),
+          serviceAgreement: `//${process.env.OSS_DOMAIN}/staticPages/agreement_user.html`,
+          privacyAgreement: `//${process.env.OSS_DOMAIN}/staticPages/agreement_privacy.html`,
+          successCallback: ({ type, response }) => {
+            if (type === 'recover'){
+              this.$toast("密码修改成功!");
+              setTimeout(() => {
+                this.loginInstance.hide()
+              }, 500);
+              return
+            }
+            this.$toast("登录成功!");
+            if (type === 'phone'){
+              this.loginInstance.hide()
+            }
+            if (type === 'password'){
+              this.loginInstance.hide()
+            }
+            const query = this.$route.query
+            const onFinished = () => {
+              delete query.token
+              if (type === 'weixinPc' && 'code' in query){
+                delete query.code
+                this.$router.replace({
+                  path: this.$route.path,
+                  query
+                })
+              }
+              if (type === 'alipay' && 'auth_code' in query){
+                delete query.auth_code
+                this.$router.replace({
+                  path: this.$route.path,
+                  query
+                })
+              }
+            }
+            // const loginAction = require("@/plugins/UserAction/login").default;
+            loginAction.call(this, { token: response.data, onFinished })
+          },
+          failCallback: ({ response }) => {
+            this.$toast(response.errorMessage)
+          },
+        },
+        onMount: () => {
+          console.log('已挂载')
+        },
+      })
+    },
+    // 登录判断
+    toggleLogin() {
+      if (!this.loginInstance) {
+        this.$toast('登录模块加载失败，3秒后为您跳转到登录页')
+        setTimeout(() => {
+          this.jumpToLogin()
+        }, 3000)
+        return
+      }
+      this.loginInstance.show()
+    }
   },
 }
 </script>

plugins/UserAction/login.js

+import Cookie from 'js-cookie'
+
+export default function({token, onFinished} = {token: ''}) {
+  const store = this.$store
+  const { uin } = this.$route.query
+  const { id } = this.$route.params
+  token && Cookie.set('token', token, { expires: 10 });
+  store._actions['users/getUerInfo'][0](uin)
+  store._actions['users/postInfo'][0](id)
+  onFinished && onFinished()
+  return this
+}
\ No newline at end of file

store/questionnaire.js

@@ -128,7 +128,7 @@ export const actions = {
           message: '请先登录',
           duration: 1500,
           onClose: () => {
-            dispatch('users/jumpToLogin', '', { root: true })
+            Bus.$emit('showLogin')
           },
         })
       }
@@ -181,7 +181,7 @@ export const actions = {
           message: '请先登录',
           duration: 1500,
           onClose: () => {
-            dispatch('users/jumpToLogin', '', { root: true })
+            Bus.$emit('showLogin')
           },
         })
       }

yarn.lock

@@ -5637,6 +5637,11 @@ js-base64@^2.5.2:
   resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.6.4.tgz#f4e686c5de1ea1f867dbcad3d46d969428df98c4"
   integrity sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==
 
+js-cookie@2.2.0:
+  version "2.2.0"
+  resolved "https://registry.npmmirror.com/js-cookie/-/js-cookie-2.2.0.tgz#1b2c279a6eece380a12168b92485265b35b1effb"
+  integrity sha512-7YAJP/LPE/MhDjHIdfIiT665HUSumCwPN2hAmO6OJZ8V3o1mtz2HeQ8BKetEjkh+3nqGxYaq1vPMViUR8kaOXw==
+
 js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"