ebiz-h5/src/views/YB_APP/service.vue

<template>
  <div class="public_container" style="position: relative;">
    <p class="messageIcon_con" @click="messageJump">
      <img class="messageIcon_con_img" v-if="!messages" src="@/assets/YB_APP/images/3.png">
      <img class="messageIcon_con_img" v-if="messages" src="@/assets/YB_APP/images/4.png">
    </p>
    
    <div class="head">
      <span>服务</span>
    </div>
    
    <div class="menu1">
      <p class="menu1_p">
        <img class="menu1_p_img" src="@/assets/YB_APP/images/15.png">
        <span class="menu1_p_span">投保相关</span>
      </p>
      <div class="menu1_div">
        <div v-for="(item, ind) in menu1" :key="ind" @click="pageJump(item)" class="menu1_div_div">
          <div>
            <img class="menu1_div_div_img" :src="item.img">
          </div>
          <p class="menu1_div_p">{{ item.title }}</p>
        </div>
      </div>
    </div>

    <div class="menu2">
      <p class="menu2_p">
        <img class="menu2_p_img" src="@/assets/YB_APP/images/16.png">
        <span class="menu2_p_span">活动管理</span>
      </p>
      <div class="menu2_div">
        <div v-for="(item, ind) in menu2" :key="ind" @click="pageJump(item)" class="menu2_div_div">
          <div>
            <img class="menu2_div_div_img" :src="item.img">
          </div>
          <p class="menu2_div_p">{{ item.title }}</p>
        </div>
      </div>
    </div>

    <div class="menu3">
      <p class="menu3_p">
        <img class="menu3_p_img" src="@/assets/YB_APP/images/21.png">
        <span class="menu3_p_span">扩展服务</span>
      </p>
      <div class="menu3_div">
        <div v-for="(item, ind) in menu3" :key="ind" @click="pageJump(item)" class="menu3_div_div">
          <div>
            <img class="menu3_div_div_img" :src="item.img">
          </div>
          <p class="menu3_div_p">{{ item.title }}</p>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import { Icon } from 'vant'
import { homeConfigYB } from '@/api/YB_APP/index'
export default {
  name: 'service',
  components: {
    [Icon.name]: Icon,
  },
  data() {
    return {
      messages:false,
      menu1:[],
      menu2:[],
      menu3:[],
    }
  },
  mounted(){
    this.getHomeConfigYB()
    window['getMessage'] = (data)  => {
     this.getMessage(data) 
    }

  },
  methods:{
    getMessage(data){
      if(data){
        console.log('111')
        this.messages = true
      }else{
        this.messages = false
      }
    },
    getHomeConfigYB(){
      let params = {

      }
      homeConfigYB(params).then(res=>{
        if(res.result == 0){
          if(res.content.icon){
            res.content.icon.servicePageIcon.forEach(item=>{
              if(item.type == 'insure'){
                this.menu1.push({
                  title:item.title,
                  img:item.img,
                  route:item.route
                })
              }
              if(item.type == 'activity'){
                this.menu2.push({
                  title:item.title,
                  img:item.img,
                  route:item.route
                })
              }
              if(item.type == 'extend'){
                this.menu3.push({
                  title:item.title,
                  img:item.img,
                  route:item.route
                })
              }
            })
          }
          
        }else{
          this.$toast(res.resultMessage)
        }
      })
    },
    messageJump(){
      this.$jump({
        flag: 'message'          
      })
    },
    pageJump(data){
      this.$jump({
        flag: 'h5',
        extra: {
          url: location.origin + data.route,
        },
        routerInfo: {
          path: data.route,
        },
      })
    },
  },
}
</script>
<style lang="scss" scoped>
  .public_container{
    font-size: 12px;
    height: 100vh;
    width: 100vw;
    background-image: url("../../assets/YB_APP/images/10.png");
    background-repeat: no-repeat;
    background-size: contain;
  }
  .messageIcon_con{
    position: absolute;top: 50px;right: 15px;
  }
  .messageIcon_con_img{
    width:20px;
  }
  .head{
    color: #fff;font-size: 20px;padding-top: 50px;text-align: center;
  }
  .menu1,.menu2,.menu3{
    margin: 15px;background: #fff;border-radius: 5px;padding: 15px;margin-top: 25px;
  }
  .menu1_p{
    display:flex;align-items: center;margin-bottom: 15px;
  }
  .menu1_p_img{
    width:14px;
  }
  .menu1_p_span{
    font-size: 16px;font-weight: bold;margin-left: 15px;
  }
  .menu1_div,.menu2_div,.menu3_div{
    display:flex;justify-content: space-around;align-items: center;
  }
  .menu1_div_div{
    text-align: center;width: 25%;
  }
  .menu1_div_div_img{
    width: 34px;
  }
  .menu1_div_p,.menu2_div_p,.menu3_div_p{
    margin-top:5px;
  }
  .menu,.menu3{
    margin: 15px;background: #fff;border-radius: 5px;padding: 15px;margin-top: 25px;
  }
  .menu2_p,.menu3_p{
    display:flex;align-items: center;margin-bottom: 15px;
  }
  .menu2_p_img,.menu3_p_img{
    width:14px;
  }
  .menu2_p_span,.menu3_p_span{
    font-size: 16px;font-weight: bold;margin-left: 15px;
  }
  .menu2_div{
    display:flex;justify-content: space-around;align-items: center;
  }
  .menu2_div_div,.menu3_div_div{
    text-align: center;width: 25%;
  }
  .menu2_div_div_img,.menu3_div_div_img{
    width: 34px;
  }
</style>