ykzz-app/pages/messageList/index.vue

<template>
  <view
    :style="{ height: '100vh', overflow: 'hidden', backgroundColor: '#f0f0f0' }"
  >
    <u-status-bar></u-status-bar>
    <u-navbar
      title="消息中心"
      :autoBack="true"
      :titleStyle="{
        fontSize: '18px',
      }"
      rightText="一键已读"
      @rightClick="rightClick"
      :height="44"
      :safeAreaInsetTop="true"
      leftIconSize="20"
      leftIconColor="rgb(153, 153, 153)"
    >
    </u-navbar>
    <view
      class=""
      style="
        margin-top: 44px;
        background-color: #f0f0f0;
        border-top: 1px solid #f0f0f0;
      "
    >
      <view style="padding:0 10px,backgroundColor:#fff">
        <view class="time-ranger" style="padding: 10px; background-color: #fff">
          <view class="start-time">
            <text>开始时间</text>
            <text
              @click="showTime = true"
              style="margin-left: 10%; color: #3399ef"
              >{{ startTime }}</text
            >
          </view>
          <view class="end-time">
            <text>结束时间</text>
            <text
              @click="showTime1 = true"
              style="margin: 0 10%; color: #3399ef"
              >{{ endTime }}</text
            >
            <view class="search-btn" @click="searchTm"> 搜索 </view>
          </view>
        </view>
      </view>
      <view
        style="height: calc(100vh - 180px); overflow-y: auto"
        v-if="list.length !== 0"
      >
        <view
          class=""
          v-for="(item, index) in list"
          :key="index"
          style="margin: 10px; background-color: #fff; padding: 10px"
          @click="toDetail(item)"
        >
          <view class="item">
            <view class="align-center">
              <view class="blueTiao"> </view>
              <view class="title">
                {{ item.title }}
              </view>
            </view>

            <view class="titleRight">
              {{ item.publishTime }}
            </view>
          </view>
          <view class="contentItem">
            <view class="itemC">
              {{ item.content }}
            </view>
          </view>
        </view>
      </view>
      <view
        style="
          height: calc(100vh - 150px);
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: #fff;
        "
        v-else
      >
        <image src="../../static/empty.png" mode=""></image>
      </view>
    </view>
    <u-datetime-picker
      :show="showTime"
      v-model="stm"
      mode="datetime"
      @confirm="showTime = false"
      :minDate="minDate"
      :maxDate="maxDate"
      @cancel="showTime = false"
    ></u-datetime-picker>
    <u-datetime-picker
      :show="showTime1"
      v-model="etm"
      mode="datetime"
      @confirm="showTime1 = false"
      :minDate="minDate"
      :maxDate="maxDate"
      @cancel="showTime1 = false"
    ></u-datetime-picker>
  </view>
</template>

<script>
import moment from "moment";
export default {
  data() {
    return {
      minDate: moment().startOf("year").valueOf(),
      maxDate: moment().valueOf(),
      show: false,
      showTime: false,
      showTime1: false,
      start: "请选择开始时间",
      end: "请选择结束时间",
      stm: "",
      etm: "",
      userList: uni.getStorageSync("value").data,
      list: [],
    };
  },
  onShow(options) {
    this.getList();
  },

  computed: {
    startTime: function () {
      return this.stm
        ? moment(this.stm).format("YYYY-MM-DD HH:mm:ss")
        : this.start;
    },
    endTime: function () {
      return this.etm
        ? moment(this.etm).format("YYYY-MM-DD HH:mm:ss")
        : this.end;
    },
  },
  methods: {
    rightClick() {
      uni.$http
        .get("/gunshiApp/ykz/messageCenter/all/read", {
          receiveUserId: uni.getStorageSync("value").userId,
        })
        .then((res) => {
          if (res.data.code == 200) {
            this.getList();
          }
        });
    },
    searchTm() {
      this.getList();
    },
    getList() {
      console.log(111);
      uni.$http
        .post("/gunshiApp/ykz/messageCenter/list", {
          start: this.stm ? moment(this.stm).format("YYYY-MM-DD HH:mm:ss") : "",
          end: this.etm ? moment(this.etm).format("YYYY-MM-DD HH:mm:ss") : "",
        })
        .then((res) => {
          if (res.data.code == 200) {
            this.list = res.data.data;
          }
        });
    },
    confirm(e) {
      console.log(e);
      this.model.start = e[0];
      this.model.end = e[1];
      this.show = false;
    },
    cancel() {
      this.show = false;
    },
    toDetail(item) {
      console.log(item);
      uni.navigateTo({
        url: "/pages/messageList/detail/index?item=" + JSON.stringify(item),
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.uni-input-placeholder {
  text-align: center;
}

.myTitleStyle {
  font-size: 30px;
  background-color: red;
  height: 200px;
}

.tabsClass {
  margin-top: 44px;
  height: 44px;
  padding: 0 40px;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

.item {
  // border-bottom: 1px solid #f0f0f0;
  padding-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .blueTiao {
    background-color: #2a7efa;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 10px;
  }

  .title {
    border-width: 0px;
    font-family: "微软雅黑 Bold", "微软雅黑 Regular", "微软雅黑", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 15px;
    color: #666666;
  }

  .titleRight {
    display: flex;

    .border {
      border-width: 0px;
      background-color: rgba(236, 245, 255, 1);
      box-sizing: border-box;
      border-width: 1px;
      border-style: solid;
      border-color: rgba(187, 220, 255, 1);
      border-radius: 5px;
      box-shadow: none;
      width: 58px;
      height: 25px;
      color: #689fff;
      text-align: center;
    }
  }
}

.contentItem {
  .itemC {
    display: flex;
    justify-content: space-between;
    display: flex;
    color: #666666;
    padding: 10px;
  }
}
</style>