Browse Source

企业公告列表

xiaohaizhao 1 year ago
parent
commit
a58f93d8aa
2 changed files with 220 additions and 1 deletions
  1. 4 1
      components/My_listbox.vue
  2. 216 0
      packageA/affiche/index.vue

+ 4 - 1
components/My_listbox.vue

@@ -16,6 +16,7 @@
             <view v-if="pagingText" class="paging">
                 {{ pagingText }}
             </view>
+            <u-divider v-if="bottomTips" text="已经到底部" :dashed="true"></u-divider>
         </scroll-view>
     </view>
 </template>
@@ -48,6 +49,7 @@ export default {
             height: 0,
             scrollIntoView: "",
             pagingText: "",
+            bottomTips: false,
             empty: false
         };
     },
@@ -92,7 +94,8 @@ export default {
         paging(content, res) {
             content.pageNumber = res.pageNumber;
             content.pageTotal = res.pageTotal;
-            this.pagingText = content.pageNumber + ' / ' + content.pageTotal;
+            // this.pagingText = content.pageNumber + ' / ' + content.pageTotal;
+            this.bottomTips = res.total != 0 && content.pageNumber == content.pageTotal;
             this.empty = res.total == 0;
             return content;
         }

+ 216 - 0
packageA/affiche/index.vue

@@ -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>