chelvc-custom/src/pages/tabbar/message copy.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 in 5" :key="item">
            <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: '/pagesMessage/orderNotify',
          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: '/pagesMessage/commentNotify',
          numb: 0,
        },
        {
          id: '4',
          img: '/static/icon/tools.png',
          name: '点赞回复',
          text: '暂无点赞回复。',
          url: '/pagesMessage/kudosNotify',
          numb: 0,
        },
        {
          id: '5',
          img: '/static/icon/tools.png',
          name: '优惠福利',
          text: '暂无优惠福利通知。',
          url: '/pagesMessage/benefitsNotify',
          numb: 0,
        },
      ],
      type: 'warning',
      value: 99999,
      flag: true,
    };
  },
  onShow() {
    this.handlerGetSystemNewInform();
  },
  computed: {
    totalHeight() {
      return uni.getSystemInfoSync().statusBarHeight + 44;
    },
  },
  methods: {
    // 获取订单详细通知 是否有系统新消息
    handlerGetSystemNewInform() {
      getIsHaveNewInform().then(res => {
        let { order, 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[1].text = '暂无评价通知');

        this.orderList[2].numb = evaluate;
        evaluate
          ? (this.orderList[2].text = `您有${evaluate}条订单信息`)
          : (this.orderList[2].text = '暂无点赞回复');

        this.orderList[3].numb = coupon;
        coupon
          ? (this.orderList[3].text = `您有${coupon}条订单信息`)
          : (this.orderList[3].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>