home-page.vue

<!--
   * @Descrip: 主页
 * @Author: your name
 * @Date: 2019-10-10 14:25:15
 * @LastEditTime: 2019-10-16 12:42:19
 * @LastEditors: Please set LastEditors
   -->
<template>
  <h-view id="homePage" class="public-style" title="徐工租赁">
    <h-header :proportion="[7,9,0]" class="bar-custom">
      <div slot="left" class="h-header-btn">
        <!-- <i class="ion-ios-arrow-back" /> -->
        <img class="locations" src="@/assets/homePage/location.png" alt="" @click="location">
        <span class="home-city">{{ city }}</span>
      </div>
      <div slot="center" @click="getLocation">徐工租赁</div>
    </h-header>
    <h-content>
      <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>
      <div class="functions">
        <function-item
          v-for="item in moduleSeparateList.slice(0,4)" :key="item.moduleId" :functionIcon="item.moduleIcon"
          :functionName="item.moduleName"
          :data="item" @clickFunction="goModuleFunction"/>
      </div>

      <!--  <div class="middle-box">
        <header>常用应用</header>
        <div class="function">
          <function-item
            v-for="(item,index) in functionList" :key="index" :functionIcon="item.functionIcon"
            :functionName="item.functionName"
            :data="item" class="function-item vue-1px" @clickFunction="goFunctionHome"/>
        </div>
      </div>-->
      <div class="center-pic">
        <div class="left-pic">
          <img src="@/assets/homePage/1 copy@2x.png" alt="">
        </div>
        <div class="right-pic">
          <img src="@/assets/homePage/2 copy@2x.png" alt="">
          <img src="@/assets/homePage/3 copy@2x.png" alt="">
        </div>
      </div>
      <div class="guessing">猜你喜欢</div>
      <list-item :item-height="110">
        <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">***起重机 <span class="hot">热门</span></div>
            <div class="center"> <span class="firsts">经销商</span> <span class="seconds">xxx代理商</span></div>
            <div class="center"> <span class="firsts">参数项</span> <span class="seconds">GTZ226</span></div>
            <div class="center"> <span class="firsts">地址</span> <span class="seconds">江苏省徐州市云龙区</span></div>
          </div>
        </item>
        <item>
          <div slot="name" class="item-pic">
            <img src="@/assets/homePage/WechatIMG3 Copy@2x.png" alt="">
          </div>
          <div slot="content" class="item-content">
            <div class="top">***起重机 <span class="hot">热门</span></div>
            <div class="center"> <span class="firsts">经销商</span> <span class="seconds">xxx代理商</span></div>
            <div class="center"> <span class="firsts">参数项</span> <span class="seconds">GTZ226</span></div>
            <div class="center"> <span class="firsts">地址</span> <span class="seconds">江苏省徐州市云龙区</span></div>
          </div>
        </item>
      </list-item>
      <div class="bank" style="height: 60px;width: 100%"/>
    </h-content>
  </h-view>
</template>
<script>
import functionState from './functionState'
export default {
  name: 'HomePage',
  data () {
    return {
      city: '',
      province: '',
      user_bp_status: '',
      user_bp_class: '',
      bp_id: '',
      moduleSeparateList: [],
      functionList: [
        {
          functionIcon: require('@/assets/userBind/np.png'),
          functionName: '用户绑定',
          functionState: 'UserBind',
        },
        {
          functionIcon: require('@/assets/intoApproval/introduce.png'),
          functionName: '进件审批',
          functionState: 'IntoList',
        },
        {
          functionIcon: require('@/assets/intoApproval/introduce.png'),
          functionName: '经销商签约',
          functionState: 'ContractList',
        },
        {
          functionIcon: require('@/assets/intoApproval/introduce.png'),
          functionName: '合同签约',
          functionState: 'ContractSigning',
        },
      ],
    }
  },
  computed: {},
  watch: {},
  created () {
    this.getLocation()
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      // if (from.name === 'Login') {
      vm.moduleSeparateList = [...functionState.moduleSeparateList]
      vm.userQuery()
    //  }
    })
  },
  methods:
 {
   // 定位
   getLocation () {
     let vm = this
     var geolocation = new BMap.Geolocation()
     geolocation.getCurrentPosition(function (res) {
       //  debugger
       if (this.getStatus() === 0) {
         console.log('定位。。。。', res.address)
         // 判断是否是手动选择过定位
         if (window.localStorage.getItem('province')) {
           console.log('ssss', window.localStorage.getItem('province'))
           vm.city = window.localStorage.getItem('city')
           vm.province = window.localStorage.getItem('province')
         } else {
           // 没有就定位当前位置
           vm.city = res.address.city
           vm.province = res.address.province
         }
       }
     }, {enableHighAccuracy: true})
   },
   goFunctionHome (data) {
     this.$router.push({
       name: data.functionState,
     })
     /* if (data.functionState === 'NaturePersonReadOnly') {
       if (this.user_bp_status !== 'APPROVING' && this.user_bp_class === 'NP') {
         this.$router.push({
           name: 'NaturePersonReadOnly',
           params: {
             'bp_id': this.bp_id,
           },
         })
       } else if (this.user_bp_status !== 'APPROVING' && this.user_bp_class === 'ORG') {
         this.$router.push({
           name: 'EnterpriseReadOnly',
           params: {
             'bp_id': this.bp_id,
           },
         })
       } else {
         this.hlsPopup.showLongCenter('您的绑定申请还在流程中')
       }
     } else {
       this.$router.push({
         name: data.functionState,
       })
     } */
   },
   goModuleFunction (data) {
     this.$router.push({
       name: data.moduleState,
     })
   },
   location () {
     this.$router.push({
       name: 'Location',
       params: {
         province: this.province,
         city: this.city,
       },
     })
   },
   // 用户信息查询
   userQuery () {
     let vm = this
     let url = $config.basePath + 'user_query'
     let param = {
       'phone': window.localStorage.getItem('user_phone'),
     }
     vm.$post(url, param).then(function (res) {
       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
       }
     })
   },
 },
}
</script>
<style lang='less' scoped>
@import "../../styles/vue-1px";
#homePage {
  .home-city {
    white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
  }
  .h-header .h-header-left .h-header-btn:first-of-type {
    padding-left: 0.2rem;
}
.functions {
        height: 82px;
        width: 100%;
        background: #fff;
         padding-top: 10px;
        display: flex;
        justify-content: space-between;

        &:before {
          content: ''
        }

        &:after {
          content: ''
        }

        .function-item {
          text-align: center;
        }

      }
.middle-box {
      margin-top: 8px;
      background: white;

      header {
        height: 33px;
        display: flex;
        align-items: center;
        line-height: 100%;
        color: #5D98F6;
        position: relative;

        &:before {
          content: '';
          width: 4px;
          height: 15px;
          margin-right: 9px;
          margin-left: 10px;
          background-image: linear-gradient(-180deg, #5D98F6 0%, #76BCEE 100%);
          border-radius: 2px;
        }

        &:after {
          .setBottomLine()
        }

        span {
          font-size: 12px;
          color: #878A8D;
          position: absolute;
          right: 15px;
        }
      }
      .function{
        display: flex;
        flex-wrap: wrap;

        .function-item {
          width: 25%;
          height: 89px;
          font-size: 12px;
          // border: 1px solid rgba(169,169,169,0.1); /*no*/
          /deep/ img {
            height: 30px;
            width: 30px;
            margin: 23px 28px 9px 33px;
          }

          &:before {
            .setBottomLine();
          }

          &:after {
            .setRightLine();
          }
        }
      }
    }
.h-header .h-header-center div{
  text-align: left!important;
}
    .locations {
        height: 24px;
        width: 24px;
    }
    .hls-swipe {
        // height: 208px;
        width: 100vw;
        // overflow: hidden;
        img {
            width: 100vw;
            // height: 100%;
        }
      }
    .function{
        display: flex;
        flex-wrap: wrap;

        .function-item {
          width: 25%;
          height: 89px;
          font-size: 12px;
          // border: 1px solid rgba(169,169,169,0.1); /*no*/
          /deep/ img {
            height: 30px;
            width: 30px;
            margin: 23px 28px 9px 33px;
          }

        //   &:before {
        //     .setBottomLine();
        //   }

        //   &:after {
        //     .setRightLine();
        //   }
        }
      }
      .center-pic {
        margin-top: 6px;
        //   position: relative;
          width: 100%;
        //   height: 228px;
        //   overflow: hidden;
          display: flex;
          flex-direction: row;
          .left-pic {
              width: 41.6%;
              margin-left: 4px;
              img {
                   max-width: 100%;
                   height: auto;
              }
          }
          .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;
              }
          }
      }
      .guessing {
        //   width: 67px;
          height: 22px;
          font-family: PingFangSC-Semibold;
          font-size: 16px;
          color: #00469C;
          font-weight: 600;
          letter-spacing: 0.57px;
          padding: 8px 0 8px 12px;
          background: #fff;
          box-sizing:content-box
      }
      .item-pic {
          width: 110px;
          height: 110px;
          img {
              width: 100%;
              height: 100%;
          }
      }
      .item-content {
          // width: 90%;
          height: 110px;
        //   border: 1px solid #ccc;
          .top {
            font-family: PingFangSC-Semibold;
            font-size: 16px;
            color: #00469C;
            letter-spacing: 0.57px;
            font-weight: 600;
            margin-top: 10px;
            .hot {
                display: inline-block;
                height: 14px;
                line-height: 14px;
                // width: 32px;
                border: 1px solid #FF8214;
                border-radius: 2px;
                font-family: PingFangSC-Semibold;
                font-size: 11px;
                color: #FF8214;
                letter-spacing: 0.46px;
                margin-left: 6px;
            }
          }
          .center {
              margin-top: 6px;
              font-family: PingFangSC-Semibold;
              font-size: 13px;
              color: rgba(56,63,69,0.60);
              letter-spacing: 0.5px;
              .firsts {
                  display: inline-block;
                  width: 44px;
              }
              .seconds {
                  margin-left: 16px;
                  font-weight: 600;
                  font-family: PingFangSC-Semibold;
                  font-size: 13px;
                  color: #383F45;
                  letter-spacing: 0.5px;
              }
          }
      }
}
</style>