黄石保险服务

刘淇
1 parent 6a6e7a81
Showing 8 changed files with 318 additions and 1 deletions
src/assets/images/service/insure1.png
src/assets/images/service/insure2.png
src/assets/images/service/insure3.png
src/assets/images/service/rightArrow.png
src/router/index.js
src/views/service/insure.vue
src/views/service/insureDetail.vue
src/views/service/service.vue
@@ -267,6 +267,26 @@ export default new Router({
     },
     {
+      path: '/insure',
+      name: 'insure',
+      component: () => import("@/views/service/insure.vue"),
+      meta:{
+        title:'保险服务'
+      }
+    },
+
+    {
+      path: '/insureDetail',
+      name: 'insureDetail',
+      component: () => import("@/views/service/insureDetail.vue"),
+      meta:{
+        title:'保险服务详情'
+      }
+    },
+
+
+
+    {
       path: '/serviceList',
       name: 'serviceList',
       component: () => import("@/views/service/serviceList.vue"),
+<template>
+  <div>
+    <div style="height: 44px;">
+      <mt-search
+        v-model="value"
+        cancel-text="取消"
+        placeholder="搜索">
+      </mt-search>
+    </div>
+
+    <group title="" label-width="5em">
+      <popup-picker :title="title1" :data="list1" v-model="value1" @on-show="onShow" @on-hide="onHide" @on-change="onChange" placeholder="请选择"></popup-picker>
+      <popup-picker :title="title2" :data="list2" v-model="value2" @on-show="onShow" @on-hide="onHide" @on-change="onChange" placeholder="请选择"></popup-picker>
+    </group>
+    <ul class="serviceDetailWrap">
+      <li>
+        <div class="serviceDetailTop serviceDetailTop1">
+          <p>
+            <span style="color: #ffbe00;font-weight: 600;font-size: 16px;">大家财险黄石中心支公司</span>
+          </p>
+          <p>
+            <span style="color: #ff4949">营业时间：08:00-18:00</span>
+          </p>
+          <!--<p>-->
+            <!--<span>联系人：余红艳</span>-->
+          <!--</p>-->
+          <p>
+
+            <span>热线电话：95569</span>
+
+          </p>
+        </div>
+        <p style="display: flex;justify-content: space-between;">
+          <span class="fontSize12">位置: 黄石港区杭州路19号儿童公园加油站旁</span>
+          <span @click="toLinkApp('115.086987','30.217836','大家财险黄石中心支公司')">
+             <img src="../../assets/images/service/serviceNav.png" height="18" width="18"/>
+          </span>
+        </p>
+
+        <p>
+          <span class="fontSize12">服务范围：车险，意外险</span>
+        </p>
+        <!--<p>-->
+        <!--<span></span>-->
+        <!--</p>-->
+        <p style="display: flex;justify-content: space-between;padding-top: 5px;">
+          <span class="serviceStar fontSize12">专业贴膜</span>
+          <span @click="callPhone('13971750760')">
+            <img src="../../assets/images/service/serviceIphone.png" height="18" width="18"/>
+          </span>
+        </p>
+
+        <p style="display: flex;justify-content: space-between;padding-top: 5px;" @click="toInsureDetail">
+          <span class=" fontSize12">查看详情</span>
+          <span>
+            <img src="../../assets/images/service/rightArrow.png" height="16" width="16"/>
+          </span>
+        </p>
+      </li>
+
+
+      <!--<li>-->
+        <!--<div class="serviceDetailTop serviceDetailTop2">-->
+          <!--<p>-->
+            <!--<span style="color: #ffbe00;font-weight: 600;font-size: 16px;">途虎养车磁湖东路店</span>-->
+          <!--</p>-->
+          <!--<p>-->
+            <!--<span style="color: #ff4949">营业时间：08:00-21:00</span>-->
+          <!--</p>-->
+          <!--<p>-->
+            <!--<span>联系人：梁浩</span>-->
+          <!--</p>-->
+          <!--<p>-->
+
+            <!--<span>联系电话：13339906728</span>-->
+
+          <!--</p>-->
+        <!--</div>-->
+        <!--<p style="display: flex;justify-content: space-between;">-->
+          <!--<span class="fontSize12">位置: 黄石西塞山区磁湖东路26号途虎养车</span>-->
+          <!--<span @click="toLinkApp('115.089421','30.211496','途虎养车磁湖东路店')">-->
+             <!--<img src="../../assets/images/service/serviceNav.png" height="18" width="18"/>-->
+          <!--</span>-->
+        <!--</p>-->
+
+        <!--<p>-->
+          <!--<span class="fontSize12">服务范围：轮胎更换，美容洗车，车品安装</span>-->
+        <!--</p>-->
+        <!--&lt;!&ndash;<p>&ndash;&gt;-->
+        <!--&lt;!&ndash;<span></span>&ndash;&gt;-->
+        <!--&lt;!&ndash;</p>&ndash;&gt;-->
+        <!--<p style="display: flex;justify-content: space-between;padding-top: 5px;">-->
+          <!--<span class="serviceStar fontSize12">维修、保养、美容</span>-->
+          <!--<span @click="callPhone('13339906728')">-->
+            <!--<img src="../../assets/images/service/serviceIphone.png" height="18" width="18"/>-->
+          <!--</span>-->
+        <!--</p>-->
+      <!--</li>-->
+
+
+
+
+
+
+
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "insure",
+  data () {
+    return {
+      value:'',
+      title1: '全部服务',
+      value1: ['全部'],
+      list1: [['全部', '汽车', '美容']],
+      title2: '附近',
+      value2: ['3KM'],
+      list2: [['3KM', '10KM', '20KM']],
+    }
+  },
+  mounted() {
+    window.toLinkApp = this.toLinkApp;
+  },
+  methods: {
+    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})
+      }
+    },
+    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})
+      }
+
+    },
+    toInsureDetail(){
+    this.$router.push({path:'insureDetail'})
+    },
+    onChange (val) {
+      console.log('val change', val)
+    },
+    changeList10 () {
+      this.list1 = [['小米1', 'iPhone1', '华为1', '情怀1', '三星1', '其他1', '不告诉你1']]
+    },
+    changeList11 () {
+      this.list1[0].push('我是push条目')
+    },
+    changeList20 () {
+
+    },
+
+    onShow () {
+      console.log('on show')
+    },
+    onHide (type) {
+      console.log('on hide', type)
+    }
+  },
+}
+</script>
+
+<style scoped lang="scss">
+  .serviceDetailWrap {
+    padding: 10px 10px;
+    > li {
+      /*height: 160px;*/
+      padding-bottom: 10px;
+      margin-bottom: 10px;
+      border-bottom: 1px solid #eee;
+      /*display: flex;*/
+    }
+  }
+
+  .serviceDetailTop {
+    padding-left: 130px;
+
+    margin-bottom: 5px;
+  }
+  .serviceDetailTop1{
+    background-image: url("../../assets/images/service/serviceDetailTop1.jpg");
+    background-repeat: no-repeat;
+    background-size: 120px 100px;
+  }
+  .serviceDetailTop2{
+    background-image: url("../../assets/images/service/serviceDetailTop2.jpg");
+    background-repeat: no-repeat;
+    background-size: 120px 100px;
+  }
+  .serviceDetailTop3{
+    background-image: url("../../assets/images/service/serviceDetailTop3.jpg");
+    background-repeat: no-repeat;
+    background-size: 120px 100px;
+  }
+  .serviceDetailTop4{
+    background-image: url("../../assets/images/service/serviceDetailTop4.jpg");
+    background-repeat: no-repeat;
+    background-size: 120px 100px;
+  }
+  .serviceDetailTop5{
+    background-image: url("../../assets/images/service/serviceDetailTop5.jpg");
+    background-repeat: no-repeat;
+    background-size: 120px 100px;
+  }
+  .serviceDetailTop6{
+    background-image: url("../../assets/images/service/serviceDetailTop6.jpg");
+    background-repeat: no-repeat;
+    background-size: 120px 100px;
+  }
+  .serviceStar{
+    padding-left: 20px;
+    background: url("../../assets/images/service/serviceStar.png") no-repeat 0 center;
+    background-size: 16px 16px;
+    color: #ff4949;
+  }
+  .fontSize12{
+    font-size: 13px;
+  }
+</style>
+<template>
+    <div style="padding: 0 10px">
+      <flexbox>
+        <flexbox-item><div class="flex-demo">
+          <img src="../../assets/images/service/insure1.png" alt="">
+        </div></flexbox-item>
+        <flexbox-item><div class="flex-demo">
+          <img src="../../assets/images/service/insure2.png" alt="">
+        </div></flexbox-item>
+        <flexbox-item><div class="flex-demo">
+          <img src="../../assets/images/service/insure3.png" alt="">
+        </div></flexbox-item>
+      </flexbox>
+
+      <p >
+        人保财险黄石市分公司黄石港支公司
+        1.全国统一热线电话（95518）24小时全天候服务。2.全国范围内车辆故障免费救援（50公里内），提供拖车、送油、充电、更换轮胎、轮胎充气等救援服务。3.网点机构遍布全国，异地出险、就地理赔。
+      </p>
+
+      <p style="margin: 40px 0 20px;color: red;text-align: center">
+        若有业务咨询,请预留电话,客服人员会尽快联系到您
+      </p>
+
+      <!--<x-input title="手机号码格式化" mask="999 9999 9999" v-model="maskValue" :max="13" is-type="china-mobile"></x-input>-->
+
+      <group title=" ">
+        <x-input title="手机号码" name="mobile" placeholder="请输入手机号码" keyboard="number" is-type="china-mobile"></x-input>
+      </group>
+
+      <x-button type="primary" style="margin-top: 20px">确定</x-button>
+    </div>
+</template>
+
+<script>
+export default {
+  name: "insureDetail",
+  data(){
+    return{
+      maskValue:''
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+  .flex-demo {
+    text-align: center;
+    color: #fff;
+    background-color: #20b907;
+    border-radius: 4px;
+    background-clip: padding-box;
+    height: 100px;
+    img{
+      width: 100%;
+      height: 100%;
+    }
+  }
+</style>
@@ -17,7 +17,7 @@
       </flexbox-item>
       <flexbox-item class="nav-warp">
-        <div  @click="$router.push({path:'development'})">
+        <div  @click="$router.push({path:'insure'})">
           <img src="../../assets/images/service/safeservice.png" height="32" width="32"/>
         </div>
         <p>保险服务</p>