vue项目shop（three）

vue-shop（three）

---

商品分类导航功能的实现

主页面商品分类导航功能，将商品进行分类，便于用户检索查询。用户移动到商品分类时候会弹出商品子类的内容，移出则消失。商品分类的目的就是为了使得商品的管理更加的方便。

。

---

一、实现步骤

首先呢在vuews/index文件夹下创建Menu.vue文件。在template标签中通过li标签显示商品信息，通过触发mouseover事件和mouseout事件执行方法。

<template>
  <div>
      <!--侧边导航 -->
      <div id="nav" class="navfull">
        <div class="area clearfix">
          <div class="category-content" id="guide_2">
            <div class="category">
              <ul class="category-list" id="js_climit_li">
                <li class="appliance js_toggle relative" v-for="(v,i) in data" :key="i" @mouseover="mouseOver(i)" @mouseout="mouseOut(i)">
                  <div class="category-info">
                    <h3 class="category-name b-category-name"><i><img :src="v.url"></i><a class="ml-22" :title="v.bigtype">{{v.bigtype}}</a></h3>
                    <em>&gt;</em></div>
                  <div class="menu-item menu-in top" >
                    <div class="area-in">
                      <div class="area-bg">
                        <div class="menu-srot">
                          <div class="sort-side">
                            <dl class="dl-sort" v-for="v in v.smalltype" :key="v">
                              <dt><span >{{v.name}}</span></dt>
                              <dd v-for="v in v.goods" :key="v"><a href="javascript:void(0)"><span>{{v}}</span></a></dd>
                            </dl>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <b class="arrow"></b>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>

      <!--小导航 -->
      <div class="mr-g mr-g-fixed smallnav">
        <div class="mr-u-sm-3">
          <a href="javascript:void(0)"><img src="@/assets/images/navsmall.jpg"/>
            <div class="title">商品分类</div>
          </a>
        </div>
        <div class="mr-u-sm-3">
          <a href="javascript:void(0)"><img src="@/assets/images/huismall.jpg"/>
            <div class="title">大聚惠</div>
          </a>
        </div>
        <div class="mr-u-sm-3">
          <a href="javascript:void(0)"><img src="@/assets/images/mansmall.jpg"/>

            <div class="title">个人中心</div>
          </a>
        </div>
        <div class="mr-u-sm-3">
          <a href="javascript:void(0)"><img src="@/assets/images/moneysmall.jpg"/>
            <div class="title">投资理财</div>
          </a>
        </div>
      </div>

      <!--走马灯 -->

      <div class="marqueen">
        <span class="marqueen-title">商城头条</span>
        <div class="demo">
          <ul>
            <div class="mod-vip">
              <div class="m-baseinfo">
                <a href="javascript:void(0)">
                  <img src="@/assets/images/getAvatar.do.jpg">
                </a>
                <em>
                  Hi,<span class="s-name">小叮当</span>
                  <a href="javascript:void(0)"><p>点击更多优惠活动</p></a>
                </em>
              </div>
              <div class="member-logout">
                <a class="mr-btn-warning btn" href="javascript:void(0)" @click="show('login')">登录</a>
                <a class="mr-btn-warning btn" href="javascript:void(0)" @click="show('register')">注册</a>
              </div>
              <div class="member-login">
                <a href="javascript:void(0)"><strong>0</strong>待收货</a>
                <a href="javascript:void(0)"><strong>0</strong>待发货</a>
                <a href="javascript:void(0)"><strong>0</strong>待付款</a>
                <a href="javascript:void(0)"><strong>0</strong>待评价</a>
              </div>
              <div class="clear"></div>
            </div>
            <li class="title-first"><a href="javascript:void(0)">
              <span>[特惠]</span>商城爆品1分秒杀
            </a></li>
            <li class="title-first"><a target="_blank" href="javascript:void(0)">
              <span>[公告]</span>商城与长春市签署战略合作协议
            </a></li>
            <li><a target="_blank" href="javascript:void(0)"><span>[特惠]</span>洋河年末大促，低至两件五折</a></li>
            <li><a target="_blank" href="javascript:void(0)"><span>[公告]</span>华北、华中部分地区配送延迟</a></li>
            <li><a target="_blank" href="javascript:void(0)"><span>[特惠]</span>家电狂欢千亿礼券 买1送1！</a></li>
          </ul>
          <div class="advTip"><img src="@/assets/images/advTip.jpg"/></div>
        </div>
      </div>
      <div class="clear"></div>
    </div>
</template>

<script>
import data from '@/assets/js/data.js';//导入数据
export default {
	name: 'menu',
	data: function(){
		return {
			data: data
		}
	},
	methods: {
		mouseOver: function (i){
			var obj=document.getElementsByClassName('appliance')[i];
			obj.className="appliance js_toggle relative hover";   //设置当前事件对象样式
			var menu=obj.childNodes;            //寻找该事件子节点（商品子类别）
			menu[1].style.display='block';           //设置子节点显示
		},
		mouseOut: function (i){
			var obj=document.getElementsByClassName('appliance')[i];
			obj.className="appliance js_toggle relative";  //设置当前事件对象样式
			var menu=obj.childNodes;         //寻找该事件子节点（商品子类别）
			menu[1].style.display='none';      //设置子节点隐藏
        },
        show: function (value) {
          this.$router.push({name:value})
        }
	}
}
</script>

在script标签中编写了鼠标的移出执行的事件通过对mouseOver方法和mouseOut方法的运用。以mouseOver方法为例在鼠标移入的时候获取事件对象obj设置对象的样式，找到子类信息节点。将内容显示到页面

二、轮播图功能的实现

记得刚开始学习html的时候怎么说呢那个时候真的什么都不会呢写起来也是东拼西凑的写代码，虽然写的如同垃圾一般，确实如同垃圾。但是现在好点了起码比垃圾要强一点。
轮播图根据固定的时间节点、间隔动态的显示或者隐藏照片，从而引起用户的注意和关注。其实细心的小伙伴可以发现大网站的页面都少不了轮播图。包括视屏也好。所以轮播图真的非常的吸引我们。
下面呢我们在vuews/index文件夹下创建Banner.vue应用v-for和transition-group组件实现列表过度。在li标签中应用v-for指令定义轮播的顺序节点。

<template>
  <div class="banner">
    <div class="mr-slider mr-slider-default scoll" data-mr-flexslider id="demo-slider-0">
      <div id="box">
        <ul id="imagesUI" class="list">
          <transition-group name="fade" tag="div">
          <li v-for="(v,i) in banners" :key="v" v-show="(i+1)==index?true:false"><img :src="v"></li>
          </transition-group>
        </ul>
        <ul id="btnUI" class="count">
          <li v-for="num in 4" :key="num" @mouseover='change(num)' :class='{current:num==index}'>
            {{num}}
          </li>
        </ul>
      </div>
    </div>
    <div class="clear"></div>
  </div>
</template>

<script>
export default {
  name: 'banner',
  data : function(){
    return {
      banners : [//广告图片数组
          require('@/assets/images/ad1.png'),
          require('@/assets/images/ad2.png'),
          require('@/assets/images/ad3.png'),
          require('@/assets/images/ad4.png')
      ],
      index : 1,// 图片的索引
      flag : true,
      timer : '',// 定时器ID
    }
  },
  methods : {
    next : function(){
      // 下一张图片，图片索引为4时返回第一张
      this.index = this.index + 1 == 5 ? 1 : this.index + 1;
    },
    change : function(num){
      // 鼠标移入按钮切换到对应图片
      if(this.flag){
        this.flag = false;
        // 过1秒钟后可以再次移入按钮切换图片
        setTimeout(()=>{
          this.flag = true;
        },1000);
        this.index = num;// 切换为选中的图片
        clearTimeout(this.timer);// 取消定时器
        // 过3秒钟图片轮换
        this.timer = setInterval(this.next,3000);
      }
    }
  },
  mounted : function(){
    // 过3秒钟图片轮换
    this.timer = setInterval(this.next,3000);
  }

}
</script>
<style lang="scss" scoped>
  #box {
    position: relative;
    width: 100%;
    height: 455px;
    background: #fff;
    border-radius: 5px;
  }

  #box .list {
    position: relative;
    height: 455px;
  }
  @media only screen and (min-width: 1450px){
    #box .list li {
      width: 50%;
      height: 50%;
      margin: auto;
      margin-top: 0px;
      position: absolute;
      top: 0; left: 0; bottom: 0; right: 0;
    }
    #box .count {
      position: absolute;
      left: 900px;
      bottom: 5px;
    }

  }

  @media  screen and (min-width: 800px) and (max-width: 1450px){
    #box .list li {
      width: 50%;
      height: 50%;
      margin: auto;
      margin-top: 0px;
      position: absolute;
      top: 0; left: -100px; bottom: 0; right: 0;
    }
    #box .list li img{
      width: 120%;
    }
    #box .count {
      position: absolute;
      left: 700px;
      bottom: 5px;
    }
  }

  @media  screen and (max-width: 400px){
    #box{
      display: none;
    }

  }

  #box .list li.current {
    opacity: 1;
  }

  #box .count li {
    color: #fff;
    float: left;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    cursor: pointer;
    margin-right: 5px;
    overflow: hidden;
    background: #6D6B6A;
    opacity: 0.7;
    border-radius: 20px;
  }

  #box .count li.current {
    color: #fff;
    opacity: 0.7;
    font-weight: 700;
    background: #f60;
    transition:all .6s ease;
  }
  /* 设置过渡属性 */
  .fade-enter-active, .fade-leave-active{
    transition: all 1s;
  }
  .fade-enter, .fade-leave-to{
    opacity: 0;
  }
</style>

在script标签中编写实现轮播的代码在mounted钩子函数中定义每经过3秒实现图片的轮换。在change方法中实现鼠标移出按键时的图片

三、商品推荐功能的实现。

商品推荐的话主要是以促销的方式进行的。通过动态的显示推荐商品信息。包括缩略图、价格和打折等。通过商品推荐功能，还能将众多商品信息精挑洗选，提高销量。
创建Phone.vue文件在template中编写html的布局使用v-for循环品牌和核数。通过div显示具体的内容。

<template>
  <!--手机-->
  <div id="f1">
    <div class="mr-container ">
      <div class="shopTitle ">
        <h4>手机</h4>
        <h3>手机风暴</h3>
        <div class="today-brands ">
          <a href="javascript:void(0)" v-for="item in brands" :key="item">{{item}}</a>
        </div>
        <span class="more ">
          <a href="javascript:void(0)">更多手机<i class="mr-icon-angle-right" style="padding-left:10px ;"></i></a>
        </span>
      </div>
    </div>
    <div class="mr-g mr-g-fixed floodFive ">
      <div class="mr-u-sm-5 mr-u-md-3 text-one list">
        <div class="word">
          <a class="outer" href="javascript:void(0)" v-for="item in cores" :key="item">
            <span class="inner"><b class="text">{{item}}</b></span>
          </a>
        </div>
        <a href="javascript:void(0)">
          <img src="@/assets/images/tel.png" width="100px" height="170px"/>
          <div class="outer-con ">
            <div class="title ">
              免费领30天碎屏险
            </div>
            <div class="sub-title ">
              颜值之星，双摄之星
            </div>
          </div>
        </a>
        <div class="triangle-topright"></div>
      </div>
      <div class="mr-u-sm-7 mr-u-md-5 mr-u-lg-2 text-two">
        <div class="outer-con ">
          <div class="title ">
            荣耀8
          </div>
          <div class="sub-title ">
            ¥5888.00
          </div>
          <i class="mr-icon-shopping-basket mr-icon-md  seprate"></i>
        </div>
        <a href="javascript:void(0)" @click="show"><img src="@/assets/images/phone1.jpg"/></a>
      </div>
      <div class="mr-u-md-2 mr-u-lg-2 text-three sug">
        <div class="outer-con ">
          <div class="title ">
            一加手机
          </div>
          <div class="sub-title ">
            ¥2499.00
          </div>
          <i class="mr-icon-shopping-basket mr-icon-md  seprate"></i>
        </div>
        <a href="javascript:void(0)" @click="show"><img src="@/assets/images/phone2.jpg"></a>
      </div>
      <div class="mr-u-md-2 mr-u-lg-2 text-three big">
        <div class="outer-con ">
          <div class="title ">
            红米
          </div>
          <div class="sub-title ">
            ¥1199.00
          </div>
          <i class="mr-icon-shopping-basket mr-icon-md  seprate"></i>
        </div>
        <a href="javascript:void(0)" @click="show"><img src="@/assets/images/phone5.jpg"></a>
      </div>
      <div class="mr-u-sm-4 mr-u-md-5 mr-u-lg-4 text-five">
        <div class="outer-con ">
          <div class="title ">
            LG G5
          </div>
          <div class="sub-title ">
            ¥2999.00
          </div>
          <i class="mr-icon-shopping-basket mr-icon-md  seprate"></i>
        </div>
        <a href="javascript:void(0)" @click="show"><img src="@/assets/images/phone3.jpg"></a>
      </div>
      <div class="mr-u-sm-4 mr-u-md-2 mr-u-lg-2 text-six">
        <div class="outer-con ">
          <div class="title ">
            苹果4s手机
          </div>
          <div class="sub-title ">
            ¥2099.00
          </div>
          <i class="mr-icon-shopping-basket mr-icon-md  seprate"></i>
        </div>
        <a href="javascript:void(0)" @click="show"><img src="@/assets/images/phone4.jpg"></a>
      </div>
      <div class="mr-u-sm-4 mr-u-md-2 mr-u-lg-4 text-six big">
        <div class="outer-con ">
          <div class="title ">
            魅族 魅蓝
          </div>
          <div class="sub-title ">
            ¥999.00
          </div>
          <i class="mr-icon-shopping-basket mr-icon-md  seprate"></i>
        </div>
        <a href="javascript:void(0)" @click="show"><img src="@/assets/images/phone5.jpg"></a>
      </div>
    </div>
    <div class="clear "></div>
  </div>
</template>
<script>
  export default {
    name: 'phone',
    data: function(){
      return {
        //手机品牌数组
        brands: ['小米','荣耀','乐视','魅族','联想','OPPO'],
        //手机核数数组
        cores: ['十核','八核','双四核','四核','双核','单核']
      }
    },
    methods: {
      show: function () {
        this.$router.push({name:'shopinfo'});//跳转到商品详情页面
      }
    }
  }
</script>

总结

暂无