micro_vue/src/scrm_pages/contact/contact.vue

<template>
  <div class="page_contact">
    <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">
              <a :href="it.linkaddress.length > 0 ? it.linkaddress: 'javascript:;' ">
              <img class="imgtwo" :src="it.images" />
              </a>
            </div>
          </div>
          <!-- 如果需要分页器 -->
          <div class="swiper-pagination"></div>
        </div>
      </div>
      <!-- <div class="detail"> -->
      <div class="row one detail" 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 one" v-if="item.mode_type == 5">
        <p class="title">{{item.title}}:</p>
        <p class="msg">{{item.Rideway.ride_way}}</p>
      </div>
    </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 { getOrderModel, getAllConnecWay } from "@/api/micro/micro";
export default {
  data() {
    return {
      ordmodel: [],
      Connectways: []
    };
  },
  methods: {
    initSwiper() {
      var mySwiper1 = new Swiper(".swiper-container", {
        loop: true, // 循环模式选项
        pagination: {
          el: ".swiper-pagination"
        },
        autoplay: {
          disableOnInteraction: false
        }
      });
    },
    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;
        }
      });
    },
    tallPhone(content) {
      window.location.href = "tel://" + content + "";
    }
  },
  created() {
    const orgid = this.$route.query.orgid;
    console.log("联系我们orgid是多少", orgid);
    this.getOrderModel(orgid);
    this.getAllConnecWay(orgid);
  },
  mounted() {
    this.initSwiper();
  },
  updated() {
    this.initSwiper();
  }
};
</script>

<style lang="scss" scoped>
.page_contact {
  overflow: hidden;
  height: 100%;
  // > div:nth-of-type(2) {
  //   min-height: 5.125rem;
  // }
  .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: 2.375rem;
    // line-height: 3rem;
  }
  .detail {
    width: 21.125rem;
    margin: 1.1875rem 1.25rem 0 1.25rem;
  }
}
</style>