|
|
@@ -1,113 +1,176 @@
|
|
|
<template>
|
|
|
<div class="new-list">
|
|
|
- <div class="new-item hand" v-for="item in newList" :key="item.id" @click="navTo('/donate/receive/detail?id='+ item.id)">
|
|
|
+ <div class="serch-wrapper">
|
|
|
+ <div class="search">
|
|
|
+ <input type="text" v-model="keyword" :placeholder="tit" class="" @keyup.enter="getList('re')" />
|
|
|
+ <img src="../../../assets/img/search.png" class="hand" @click="getList('re')">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="new-item hand" v-for="item in newList" :key="item.id"
|
|
|
+ @click="navTo('/donate/receive/detail?id='+ item.id)">
|
|
|
<div class="title clamp">
|
|
|
<span class="title-icon"></span>
|
|
|
{{ item.title }}
|
|
|
</div>
|
|
|
<div class="time">{{ item.release_time || item.add_time}}</div>
|
|
|
</div>
|
|
|
- <el-pagination layout="prev, pager, next" :total="total" hide-on-single-page background prev-text="上一页" next-text="下一页" @current-change="currentChange" :page-size="limit"></el-pagination>
|
|
|
+ <el-pagination layout="prev, pager, next" :total="total" hide-on-single-page background prev-text="上一页"
|
|
|
+ next-text="下一页" @current-change="currentChange" :page-size="limit"></el-pagination>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { newsList,getArtList } from '../../../request/api.js';
|
|
|
-export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- newList: [],
|
|
|
- total: 0,
|
|
|
- page: 1,
|
|
|
- limit: 15
|
|
|
- };
|
|
|
- },
|
|
|
- created() {
|
|
|
- this.getList()
|
|
|
- },
|
|
|
- methods:{
|
|
|
- compare(attribute) {
|
|
|
- return function(obj1, obj2) {
|
|
|
- let val1 = obj1[attribute].split('-').join('')*1
|
|
|
- var val2 = obj2[attribute].split('-').join('')*1;
|
|
|
- if (val1 < val2) {
|
|
|
- return 1;
|
|
|
- } else if (val1 > val2) {
|
|
|
- return -1;
|
|
|
- } else {
|
|
|
- return 0;
|
|
|
- }
|
|
|
- }
|
|
|
+ import {
|
|
|
+ newsList,
|
|
|
+ getArtList
|
|
|
+ } from '../../../request/api.js';
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ newList: [],
|
|
|
+ total: 0,
|
|
|
+ page: 1,
|
|
|
+ limit: 15,
|
|
|
+ keyword: '',
|
|
|
+ tit: '捐赠款物查询',
|
|
|
+ };
|
|
|
},
|
|
|
- navTo(url) {
|
|
|
- this.$router.push(url);
|
|
|
- },
|
|
|
- currentChange(e) {
|
|
|
- console.log(e);
|
|
|
- this.page = e
|
|
|
+ created() {
|
|
|
this.getList()
|
|
|
},
|
|
|
- getList() {
|
|
|
- let obj = this
|
|
|
- getArtList({
|
|
|
- page: obj.page,
|
|
|
- limit: obj.limit
|
|
|
- },36).then(res => {
|
|
|
- obj.newList = res.data.list.map(item => {
|
|
|
- let arr = item.add_time.split(' ')
|
|
|
- item.add_time = arr[0]+''
|
|
|
- return item
|
|
|
+ methods: {
|
|
|
+ compare(attribute) {
|
|
|
+ return function(obj1, obj2) {
|
|
|
+ let val1 = obj1[attribute].split('-').join('') * 1
|
|
|
+ var val2 = obj2[attribute].split('-').join('') * 1;
|
|
|
+ if (val1 < val2) {
|
|
|
+ return 1;
|
|
|
+ } else if (val1 > val2) {
|
|
|
+ return -1;
|
|
|
+ } else {
|
|
|
+ return 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ navTo(url) {
|
|
|
+ this.$router.push(url);
|
|
|
+ },
|
|
|
+ currentChange(e) {
|
|
|
+ console.log(e);
|
|
|
+ this.page = e
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ getList(type) {
|
|
|
+ let obj = this
|
|
|
+ if(type == 're') {
|
|
|
+ obj.page = 1
|
|
|
+ }
|
|
|
+ getArtList({
|
|
|
+ page: obj.page,
|
|
|
+ limit: obj.limit,
|
|
|
+ title: obj.keyword
|
|
|
+ }, 36).then(res => {
|
|
|
+ obj.newList = res.data.list.map(item => {
|
|
|
+ let arr = item.add_time.split(' ')
|
|
|
+ item.add_time = arr[0] + ''
|
|
|
+ return item
|
|
|
+ })
|
|
|
+ obj.newList.sort(this.compare('release_time'))
|
|
|
+ obj.total = res.data.count
|
|
|
})
|
|
|
- obj.newList.sort(this.compare('release_time'))
|
|
|
- obj.total = res.data.count
|
|
|
- })
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
-};
|
|
|
+ };
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-.new-list {
|
|
|
- // padding: 0px 72px 0 40px;
|
|
|
- .new-item {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- font-size: 18px;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: #666666;
|
|
|
- height: 40px;
|
|
|
- border-bottom: 1px solid #E5E5E5;
|
|
|
- line-height: 40px;
|
|
|
- &:hover {
|
|
|
- color: red;
|
|
|
+ .new-list {
|
|
|
+ // padding: 0px 72px 0 40px;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .new-item {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-size: 18px;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #666666;
|
|
|
+ height: 40px;
|
|
|
+ border-bottom: 1px solid #E5E5E5;
|
|
|
+ line-height: 40px;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ color: red;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ .title-icon {
|
|
|
+ border-left-color: red;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &:last-of-type {
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+
|
|
|
.title {
|
|
|
+ width: 500px;
|
|
|
+
|
|
|
.title-icon {
|
|
|
- border-left-color: red;
|
|
|
+ display: inline-block;
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ border-top: 6px solid transparent;
|
|
|
+ border-left: 8px solid #d2d2d2;
|
|
|
+ border-bottom: 6px solid transparent;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- &:last-of-type {
|
|
|
- border-bottom: none;
|
|
|
- }
|
|
|
- .title {
|
|
|
- width: 500px;
|
|
|
- .title-icon {
|
|
|
- display: inline-block;
|
|
|
- width: 0;
|
|
|
- height: 0;
|
|
|
- width: 0;
|
|
|
- height: 0;
|
|
|
- border-top: 6px solid transparent;
|
|
|
- border-left: 8px solid #d2d2d2;
|
|
|
- border-bottom: 6px solid transparent;
|
|
|
- }
|
|
|
- }
|
|
|
}
|
|
|
-}
|
|
|
+
|
|
|
/deep/ .el-pagination {
|
|
|
margin-top: 50px;
|
|
|
text-align: center;
|
|
|
}
|
|
|
-</style>
|
|
|
|
|
|
+ .serch-wrapper {
|
|
|
+ display: flex;
|
|
|
+ height: 33px;
|
|
|
+ justify-content: flex-end;
|
|
|
+ position: absolute;
|
|
|
+ top: -75px;
|
|
|
+ right: -25px;
|
|
|
+ width: 100%;
|
|
|
+ .search {
|
|
|
+
|
|
|
+ padding-left: 13px;
|
|
|
+ padding-right: 13px;
|
|
|
+ width: 295px;
|
|
|
+ height: 33px;
|
|
|
+ line-height: 33px;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border: 1px solid #CCCCCC;
|
|
|
+ border-radius: 10px;
|
|
|
+ // margin-bottom: 10px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ input {
|
|
|
+ width: 235px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ outline: none;
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
