perf: 优化邀请加入项目

resources/assets/js/App.vue

@@ -17,6 +17,9 @@
         <!--会议管理-->
         <MeetingManager/>
 
+        <!--项目邀请-->
+        <ProjectInvite/>
+
         <!--下拉菜单-->
         <DropdownMenu/>
 
@@ -89,6 +92,7 @@ import NetworkException from "./components/NetworkException";
 import GuidePage from "./components/GuidePage";
 import TaskOperation from "./pages/manage/components/TaskOperation";
 import MeetingManager from "./pages/manage/components/MeetingManager";
+import ProjectInvite from "./pages/manage/components/ProjectInvite";
 import MobileNotification from "./components/Mobile/Notification.vue";
 import MobileBack from "./components/Mobile/Back.vue";
 import DropdownMenu from "./components/DropdownMenu";
@@ -109,6 +113,7 @@ export default {
         MobileNotification,
         AuthException,
         MeetingManager,
+        ProjectInvite,
         DropdownMenu,
         TaskOperation,
         NetworkException,
@@ -418,6 +423,14 @@ export default {
                         });
                         return 2;
                     }
+                    // manage/project/invite/xxxx 项目邀请
+                    // manage/project/invite?code=xxxx 项目邀请
+                    if (/^\/manage\/project\/invite/.test(pathname)) {
+                        const paths = pathname.split('/')
+                        const code = paths.length > 4 ? paths[4] : searchParams.get('code')
+                        emitter.emit('openProjectInvite', {code})
+                        return 2;
+                    }
                 } catch (e) { }
             }
             return 0;

resources/assets/js/pages/manage/components/ProjectInvite.vue

@@ -0,0 +1,152 @@
+<template>
+    <div class="project-invite-warp">
+        <Modal
+            v-model="show"
+            :title="$L('加入项目')"
+            :mask-closable="false">
+            <div v-if="loadIng > 0" class="invite-load">
+                <Loading class="invite-load-icon"/>
+            </div>
+            <div v-else-if="project.id > 0" class="invite-content">
+                <p slot="title" class="invite-title" v-html="transformEmojiToHtml(project.name)"></p>
+                <div v-if="project.desc" class="invite-desc" :title="$L('项目介绍')">{{project.desc}}</div>
+                <div v-else>{{$L('暂无介绍')}}</div>
+            </div>
+            <div v-else>
+                <p>{{$L('邀请地址不存在或已被删除！')}}</p>
+            </div>
+            <div slot="footer" class="adaption">
+                <template v-if="already">
+                    <Button v-if="project.id > 0" type="default" @click="show=false">{{$L('关闭')}}</Button>
+                    <Button v-if="already" type="success" icon="ios-checkmark-circle-outline" @click="goProject">{{$L('已加入')}}</Button>
+                </template>
+                <template v-else-if="project.id > 0">
+                    <Button v-if="project.id > 0" :disabled="joinLoad > 0" type="default" @click="show=false">{{$L('取消')}}</Button>
+                    <Button type="primary" :loading="joinLoad > 0" @click="joinProject">{{$L('加入项目')}}</Button>
+                </template>
+                <template v-else>
+                    <Button type="default" @click="show=false">{{$L('关闭')}}</Button>
+                </template>
+            </div>
+        </Modal>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.invite-load {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 12px 0;
+    .invite-load-icon {
+        width: 24px;
+        height: 24px;
+    }
+}
+.invite-content {
+    .invite-title {
+        font-size: 16px;
+        font-weight: bold;
+        margin-bottom: 12px;
+    }
+    .invite-desc {
+        max-width: 460px;
+        max-height: 300px;
+        overflow: auto;
+    }
+}
+</style>
+<script>
+import emitter from "../../../store/events";
+import transformEmojiToHtml from "../../../utils/emoji";
+
+export default {
+    name: "ProjectInvite",
+    data() {
+        return {
+            show: false,
+            code: '',
+
+            loadIng: 0,
+            joinLoad: 0,
+
+            already: false,
+            project: {},
+        }
+    },
+
+    mounted() {
+        emitter.on('openProjectInvite', this.open)
+    },
+
+    beforeDestroy() {
+        emitter.off('openProjectInvite', this.open)
+    },
+
+    methods: {
+        transformEmojiToHtml,
+
+        /**
+         * 打开邀请
+         */
+        open(code) {
+            this.code = code
+            this.show = true
+            this.getData()
+        },
+
+        /**
+         * 获取邀请信息
+         */
+        getData() {
+            this.loadIng++;
+            this.already = false
+            this.project = {}
+            this.$store.dispatch("call", {
+                url: 'project/invite/info',
+                data: {
+                    code: this.code,
+                },
+            }).then(({data}) => {
+                this.already = data.already;
+                this.project = data.project;
+            }).catch(() => {
+                this.project = {}
+            }).finally(_ => {
+                this.loadIng--;
+            });
+        },
+
+        /**
+         * 加入项目
+         */
+        joinProject() {
+            this.joinLoad++;
+            this.$store.dispatch("call", {
+                url: 'project/invite/join',
+                data: {
+                    code: this.code,
+                },
+            }).then(({data}) => {
+                this.already = data.already;
+                this.project = data.project;
+                this.goProject();
+            }).catch(({msg}) => {
+                $A.modalError(msg);
+            }).finally(_ => {
+                this.joinLoad--;
+            });
+        },
+
+         /**
+         * 跳转到项目
+         */
+         goProject() {
+            this.show = false
+            this.$nextTick(() => {
+                $A.goForward({name: 'manage-project', params: {projectId: this.project.id}});
+            })
+        },
+    }
+}
+</script>