yicangzongtai_app_240321/pages/research/setup/myMsg.vue

<template>
  <view class="my-msg">
    <navbar ref="navbar" backColor="#666" :config="config"></navbar>
    <view class="middle">
      <view class="item" @click="goTodel(0, '活动消息')">
        <view class="left">
          <!-- <text class="iconfont">&#xe652;</text> -->
          <image src="/static/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>
              <!-- <text >{{msg[0] && msg[0].num? msg[0].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="/static/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="/static/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="/static/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" style="background: #4bbcfe;"><text class="iconfont">&#xe6f9;</text></view>
        <view class="right">
          <view class="msg">
            <view class="name">
              互动消息
              <text v-if="titleFive == 0 ? false : titleFive.num">{{ titleFive.num }}</text>
            </view>
            <view class="time">{{ titleFive.time ? titleFive.time : '' }}</view>
          </view>
          <view class="advertisement">{{ titleFive.remark ? titleFive.remark : '' }}</view>
        </view>
      </view>
      <view class="item" @click="goTodel(5, '系统消息')">
        <view class="left">
		  <image src="/static/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>
  </view>
</template>

<script>
  import {
    unreadInfo
  } from '@/api/userInfo.js';
  export default {
    data() {
      return {
        config: {
          back: true, //false是tolbar页面 是则不写
          title: '我的消息',
          color: '#1A1A1A',
          //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
          backgroundColor: [1, '#fff'],
          statusBarFontColor: '#1A1A1A'
        },
        msg: [], //获取的msg
        title: [],
        titleOne: {},
        titleTwo: {},
        titleThree: {},
        titleFour: {},
        titleFive: {},
        titleSix: {}
      };
    },
    onShow() {
      this.getMsg();
    },

    methods: {
      //跳转消息中心
      goTodel(type, name) {
        uni.navigateTo({
          url: './eventDetails?type=' + type + '&name=' + name
        });
      },

      //获取消息
      getMsg() {
        this.$http.get(unreadInfo).then(res => {
          if (res && res.code == 200) {
            console.log(res);
            this.msg = res.list;
            this.titleOne = this.msg[0];
            this.titleTwo = this.msg[1];
            this.titleThree = this.msg[2];
            this.titleFour = this.msg[3];
            this.titleFive = this.msg[4];
            this.titleSix = this.msg[5];

            // this.msg.forEach(function(v){
            // 	// console.log("type",v.type)
            // 	let newMsg = v.type
            // 	console.log(newMsg,11111)
            // })
          }
        });
      }
    }
  };
</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;
  }
</style>