chelvc-custom/src/pages/client/tabBar/message/index.vue

<template>
  <view class="container">
    <view>
      <u-navbar :autoBack="true" leftIconSize="0">
        <view slot="center">
          <u-tabs :list="list" lineWidth="60" :current="current" @change="changeInfo" />
        </view>
      </u-navbar>

      <view :style="{ marginTop: totalHeight + 'px' }">
        <view v-if="current == 0">
          <view class="orderList" v-for="item in orderList" :key="item.id" @tap="$Router.push(item.url)">
            <view class="img">
              <image :src="item.img" style="width: 45px; height: 45px" />
              <view class="dot">
                <u-badge type="warning" max="99" :value="item.numb"></u-badge>
              </view>
            </view>
            <view class="orderItem">
              <view class="order1">{{ item.name }}</view>
              <view class="order2">{{ item.text }}</view>
            </view>
            <u-icon name="arrow-right"></u-icon>
          </view>
        </view>

        <!-- 消息通知 -->
        <view v-if="current == 1">
          <view class="message" @click="notification" v-for="item,index in 5" :key="index">
            <view class="img">
              <image src="/static/icon/tools.png" style="width: 45px; height: 45px" />
            </view>
            <view class="business">
              <view class="businessItem">商家</view>
              <view class="messages">您好，请问有什么需要帮助的吗？</view>
            </view>
            <view class="time">
              <view class="timeItem">17:00</view>
              <u-badge numberType="overflow" :type="type" max="99" :value="value" />
            </view>
          </view>
        </view>
      </view>
    </view>
    <tabbar currentTab="clientMessage" />
  </view>
</template>

<script>
  import { getIsHaveNewInform } from '@/api/client/message.js';
  export default {
    data() {
      return {
        list: [{
            id: 1,
            name: '系统通知',
          }
          // ,
          // {
          //   id: 2,
          //   name: '消息通知',
          //   badge: {
          //     value: 5,
          //   },
          // },
        ],
        current: 0,
        orderList: [{
            id: '1',
            img: '/static/icon/tools.png',
            name: '订单通知',
            text: '暂无订单通知。',
            url: '/pages/client/clientPackage/message/orderNotice/index',
            numb:0
          },
          // {
          //   id: '3',
          //   img: '/static/icon/tools.png',
          //   name: '支付通知',
          //   text: '暂无支付通知。',
          //   url: '/pages/client/clientPackage/message/orderNotice/index',
          //   numb:0
          // },
          {
            id: '2',
            img: '/static/icon/tools.png',
            name: '评价通知',
            text: '暂无评价通知。',
            url: '/pages/client/clientPackage/message/evaluateNotice/index',
            numb:0
          },
          {
            id: '4',
            img: '/static/icon/tools.png',
            name: '点赞回复',
            text: '暂无点赞回复。',
            url: '/pages/client/clientPackage/message/LikeReply/index',
            numb:0
          },
          {
            id: '5',
            img: '/static/icon/tools.png',
            name: '优惠福利',
            text: '暂无优惠福利通知。',
            url: '/pages/client/clientPackage/message/benefits/index',
            numb:0
          },
        ],
        type: 'warning',
        value: 99999,
        flag: true,
      };
    },
    onShow() {
      /* 隐藏原生的tabbar */
      // uni.hideTabBar({
      //   animation: false,
      // });
      this.handlerGetSystemNewInform()
    },
    computed: {
      totalHeight() {
        return uni.getSystemInfoSync().statusBarHeight + 44;
      },
    },
    methods: {
      // 获取订单详细通知 是否有系统新消息
      handlerGetSystemNewInform() {
        getIsHaveNewInform().then(res => {
		  let { order , pay , comment , evaluate , coupon} = res.data
          this.orderList[0].numb = order
          order ? this.orderList[0].text = `您有${order}条订单信息` : this.orderList[0].text = '暂无订单通知'
		  
    //       this.orderList[1].numb = pay
		  // pay ? this.orderList[1].text = `您有${pay}条订单信息` : this.orderList[1].text = '暂无支付通知'
		  
          this.orderList[1].numb = comment
		  comment ? this.orderList[1].text = `您有${comment}条订单信息` : this.orderList[2].text = '暂无评价通知'
		  
          this.orderList[2].numb = evaluate
		  evaluate ? this.orderList[2].text = `您有${evaluate}条订单信息` : this.orderList[3].text = '暂无点赞回复'
		  
          this.orderList[3].numb = coupon
		  coupon ? this.orderList[3].text = `您有${coupon}条订单信息` : this.orderList[4].text = '暂无优惠福利通知'
        })
      },
      changeInfo(index) {
        this.current = index.index;
        if(index == 0){
          this.handlerGetSystemNewInform()
        }
      },

      notification() {
        uni.navigateTo({
          url: `/pages/client/clientPackage/chatRoom/chat`,
        });
      },
    },
  };
</script>

<style lang="scss" scoped>
  .container {
    min-height: 100vh;
    background-color: #fff;

    .img {
      width: 90rpx;
      height: 90rpx;
      margin-right: 20rpx;
      position: relative;

      .dot {
        // width: 16rpx;
        height: 16rpx;
        // background-color: red;
        border-radius: 8rpx;
        position: absolute;
        top: -10rpx;
        right: -10rpx;
      }
    }

    .orderList {
      display: flex;
      padding: 30rpx 40rpx;
      justify-content: space-between;
      background-color: #fff;
      .orderItem {
        flex: 1;

        .order1 {
          font-size: 16px;
          margin-bottom: 10rpx;
          color: #232323;
        }

        .order2 {
          font-size: 12px;
          color: #9ca3af;
        }
      }
    }

    .message {
      display: flex;
      padding: 30rpx 40rpx;
      justify-content: space-between;

      .business {
        flex: 1;

        .businessItem {
          font-size: 16px;
          margin-bottom: 10rpx;
          color: #232323;
        }

        .messages {
          font-size: 12px;
          color: #9ca3af;
        }
      }

      .time {
        .timeItem {
          color: #9ca3af;
          font-size: 14px;
          margin-bottom: 8px;
        }
      }
    }
  }
</style>