fix issue

templates/repo/wx_autorize.tmpl

@@ -1,23 +1,15 @@
 <!-- 头部导航栏 -->
 {{template "base/head" .}}
+<div class="alert"></div>
 <div class="repository release dataset-list view">
     {{template "repo/header" .}}
     {{template "base/alert" .}}
-    <div class="ui container">
-        <div class="ui placeholder segment bgtask-none">
-            <div class="bgtask-content-header">
-                <h3>微信扫码认证</h3>
-                <p>请绑定微信，然后再使用启智算力环境</p>
-            </div>
-            <div class="wx-login" style="display: flex;flex-direction: column;align-items: center;margin-top: 24px;">
-                <div class="qrcode" style="width: 200px;height: 200px;    line-height: 180px;text-align: center;">
-                    <img style="width: 100%;height: 100%;" src="https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=gQE_8DwAAAAAAAAAAS5odHRwOi8vd2VpeGluLnFxLmNvbS9xLzAySzQ0ZVltOGVlVUYxMEIxZk55Y3YAAgStAA9iAwR4AAAA" data-v-62ff647a="">
-                </div>
-                <div class="desc">微信扫码关注公众号即可完成绑定</div>
-            </div>
-            <div class="user-agreement" style="display: flex;align-items: center;justify-content: center;">
-                <i class="ri-information-line"></i>绑定微信代表已阅读并接受OpenI启智社区AI协作平台使用协议
-            </div>
-        </div>
-    </div>
-<div>
+    <div id="WxAutorize"></div> 
+</div>
+</div>
+</div>
+
+
+
+</div>
+{{template "base/footer" .}}

web_src/js/components/WxAutorize.vue

@@ -0,0 +1,147 @@
+<template>
+<div>
+    <div class="ui container">
+        <div class="ui placeholder segment bgtask-none">
+            <div class="bgtask-content-header">
+                <h2 class="wx-title">微信扫码认证</h2>
+                <p class="wx-desc-top">请绑定微信，然后再使用启智算力环境</p>
+            </div>
+            <div class="wx-login">
+                <div class="qrcode" >
+                    <img class="wx-qrcode" :src="wx_qrcodeImg" v-show="!!wx_qrcodeImg">
+                    <span class="el-icon-loading" v-show="wxLoading"></span>
+                    <img class="wx-qrcode-reload" v-if="qrCodeReload" @click="getWxQrcode(true)" src="https://files.wondercv.com/auth/qrcode_reload.png">
+                </div>
+                <div class="wx-desc-bottom" style="color:#919191">微信扫码关注公众号即可完成绑定</div>
+            </div>
+            <div class="user-agreement">
+                <i class="ri-information-line orange"></i>绑定微信代表已阅读并接受<a>OpenI启智社区AI协作平台使用协议</a>
+            </div>
+        </div>
+    </div>
+</div>
+</template>
+
+<script>
+const {_AppSubUrl, _StaticUrlPrefix, csrf} = window.config;
+export default {
+  components: {
+  },
+  data() {
+    return {
+        wx_qrcodeImg:'',
+        wxLoading:false,
+        isLogin:false,
+        SceneStr:'',
+        status:'',
+        qrCodeReload:false
+    };
+  },
+  methods: {
+    getWxQrcode(reloadFlag) {
+        if(reloadFlag){
+            this.qrCodeReload=false
+        }
+        this.wxLoading = true
+        this.$axios.get('/authentication/wechat/qrCode4Bind').then((res)=>{
+            let ticket = res.data.data.Ticket
+            this.SceneStr = res.data.data.SceneStr
+            this.wx_qrcodeImg = 'https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket='+ticket
+            this.wxLoading = false
+            this.WxqrCheck()
+        })
+      },
+    WxqrCheck(){
+        this.$axios.get(`/authentication/wechat/bindStatus?sceneStr=${this.SceneStr}`).then((res)=>{
+            this.status = res.data.data.status
+            this.isLogin = true
+        })
+      }
+  },
+  watch:{
+    isLogin: function () {
+        let times = setInterval(async () => {
+            if (this.status===0) {
+                this.WxqrCheck()
+            } else if (this.status === 9) {
+                this.qrCodeReload=true
+            } else if (this.status === 2) {
+                //用户登录成功后清除定时器
+                clearInterval(times)
+            }
+            console.log(times)
+        }, 5000)
+    },
+  },
+  mounted() {
+      this.getWxQrcode(false)
+  },
+  created() {
+  }
+
+};
+</script>
+
+<style scoped>
+.el-icon-loading{
+    position: absolute;
+    font-size: 32px;
+    color: #bcbcbc;
+    top: calc(50% - 16px);
+    left: calc(50% - 16px);
+    animation: rotating 2s linear infinite;
+}
+.wx-title{
+    font-family: SourceHanSansSC-medium;
+    font-size: 24px;
+    color: rgba(16, 16, 16, 100);
+}
+.wx-desc-top{
+    font-size: 14px;
+    color: rgba(16, 16, 16, 100);
+    font-family: SourceHanSansSC-light;
+}
+.qrcode{
+    width: 200px;
+    height: 200px;
+    line-height: 180px;
+    text-align: center;
+    position: relative;
+}
+.wx-login{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 24px;
+}
+.wx-qrcode{
+    width: 100%;
+    height: 100%;
+}
+.wx-qrcode-reload{
+    width: 100%;
+    height: 100%;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    cursor: pointer;
+}
+.wx-desc-bottom{
+    color: rgba(145, 145, 145, 100);
+    font-size: 14px;
+    font-family: SourceHanSansSC-regular;
+}
+.user-agreement{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 51px;
+    color: rgba(16, 16, 16, 100);
+    font-size: 14px;
+    font-family: SourceHanSansSC-regular;
+}
+.orange{
+    color: #f2711c;
+}
+
+</style>

web_src/js/index.js

@@ -40,6 +40,8 @@ import EditTopics from './components/EditTopics.vue';
 import DataAnalysis from './components/DataAnalysis.vue'
 import Contributors from './components/Contributors.vue'
 import Model from './components/Model.vue';
+import WxAutorize from './components/WxAutorize.vue'
+
 
 Vue.use(ElementUI);
 Vue.prototype.$axios = axios;
@@ -2919,6 +2921,7 @@ $(document).ready(async () => {
   initVueImages();
   initVueModel();
   initVueDataAnalysis();
+  initVueWxAutorize();
   initTeamSettings();
   initCtrlEnterSubmit();
   initNavbarContentToggle();
@@ -3713,7 +3716,16 @@ function initObsUploader() {
     template: '<ObsUploader />'
   });
 }
-
+function initVueWxAutorize() {
+  const el = document.getElementById('WxAutorize');
+  if (!el) {
+    return;
+  }
+  new Vue({
+    el:el,
+    render: h => h(WxAutorize)
+  });
+}
 
 window.timeAddManual = function () {
   $('.mini.modal')