BJ_web_developers / wxgzh

Blame view

src/views/service/serviceDetail.vue 13.8 KB
Edit Raw Normal View History
19a4329d   刘淇   周边服务 
1
 
  <template>
cf4544fa   刘淇   周边服务 
2
3
4
5
6
7
8
 
    <div>
      <div style="height: 44px;">
        <mt-search
          v-model="value"
          cancel-text="取消"
          placeholder="搜索">
        </mt-search>
19a4329d   刘淇   周边服务 
9
 
      </div>
cf4544fa   刘淇   周边服务 
10
11
12
13
14
15
16
 
  
      <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>
ef88324f   刘淇   黄石周边服务 
17
 
          <div class="serviceDetailTop serviceDetailTop1">
cf4544fa   刘淇   周边服务 
18
 
            <p>
604450ff   刘淇   黄石周边服务 
19
 
              <span style="color: #ffbe00;font-weight: 600;font-size: 16px;">一川汽车服务运营中心</span>
cf4544fa   刘淇   周边服务 
20
21
 
            </p>
            <p>
210796e9   刘淇   黄石周边服务 
22
 
              <span style="color: #ff4949">营业时间：08:00-18:00</span>
cf4544fa   刘淇   周边服务 
23
24
 
            </p>
            <p>
ef88324f   刘淇   黄石周边服务 
25
 
              <span>联系人：余红艳</span>
cf4544fa   刘淇   周边服务 
26
27
 
            </p>
            <p>
cf4544fa   刘淇   周边服务 
28
ef88324f   刘淇   黄石周边服务 
29
 
              <span>联系电话：13971750760</span>
0a26514e   刘淇   周边服务 
30
cf4544fa   刘淇   周边服务 
31
32
33
 
            </p>
          </div>
          <p style="display: flex;justify-content: space-between;">
02046f17   刘淇   文字大小 
34
 
            <span class="fontSize12">位置: 黄石港区杭州路19号儿童公园加油站旁</span>
ef88324f   刘淇   黄石周边服务 
35
 
            <span @click="toLinkApp('115.086987','30.217836','一川汽车服务运营中心')">
0a26514e   刘淇   周边服务 
36
 
               <img src="../../assets/images/service/serviceNav.png" height="18" width="18"/>
cf4544fa   刘淇   周边服务 
37
38
 
            </span>
          </p>
ef88324f   刘淇   黄石周边服务 
39
40
 
  
          <p>
02046f17   刘淇   文字大小 
41
 
            <span class="fontSize12">服务范围：洗车，美容，音响改装</span>
ef88324f   刘淇   黄石周边服务 
42
43
44
45
 
          </p>
          <!--<p>-->
            <!--<span></span>-->
          <!--</p>-->
cf4544fa   刘淇   周边服务 
46
 
          <p style="display: flex;justify-content: space-between;padding-top: 5px;">
02046f17   刘淇   文字大小 
47
 
            <span class="serviceStar fontSize12">专业贴膜</span>
ef88324f   刘淇   黄石周边服务 
48
 
            <span @click="callPhone('13971750760')">
0a26514e   刘淇   周边服务 
49
 
              <img src="../../assets/images/service/serviceIphone.png" height="18" width="18"/>
cf4544fa   刘淇   周边服务 
50
51
52
53
 
            </span>
          </p>
        </li>
ef88324f   刘淇   黄石周边服务 
54
55
56
57
58
59
60
 
  
        <li>
          <div class="serviceDetailTop serviceDetailTop2">
            <p>
              <span style="color: #ffbe00;font-weight: 600;font-size: 16px;">途虎养车磁湖东路店</span>
            </p>
            <p>
210796e9   刘淇   黄石周边服务 
61
 
              <span style="color: #ff4949">营业时间：08:00-21:00</span>
ef88324f   刘淇   黄石周边服务 
62
63
64
65
66
67
68
69
70
71
72
 
            </p>
            <p>
              <span>联系人：梁浩</span>
            </p>
            <p>
  
              <span>联系电话：13339906728</span>
  
            </p>
          </div>
          <p style="display: flex;justify-content: space-between;">
02046f17   刘淇   文字大小 
73
 
            <span class="fontSize12">位置: 黄石西塞山区磁湖东路26号途虎养车</span>
ef88324f   刘淇   黄石周边服务 
74
75
76
77
78
79
 
            <span @click="toLinkApp('115.089421','30.211496','途虎养车磁湖东路店')">
               <img src="../../assets/images/service/serviceNav.png" height="18" width="18"/>
            </span>
          </p>
  
          <p>
02046f17   刘淇   文字大小 
80
 
            <span class="fontSize12">服务范围：轮胎更换，美容洗车，车品安装</span>
ef88324f   刘淇   黄石周边服务 
81
82
83
 
          </p>
          <!--<p>-->
          <!--<span></span>-->
0a26514e   刘淇   周边服务 
84
 
          <!--</p>-->
ef88324f   刘淇   黄石周边服务 
85
 
          <p style="display: flex;justify-content: space-between;padding-top: 5px;">
02046f17   刘淇   文字大小 
86
 
            <span class="serviceStar fontSize12">维修、保养、美容</span>
ef88324f   刘淇   黄石周边服务 
87
88
89
90
91
92
93
94
95
96
97
98
99
 
            <span @click="callPhone('13339906728')">
              <img src="../../assets/images/service/serviceIphone.png" height="18" width="18"/>
            </span>
          </p>
        </li>
  
  
        <li>
          <div class="serviceDetailTop serviceDetailTop3">
            <p>
              <span style="color: #ffbe00;font-weight: 600;font-size: 16px;">壹路美汽车服务中心</span>
            </p>
            <p>
210796e9   刘淇   黄石周边服务 
100
 
              <span style="color: #ff4949">营业时间：08:00-19:00</span>
ef88324f   刘淇   黄石周边服务 
101
102
103
104
105
106
107
108
109
110
111
 
            </p>
            <p>
              <span>联系人：石先生</span>
            </p>
            <p>
  
              <span>联系电话：18162919877</span>
  
            </p>
          </div>
          <p style="display: flex;justify-content: space-between;">
02046f17   刘淇   文字大小 
112
 
            <span class="fontSize12">位置: 黄石市下陆区明盛·湖景花园(广州路5号) </span>
ef88324f   刘淇   黄石周边服务 
113
114
115
116
117
118
 
            <span @click="toLinkApp('115.040454','30.189769','壹路美汽车服务中心')">
               <img src="../../assets/images/service/serviceNav.png" height="18" width="18"/>
            </span>
          </p>
  
          <p>
02046f17   刘淇   文字大小 
119
 
            <span class="fontSize12">服务范围：钣金维修  汽车美容 保险</span>
ef88324f   刘淇   黄石周边服务 
120
121
122
 
          </p>
          <!--<p>-->
          <!--<span></span>-->
0a26514e   刘淇   周边服务 
123
 
          <!--</p>-->
ef88324f   刘淇   黄石周边服务 
124
 
          <p style="display: flex;justify-content: space-between;padding-top: 5px;">
02046f17   刘淇   文字大小 
125
 
            <span class="serviceStar fontSize12">8公里免费救援  维修保养打折   免费赠送玻璃水</span>
ef88324f   刘淇   黄石周边服务 
126
127
128
129
130
131
 
            <span @click="callPhone('18162919877')">
              <img src="../../assets/images/service/serviceIphone.png" height="18" width="18"/>
            </span>
          </p>
        </li>
c9f7ca55   刘淇   添加商户 
132
133
134
135
136
137
 
        <li>
        <div class="serviceDetailTop serviceDetailTop5">
          <p>
            <span style="color: #ffbe00;font-weight: 600;font-size: 16px;">天猫养车顺佳四季花城店</span>
          </p>
          <p>
755c7b0d   刘淇   汽车类新增一个 
138
 
            <span style="color: #ff4949">营业时间：08:00-20:00</span>
c9f7ca55   刘淇   添加商户 
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
 
          </p>
          <p>
            <span>联系人：彭庆安</span>
          </p>
          <p>
  
            <span>联系电话：18086300986</span>
  
          </p>
        </div>
        <p style="display: flex;justify-content: space-between;">
          <span class="fontSize12">位置:黄石港公园路顺佳四季花城 </span>
          <span @click="toLinkApp('115.062207','30.241861','天猫养车顺佳四季花城店')">
               <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('18086300986')">
              <img src="../../assets/images/service/serviceIphone.png" height="18" width="18"/>
            </span>
        </p>
      </li>
  
        <li>
          <div class="serviceDetailTop serviceDetailTop4">
            <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>联系电话：18972750792</span>
  
            </p>
          </div>
          <p style="display: flex;justify-content: space-between;">
            <span class="fontSize12">位置:黄石市三江共和城14号商铺绿城斜对面 </span>
            <span @click="toLinkApp('115.042084','30.245914','共和城途虎养车')">
               <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('18972750792')">
              <img src="../../assets/images/service/serviceIphone.png" height="18" width="18"/>
            </span>
          </p>
        </li>
ef88324f   刘淇   黄石周边服务 
208
3391cd8b   刘淇   添加商户 
209
210
211
212
213
214
 
        <li>
          <div class="serviceDetailTop serviceDetailTop6">
            <p>
              <span style="color: #ffbe00;font-weight: 600;font-size: 16px;">奥众汽车服务有限公司</span>
            </p>
            <p>
755c7b0d   刘淇   汽车类新增一个 
215
 
              <span style="color: #ff4949">营业时间：08:00-17:30</span>
3391cd8b   刘淇   添加商户 
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
 
            </p>
            <p>
              <span>联系人：张松</span>
            </p>
            <p>
  
              <span>联系电话：18171669994</span>
  
            </p>
          </div>
          <p style="display: flex;justify-content: space-between;">
            <span class="fontSize12">位置:黄石市下陆区广州路99号 </span>
            <span @click="toLinkApp('115.024625','30.192622','奥众汽车服务有限公司')">
               <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">底盘胶套原厂品质市场价5折，保险价优</span>
            <span @click="callPhone('18171669994')">
              <img src="../../assets/images/service/serviceIphone.png" height="18" width="18"/>
            </span>
          </p>
        </li>
ef88324f   刘淇   黄石周边服务 
249
755c7b0d   刘淇   汽车类新增一个 
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
 
        <li>
          <div class="serviceDetailTop serviceDetailTop7">
            <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>联系电话：18971759220</span>
  
            </p>
          </div>
          <p style="display: flex;justify-content: space-between;">
6a9c5a3d   刘淇   黄石 
268
269
 
            <span class="fontSize12">位置:黄石港区湖滨西路1899号 </span>
            <span @click="toLinkApp('115.058572','30.246576','米其林驰加安运店')">
755c7b0d   刘淇   汽车类新增一个 
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
 
               <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('18971759220')">
              <img src="../../assets/images/service/serviceIphone.png" height="18" width="18"/>
            </span>
          </p>
        </li>
ef88324f   刘淇   黄石周边服务 
292
0a26514e   刘淇   周边服务 
293
cf4544fa   刘淇   周边服务 
294
295
 
      </ul>
    </div>
19a4329d   刘淇   周边服务 
296
297
298
299
 
  </template>
  
  <script>
  export default {
cf4544fa   刘淇   周边服务 
300
301
302
303
304
305
306
307
308
309
310
311
 
    name: "serviceDetail",
    data () {
      return {
        value:'',
        title1: '全部服务',
        value1: ['全部'],
        list1: [['全部', '汽车', '美容']],
        title2: '附近',
        value2: ['3KM'],
        list2: [['3KM', '10KM', '20KM']],
      }
    },
0a26514e   刘淇   周边服务 
312
313
314
 
    mounted() {
      window.toLinkApp = this.toLinkApp;
    },
cf4544fa   刘淇   周边服务 
315
 
    methods: {
0a26514e   刘淇   周边服务 
316
317
318
319
320
321
322
323
324
325
326
327
328
329
 
      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})
        }
      },
ef88324f   刘淇   黄石周边服务 
330
 
      toLinkApp(lon,lat,name){
0a26514e   刘淇   周边服务 
331
332
333
334
335
336
 
        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("我是安卓");
ef88324f   刘淇   黄石周边服务 
337
 
          window.JSInterface.toApp(lon,lat,name);
0a26514e   刘淇   周边服务 
338
339
340
 
        }
        if (isIOS) {
          // alert("我是苹果");
ef88324f   刘淇   黄石周边服务 
341
 
          window.webkit.messageHandlers.toApp.postMessage({ "lon": lon, "lat": lat, "name":name})
0a26514e   刘淇   周边服务 
342
343
344
 
        }
  
      },
cf4544fa   刘淇   周边服务 
345
346
347
348
349
350
351
352
353
354
355
356
 
      onChange (val) {
        console.log('val change', val)
      },
      changeList10 () {
        this.list1 = [['小米1', 'iPhone1', '华为1', '情怀1', '三星1', '其他1', '不告诉你1']]
      },
      changeList11 () {
        this.list1[0].push('我是push条目')
      },
      changeList20 () {
  
      },
19a4329d   刘淇   周边服务 
357
cf4544fa   刘淇   周边服务 
358
359
360
361
362
363
364
 
      onShow () {
        console.log('on show')
      },
      onHide (type) {
        console.log('on hide', type)
      }
    },
19a4329d   刘淇   周边服务 
365
 
  }
cf4544fa   刘淇   周边服务 
366
367
368
369
370
371
 
  </script>
  
  <style scoped lang="scss">
    .serviceDetailWrap {
      padding: 10px 10px;
      > li {
02046f17   刘淇   文字大小 
372
373
 
        /*height: 160px;*/
        padding-bottom: 10px;
cf4544fa   刘淇   周边服务 
374
375
376
377
378
379
380
381
 
        margin-bottom: 10px;
        border-bottom: 1px solid #eee;
        /*display: flex;*/
      }
    }
  
    .serviceDetailTop {
      padding-left: 130px;
ef88324f   刘淇   黄石周边服务 
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
 
  
      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");
cf4544fa   刘淇   周边服务 
397
398
 
      background-repeat: no-repeat;
      background-size: 120px 100px;
cf4544fa   刘淇   周边服务 
399
 
    }
c9f7ca55   刘淇   添加商户 
400
401
402
403
404
405
406
407
408
409
 
    .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;
    }
3391cd8b   刘淇   添加商户 
410
411
412
413
414
 
    .serviceDetailTop6{
      background-image: url("../../assets/images/service/serviceDetailTop6.jpg");
      background-repeat: no-repeat;
      background-size: 120px 100px;
    }
755c7b0d   刘淇   汽车类新增一个 
415
416
417
418
419
 
    .serviceDetailTop7{
      background-image: url("../../assets/images/service/serviceDetailTop7.jpeg");
      background-repeat: no-repeat;
      background-size: 120px 100px;
    }
cf4544fa   刘淇   周边服务 
420
421
 
    .serviceStar{
      padding-left: 20px;
604450ff   刘淇   黄石周边服务 
422
423
 
      background: url("../../assets/images/service/serviceStar.png") no-repeat 0 center;
      background-size: 16px 16px;
cf4544fa   刘淇   周边服务 
424
425
 
      color: #ff4949;
    }
02046f17   刘淇   文字大小 
426
427
428
 
    .fontSize12{
      font-size: 13px;
    }
19a4329d   刘淇   周边服务 
429
 
  </style>