index.vue 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312
  1. <template>
  2. <view class="meteorological">
  3. <view class="meteorological-header">
  4. <view class="meteorological-header-category">
  5. <picker
  6. @change="bindPickerChange"
  7. :value="meteorologicalIndex"
  8. :range="meteorologicalPickerList"
  9. >
  10. <view class="category-content">
  11. <view class="category-img">
  12. <u-icon name="list" size="54" class="category-icon"></u-icon>
  13. </view>
  14. <view class="category-text">{{ meteorologicalPickerList[meteorologicalIndex] }}</view>
  15. </view>
  16. </picker>
  17. </view>
  18. </view>
  19. <view class="meteorological-content">
  20. <scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="handleScrolltolower">
  21. <view class="meteorological-listbody">
  22. <!-- 列表无数据 -->
  23. <template v-if="list_empty">
  24. <view class="meteorological-listbody-nodata">
  25. <text class="meteorological-listbody-nodata-text">暂无数据</text>
  26. </view>
  27. </template>
  28. <!-- 列表有数据 -->
  29. <template v-else>
  30. <view
  31. class="listbody-item"
  32. v-for="meteorologicalItem in meteorologicalList"
  33. :key="meteorologicalItem.id"
  34. @click="handleMeteorologicalDetails(meteorologicalItem)"
  35. >
  36. <view class="item-container">
  37. <!-- 标题 -->
  38. <view
  39. class="item-title"
  40. >{{ meteorologicalItem.metTitle }}({{ meteorologicalItem.metCategoryName }})</view>
  41. <!-- 简介 -->
  42. <view class="item-content">{{ meteorologicalItem.metSummary }}</view>
  43. <!-- 发布时间 -->
  44. <view class="item-releasetime">发布时间:{{ meteorologicalItem.metInTime }}</view>
  45. </view>
  46. </view>
  47. </template>
  48. <!-- 加载更多组件 -->
  49. <uni-load-more :status="loadStatus" v-if="!list_empty"></uni-load-more>
  50. </view>
  51. </scroll-view>
  52. </view>
  53. </view>
  54. </template>
  55. <script>
  56. import {
  57. meteorologicalListData,
  58. meteorologicalCategoryListData
  59. } from '@/agrcloud-api/meteorological';
  60. import uniLoadMore from "@/agrcloud-components/uni-load-more/uni-load-more.vue"
  61. export default {
  62. name: 'meteorological',
  63. components: {
  64. uniLoadMore
  65. },
  66. data() {
  67. return {
  68. meteorologicalIndex: 0,
  69. respCategoryList: [],
  70. meteorologicalPickerList: ["全部"],
  71. currMeteorologicalValue: '',
  72. loadStatus: 'more',
  73. list_empty: false,
  74. pageTotal: 0,
  75. pageCount: 0,
  76. pagination: {
  77. pageNum: 1,
  78. pageSize: 10
  79. },
  80. meteorologicalList: []
  81. };
  82. },
  83. onLoad() {
  84. this.initData();
  85. },
  86. methods: {
  87. /** 初始化数据 */
  88. initData() {
  89. this.getCategoryListData();
  90. },
  91. getCategoryListData() {
  92. meteorologicalCategoryListData().then((res) => {
  93. this.respCategoryList = res.data || [];
  94. let tempCategoryList = [];
  95. for (let categoryIndex = 0; categoryIndex < this.respCategoryList.length; categoryIndex++) {
  96. tempCategoryList.push(this.respCategoryList[categoryIndex].dictLabel);
  97. }
  98. this.meteorologicalPickerList = [...this.meteorologicalPickerList, ...tempCategoryList];
  99. this.getMeteorologicalListData();
  100. }).catch(err => {
  101. this.loadStatus = 'noMores';
  102. });
  103. },
  104. bindPickerChange: function (e) {
  105. this.meteorologicalIndex = e.target.value;
  106. const currPickerChangeCategory = this.meteorologicalPickerList[e.target.value];
  107. if (currPickerChangeCategory != '全部') {
  108. for (let categoryIndex = 0; categoryIndex < this.respCategoryList.length; categoryIndex++) {
  109. if (currPickerChangeCategory == this.respCategoryList[categoryIndex].dictLabel) {
  110. this.currMeteorologicalValue = this.respCategoryList[categoryIndex].dictValue;
  111. break;
  112. }
  113. }
  114. } else {
  115. this.currMeteorologicalValue = '';
  116. }
  117. this.pagination.pageNum = 1;
  118. this.getMeteorologicalListData();
  119. },
  120. /** 获取通知公告之列表数据 */
  121. getMeteorologicalListData() {
  122. this.list_empty = false;
  123. this.loadStatus = 'loading';
  124. meteorologicalListData({ ...this.pagination, metCategoryId: this.currMeteorologicalValue }).then(res => {
  125. // 数据总条数
  126. this.pageTotal = res.total || 0;
  127. // 如果列表为第一页,返回列表数据清空
  128. if (this.pagination.pageNum == 1) {
  129. this.meteorologicalList = [];
  130. };
  131. // 处理返回结果
  132. if ((res.rows || []).length <= 0) { // 返回结果没有数据
  133. if ((this.meteorologicalList || []).length <= 0) {
  134. this.loadStatus = 'noMores';
  135. this.list_empty = true;
  136. } else {
  137. this.loadStatus = 'noMores';
  138. }
  139. } else { //返回结果有数据
  140. this.list_empty = false;
  141. // 获取列表数据分页数量
  142. this.pageCount = Math.ceil((res.total || 0) / this.pagination.pageSize);
  143. if ((res.total || 0) % this.pagination.pageSize == 0) {
  144. this.pageCount = Math.ceil((res.total || 0) / this.pagination.pageSize);
  145. if (this.pageCount == 1) {
  146. this.pageCount--;
  147. }
  148. } else {
  149. this.pageCount--;
  150. };
  151. // 处理页面状态
  152. if (this.pageCount === 0) {
  153. this.loadStatus = 'noMores'
  154. } else {
  155. this.loadStatus = 'more'
  156. }
  157. // 组装返回数据
  158. this.meteorologicalList.push.apply(this.meteorologicalList, res.rows || []);
  159. uni.stopPullDownRefresh();
  160. }
  161. }).catch(err => {
  162. this.loadStatus = 'noMores';
  163. });
  164. },
  165. handleScrolltolower() {
  166. this.loadStatus = 'loading';
  167. if (this.pagination.pageNum - 1 >= this.pageCount) {
  168. this.loadStatus = 'noMores';
  169. return;
  170. } else {
  171. this.pagination.pageNum++;
  172. this.getMeteorologicalListData();
  173. }
  174. },
  175. /** 通知公告之详情数据操作 */
  176. handleMeteorologicalDetails(param) {
  177. this.$store.dispatch("SetMeteorologicalDetails", param).then(() => {
  178. uni.navigateTo({
  179. url: '/pages/meteorological/modal/details'
  180. });
  181. }).catch(() => {
  182. this.$msgbox('访问数据异常!', 'none');
  183. });
  184. }
  185. }
  186. }
  187. </script>
  188. <style lang="scss" scoped>
  189. .meteorological {
  190. padding: 0;
  191. width: 100%;
  192. &-header {
  193. width: 100%;
  194. background: #ffffff;
  195. height: 104rpx;
  196. padding-top: 24rpx;
  197. &-category {
  198. margin: 0 24rpx;
  199. width: 100%;
  200. height: 56rpx;
  201. line-height: 56rpx;
  202. .category-content {
  203. display: flex;
  204. .category-img {
  205. flex: 1;
  206. margin-top: 4rpx;
  207. }
  208. .category-text {
  209. flex: 10;
  210. height: 56rpx;
  211. font-size: 34rpx;
  212. font-family: PingFangSC-Medium, PingFang SC;
  213. font-weight: 500;
  214. color: #333333;
  215. line-height: 56rpx;
  216. }
  217. }
  218. }
  219. }
  220. .meteorological-content {
  221. padding-top: 25rpx;
  222. width: 100%;
  223. .scroll-Y {
  224. height: calc(
  225. 100vh - 88rpx - 205rpx - env(safe-area-inset-bottom) -
  226. var(--status-bar-height)
  227. );
  228. }
  229. .meteorological-listbody {
  230. width: 100%;
  231. .listbody-item {
  232. height: 246rpx;
  233. background: #ffffff;
  234. margin-bottom: 24rpx;
  235. .item-container {
  236. padding: 24rpx;
  237. .item-title {
  238. height: 66rpx;
  239. font-size: 30rpx;
  240. font-family: PingFangSC-Medium, PingFang SC;
  241. font-weight: 700;
  242. color: #333333;
  243. line-height: 42rpx;
  244. border-bottom: 2rpx solid #eeeeee;
  245. }
  246. .item-content {
  247. margin: 24rpx 0;
  248. font-size: 30rpx;
  249. font-family: PingFangSC-Regular, PingFang SC;
  250. font-weight: 400;
  251. color: #666666;
  252. line-height: 42rpx;
  253. overflow: hidden;
  254. text-overflow: ellipsis;
  255. display: -webkit-box;
  256. -webkit-box-orient: vertical;
  257. -webkit-line-clamp: 2;
  258. }
  259. .item-releasetime {
  260. height: 42rpx;
  261. font-size: 30rpx;
  262. font-family: PingFangSC-Regular, PingFang SC;
  263. font-weight: 400;
  264. color: #999999;
  265. line-height: 42rpx;
  266. }
  267. }
  268. }
  269. &-nodata {
  270. text-align: center;
  271. margin-top: 20rpx;
  272. &-text {
  273. font-size: 30rpx;
  274. color: #777777;
  275. }
  276. }
  277. }
  278. }
  279. }
  280. </style>