新增“气象服务”详情页面功能

agrcloud-api/meteorological.js

@@ -30,7 +30,7 @@ export function meteorologicalRollData(query) {
 // 气象专报分类
 export function meteorologicalCategoryListData() {
   return request({
-    url: '/system/dict/data/type/met_category',
+    url: '/system/dict/data/type2/met_category',
     method: 'GET'
   });
 }

agrcloud-config/index.config.js

@@ -2,16 +2,16 @@ const CONFIG = {
   // 开发环境配置
   development: {
     assetsPath: '/static', // 静态资源路径
-    baseUrl: '/dev-api', // 后台接口请求地址
+    baseUrl: '/h5-dev-api', // 后台接口请求地址
     hostUrl: '', // H5地址(前端运行地址)
     websocketUrl: '', // websocket服务端地址
     weixinAppId: '', // 微信公众号appid
-    amapKey: '7c2a2ee070cfafadcdc8243e6688d5d3' // 高德开放平台web服务key
+    amapKey: '' // 高德开放平台web服务key
   },
   // 生产环境配置
   production: {
     assetsPath: '/static', // 静态资源路径
-    baseUrl: '/prod-api', // 后台接口请求地址
+    baseUrl: '/h5-prod-api', // 后台接口请求地址
     hostUrl: '', // H5地址(前端运行地址)
     websocketUrl: '', // websocket服务端地址
     weixinAppId: '', // 微信公众号appid

agrcloud-store/getters.js

@@ -9,7 +9,8 @@ const getters = {
   expertsModalObj: state => state.expertsModal.itemData,
   expertsDetailsObj: state => state.expertsDetails.itemData,
   monitoringDetailsObj: state => state.monitoringDetails.itemData,
-  noticeDetailsObj: state => state.noticeDetails.itemData
+  noticeDetailsObj: state => state.noticeDetails.itemData,
+  meteorologicalDetailsObj: state => state.meteorologicalDetails.itemData
 };
 
 export default getters;

agrcloud-store/index.js

@@ -11,6 +11,7 @@ import expertsModal from './modules/expertsmodal';
 import expertsDetails from './modules/expertsdetails';
 import monitoringDetails from './modules/monitoringdetails';
 import noticeDetails from './modules/noticedetails';
+import meteorologicalDetails from './modules/meteorologicaldetails';
 import getters from './getters'
 
 Vue.use(Vuex);
@@ -22,7 +23,8 @@ const store = new Vuex.Store({
     expertsModal,
     expertsDetails,
     monitoringDetails,
-    noticeDetails
+    noticeDetails,
+    meteorologicalDetails
   },
   getters
 });

agrcloud-store/modules/meteorologicaldetails.js

@@ -0,0 +1,40 @@
+/**
+ * 封装历史投诉列表项数据缓存
+ * @author Rockery(1113269755@qq.com)
+ */
+
+const meteorologicalDetails = {
+  state: {
+    itemData: {}
+  },
+
+  mutations: {
+    SET_ITEMDATA: (state, itemData) => {
+      state.itemData = itemData;
+    },
+    CLEAR_ITEMDATA: (state, itemData) => {
+      state.itemData = itemData;
+    }
+  },
+
+  actions: {
+    SetMeteorologicalDetails({ commit }, itemData) {
+      return new Promise((resolve, reject) => {
+        if (itemData) {
+          commit('SET_ITEMDATA', itemData);
+          resolve();
+        } else {
+          reject('error');
+        }
+      });
+    },
+    ClearMeteorologicalDetails({ commit }) {
+      return new Promise(resolve => {
+        commit('CLEAR_ITEMDATA', {});
+        resolve()
+      });
+    }
+  }
+}
+
+export default meteorologicalDetails

manifest.json

@@ -89,18 +89,18 @@
     "sdkConfigs": {
       "maps": {
         "qqmap": {
-          "key": "PL4BZ-4ZGKP-FBSDT-VNYHW-IPVEV-HMFTA"
+          "key": ""
         }
       }
     },
     "devServer": {
       "proxy": {
-        "/dev-api": {
+        "/h5-dev-api": {
           "target": "http://172.16.90.32:9110",
           "changeOrigin": true,
           "secure": false,
           "pathRewrite": {
-            "^/dev-api": "/"
+            "^/h5-dev-api": "/"
           }
         }
       },

pages.json

@@ -28,6 +28,12 @@
         "navigationBarTitleText": "气象服务"
       }
     },
+    {
+      "path": "pages/meteorological/modal/details",
+      "style": {
+        "navigationBarTitleText": "气象服务"
+      }
+    },
     {
       "path": "pages/regulations/index",
       "style": {

pages/index/index.vue

@@ -182,7 +182,9 @@
       getMeteorologicalRollData() {
         meteorologicalRollData().then(res => {
           const rollDataList = res.data || [];
-          this.titleContentList = (rollDataList.length > 0) ? rollDataList : ['暂无数据！'];
+
+          let temprollDataList = (rollDataList.length > 0) ? rollDataList : ['暂无数据！'];
+          this.titleContentList =JSON.parse(JSON.stringify(temprollDataList).toString().replace(/<\/?.+?>/g,"").replace(/[\r\n]/g, ""));
         }).catch(err => {
           this.titleContentList = ['暂无数据！'];
         });
@@ -219,6 +221,7 @@
         }
 
         .title-text {
+          float: left;
           width: calc(100% - 36rpx);
         }
       }

pages/meteorological/index.vue

@@ -192,7 +192,7 @@ export default {
     handleMeteorologicalDetails(param) {
       this.$store.dispatch("SetMeteorologicalDetails", param).then(() => {
         uni.navigateTo({
-          url: '/pages/meteorological/details/index'
+          url: '/pages/meteorological/modal/details'
         });
       }).catch(() => {
         this.$msgbox('访问数据异常！', 'none');

pages/meteorological/modal/details.vue

@@ -0,0 +1,180 @@
+<template>
+  <view class="page-content meteorologicaldetails">
+    <view class="meteorologicaldetails-content">
+      <view class="meteorologicaldetails-item meteorologicaldetails-mettitle">
+        <view class="item-content">
+          <view class="item-text">
+            <view class="item-textlable">
+              <text class="item-lable">标题：</text>
+            </view>
+            <view class="item-textvalue">
+              <text class="item-value">{{ meteorologicalDetailsObj.metTitle }}</text>
+            </view>
+          </view>
+        </view>
+      </view>
+      <view class="meteorologicaldetails-item meteorologicaldetails-metauthor">
+        <view class="item-content">
+          <view class="item-text">
+            <view class="item-textlable">
+              <text class="item-lable">作者：</text>
+            </view>
+            <view class="item-textvalue">
+              <text class="item-value">{{ meteorologicalDetailsObj.metAuthor }}</text>
+            </view>
+          </view>
+        </view>
+      </view>
+      <view class="meteorologicaldetails-item meteorologicaldetails-metsummary">
+        <view class="item-content">
+          <view class="item-text">
+            <view class="item-textlable">
+              <text class="item-lable">简介：</text>
+            </view>
+            <view class="item-textvalue">
+              <text class="item-value">{{ meteorologicalDetailsObj.metSummary }}</text>
+            </view>
+          </view>
+        </view>
+      </view>
+      <view class="meteorologicaldetails-metcontent">
+        <view class="metcontent-text">
+          <view class="metcontent-textlable">
+            <text class="metcontent-lable">内容：</text>
+          </view>
+          <view class="metcontent-textvalue">
+            <view class="u-content">
+              <u-parse
+                :html="meteorologicalDetailsObj.metContent"
+                :selectable="false"
+                :show-with-animation="true"
+              ></u-parse>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { meteorologicalViewData } from '@/agrcloud-api/meteorological';
+
+export default {
+  name: 'meteorologicalDetails',
+  data() {
+    return {
+      meteorologicalDetailsObj: {
+        metTitle: '',
+        metAuthor: '',
+        metSummary: '',
+        metContent: ''
+      }
+    };
+  },
+  onLoad() {
+    this.initData();
+  },
+  methods: {
+    /** 初始化数据 */
+    initData() {
+      const currMeteorologicalDetailsItem = (this.$store.getters || {}).meteorologicalDetailsObj || {};
+      meteorologicalViewData({
+        id: currMeteorologicalDetailsItem.metId
+      }).then(res => {
+        this.meteorologicalDetailsObj = res.data || {};
+      }).catch(() => {
+        this.meteorologicalDetailsObj = {};
+      });
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.meteorologicaldetails {
+  padding: 0;
+
+  .meteorologicaldetails-content {
+    width: 100%;
+    padding-top: 24rpx;
+
+    .meteorologicaldetails-item {
+      height: 138rpx;
+      padding-left: 24rpx;
+      background-color: #ffffff;
+
+      .item-content {
+        height: 138rpx;
+        border-bottom: 1px solid #eeeeee;
+
+        .item-text {
+          padding: 24rpx 24rpx 24rpx 0;
+
+          .item-textlable {
+            height: 42rpx;
+            line-height: 42rpx;
+
+            .item-lable {
+              height: 42rpx;
+              font-size: 30rpx;
+              font-family: PingFangSC-Regular, PingFang SC;
+              font-weight: 400;
+              color: #666666;
+              line-height: 42rpx;
+            }
+          }
+
+          .item-textvalue {
+            height: 48rpx;
+            line-height: 48rpx;
+
+            .item-value {
+              height: 48rpx;
+              font-size: 34rpx;
+              font-family: PingFangSC-Regular, PingFang SC;
+              font-weight: 400;
+              color: #333333;
+              line-height: 48rpx;
+            }
+          }
+        }
+      }
+    }
+
+    .meteorologicaldetails-metcontent {
+      margin-top: 24rpx;
+      background-color: #ffffff;
+      min-height: 154rpx;
+
+      .metcontent-text {
+        padding: 24rpx;
+
+        .metcontent-textlable {
+          height: 42rpx;
+          line-height: 42rpx;
+
+          .metcontent-lable {
+            height: 42rpx;
+            font-size: 30rpx;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #666666;
+            line-height: 42rpx;
+          }
+        }
+
+        .metcontent-textvalue {
+          .metcontent-textarea {
+            min-height: 48rpx;
+            font-size: 34rpx;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #333333;
+          }
+        }
+      }
+    }
+  }
+}
+</style>