|
|
@@ -0,0 +1,216 @@
|
|
|
+<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(true)">
|
|
|
+ <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() {
|
|
|
+ this.getTypes()
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ 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.data;
|
|
|
+ this.content = this.$refs.List.paging(this.content, res)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ 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>
|
