黄石h5新页面

刘淇
1 parent 6a9c5a3d
Showing 16 changed files with 354 additions and 1 deletions
src/assets/images/perService/car.png
src/assets/images/perService/carActive.png
src/assets/images/perService/distance.png
src/assets/images/perService/food.png
src/assets/images/perService/foodActive.png
src/assets/images/perService/insure.png
src/assets/images/perService/insureActive.png
src/assets/images/perService/navAddress.png
src/assets/images/perService/phone-icon.png
src/assets/images/perService/phone.png
src/assets/images/perService/search-icon.png
src/assets/images/perService/star.png
src/assets/images/perService/time.png
src/assets/images/perService/编组 15.png
src/router/index.js
src/views/peripheralService/peripheralService.vue
@@ -13,7 +13,7 @@ export default new Router({
     {
       path: '/',
       redirect: {
-        name: 'service'
+        name: 'peripheralService'
       }
     },
     // // {
@@ -257,6 +257,17 @@ export default new Router({
     //   }
     // },
+
+
+    {
+      path: '/peripheralService',
+      name: 'peripheralService',
+      component: () => import("@/views/peripheralService/peripheralService.vue"),
+      meta:{
+        title:'周边服务'
+      }
+    },
+
     {
       path: '/service',
       name: 'service',
+<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></span>
+            <span></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: {
+    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>