|
|
@@ -1,33 +1,311 @@
|
|
|
<template>
|
|
|
<view class="meteorological">
|
|
|
- <view class="page-content meteorological-content">
|
|
|
- <view class="page-header meteorological-header">气象服务</view>
|
|
|
- <view class="main-content meteorological-main"></view>
|
|
|
+ <view class="meteorological-header">
|
|
|
+ <view class="meteorological-header-category">
|
|
|
+ <picker
|
|
|
+ @change="bindPickerChange"
|
|
|
+ :value="meteorologicalIndex"
|
|
|
+ :range="meteorologicalPickerList"
|
|
|
+ >
|
|
|
+ <view class="category-content">
|
|
|
+ <view class="category-img">
|
|
|
+ <u-icon name="list" size="54" class="category-icon"></u-icon>
|
|
|
+ </view>
|
|
|
+ <view class="category-text">{{ meteorologicalPickerList[meteorologicalIndex] }}</view>
|
|
|
+ </view>
|
|
|
+ </picker>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="meteorological-content">
|
|
|
+ <scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="handleScrolltolower">
|
|
|
+ <view class="meteorological-listbody">
|
|
|
+ <!-- 列表无数据 -->
|
|
|
+ <template v-if="list_empty">
|
|
|
+ <view class="meteorological-listbody-nodata">
|
|
|
+ <text class="meteorological-listbody-nodata-text">暂无数据</text>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 列表有数据 -->
|
|
|
+ <template v-else>
|
|
|
+ <view
|
|
|
+ class="listbody-item"
|
|
|
+ v-for="meteorologicalItem in meteorologicalList"
|
|
|
+ :key="meteorologicalItem.id"
|
|
|
+ @click="handleMeteorologicalDetails(meteorologicalItem)"
|
|
|
+ >
|
|
|
+ <view class="item-container">
|
|
|
+ <!-- 标题 -->
|
|
|
+ <view
|
|
|
+ class="item-title"
|
|
|
+ >{{ meteorologicalItem.metTitle }}（{{ meteorologicalItem.metCategoryName }}）</view>
|
|
|
+
|
|
|
+ <!-- 简介 -->
|
|
|
+ <view class="item-content">{{ meteorologicalItem.metSummary }}</view>
|
|
|
+
|
|
|
+ <!-- 发布时间 -->
|
|
|
+ <view class="item-releasetime">发布时间：{{ meteorologicalItem.metInTime }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 加载更多组件 -->
|
|
|
+ <uni-load-more :status="loadStatus" v-if="!list_empty"></uni-load-more>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { meteorologicalListData } from '@/agrcloud-api/meteorological';
|
|
|
+import {
|
|
|
+ meteorologicalListData,
|
|
|
+ meteorologicalCategoryListData
|
|
|
+} from '@/agrcloud-api/meteorological';
|
|
|
+import uniLoadMore from "@/agrcloud-components/uni-load-more/uni-load-more.vue"
|
|
|
|
|
|
export default {
|
|
|
+ name: 'meteorological',
|
|
|
+ components: {
|
|
|
+ uniLoadMore
|
|
|
+ },
|
|
|
data() {
|
|
|
return {
|
|
|
+ meteorologicalIndex: 0,
|
|
|
+ respCategoryList: [],
|
|
|
+ meteorologicalPickerList: ["全部"],
|
|
|
+ currMeteorologicalValue: '',
|
|
|
+ loadStatus: 'more',
|
|
|
+ list_empty: false,
|
|
|
+ pageTotal: 0,
|
|
|
+ pageCount: 0,
|
|
|
+ pagination: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10
|
|
|
+ },
|
|
|
+ meteorologicalList: []
|
|
|
};
|
|
|
},
|
|
|
onLoad() {
|
|
|
+ this.initData();
|
|
|
},
|
|
|
methods: {
|
|
|
+ /** 初始化数据 */
|
|
|
+ initData() {
|
|
|
+ this.getCategoryListData();
|
|
|
+ },
|
|
|
+ getCategoryListData() {
|
|
|
+ meteorologicalCategoryListData().then((res) => {
|
|
|
+ this.respCategoryList = res.data || [];
|
|
|
+ let tempCategoryList = [];
|
|
|
+ for (let categoryIndex = 0; categoryIndex < this.respCategoryList.length; categoryIndex++) {
|
|
|
+ tempCategoryList.push(this.respCategoryList[categoryIndex].dictLabel);
|
|
|
+ }
|
|
|
+ this.meteorologicalPickerList = [...this.meteorologicalPickerList, ...tempCategoryList];
|
|
|
+ this.getMeteorologicalListData();
|
|
|
+ }).catch(err => {
|
|
|
+ this.loadStatus = 'noMores';
|
|
|
+ });
|
|
|
+ },
|
|
|
+ bindPickerChange: function (e) {
|
|
|
+ this.meteorologicalIndex = e.target.value;
|
|
|
+
|
|
|
+ const currPickerChangeCategory = this.meteorologicalPickerList[e.target.value];
|
|
|
+ if (currPickerChangeCategory != '全部') {
|
|
|
+ for (let categoryIndex = 0; categoryIndex < this.respCategoryList.length; categoryIndex++) {
|
|
|
+ if (currPickerChangeCategory == this.respCategoryList[categoryIndex].dictLabel) {
|
|
|
+ this.currMeteorologicalValue = this.respCategoryList[categoryIndex].dictValue;
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.currMeteorologicalValue = '';
|
|
|
+ }
|
|
|
+
|
|
|
+ this.pagination.pageNum = 1;
|
|
|
+ this.getMeteorologicalListData();
|
|
|
+ },
|
|
|
+ /** 获取通知公告之列表数据 */
|
|
|
+ getMeteorologicalListData() {
|
|
|
+ this.list_empty = false;
|
|
|
+ this.loadStatus = 'loading';
|
|
|
+
|
|
|
+ meteorologicalListData({ ...this.pagination, metCategoryId: this.currMeteorologicalValue }).then(res => {
|
|
|
+ // 数据总条数
|
|
|
+ this.pageTotal = res.total || 0;
|
|
|
+
|
|
|
+ // 如果列表为第一页，返回列表数据清空
|
|
|
+ if (this.pagination.pageNum == 1) {
|
|
|
+ this.meteorologicalList = [];
|
|
|
+ };
|
|
|
+
|
|
|
+ // 处理返回结果
|
|
|
+ if ((res.rows || []).length <= 0) { // 返回结果没有数据
|
|
|
+ if ((this.meteorologicalList || []).length <= 0) {
|
|
|
+ this.loadStatus = 'noMores';
|
|
|
+ this.list_empty = true;
|
|
|
+ } else {
|
|
|
+ this.loadStatus = 'noMores';
|
|
|
+ }
|
|
|
+ } else { //返回结果有数据
|
|
|
+ this.list_empty = false;
|
|
|
+
|
|
|
+ // 获取列表数据分页数量
|
|
|
+ this.pageCount = Math.ceil((res.total || 0) / this.pagination.pageSize);
|
|
|
+ if ((res.total || 0) % this.pagination.pageSize == 0) {
|
|
|
+ this.pageCount = Math.ceil((res.total || 0) / this.pagination.pageSize);
|
|
|
+ if (this.pageCount == 1) {
|
|
|
+ this.pageCount--;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.pageCount--;
|
|
|
+ };
|
|
|
+
|
|
|
+ // 处理页面状态
|
|
|
+ if (this.pageCount === 0) {
|
|
|
+ this.loadStatus = 'noMores'
|
|
|
+ } else {
|
|
|
+ this.loadStatus = 'more'
|
|
|
+ }
|
|
|
+
|
|
|
+ // 组装返回数据
|
|
|
+ this.meteorologicalList.push.apply(this.meteorologicalList, res.rows || []);
|
|
|
+
|
|
|
+ uni.stopPullDownRefresh();
|
|
|
+ }
|
|
|
+
|
|
|
+ }).catch(err => {
|
|
|
+ this.loadStatus = 'noMores';
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleScrolltolower() {
|
|
|
+ this.loadStatus = 'loading';
|
|
|
+ if (this.pagination.pageNum - 1 >= this.pageCount) {
|
|
|
+ this.loadStatus = 'noMores';
|
|
|
+ return;
|
|
|
+ } else {
|
|
|
+ this.pagination.pageNum++;
|
|
|
+ this.getMeteorologicalListData();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /** 通知公告之详情数据操作 */
|
|
|
+ handleMeteorologicalDetails(param) {
|
|
|
+ this.$store.dispatch("SetMeteorologicalDetails", param).then(() => {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/meteorological/details/index'
|
|
|
+ });
|
|
|
+ }).catch(() => {
|
|
|
+ this.$msgbox('访问数据异常！', 'none');
|
|
|
+ });
|
|
|
+ }
|
|
|
}
|
|
|
-};
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.meteorological {
|
|
|
+ padding: 0;
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ &-header {
|
|
|
+ width: 100%;
|
|
|
+ background: #ffffff;
|
|
|
+ height: 104rpx;
|
|
|
+ padding-top: 24rpx;
|
|
|
+
|
|
|
+ &-category {
|
|
|
+ margin: 0 24rpx;
|
|
|
+ width: 100%;
|
|
|
+ height: 56rpx;
|
|
|
+ line-height: 56rpx;
|
|
|
+
|
|
|
+ .category-content {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .category-img {
|
|
|
+ flex: 1;
|
|
|
+ margin-top: 4rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .category-text {
|
|
|
+ flex: 10;
|
|
|
+ height: 56rpx;
|
|
|
+ font-size: 34rpx;
|
|
|
+ font-family: PingFangSC-Medium, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 56rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
.meteorological-content {
|
|
|
- .meteorological-header {
|
|
|
+ padding-top: 25rpx;
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .scroll-Y {
|
|
|
+ height: calc(
|
|
|
+ 100vh - 88rpx - 205rpx - env(safe-area-inset-bottom) -
|
|
|
+ var(--status-bar-height)
|
|
|
+ );
|
|
|
}
|
|
|
- .meteorological-main {
|
|
|
+
|
|
|
+ .meteorological-listbody {
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .listbody-item {
|
|
|
+ height: 246rpx;
|
|
|
+ background: #ffffff;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+
|
|
|
+ .item-container {
|
|
|
+ padding: 24rpx;
|
|
|
+
|
|
|
+ .item-title {
|
|
|
+ height: 66rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-family: PingFangSC-Medium, PingFang SC;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 42rpx;
|
|
|
+ border-bottom: 2rpx solid #eeeeee;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-content {
|
|
|
+ margin: 24rpx 0;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #666666;
|
|
|
+ line-height: 42rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-releasetime {
|
|
|
+ height: 42rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 42rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &-nodata {
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 20rpx;
|
|
|
+
|
|
|
+ &-text {
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #777777;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
张启