移动端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

index.vue 5.8 KiB

4 jaren geleden
4 jaren geleden
3 jaren geleden
3 jaren geleden
2 jaren geleden
3 jaren geleden
3 jaren geleden
3 jaren geleden
3 jaren geleden
3 jaren geleden
3 jaren geleden
3 jaren geleden
3 jaren geleden
3 jaren geleden
3 jaren geleden
3 jaren geleden
3 jaren geleden
3 jaren geleden
3 jaren geleden
3 jaren geleden
3 jaren geleden
3 jaren geleden
3 jaren geleden
3 jaren geleden
3 jaren geleden
4 jaren geleden
4 jaren geleden
4 jaren geleden
4 jaren geleden
3 jaren geleden
3 jaren geleden
3 jaren geleden
4 jaren geleden
3 jaren geleden
3 jaren geleden
2 jaren geleden
3 jaren geleden
2 jaren geleden
3 jaren geleden
3 jaren geleden
3 jaren geleden
4 jaren geleden
4 jaren geleden
4 jaren geleden
3 jaren geleden
3 jaren geleden
3 jaren geleden
3 jaren geleden
3 jaren geleden
4 jaren geleden
4 jaren geleden
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196
  1. <template>
  2. <div class="app-container">
  3. <van-row>
  4. <van-col span="2">
  5. <van-image src="../../static/images/index/logo.png" />
  6. </van-col>
  7. <van-col span="22" style="line-height: 29px;font-size: 20px;">{{titleHead}}</van-col>
  8. </van-row>
  9. <van-swipe class="my-swipe" :autoplay="3000" height="180" indicator-color="white" :show-indicators="false">
  10. <van-swipe-item v-for="(item,index) in bannerList" :key="index">
  11. <van-image :src="item.img" height="180" @click="goDetail(item.id)" />
  12. <p class="bannerTit">{{item.title}}</p>
  13. </van-swipe-item>
  14. </van-swipe>
  15. <div style="border-radius: 10px;overflow: hidden;">
  16. <van-grid :border="false" :column-num="3">
  17. <van-grid-item to="/news/index">
  18. <van-image src="../../static/images/icon/icon_new.png" width="40" height="40" />
  19. <p>新闻资讯</p>
  20. </van-grid-item>
  21. <van-grid-item to="/biddingHall">
  22. <van-image src="../../static/images/icon/icon_bidding.png" width="40" height="40" />
  23. <p>竞价大厅</p>
  24. </van-grid-item>
  25. <van-grid-item to="/notice/index">
  26. <van-image src="../../static/images/icon/icon_project.png" width="40" height="40" />
  27. <p>项目公告</p>
  28. </van-grid-item>
  29. <van-grid-item to="/policy">
  30. <van-image src="../../static/images/icon/icon_statute.png" width="40" height="40" />
  31. <p>政策法规</p>
  32. </van-grid-item>
  33. <van-grid-item to="/interaction/index">
  34. <van-image src="../../static/images/icon/icon_talk.png" width="40" height="40" />
  35. <p>互动交流</p>
  36. </van-grid-item>
  37. <van-grid-item to="/supply/index">
  38. <van-image src="../../static/images/icon/icon_need.png" width="40" height="40" />
  39. <p>个人供求</p>
  40. </van-grid-item>
  41. <!-- <van-grid-item to="/authenticRight">
  42. <van-image src="../../static/images/icon/icon_need.png" width="40" height="40" />
  43. <p>确权调查</p>
  44. </van-grid-item>-->
  45. </van-grid>
  46. </div>
  47. <p class="newTit">新闻资讯</p>
  48. <div style="border-radius: 10px;overflow: hidden;">
  49. <van-list
  50. v-model="loading"
  51. :finished="finished"
  52. finished-text="没有更多了"
  53. @load="getList()"
  54. >
  55. <!-- @load="newList"-->
  56. <van-cell v-for="item in newList" :key="item.id" :label="item.newsTime" :to="{name:'newDetail', query: {id:item.id}}">
  57. <!-- 使用 right-icon 插槽来自定义右侧图标 -->
  58. <template #title>
  59. <p class="newContent">{{item.title}}</p>
  60. </template>
  61. <template #right-icon>
  62. <van-image :src="item.img" class="search-icon" width="30%" v-if="item.img" />
  63. <van-image src="../../static/images/zwtpxw.jpg" class="search-icon" width="30%" v-else/>
  64. </template>
  65. </van-cell>
  66. </van-list>
  67. </div>
  68. </div>
  69. </template>
  70. <script>
  71. import { newList,websiteConfig } from "@/api/index";
  72. export default {
  73. name: "index",
  74. data() {
  75. return {
  76. //是否显示加载
  77. loading: false,
  78. //是否滚动到底部
  79. finished: false,
  80. //查询参数
  81. queryParams: {
  82. pageNum: 1,
  83. pageSize: 5,
  84. deptId:100,
  85. number:2
  86. },
  87. //新闻集合
  88. newList:[],
  89. //轮播图集合
  90. bannerList:'',
  91. titleHead:'农村产权交易服务平台'
  92. };
  93. },
  94. created() {
  95. //this.getList();
  96. websiteConfig().then(response => {
  97. this.titleHead = response.data[0].configValue;
  98. });
  99. this.getBanner();
  100. },
  101. methods: {
  102. getList(){
  103. this.loading = true;
  104. this.queryParams.number = 2 ;
  105. this.queryParams.pageSize = 5 ;
  106. newList(this.queryParams).then(response => {
  107. for (var i = 0; i < response.rows.length; i++) {
  108. this.newList.push(response.rows[i]);
  109. var imgStrs = response.rows[i].content.match(/<IMG src=\"([^\"]*?)\">/gi)
  110. console.log(imgStrs)
  111. if (imgStrs != null && imgStrs != '') {
  112. this.newList[i].img = imgStrs[0].substr(10,(imgStrs[0].length-12));
  113. }
  114. }
  115. if(this.newList.length >= response.total){
  116. this.finished = true;
  117. return;
  118. }
  119. this.queryParams.pageNum += 1 ;
  120. this.loading = false;
  121. });
  122. },
  123. getBanner(){
  124. this.loading = true;
  125. this.queryParams.number = 1 ;
  126. this.queryParams.pageSize = 5 ;
  127. newList(this.queryParams).then(response => {
  128. this.bannerList = response.rows;
  129. for (var i = 0; i < response.rows.length; i++) {
  130. var imgStrs = response.rows[i].content.match(/<IMG src=\"([^\"]*?)\">/gi)
  131. if (imgStrs != null && imgStrs != '') {
  132. this.bannerList[i].img = imgStrs[0].substr(10,(imgStrs[0].length-12));
  133. }
  134. }
  135. this.loading = false;
  136. });
  137. },
  138. goDetail(id){
  139. console.log(id)
  140. window.location = 'news/newDetail?id='+id;
  141. }
  142. },
  143. };
  144. </script>
  145. <style scoped lang="scss">
  146. .app-container {
  147. padding: 6% 3% 0;
  148. }
  149. .bannerTit{
  150. position: absolute;
  151. bottom: 0;
  152. background: #000;
  153. opacity: 0.5;
  154. width: 100%;
  155. height: 0.8rem;
  156. line-height: 0.8rem;
  157. color: #eee;
  158. text-align: center;
  159. overflow: hidden;
  160. padding: 0 5%;
  161. }
  162. .link{
  163. color: #000;
  164. }
  165. .my-swipe {
  166. border-radius: 30px;
  167. margin-top: 0.4rem;
  168. margin-bottom: 0.4rem;
  169. }
  170. .my-swipe .van-swipe-item .van-image{
  171. width: 100%;
  172. }
  173. .van-grid-item p{
  174. margin-top: 10px;
  175. }
  176. .newTit{
  177. font-size: 0.45rem;
  178. margin: 0.4rem 0;
  179. font-family: Source Han Sans SC, Source Han Sans SC-Medium;
  180. font-weight: 500;
  181. text-align: left;
  182. color: #333333;
  183. }
  184. .newContent{
  185. display: -webkit-box;
  186. -webkit-box-orient: vertical;
  187. -webkit-line-clamp: 2;
  188. word-break: break-all;
  189. overflow: hidden;
  190. }
  191. .search-icon {
  192. line-height: inherit;
  193. margin-left: 10px;
  194. }
  195. </style>