消息数量提示

src/pages/functionCenter/function-list.vue

@@ -52,7 +52,9 @@
         <div class="info-content">
           <div class="add-name">
             <img src="@/assets/functionCenter/con-sign@2x.png" alt="">
-            <div class="name-title">融租方案确认</div>
+            <div class="name-title">融租方案确认
+              <p v-if="signCount > 0" :class="{'content-wrap-class-width':signCount > 99, 'content-wrap-class':signCount <= 99}">{{ signCount > 99 ? '99+' : signCount }}</p>
+            </div>
           </div>
           <div class="add-content" @click="conSign">
             <img src="@/assets/functionCenter/in@2x.png" alt="">
@@ -61,7 +63,7 @@
         <div class="info-content">
           <div class="add-name">
             <img src="@/assets/functionCenter/con-sign@2x.png" alt="">
-            <div class="name-title">融租合同创建</div>
+            <div class="name-title">融资合同创建</div>
           </div>
           <div class="add-content" @click="goStart">
             <img src="@/assets/functionCenter/in@2x.png" alt="">
@@ -79,7 +81,9 @@
         <div class="info-content">
           <div class="add-name">
             <img src="@/assets/functionCenter/car@2x.png" alt="">
-            <div class="name-title">合同签订</div>
+            <div class="name-title">合同签订
+              <p v-if="carCount > 0" :class="{'content-wrap-class-width':carCount > 99, 'content-wrap-class':carCount <= 99}">{{ carCount > 99 ? '99+' : carCount }}</p>
+            </div>
           </div>
           <div class="add-content" @click="goCarConfirm">
             <img src="@/assets/functionCenter/in@2x.png" alt="">
@@ -189,6 +193,9 @@ export default {
       pagenum: 1,
       role: '未绑定',
       // multipleRole: window.localStorage.getItem('multipleRole'),
+      signCount: 0, // 融租方案确认 待办数量
+      carCount: 0, // 合同签订 代待办数量
+
     }
   },
   computed: {},
@@ -199,6 +206,7 @@ export default {
       if (window.localStorage.getItem('user_phone')) {
         vm.userQuery()
       }
+      vm.numQuery()
     })
     // }
     // next()
@@ -207,6 +215,23 @@ export default {
   //    this.userQuery()
   // },
   methods: {
+    numQuery () {
+      let vm = this
+      let url = $config.basePath + 'number_display_query'
+      let param = {
+        bp_id: JSON.parse(window.localStorage.getItem('now_user_bp_bind_id')).bp_id,
+      }
+      vm.$post(url, param).then(function (res) {
+        if (res.result === 'S') {
+          if ('info' in res) {
+            vm.signCount = res.info.con_confirm_num || 0
+            vm.carCount = res.info.car_confirm_num || 0
+          }
+        } else {
+          this.hlsPopup.showLongCenter(res.message)
+        }
+      })
+    },
     userQuery () {
       let vm = this
       // let url = $config.basePath + 'user_query'
@@ -783,6 +808,34 @@ export default {
           color: #656464;
           letter-spacing: 0;
           line-height: 18px;
+          position:relative;
+
+          .content-wrap-class {
+            position: absolute;
+            top: 0;
+            right: -21px;
+            font-size: 10px;
+            width: 18px;
+            height: 18px;
+            text-align: center;
+            line-height: 18px;
+            background-color: red;
+            color: #fff;
+            border-radius: 50%;
+          }
+          .content-wrap-class-width {
+            position: absolute;
+            top: 0px;
+            right: -30px;
+            font-size: 10px;
+            width: 28px;
+            height: 18px;
+            text-align: center;
+            line-height: 18px;
+            background-color: red;
+            color: #fff;
+            border-radius: 50%;
+          }
         }
 
       }
@@ -867,7 +920,7 @@ export default {
           img {
             height: 15px;
             width: 15px;
-          }
+          }          
         }
 
         .name-title {

src/pages/home/home-page.vue

@@ -111,7 +111,7 @@ export default {
       // vm.guessingQuery() // 猜你喜欢查询
       vm.isVisitor = !window.localStorage.getItem('password')
       // vm.guessingQuery() // 猜你喜欢查询
-      vm.getLocation()
+      // vm.getLocation()
       vm.getNews()
       //  }
     })

src/pages/messageCenter/message-list.vue

@@ -2,6 +2,10 @@
   <h-view id="message-center">
     <h-header class="bar-custom">
       <div slot="center" class="top-word">消息通知</div>
+      <div slot="right" style="padding: 11px 13px 0 0;">
+        <!-- <Icon name="browsing-history-o" color="white" size="6vw" @click="readAll"/> -->
+        <img src="@/assets/messageCenter/clear.png" width="31%" alt="" @click="readAll" >
+      </div>
     </h-header>
     <!-- <h-content class="content"> -->
 
@@ -25,7 +29,9 @@
               <div
                 slot="name"
                 :class="{'font-color':true,'over-color':item.notice_type==2,'red':item.notice_type==1}"
-              >{{ item.notice_title }}</div>
+              >{{ item.notice_title }}
+              <p :class="'notice-status notice-read'">{{ "未读" }}</p>
+            </div>
               <div slot="content" class="time-color">{{ item.notice_time }}</div>
             </item>
             <div class="msg-content">
@@ -63,7 +69,10 @@
   </h-view>
 </template>
 <script>
+// import {Icon} from 'vant'
+// import 'vant/lib/icon/style'
 export default {
+  // components: {Icon},
   data () {
     return {
       textHeight: null,
@@ -97,6 +106,19 @@ export default {
     }
   },
   methods: {
+    // 全部已读
+    readAll () {
+      hlsPopup.showConfirm({
+        title: '是否全部已读',
+        // content: `是否全部已读`,
+        onConfirm: data => {
+          if (data === 1) {
+            // 全部已读接口
+            console.log(data)
+          }
+        },
+      })
+    },
     // 计算文字 显示展开 收起
     calculateText () {
       // 获取一行文字的height 计算当前文字比较列表文字
@@ -428,4 +450,22 @@ export default {
     }
   }
 }
+
+//消息已读样式
+.notice-status{
+    font-size: 12px;
+    display: inline-block;
+    // background-color: #fc8129;
+    color: white;
+    width: 34px;
+    text-align: center;
+    border-radius: 9px;
+}
+.notice-read{
+  background-color: #fc2946;
+
+}
+.notice-unread{
+  background-color: #b4b0ad;
+}
 </style>

src/pages/tab.vue

@@ -26,10 +26,13 @@
         <img slot="icon" src="../assets/image/tab/n_product@2x.png">
         <span slot="label">产品中心</span>
       </tabbar-item>
-      <tabbar-item :link="{path:'/tab/message-center'}" :selected="$route.path === '/tab/message-center'">
+      <tabbar-item :link="{path:'/tab/message-center'}" :selected="$route.path === '/tab/message-center'" class="notice">
         <img slot="icon-active" src="../assets/image/tab/message@2x.png">
         <img slot="icon" src="../assets/image/tab/n_message@2x.png">
-        <span slot="label">消息</span>
+        <div slot="label">
+          消息
+          <p v-if="messageNum>0" class="notice-status">{{ messageNum <= 99 ? messageNum : '99+' }}</p>
+        </div>
       </tabbar-item>
       <tabbar-item :link="{path:'/tab/function-center'}" :selected="$route.path === '/tab/function-center'">
         <img slot="icon-active" src="../assets/image/tab/function@2x.png">
@@ -53,6 +56,7 @@ export default {
     return {
       pathList: [],
       transitionName: '',
+      messageNum: 0, // 未读消息数量
     }
   },
   watch: { // 监听路由变化
@@ -158,4 +162,16 @@ export default {
       }
     }
   }
+  .notice{
+    position: relative;
+    .notice-status{
+      position: absolute;
+      top: 0;
+      right: 10px;
+      background-color: #fc2946;
+      color: white;
+      width: 23px;
+      border-radius: 9px;
+    }
+  }
 </style>