tabbar

app.js

@@ -23,7 +23,6 @@ App({
       that.globalData.bannerDataList = res.data;
     })
 
-
     wx.getSystemInfo({
       success(res) {
         //计算底部安全距离高度

custom-tab-bar/index.js

@@ -1,36 +1,54 @@
+import {
+    ApiModel
+} from "../utils/api";
+const _Http = new ApiModel();
 Component({
     /**
      * 组件的属性列表
      */
     properties: {},
-
+    lifetimes: {
+        attached() {
+            this.unReadMessageCount();
+        },
+        ready: function () {
+            // 在组件实例进入页面节点树时执行
+            if (this.data.active == 3) this.unReadMessageCount();
+        },
+    },
     /**
      * 组件的初始数据
      */
     data: {
         active: 0,
         tabbarList: [{
-                icon: 'home-o',
+                icon: '/static/tabbar-icon/home.png',
+                iconA: '/static/tabbar-icon/home-a.png',
                 text: '首页',
                 url: '/pages/tabbar-pages/home/index'
             },
             {
-                icon: 'service-o',
+                icon: '/static/tabbar-icon/service.png',
+                iconA: '/static/tabbar-icon/service-a.png',
                 text: '在线客服',
                 url: '/pages/tabbar-pages/customer-service-staff/index'
             },
             {
-                icon: 'chat-o',
+                icon: '/static/tabbar-icon/bazaar.png',
+                iconA: '/static/tabbar-icon/bazaar-a.png',
                 text: '供需广场',
                 url: '/pages/tabbar-pages/supplyAndDemand/index'
             },
             {
-                icon: 'chat-o',
+                icon: '/static/tabbar-icon/message.png',
+                iconA: '/static/tabbar-icon/message-a.png',
                 text: '消息',
-                url: '/pages/tabbar-pages/message/index'
+                url: '/pages/tabbar-pages/message/index',
+                fcount: ""
             },
             {
-                icon: 'contact',
+                icon: '/static/tabbar-icon/user.png',
+                iconA: '/static/tabbar-icon/user-a.png',
                 text: '我的',
                 url: '/pages/tabbar-pages/user/index'
             }
@@ -74,5 +92,20 @@ Component({
                 show: false
             })
         },
+        /* 获取未阅读消息数量查询 */
+        unReadMessageCount() {
+            _Http.basic({
+                "accesstoken": wx.getStorageSync('userData').token,
+                "classname": "system.message.Message",
+                "method": "unReadMessageCount",
+                "content": {}
+            }).then(res => {
+                console.log("更新", res)
+                if (res.msg != '成功') console.log('未读消息数量查询失败')
+                this.setData({
+                    "tabbarList[3].fcount": res.data[0].fcount
+                })
+            })
+        }
     }
 })

custom-tab-bar/index.wxml

@@ -1,5 +1,9 @@
 <van-tabbar active="{{ active }}" placeholder>
-    <van-tabbar-item bindtap="onChange" data-index="{{index}}" wx:for="{{tabbarList}}" wx:key="index" icon="{{item.icon}}">{{item.text}}</van-tabbar-item>
+    <van-tabbar-item bindtap="onChange" info="{{item.fcount}}" data-index="{{index}}" wx:for="{{tabbarList}}" wx:key="index">
+        {{item.text}}
+        <image slot="icon" src="{{ item.icon }}" data-index="{{index}}" mode="aspectFit" style="width: 30px; height: 18px;" />
+        <image slot="icon-active" src="{{item.iconA }}" data-index="{{index}}" mode="aspectFit" style="width: 30px; height: 18px;" />
+    </van-tabbar-item>
 </van-tabbar>
 
 <van-dialog use-slot title="在线客服" show="{{ show }}" confirmButtonText='呼叫' show-cancel-button bind:close="onClose" bind:confirm="CallOut" confirm-button-color="#4BBECF">

pages/tabbar-pages/message/index.js

@@ -11,7 +11,7 @@ Page({
      * 生命周期函数--监听页面加载
      */
     onLoad: function (options) {
-
+         
     },
 
     /**

pages/tabbar-pages/message/index.wxml

@@ -4,18 +4,143 @@
 <van-tabs active="{{ active }}" color='#4DC2D4' title-active-color="#4DC2D4" title-inactive-color='rgba(0,0,0,.3)' tab-active-class='tab-active-class' tab-class="tab-class" nav-class='' line-width='60rpx' line-height='6rpx' swipeable bind:change="onChange">
     <view class="nav-class"></view>
     <van-tab title="公共消息">
-        <navigator url="#" wx:for="{{5}}">
-            <image class="msgImg" src="/static/userImage.png"></image>
-            <view>
-                <view class="msgText">
-                    <view class="title u-line-1">注册欢迎通知6555555555555555555555555555</view>
-                    <view class="msg u-line-1">恭喜！注册成功！5196519554115118451</view>
+        <view class="msg-box">
+            <!-- 团队加入通知 -->
+            <navigator wx:for="{{5}}" url="#">
+                <view class="msgImg">
+                    <image src="/static/systematic-01.png"></image>
+                    <view class="red-dot"></view>
                 </view>
-                <view class="msgTime">
+               <view class="borTop">
+                    <view class="msgText">
+                        <view class="title u-line-1">系统消息</view>
+                        <view class="msg u-line-1">恭喜！注册成功！</view>
+                    </view>
+                    <view class="msgTime">
+                        上午9:34
+                    </view>
                 </view>
-            </view>
-        </navigator>
+            </navigator>
+        </view>
+    </van-tab>
+    <van-tab title="商户消息">
+        <view class="msg-box">
+            <!-- 商户审核通知 -->
+            <navigator url="#">
+                <view class="msgImg">
+                    <image src="https://bwj.obs.cn-east-2.myhuaweicloud.com/resources/message/storeIcon-01.png"></image>
+                    <view class="red-dot"></view>
+                </view>
+               <view class="borTop">
+                    <view class="msgText">
+                        <view class="title u-line-1">商户审核通知</view>
+                        <view class="msg u-line-1">恭喜！注册成功！</view>
+                    </view>
+                    <view class="msgTime">
+                        上午9:34
+                    </view>
+                </view>
+            </navigator>
+            <!-- 加入通知 -->
+            <navigator url="#">
+                <view class="msgImg">
+                    <image src="https://bwj.obs.cn-east-2.myhuaweicloud.com/resources/message/storeIcon-02.png"></image>
+                    <view class="red-dot"></view>
+                </view>
+               <view class="borTop">
+                    <view class="msgText">
+                        <view class="title u-line-1">加入通知</view>
+                        <view class="msg u-line-1">恭喜加入XXX</view>
+                    </view>
+                    <view class="msgTime">
+                        上午9:34
+                    </view>
+                </view>
+            </navigator>
+            <!-- 申请加入通知 -->
+            <navigator url="#">
+                <view class="msgImg">
+                    <image src="https://bwj.obs.cn-east-2.myhuaweicloud.com/resources/message/storeIcon-03.png"></image>
+                    <view class="red-dot"></view>
+                </view>
+               <view class="borTop">
+                    <view class="msgText">
+                        <view class="title u-line-1">申请加入通知</view>
+                        <view class="msg u-line-1">xxx申请加入</view>
+                    </view>
+                    <view class="msgTime">
+                        上午9:34
+                    </view>
+                </view>
+            </navigator>
+            <!-- 新合作通知 -->
+            <navigator url="#">
+                <view class="msgImg">
+                    <image src="https://bwj.obs.cn-east-2.myhuaweicloud.com/resources/message/storeIcon-04.png"></image>
+                    <view class="red-dot"></view>
+                </view>
+               <view class="borTop">
+                    <view class="msgText">
+                        <view class="title u-line-1">新合作通知</view>
+                        <view class="msg u-line-1">与xxx建立新合作成功</view>
+                    </view>
+                    <view class="msgTime">
+                        上午9:34
+                    </view>
+                </view>
+            </navigator>
+            <!-- 取消合作通知 -->
+            <navigator url="#">
+                <view class="msgImg">
+                    <image src="https://bwj.obs.cn-east-2.myhuaweicloud.com/resources/message/storeIcon-05.png"></image>
+                    <view class="red-dot"></view>
+                </view>
+               <view class="borTop">
+                    <view class="msgText">
+                        <view class="title u-line-1">取消合作通知</view>
+                        <view class="msg u-line-1">和xxx取消合作成功</view>
+                    </view>
+                    <view class="msgTime">
+                        上午9:34
+                    </view>
+                </view>
+            </navigator>
+        </view>
+    </van-tab>
+    <van-tab title="团队消息">
+        <view class="msg-box">
+            <!-- 团队加入通知 -->
+            <navigator url="#">
+                <view class="msgImg">
+                    <image src="https://bwj.obs.cn-east-2.myhuaweicloud.com/resources/message/groupIcon-01.png"></image>
+                    <view class="red-dot"></view>
+                </view>
+                <view class="borTop">
+                    <view class="msgText">
+                        <view class="title u-line-1">团队加入通知</view>
+                        <view class="msg u-line-1">恭喜加入xxx团队</view>
+                    </view>
+                    <view class="msgTime">
+                        上午9:34
+                    </view>
+                </view>
+            </navigator>
+            <!-- 团队账号权限变更通知 -->
+            <navigator url="#">
+                <view class="msgImg">
+                    <image src="https://bwj.obs.cn-east-2.myhuaweicloud.com/resources/message/groupIcon-02.png"></image>
+                    <view class="red-dot"></view>
+                </view>
+               <view class="borTop">
+                    <view class="msgText">
+                        <view class="title u-line-1">团队账号权限变更通知</view>
+                        <view class="msg u-line-1">xxx权限变更为xx</view>
+                    </view>
+                    <view class="msgTime">
+                        上午9:34
+                    </view>
+                </view>
+            </navigator>
+        </view>
     </van-tab>
-    <van-tab title="商户消息">内容 2</van-tab>
-    <van-tab title="团队消息">内容 3</van-tab>
 </van-tabs>

pages/tabbar-pages/message/index.wxss

@@ -2,6 +2,16 @@ page {
     background-color: #fff !important;
 }
 
+.msg-box {
+    border-bottom: 2rpx solid rgba(151, 151, 151, .1);
+}
+
+
+.msg-box navigator:first-child .borTop::after {
+    content: ' ';
+    height: 0;
+}
+
 /* pages/tabbar-pages/message/index.wxss */
 .nav-class {
     box-shadow: 0px 10rpx 10rpx 0px rgba(170, 170, 170, 0.15);
@@ -28,24 +38,60 @@ navigator {
     align-items: center;
     width: 100vw;
     height: 160rpx;
+    border-radius: 10rpx;
+    overflow: hidden;
 }
 
 navigator>view {
-    flex: 1;
     display: flex;
     justify-content: space-between;
 }
 
+
+.borTop {
+    position: relative;
+    margin-left: 30rpx;
+}
+
+.borTop::after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: -30rpx;
+    right: 0;
+    height: 2rpx;
+    width: 100%;
+    background-color: rgba(151, 151, 151, .1);
+}
+
 .msgImg {
+    position: relative;
     width: 100rpx;
     height: 100rpx;
     margin-left: 30rpx;
+    border-radius: 8rpx;
+}
+
+.msgImg image {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+
+.red-dot {
+    position: absolute;
+    width: 24rpx;
+    height: 24rpx;
+    background: #FF0000;
+    border-radius: 50%;
+    top: 0;
+    right: 0;
+    transform: translate(25%, -25%);
 }
 
 .msgText {
     height: 100rpx;
     width: 450rpx;
-    margin-left: 30rpx;
 }
 
 .msgText .title {
@@ -67,6 +113,13 @@ navigator>view {
 }
 
 .msgTime {
-    height: 100rpx;
+    display: flex;
+    align-items: center;
     margin-right: 22rpx;
+    font-size: 24rpx;
+    height: 44rpx;
+    font-family: PingFangSC-Regular, PingFang SC;
+    color: rgba(0, 0, 0, .4);
+    line-height: 34rpx;
+    margin-top: 4rpx;
 }