micro_vue/src/scrm_pages/contactus/contactus.vue

<template>
  <div class="page_contactus">
    <!-- 联系我们页面 -->
    <div class="scroll" style="padding:15px 4%;">
      <div v-for="item in this.ordmodel" :key="item.id">
        <div v-if="item.mode_type == 1" class="contractmodeone">
          <mt-swipe :auto="4000" class="swipertwo">
            <mt-swipe-item v-for="it in item.Conrotation" :key="it.id">
              <img :src="it.images" style="width:100%;height:100%" />
            </mt-swipe-item>
          </mt-swipe>
        </div>

    <div>
          <!-- 联系我们页面 -->
         <div class="scroll"  style="padding:15px 4%;">
              <div v-for="item in this.ordmodel" :key="item.id">
                
                     <div v-if="item.mode_type == 1" class="contractmodeone">
                        <mt-swipe :auto="4000" class="swipertwo">
                             <mt-swipe-item  v-for="it in item.Conrotation" :key="it.id">
                                    <img :src="it.images" style="width:100%;height:100%" >
                             </mt-swipe-item>
                        </mt-swipe>
                     </div>

        <div v-if="item.mode_type == 2" class="oldmodetwo">
          <div>
            <span>{{item.title}}:&nbsp;&nbsp;{{item.Hosaddress.address}}</span>
          </div>
        </div>
        <div v-if="item.mode_type == 3">
          <div class="oldmodeone" v-for="it in Connectways" :key="it.id">
            <div class="oldmodefive">
              <span>{{it.title}}:&nbsp;&nbsp;{{it.content}}</span>
            </div>
            <div class="oldmodesix" @click="tallPhone(it.content)">
              <img src="static/images/u318.png" style="width 100%;height:100%" />
            </div>
          </div>
        </div>
        <div class="oldmodefour" v-if="item.mode_type == 4">
          <div>
            <span>{{item.title}}:&nbsp;&nbsp;{{item.Worktime.worktime}}</span>
          </div>
        </div>
        <div class="oldmodethree" v-if="item.mode_type == 5">
          <div>
            <span>{{item.title}}:&nbsp;&nbsp;{{item.Rideway.ride_way}}</span>
          </div>
        </div>
      </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 {
  name: "contactus",
  data() {
    return {
      ordmodel: [],
      Connectways: []
    };
  },
  methods: {
    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);
  }
};
</script>

<style lang="scss" scoped>
.page_contactus {
  overflow: hidden;
  height: 100%;
  padding-bottom: 1.25rem;
  overflow-y: auto;
  &::-webkit-scrollbar {
    width: 0;
  }
}
.modeone {
  width: 100%;
  height: 220px;
  margin-bottom: 10px;
  /* border:solid 1px red; */
}

.oldmodetwo {
  width: 300px;
  height: 100%;
  /* border: solid 1px red; */
  font-size: 14px;
  margin-bottom: 8px;
}

.oldmodeone {
  width: 318px;
  min-height: 22px;
  /* border: solid 1px red; */
  margin-bottom: 8px;
}

.oldmodesix {
  position: absolute;
  width: 50px;
  min-height: 20px;
  /* border: solid 1px blue; */
  margin-left: 200px;
  margin-top: -20px;
}

.oldmodefive {
  width: 250px;
  min-height: 20px;
  /* border: solid 1px red; */
}

.oldmodefour {
  width: 300px;
  height: 30px;
  color: black;
  /* border:solid 1px red; */
  font-size: 14px;
  margin-bottom: 8px;
}

.oldmodethree {
  width: 300px;
  height: 100%;
  color: black;
  /* border:solid 1px red; */
  font-size: 14px;
  margin-bottom: 8px;
}
.contractmodeone {
  width: 100%;
  height: 200px;
  /* border: solid 1px red */
}
#wrappertwo {
  width: 40%;
}
#wrappert {
  width: 43%;
}
</style>