消息通知界面更新

src/App.vue

 <template>
-  <div id="nav" class="bg-app-bg h-screen">
+  <div id="nav" class="bg-app-bg min-h-screen">
     <router-view />
   </div>
 </template>

src/components/Mine/AboutUs/index.vue

 <template>
   <div class="inner_box border border-card-shadow rounded-2xl px-7 pt-8 pb-6 bg-white mt-5">
-    <div class=" bg-app-blue rounded-full w-6 h-6 inline-block mr-2 text-center align-middle">
-      <img :src="path" class=" w-4 h-4 inline-block m-auto">
+    <div class=" bg-app-blue rounded-full w-6 h-6 inline-block mr-2 align-middle relative">
+      <img :src="path" class=" w-3 h-3 absolute inset-0 m-auto">
     </div>
     <span :title="title" class=" text-app-blue font-semibold text-base align-middle">{{title}}</span>
     <p class=" text-gray-700 text-sm text-justify pt-3">

src/components/Mine/Branch/branch.vue

@@ -41,7 +41,7 @@
   <!-- 底部操作 -->
   <div class=" flex text-center py-3 text-gray-800 bg-gray-50">
     <p class=" w-1/2 border-r border-gray-300">联系客服</p>
-    <p class=" w-1/2">电话咨询</p>
+    <p class=" w-1/2" @click="toCall">电话咨询</p>
   </div>
   </div>
 </template>
@@ -54,10 +54,14 @@ export default defineComponent({
   components:{
     Icon
   },
-  setup () {
-    
-
-    return {}
+  emits:["toCall"],
+  setup (props,context) {
+    const toCall = ()=>{
+      context.emit("toCall",true)         
+    } 
+    return {
+      toCall
+    }
   }
 })
 </script>

src/components/Mine/Msg/index.vue

+<template>
+  <div>
+    <div class=" flex justify-between py-5 border-b border-gray-200"
+         @click="$router.push('msgDetail')">
+      <span class=" text-sm text-left font-semibold" :class="isRead?'text-gray-400':'text-gray-800'">系统消息提示的标题</span>
+      <span class=" text-sm text-right text-gray-400">2018/12/03 12:58:23</span>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  computed:{
+    isRead(){
+      return false
+    }
+  },
+  setup () {
+  
+
+    return {}
+  }
+})
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file

src/main.ts

@@ -3,7 +3,7 @@ import App from './App.vue'
 import router from './router'
 import 'tailwindcss/tailwind.css'
 import store from './store'
-import { NoticeBar, Swipe, SwipeItem } from 'vant'
+import { NoticeBar, Popup, Swipe, SwipeItem } from 'vant'
 
 createApp(App)
   .use(store)
@@ -11,4 +11,5 @@ createApp(App)
   .use(NoticeBar)
   .use(Swipe)
   .use(SwipeItem)
+  .use(Popup)
   .mount('#app')

src/router/index.ts

@@ -89,6 +89,16 @@ const routes: Array<RouteRecordRaw> = [
     name: 'AboutUs',
     component: ()=>import("@/views/withMenu/Mine/aboutUs.vue")
   },
+  {
+    path: '/msgManage',
+    name: 'MsgManage',
+    component: ()=>import("@/views/withMenu/Mine/msg.vue")
+  },
+  {
+    path: '/msgDetail',
+    name: 'MsgDetail',
+    component: ()=>import("@/views/withMenu/Mine/msgDetail.vue")
+  },
 ]
 
 const router = createRouter({

src/views/withMenu/Mine/index.vue

@@ -12,7 +12,7 @@
           </p>
         </div>
         <div  class=" flex h-8 bg-indigo-400 mr-0 mt-11 rounded-l-xl" 
-              @click="seeMore">
+              @click="$router.push('setting')">
           <span class=" text-sm leading-8 pr-2 pl-4 text-white">个人中心</span>
           <icon
             name="icon-gengduo"
@@ -26,8 +26,8 @@
     <!-- 更多服务 -->
     <div class=" mx-5">
       <p class=" text-base font-semibold mt-5">更多服务</p>
-      <service class=" mt-5" iconName="icon-xiaoxizhongxin-wode" label="消息中心"/>
-      <service class=" mt-2" iconName="icon-guanyuwomen" label="关于我们" />
+      <service class=" mt-5" iconName="icon-xiaoxizhongxin-wode" label="消息中心" @click="$router.push('msgManage')" />
+      <service class=" mt-2" iconName="icon-guanyuwomen" label="关于我们" @click="$router.push('aboutUs')" />
     </div>
     <!-- 我的网点 -->
     <div class=" mx-5 mt-5">
@@ -42,13 +42,24 @@
           />
         </p>
       </div>
-      <branch class=" mt-3"/>
+      <branch class=" mt-3" @toCall="toCall" />
     </div>
+    <van-popup v-model:show="show" position="bottom" :style="{ width: '90%',margin:'0 auto' }">
+      <p class=" text-center py-4">
+       <icon
+        name="icon-a-dianhua"
+        color="#3E4FAF"
+        size="17"
+        class=" inline-block"
+        />
+      <span class=" text-app-blue text-sm">呼叫95533</span>
+      </p>
+    </van-popup>
   </div>
 </template>
 
 <script lang="ts">
-import {defineComponent} from "vue"
+import { defineComponent,ref  } from "vue"
 import Icon from "@/components/common/Icon.vue"
 import Service from '@/components/Mine/Service/index.vue' 
 import Branch from '@/components/Mine/Branch/branch.vue'
@@ -58,7 +69,7 @@ export default defineComponent({
   components: {
     Icon,
     Service,
-    Branch
+    Branch,
   },
   props: {
     iconName: {
@@ -66,15 +77,14 @@ export default defineComponent({
       default: ''
     },
   },
-  setup(){
-    function seeMore(){
-      
-    }
-    function goBranch(){
+  setup(props, context){
+    let show = ref(false)
+    const toCall = (params:boolean)=>{
+      show.value = params
     }
     return{
-      seeMore,
-      goBranch
+     show,
+     toCall
     }
   },
   computed:{

src/views/withMenu/Mine/msg.vue

+<template>
+  <div>
+    <nav-bar title="消息" :style="{ 'background-color':'#F7F7FA'}"/>
+    <div class=" px-5">
+      <msg v-for="i in 10" :key="i"/>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import NavBar from "@/components/NavBar/index.vue"
+import msg from "@/components/Mine/Msg/index.vue"
+
+export default defineComponent({
+  components:{ NavBar,msg },
+
+  setup () {
+    
+
+    return {}
+  }
+})
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file

src/views/withMenu/Mine/msgDetail.vue

+<template>
+  <div class=" text-center">
+    <nav-bar title="消息" :style="{ 'background-color':'#F7F7FA'}"/>
+    <p class=" text-gray-800 text-sm font-semibold mt-7">系统消息提供的标题</p>
+    <p class=" text-gray-400 text-xs mt-3">2018/12/03 12:58:23</p>
+    <p class=" text-gray-800 text-sm text-justify mx-5 mt-6">这里是消息的详情内容，这里消息的详情内容，这里是消息的详情内容。</p>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import NavBar from "@/components/NavBar/index.vue"
+
+export default defineComponent({
+  components:{ NavBar },
+  setup () {
+    
+
+    return {}
+  }
+})
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file