新增农业云H5首页功能

pages/index/index.vue

@@ -2,7 +2,8 @@
   <view>
     <uni-page-head class="cust-uni-page-head">
       <view class="cust-agrcloud-uni-page-head uni-page-head">
-        <view class="uni-page-head-hd cust-agrcloud-uni-page-head-hd">
+        <view class="uni-page-head-hd cust-agrcloud-uni-page-head-hd"
+          @click="handleRedirectMainPageClick">
           <view class="uni-page-head-btn">
             <image class="uni-btn-icon cust-head-icon"
               src="@/static/agrcloud-images/agrcloud-head-dir-img.png"></image>
@@ -13,149 +14,521 @@
             style="font-size: 16px; opacity: 1;">修文农业云公共服务系统
           </view>
         </view>
+        <view class="uni-page-head-hd cust-agrcloud-uni-page-head-hd">
+          <view class="uni-page-head-btn">
+            <image class="uni-btn-icon cust-head-notice-icon"
+              src="@/static/agrcloud-images/agrcloud-head-notice-icon.png"></image>
+          </view>
+        </view>
       </view>
     </uni-page-head>
 
     <view class="page-content">
-      <view class="title">
-        <image class="weather-densefog"
-          src="@/static/agrcloud-images/agrcloud-weather-densefog-img.png"></image>
-        <u-notice-bar class="title-content"
-          mode="horizontal"
-          type="none"
-          :volume-icon="true"
-          :more-icon="true"
-          :is-circular="true"
-          :list="titleContentList"></u-notice-bar>
+      <view class="page-content-title">
+        <view class="content-title">
+          <image class="weather-densefog"
+            src="@/static/agrcloud-images/agrcloud-weather-densefog-img.png"></image>
+          <u-notice-bar class="title-text"
+            mode="horizontal"
+            type="none"
+            :volume-icon="true"
+            :more-icon="true"
+            :is-circular="true"
+            :list="titleContentList"></u-notice-bar>
+        </view>
       </view>
       <view class="main-content">
-        <u-waterfall v-model="flowList">
-          <template v-slot:left="{leftList}">
-            <view class="main-warter"
-              v-for="item in leftList"
-              :key="item.id"
-              @click="handleWarterClick(item)">
-              <view class="water-title">
-                {{item.title}}
+        <!-- 质量安全投诉 -->
+        <view class="main-content-complaints">
+          <view class="complaints-container"
+            @click="handleWarterClick('complaints')">
+            <image class="complaints-container-icon"
+              src="@/static/agrcloud-images/agrcloud-main-page-complaints-icon.png">
+            </image>
+            <view class="complaints-container-title">
+              <text class="complaints-container-title-text">质量安全投诉</text>
+            </view>
+            <view class="complaints-container-subtitle">
+              <text class="complaints-container-subtitle-text">Complaints</text>
+            </view>
+          </view>
+        </view>
+        <!-- 气象服务 农技专家 政策法规 通知公告 -->
+        <view class="main-content-metexpregnotice">
+          <view class="complaints-metexpregnotice">
+            <view class="metexpregnotice-meteregula">
+              <!-- 气象服务 -->
+              <view class="meteregula-meteorological">
+                <view class="meteorological-container"
+                  @click="handleWarterClick('meteorological')">
+                  <image class="meteorological-container-icon"
+                    src="@/static/agrcloud-images/agrcloud-main-page-meteorological-icon.png">
+                  </image>
+                  <view class="meteorological-container-title">
+                    <text class="meteorological-container-title-text">气象服务</text>
+                  </view>
+                  <view class="meteorological-container-subtitle">
+                    <text class="meteorological-container-subtitle-text">Meteorological</text>
+                  </view>
+                </view>
+              </view>
+              <!-- 政策法规 -->
+              <view class="meteregula-regulations">
+                <view class="regulations-container"
+                  @click="handleWarterClick('regulations')">
+                  <image class="regulations-container-icon"
+                    src="@/static/agrcloud-images/agrcloud-main-page-regulations-icon.png">
+                  </image>
+                  <view class="regulations-container-title">
+                    <text class="regulations-container-title-text">政策法规</text>
+                  </view>
+                  <view class="regulations-container-subtitle">
+                    <text class="regulations-container-subtitle-text">Regulations</text>
+                  </view>
+                </view>
               </view>
             </view>
-          </template>
-          <template v-slot:right="{rightList}">
-            <view class="main-warter"
-              v-for="item in rightList"
-              :key="item.id"
-              @click="handleWarterClick(item)">
-              <view class="water-title">
-                {{item.title}}
+            <!-- 农技专家 -->
+            <view class="metexpregnotice-expertsnotice">
+              <view class="expertsnotice-experts">
+                <view class="experts-container"
+                  @click="handleWarterClick('experts')">
+                  <image class="experts-container-icon"
+                    src="@/static/agrcloud-images/agrcloud-main-page-experts-icon.png">
+                  </image>
+                  <view class="experts-container-title">
+                    <text class="experts-container-title-text">农技专家</text>
+                  </view>
+                  <view class="experts-container-subtitle">
+                    <text class="experts-container-subtitle-text">Experts</text>
+                  </view>
+                </view>
+              </view>
+              <!-- 通知公告 -->
+              <view class="expertsnotice-notice">
+                <view class="notice-container"
+                  @click="handleWarterClick('notice')">
+                  <image class="notice-container-icon"
+                    src="@/static/agrcloud-images/agrcloud-main-page-notice-icon.png">
+                  </image>
+                  <view class="notice-container-title">
+                    <text class="notice-container-title-text">通知公告</text>
+                  </view>
+                  <view class="notice-container-subtitle">
+                    <text class="notice-container-subtitle-text">Notice</text>
+                  </view>
+                </view>
               </view>
             </view>
-          </template>
-        </u-waterfall>
+          </view>
+        </view>
+        <view style="clear: both;"></view>
+        <!-- 监测信息 -->
+        <view class="main-content-monitoring">
+          <view class="content-monitoring">
+            <view class="monitoring-container"
+              @click="handleWarterClick('monitoring')">
+              <image class="monitoring-container-icon"
+                src="@/static/agrcloud-images/agrcloud-main-page-monitoring-icon.png">
+              </image>
+              <view class="monitoring-container-title">
+                <text class="monitoring-container-title-text">监测信息</text>
+              </view>
+              <view class="monitoring-container-subtitle">
+                <text class="monitoring-container-subtitle-text">Monitoring</text>
+              </view>
+            </view>
+          </view>
+        </view>
       </view>
     </view>
   </view>
 </template>
 
 <script>
+  import mapinfo from '@/agrcloud-utils/mapinfo';
+
   export default {
     data() {
       return {
-        title: 'Hello',
-        titleContentList: ['气象预警：修文县气象台2020年x月x日x时x分发布大雾'],
+        titleContentList: ['气象预警：修文县气象台2021年1月20日10时30分发布晴朗天气'],
         mainNavigateToObj: {
-          QualitySafetyComplaints: '/pages/complaints/index',
-          MeteorologicalServices: '/pages/meteorological/index',
-          PoliciesRegulations: '/pages/regulations/index',
-          AgriculturalTechnologyExpert: '/pages/experts/index',
-          NoticeAnnouncement: '/pages/notice/index',
-          MonitoringInformation: '/pages/monitoring/index'
-        },
-        flowList: [{
-          id: 'QualitySafetyComplaints',
-          title: '质量安全投诉',
-          image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23327_s.jpg',
-        }, {
-          id: 'MeteorologicalServices',
-          title: '气象服务',
-          image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23327_s.jpg',
-        }, {
-          id: 'AgriculturalTechnologyExpert',
-          title: '农技专家',
-          image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23327_s.jpg',
-        }, {
-          id: 'PoliciesRegulations',
-          title: '政策法规',
-          image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23327_s.jpg',
-        }, {
-          id: 'NoticeAnnouncement',
-          title: '通知公告',
-          image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23327_s.jpg',
-        }, {
-          id: 'MonitoringInformation',
-          title: '监测信息',
-          image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23327_s.jpg',
-        }]
+          complaints: '/pages/complaints/index',
+          // meteorological: '/pages/meteorological/index',
+          regulations: '/pages/regulations/index',
+          experts: '/pages/experts/index',
+          notice: '/pages/notice/index',
+          monitoring: '/pages/monitoring/index'
+        }
       };
     },
     onLoad() {
-      this.indexInit();
+      // #ifdef H5
+      mapinfo().then((res) => {
+        console.log(res)
+        const currTitleContent = '当前气象信息: ';
+        const currProvince = ((res.regeocode || {}).addressComponent || {}).province;
+        const currCity = ((res.regeocode || {}).addressComponent || {}).city;
+        const currDistrict = ((res.regeocode || {}).addressComponent || {}).district;
+        const currDate = new Date();
+        const currFormatDate = currDate.getFullYear() + '年' + (currDate.getMonth() + 1) + '月' + currDate.getDate() +
+          '日' + currDate.getHours() + '时' + currDate.getMinutes() + '分' + currDate.getSeconds() + '秒';
+        const currWeather = (res.weatherInfo || {}).weather;
+        const currTemperature = (res.weatherInfo || {}).temperature;
+        const currWinddirection = (res.weatherInfo || {}).winddirection;
+        const currWindpower = (res.weatherInfo || {}).windpower;
+        const currHumidity = (res.weatherInfo || {}).humidity;
+        this.titleContentList = [
+          currTitleContent + currProvince + currCity + currDistrict + currFormatDate + currWeather +
+          currTemperature + '℃' + currWinddirection + '风' + currWindpower + '级空气湿度' + currHumidity
+        ];
+      });
+      // #endif
     },
     methods: {
-      async indexInit() {},
       handleWarterClick(itemData) {
-        if (!itemData.id || !this.mainNavigateToObj[itemData.id]) {
+        if (!itemData || !this.mainNavigateToObj[itemData]) {
           this.$msgbox('模块建设中...');
           return;
         }
         uni.navigateTo({
-          url: this.mainNavigateToObj[itemData.id]
+          url: this.mainNavigateToObj[itemData]
         });
       }
     }
   };
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss"
+  scoped>
   .page-content {
-    .title {
+    padding: 0;
+
+    &-title {
       width: 100%;
+      background-color: #ffffff;
 
-      .title-logo {
-        padding-top: 9rpx;
-        height: 52rpx;
-        width: 30rpx;
-        float: left;
-      }
+      .content-title {
+        margin: 0 47rpx 0 54rpx;
 
-      .weather-densefog {
-        padding-top: 6rpx;
-        float: left;
-        width: 36rpx;
-        height: 36rpx;
-      }
+        .title-logo {
+          padding-top: 9rpx;
+          height: 52rpx;
+          width: 30rpx;
+          float: left;
+        }
+
+        .weather-densefog {
+          padding-top: 16rpx;
+          float: left;
+          width: 36rpx;
+          height: 36rpx;
+        }
 
-      .title-content {
-        width: calc(100% - 36rpx);
+        .title-text {
+          width: calc(100% - 36rpx);
+        }
       }
     }
 
     .main-content {
-      padding-top: 20rpx;
+      padding: 36rpx 24rpx;
       width: 100%;
 
-      .main-warter {
-        width: 100%;
-
-        .water-title {
-          margin: 20rpx;
-          height: 300rpx;
-          border-radius: 20rpx;
-          border: 1rpx solid #c6c6c6;
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          justify-content: center;
-          cursor: pointer;
+      .main-content-complaints {
+        width: 702rpx;
+        height: 240rpx;
+        background-image: url("../../static/agrcloud-images/agrcloud-main-page-complaints-bg.png");
+        background-size: cover;
+        background-color: transparent;
+        background-position: center;
+
+        .complaints-container {
+          padding-top: 26rpx;
+          padding-left: 40rpx;
+
+          &-icon {
+            width: 84rpx;
+            height: 84rpx;
+          }
+
+          .complaints-container-title {
+            margin-top: 4rpx;
+
+            &-text {
+              height: 67rpx;
+              font-size: 48rpx;
+              font-family: PingFangSC-Medium, PingFang SC;
+              font-weight: 500;
+              color: #FFFFFF;
+              line-height: 67rpx;
+              letter-spacing: 4rpx;
+            }
+          }
+
+          .complaints-container-subtitle {
+            &-text {
+              text-transform: uppercase;
+              height: 33rpx;
+              font-size: 24rpx;
+              font-family: PingFangSC-Medium, PingFang SC;
+              font-weight: 500;
+              color: #FFFFFF;
+              line-height: 33rpx;
+              letter-spacing: 2rpx;
+            }
+          }
+        }
+      }
+
+      .main-content-metexpregnotice {
+        padding-top: 24rpx;
+
+        .complaints-metexpregnotice {
+          .metexpregnotice-meteregula {
+            float: left;
+
+            .meteregula-meteorological {
+              width: 338rpx;
+              height: 260rpx;
+              background-image: url("../../static/agrcloud-images/agrcloud-main-page-meteorological-bg.png");
+              background-size: cover;
+              background-color: transparent;
+              background-position: center;
+
+              .meteorological-container {
+                padding-top: 32rpx;
+                padding-left: 40rpx;
+
+                &-icon {
+                  width: 84rpx;
+                  height: 84rpx;
+                }
+
+                .meteorological-container-title {
+                  margin-top: 18rpx;
+
+                  &-text {
+                    height: 67rpx;
+                    font-size: 48rpx;
+                    font-family: PingFangSC-Medium, PingFang SC;
+                    font-weight: 500;
+                    color: #FFFFFF;
+                    line-height: 67rpx;
+                    letter-spacing: 4rpx;
+                  }
+                }
+
+                .meteorological-container-subtitle {
+                  &-text {
+                    text-transform: uppercase;
+                    height: 33rpx;
+                    font-size: 24rpx;
+                    font-family: PingFangSC-Medium, PingFang SC;
+                    font-weight: 500;
+                    color: #FFFFFF;
+                    line-height: 33rpx;
+                    letter-spacing: 2rpx;
+                  }
+                }
+              }
+            }
+
+            .meteregula-regulations {
+              margin-top: 25rpx;
+              width: 338rpx;
+              height: 380rpx;
+              background-image: url("../../static/agrcloud-images/agrcloud-main-page-regulations-bp.png");
+              background-size: cover;
+              background-color: transparent;
+              background-position: center;
+
+              .regulations-container {
+                padding-top: 71rpx;
+                padding-left: 40rpx;
+
+                &-icon {
+                  width: 84rpx;
+                  height: 84rpx;
+                }
+
+                .regulations-container-title {
+                  margin-top: 65rpx;
+
+                  &-text {
+                    height: 67rpx;
+                    font-size: 48rpx;
+                    font-family: PingFangSC-Medium, PingFang SC;
+                    font-weight: 500;
+                    color: #FFFFFF;
+                    line-height: 67rpx;
+                    letter-spacing: 4rpx;
+                  }
+                }
+
+                .regulations-container-subtitle {
+                  &-text {
+                    text-transform: uppercase;
+                    height: 33rpx;
+                    font-size: 24rpx;
+                    font-family: PingFangSC-Medium, PingFang SC;
+                    font-weight: 500;
+                    color: #FFFFFF;
+                    line-height: 33rpx;
+                    letter-spacing: 2rpx;
+                  }
+                }
+              }
+            }
+          }
+
+          .metexpregnotice-expertsnotice {
+            float: left;
+            margin-left: 25rpx;
+
+            .expertsnotice-experts {
+              width: 338rpx;
+              height: 380rpx;
+              background-image: url("../../static/agrcloud-images/agrcloud-main-page-experts-bg.png");
+              background-size: cover;
+              background-color: transparent;
+              background-position: center;
+
+              .experts-container {
+                padding-top: 78rpx;
+                padding-left: 40rpx;
+
+                &-icon {
+                  width: 84rpx;
+                  height: 84rpx;
+                }
+
+                .experts-container-title {
+                  margin-top: 58rpx;
+
+                  &-text {
+                    height: 67rpx;
+                    font-size: 48rpx;
+                    font-family: PingFangSC-Medium, PingFang SC;
+                    font-weight: 500;
+                    color: #FFFFFF;
+                    line-height: 67rpx;
+                    letter-spacing: 4rpx;
+                  }
+                }
+
+                .experts-container-subtitle {
+                  &-text {
+                    text-transform: uppercase;
+                    height: 33rpx;
+                    font-size: 24rpx;
+                    font-family: PingFangSC-Medium, PingFang SC;
+                    font-weight: 500;
+                    color: #FFFFFF;
+                    line-height: 33rpx;
+                    letter-spacing: 2rpx;
+                  }
+                }
+              }
+            }
+
+            .expertsnotice-notice {
+              margin-top: 25rpx;
+              width: 338rpx;
+              height: 260rpx;
+              background-image: url("../../static/agrcloud-images/agrcloud-main-page-notice-bp.png");
+              background-size: cover;
+              background-color: transparent;
+              background-position: center;
+
+              .notice-container {
+                padding-top: 32rpx;
+                padding-left: 40rpx;
+
+                &-icon {
+                  width: 84rpx;
+                  height: 84rpx;
+                }
+
+                .notice-container-title {
+                  margin-top: 18rpx;
+
+                  &-text {
+                    height: 67rpx;
+                    font-size: 48rpx;
+                    font-family: PingFangSC-Medium, PingFang SC;
+                    font-weight: 500;
+                    color: #FFFFFF;
+                    line-height: 67rpx;
+                    letter-spacing: 4rpx;
+                  }
+                }
+
+                .notice-container-subtitle {
+                  &-text {
+                    text-transform: uppercase;
+                    height: 33rpx;
+                    font-size: 24rpx;
+                    font-family: PingFangSC-Medium, PingFang SC;
+                    font-weight: 500;
+                    color: #FFFFFF;
+                    line-height: 33rpx;
+                    letter-spacing: 2rpx;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .main-content-monitoring {
+        padding-top: 24rpx;
+
+        .content-monitoring {
+          width: 702rpx;
+          height: 240rpx;
+          background-image: url("../../static/agrcloud-images/agrcloud-main-page-monitoring-bp.png");
+          background-size: cover;
+          background-color: transparent;
+          background-position: center;
+
+          .monitoring-container {
+            padding-top: 26rpx;
+            padding-left: 40rpx;
+
+            &-icon {
+              width: 84rpx;
+              height: 84rpx;
+            }
+
+            .monitoring-container-title {
+              margin-top: 4rpx;
+
+              &-text {
+                height: 67rpx;
+                font-size: 48rpx;
+                font-family: PingFangSC-Medium, PingFang SC;
+                font-weight: 500;
+                color: #FFFFFF;
+                line-height: 67rpx;
+                letter-spacing: 4rpx;
+              }
+            }
+
+            .monitoring-container-subtitle {
+              &-text {
+                text-transform: uppercase;
+                height: 33rpx;
+                font-size: 24rpx;
+                font-family: PingFangSC-Medium, PingFang SC;
+                font-weight: 500;
+                color: #FFFFFF;
+                line-height: 33rpx;
+                letter-spacing: 2rpx;
+              }
+            }
+          }
         }
       }
     }