index.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402
  1. <template>
  2. <div style="background: #f0f0f0;padding-bottom:50px">
  3. <div class="banner">
  4. <img src="~@/assets/images/yqtz.jpg" alt="">
  5. </div>
  6. <div class="bread">
  7. <div>
  8. <span>当前位置:首页-<span style="color:rgba(75, 175, 227, 1)">园区通知</span></span>
  9. </div>
  10. </div>
  11. <div class="smart-device">
  12. <div class="smart-title">
  13. <span><span>园区通知</span>PARK NOTICE</span>
  14. </div>
  15. <!-- <div class="smart-title" v-else>-->
  16. <!-- <span style="font-size: 0.7rem;"><span>物业通知</span>INVESTMENT NOTICE</span>-->
  17. <!-- </div>-->
  18. <div class="smart-device-content">
  19. <div class="list-content">
  20. <div class="case-list">
  21. <div class="case-content">
  22. <ul class="list-table">
  23. <li v-for="(item,index) in noticeList" :key="index" class="myLi" @click="detail(item)">
  24. <div>
  25. <p>
  26. {{ item.createTime }}
  27. </p>
  28. </div>
  29. <div>
  30. <p class="ino">
  31. {{ item.name }}
  32. </p>
  33. </div>
  34. <div><span>&gt;</span></div>
  35. </li>
  36. </ul>
  37. <div class="paginationo-box">
  38. <van-pagination v-model="params.pageNum" :total-items="total" :show-page-size="8" @change="handleCurrentChange">
  39. <template #prev-text>
  40. <van-icon name="arrow-left" />
  41. </template>
  42. <template #next-text>
  43. <van-icon name="arrow" />
  44. </template>
  45. <template #page="{ text }">{{ text }}</template>
  46. </van-pagination>
  47. </div>
  48. </div>
  49. </div>
  50. </div>
  51. </div>
  52. </div>
  53. </div>
  54. </template>
  55. <script>
  56. import { parkNotice, propertyNotice } from '@/service/api_service'
  57. /**
  58. * 分页是用的vant框架
  59. * */
  60. export default {
  61. data() {
  62. return {
  63. active: 1,
  64. currentPage: 1,
  65. total: 0,
  66. noticeList: [
  67. {
  68. name: '第一条通知',
  69. eventIndex: 1,
  70. detail: '',
  71. createTime: '2012-12-12'
  72. },
  73. {
  74. name: '第二条通知第二条通知第二条通知第二条通知第二条通知第二条通知第二条通知第二条通知第二条通知第二条通知第二条通知第二条通知第二条通知第二条通知',
  75. eventIndex: 2,
  76. detail: '',
  77. createTime: '2012-12-12'
  78. },
  79. {
  80. img: 'zs3.png',
  81. name: '第三条通知第三条通知第三条通知第三条通知第三条通知第三条通知',
  82. eventIndex: 3,
  83. detail: '',
  84. createTime: '2012-12-12'
  85. }
  86. ],
  87. params: {
  88. pageNum: 1,
  89. pageSize: 8,
  90. status: 'published'
  91. }
  92. }
  93. },
  94. mounted() {
  95. if (this.$route.query.active) {
  96. this.active = Number(this.$route.query.active)
  97. }
  98. this.initParkNotice()
  99. document.documentElement.scrollTop = document.body.scrollTop = 0 // 回到顶部
  100. if (window.history && window.history.pushState) {
  101. // 向历史记录中插入了当前页
  102. history.pushState(null, null, document.URL)
  103. window.addEventListener('popstate', this.goBack, false)
  104. }
  105. },
  106. destroyed() {
  107. window.removeEventListener('popstate', this.goBack, false)
  108. },
  109. methods: {
  110. goBack() {
  111. // console.log("点击了浏览器的返回按钮");
  112. // sessionStorage.clear()
  113. // window.history.back()
  114. // history.pushState(null, null, document.URL)
  115. this.$router.push({ path: '/' })
  116. },
  117. handleCurrentChange: function(val) {
  118. this.params.pageNum = val
  119. if (this.active === 1) {
  120. this.initParkNotice()
  121. } else {
  122. this.initPropertyNotice()
  123. }
  124. },
  125. changeType(active) {
  126. this.active = active
  127. this.params.pageSize = 10
  128. this.params.pageNum = 1
  129. if (this.active === 1) {
  130. this.initParkNotice()
  131. } else {
  132. this.initPropertyNotice()
  133. }
  134. },
  135. initParkNotice() {
  136. const _this = this
  137. // _this.params.parks = '' //绑定园区
  138. _this.params.type = '1'
  139. parkNotice(_this.params).then((res) => {
  140. console.log(res)
  141. this.total = res.total
  142. if (res.rows) {
  143. _this.noticeList = []
  144. res.rows.forEach((item) => {
  145. const jsons = this.getItemJson(item)
  146. const i = {
  147. name: jsons.title,
  148. eventIndex: 2,
  149. detail: jsons.content,
  150. source: jsons.source,
  151. createTime: jsons.releaseTime.substr(0, 10)
  152. }
  153. _this.noticeList.push(i)
  154. })
  155. }
  156. })
  157. },
  158. initPropertyNotice() {
  159. const _this = this
  160. // _this.params.parks = '' //绑定园区
  161. _this.params.type = '2'
  162. propertyNotice(_this.params).then((res) => {
  163. console.log(res)
  164. this.total = res.total
  165. if (res.rows) {
  166. _this.noticeList = []
  167. res.rows.forEach((item) => {
  168. const jsons = this.getItemJson(item)
  169. const i = {
  170. name: jsons.title,
  171. eventIndex: 2,
  172. detail: jsons.content,
  173. source: jsons.source,
  174. createTime: jsons.releaseTime.substr(0, 10)
  175. }
  176. _this.noticeList.push(i)
  177. })
  178. }
  179. })
  180. },
  181. getItemJson: function(item) {
  182. item.releaseTime = this.$common.transServDate(item.releaseTime)
  183. return item
  184. },
  185. detail(index) {
  186. index.active = this.active
  187. this.$router.push({ name: 'noticeDetail', params: index })
  188. }
  189. }
  190. }
  191. </script>
  192. <style scoped>
  193. .banner img{
  194. width: 100% !important;
  195. }
  196. @media screen and (min-width: 1000px){
  197. .bread{
  198. background: #fff;
  199. }
  200. .myLi:hover{
  201. background: rgba(75, 175, 227, 1) !important;
  202. color: white;
  203. }
  204. .bread div{
  205. width: 1200px;
  206. margin: 0 auto;
  207. text-align: left;
  208. padding: 0.8rem 0;
  209. font-size: 1rem;
  210. }
  211. .smart-title{
  212. margin:3rem 0;
  213. }
  214. .smart-device{
  215. width: 1200px;
  216. margin: 0 auto;
  217. text-align: left;
  218. font-size: 1rem;
  219. }
  220. .smart-device span span{
  221. font-size: 2rem;
  222. display: inline-block;
  223. position: relative;
  224. padding-right: 1rem;
  225. margin-right: 1rem;
  226. font-weight: 900;
  227. }
  228. .smart-device span span:after{
  229. content: '';
  230. width: 1px;
  231. height: 15px;
  232. background: #666;
  233. position: absolute;
  234. right: 0;
  235. bottom: 7px;
  236. }
  237. .device-title img{
  238. width: 80%;
  239. }
  240. .nav-list{
  241. display: flex;
  242. justify-content: center;
  243. flex-wrap: nowrap;
  244. margin: 2rem auto;
  245. width: 50%;
  246. }
  247. .nav-list li{
  248. min-width: 33.33%;
  249. max-width: 33.33%;
  250. text-align: center;
  251. color: #666;
  252. font-size: 1.5rem;
  253. cursor: pointer;
  254. }
  255. .nav-list li span{
  256. border-bottom: 2px solid #f0f0f0;
  257. padding-bottom: 0.8rem;
  258. }
  259. .active span{
  260. display: inline-block;
  261. border-bottom: 2px solid #FF6A00!important;
  262. color: #333;
  263. }
  264. .list-table li{
  265. overflow: hidden;
  266. width: 100%;
  267. background: #fff;
  268. margin-bottom: 1rem;
  269. padding: 1rem 0;
  270. }
  271. .list-table li>div{
  272. float: left;
  273. }
  274. .list-table li>div:nth-child(1){
  275. width: 20%;
  276. text-align: center;
  277. }
  278. .list-table li>div:nth-child(2){
  279. width: 60%;
  280. }
  281. .list-table li>div:nth-child(3){
  282. width: 20%;
  283. text-align: right;
  284. }
  285. .list-table li>div:nth-child(3) span{
  286. margin-right: 1rem;
  287. }
  288. .paginationo-box{
  289. width: 20%;
  290. margin: 0 auto;
  291. }
  292. }
  293. @media screen and (max-width: 1000px){
  294. .banner{
  295. display: none;
  296. }
  297. .bread{
  298. display: none;
  299. }
  300. .smart-title{
  301. margin-top:2rem;
  302. }
  303. .smart-device{
  304. width: 90%;
  305. margin: 0 auto;
  306. text-align: left;
  307. font-size: 1rem;
  308. overflow: hidden;
  309. }
  310. .smart-device span span{
  311. font-size: 1.5rem;
  312. display: inline-block;
  313. position: relative;
  314. padding-right: 1rem;
  315. margin-right: 1rem;
  316. font-weight: 900;
  317. }
  318. .smart-device span span:after{
  319. content: '';
  320. width: 1px;
  321. height: 15px;
  322. background: #666;
  323. position: absolute;
  324. right: 0;
  325. bottom: 7px;
  326. }
  327. .device-title img{
  328. width: 100%;
  329. }
  330. .nav-list{
  331. display: flex;
  332. justify-content: center;
  333. flex-wrap: nowrap;
  334. margin: 2rem;
  335. }
  336. .nav-list li{
  337. min-width: 33.33%;
  338. max-width: 33.33%;
  339. text-align: center;
  340. color: #666;
  341. font-size: 0.8rem;
  342. cursor: pointer;
  343. }
  344. .nav-list li span{
  345. border-bottom: 2px solid #f0f0f0;
  346. padding-bottom: 0.8rem;
  347. }
  348. .active span{
  349. display: inline-block;
  350. border-bottom: 2px solid #FF6A00!important;
  351. color: #333;
  352. font-weight:800!important;
  353. }
  354. .list-table li{
  355. overflow: hidden;
  356. width: 100%;
  357. background: #fff;
  358. margin-bottom: 1rem;
  359. padding: 1rem 0;
  360. }
  361. .list-table li>div{
  362. float: left;
  363. }
  364. .list-table li>div:nth-child(1){
  365. width: 30%;
  366. text-align: center;
  367. }
  368. .list-table li>div:nth-child(2){
  369. width: 50%;
  370. }
  371. .list-table li>div:nth-child(3){
  372. width: 20%;
  373. text-align: right;
  374. }
  375. .list-table li>div:nth-child(3) span{
  376. margin-right: 1rem;
  377. }
  378. }
  379. .list-table{
  380. width: 100%;
  381. }
  382. .list-table p{
  383. white-space:nowrap;
  384. overflow: hidden;
  385. }
  386. .list-table p.ino{
  387. white-space:nowrap;
  388. width: 113%; overflow: hidden;
  389. text-overflow: ellipsis;
  390. }
  391. .paginationo-box /deep/ .van-pagination__item--active{
  392. background: rgba(75, 175, 227, 1)!important;
  393. color: #fff!important;
  394. }
  395. .paginationo-box /deep/ .van-pagination__item{
  396. color: #333;
  397. }
  398. </style>