home-page.vue 10 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="徐工租赁">
786817560's avatar
786817560 committed
10
    <h-header :proportion="[7,9,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 56
      <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>
              <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 100 101 102 103 104 105 106 107 108
          let vm = this
          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 {
                // 没有就定位当前位置
786817560's avatar
786817560 committed
109
                console.log(res)
李晓兵's avatar
李晓兵 committed
110 111 112
                vm.city = res.address.city
                vm.province = res.address.province
              }
李晓兵's avatar
李晓兵 committed
113
              vm.guessingQuery() // 猜你喜欢查询
李晓兵's avatar
李晓兵 committed
114 115
            }
          }, {enableHighAccuracy: true})
786817560's avatar
786817560 committed
116
        },
李晓兵's avatar
李晓兵 committed
117
        goFunctionHome (data) {
李晓兵's avatar
李晓兵 committed
118 119 120
          this.$router.push({
            name: data.functionState,
          })
786817560's avatar
786817560 committed
121
        },
李晓兵's avatar
李晓兵 committed
122
        goModuleFunction (data) {
李晓兵's avatar
李晓兵 committed
123 124 125
          this.$router.push({
            name: data.moduleState,
          })
786817560's avatar
786817560 committed
126
        },
李晓兵's avatar
李晓兵 committed
127
        location () {
李晓兵's avatar
李晓兵 committed
128 129 130 131 132 133 134
          this.$router.push({
            name: 'Location',
            params: {
              province: this.province,
              city: this.city,
            },
          })
786817560's avatar
786817560 committed
135
        },
李晓兵's avatar
李晓兵 committed
136
        // 用户信息查询
李晓兵's avatar
李晓兵 committed
137
        userQuery () {
李晓兵's avatar
李晓兵 committed
138 139 140 141 142 143 144 145 146 147 148 149
          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
150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167
            } 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
168 169 170
            }
          })
        },
李晓兵's avatar
李晓兵 committed
171
        // 进入产品明细
786817560's avatar
786817560 committed
172
        goProductDetail (list) {
李晓兵's avatar
李晓兵 committed
173 174 175 176
          this.$router.push({
            name: 'ProDetailed',
            params: {
              product_id: list.product_id,
786817560's avatar
786817560 committed
177
              bp_id: list.bp_id,
李晓兵's avatar
李晓兵 committed
178 179 180
            },
          })
        },
李晓兵's avatar
李晓兵 committed
181
      },
李晓兵's avatar
李晓兵 committed
182
}
786817560's avatar
786817560 committed
183
</script>
李晓兵's avatar
李晓兵 committed
184
<style lang='less'>
李晓兵's avatar
李晓兵 committed
185 186 187
  @import "../../styles/vue-1px";

  #homePage {
李晓兵's avatar
李晓兵 committed
188 189 190
    .content{
      background-color: #EFEFEF;
    }
李晓兵's avatar
李晓兵 committed
191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209
    .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
210 211
      overflow: hidden;
      text-overflow: ellipsis;
李晓兵's avatar
李晓兵 committed
212
    }
786817560's avatar
786817560 committed
213

李晓兵's avatar
李晓兵 committed
214 215 216
    .h-header .h-header-left .h-header-btn:first-of-type {
      padding-left: 0.2rem;
    }
786817560's avatar
786817560 committed
217

李晓兵's avatar
李晓兵 committed
218
    .functions {
李晓兵's avatar
李晓兵 committed
219 220
      height: 108px;
      width: 96%;
李晓兵's avatar
李晓兵 committed
221
      margin: -6px auto 10px;
李晓兵's avatar
李晓兵 committed
222
      border-radius: 10px;
李晓兵's avatar
李晓兵 committed
223 224 225 226
      background: #fff;
      padding-top: 10px;
      display: flex;
      justify-content: space-between;
786817560's avatar
786817560 committed
227

李晓兵's avatar
李晓兵 committed
228 229 230
      &:before {
        content: ''
      }
786817560's avatar
786817560 committed
231

李晓兵's avatar
李晓兵 committed
232 233
      &:after {
        content: ''
786817560's avatar
786817560 committed
234
      }
李晓兵's avatar
李晓兵 committed
235 236

      .function-item {
李晓兵's avatar
李晓兵 committed
237
        height: 100%;
786817560's avatar
786817560 committed
238
        display: flex;
李晓兵's avatar
李晓兵 committed
239 240
        flex-direction: column;
        justify-content: space-around;
786817560's avatar
786817560 committed
241
        align-items: center;
李晓兵's avatar
李晓兵 committed
242 243
        img{
         margin: 0;
786817560's avatar
786817560 committed
244
        }
李晓兵's avatar
李晓兵 committed
245 246 247 248 249 250
        div{
          margin-bottom: 14px;
          ont-family: PingFangSC-Regular;
          font-size: 13px;
          color: #3C3D48;
          letter-spacing: 0;
786817560's avatar
786817560 committed
251 252
        }
      }
李晓兵's avatar
李晓兵 committed
253

786817560's avatar
786817560 committed
254
    }
李晓兵's avatar
李晓兵 committed
255 256 257 258 259

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

786817560's avatar
786817560 committed
260
    .locations {
李晓兵's avatar
李晓兵 committed
261 262
      height: 24px;
      width: 24px;
786817560's avatar
786817560 committed
263
    }
李晓兵's avatar
李晓兵 committed
264

786817560's avatar
786817560 committed
265
    .hls-swipe {
李晓兵's avatar
李晓兵 committed
266 267
      width: 100vw;
      img {
786817560's avatar
786817560 committed
268
        width: 100vw;
李晓兵's avatar
李晓兵 committed
269
        // height: 100%;
786817560's avatar
786817560 committed
270
      }
李晓兵's avatar
李晓兵 committed
271 272 273 274 275 276 277 278 279 280 281 282
      .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
283
    }
786817560's avatar
786817560 committed
284

李晓兵's avatar
李晓兵 committed
285
    .center-pic {
李晓兵's avatar
李晓兵 committed
286
      margin-top: 10px;
李晓兵's avatar
李晓兵 committed
287 288 289
      width: 100%;
      display: flex;
      flex-direction: row;
李晓兵's avatar
李晓兵 committed
290
      padding: 0 1% 0 1%;
李晓兵's avatar
李晓兵 committed
291 292 293 294 295
      .left-pic {
        width: 41.6%;
        margin-left: 4px;

        img {
李晓兵's avatar
李晓兵 committed
296 297
          width: 100%;
          height: 100%;
786817560's avatar
786817560 committed
298 299
        }
      }
李晓兵's avatar
李晓兵 committed
300 301 302 303 304 305 306 307 308 309 310 311 312 313 314

      .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
315
      }
李晓兵's avatar
李晓兵 committed
316 317 318 319 320 321 322 323 324 325 326
    }

    .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
327 328
      height: 40px;
      padding-left: 2%;
李晓兵's avatar
李晓兵 committed
329 330 331
      span{
      padding-top: 2px;
      margin-left: 4px;
786817560's avatar
786817560 committed
332
      }
李晓兵's avatar
李晓兵 committed
333 334 335
      img{
        width: 14px;
        height: 14px;
786817560's avatar
786817560 committed
336
      }
李晓兵's avatar
李晓兵 committed
337
    }
李晓兵's avatar
李晓兵 committed
338 339 340 341 342 343 344 345
    .guessing-wrap{
      position: relative;
      width: 96%;
      margin: 0 auto;
      .hls-list-item{
        border-radius: 10px;
        .contents{
          padding: 8px 6px 8px 0;
李晓兵's avatar
李晓兵 committed
346 347 348
          .add-content{
            justify-content: flex-start;
          }
李晓兵's avatar
李晓兵 committed
349 350 351
        }
      }
    }
李晓兵's avatar
李晓兵 committed
352 353 354 355 356 357 358 359 360 361 362 363 364 365
    .item-pic {
      width: 110px;
      height: 110px;

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

    .item-content {
      .top {
        font-family: PingFangSC-Semibold;
        font-size: 16px;
李晓兵's avatar
李晓兵 committed
366 367
        color: #3B3B3B;
        letter-spacing: 0.54px;
李晓兵's avatar
李晓兵 committed
368
        margin-top: 10px;
李晓兵's avatar
李晓兵 committed
369 370 371 372 373 374 375
        font-weight: 600;
      }
      .hot {
        position: absolute;
        top: 0;
        right: 0;
        width: 45px;
786817560's avatar
786817560 committed
376
      }
李晓兵's avatar
李晓兵 committed
377 378
      .center {
        margin-top: 6px;
李晓兵's avatar
李晓兵 committed
379
        display: flex;
李晓兵's avatar
李晓兵 committed
380
        .firsts {
李晓兵's avatar
李晓兵 committed
381 382 383 384 385
          width: 66px;
          font-family: PingFangSC-Regular;
          font-size: 14px;
          color: rgba(56,63,69,0.60);
          letter-spacing: 0.5px;
李晓兵's avatar
李晓兵 committed
386 387 388
        }

        .seconds {
李晓兵's avatar
李晓兵 committed
389 390
          flex: 1;
          text-align: left;
李晓兵's avatar
李晓兵 committed
391 392
          font-weight: 600;
          font-family: PingFangSC-Semibold;
李晓兵's avatar
李晓兵 committed
393 394
          font-size: 14px;
          color: #4B4A4B;
李晓兵's avatar
李晓兵 committed
395 396 397 398 399
          letter-spacing: 0.5px;
        }
      }
    }
  }
786817560's avatar
786817560 committed
400
</style>