zcb_APP/pages/myMessage/index.vue

<template>
  <view class="content pdx-48">
    <view class="w h-88 flex ai_center jc_between mgt-88">
      <image
        @click="$navBack()"
        class="w-48 h-48"
        src="/static/logo.png"
        mode="scaleToFill"
      />
      <view class="text-36 text-500 text-070202">我的消息</view>
      <view class="text-28 text-400" style="color: #07020280">联系客服</view>
    </view>

    <view class="mgt-16 mgb-16 w h-96 flex ai_center">
      <view
        :class="menuIndex === 0 ? 'checkMenu' : 'menu'"
        @click="handleMenu(0)"
      >
        <view>消息列表</view>
        <view></view>
      </view>
      <view
        class="mgl-48"
        :class="menuIndex === 1 ? 'checkMenu' : 'menu'"
        @click="handleMenu(1)"
      >
        <view>任务消息</view>
        <view></view>
      </view>
    </view>

    <view v-if="menuIndex === 0">
      <view v-for="item in 5" :key="item">
        <MessageItem type="message" @delete-msg="deleteMessage"></MessageItem>
      </view>
    </view>

    <view v-if="menuIndex === 1">
      <view v-for="item in 5" :key="item + 5">
        <MessageItem type="taskMsg"></MessageItem>
      </view>
    </view>


  </view>
</template>

<script>
import MessageItem from "components/messageItem.vue";
export default {
  components: { MessageItem },
  data() {
    return {
      menuIndex: 0,
    };
  },
  onLoad() {},
  methods: {
    handleMenu(type) {
      this.menuIndex = type;
    },
	deleteMessage(e) {
		console.log('删除信息 :===>>', e);
	}
  },
};
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.checkMenu {
  font-size: 36rpx;
  font-weight: 600;
  color: #070202;
  font-family: "MiSans VF";
}

.menu {
  font-size: 32rpx;
  font-weight: 500;
  color: #7e7e7e;
  font-family: "MiSans VF";
}
</style>