。

src/router.js

@@ -264,6 +264,18 @@ const router = new Router({
             name: 'sysMessage',
             component: () => import(/* webpackChunkName: "sysMessage" */ '@/views/sysMessage.vue'),
             meta: { statusBar: 'dark' }
+        },
+        {
+            path: '/settings',
+            name: 'settings',
+            component: () => import(/* webpackChunkName: "settings" */ '@/views/settings.vue'),
+            meta: { statusBar: 'dark' }
+        },
+        {
+            path: '/about',
+            name: 'about',
+            component: () => import(/* webpackChunkName: "about" */ '@/views/about.vue'),
+            meta: { statusBar: 'dark' }
         }
     ]
 });

src/views/about.vue

@@ -0,0 +1,20 @@
+<template>
+    <div>
+        <nav-bar title="关于我们" @click-left="$router.go(-1)"></nav-bar>
+        <img src="../assets/about_title.png" class="title-img" />
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {};
+    }
+};
+</script>
+<style lang="less" scoped>
+.title-img {
+    margin: 30px 0 0 16px;
+    height: 34px;
+    width: auto;
+}
+</style>

src/views/conversations.vue

@@ -56,7 +56,7 @@ export default {
                 sessionId: item.sessionId
             });
             this.$set(item, 'unread', 0);
-            if (item.type === 'PUBLISH' || item.type === 'DOCKING') {
+            if (item.type === 'PUBLISH' || item.type === 'DOCKING' || item.type === 'SYS') {
                 this.$router.push({
                     name: 'message',
                     query: {

src/views/index/home.vue

@@ -2,7 +2,7 @@
     <div style="padding-bottom: calc(50px + var(--safe-bottom));">
         <div class="notification-wrapper" @click="$router.push({ name: 'conversations' })">
             <img src="../../assets/home_notification.png" />
-            <div class="badge"></div>
+            <div class="badge" v-if="showBadge"></div>
         </div>
         <transition name="fade">
             <div class="nav-bar" v-if="showNavBar">
@@ -12,7 +12,7 @@
                 </div>
                 <div class="notification" @click="$router.push({ name: 'conversations' })">
                     <img src="../../assets/home_notification.png" />
-                    <div class="badge"></div>
+                    <div class="badge" v-if="showBadge"></div>
                 </div>
             </div>
         </transition>
@@ -72,6 +72,7 @@ export default {
     data() {
         return {
             showNavBar: false,
+            showBadge: false,
             news: []
         };
     },
@@ -85,6 +86,11 @@ export default {
     },
     mounted() {
         this.$el.parentElement.addEventListener('scroll', this.scroll);
+        this.$http.get('/message/unreadNum').then(res => {
+            if (res > 0) {
+                this.showBadge = true;
+            }
+        });
     },
     beforeDestroy() {
         this.$el.parentElement.removeEventListener('scroll', this.scroll);

src/views/index/my.vue

@@ -1,38 +1,49 @@
 <template>
     <div>
-        <div class="head">
-            <div class="bg"></div>
-        </div>
         <div class="user">
             <img
                 class="avatar"
                 :src="(userInfo || {}).avatar || 'https://jxjmrh.oss-cn-hangzhou.aliyuncs.com/image/avatar.jpg'"
             />
-            <div class="name" v-if="userInfo && userInfo.id">{{ userInfo.nickname }}</div>
-            <router-link tag="div" to="/login" class="btn-login" v-else>登录</router-link>
+            <div class="info" v-if="userInfo && userInfo.id">
+                <div class="name">{{ userInfo.nickname }}</div>
+                <div class="desc" v-if="userInfo.orgName">
+                    {{ userInfo.orgName }}
+                </div>
+                <div class="desc" v-else @click="$router.push({ name: 'profile' })">
+                    企业信息未补全
+                    <img class="edit" src="../../assets/my_icon_edit_profile.png" />
+                </div>
+            </div>
+            <div class="info" v-else @click="$router.push({ name: 'login' })">
+                <div class="name">暂未登录</div>
+                <div class="desc">
+                    立即登录获取精彩服务
+                    <img class="into" src="../../assets/icon_into.png" />
+                </div>
+            </div>
+            <div class="notification" @click="$router.push({ name: 'conversations' })">
+                <img src="../../assets/home_notification.png" />
+                <div class="badge" v-if="showBadge"></div>
+            </div>
         </div>
         <div class="menus">
-            <router-link class="item" to="/collections">
+            <div class="item" @click="to('/collections')">
                 <img src="../../assets/my_menu_icon_1.png" class="icon" />
                 <div class="text">我的收藏</div>
                 <img src="../../assets/icon_into.png" class="into" />
-            </router-link>
-            <router-link to="/myInteract" class="item">
+            </div>
+            <div class="item" @click="to('/myInteract')">
                 <img src="../../assets/my_menu_icon_2.png" class="icon" />
                 <div class="text">我的互动</div>
                 <img src="../../assets/icon_into.png" class="into" />
-            </router-link>
-            <router-link to="/profile" class="item">
+            </div>
+            <div class="item" @click="to('/about')">
                 <img src="../../assets/my_menu_icon_3.png" class="icon" />
-                <div class="text">资料编辑</div>
-                <img src="../../assets/icon_into.png" class="into" />
-            </router-link>
-            <div class="item">
-                <img src="../../assets/my_menu_icon_4.png" class="icon" />
                 <div class="text">关于我们</div>
                 <img src="../../assets/icon_into.png" class="into" />
             </div>
-            <div class="item">
+            <div class="item" @click="to('/settings')">
                 <img src="../../assets/my_menu_icon_5.png" class="icon" />
                 <div class="text">系统设置</div>
                 <img src="../../assets/icon_into.png" class="into" />
@@ -44,69 +55,109 @@
 import { mapState } from 'vuex';
 export default {
     data() {
-        return {};
+        return {
+            showBadge: false
+        };
     },
     computed: {
         ...mapState(['userInfo'])
+    },
+    created() {
+        this.$http.get('/message/unreadNum').then(res => {
+            if (res > 0) {
+                this.showBadge = true;
+            }
+        });
+    },
+    methods: {
+        to(to, login = true) {
+            if (login) {
+                if (this.checkLogin()) {
+                    this.$router.push(to);
+                }
+            } else {
+                this.$router.push(to);
+            }
+        }
     }
 };
 </script>
 <style lang="less" scoped>
-.head {
-    height: 103px;
-    box-sizing: content-box;
-    padding-top: var(--safe-top);
-    position: relative;
-    .bg {
-        position: absolute;
-        bottom: 0;
-        left: -1000px;
-        right: -1000px;
-        margin: auto;
-        background: @prim;
-        width: 1200px;
-        height: 1200px;
-        border-radius: 50%;
-    }
-}
 .user {
-    .flex-col();
+    .flex();
+    height: 240px;
+    background: @prim;
     align-items: center;
-    margin-top: -45px;
-    z-index: 1;
     position: relative;
     .avatar {
         width: 90px;
         height: 90px;
+        min-width: 90px;
+        margin-left: 34px;
         object-fit: cover;
         border-radius: 50%;
-        border: 6px solid #ffffff;
         background: white;
     }
-    .name {
-        font-size: 22px;
-        font-weight: bold;
-        color: black;
-        margin-top: 1px;
+    .info {
+        margin: 0 16px;
+        .flex-col();
+        flex-grow: 1;
+        .name {
+            color: white;
+            font-size: 22px;
+            font-weight: bold;
+            line-height: 30px;
+            .ellipsisLn(1);
+        }
+        .desc {
+            .flex();
+            color: rgba(255, 255, 255, 0.7);
+            font-size: 13px;
+            line-height: 24px;
+            position: relative;
+            .into {
+                width: 24px;
+                min-width: 24px;
+                height: 24px;
+            }
+            .edit {
+                width: 32px;
+                min-width: 32px;
+                height: 32px;
+                position: absolute;
+                right: 0;
+                top: 0;
+                bottom: 0;
+                margin: auto;
+            }
+        }
     }
-    .btn-login {
-        .flex();
-        color: white;
-        font-size: 13px;
-        padding: 0 12px;
-        height: 30px;
-        background: @prim;
-        border-radius: 4px;
-        margin-top: 10px;
-        &:active {
-            background: shade(@prim, 10%);
+    .notification {
+        position: absolute;
+        top: 56px;
+        right: 16px;
+        img {
+            width: 32px;
+            height: 32px;
+        }
+        .badge {
+            position: absolute;
+            top: 3px;
+            right: 3px;
+            background: #ff5b5b;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
         }
     }
 }
 .menus {
-    margin-top: 30px;
+    margin-top: -20px;
     .flex-col();
     position: relative;
+    border-radius: 22px 22px 0 0;
+    background: white;
+    padding-top: 16px;
     .item {
         position: relative;
         .flex();

src/views/login.vue

@@ -6,8 +6,10 @@
             <input placeholder="请输入手机号" type="tel" v-model="phone" />
         </div>
         <div class="cell">
-            <img class="icon" src="../assets/login_icon_pwd.png" />
+            <img class="icon" src="../assets/login_icon_code.png" />
             <input placeholder="请输入验证码" v-model="code" type="number" />
+            <div class="btn-code disable" v-if="time > 0">{{ time }}秒后重新发送</div>
+            <div class="btn-code" v-else @click="sendCode">发送验证码</div>
         </div>
         <div class="btn-lg btn-login" @click="login">登录</div>
         <router-link tag="div" to="/register" replace class="btn-lg-o btn-register">
@@ -20,13 +22,28 @@ export default {
     data() {
         return {
             phone: '',
-            code: ''
+            code: '',
+            time: 0
         };
     },
     methods: {
+        sendCode() {
+            if (!/^1[3-9]\d{9}$/.test(this.phone)) {
+                this.$toast('请输入正确的手机号');
+                return;
+            }
+            this.$toast('验证码已发送');
+            this.time = 60;
+            let i = setInterval(() => {
+                this.time--;
+                if (this.time == 0) {
+                    clearInterval(i);
+                }
+            }, 1000);
+        },
         login() {
-            if (!this.phone) {
-                this.$toast('请输入手机号');
+            if (!/^1[3-9]\d{9}$/.test(this.phone)) {
+                this.$toast('请输入正确的手机号');
                 return;
             }
             if (!this.code) {
@@ -82,4 +99,17 @@ export default {
 .btn-register {
     margin: 20px auto 0 auto;
 }
+.btn-code {
+    font-size: 13px;
+    color: @prim;
+    &:active {
+        color: fade(@prim, 60%);
+    }
+    &.disable {
+        color: @text3;
+        &:active {
+            color: @text3;
+        }
+    }
+}
 </style>

src/views/message.vue

@@ -1,8 +1,6 @@
 <template>
     <div style="background:#F5F7FA" @scroll="scroll">
-        <nav-bar @click-left="$router.go(-1)" :title="title">
-            <div slot="right">全部已读</div>
-        </nav-bar>
+        <nav-bar @click-left="$router.go(-1)" :title="title"> </nav-bar>
         <div class="list" v-if="userInfo && userInfo.id">
             <template v-for="item in reverseMessages">
                 <div
@@ -58,18 +56,13 @@ export default {
     },
     created() {
         this.title = this.$route.query.title;
-        this.getData();
+
         this.$http.get(`/conversation/get/${this.$route.query.conversationId}`).then(res => {
             this.conversation = res;
-            setTimeout(() => {
-                this.scrollToBottom();
-            }, 100);
         });
     },
     mounted() {
-        this.$nextTick(() => {
-            this.scrollToBottom();
-        });
+        this.getData();
     },
     methods: {
         getData() {
@@ -88,7 +81,12 @@ export default {
                     this.messages = this.messages.concat(res.content);
                     this.last = res.last;
                     this.loading = false;
-                    if (this.scrollBottom) {
+                    if (res.first) {
+                        this.$nextTick(() => {
+                            let el = document.querySelector('#root');
+                            el.scrollTop = el.scrollHeight;
+                        });
+                    } else if (this.scrollBottom) {
                         this.$nextTick(() => {
                             this.$el.scrollTop =
                                 this.$el.scrollHeight - this.$el.getBoundingClientRect().height - this.scrollBottom;

src/views/register.vue

@@ -6,12 +6,18 @@
             <input placeholder="请输入手机号" v-model="phone" type="tel" />
         </div>
         <div class="cell">
-            <img class="icon" src="../assets/login_icon_pwd.png" />
+            <img class="icon" src="../assets/login_icon_code.png" />
             <input placeholder="请输入验证码" v-model="code" type="number" />
+            <div class="btn-code disable" v-if="time > 0">{{ time }}秒后重新发送</div>
+            <div class="btn-code" v-else @click="sendCode">发送验证码</div>
+        </div>
+        <div class="cell">
+            <img class="icon" src="../assets/login_icon_pwd.png" />
+            <input placeholder="请输入密码" v-model="password" type="password" />
         </div>
         <div class="cell">
             <img class="icon" src="../assets/login_icon_pwd.png" />
-            <input placeholder="请输入密码" v-model="password" />
+            <input placeholder="请再次输入密码" v-model="password1" type="password" />
         </div>
         <div class="btn-lg btn-login" @click="register">注册</div>
         <router-link class="btn-lg-o btn-register" tag="div" to="/login" replace>
@@ -25,10 +31,26 @@ export default {
         return {
             phone: '',
             code: '',
-            password: ''
+            time: 0,
+            password: '',
+            password1: ''
         };
     },
     methods: {
+        sendCode() {
+            if (!/^1[3-9]\d{9}$/.test(this.phone)) {
+                this.$toast('请输入正确的手机号');
+                return;
+            }
+            this.$toast('验证码已发送');
+            this.time = 60;
+            let i = setInterval(() => {
+                this.time--;
+                if (this.time == 0) {
+                    clearInterval(i);
+                }
+            }, 1000);
+        },
         register() {
             if (!/^1[3-9]\d{9}$/.test(this.phone)) {
                 this.$toast('请输入正确的手机号');
@@ -36,6 +58,10 @@ export default {
                 this.$toast('请输入验证码');
             } else if (!this.password) {
                 this.$toast('请输入密码');
+            } else if (this.password < 8) {
+                this.$toast('密码长度不得小于8位');
+            } else if (this.password !== this.password1) {
+                this.$toast('两次密码输入不一致');
             } else {
                 this.$toast.loading();
                 this.$http
@@ -88,4 +114,17 @@ export default {
 .btn-register {
     margin: 20px auto 0 auto;
 }
+.btn-code {
+    font-size: 13px;
+    color: @prim;
+    &:active {
+        color: fade(@prim, 60%);
+    }
+    &.disable {
+        color: @text3;
+        &:active {
+            color: @text3;
+        }
+    }
+}
 </style>

src/views/settings.vue

@@ -0,0 +1,85 @@
+<template>
+    <div>
+        <nav-bar title="系统设置" @click-left="$router.go(-1)"> </nav-bar>
+        <div style="height:20px"></div>
+        <div class="cell" @click="checkUpdate">
+            <div class="title">检查更新</div>
+            <img src="../assets/icon_into.png" class="into" />
+        </div>
+        <div class="cell">
+            <div class="title">当前版本</div>
+            <div class="value">1.0.0</div>
+        </div>
+        <div class="btn-lg btn-logout" @click="logout">退出登录</div>
+        <div class="foot">江西省军民融合公共服务平台</div>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {};
+    },
+    methods: {
+        checkUpdate() {
+            this.$toast('已是最新版本');
+        },
+        logout() {
+            this.$dialog
+                .confirm({
+                    title: '是否确认退出登录？'
+                })
+                .then(() => {
+                    // on confirm
+                    this.$store.commit('setUserInfo', null);
+                    localStorage.removeItem('token');
+                    this.$router.replace({ name: 'home' });
+                })
+                .catch(() => {
+                    // on cancel
+                });
+        }
+    }
+};
+</script>
+<style lang="less" scoped>
+.cell {
+    .flex();
+    height: 68px;
+    padding: 0 16px;
+    position: relative;
+    &::after {
+        .setBottomLine();
+        left: 16px;
+        right: 16px;
+    }
+    .title {
+        flex-grow: 1;
+        color: black;
+        font-size: 14px;
+        font-weight: bold;
+    }
+    .value {
+        color: black;
+        font-size: 14px;
+    }
+    .into {
+        width: 24px;
+        min-width: 24px;
+        height: 24px;
+        position: relative;
+        right: -6px;
+    }
+}
+.btn-logout {
+    margin: 20px auto 0 auto;
+}
+.foot {
+    position: fixed;
+    bottom: var(--safe-bottom);
+    left: 0;
+    right: 0;
+    font-size: 14px;
+    color: @text4;
+    text-align: center;
+}
+</style>