yicangzongtai_app_240321/pages/home/showSolicitude.vue

<template>
  <view class="">
   <!-- <view class="showSolicitude-top">
      <view class="status-bar" :style="{'height': statusBarHeight + 'px'}" />
      <view class="top-advertising">
        <text class="btns" @click.stop="home.init(1)">常规版</text>
      </view>
    </view> -->
    <view class="page-content">
      <view class="common-service">
        <view class="common-service-title">
          常用服务
        </view>
        <view class="common-service-box">
          <block v-for="item in kongLimList" :key="item.id">
            <view class="common-service-item" @click.stop="openKongKim(item)">
              <image :src="$getImgPath(item.icon)" mode="aspectFit"></image>
              <text>{{item.name}}</text>
            </view>
          </block>
        </view>
      </view>
      <!-- 救助服务 -->
      <view class="service-type salvation-service" v-if="helpService">
        <view class="service-title">
          {{ helpService.themeVo.themeName }}
        </view>
        <view class="service-info">
          <block v-for="item in helpService.themeModuleVoList">
            <view class="service-item" @click.stop="openKongKim(item)">
              <image class="service-img" :src="$getImgPath(item.moduleImage)" mode="aspectFit"></image>
            </view>
          </block>
        </view>
      </view>

      <!-- 社会服务 -->
      <view class="service-type society-service" v-if="societyService">
        <view class="service-title">
          {{ societyService.themeVo.themeName }}
        </view>
        <view class="service-info">
          <block v-for="item in societyService.themeModuleVoList">
            <view class="service-item" @click.stop="openKongKim(item)">
              <image class="service-img" :src="$getImgPath(item.moduleImage)" mode="aspectFit"></image>
            </view>
          </block>
        </view>
      </view>

      <!-- 健康服务 -->
      <view class="service-type fitness-service" v-if="healthService">
        <view class="service-title">
          {{ healthService.themeVo.themeName }}
        </view>
        <view class="service-info">
          <block v-for="item in healthService.themeModuleVoList">
            <view class="service-item" @click.stop="openKongKim(item)">
              <image class="service-img" :src="$getImgPath(item.moduleImage)" mode="aspectFit"></image>
            </view>
          </block>
        </view>
      </view>

    </view>
  </view>
</template>

<script>
  import {
    getAPPList,
    getThemeModule
  } from "@/api/government.js"
  import Mixin from "./module/Mixin.js";
  export default {
    mixins: [Mixin],
    inject: ["home"],
    data() {
      return {
        kongLimList: [],
        helpService: null,
        societyService: null,
        healthService: null,
      }
    },
    mounted() {
      this.getKongKim()
      this.initPage()
    },
    methods: {
      getKongKim() {
        getAPPList(this.$keys.GH_KONGKIM).then(res => {
          this.kongLimList = res.data || []
        })
      },
      openKongKim(item) {
        this.$openPage(item)
      },
      initPage() {
        // 获取 聚合
        // GA_JZ_SERVICE: "gams_001", // 救助服务
        // GA_SH_SERVICE: "gams_002", // 社会服务
        // GA_JK_SERVICE: "gams_003", // 健康服务
        const keys = [this.$keys.GA_JZ_SERVICE, this.$keys.GA_SH_SERVICE, this.$keys.GA_JK_SERVICE]

        keys.forEach(el => {
          getThemeModule(el).then(res => {
            const {
              themeVo,
              themeModuleVoList
            } = res.data || {};
            if (!themeVo || !themeModuleVoList || !themeModuleVoList.length === 0) {
              throw new Error()
            } else {
              this.setService(res.data, el, keys)
            }
          }).catch(err => {
            this.setService(null, el, keys)
          })

        })
      },

      setService(data, key, keys) {
        switch (key) {
          case keys[0]:
            // 救助服务
            this.helpService = data || null
            break;
          case keys[1]:
            // 社会服务
            this.societyService = data || null
            break;
          case keys[2]:
            // 健康服务
            this.healthService = data || null
            break;

        }

      },
    }
  }
</script>

<style lang="scss" scoped>
  .showSolicitude-top {
    background-color: skyblue;

    .top-advertising {
      width: 100%;
      height: 300rpx;
    }
  }

  .page-content {
    position: relative;
    padding: $zw-padding;
    margin-top: -140rpx;

    .common-service {
      width: 100%;
      background: #ffffff;
      border-radius: 16rpx;

      .common-service-title {
        font-size: 54rpx;
        font-weight: bold;
        padding: 30rpx 30rpx 27rpx;
        border-bottom: 1rpx solid #e6e6e6;
      }

      .common-service-box {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: space-between;
        padding: 62rpx 0;

        .common-service-item {
          width: 50%;
          text-align: center;
          padding: 20rpx;

          image {
            display: block;
            margin: 0 auto 35rpx;
            width: 160rpx;
            height: 160rpx;
          }

          text {
            color: #1A1A1A;
            font-size: 44rpx;
            font-weight: bold;
            line-height: 2;
          }
        }

      }


    }

    .service-type {
      margin-top: $zw-gap;
      width: 100%;
      // border-width: 6rpx;
      // border-style: solid;
      border-radius: 16rpx;
      background-color: #fff;

      .service-title {
        color: #1A1A1A;
        width: 100%;
        font-size: 54rpx;
        font-weight: bold;
        padding: 30rpx 30rpx 27rpx;
        border-bottom: 1rpx solid #e6e6e6;
        ;
      }

      .service-info {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: stretch;
        padding: 30rpx;

        .service-item {

          .service-img {
            width: 296rpx;
            height: 166rpx;
            vertical-align: middle;
          }

          // .service-text {
          //   overflow: hidden;
          //   text-overflow: ellipsis;
          //   white-space: nowrap;
          //   padding-right: 30rpx;
          //   font-size: 38rpx;
          // }

          // .service-btn {
          //   flex-shrink: 0;
          //   width: 110rpx;
          //   height: 50rpx;
          //   font-size: 32rpx;
          //   text-align: center;
          //   border-radius: 30rpx;
          //   color: #fff;
          // }
        }
      }
    }

    // .salvation-service {
    //   border-color: greenyellow;

    //   .service-title {
    //     background-color: greenyellow;
    //   }

    //   .service-btn {
    //     background-color: greenyellow;

    //   }
    // }

    // .society-service {
    //   border-color: skyblue;

    //   .service-title {
    //     background-color: skyblue;
    //   }

    //   .service-btn {
    //     background-color: skyblue;

    //   }
    // }

    // .fitness-service {
    //   border-color: rebeccapurple;

    //   .service-title {
    //     background-color: rebeccapurple;
    //   }

    //   .service-btn {
    //     background-color: rebeccapurple;

    //   }

    // }

  }


  .btns {
    display: inline-block;
    width: 150rpx;
    height: 150rpx;
    text-align: center;
    line-height: 150rpx;
    border-radius: 50%;
    background-color: #edc68d;
    font-size: 30rpx;
    font-weight: bold;
  }
</style>