home-page.vue 10.7 KB
Newer Older
786817560's avatar
786817560 committed
1
<!--
786817560's avatar
786817560 committed
2
   * @Descrip: 主页
786817560's avatar
786817560 committed
3 4
 * @Author: your name
 * @Date: 2019-10-10 14:25:15
786817560's avatar
786817560 committed
5
 * @LastEditTime: 2019-11-14 09:56:22
786817560's avatar
786817560 committed
6 7 8 9
 * @LastEditors: Please set LastEditors
   -->
<template>
  <h-view id="homePage" class="public-style" title="徐工租赁">
李晓兵's avatar
李晓兵 committed
10
    <h-header :proportion="[7,10,0]" class="bar-custom">
786817560's avatar
786817560 committed
11 12
      <div slot="left" class="h-header-btn">
        <!-- <i class="ion-ios-arrow-back" /> -->
786817560's avatar
786817560 committed
13
        <img class="locations" src="@/assets/homePage/location.png" alt="" @click="location">
786817560's avatar
786817560 committed
14
        <span class="home-city">{{ city }}</span>
786817560's avatar
786817560 committed
15
      </div>
786817560's avatar
786817560 committed
16
      <div slot="center" @click="getLocation">徐工租赁</div>
786817560's avatar
786817560 committed
17
    </h-header>
李晓兵's avatar
李晓兵 committed
18 19 20
    <h-content class="has-footer">
      <div class="top-wrap"/>
      <div class="top-wrap-white"/>
786817560's avatar
786817560 committed
21 22 23 24 25 26 27 28
      <swipe :interval="5000" class="hls-swipe">
        <swipe-item class="hls-swipe">
          <img src="@/assets/homePage/banner1.png" alt="">
        </swipe-item>
        <swipe-item class="hls-swipe">
          <img src="@/assets/homePage/banner2.png" alt="">
        </swipe-item>
      </swipe>
786817560's avatar
786817560 committed
29
      <div class="functions">
786817560's avatar
786817560 committed
30
        <function-item
786817560's avatar
786817560 committed
31 32
          v-for="item in moduleSeparateList.slice(0,4)" :key="item.moduleId" :functionIcon="item.moduleIcon"
          :functionName="item.moduleName"
786817560's avatar
786817560 committed
33
          :data="item" @clickFunction="goModuleFunction"/>
786817560's avatar
786817560 committed
34 35
      </div>

786817560's avatar
786817560 committed
36 37
      <div class="center-pic">
        <div class="left-pic">
李晓兵's avatar
李晓兵 committed
38
          <img src="@/assets/homePage/copy1.png" alt="">
786817560's avatar
786817560 committed
39 40
        </div>
        <div class="right-pic">
李晓兵's avatar
李晓兵 committed
41 42
          <img src="@/assets/homePage/copy2.png" alt="">
          <img src="@/assets/homePage/copy3.png" alt="">
786817560's avatar
786817560 committed
43 44
        </div>
      </div>
李晓兵's avatar
李晓兵 committed
45
      <div class="guessing">猜你喜欢<span><img src="@/assets/homePage/intrest.png"></span></div>
李晓兵's avatar
李晓兵 committed
46 47 48 49 50 51 52 53 54 55
      <div v-for="(list,index) in guessingList" :key="index" class="guessing-wrap" @click="goProductDetail(list)" >
        <list-item :item-height="120">
          <item>
            <div slot="name" class="item-pic">
              <img src="@/assets/homePage/WechatIMG2 Copy@2x.png" alt="">
            </div>
            <div slot="content" class="item-content">
              <div class="top">{{ list.product_name }}</div>
              <img src="@/assets/homePage/hot.png" class="hot">
              <div class="center"><span class="firsts">经销商</span> <span class="seconds">{{ list.bp_name }}</span></div>
linxin's avatar
linxin committed
56
              <div class="center"><span class="firsts">设备识别号</span> <span class="seconds">{{ list.product_code }}</span></div>
786817560's avatar
786817560 committed
57
              <div class="center"><span class="firsts">地址</span> <span class="seconds">{{ list.province_id_n + list.city_id_n + list.district_id_n }}</span></div>
李晓兵's avatar
李晓兵 committed
58 59 60 61 62
            </div>
          </item>
        </list-item>
      </div>
      <!-- <div class="bank" style="height: 60px;width: 100%"/>-->
786817560's avatar
786817560 committed
63 64 65 66
    </h-content>
  </h-view>
</template>
<script>
李晓兵's avatar
李晓兵 committed
67
import functionState from './functionState'
李晓兵's avatar
李晓兵 committed
68

李晓兵's avatar
李晓兵 committed
69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95
export default {
  name: 'HomePage',
  data () {
    return {
      city: '',
      province: '',
      user_bp_status: '',
      user_bp_class: '',
      bp_id: '',
      moduleSeparateList: [],
      guessingList: [],
    }
  },
  computed: {},
  watch: {},
  created () {
    this.getLocation()
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      // if (from.name === 'Login') {
      vm.moduleSeparateList = [...functionState.moduleSeparateList]
      vm.userQuery()
      //  }
    })
  },
  methods:
李晓兵's avatar
李晓兵 committed
96 97
      {
        // 定位
李晓兵's avatar
李晓兵 committed
98
        getLocation () {
李晓兵's avatar
李晓兵 committed
99
          let vm = this
李晓兵's avatar
李晓兵 committed
100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117
          if (vum.Platform.isAndroid()) { // 安卓采用jsapi
            var geolocation = new BMap.Geolocation()
            geolocation.getCurrentPosition(function (res) {
              if (this.getStatus() === 0) {
                // 判断是否是手动选择过定位
                if (window.localStorage.getItem('province')) {
                  vm.city = window.localStorage.getItem('city')
                  vm.province = window.localStorage.getItem('province')
                } else {
                  // 没有就定位当前位置
                  console.log(res)
                  vm.city = res.address.city
                  vm.province = res.address.province
                }
                vm.guessingQuery() // 猜你喜欢查询
              }
            }, {enableHighAccuracy: true})
          } else { // ios使用插件定位
李晓兵's avatar
李晓兵 committed
118
            console.log('&&&&&&&&&&&&___ios')
李晓兵's avatar
李晓兵 committed
119
            baidumap_location.getCurrentPosition(function (result) {
李晓兵's avatar
李晓兵 committed
120 121 122 123
              if (window.localStorage.getItem('province')) {
                vm.city = window.localStorage.getItem('city')
                vm.province = window.localStorage.getItem('province')
              } else {
李晓兵's avatar
李晓兵 committed
124
                vm.city = result.city
李晓兵's avatar
李晓兵 committed
125
                vm.province = result.province
李晓兵's avatar
李晓兵 committed
126
              }
李晓兵's avatar
李晓兵 committed
127
              vm.guessingQuery() // 猜你喜欢查询
李晓兵's avatar
李晓兵 committed
128 129 130
            }, function (error) {
            })
          }
786817560's avatar
786817560 committed
131
        },
李晓兵's avatar
李晓兵 committed
132
        goFunctionHome (data) {
李晓兵's avatar
李晓兵 committed
133 134 135
          this.$router.push({
            name: data.functionState,
          })
786817560's avatar
786817560 committed
136
        },
李晓兵's avatar
李晓兵 committed
137
        goModuleFunction (data) {
李晓兵's avatar
李晓兵 committed
138 139 140
          this.$router.push({
            name: data.moduleState,
          })
786817560's avatar
786817560 committed
141
        },
李晓兵's avatar
李晓兵 committed
142
        location () {
李晓兵's avatar
李晓兵 committed
143 144 145 146 147 148 149
          this.$router.push({
            name: 'Location',
            params: {
              province: this.province,
              city: this.city,
            },
          })
786817560's avatar
786817560 committed
150
        },
李晓兵's avatar
李晓兵 committed
151
        // 用户信息查询
李晓兵's avatar
李晓兵 committed
152
        userQuery () {
李晓兵's avatar
李晓兵 committed
153 154 155 156 157 158 159 160 161 162 163 164
          let vm = this
          let url = $config.basePath + 'user_query'
          let param = {
            'phone': window.localStorage.getItem('user_phone'),
          }
          vm.hlsPopup.showLoading('数据加载中')
          vm.$post(url, param).then(function (res) {
            vm.hlsPopup.hideLoading()
            if (res.result === 'S') {
              vm.user_bp_status = res.info.user_bp_status
              vm.user_bp_class = res.info.user_bp_class
              vm.bp_id = res.info.user_bp_id
李晓兵's avatar
李晓兵 committed
165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182
            } else {
              hlsPopup.showLongCenter(res.message)
            }
          })
        },
        // 猜你喜欢
        guessingQuery () {
          let vm = this
          let url = $config.basePath + 'guess_you_like_query'
          let param = {
            'user_phone': window.localStorage.getItem('user_phone'),
            'city': vm.city,
          }
          vm.$post(url, param).then(function (res) {
            if (res.result === 'S') {
              vm.guessingList = res.lists
            } else {
              hlsPopup.showLongCenter(res.message)
李晓兵's avatar
李晓兵 committed
183 184 185
            }
          })
        },
李晓兵's avatar
李晓兵 committed
186
        // 进入产品明细
786817560's avatar
786817560 committed
187
        goProductDetail (list) {
李晓兵's avatar
李晓兵 committed
188 189 190 191
          this.$router.push({
            name: 'ProDetailed',
            params: {
              product_id: list.product_id,
786817560's avatar
786817560 committed
192
              bp_id: list.bp_id,
李晓兵's avatar
李晓兵 committed
193 194 195
            },
          })
        },
李晓兵's avatar
李晓兵 committed
196
      },
李晓兵's avatar
李晓兵 committed
197
}
786817560's avatar
786817560 committed
198
</script>
李晓兵's avatar
李晓兵 committed
199
<style lang='less'>
李晓兵's avatar
李晓兵 committed
200 201 202
  @import "../../styles/vue-1px";

  #homePage {
李晓兵's avatar
李晓兵 committed
203 204 205
    .content{
      background-color: #EFEFEF;
    }
李晓兵's avatar
李晓兵 committed
206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224
    .top-wrap {
      width: 100%;
      height: 100px;
      background-color: @headerColor;
      border-bottom-right-radius: 30%;
      border-bottom-left-radius: 30%;
      position: absolute;
      top: 0;
    }

    .top-wrap-white {
      width: 100%;
      height: 100px;
      position: absolute;
      top: 100px;
    }

    .home-city {
      white-space: nowrap;
786817560's avatar
786817560 committed
225 226
      overflow: hidden;
      text-overflow: ellipsis;
李晓兵's avatar
李晓兵 committed
227
    }
786817560's avatar
786817560 committed
228

李晓兵's avatar
李晓兵 committed
229 230 231
    .h-header .h-header-left .h-header-btn:first-of-type {
      padding-left: 0.2rem;
    }
786817560's avatar
786817560 committed
232

李晓兵's avatar
李晓兵 committed
233
    .functions {
李晓兵's avatar
李晓兵 committed
234 235
      height: 108px;
      width: 96%;
李晓兵's avatar
李晓兵 committed
236
      margin: -6px auto 10px;
李晓兵's avatar
李晓兵 committed
237
      border-radius: 10px;
李晓兵's avatar
李晓兵 committed
238 239 240 241
      background: #fff;
      padding-top: 10px;
      display: flex;
      justify-content: space-between;
786817560's avatar
786817560 committed
242

李晓兵's avatar
李晓兵 committed
243 244 245
      &:before {
        content: ''
      }
786817560's avatar
786817560 committed
246

李晓兵's avatar
李晓兵 committed
247 248
      &:after {
        content: ''
786817560's avatar
786817560 committed
249
      }
李晓兵's avatar
李晓兵 committed
250 251

      .function-item {
李晓兵's avatar
李晓兵 committed
252
        height: 100%;
786817560's avatar
786817560 committed
253
        display: flex;
李晓兵's avatar
李晓兵 committed
254 255
        flex-direction: column;
        justify-content: space-around;
786817560's avatar
786817560 committed
256
        align-items: center;
李晓兵's avatar
李晓兵 committed
257 258
        img{
         margin: 0;
786817560's avatar
786817560 committed
259
        }
李晓兵's avatar
李晓兵 committed
260 261 262 263 264 265
        div{
          margin-bottom: 14px;
          ont-family: PingFangSC-Regular;
          font-size: 13px;
          color: #3C3D48;
          letter-spacing: 0;
786817560's avatar
786817560 committed
266 267
        }
      }
李晓兵's avatar
李晓兵 committed
268

786817560's avatar
786817560 committed
269
    }
李晓兵's avatar
李晓兵 committed
270 271 272 273 274

    .h-header .h-header-center div {
      text-align: left !important;
    }

786817560's avatar
786817560 committed
275
    .locations {
李晓兵's avatar
李晓兵 committed
276 277
      height: 24px;
      width: 24px;
786817560's avatar
786817560 committed
278
    }
李晓兵's avatar
李晓兵 committed
279

786817560's avatar
786817560 committed
280
    .hls-swipe {
李晓兵's avatar
李晓兵 committed
281 282
      width: 100vw;
      img {
786817560's avatar
786817560 committed
283
        width: 100vw;
李晓兵's avatar
李晓兵 committed
284
        // height: 100%;
786817560's avatar
786817560 committed
285
      }
李晓兵's avatar
李晓兵 committed
286 287 288 289 290 291 292 293 294 295 296 297
      .hls-swipe-indicators{
        left: 54%;
        bottom: 20px;
        .hls-swipe-indicators-item{
          width: 10px;
          height: 2px;
          border-radius: 0;
        }
        .hls-swipe-indicators-item--active{
          background-color: #FFF;
        }
      }
李晓兵's avatar
李晓兵 committed
298
    }
786817560's avatar
786817560 committed
299

李晓兵's avatar
李晓兵 committed
300
    .center-pic {
李晓兵's avatar
李晓兵 committed
301
      margin-top: 10px;
李晓兵's avatar
李晓兵 committed
302 303 304
      width: 100%;
      display: flex;
      flex-direction: row;
李晓兵's avatar
李晓兵 committed
305
      padding: 0 1% 0 1%;
李晓兵's avatar
李晓兵 committed
306 307 308 309 310
      .left-pic {
        width: 41.6%;
        margin-left: 4px;

        img {
李晓兵's avatar
李晓兵 committed
311 312
          width: 100%;
          height: 100%;
786817560's avatar
786817560 committed
313 314
        }
      }
李晓兵's avatar
李晓兵 committed
315 316 317 318 319 320 321 322 323 324 325 326 327 328 329

      .right-pic {
        width: 55.2%;
        display: flex;
        flex-direction: column;
        margin-left: 4px;

        img {
          max-width: 100%;
          height: auto;
        }

        img:nth-of-type(2) {
          margin-top: 4px;
        }
786817560's avatar
786817560 committed
330
      }
李晓兵's avatar
李晓兵 committed
331 332 333 334 335 336 337 338 339 340 341
    }

    .guessing {
      display: flex;
      align-items: center;
      height: 22px;
      font-family: PingFangSC-Semibold;
      font-size: 16px;
      color: #00469C;
      font-weight: 600;
      letter-spacing: 0.57px;
李晓兵's avatar
李晓兵 committed
342 343
      height: 40px;
      padding-left: 2%;
李晓兵's avatar
李晓兵 committed
344 345 346
      span{
      padding-top: 2px;
      margin-left: 4px;
786817560's avatar
786817560 committed
347
      }
李晓兵's avatar
李晓兵 committed
348 349 350
      img{
        width: 14px;
        height: 14px;
786817560's avatar
786817560 committed
351
      }
李晓兵's avatar
李晓兵 committed
352
    }
李晓兵's avatar
李晓兵 committed
353 354 355 356 357 358 359 360
    .guessing-wrap{
      position: relative;
      width: 96%;
      margin: 0 auto;
      .hls-list-item{
        border-radius: 10px;
        .contents{
          padding: 8px 6px 8px 0;
李晓兵's avatar
李晓兵 committed
361 362 363
          .add-content{
            justify-content: flex-start;
          }
李晓兵's avatar
李晓兵 committed
364 365 366
        }
      }
    }
李晓兵's avatar
李晓兵 committed
367 368 369 370 371 372 373 374 375 376 377 378 379 380
    .item-pic {
      width: 110px;
      height: 110px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .item-content {
      .top {
        font-family: PingFangSC-Semibold;
        font-size: 16px;
李晓兵's avatar
李晓兵 committed
381 382
        color: #3B3B3B;
        letter-spacing: 0.54px;
李晓兵's avatar
李晓兵 committed
383
        margin-top: 10px;
李晓兵's avatar
李晓兵 committed
384 385 386 387 388 389 390
        font-weight: 600;
      }
      .hot {
        position: absolute;
        top: 0;
        right: 0;
        width: 45px;
786817560's avatar
786817560 committed
391
      }
李晓兵's avatar
李晓兵 committed
392 393
      .center {
        margin-top: 6px;
李晓兵's avatar
李晓兵 committed
394
        display: flex;
李晓兵's avatar
李晓兵 committed
395
        .firsts {
李晓兵's avatar
李晓兵 committed
396 397 398 399 400
          width: 66px;
          font-family: PingFangSC-Regular;
          font-size: 14px;
          color: rgba(56,63,69,0.60);
          letter-spacing: 0.5px;
李晓兵's avatar
李晓兵 committed
401 402 403
        }

        .seconds {
李晓兵's avatar
李晓兵 committed
404 405
          flex: 1;
          text-align: left;
李晓兵's avatar
李晓兵 committed
406 407
          font-weight: 600;
          font-family: PingFangSC-Semibold;
李晓兵's avatar
李晓兵 committed
408 409
          font-size: 14px;
          color: #4B4A4B;
李晓兵's avatar
李晓兵 committed
410 411 412 413 414
          letter-spacing: 0.5px;
        }
      }
    }
  }
786817560's avatar
786817560 committed
415
</style>