micro_vue/src/scrm_pages/microHome/microHome.vue

<template>
  <div class="page_home">
    <div class="swiper-slide">
      <div v-for="item in this.patientModels" :key="item.id">
        <!-- 轮播图 -->
        <div class="banner" v-if="item.mode_type == 1">
          <div class="swiper-container bannerSwiper">
            <div class="swiper-wrapper">
              <div class="swiper-slide" v-for="it in item.PatientEditpiclink" :key="it.id">
                <img class="imgtwo" :src="it.images" />
              </div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
          </div>
        </div>

        <!-- 魔方导航 -->
        <div class="btnList" v-if="item.mode_type== 8">
          <div
            class="btnOne"
            v-for="it in item.Editmargin"
            :key="it.id"
            @click="NavigationClick(it.margtitle,it.marginaddress,it.user_org_id)"
          >
            <div>
              <img :src="it.margimage" alt />
            </div>
            <div>
              <p class="title">{{it.margtitle}}</p>
            </div>
          </div>
        </div>

        <!-- 文章列表 -->
        <div class="dynamic" v-if="item.mode_type == 6">
          <div class="common_title">
            <div class="one"></div>
            <div class="dynamicTxt">{{item.title}}</div>
            <div class="more" @click="articlemore(item.id,item.user_org_id)">
              <p>
                查看更多
                <i class="iconfont">&#xe632;</i>
              </p>
            </div>
          </div>
          <div class="content" @click="articlemore(item.id,item.user_org_id)">
            <div class="contentOne" v-for="it in Articlelist" :key="it.id">
              <div class="img">
                <img :src="it.imgs" style="width:100%;height:100%" alt />
              </div>
              <div class="detail">
                <p class="detailTitle">{{it.title}}</p>
                <!-- <p class="detailMessage">{{it.content}}</p> -->
              </div>
            </div>
          </div>
        </div>

        <!-- 医院介绍 -->
        <div class="common" v-if="item.mode_type == 2">
          <div class="common_title">
            <div class="one"></div>
            <div class="dynamicTxt">{{item.title}}</div>
            <div class="more" @click="hispitalmore(item.id,item.user_org_id)">
              <p>
                查看更多
                <i class="iconfont">&#xe632;</i>
              </p>
            </div>
          </div>
          <div class="commonBox">
            <!-- <div class="commonMessage" v-html="item.Hospitals.introduction"></div> -->
            <div class="noImg">
              <img src="../../../static/images/none2.png" alt />
            </div>
          </div>
        </div>

        <!-- 科室介绍 -->
        <div class="common" v-if="item.mode_type == 3">
          <div class="common_title">
            <div class="one"></div>
            <div class="dynamicTxt">{{item.title}}</div>
            <div class="more" @click="officemore(item.id,item.user_org_id)">
              <p>
                查看更多
                <i class="iconfont">&#xe632;</i>
              </p>
            </div>
          </div>
          <div class="commonBox">
            <!-- <div class="commonImg">
            <img src="static\images\img2.png" alt />
            </div>-->
            <!-- <div class="commonMessage" v-html="item.Offices.introduction"></div> -->
            <div class="noImg">
              <img src="../../../static/images/none2.png" alt />
            </div>
          </div>
        </div>

        <!-- 医护团队 -->
        <div class="dynamic" v-if="item.mode_type == 4">
          <div class="common_title">
            <div class="one"></div>
            <div class="dynamicTxt">{{item.title}}</div>
            <div class="more" @click="docmore(item.id,item.user_org_id)">
              <p>
                查看更多
                <i class="iconfont">&#xe632;</i>
              </p>
            </div>
          </div>
          <div class="content" @click="docmore(item.id,item.user_org_id)">
            <div class="contentOne" v-for="doc in item.Editdoctor" :key="doc.id">
              <div class="img">
                <img :src="doc.dochead" style="width:100%;height:100%" alt />
              </div>
              <!-- <div class="detail">
                <p class="detailTitle">{{doc.doc_name}}</p>
                <p class="detailMessage" v-html="doc.docintroduction"></p>
                
              </div>-->
              <div class="detail">
                <div class="noImg">
                  <img src="../../../static/images/none2.png" alt />
                </div>
              </div>
            </div>
            <!-- <div class="contentOne">
            <div class="img">
              <img src="static\images\img1.jpg" alt />
            </div>
            <div class="detail">
              <p class="detailTitle">欧巧漫</p>
              <p class="detailMessage">苏安，女，主任医师，教授，妇产科主任，湖南省医学会理事、湖南省肿瘤学会委员瘤学肿瘤学会员......</p>
            </div>
            </div>-->
          </div>
        </div>

        <!-- 科室环境 -->
        <div class="dynamic" v-if="item.mode_type == 5">
          <div class="common_title">
            <div class="one"></div>
            <div class="dynamicTxt">{{item.title}}</div>
            <!-- <div class="more">
            <p>
              查看更多
              <i class="iconfont">&#xe632;</i>
            </p>
            </div>-->
          </div>
          <div class="imgs">
            <div class="swiper-container imgSwiper">
              <div class="swiper-wrapper">
                <div class="swiper-slide carousel" v-for="itms in item.Enviroimages" :key="itms.id">
                  <img class="img" :src="itms.enviroimages" :preview="itms.modeid" />
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 医院活动 -->
        <div class="dynamic bottom" v-if="item.mode_type == 7">
          <div class="common_title">
            <div class="one"></div>
            <div class="dynamicTxt">{{item.title}}</div>
            <div class="more" @click="Activitiesmore(item.id,item.user_org_id)">
              <p>
                查看更多
                <i class="iconfont">&#xe632;</i>
              </p>
            </div>
          </div>
          <div class="content" @click="Activitiesmore(item.id,item.user_org_id)">
            <div class="contentOne" v-for="it in Activitieslist" :key="it.id">
              <div class="img">
                <img :src="it.poster_photo" style="widht:100%;height:100%" alt />
              </div>
              <div class="detail">
                <p class="detailTitle">{{it.title}}</p>
                <!-- <div class="detailBox">
                <div class="activityTime">
                  <p>
                    7月28日 08:30开始
                    深圳市南山区
                  </p>
                </div>
                <div class="people">
                  <p>100人已报名</p>
                </div>
                </div>-->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- tab切换 -->
    <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 $ from "jquery";
import {
  getHospitaldata,
  getArticlelist,
  getActivities,
  getDefalutNavigationData,
  getData
} from "@/api/micro/micro";
import { link } from "fs";

export default {
  data() {
    return {
      bannerList: [],
      patientModels: [],
      Articlelist: [],
      navigationdata: []
    };
  },
  methods: {
    initSwiper() {
      var mySwiper1 = new Swiper(".bannerSwiper", {
        loop: true, // 循环模式选项
        // 如果需要分页器
        pagination: {
          el: ".swiper-pagination"
        },
        autoplay: {
          disableOnInteraction: false
        }
      });
      var mySwiper2 = new Swiper(".imgSwiper", {
        slidesPerView: 2
      });
    },
    getHospitaldata(orgid) {
      getHospitaldata(orgid).then(response => {
        if (response.data.state == 1) {
          this.patientModels = response.data.data.patientModels;
          console.log("数据是什么", this.patientModels);
        }
      });
    },
    getArticlelist(orgid) {
      getArticlelist(orgid, this.Articlelist).then(response => {
        if (response.data.state == 1) {
          var articlelist = response.data.data.articlelists;
          this.Articlelist = response.data.data.articlelists;
          console.log("文章列表", this.Articlelist);
        }
      });
    },
    getActivities(orgid) {
      getActivities(orgid, this.Activitieslist).then(response => {
        if (response.data.state == 1) {
          var activity = response.data.data.activity;
          this.Activitieslist = response.data.data.activity;
          console.log(this.Activitieslist);
        }
      });
    },
    hispitalmore(id, orgid) {
      this.$router.push({
        path: "/hospitalIntroduction",
        query: {
          id: id,
          orgid: orgid
        }
      });
    },

    officemore(id, orgid) {
      this.$router.push({
        path: "/officeIntroduction",
        query: {
          id: id,
          orgid: orgid
        }
      });
    },
    docmore(id, orgid) {
      this.$router.push({
        path: "/medicalTeam",
        query: {
          id: id,
          orgid: orgid
        }
      });
    },
    articlemore(id, orgid) {
      this.$router.push({
        path: "/news",
        query: {
          id: id,
          orgid: orgid
        }
      });
    },
    Activitiesmore(id, orgid) {
      this.$router.push({
        path: "/activity",
        query: {
          id: id,
          orgid: orgid
        }
      });
    },
    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[0].nonavimages =
              "https://images.shengws.com/2089_o_1571990714383.png";
          }
          console.log("navigation是什么", navigation);
          this.navigationdata = navigation;
        }
      });
    },
    NavigationClick(title, address, orgid) {
      console.log("orgid", orgid);
      //  debugger
      if (title == "加入会员") {
        // window.location.href =
        //   "http://wx.kuyicloud.com/weixin/membershipagree/" + orgid;
        this.$router.push({
          path: "/card",
          query: {
            orgid: orgid
          }
        });
      } else if (title == "联系我们") {
        this.$router.push({
          path: "/contact",
          query: {
            orgid: orgid
          }
        });
      } else if (title == "咨询客服") {
        //  window.location.href = "http://wx.kuyicloud.com/weixin/im/"+orgid;
        this.$router.push({
          path: "/custom",
          query: {
            orgid: orgid
          }
        });
      } else {
        window.location.href = address;
      }
    },

    CallPhone(linktype, address, orgid) {
      if (linktype == "2") {
        this.$router.push({
          path: "/contactus",
          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
          }
        });
      }
    },
    getData(orgid) {
      getData(orgid).then(response => {
        if (response.data.state == 1) {
          this.patientModels = response.data.data.patientModels;
          console.log("数据是什么", this.patientModels);
        }
      });
    }
  },
  created() {
    const orgid = this.$route.query.orgid;
    console.log("机构id是什么", orgid);
    // this.getHospitaldata(orgid);
    this.getArticlelist(orgid);
    this.getActivities(orgid);
    this.getDefalutNavigationData(orgid);
    this.getData(orgid);
  },
  mounted() {
    this.initSwiper();
  },

  updated() {
    this.initSwiper();
    this.$previewRefresh();
  }
};
</script>

<style lang="scss" scoped>
@import "../../assets/styles/mixin.scss";

.page_home {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  > div:first-child {
    flex: 1;
    overflow: auto;
  }
  > div:first-child::-webkit-scrollbar {
    width: 0;
  }
  // border:solid 1px red;
}
// .bugone{
//   border: solid 1px red;
// }

.banner {
  height: 9.4375rem;
  // border:solid 1px red;
}
.swiper-container {
  height: 100%;
}
.swiper-wrapper {
  margin: 0 auto;
  width: 100%;
  height: 100%;
  //   width: 334px;
}
.img {
  width: 100px;
  height: 100px;
}
.imgtwo {
  width: 100%;
  height: 100%;
  border-radius: 0.75rem;
}
.btnList {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  height: 200px;
  margin-top: 1.25rem;
  // border:solid 1px yellow;
}
.btnOne {
  display: block;
  width: 25%;
  text-align: center;
  height: 5rem;
  > div:first-child {
    height: 3.375rem;
  }
  img {
    margin-bottom: 0.3125rem;
    text-align: center;
    width: 3.125rem;
    height: 3.125rem;
    // background: linear-gradient(
    //   0deg,
    //   rgba(255, 201, 115, 1),
    //   rgba(254, 207, 57, 1)
    // );
    // box-shadow: 0px 3px 12px 0px rgba(254, 206, 64, 0.25);
    border-radius: 50%;
  }
  .title {
    width: 100%;
    height: 1.125rem;
    line-height: 1.125rem;
    font-size: 0.875rem;
    text-align: center;
  }
}
.dynamic {
  margin-top: 2.1875rem;
  // border: solid 1px red;
}
.common_title {
  width: 20.9375rem;
  height: 1.125rem;
  margin: 0 auto;
}
.dynamicTxt {
  float: left;
  width: 6.5rem;
  height: 1.125rem;
  line-height: 1.125rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: rgba(7, 18, 40, 1);
}
.one {
  margin-top: 0.125rem;
  margin-right: 0.375rem;
  float: left;
  width: 0.125rem;
  height: 0.875rem;
  background: linear-gradient(
    0deg,
    rgba(114, 182, 253, 1),
    rgba(52, 119, 254, 1)
  );
  box-shadow: 0px 3px 12px 0px rgba(60, 127, 254, 0.2);
  border-radius: 3px;
}
.more {
  float: right;
  p {
    color: #b6bac1;
    height: 1.125rem;
    line-height: 1.125rem;
  }
}
.contentOne {
  margin: auto;
  margin-top: 1.125rem;
  width: 20.875rem;
  height: 7.4375rem;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.05);
  border-radius: 0.5rem;
  padding-left: 1rem;
  padding-top: 1.125rem;
  box-sizing: border-box;
  .img {
    float: left;
    width: 5rem;
    height: 5rem;
    img {
      border-radius: 0.3125rem;
    }
  }
  .detail {
    float: left;
    margin-left: 0.8125rem;
    width: 13.125rem;
    .detailTitle {
      margin-top: 8px;
      font-size: 15px;
      margin-top: 0.5rem;
      width: 12.6875rem;
      height: 1rem;
      line-height: 1rem;
      font-size: 0.9375rem;
      font-weight: 600;
      color: rgba(7, 18, 40, 1);
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
    }
    .detailMessage {
      margin-top: 0.25rem;
      width: 13.25rem;
      height: 3.3rem;
      font-size: 0.75rem;
      font-weight: 400;
      color: rgba(155, 155, 155, 1);
      line-height: 1.125rem;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      // border: solid 1px red;
    }
  }
  // border: solid 1px red;
}
.common {
  margin-top: 2.1875rem;
  .commonBox {
    margin: auto;
    margin-top: 1.25rem;
    width: 20.875rem;
    // height: 20.3125rem;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.05);
    border-radius: 16px;
    padding: 1.125rem 1.3125rem 1.3125rem 1.3125rem;
    overflow: hidden;
    text-overflow: ellipsis;
    // border: 1px solid #000;
    .noImg {
      width: 6.25rem;
      height: 6.25rem;
      margin: 0 auto;
      img {
        width: 6.25rem;
        height: 6.25rem;
      }
    }
  }
  .commonImg {
    width: 18.4375rem;
    height: 10.5625rem;
    border-radius: 10px;
  }
  .commonMessage {
    // margin-top: 1.375rem;
    width: 17.75rem;
    height: 16.25rem;
    font-size: 0.875rem;
    color: rgba(60, 60, 60, 1);
    line-height: 1.375rem;
    overflow: hidden;
    // border: solid 1px red;
    display: -webkit-box;
    -webkit-line-clamp: 8;
    -webkit-box-orient: vertical;
    p {
      height: 100%;
      line-height: 1.375rem;
    }
  }
  // border:solid 1px red;
}
.imgs {
  margin-top: 1.875rem;
  overflow-x: hidden;
  margin-left: 1.25rem;
  img {
    width: 10.75rem;
    height: 7.8125rem;
    border-radius: 10px;
  }
  .carousel {
    width: 100%;
    height: 100%;
    float: left;
    padding-right: 1rem;
  }
}
.detail {
  height: 100%;
  .noImg {
    width: 3.125rem;
    height: 3.125rem;
    margin: 1.25rem auto 0;
    img {
      width: 3.125rem;
      height: 3.125rem;
    }
  }
}
.detailBox {
  margin-top: 0.625rem;
  .activityTime {
    float: left;
    width: 7.375rem;
    height: 2.1875rem;
    font-size: 0.8125rem;
    color: rgba(155, 155, 155, 1);
    line-height: 1.5rem;
  }
  .people {
    margin-top: 1rem;
    float: left;
    width: 5.375rem;
    height: 1.875rem;
    background: rgba(57, 124, 254, 0.1);
    border-radius: 30px;
    p {
      margin: auto;
      text-align: center;
      width: 4.375rem;
      height: 0.75rem;
      font-size: 0.75rem;
      color: rgba(57, 124, 254, 1);
      line-height: 1.875rem;
    }
  }
}
.bottom {
  margin-bottom: 1.25rem;
}
.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;
    }
  }
}
</style>