BJ_web_developers / wxgzh

<template>
  <div>
    <div class="search-wrap">
      <div class="search-main">
        <input type="text" placeholder="请输入相关内容" class="search-text">
        <span class="search-icon"></span>
      </div>

      <div class="distance-wrap">
        <!--<popup-picker  :data="list2" v-model="value2" @on-show="onShow" @on-hide="onHide"-->
        <!--@on-change="onChange" placeholder="请选择"></popup-picker>-->

        <a href="javascript:void(0);" class="largin-btn primary" @click="handleClick">3KM</a>
      </div>


      <mt-actionsheet
        :actions="actions"
        v-model="sheetVisible"
        :modal="true"
      ></mt-actionsheet>

    </div>

    <ul class="tab-wrap">

      <li v-for="(i, index) of 3" :class="{active:currentIndex==index}" :key="index" @click="tabClick(index)"></li>

    </ul>

    <ul class="container-wrap" >
      <li class="container-main" v-for="(i,index) in dataList" :key="i.id">
        <div class="container-top">
          <div class="container-top-left" :style="{backgroundImage:'url('+i.logoUrl+')'}"></div>
          <div class="container-top-right">
            <p class="container-top-title">{{i.companyName}}</p>
            <p>
              <span class="container-top-button" v-for="i in serviceButtonList">{{i}}</span>
            </p>
            <p class="special-title ellipsis">{{i.mainBusines}}</p>
          </div>
        </div>

        <div class="container-bottom">
          <p class="container-time">营业时间：{{i.workTime}}</p>
          <p class="container-address">位置：{{i.companyAddress}}</p>
          <p class="container-phone">联系电话：{{i.contactTel}} （李美丽）</p>
          <div class="address-phone">
            <span @click="toLinkApp(i.lonId,i.latId,i.shopName)"></span>
            <span @click="callPhone('i.contactTel')"></span>
          </div>
        </div>
      </li>
    </ul>
  </div>


</template>

<script>

import { queryInsuranceCompanyList } from "@/api/service/service.js";
export default {
  name: "peripheralService",
  data() {
    return {
      currentIndex: 0,
      sheetVisible: false,                //控制action sheet显隐
      actions: [
        {
          name: "3KM",
          method: this.getCamera    //调用methods中的事件
        },
        {
          name: "10KM",
          method: this.getLibrary    //调用methods中的事件
        }
      ],
      serviceButtonList: [
        "洗车", "美容", "音响改装"
      ],
      dataList: []
    };
  },
  mounted() {
    window.toLinkApp = this.toLinkApp;
    window.callPhone = this.callPhone;
  },
  created() {
    this.queryInsuranceCompanyList(this.carNumber);
  },
  methods: {
    toLinkApp(lon,lat,name){
      var u = navigator.userAgent,
        app = navigator.appVersion;
      var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1;
      var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
      if (isAndroid) {
        // alert("我是安卓");
        window.JSInterface.toApp(lon,lat,name);
      }
      if (isIOS) {
        // alert("我是苹果");
        window.webkit.messageHandlers.toApp.postMessage({ "lon": lon, "lat": lat, "name":name})
      }

    },
    callPhone(telNum) {
      var u = navigator.userAgent,
        app = navigator.appVersion;
      var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1;
      var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
      if (isAndroid) {
        // alert("我是安卓");
        window.JSInterface.callAppPhone(telNum);
      }
      if (isIOS) {
        // alert("我是苹果");
        window.webkit.messageHandlers.callAppPhone.postMessage({ "phoneNumber": telNum})
      }
    },
    queryInsuranceCompanyList() {  // 获取停车记录数据
      var salt = this.$utils.myCommonSalt(32);
      var jsondata = {
        app_id: this.$utils.myVarAppid,
        deviceInfo: this.$utils.myDeviceInfo,
        salt: salt,
        sign_type: "md5",
        orgId: this.$utils.myOrgId,
        companyName: "",
        companyNo: "",
        id: "",
        latId: "",
        lonId: "",
        raidus: "",
        servicesType: ""
      };
      jsondata.sign = this.$utils.signObject(jsondata);
      // jsondata.sign = md5sign
      queryInsuranceCompanyList(jsondata).then(response => {
        this.dataList = response.data;
        console.log(this.dataList);
      });
    },
    tabClick(index) {
      this.currentIndex = index;
    },
    handleClick() {
      this.sheetVisible = true;
    },
    getCamera() {   //3KM
      console.log("3KM");
    },
    getLibrary() {  //10KM
      console.log("10KM");
    }
  }
};
</script>

<style lang="scss">
  #app {
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(123, 214, 239, 0.3) 0%, rgba(45, 128, 152, 0) 100%);
  }

  .search-wrap {
    display: flex;
    padding: 10px 10px 20px;
  }

  .search-main {
    flex: 1;
    position: relative;
    padding-right: 20px;
  }

  .search-text {
    width: 100%;
    height: 26px;
    line-height: 26px;
    border: 0;
    border-radius: 10px;
    background: #FFFFFF;
    box-shadow: 0px 20px 21px 0px rgba(198, 220, 226, 0.61);
    text-indent: 15px;
    outline: none;
  }

  .search-icon {
    width: 24px;
    height: 24px;
    position: absolute;
    right: 30px;
    top: 5px;
    background: url("../../assets/images/perService/search-icon.png") no-repeat;
    background-size: 18px 18px;

  }

  .distance-wrap {
    width: 92px;
    height: 26px;
    line-height: 26px;
    background: #32859A url("../../assets/images/perService/distance.png") no-repeat 10px center;
    background-size: 12px 16px;
    border-radius: 38px;
    text-align: center;
  }

  .tab-wrap {
    display: flex;
    height: 66px;
    > li {
      flex: 1;

    }
    :nth-child(1) {
      background: url("../../assets/images/perService/car.png") no-repeat center center;
      background-size: 100% 100%;
      &.active {
        background: url("../../assets/images/perService/carActive.png") no-repeat center center;
        background-size: 100% 100%;
      }
    }
    :nth-child(2) {
      /*margin: 0 5px;*/
      background: url("../../assets/images/perService/insure.png") no-repeat center center;
      background-size: 100% 100%;
      &.active {
        background: url("../../assets/images/perService/insureActive.png") no-repeat center center;
        background-size: 100% 100%;
      }
    }
    :nth-child(3) {
      background: url("../../assets/images/perService/food.png") no-repeat center center;
      background-size: 100% 100%;
      &.active {
        background: url("../../assets/images/perService/foodActive.png") no-repeat center center;
        background-size: 100% 100%;
      }
    }
  }

  .container-wrap {
    padding: 20px 10px;
  }

  .container-main {
    width: 100%;
    /*height: 196px;*/
    background: #FFFFFF;
    box-shadow: 0px 20px 21px 0px rgba(198, 220, 226, 0.61);
    border-radius: 30px;
    margin-bottom: 20px;
    padding: 10px;
  }

  .container-top {
    display: flex;
    margin-bottom: 10px;
  }

  .container-top-left {
    width: 84px;
    height: 84px;
    background-size: 100% 100%;

    border-radius: 25px;
    margin-right: 15px;
  }

  .container-top-right {
    flex: 1;
    overflow: hidden;
    .container-top-title {
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #000000;
      margin-bottom: 10px;
    }
  }

  .container-top-button {
    padding: 2px 10px;
    margin-right: 5px;
    text-align: center;
    height: 38px;
    background: rgba(43, 126, 151, .2);
    border-radius: 7px;
    color: #36889C;

  }

  .special-title {
    line-height: 16px;
    margin-top: 12px;
    padding-left: 20px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #000000;
    background: url("../../assets/images/perService/star.png") 0 center no-repeat;
    background-size: 16px 16px;
  }

  .ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .container-bottom {
    position: relative;
    font-size: 14px;
    color: #333333;
    > p {
      padding-left: 20px;
    }
  }

  .container-time {
    background: url("../../assets/images/perService/time.png") 0 center no-repeat;
    background-size: 14px 14px;
  }

  .container-address {
    padding: 10px 0;
    background: url("../../assets/images/perService/distance.png") 0 center no-repeat;
    background-size: 14px 14px;
  }

  .container-phone {
    background: url("../../assets/images/perService/phone.png") 0 center no-repeat;
    background-size: 14px 14px;
  }

  .address-phone {
    position: absolute;
    width: 126px;
    height: 40px;
    background: #32859A;
    border-radius: 43px;
    bottom: 0;
    right: 0;
    display: flex;
    span {
      flex: 1;
      display: inline-block;
    }
    :nth-child(1) {
      background: url("../../assets/images/perService/navAddress.png") center center no-repeat;
      background-size: 20px 20px;
      position: relative;
      &:after {
        content: '';
        width: 1px;
        height: 20px;
        background: #fff;
        position: absolute;
        right: 0;
        top: 10px;
      }
    }
    :nth-child(2) {
      background: url("../../assets/images/perService/phone-icon.png") center center no-repeat;
      background-size: 20px 20px;
    }
  }
</style>