设置 qq

5 years ago · 4e7f7bb6a4
5 changed files with 156 additions and 11 deletions
--- a/src/router/modules/root.js
+++ b/src/router/modules/root.js
@ -4,6 +4,11 @@ export default [
        meta: {requireLogin: false},
        component: () => import(/* webpackChunkName: 'root' */ '@/views/test')
    },
+    {
+        path: '/redirect',
+        meta: {requireLogin: false},
+        component: () => import(/* webpackChunkName: 'root' */ '@/views/redirect')
+    },
    {
        path: '/',
        meta: {requireLogin: false},
--- a/src/views/account/login.vue
+++ b/src/views/account/login.vue
@ -179,7 +179,9 @@
                        <el-link style="margin-left: 20px;">忘记密码</el-link>
                        <el-link style="margin-left: 20px;" @click="registerHandleClick">立即注册</el-link>
                        <div class="other-login">
-                            <svg-icon name="loginQQ" class="other-login-icon" />
+                            <span @click="redirectUrl(qqLoginAuthorizeUrl)">
+                                <svg-icon name="loginQQ" class="other-login-icon" />
+                            </span>
                            <svg-icon name="loginWx" class="other-login-icon" />
                        </div>
                    </div>
--- a/src/views/form/setting.vue
+++ b/src/views/form/setting.vue
@ -32,7 +32,7 @@
                        accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.GIF,.BMP"
                        :headers="getUploadHeader"
                        :on-success="uploadSubmitPromptHandle"
-                        action="/user/file/upload"
+                        :action="getUploadUrl"
                        :show-file-list="false">
                        <el-link slot="trigger" size="small" type="primary">请上传提示图片 *</el-link>
                    </el-upload>
@ -415,7 +415,7 @@
                            accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.GIF,.BMP"
                            :headers="getUploadHeader"
                            :on-success="uploadShareImgHandle"
-                            action="/user/file/upload"
+                            :action="getUploadUrl"
                            :show-file-list="false">
                            <div class="block">
                                <el-image
@ -474,12 +474,34 @@
                            class="setting-input" style="width: 80%" v-model="userProjectSettingData.shareDesc"/>
                    </el-col>
                </el-row>
+                <div v-if="userProjectSettingData.shareDesc||userProjectSettingData.shareTitle||userProjectSettingData.shareImg">
+                    <div class="share-preview">
+                        <div class="share-preview-msg">
+                            <div>
+                                <p class="share-preview-msg-title">
+                                    {{ userProjectSettingData.shareTitle }}
+                                </p>
+                                <p class="share-preview-msg-desc">
+                                    {{ userProjectSettingData.shareDesc }}
+                                </p>
+                            </div>
+                            <div>
+                                <img :src="userProjectSettingData.shareImg" style="width: 49px;height: 46px;"/>
+                            </div>
+                        </div>
+                        <div>
+                            <img class="share-user-avatar" :src="getUserInfo.avatar"/>
+                        </div>
+                    </div>
+                </div>
            </el-col>
        </el-row>
    </el-form>
 </template>

 <script>
+import store from '@/store'
+
 export default {
    name: 'projectSetting',
    props: {
@ -541,6 +563,12 @@ export default {
            return {
                'token': this.$store.getters['user/isLogin']
            }
+        },
+        getUploadUrl() {
+            return `${process.env.VUE_APP_API_ROOT}/user/file/upload`
+        },
+        getUserInfo() {
+            return JSON.parse(this.$store.getters['user/userInfo'])
        }
    },
    mounted() {
@ -736,6 +764,70 @@ export default {
    justify-content: center;
 }

+.share-preview {
+    width: 360px;
+    height: 162px;
+    margin: 0 auto;
+    border-radius: 5px;
+    background-color: rgba(210, 210, 210, 42);
+    border: 1px solid rgba(255, 255, 255, 100);
+    display: flex;
+    align-content: center;
+    align-items: center;
+    justify-content: space-around;
+}
+
+.share-preview-msg {
+    width: 210px;
+    height: 88px;
+    border-radius: 5px;
+    background-color: white;
+    color: rgba(16, 16, 16, 100);
+    box-shadow: 0px 0px 3px 0px rgba(157, 158, 162, 100);
+    padding: 5px;
+    display: flex;
+    align-items: center;
+    justify-items: center;
+    justify-content: center;
+    position: relative;
+}
+
+.share-preview-msg::after {
+    content: '';
+    border: 10px solid transparent;
+    border-left-color: #fff;
+    position: absolute;
+    right: -18px;
+    top: 5px;
+    width: 0;
+}
+
+
+.share-preview-msg-title {
+    line-height: 22px;
+    height: 25px;
+    margin: 3px;
+    color: rgba(16, 16, 16, 100);
+    font-size: 14px;
+    text-align: center;
+}
+
+.share-preview-msg-desc {
+    margin: 3px;
+    color: rgba(144, 147, 153, 100);
+    font-size: 12px;
+    line-height: 20px;
+    height: 60px;
+    width: 155px;
+    text-align: left;
+}
+
+.share-user-avatar {
+    width: 49px;
+    height: 49px;
+    border-radius: 6px;
+}
+
 /deep/ .setting-input input {
    border: none;
    border-bottom: 1px solid rgba(187, 187, 187, 100);
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@ -4,7 +4,7 @@
            <el-row type="flex" align="middle">
                <el-col :span="4" :offset="1">
                    <img src="@/assets/images/indexLogo.png" class="header-logo-img"
-                         @click="$router.push({path:'/project/create'})"
+                         @click="$router.push({path:'/'})"
                    >
                </el-col>
                <el-col :span="10">
@ -17,12 +17,6 @@
                            {{ item.title }}
                        </el-menu-item>
                    </el-menu>
-                    <!--                    <span v-for="(item, index) in menuRouters" :key="index"-->
-                    <!--                          class="menu-item"-->
-                    <!--                          @click="activeMenuHandle(item.routerPath)"-->
-                    <!--                    >-->
-                    <!--                        {{ item.title }}-->
-                    <!--                    </span>-->
                </el-col>
                <el-col :span="1">
                    <el-button round>升级</el-button>
@ -67,7 +61,7 @@
                            </div>
                        </div>
                        <div slot="reference" style="display: flex; align-items: center; justify-content: center;">
-                            <img :src="getUserInfo.avatar" style="width: 50px; height: 50px; border-radius: 100px;">
+                            <img :src="getUserInfo.avatar" class="user-avatar">
                        </div>
                    </el-popover>
                </el-col>
@ -187,5 +181,11 @@ export default {
        border: 1px solid rgba(210, 210, 210, 78);
    }
 }
+.user-avatar {
+    width: 50px;
+    height: 50px;
+    border-radius: 100px;
+    cursor: pointer;
+}

 </style>
--- a/src/views/redirect.vue
+++ b/src/views/redirect.vue
@ -0,0 +1,46 @@
+<template>
+    <div />
+</template>
+
+<script>
+import {getCurrentDomain, getQueryString} from '@/utils'
+
+export default {
+    name: 'Redirect',
+    data() {
+        return {}
+    },
+    created() {
+        // qq 登录重定向
+        let code = getQueryString('code')
+        let state = getQueryString('state')
+        if (code && state) {
+            let reUrl = getCurrentDomain() + '/redirect'
+            this.$api.post('/login/qq', {authorizeCode: code, redirectUri: reUrl}).then(res => {
+                if (res.data) {
+                    this.msgSuccess('登录成功')
+                    this.$store.dispatch('user/login', res.data).then(() => {
+                        // 重置状态
+                        this.$store.dispatch('global/loginExpired', false).then(() => {
+                        })
+                        // 登录成功后路由跳回
+                        if (this.$route.query.redirect) {
+                            this.$router.replace({
+                                path: this.$route.query.redirect
+                            })
+                        } else {
+                            if (window.history.length <= 1) {
+                                this.$router.push({path: '/home'})
+                            } else {
+                                this.$router.push({path: '/home'})
+                            }
+                        }
+                    })
+                }
+            })
+        }
+    },
+    methods: {}
+
+}
+</script>