contribution.vue 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230
  1. <template>
  2. <div class="contribution">
  3. <div class="boxtitle">
  4. 当前位置:首页 > 爱心榜
  5. </div>
  6. <div class="boxSearch">
  7. <input type="text" v-model="searchValue" placeholder="请输入捐赠者" required />
  8. <img src="@/assets/img/nsearch.png" class="searchImg" @click="search">
  9. </div>
  10. <div class="jmbox">
  11. <div class="center">
  12. <div class="title">
  13. <div class="time"> 公示时间 </div>
  14. <div class="name"> 捐赠者 </div>
  15. <div class="price"> 捐赠金额 </div>
  16. <div class="intention"> 捐赠意向 </div>
  17. <div class="remarks"> 备注 </div>
  18. </div>
  19. <div style="padding: 10px;color: #999999;" v-show="sum == 0">
  20. ------暂无更多数据------
  21. </div>
  22. <div class="list" v-for="l in list">
  23. <div class="item">
  24. <div class="time"> {{ getTime(l.createtime) }} </div>
  25. <div class="name"> {{ l.contact }} </div>
  26. <div class="price"> {{ l.amount }} </div>
  27. <div class="intention"> {{ l.order_name }} </div>
  28. <div class="remarks"> {{ l.remarks }} </div>
  29. </div>
  30. </div>
  31. </div>
  32. <div class="pagec">
  33. <div class="fristPage" @click="page = 1">
  34. 第一页
  35. </div>
  36. <div class="pagetoomuch" v-show="totalPage>10">
  37. <div class="nextPage" v-show="page-4>0">
  38. ...
  39. </div>
  40. <div class="pageNum" v-for="count in totalPage" @click="pageChoose(count)"
  41. :class="{isChoose:count == page}" v-if="count>page-5&&count<page+4 &&count!=totalPage">
  42. {{ count }}
  43. </div>
  44. <div class="nextPage" v-show="page+4<totalPage">
  45. ...
  46. </div>
  47. <div class="pageNum" v-for="count in totalPage" @click="pageChoose(count)"
  48. :class="{isChoose:count == page}" v-if="count==totalPage">
  49. {{ count }}
  50. </div>
  51. </div>
  52. <div class="pageNum" v-for="count in totalPage" @click="pageChoose(count)"
  53. :class="{isChoose:count == page}" v-show="totalPage<=10">
  54. {{ count }}
  55. </div>
  56. <div class="nextPage" @click='nextPage'>
  57. 下一页
  58. </div>
  59. </div>
  60. </div>
  61. </div>
  62. </template>
  63. <script>
  64. import { getTime } from '../utils/utils.js'
  65. import { getlaveList,getlaveListsearch } from '@/request/api.js'
  66. import jmBox from '@/components/box.vue'
  67. export default {
  68. components: {
  69. jmBox,
  70. },
  71. data() {
  72. return {
  73. loadingType: 'loadmore',
  74. searchValue: '',
  75. navList: {
  76. title: '爱心榜',
  77. },
  78. page: 1,
  79. limit: 10,
  80. sum: 0,
  81. list: [],
  82. }
  83. },
  84. computed: {
  85. // 总页数
  86. totalPage() {
  87. return Math.ceil(this.sum/this.limit)
  88. }
  89. },
  90. mounted() {
  91. this.getlave()
  92. },
  93. methods: {
  94. search() {
  95. getlaveListsearch({page:this.page,limit:this.limit},this.searchValue).then(res => {
  96. this.list = res.data.data
  97. this.sum = res.data.count
  98. })
  99. },
  100. pageChoose(count) {
  101. this.page = count
  102. },
  103. getTime(time) {
  104. return getTime(time)
  105. },
  106. // 下一页
  107. nextPage() {
  108. this.page++
  109. if (this.page > this.totalPage) {
  110. this.page = this.totalPage
  111. }
  112. },
  113. // 爱心榜
  114. getlave() {
  115. getlaveList({page:this.page,limit:this.limit}).then(res => {
  116. this.list = res.data.data
  117. this.sum = res.data.count
  118. })
  119. },
  120. getCategory(id) {
  121. if (id == 20) {
  122. return '疫情防控'
  123. } else if(id == 21){
  124. return 'AED救护及科普'
  125. } else if(id == 22){
  126. return '红十字会人道事业(非定向捐款)'
  127. }
  128. }
  129. },
  130. watch: {
  131. page() {
  132. this.getlave()
  133. }
  134. }
  135. }
  136. </script>
  137. <style lang="scss" scoped>
  138. $red: #D82020;
  139. .pagetoomuch {
  140. display: flex;
  141. }
  142. .boxSearch {
  143. padding-right: 10px;
  144. position: relative;
  145. top: 20px;
  146. input {
  147. padding-right: 10px;
  148. position: absolute;
  149. right: 10px;
  150. min-width: 180px;
  151. border-radius: 10px;
  152. border: solid 1px #CCCCCC;
  153. padding: 5px 10px;
  154. padding-right: 30px;
  155. height: 15px;
  156. outline: none; // 设置点击后无效果
  157. }
  158. .searchImg {
  159. width: 15px;
  160. margin: auto 0;
  161. position: absolute;
  162. top: 5px;
  163. right: 20px;
  164. }
  165. }
  166. .jmbox {
  167. height: 600px;
  168. padding: 70px 0;
  169. }
  170. .contribution {
  171. box-shadow: 1px 1px 6px #e1e1e1;
  172. border-top: solid 2px $red;
  173. background-color: #fff;
  174. .boxtitle {
  175. padding: 10px;
  176. background-color: #F2F2F2;
  177. }
  178. .center {
  179. text-align: center;
  180. .time,.price,.remarks,.name,.intention {
  181. border: solid 1px #F2F2F2;
  182. padding: 5px;
  183. }
  184. .time,.price,.remarks {
  185. flex: 1;
  186. }
  187. .name,.intention {
  188. flex: 2;
  189. }
  190. .title {
  191. color: $red;
  192. display: flex;
  193. justify-content: space-around;
  194. }
  195. .list {
  196. .item {
  197. display: flex;
  198. justify-content: space-around;
  199. }
  200. }
  201. }
  202. .pagec {
  203. display: flex;
  204. float: right;
  205. margin: 20px 30px;
  206. .fristPage,.pageNum,.nextPage {
  207. margin-left: 3px;
  208. border: solid 1px #F2F2F2;
  209. line-height: 30px;
  210. text-align: center;
  211. }
  212. .fristPage,.nextPage {
  213. padding: 0 10px;
  214. }
  215. .pageNum {
  216. width: 30px;
  217. height: 30px;
  218. }
  219. .isChoose {
  220. background-color: $red;
  221. color: #fff;
  222. }
  223. }
  224. }
  225. </style>