index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>专柜首页</title>
  <link rel="stylesheet" href="../css/swiper.css" />
  <link rel="stylesheet" href="../css/iconfont.css">
  <script src="../js/jquery-3.4.1.min.js"></script>
  <script src="../js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
  <style>
    body {
      padding: 0;
      margin: 0;
    }
    .center {
      display: flex;
      justify-content: start;
      flex-direction: column;
      width: 100%;
    }
    .swiper-container {
      height: 500px;
      width: 100%;
    } 
    .swiper-container img {
      height: 500px;
      width: 100%;
    }
    .list {
      height: auto;
      width: 100%;
      background-color: #fff;
      display: flex;
      justify-content: flex-start;
      border-bottom: 1px solid rgba(238, 238, 238, 1);
      box-shadow: 0px 2px 4px 0px rgba(221, 221, 221, 1);
      border-radius: 4px;
      z-index: 100;
    }

    .left {
      width: 30%;
    }

    .left img {
      width: 160px;
    }

    .right {
      width: 76%;
      padding: 20px;
      background-color: #fff;
      height: auto;
    }
    .flex {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .title {
      font-size: 28px;
      font-weight: bold;
      color: rgba(45, 71, 106, 1);
    }

    .txt {
      margin-top: 20px;
      font-size: 24px;
      color: rgba(45, 71, 106, 0.8);
    }
    .fwb {
      width: 100%;
      padding: 30px !important;
    }
  </style>
</head>

<body>
  <div class="center">
    <div class="swiper-container">
      <div class="swiper-wrapper" id="slider"></div>
      <div class="swiper-pagination"></div>
    </div>
    <div class="list">
      <div class="left flex">
        <img id="logo" src="" alt="" />
      </div>
      <div class="right">
        <div class="title">欧亚一号专柜</div>
        <div class="txt">
          <i class="iconfont icon-dianhua" style="font-size: 16px;"></i>
          <span id="phone">18888888888</span>
        </div>
        <div class="txt">
          <i class="iconfont icon-dizhi" style="font-size: 16px;"></i>
          <span id="address">欧亚商场一楼181号</span>
        </div>
      </div>
    </div>
    <div id="fwb" style="padding: 40px;" >
    </div>
  </div>
  
  <script>
    // 获取店铺code
    function GetQueryString(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
      var r = window.location.search.substr(1).match(reg)
      var context = ""
      if (r != null)
        context = r[2]
      reg = null
      r = null
      return context == null || context == "" || context == "undefined" ? "" : context;
    }
    const oyStallCode = GetQueryString("oyStallCode")
    /* swiper轮播组件 */
    var swiper = new Swiper('.swiper-container', {
      autoplay: true,
      pagination: {
        el: '.swiper-pagination',
      },
    })
    $(function () {
      showQRInfo()
    })
    const showQRInfo = () => {
      $.ajax({
          type: 'GET',
          url: `http://139.155.48.151:8084/admin/auth/stall/getByOyStallCode?oyStallCode=${oyStallCode}`,
          success: function (data) {
            console.log(data,'data')           
            var str = "";
            for (i = 0; i < data.data.carousel.length; i++) {             
              var _data = data.data.carousel[i]
              str += '<div class="swiper-slide"><img src="'+ _data + '" alt=""></div>'                           
            }
            $("#slider").append(str)
              var mySwiper = new Swiper('.swiper-container', {
              loop: true,
              autoplay: true,
              pagination: '.swiper-pagination',
            })
            let info = data.data.stallInfo
            $("#logo").attr('src',info.logo)            
            let content = info.summary.replace(/<img/g,'<img style="width:100%;"')            
            $("#address").text(info.location)
            $("#fwb").html(content)
          }
       })
    }
        
    /*鼠标移入停止轮播，鼠标离开 继续轮播*/
    // $('.swiper-container').mouseenter(function () {
    //   swiper.stopAutoplay();
    // }).mouseleave(function () {
    //   swiper.startAutoplay();
    // })

    
  </script>
</body>

</html>