chelvc-custom/src/pages/tabbar/message/index.vue

<template>
  <view>
    <u-navbar>
      <view slot="left"></view>
      <view slot="center">
        <u-tabs :list="list" lineWidth="60" />
      </view>
    </u-navbar>
    <view :style="{ marginTop: totalHeight + 'px' }">
      <!-- 系统通知 -->
      <view class="orderList" v-for="item in orderList" :key="item.id">
        <image :src="item.img" style="width: 40px; height: 40px" />
        <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 class="message">
        <image
          src="/static/images/home-select.png"
          style="width: 40px; height: 40px"
        />
        <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>
</template>

<script>
export default {
  data() {
    return {
      list: [{ name: '系统通知' }, { name: '消息通知' }],
      orderList: [
        {
          id: '1',
          img: '/static/images/home-select.png',
          name: '订单通知',
          text: '您的订单成功付款，感谢您的支持。',
        },
        {
          id: '2',
          img: '/static/images/home-select.png',
          name: '付款通知',
          text: '您的订单成功付款，感谢您的支持。',
        },
        {
          id: '3',
          img: '/static/images/home-select.png',
          name: '评价通知',
          text: '您的订单成功付款，感谢您的支持。',
        },
        {
          id: '4',
          img: '/static/images/home-select.png',
          name: '点赞回复',
          text: '您的订单成功付款，感谢您的支持。',
        },
        {
          id: '5',
          img: '/static/images/home-select.png',
          name: '优惠福利',
          text: '您的订单成功付款，感谢您的支持。',
        },
      ],
      type: 'warning',
      value: 99999,
      flag: true,
    };
  },
  computed: {
    totalHeight() {
      return uni.getSystemInfoSync().statusBarHeight + 44;
    },
  },
  methods: {
    change(e) {
      console.log('-----------', e);
    },
  },
};
</script>

<style lang="scss" scoped>
.messages {
  min-height: 100vh;
  background-color: #fff;
}
.orderList {
  display: flex;
  padding: 30rpx;
  justify-content: space-between;

  image {
    margin-right: 10rpx;
  }
  .orderItem {
    flex: 1;
    .order1 {
      font-size: 16px;
      margin-bottom: 10rpx;
      color: #232323;
    }
    .order2 {
      font-size: 12px;
      color: #9ca3af;
    }
  }
}
.message {
  display: flex;
  padding: 30rpx;
  justify-content: space-between;

  image {
    margin-right: 10rpx;
  }
  .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>