hlm_pl_mall_h5/pages/home/index/IndexMenu.vue

<template>
  <view class="div menu clear-fix">
    <view class="div menu-item" @click="goStoreclass">
      <view class="i iconfont"><image mode="aspectFit" class="img menu-item-icon" src="../../../static/image/home/icon_shop_classify_pre.png" /></view>
      <text class="span menu-item-title">店铺分类</text>
    </view>
    <view class="div menu-item" @click="goBrand">
      <view class="i iconfont"><image mode="aspectFit" class="img menu-item-icon" src="../../../static/image/home/icon_brand_name_pre.png" /></view>
      <text class="span menu-item-title">品牌</text>
    </view>
    <view class="div menu-item" @click="goPintuan">
      <view class="i iconfont"><image mode="aspectFit" class="img menu-item-icon" src="../../../static/image/home/icon_top_round_pre.png" /></view>
      <text class="span menu-item-title">拼团</text>
    </view>
    <view class="div menu-item" @click="goBargain">
      <view class="i iconfont"><image mode="aspectFit" class="img menu-item-icon" src="../../../static/image/home/icon_top_bargain_pre.png" /></view>
      <text class="span menu-item-title">砍价</text>
    </view>
    <view class="div menu-item" @click="goMemberPointSignin">
      <view class="i iconfont"><image mode="aspectFit" class="img menu-item-icon" src="../../../static/image/home/icon_top_signin_pre.png" /></view>
      <text class="span menu-item-title">签到</text>
    </view>
    <view class="div menu-item">
      <view class="i iconfont"><image mode="aspectFit" class="img menu-item-icon" @click="goNavigate('/pages/home/goodslist/Goodslist',{xianshi:1})" src="../../../static/image/home/icon_top_discount_pre.png" /></view>
      <text class="span menu-item-title">秒杀</text>
    </view>
    <view class="div menu-item" @click="goPointsgoods">
      <view class="i iconfont"><image mode="aspectFit" class="img menu-item-icon" src="../../../static/image/home/icon_top_cumulative_pre.png" /></view>
      <text class="span menu-item-title">积分商城</text>
    </view>
    <view class="div menu-item" @click="myOrder">
      <view class="i iconfont"><image mode="aspectFit" class="img menu-item-icon" src="../../../static/image/home/icon_top_order_pre.png" /></view>
      <text class="span menu-item-title">我的订单</text>
    </view>
<!--    <view class="div menu-item" @click="goArticleclass">
      <text class="i iconfont bg-4">&#xe674;</text>
      <text class="span menu-item-title">帮助中心</text>
    </view>
    <view class="div menu-item" @click="goMemberIndex">
      <text class="i iconfont bg-2">&#xe68c;</text>
      <text class="span menu-item-title">个人中心</text>
    </view>-->
    <view class="div menu-item" @click="goGroupBuy">
      <view class="i iconfont"><image mode="aspectFit" class="img menu-item-icon" src="../../../static/image/home/icon_top_knock_pre.png" /></view>
      <text class="span menu-item-title">抢购</text>
    </view>
    <view class="div menu-item" @click="goPresell">
      <view class="i iconfont"><image mode="aspectFit" class="img menu-item-icon" src="../../../static/image/home/icon_top_yushou_pre.png" /></view>
      <text class="span menu-item-title">预售</text>
    </view>
    <view class="div menu-item"  v-for="(item, index) in navs" :key="index" @click="goAdUrl(item)">
      <view class="i iconfont"><image mode="aspectFit" class="img menu-item-icon" :src="item.adv_code" /></view>
      <text class="span menu-item-title">{{item.adv_title}}</text>
    </view>
  </view>
</template>

<script>
import { urlencode } from '@/util/common'
import { mapState } from 'vuex'

export default {
  name:'HomeMenu',
  props: ['items'],
  computed: {
    ...mapState({
      isOnline: state => state.member.isOnline,
      navs: state => state.home.navs
    })
  },
  methods:{
    goNavigate(path,query=false){
      uni.navigateTo({url:path+(query?('?'+urlencode(query)):'')})
    },

    showLogin () {
      uni.navigateTo({ url: '/pages/home/memberlogin/Login' })
    },
    goPointsgoods () {
      uni.navigateTo({ url: '/pages/home/pointsgoods/Index' })
    },
    goStoreclass () {
      uni.navigateTo({ url: '/pages/home/storeclass/Storeclass' })
    },
    goPintuan () {
      uni.navigateTo({ url: '/pages/home/pintuan/PintuanList' })
    },
    goBargain () {
      uni.navigateTo({ url: '/pages/home/bargain/Bargainlist' })
    },
    goBrand () {
      uni.navigateTo({ url: '/pages/home/brand/Brand' })
    },
    goArticleclass () {
      uni.navigateTo({ url: '/pages/home/article/Articleclass' })
    },
    goMemberIndex () {
      uni.navigateTo({ url: '/pages/member/index/Index' })
    },
    goGroupBuy () {
      uni.navigateTo({ url: '/pages/home/groupbuy/GroupBuyList' })
    },
    goPresell () {
      uni.navigateTo({ url: '/pages/home/presell/PresellList' })
    },
    goMemberPointSignin () {
      uni.navigateTo({ url: '/pages/member/point/PointSignin' })
    },
    myOrder () {
      if (this.isOnline) {
        uni.navigateTo({ url: '/pages/member/order/OrderList'
        })
      } else {
        this.showLogin()
      }
    },
    goAdUrl (item) {
      uni.navigateTo({url:item.adv_typedate})
    }
  }
}
</script>

<style lang="scss" scoped>

  .menu {
    overflow: hidden;
    justify-content: space-around;
    background: #FFFFFF;
    box-sizing: border-box;
    padding-left:.7rem;
    padding-right:.7rem;
    margin-bottom:$modelSpace;
    .menu-item {
      width:20%;
      padding:0 .7rem;
      padding-bottom:20%;
      height: 0;
      box-sizing: border-box;
      text-align:center;
      position: relative;
      float: left;
      .iconfont{
        position: absolute;
        margin:auto;
        top: 0;
        bottom:1.4rem;
        left:.7rem;
        right:.7rem;
        font-size:0;
        color:#fff;
        overflow: hidden;
        display:block;
        text-align: center;
      }
      .menu-item-icon {
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
      .menu-item-title {
        position: absolute;
        left:0;
        right:0;
        bottom:.6rem;
        display:block;
        color: $formInputColor;
        font-size:$fontSize;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
  .bg-1{background-image: linear-gradient(to bottom , #d69dcc,#e8198b );}
  .bg-2{background-image: linear-gradient(to bottom , #04befe,#4481eb );}
  .bg-3{background-image: linear-gradient(to bottom , #cc208e,#6713d2 );}
  .bg-4{background-image: linear-gradient(to bottom , #ff9a44,#fc6076 );}
  .bg-5{background-image: linear-gradient(to bottom , #00ecbc,#007adf );}
  .bg-6{background-image: linear-gradient(to bottom , #ff8177,#b12a5b );}
</style>