teaching-uniapp/pages/message/message.vue

<template>
  <view class="messBox">
    <statusBar :item="navbarData"></statusBar>
    <view class="" v-if="msgLogin !==''">
      <view class="mesItem" @click="goToMesDetail">
        <view class="leftBox">
          <view class="mesImg">
            <image
              src="https://teacherapi.cocorobo.cn/teaching-file/static//message/notice.svg"
              mode="aspectFill"
            ></image>
          </view>

          <view class="mesBrief">
            <view class="tit">活动通知</view>
            <view class="breif fz-font" style="line-height: 40rpx"
              >活动开始提醒</view
            >
          </view>
        </view>

        <view class="right">
          <view class="">
            <view v-if="acmsg" class="newMessage"></view>
          </view>
          <view class="mesTime fz-font">{{xacmsg.create_at}}</view>
        </view>
      </view>

      <view class="mesItem" @click="goToMeGXt">
        <view class="leftBox">
          <view class="mesImg">
            <image
              src="https://teacherapi.cocorobo.cn/teaching-file/static//message/system.svg"
              mode=""
            ></image>
          </view>

          <view class="mesBrief">
            <view class="tit">系统通知</view>
            <view class="breif fz-font" style="line-height: 40rpx"
              >已加入“{{xsysmsg.acName}}”{{xsysmsg.type>=2?'教研室':'活动'}}</view
            >
          </view>
        </view>

        <view class="right">
          <view class="">
            <view v-if="sysmsg" class="newMessage"></view>
          </view>
          <view class="mesTime fz-font">{{xsysmsg.create_at}}</view>
        </view>
      </view>

      <view class="mesItem" @click="goToMegDy">
        <view class="leftBox">
          <view class="mesImg">
            <image
              src="https://teacherapi.cocorobo.cn/teaching-file/static//message/subscribe.svg"
              mode=""
            ></image>
          </view>
          <view class="mesBrief">
            <view class="tit">订阅消息</view>
            <view class="breif fz-font" style="line-height: 40rpx"
              >欢迎订阅“{{xdymsg.acName}}”{{xdymsg.type>=2?'教研室':'活动'}}</view
            >
          </view>
        </view>
        <view class="right">
          <view class="">
            <view v-if="dymsg" class="newMessage"></view>
          </view>
          <view class="mesTime fz-font">{{xdymsg.create_at}}</view>
        </view>
      </view>
    </view>
    <view v-else class="noLogin">
      <!--  未登录展示样式 -->
      <view class="mid">
        <image
          src="https://teacherapi.cocorobo.cn/teaching-file/static//yym/Vector.png"
          mode="aspectFill"
        ></image>
        <view class="tit" style="">您暂时还没有消息</view>
        <view class="brief fz-font" style="color: rgba(0, 0, 0, 0.4)"
          >快去登录查看消息吧</view
        >
        <view class="btn" @click="gotoLogin">去登录</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      navbarData: {
        title: "消息",
      },
    
	  // 判断是否显示红点
      acmsg: 0,
	  sysmsg: 0,
      dymsg: 0,
	  // 判断是否登录
      msgLogin: '',
	  // 最新一条数据
	  xacmsg: {},
	  xsysmsg: {},
	  xdymsg: {},
    };
  },
  methods: {
    goToMesDetail() {
      uni.navigateTo({
        url: "/pages/hdxx/hdxx",
      });
    },
    goToMeGXt() {
      uni.navigateTo({
        url: "/pages/messageSystem/messageSystem",
      });
    },
    goToMegDy() {
      uni.navigateTo({
        url: "/pages/messageDy/messageDy",
      });
    },
    gotoLogin() {
      uni.navigateTo({
        url: "/pages/login_Wechat/login_Wechat",
      });
    },
	// 获得首页显示的第一条消息
	// getOneMsg(){
	// 	this.$request('/selectGroupMessage', "POST", {
	// 		oid: this.$store.state.user.openid
	// 	}).then(res => {
	// 		console.log(res);
	// 	})
	// },
	// 信息页面分组查询未读信息
	getGroupMsg(){
		this.$request('/selectGroupMessage', "POST", {
			oid: this.$store.state.user.openid
		}).then(res => {
			console.log('出来了',res);
			this.acmsg=0;
			this.sysmsg=0;
			this.dymsg=0;
			res[0].forEach(e=>{
				if(e.type==0){
					this.acmsg=e.num
				}else if(e.type==1){
					this.sysmsg=e.num
				}else{
					this.dymsg=e.num
				}
			})
			this.xacmsg=res[1][0];
			this.xsysmsg=res[2][0];
			this.xdymsg=res[3][0];
		})
	},
  },
  onShow() {
	  // 判断是否登录
    this.msgLogin = this.$store.state.user.openid;
	// 信息页面分组查询未读信息
	this.getGroupMsg()
	// 调用app.js中的方法
	this.getAllMessage()    
  },
};
</script>

<style lang="scss">
.messBox {
  background: #fff;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  // align-items: center;

  // 未登录展示样式
  .noLogin {
    width: 750rpx;
    height: 80vh;
    background-color: #f0f2f5;
    display: flex;
    justify-content: center;
    align-items: center;

    .mid {
      display: flex;
      flex-direction: column;
      align-items: center;
      height: 20vh;
      justify-content: space-between;

      .tit {
        margin-top: 30rpx;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.8);
        line-height: 48rpx;
        font-size: 34rpx;
      }

      .brief {
        margin-top: 10rpx;
      }

      image {
        width: 175rpx;
        height: 148rpx;
      }

      .btn {
        margin-top: 30rpx;
        width: 160rpx;
        height: 64rpx;
        font-size: 28rpx;
        // font-weight: 600;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgba(0, 86, 168, 1);
        border-radius: 100rpx;
        color: #ffffff;
      }
    }
  }

  .mesItem {
    display: flex;
    // flex-direction: row;
    // flex-wrap: nowrap;
    // align-items: flex-end;
    justify-content: space-between;
    width: 750rpx;
    padding: 30rpx 20rpx;
    // position: relative;

    .leftBox {
      display: flex;
      justify-content: flex-start;
      // flex-direction: row;
      // flex-wrap: nowrap;
      // align-items: center;

      .mesImg {
        width: 96rpx;
        height: 96rpx;
        // padding: 30rpx 5rpx;
        margin-right: 25rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .mesBrief {
        display: flex;
		width: 450rpx;
        flex-direction: column;
        justify-content: space-between;

        .tit {
          font-size: 32rpx;
          font-weight: 400;
          line-height: 48rpx;
          color: #333333;
        }

        .breif {
			width: 90%;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			color: rgba(51, 51, 51, 1);
        }
      }

      // .mesBrief:nth-child(1){
      // 	// font-size: 36rpx;
      // }
      // .mesBrief:nth-last-child(1){
      // 	color: #999;
      // 	padding: 10rpx 0 0 0;
      // }
    }

    .right {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      padding-top: 10px;

      .mesTime {
        color: #999;
        bottom: 30px;
      }

      .newMessage {
        width: 16rpx;
        height: 16rpx;
        background: red;
        border-radius: 10rpx;
      }
    }
  }
}
</style>