BJ_web_developers / wxgzh

Blame view

src/views/service/serviceDetail.vue 10.6 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
138
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
 
        <li>
        <div class="serviceDetailTop serviceDetailTop5">
          <p>
            <span style="color: #ffbe00;font-weight: 600;font-size: 16px;">天猫养车顺佳四季花城店</span>
          </p>
          <p>
            <span style="color: #ff4949">营业时间：8:00-20:00</span>
          </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
209
210
0a26514e   刘淇   周边服务 
211
cf4544fa   刘淇   周边服务 
212
213
 
      </ul>
    </div>
19a4329d   刘淇   周边服务 
214
215
216
217
 
  </template>
  
  <script>
  export default {
cf4544fa   刘淇   周边服务 
218
219
220
221
222
223
224
225
226
227
228
229
 
    name: "serviceDetail",
    data () {
      return {
        value:'',
        title1: '全部服务',
        value1: ['全部'],
        list1: [['全部', '汽车', '美容']],
        title2: '附近',
        value2: ['3KM'],
        list2: [['3KM', '10KM', '20KM']],
      }
    },
0a26514e   刘淇   周边服务 
230
231
232
 
    mounted() {
      window.toLinkApp = this.toLinkApp;
    },
cf4544fa   刘淇   周边服务 
233
 
    methods: {
0a26514e   刘淇   周边服务 
234
235
236
237
238
239
240
241
242
243
244
245
246
247
 
      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   刘淇   黄石周边服务 
248
 
      toLinkApp(lon,lat,name){
0a26514e   刘淇   周边服务 
249
250
251
252
253
254
 
        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   刘淇   黄石周边服务 
255
 
          window.JSInterface.toApp(lon,lat,name);
0a26514e   刘淇   周边服务 
256
257
258
 
        }
        if (isIOS) {
          // alert("我是苹果");
ef88324f   刘淇   黄石周边服务 
259
 
          window.webkit.messageHandlers.toApp.postMessage({ "lon": lon, "lat": lat, "name":name})
0a26514e   刘淇   周边服务 
260
261
262
 
        }
  
      },
cf4544fa   刘淇   周边服务 
263
264
265
266
267
268
269
270
271
272
273
274
 
      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   刘淇   周边服务 
275
cf4544fa   刘淇   周边服务 
276
277
278
279
280
281
282
 
      onShow () {
        console.log('on show')
      },
      onHide (type) {
        console.log('on hide', type)
      }
    },
19a4329d   刘淇   周边服务 
283
 
  }
cf4544fa   刘淇   周边服务 
284
285
286
287
288
289
 
  </script>
  
  <style scoped lang="scss">
    .serviceDetailWrap {
      padding: 10px 10px;
      > li {
02046f17   刘淇   文字大小 
290
291
 
        /*height: 160px;*/
        padding-bottom: 10px;
cf4544fa   刘淇   周边服务 
292
293
294
295
296
297
298
299
 
        margin-bottom: 10px;
        border-bottom: 1px solid #eee;
        /*display: flex;*/
      }
    }
  
    .serviceDetailTop {
      padding-left: 130px;
ef88324f   刘淇   黄石周边服务 
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
 
  
      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   刘淇   周边服务 
315
316
 
      background-repeat: no-repeat;
      background-size: 120px 100px;
cf4544fa   刘淇   周边服务 
317
 
    }
c9f7ca55   刘淇   添加商户 
318
319
320
321
322
323
324
325
326
327
 
    .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;
    }
cf4544fa   刘淇   周边服务 
328
329
 
    .serviceStar{
      padding-left: 20px;
604450ff   刘淇   黄石周边服务 
330
331
 
      background: url("../../assets/images/service/serviceStar.png") no-repeat 0 center;
      background-size: 16px 16px;
cf4544fa   刘淇   周边服务 
332
333
 
      color: #ff4949;
    }
02046f17   刘淇   文字大小 
334
335
336
 
    .fontSize12{
      font-size: 13px;
    }
19a4329d   刘淇   周边服务 
337
 
  </style>