HealthStudentWeb/src/views/myself/news/news.vue

<template>
  <div class="news">
    <!-- <van-nav-bar title="消息通知" left-arrow @click-left="onNavBack" left-text="返回" /> -->
    <NavBar title="消息通知" @on-click-left="onNavBack"> </NavBar>
    <div class="list-con">
      <van-list v-model="loading" :finished="finished" :immediate-check="false" @load="onLoad">
        <div class="item">
          <div :class="[formatClass(item.typeName), 'list']" v-for="(item, index) in listData" :key="index">
            <div class="title">
              <span>{{ new Date($own.formatTime(item.time)).Format('MM月dd日 hh:mm') }}</span>
            </div>
            <div class="con" @click="listClick(item.typeName, item)">
              <div class="left">
                <i></i>
              </div>
              <div class="left">
                <p class="tit">{{ formatClass(item.typeName, true) }}</p>
                <p class="time">{{ new Date($own.formatTime(item.time)).Format('yyyy-MM-dd hh:mm:ss') }}</p>
                <p>{{ item.message }}</p>
              </div>
              <div class="right" v-show="formatClass(item.typeName) == 'sos' || item.typeName == 'DrownReport'">
                详情
              </div>
            </div>
          </div>
        </div>
      </van-list>
      <div class="newsNotData" v-if="!isHasData">暂无消息~</div>
    </div>
  </div>
</template>

<script>
/* import DialogService from '@/services/dialog-service'; */
import ToastService from '@/services/toast-service';
import APIUser from '@/api/user';
import NavBar from '@/components/NavBar';
export default {
  components: {
    NavBar
  },
  data() {
    return {
      personName: '',
      listData: [],
      loading: false,
      finished: false,
      pageNumber: 5, //每次显示多少条
      begNumber: 1, //页数
      isHasData: false //是否存在数据
    };
  },
  methods: {
    // 返回
    onNavBack() {
      //        this.$router.go(-1);
      // todo 此处不能修改为 go(-1)；因为情景有：微信推送时进入该页面，此时点击返回就该路由至首页。

      this.$router.push({ name: this.$route.query.toRouter || 'location' });
    },
    getData(begNumber, pageNumber, firstLoad) {
      /* let url = "/api/Alarm/AlarmList";
        let jsonData = {
          deviceId: this.$store.getters.deviceId,
          userId: this.$store.getters.userId,
          pageNumber,
          begNumber,
          timeOffset: -new Date().getTimezoneOffset() / 60
        };
        this.$axios
          .post(url, jsonData) */
      if (firstLoad) {
        ToastService.loading({
          message: '加载中'
        });
      }
      APIUser.alarmList({
        deviceId: this.$store.getters.deviceId,
        userId: this.$store.getters.userId,
        pageNumber,
        begNumber,
        timeOffset: -new Date().getTimezoneOffset() / 60
      })
        .then(res => {
          let item = res.data;
          this.isHasData = item.alarmList.length > 0;
          item.alarmList.forEach(val => {
            this.listData.push(val);
          });
          this.loading = false;
          if (item.alarmList == null || item.alarmList.length == 0) {
            this.finished = true;
          }
        })
        .catch(err => {
          console.log(err);
        })
        .finally(() => {
          ToastService.clear();
        });
    },
    listClick(name, item) {
      if (name == 'SOS') {
        this.$router.push({ name: 'details', query: item });
      } else if (name == 'DrownReport') {
        //   重新组装接口数据
        let queryData = item.urlDetail.split('?');
        let params = queryData[1].split('&');
        let queryBody = {
          imei: this.formatUrl(params, 'imei'),
          poiId: this.formatUrl(params, 'poiId'),
          title: this.formatUrl(params, 'title'),
          lng: this.formatUrl(params, 'lng'),
          lat: this.formatUrl(params, 'lat'),
          address: this.formatUrl(params, 'address'),
          time: this.formatUrl(params, 'time'),
          status: this.formatUrl(params, 'status'),
          showBack: '1'
        };
        this.$router.push({ name: 'dangerAreaDetails', query: queryBody });
      }
    },
    formatUrl(params, name) {
      let valueList = params
        .filter(item => {
          return item.split('=')[0] === name;
        })[0]
        .split('=');
      return valueList[1];
    },
    formatClass(val, text) {
      let value = '';
      /* Area = 6,//区域警告
          Temperature = 10,//体温推送
          CallLog = 11, //话单推送
          Healthy = 12, //心率、血氧、血压推送
          DrownReport = 13, //水域告警推送
          NoWear = 14, //水域告警推送 */
      switch (val) {
        case 'SOS':
          value = text ? '报警通知' : 'sos';
          break;
        case 'LowBattery':
          value = text ? '电量通知' : 'warning';
          break;
        case 'Entry':
        case 'Exit':
          value = text ? '围栏通知' : 'outOfRange';
          break;
        case 'PowerOff':
          value = text ? '关机报警' : 'off';
          break;
        case 'Area':
          value = text ? '区域报警' : 'area';
          break;
        /* case "Temperature":
            value = text ? '体温报警' : 'default'
            break; */
        case 'CallLog':
          value = text ? '话单推送' : 'callLog';
          break;
        case 'Healthy':
          value = text ? '健康通知' : 'healthy';
          break;
        case 'DrownReport':
          value = text ? '水域通知' : 'drownReport';
          break;
        case 'NoWear':
          value = text ? '携带监测' : 'noWear';
          break;
      }
      return value;
    },
    onLoad() {
      this.begNumber++;
      this.getData(this.begNumber, this.pageNumber);
    }
  },
  mounted() {
    this.getData(this.begNumber, this.pageNumber, true);
    /* let url = window.location.search;
    let id = url.split('user_id=')[1]; */
    let alarmUrl = window.location.href.split('msgId=')[1];
    if (alarmUrl) {
      this.$router.push({ name: 'alarmDetails', query: { msgId: alarmUrl } });
    }
    /* if (id) {
      if (id != this.$store.getters.userId) {
        DialogService.confirm({
          title: '登录失效，请重新登录~'
        }).then(() => {
          this.$router.push({ name: 'login' });
        });
      }
    } */
    console.log(this.$store.getters.userId);
  }
};
</script>
<style lang="scss" scoped>
.news {
  height: 100vh;
  overflow: hidden;
  background-color: $background;
  .list-con {
    position: relative;
    height: calc(100vh - 160px);
    overflow: scroll;
    .newsNotData {
      @include center();
      font-size: 32px;
      padding: 20px;
    }

    .item {
      padding: 0 35px;
      display: flex;
      flex-flow: column;
      justify-content: flex-start;
      align-items: center;

      .list {
        width: 100%;

        .title {
          @include center;
          margin: 20px 0;

          span {
            padding: 8px 12px;
            @include colorAndFont(#fff, 24);
            border-radius: 25px;
            background: #d1d1d1;
          }
        }

        .con {
          padding: 18px 20px 35px;
          position: relative;
          width: 100%;
          background: #fff;
          border-radius: 10px;
          box-sizing: border-box;
          display: flex;
          align-items: center;

          .left {
            display: flex;
            align-items: flex-start;
            flex-flow: column;

            i {
              width: 80px;
              height: 80px;
              border-radius: 50%;
              margin-right: 15px;
              @include center();
              &:after {
                content: '';
                position: absolute;
              }
            }

            p {
              @include colorAndFont(#787878, 28);

              &.tit {
                @include colorAndFont(#313131, 32);
                font-weight: 600;
                margin-bottom: 2px;
              }

              &.time {
                @include colorAndFont(#b4b7be, 24);
                margin-bottom: 12px;
              }
            }
          }

          .right {
            padding: 5px 20px;
            position: absolute;
            top: 30px;
            right: 30px;
            background: $blue;
            border-radius: 4px;
            @include colorAndFont(#fff, 28);
          }
        }

        &.warning {
          .con {
            .left {
              i {
                background: #ff4c39;

                &:after {
                  width: 24px;
                  height: 40px;
                  @include icon;
                  @include icon_position(24, 40, 368, 6);
                }
              }
            }
          }
        }

        &.sos {
          .con {
            .left {
              i {
                background: #ffa92f;

                &:after {
                  width: 56px;
                  height: 19px;
                  @include icon;
                  @include icon_position(56, 19, 306, 20);
                }
              }
            }
          }
        }

        &.outOfRange {
          .con {
            .left {
              i {
                background: $blue;

                &:after {
                  width: 52px;
                  height: 52px;
                  @include icon;
                  @include icon_position(52, 52, 251, 0);
                }
              }
            }
          }
        }

        &.off {
          .con {
            .left {
              i {
                background: #fd6666;

                &:after {
                  width: 50px;
                  height: 50px;
                  @include icon;
                  @include icon_position(50, 50, 300, 150);
                }
              }
            }
          }
        }
        &.default {
          .con {
            .left {
              i {
                background: $background;
                &:after {
                  width: 60px;
                  height: 60px;
                  @include icon;
                  @include icon_position(50, 50, 250, 200);
                }
              }
            }
          }
        }
        &.drownReport {
          .con {
            .left {
              i {
                background: $next;
                @include center();
                &:after {
                  width: 50px;
                  height: 50px;
                  background: url('~@/assets/myself/drownReport.png') no-repeat;
                  background-size: 50px;
                }
              }
            }
          }
        }
        &.callLog {
          .con {
            .left {
              i {
                background: $background;
                @include center();
                &:after {
                  width: 50px;
                  height: 50px;
                  background: url('~@/assets/myself/callLog.png') no-repeat;
                  background-size: 50px;
                }
              }
            }
          }
        }
        &.healthy {
          .con {
            .left {
              i {
                background: $background;
                @include center();
                &:after {
                  width: 50px;
                  height: 50px;
                  background: url('~@/assets/myself/healthy.png') no-repeat;
                  background-size: 50px;
                }
              }
            }
          }
        }
        &.noWear {
          .con {
            .left {
              i {
                background: $background;
                @include center();
                &:after {
                  width: 50px;
                  height: 50px;
                  background: url('~@/assets/myself/noWear.png') no-repeat;
                  background-size: 50px;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>