|
|
@@ -2,14 +2,37 @@
|
|
|
<div class="invite" @scroll="handleScroll">
|
|
|
<div class="head">
|
|
|
<img @click="back" src="@/assets/images/back.png" class="arrow_img" />
|
|
|
- <span>{{ $t('lang219') }}</span>
|
|
|
+ <!-- <span>{{ $t('lang219') }}</span> -->
|
|
|
+ <van-tabs class="tabs" v-model="navActive" color="#29B286" title-active-color="#29B286" title-inactive-color="#080808" @change="changeTab">
|
|
|
+ <van-tab v-for="(item, index) in type" :key="index" :title="item.value"></van-tab>
|
|
|
+ </van-tabs>
|
|
|
</div>
|
|
|
- <div v-if="list.length > 0">
|
|
|
+ <van-field v-model="key" :placeholder="$t('lang454')" class="input" left-icon="search" @click-left-icon="search" @keyup.enter="search" />
|
|
|
+ <van-tabs class="child_tabs" v-model="childActive" color="#29B286" title-active-color="#29B286" title-inactive-color="#080808" @change="changeChildTab" v-if="childType.length > 0">
|
|
|
+ <!-- <van-tab key="0" title="全部"></van-tab> -->
|
|
|
+ <van-tab v-for="(item, index) in childType" :name="item.id" :key="index" :title="item.name"></van-tab>
|
|
|
+ </van-tabs>
|
|
|
+ <div v-if="list.length > 0" class="notice_box">
|
|
|
<div class="notice" v-for="(item, index) in list" :key="index" @click="navigatorTo('bulletinDetail', item.id)">
|
|
|
- <img class="notice_img" :src="item.img_url" alt="" v-if="item.img_url" />
|
|
|
+ <!-- <img class="notice_img" :src="item.img_url" alt="" v-if="item.img_url" /> -->
|
|
|
+ <svg t="1748345661681" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8571" width="11" height="11" v-if="item.is_top == 1">
|
|
|
+ <path
|
|
|
+ d="M938.8032 640.256l-378.9312-503.2448c-17.408-25.8048-55.2448-26.4192-73.8816-1.1776l-398.7456 503.2448c-21.6064 30.0032-0.6144 72.0896 36.608 72.0896h187.392v233.6256c0 35.4304 28.8256 64.8704 64.8704 64.8704h270.848c35.4304 0 64.8704-28.8256 64.8704-64.8704V711.168h189.184c36.608-0.0512 58.2144-40.9088 37.7856-70.912z m0 0"
|
|
|
+ p-id="8572"
|
|
|
+ fill="#29b286"
|
|
|
+ ></path>
|
|
|
+ <path
|
|
|
+ d="M126.8736 115.4048h768.6656c28.2112 0 51.0464-22.8352 51.0464-51.0464 0-28.2112-22.8352-51.0464-51.0464-51.0464H126.8736c-28.2112 0-51.0464 22.8352-51.0464 51.0464 0.0512 28.2112 22.8352 51.0464 51.0464 51.0464z m0 0"
|
|
|
+ p-id="8573"
|
|
|
+ fill="#29b286"
|
|
|
+ ></path>
|
|
|
+ </svg>
|
|
|
+ <span class="title">{{ item.title }}</span>
|
|
|
<div class="right">
|
|
|
- <span>{{ item.title }}</span>
|
|
|
- <span class="time_text">{{ dateFormatFn(item.createtime) }}</span>
|
|
|
+ <div class="tag_box">
|
|
|
+ <span class="tag" v-for="(it, idx) in item.sub_type_name" :key="idx" :style="{ color: it.color, backgroundColor: hexToRgbObject(it.color) }">{{ it.title }}</span>
|
|
|
+ </div>
|
|
|
+ <span class="time_text"><span class="new" v-if="isToday(new Date(item.createtime * 1000))">New</span>{{ dateFormatFn(item.createtime) }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -31,16 +54,34 @@ export default {
|
|
|
finished: false,
|
|
|
total: 0,
|
|
|
finishText: this.$t('lang200'),
|
|
|
+ key: '',
|
|
|
+ type: [],
|
|
|
+ navActive: 0,
|
|
|
+ childActive: 0,
|
|
|
+ childType: [],
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
|
- this.getAnnouncement();
|
|
|
+ this.gettype();
|
|
|
// window.addEventListener('scroll', this.scrollBottom);
|
|
|
},
|
|
|
destroyed() {
|
|
|
// window.removeEventListener('scroll', this.scrollBottom);
|
|
|
},
|
|
|
+ computed: {},
|
|
|
methods: {
|
|
|
+ isToday(date) {
|
|
|
+ const today = new Date();
|
|
|
+ return date.getFullYear() === today.getFullYear() && date.getMonth() === today.getMonth() && date.getDate() === today.getDate();
|
|
|
+ },
|
|
|
+ hexToRgbObject(hex) {
|
|
|
+ console.log(hex);
|
|
|
+
|
|
|
+ hex = hex.replace('#', '');
|
|
|
+ return `rgba(${parseInt(hex.slice(0, 2), 16)},
|
|
|
+ ${parseInt(hex.slice(2, 4), 16)},
|
|
|
+ ${parseInt(hex.slice(4, 6), 16)},0.2)`;
|
|
|
+ },
|
|
|
//返回上一页
|
|
|
back() {
|
|
|
this.$router.back();
|
|
|
@@ -59,70 +100,59 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
- // scrollBottom() {
|
|
|
- // //加载更多
|
|
|
- // var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //变量windowHeight是可视区的高度
|
|
|
- // var windowHeight = document.documentElement.clientHeight || document.body.clientHeight; //变量scrollHeight是滚动条的总高度
|
|
|
- // var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight; //滚动条到底部的条件
|
|
|
- // console.log(scrollTop, 'scrollTop');
|
|
|
- // console.log(windowHeight, 'windowHeight');
|
|
|
- // console.log(scrollHeight, 'scrollHeight');
|
|
|
- // if (scrollTop + windowHeight >= scrollHeight && scrollTop > 0) {
|
|
|
- // //写后台加载数据的函数
|
|
|
- // // console.log('滚动到底部啦');
|
|
|
- // if (this.finished) {
|
|
|
- // this.loading = true; // 关闭加载状态
|
|
|
- // this.finished = false; // 加载开始
|
|
|
- // this.finishText = this.$t('lang200');
|
|
|
- // this.onLoad();
|
|
|
- // }
|
|
|
- // } else {
|
|
|
- // // this.loading = false; // 关闭加载状态
|
|
|
- // }
|
|
|
- // },
|
|
|
+ gettype() {
|
|
|
+ homeApi.gettype().then(res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.type = res.data;
|
|
|
+ // console.log(this.type);
|
|
|
+ // this.navActive = this.type[0].key;
|
|
|
+ this.childType = Object.entries(this.type[0].sun_type_name).map(([id, name]) => ({ id, name }));
|
|
|
+ if (this.childType.length > 0) {
|
|
|
+ this.childType.unshift({
|
|
|
+ id: 0,
|
|
|
+ name: this.$t('lang201'),
|
|
|
+ });
|
|
|
+ }
|
|
|
+ this.getAnnouncement();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ search() {
|
|
|
+ this.page = 1;
|
|
|
+ this.list = [];
|
|
|
+ this.getAnnouncement();
|
|
|
+ },
|
|
|
+ changeTab(e, i, d) {
|
|
|
+ console.log(e, i, d);
|
|
|
+ this.childType = Object.entries(this.type[this.navActive].sun_type_name).map(([id, name]) => ({ id, name }));
|
|
|
+ if (this.childType.length > 0) {
|
|
|
+ this.childType.unshift({
|
|
|
+ id: 0,
|
|
|
+ name: this.$t('lang201'),
|
|
|
+ });
|
|
|
+ }
|
|
|
+ this.childActive = 0;
|
|
|
+
|
|
|
+ this.search();
|
|
|
+ },
|
|
|
+ changeChildTab() {
|
|
|
+ this.search();
|
|
|
+ },
|
|
|
navigatorTo(name, id) {
|
|
|
this.$router.push({ name, query: { id: id } });
|
|
|
},
|
|
|
dateFormatFn(date) {
|
|
|
- return dateFormat(new Date(date * 1000), 'yyyy-MM-dd');
|
|
|
+ return dateFormat(new Date(date * 1000), 'yyyy-MM-dd hh:mm:ss');
|
|
|
},
|
|
|
getAnnouncement() {
|
|
|
let params = {
|
|
|
page: this.page,
|
|
|
query: {},
|
|
|
- type_id: 1,
|
|
|
+ type_id: this.type[this.navActive].key,
|
|
|
+ sub_type_id: this.childActive,
|
|
|
+ title: this.key,
|
|
|
};
|
|
|
homeApi.getAnnouncement(params).then(res => {
|
|
|
- // if (res.code == 200) {
|
|
|
- // let rows = res.data.rows;
|
|
|
- // // 如果返回的数组是空或数组长度是0
|
|
|
- // if (rows == null || rows.length === 0) {
|
|
|
- // this.loading = false; // 关闭加载状态
|
|
|
- // this.finished = true; // 加载结束
|
|
|
- // this.finishText = this.$t('lang202');
|
|
|
- // if (this.list.length <= 0) {
|
|
|
- // this.total = 0;
|
|
|
- // }
|
|
|
- // return;
|
|
|
- // }
|
|
|
- // this.loading = false; // 关闭加载状态
|
|
|
- // this.finishText = this.$t('lang203');
|
|
|
- // this.finished = true;
|
|
|
- // this.total = res.data.total; //数据总条数
|
|
|
- // this.list = this.list.concat(rows); //合并数组
|
|
|
- // console.log(this.list);
|
|
|
-
|
|
|
- // // 如果合并之后的数组长度大于返回的数据总条数
|
|
|
- // if (this.list.length >= this.total) {
|
|
|
- // this.finished = true; // 加载结束
|
|
|
- // this.finishText = this.$t('lang202');
|
|
|
- // }
|
|
|
- // } else {
|
|
|
- // this.total = 0;
|
|
|
- // this.loading = false; // 关闭加载状态
|
|
|
- // this.finished = true; // 加载结束
|
|
|
- // this.finishText = this.$t('lang202');
|
|
|
- // }
|
|
|
if (res.code == 200) {
|
|
|
if (this.list.length >= res.data.total) {
|
|
|
this.page = -1; // 重置为 -1，表示没有更多数据
|
|
|
@@ -146,9 +176,11 @@ export default {
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
.invite {
|
|
|
- padding: 66px 16px;
|
|
|
+ padding: 56px 0;
|
|
|
height: 100vh;
|
|
|
overflow: auto;
|
|
|
+ background: #fff;
|
|
|
+
|
|
|
.head {
|
|
|
position: fixed;
|
|
|
top: 0;
|
|
|
@@ -160,44 +192,144 @@ export default {
|
|
|
color: rgba(#000, 0.8);
|
|
|
letter-spacing: 1.5px;
|
|
|
font-weight: 550;
|
|
|
- background: #fff;
|
|
|
- padding: 14px 0;
|
|
|
+ font-weight: 18px;
|
|
|
+ padding: 4px 0;
|
|
|
z-index: 99999;
|
|
|
+ background: #fff;
|
|
|
.arrow_img {
|
|
|
position: absolute;
|
|
|
left: 20px;
|
|
|
width: 10px;
|
|
|
height: 16px;
|
|
|
+ z-index: 99;
|
|
|
+ }
|
|
|
+ .tabs {
|
|
|
+ // width: 100vw;
|
|
|
+ // padding: 0 50px 0 0;
|
|
|
+ width: calc(100% - 90px);
|
|
|
+ // padding: 0 45px;
|
|
|
+ overflow: auto;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ /deep/.van-tab {
|
|
|
+ width: fit-content !important;
|
|
|
+ flex: none;
|
|
|
+ padding: 0 15px;
|
|
|
+ }
|
|
|
+ /deep/.van-tabs__nav {
|
|
|
+ // justify-content: center !important;
|
|
|
+ }
|
|
|
+ /deep/.van-tab__text {
|
|
|
+ // width: 100px !important;
|
|
|
+ font-size: 16px;
|
|
|
+ text-align: center !important;
|
|
|
}
|
|
|
+
|
|
|
+ /deep/.van-tab--active {
|
|
|
+ font-weight: 550;
|
|
|
+ }
|
|
|
+ /deep/.van-tabs__wrap {
|
|
|
+ overflow-x: auto;
|
|
|
+ }
|
|
|
+ // .van-tabs__wrap--scrollable .van-tab {
|
|
|
+ // padding: 0;
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ /deep/.van-tabs__line {
|
|
|
+ width: 20px !important;
|
|
|
+ bottom: 20px !important;
|
|
|
+ }
|
|
|
+ .input {
|
|
|
+ // height: 35px;
|
|
|
+ // line-height: 35px;
|
|
|
+ // border: 1px solid #29b286;
|
|
|
+ width: calc(100% - 32px);
|
|
|
+ margin: 0 auto;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 20px;
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ ::v-deep .van-field__control {
|
|
|
+ padding: 2px 0;
|
|
|
+ }
|
|
|
+ ::v-deep .van-icon-search {
|
|
|
+ font-size: 18px;
|
|
|
+ color: #a1a1a1;
|
|
|
+ font-weight: bold;
|
|
|
+ margin: 3px 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ /deep/.van-tabs__nav--line.van-tabs__nav--complete {
|
|
|
+ padding-left: 0 !important;
|
|
|
+ }
|
|
|
+ .child_tabs {
|
|
|
+ border-bottom: 0.5px solid rgba(190, 190, 190, 0.3) !important;
|
|
|
+ // ::v-deep.van-tab {
|
|
|
+ // line-height: 0 !important;
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ .notice_box {
|
|
|
+ padding: 16px;
|
|
|
}
|
|
|
.notice {
|
|
|
+ position: relative;
|
|
|
display: flex;
|
|
|
+ flex-direction: column;
|
|
|
color: #000;
|
|
|
- padding: 16px;
|
|
|
- border-radius: 10px;
|
|
|
- margin-bottom: 16px;
|
|
|
- box-shadow: 4px 4px 15px 0px rgba(180, 212, 212, 0.59);
|
|
|
- background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.3) 0, rgba(255, 255, 255, 0.3) 0, rgba(255, 255, 255, 0.3) 100%, rgba(255, 255, 255, 0.3) 100%);
|
|
|
- &_img {
|
|
|
- width: 100px;
|
|
|
- height: 68px;
|
|
|
- border-radius: 10px;
|
|
|
- margin-right: 10px;
|
|
|
+ font-size: 14px;
|
|
|
+ letter-spacing: 0.8px;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ margin-bottom: 18px;
|
|
|
+ border-bottom: 0.5px solid rgba(190, 190, 190, 0.3);
|
|
|
+ // box-shadow: 4px 4px 15px 0px rgba(180, 212, 212, 0.59);
|
|
|
+ // background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.3) 0, rgba(255, 255, 255, 0.3) 0, rgba(255, 255, 255, 0.3) 100%, rgba(255, 255, 255, 0.3) 100%);
|
|
|
+ .title {
|
|
|
+ font-weight: 600;
|
|
|
+ min-height: 22px;
|
|
|
}
|
|
|
-
|
|
|
.right {
|
|
|
display: flex;
|
|
|
- flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
justify-content: space-between;
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 550;
|
|
|
+ padding-top: 10px;
|
|
|
+
|
|
|
+ .tag_box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ width: 56%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tag {
|
|
|
+ font-size: 11px;
|
|
|
+ // color: #3b98e4;
|
|
|
+ padding: 1px 3px;
|
|
|
+ border-radius: 4px;
|
|
|
+ margin-left: 3px;
|
|
|
+ margin-bottom: 3px;
|
|
|
+ // background-color: rgba(#3b98e4, 0.2);
|
|
|
+ }
|
|
|
|
|
|
.time_text {
|
|
|
+ color: #b4b4b4;
|
|
|
font-weight: normal;
|
|
|
- font-size: 13px;
|
|
|
- padding-top: 10px;
|
|
|
+ font-size: 11px;
|
|
|
+ margin-bottom: 3px;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ .new {
|
|
|
+ color: #ec413e;
|
|
|
+ letter-spacing: 0;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 10px;
|
|
|
+ padding-right: 6px;
|
|
|
}
|
|
|
}
|
|
|
+ svg {
|
|
|
+ position: absolute;
|
|
|
+ left: -13px;
|
|
|
+ top: 3px;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.bare {
|
xiaomei