0527

pc/src/page/clientLogin/index.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="device-layout">
+    <div>
+      <img :src="`${$cdn}images/devicelogin.png`" alt="">
+    </div>
+    <div class="qrcode">
+      <img v-if="codeImg" :src="codeImg?`${$serverName}${codeImg}`:''" alt="">
+      <!-- <img v-if="codeImg" :src="codeImg?`${'https://test.4dkankan.com/'}${codeImg}`:''" alt=""> -->
+      <div class="qrcode-con">
+        <div class="qrcode-dec">{{languagelAside.scansub}}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {mapState} from 'vuex'
+
+export default {
+  props: ['active', 'current'],
+  data () {
+    return {
+      codeImg: '',
+      t1: null
+    }
+  },
+  computed: {
+    ...mapState({
+      languagelAside: state => state.language.home.home.loginAside,
+      language: state => state.language.current,
+      token: state => state.user.token
+    })
+  },
+  beforeDestroy () {
+    clearInterval(this.t1)
+    this.t1 = null
+  },
+  mounted () {
+    this.getQrCode()
+  },
+  watch: {
+    active (newVal) {
+      // (newVal && this.isFirst && !this.token) && this.getQrCode()
+      if (newVal) {
+        this.getQrCode()
+      } else {
+        clearInterval(this.t1)
+        this.t1 = null
+      }
+    }
+  },
+  methods: {
+    async getQrCode () {
+      let res = await this.$http({
+        method: 'get',
+        url: '/sso/user/createLoginQrCode'
+      })
+      this.codeImg = res.data.data.url
+      let params = {
+        uuid: res.data.data.uuid
+      }
+      this.t1 = setInterval(async () => {
+        let data = await this.$http({
+          method: 'post',
+          data: params,
+          url: '/sso/user/sendUserInfo'
+        })
+        let response = data.data
+        if (response.code === 0) {
+          let {token, childName = '', to = ''} = response.data
+          this.$store.commit('saveToken', token)
+
+          if (token && to !== 0) {
+            this.$store.commit('DEVICELOGIN', childName)
+            this.$bus.$emit('hideAside')
+          } else {
+            this.$bus.$emit('hideAside')
+            this.$bus.$emit('hasLogin')
+            this.$store.commit('DEVICELOGIN', '')
+            this.$store.dispatch('getInfo', {url: '/user/getUserInfo', name: 'info'})
+            this.$store.dispatch('getCart')
+          }
+          this.$router.replace({name: 'scene'})
+
+          return false
+        }
+      }, 3000)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  @import './style.scss';
+</style>

pc/src/page/clientLogin/style.scss

@@ -0,0 +1,43 @@
+$lincolor:#d0d0d1;
+
+
+.device-layout{
+  background-color: #232326;
+  height: calc(100vh - 200px);
+  text-align: center;
+  box-sizing: border-box;
+  >div{
+    margin-top: 170px;
+    display: inline-block;
+    width: 230px;
+    >img{
+      width: 100%;
+    }
+  }
+  .qrcode{
+    text-align: center;
+    position: relative;
+    padding: 46px 10px 0;
+    box-sizing: border-box;
+    width: 210px;
+    vertical-align: top;
+    img{
+      display: block;
+      width: 140px;
+      margin: 0 auto 20px;
+    }
+    .scan-img{
+      width: 50px;
+      height: 50px;
+      margin: 52px auto 20px;
+    }
+    .qrcode-dec{
+      color: #fff;
+      width: 100%;
+      letter-spacing: 0.2px;
+      margin-top: 20px;
+      font-size: 14px;
+    }
+  }
+}
+

pc/src/router/index.js

@@ -19,6 +19,11 @@ let router = new Router({
       component: resolve => require(['@/page/videos'], resolve)
     },
     {
+      path: '/clientlogin',
+      name: 'clientlogin',
+      component: resolve => require(['@/page/clientLogin'], resolve)
+    },
+    {
       path: '/video-course',
       name: 'video-course',
       component: resolve => require(['@/page/service/video'], resolve)