micro_vue/src/scrm_pages/contact/contactus.vue

<template>
  <div class="page_home">
    <!-- <iframe  :src = this.customUrl width="100%" height="100%" marginwidth="0" frameborder="no" scrolling="no"></iframe> -->
    <div>
    <div v-for="item in this.ordmodel" :key="item.id" >
  
        <div class="focusImg" v-if="item.mode_type == 1">
          <div class="swiper-container">
            <div class="swiper-wrapper">
              <div class="swiper-slide" v-for="it in item.Conrotation" :key="it.id">
                <img class="imgtwo" :src="it.images" />
              </div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
          </div>

          <!-- <div class="swiper-pagination"></div> -->
        </div>
     

      <div class="row" v-if="item.mode_type == 2">
        <p class="title">{{item.title}}:</p>
        <p class="msg">{{item.Hosaddress.address}}</p>
      </div>
      <div class="row" v-if="item.mode_type == 3">
        <div v-for="it in Connectways" :key="it.id">
          <p class="title">{{it.title}}:</p>
          <p class="msg">{{it.content}}</p>
          <br />
        </div>
      </div>
       <div class="row" v-if="item.mode_type == 4">
          <p class="title">{{item.title}}:</p>
          <p class="msg">{{item.Worktime.worktime}}</p>
        </div>
        <div class="row" v-if="item.mode_type == 5">
          <p class="title">{{item.title}}:</p>
          <p class="msg">{{item.Rideway.ride_way}}</p>
        </div>
    </div>

    <!-- tab切换 -->
    
  </div>
  <div class="tabs">
      <ul class="tabList">
        <li
          class="tabOne"
          v-for="item in this.navigationdata"
          :key="item.id"
          @click="CallPhone(item.linktype,item.navaddress,item.user_org_id)"
        >
          <img :src="item.nonavimages" alt />
          <span>{{item.navtitle}}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper";
import Vue from "vue";
import { Swipe, SwipeItem } from "mint-ui";
import "mint-ui/lib/style.css";
import {
  getDefalutNavigationData,
  getOrderModel,
  getAllConnecWay
} from "@/api/micro/micro";
export default {
  data() {
    return {
      navigationdata: [],
      ordmodel: [],
      Connectways: []
    };
  },
  methods: {
    getDefalutNavigationData(orgid) {
      getDefalutNavigationData(orgid).then(response => {
        if (response.data.state == 1) {
          var navigation = response.data.data.navigation;
          for (let index = 0; index < navigation.length; index++) {
            navigation[3].nonavimages = "https://images.shengws.com/2124_o_1571990749565.png";
          }
          console.log("navigation是什么", navigation);
          this.navigationdata = navigation;
        }
      });
    },
    initSwiper() {
      var mySwiper1 = new Swiper(".swiper-container", {
        loop: true, // 循环模式选项
        pagination: {
          el: ".swiper-pagination"
        },
        // autoplay: {
        //   disableOnInteraction: false
        // }
        autoplay: true
      });
    },
    getOrderModel(orgid) {
      getOrderModel(orgid).then(response => {
        if (response.data.state == 1) {
          var ordmodel = response.data.data.ordmodel;
          console.log("ordmodel是什么", ordmodel);
          this.ordmodel = response.data.data.ordmodel;
        }
      });
    },
    getAllConnecWay(orgid) {
      getAllConnecWay(orgid).then(response => {
        if (response.data.state == 1) {
          var connect = response.data.data.connect;
          this.Connectways = connect;
        }
      });
    },
    CallPhone(linktype, address, orgid) {
      console.log("orgid是什么啊", orgid);
      console.log("linktype", linktype);
      if (linktype == "1") {
        this.$router.push({
          path: "/microHome",
          query: {
            orgid: orgid
          }
        });
      }
      if (linktype == "2") {
        // window.location.href = address;
        this.$router.push({
          path: "/custom",
          query: {
            orgid: orgid
          }
        });
      }
      if (linktype == "3") {
        window.location.href = "tel://" + address + "";
      }
      // if (linktype == "4") {
      //   // window.location.href = address;
      //   this.$router.push({
      //     path: "/custom",
      //     query: {
      //       orgid: orgid
      //     }
      //   });
      // }
      // if (linktype == "4") {
      //   // window.location.href = address;
      //   this.$router.push({
      //     path:"/custom",
      //     query:{
      //       orgid:orgid
      //     }
      //   })
      // }
    }
  },
  created() {
    const orgid = this.$route.query.orgid;
    console.log("我的", orgid);
    this.url = orgid;
    this.getDefalutNavigationData(orgid);
    this.getOrderModel(orgid);
    this.getAllConnecWay(orgid);
    this.initSwiper();
  },
  updated() {
    this.initSwiper();
  }
};
</script>

<style lang="scss" scoped>
@import "../../assets/styles/mixin.scss";
// .page_home {
//   overflow: hidden;
//   display: flex;
//   flex-direction: column;
//   height: 100%;
//   overflow-y: auto;
//   > div:first-child {
//     flex: 1;
//     overflow: auto;
//   }
//   > div:first-child::-webkit-scrollbar {
//     width: 0;
//   }
//   // border:solid 1px red;
// }
// .bugone{
//   border: solid 1px red;
// }

.tabs {
  @include border-top;
  width: 100%;
  height: 3.125rem;
  box-sizing: border-box;
}
.tabList {
  display: flex;
  justify-content: space-around;
  height: 100%;
  .tabOne {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    img {
      // margin-top: 0.5rem;
      width: 1.875rem;
      height: 1.875rem;
    }
    span {
      font-size: 0.75rem;
      color: #999;
      // line-height: 1.3125rem;
    }
  }
}

.page_home {
  overflow: hidden;
  height: 100%;
  // > div:nth-of-type(2) {
  //   min-height: 5.125rem;
  // }

  display: flex;
  flex-direction: column;
  > div:first-child {
    flex: 1;
    overflow: auto;
  }
  // > div:nth-of-type(2) {
  //   min-height: 3rem;
  // }
  > div:nth-of-type(3) {
    min-height: 3.125rem;
  }
  > div:nth-of-type(4) {
    min-height: 2.9rem;
  }
  .focusImg {
    width: 23.4375rem;
    height: 11.5625rem;
    img {
      width: 100%;
      height: 100%;
    }
    .swiper-container {
      height: 100%;
    }
  }

  .space {
    margin: 0 1.25rem;
  }
  .row {
    font-size: 1rem;
    font-weight: 600;
    color: rgba(7, 18, 40, 1);
    line-height: 2.375rem;
    min-height: 2.375rem;
    width: 21.125rem;
    margin: 0 1.25rem;
    // border: 1px solid #000;
    .title {
      float: left;
      width: 5rem;
    }
    .msg {
      float: left;
      width: 16rem;
      line-height: 2.375rem;
      min-height: 2.375rem;
      word-wrap: break-word;
      word-break: break-all;
      // overflow-x: hidden;
    }
  }
  .one {
    min-height: 1rem;
    // line-height: 3rem;
  }
  .detail {
    width: 21.125rem;
    margin: 1.1875rem 1.25rem 0 1.25rem;
  }
}
.modeone {
  min-height: 210px;
  // border:solid 1px red;
}
</style>