YXGJ/packageA/affiche/index.vue

<template>
  <view>
    <u-tabs
      :list="types"
      :activeStyle="{ fontWeight: 'bold', color: '#C30D23' }"
      lineColor="#C30D23"
      keyName="classname"
      @change="tabsChange"
    />
    <view class="search-box">
      <view hover-class="navigator-hover" class="switch" @click="changeStatus">
        <view class="status" :class="activeStatus == '全部' ? 'active' : ''">
          全部
        </view>
        <view class="status" :class="activeStatus != '全部' ? 'active' : ''">
          未读
        </view>
      </view>
      <u-search
        placeholder="搜索关键字"
        bgColor="#fff"
        v-model="keyword"
        @search="onSearch"
        @clear="onSearch"
        :showAction="false"
      />
    </view>
    <My_listbox ref="List" @getlist="getList">
      <view style="height: 5px" />
      <navigator
        :url="'/packageA/affiche/detail?id=' + item.sat_noticeid"
        class="item"
        v-for="item in list"
        :key="item.sat_noticeid"
        hover-class="navigator-hover"
      >
        <view class="title">{{ item.title }}</view>
        <view class="line" />
        <view class="date">{{ item.checkdate }}</view>
        <view
          class="readstatus"
          :style="{
            color: colors[item.readstatus].color,
            background: colors[item.readstatus].back,
          }"
          >{{ item.readstatus }}</view
        >
      </navigator>
    </My_listbox>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeStatus: "全部",
      keyword: "",
      list: [],
      types: [],
      content: {
        where: {
          condition: "",
          sat_notice_classid: "",
          isread: "", //0:已读.1:已知，2：未读
        },
      },
      colors: {
        已读: {
          color: "#E3041F",
          back: "#FFF0F2",
        },
        未读: {
          color: "#FFFFFF",
          back: "#E3041F",
        },
        已知: {
          color: "#999999",
          back: "#EEEEEE",
        },
      },
    };
  },
  onLoad() {
    uni.setNavigationBarTitle({
      title: "企业公告",
    });
    this.getTypes();
    this.getList();
  },
  onShow() {
    this.updateList();
  },
  methods: {
    getTypes() {
      this.$Http
        .basic({
          id: "20221101094603",
          content: {
            pageNumber: 1,
            pageSize: 9999,
            where: {
              condition: "",
              isenable: 1,
            },
          },
        })
        .then((res) => {
          console.log("获取通告分类", res);
          if (this.cutoff(res.msg)) return;
          if (res.data.length > 1) {
            res.data.unshift({
              classname: "全部",
              sat_notice_classid: "",
            });
            this.types = res.data;
          }
        });
    },
    getList(init = false) {
      if (this.paging(this.content, init)) return;
      this.$Http
        .basic({
          id: "20221111090904",
          content: this.content,
        })
        .then((res) => {
          this.$refs.List.RefreshToComplete();
          console.log("获取通告列表", res);
          if (this.cutoff(res.msg)) return;
          this.list =
            res.pageNumber == 1 ? res.data : this.list.concat(res.data);
          this.content = this.$refs.List.paging(this.content, res);
        });
    },
    updateList() {
      if (this.content.pageNumber && this.content.pageNumber >= 2) {
        let content = this.paging(this.content, true, true);
        this.$Http
          .basic({
            id: "20221111090904",
            content,
          })
          .then((res) => {
            console.log("更新通告列表", res);
            if (this.cutoff(res.msg)) return;
            this.list = res.data;
            this.$refs.List.paging(content, res, true);
          });
      }
    },
    changeStatus() {
      this.activeStatus = this.activeStatus == "全部" ? "未读" : "全部";
      this.content.where.isread = this.activeStatus == "全部" ? "" : 2;
      this.getList(true);
    },
    tabsChange(e) {
      this.content.where.sat_notice_classid = e.sat_notice_classid;
      this.getList(true);
    },
    onSearch(e) {
      this.content.where.condition = e || "";
      this.getList(true);
    },
  },
};
</script>

<style lang="scss">
/deep/ .u-search__content {
  height: 30px !important;

  .uni-input-wrapper {
    font-size: 14px;
  }

  .u-icon__icon {
    font-size: 22px !important;
  }
}

.search-box {
  display: flex;
  align-items: center;
  padding: 0 10px;
  margin-top: 10px;
  margin-bottom: 5px;
  box-sizing: border-box;

  .switch {
    display: flex;
    width: 96px;
    height: 30px;
    background: #fff;
    margin-right: 10px;
    border-radius: 15px;

    .status {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 30px;
      width: 48px;
      border-radius: 15px;
      font-family: Source Han Sans SC, Source Han Sans SC;
      font-size: 14px;
      color: #666666;
      background: #fff;
    }

    .active {
      background: #c30d23;
      color: #fff;
    }
  }
}

.item {
  position: relative;
  width: 355px;
  background: #ffffff;
  border-radius: 8px;
  margin: 0 auto 8px;
  padding: 15px 10px;
  box-sizing: border-box;

  .title {
    width: 281px;
    font-family: Source Han Sans SC, Source Han Sans SC;
    font-weight: bold;
    font-size: 14px;
    color: #333333;
  }

  .line {
    width: 335px;
    height: 1px;
    background: #eeeeee;
    margin-top: 15px;
  }

  .date {
    line-height: 20px;
    font-size: 14px;
    color: #666666;
    margin-top: 10px;
  }

  .readstatus {
    position: absolute;
    top: 10px;
    right: 0;
    width: 44px;
    height: 24px;
    line-height: 24px;
    font-size: 12px;
    text-align: center;
    border-radius: 12px 0px 0px 12px;
  }
}
</style>