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="http://43.139.158.220:5007/img/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="isAll" class="newMessage"></view>
          </view>
          <view class="mesTime fz-font">07-12</view>
        </view>
      </view>

      <view class="mesItem" @click="goToMeGXt">
        <view class="leftBox">
          <view class="mesImg">
            <image
              src="http://43.139.158.220:5007/img/static/message/system.svg"
              mode=""
            ></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="xt" class="newMessage"></view>
          </view>
          <view class="mesTime fz-font">07-12</view>
        </view>
      </view>

      <view class="mesItem" @click="goToMegDy">
        <view class="leftBox">
          <view class="mesImg">
            <image
              src="http://43.139.158.220:5007/img/static/message/subscribe.svg"
              mode=""
            ></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="dy" class="newMessage"></view>
          </view>
          <view class="mesTime fz-font">07-12</view>
        </view>
      </view>
    </view>
    <view v-else class="noLogin">
      <!--  未登录展示样式 -->
      <view class="mid">
        <image
          src="http://43.139.158.220:5007/img/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: "消息",
      },
      // msgList:[
      // 	{tit:'hd',isClick:0},
      // 	{tit:'hd',isClick:0},
      // 	{tit:'hd',isClick:0},
      // ]
      isAll: 1,
      xt: 1,
      dy: 1,
      msgLogin: '',
    };
  },
  methods: {
    goToMesDetail() {
      uni.navigateTo({
        url: "/pages/hdxx/hdxx",
      });
      this.isAll = 0;
    },
    goToMeGXt() {
      uni.navigateTo({
        url: "/pages/messageSystem/messageSystem",
      });
      this.xt = 0;
    },
    goToMegDy() {
      uni.navigateTo({
        url: "/pages/messageDy/messageDy",
      });
      this.dy = 0;
    },
    gotoLogin() {
      uni.navigateTo({
        url: "/pages/login/login?id=1",
      });
    },
  },
  onShow() {
    // this.msgLogin = uni.getStorageSync('msgLogin');
    this.msgLogin = this.$store.state.user.openid;
  },
};
</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;
        flex-direction: column;
        justify-content: space-between;

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

        .breif {
          // font-size: 16px;
          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>