applet/pages/user/myMsg.vue

<template>
  <view class="my-msg">
    <uv-navbar title="我的消息" placeholder autoBack>
      <template v-slot:right>
        <view class="uv-nav-slot">
          <image
            class="clear-icon"
            :src="$handleImageUrl('/czd/clear.png')"
            mode=""
            @click.stop="messageAllRead()"
          ></image>
        </view>
      </template>
    </uv-navbar>
    <view class="middle">
      <!-- <view class="item" @click="goTodel(0, '活动消息')">
        <view class="left">
          <image
            :src="$handleImageUrl('/czd/myMsg_iocn1.png')"
            mode=""
          ></image>
        </view>
        <view class="right">
          <view class="msg">
            <view class="name">
              活动消息
              <text
                class="count"
                v-if="titleOne.num == 0 ? false : titleOne.num"
                >{{ titleOne.num }}</text
              >
            </view>
            <view class="time">{{ titleOne.time ? titleOne.time : "" }}</view>
          </view>
          <view class="advertisement">{{
            titleOne.remark ? titleOne.remark : ""
          }}</view>
        </view>
      </view> -->
      <view class="item" @click="goTodel(1, '支付消息')">
        <view class="left">
          <!-- <text class="iconfont">&#xe641;</text> -->
          <image
            :src="$handleImageUrl('/czd/myMsg_iocn5.png')"
            mode=""
          ></image>
        </view>
        <view class="right right2">
          <view class="msg">
            <view class="name">
              支付消息
              <text class="count" v-if="titleTwo == 0 ? false : titleTwo.num">{{
                titleTwo.num
              }}</text>
            </view>
            <view class="time">{{ titleTwo.time ? titleTwo.time : "" }}</view>
          </view>
          <view class="advertisement">{{
            titleTwo.remark ? titleTwo.remark : ""
          }}</view>
        </view>
      </view>
      <view class="item" @click="goTodel(2, '物流消息')">
        <view class="left right3">
          <!-- <text class="iconfont">&#xe691;</text> -->
          <image
            :src="$handleImageUrl('/czd/myMsg_iocn3.png')"
            mode=""
          ></image>
        </view>
        <view class="right right4">
          <view class="msg">
            <view class="name">
              物流消息
              <text
                class="count"
                v-if="titleThree.num == 0 ? false : titleThree.num"
                >{{ titleThree.num }}</text
              >
            </view>
            <view class="time">{{
              titleThree.time ? titleThree.time : ""
            }}</view>
          </view>
          <view class="advertisement">{{
            titleThree.remark ? titleThree.remark : ""
          }}</view>
        </view>
      </view>
      <view class="item" @click="goTodel(3, '售后消息')">
        <view class="left">
          <!-- <text class="iconfont">&#xf132;</text> -->
          <image
            :src="$handleImageUrl('/czd/myMsg_iocn2.png')"
            mode=""
          ></image>
        </view>
        <view class="right right5">
          <view class="msg">
            <view class="name">
              售后消息
              <text
                class="count"
                v-if="titleFour == 0 ? false : titleFour.num"
                >{{ titleFour.num }}</text
              >
            </view>
            <view class="time">{{ titleFour.time ? titleFour.time : "" }}</view>
          </view>
          <view class="advertisement">{{
            titleFour.remark ? titleFour.remark : ""
          }}</view>
        </view>
      </view>
      <!-- <view class="item" @click="goTodel(4, '系统消息')">
        <view class="left">
          <image :src="$handleImageUrl('/czd/myMsg_iocn4.png')" mode=""></image>
        </view>
        <view class="right right5">
          <view class="msg">
            <view class="name">
              系统消息
              <text class="count" v-if="titleSix == 0 ? false : titleSix.num">{{
                titleSix.num
              }}</text>
            </view>
            <view class="time">{{ titleSix.time ? titleSix.time : "" }}</view>
          </view>
          <view class="advertisement">{{
            titleSix.remark ? titleSix.remark : ""
          }}</view>
        </view>
      </view> -->
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onShow } from "@dcloudio/uni-app";
import { messageUnreadInfo_Api, messageAllRead_Api } from "@/api/userInfo.js";
const msg = ref([]);
// const titleOne = ref({});
const titleTwo = ref({});
const titleThree = ref({});
const titleFour = ref({});
// const titleFive = ref({});
const titleSix = ref({});

const goTodel = (type, name) => {
  uni.navigateTo({
    url: "/pages/user/eventDetails?type=" + type + "&name=" + name,
  });
};

const getMsg = () => {
  messageUnreadInfo_Api().then((res) => {
    if (res && res.code == 200) {
      // console.log(res);
      msg.value = res.data;
      res.data.forEach((v) => {
        if (v.type == 1) titleTwo.value = v;
        else if (v.type == 2) titleThree.value = v;
        else if (v.type == 3) titleFour.value = v;
        else if (v.type == 4) titleSix.value = v;
      });
    }
  });
};

const messageAllRead = () => {
  uni.showModal({
    title: "提示",
    content: "是否确认清除所有未读消息？",
    success: (res) => {
      if (res.confirm) {
        console.log("用户点击确定");
        uni.showLoading({
          title: "加载中",
          mask: true,
        });
        messageAllRead_Api()
          .then((res) => {
            uni.hideLoading();
            if (res && res.code == 200) {
              getMsg();
            }
          })
          .catch((err) => {
            // uni.hideLoading();
          });
      } else if (res.cancel) {
        console.log("用户点击取消");
      }
    },
  });
};

onShow(() => {
  getMsg();
});
</script>

<style scoped lang="scss">
.middle {
  padding: 0 30rpx;

  .item {
    display: flex;
    align-items: center;
    padding: 30rpx 0 26rpx;
    border-bottom: 1rpx solid #e6e6e6;

    .left {
      margin-right: 24rpx;
      width: 78rpx;
      height: 78rpx;
      border-radius: 50%;
      // background: #4bbcfe;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;

      .iconfont {
        font-size: 48rpx;
      }

      image {
        width: 78rpx;
        height: 78rpx;
        border-radius: 50%;
      }
    }

    .left2 {
      background: #ad9be5;
    }

    .left3 {
      background: #4ed47f;
    }

    .left4 {
      background: #e4c78d;
    }

    .left5 {
      background: #fe9168;
    }

    .right {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-around;

      .msg {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;

        .name {
          font-size: 28rpx;
          color: #1a1a1a;
          font-weight: 400;

          text {
            margin-left: 10rpx;
            color: #ffffff;
            font-size: 20rpx;
            font-weight: 400;
            padding: 0 6rpx;
            background-color: #ff0000;
            border-radius: 13rpx;
          }
        }

        .time {
          font-size: 26rpx;
          color: #999999;
          font-weight: 400;
        }
      }

      .advertisement {
        font-size: 24rpx;
        color: #999999;
        font-weight: 400;
        margin-top: 17rpx;
      }
    }
  }
}

.count {
  padding: 0px 11rpx !important;
  border-radius: 100rpx !important;
}
.clear-icon {
  width: 40rpx;
  height: 40rpx;
}
</style>