vue-shop项目（ four）

vue-shop项目（ four）

---

商品详情页面的设计与实现

商品的详细页面是商城的主页的子页面。用户单击主页面中的某一个页面后进入商品的详情页面，对于用户而言详情页面至关重要，详情页面可以直接影响用户的购买意愿。为此对商城设计并实现了一系列的功能，放大效果、商品的概要信息、宝贝的详情和评价等方便用户的消费决策。

---

一、、图片的放大效果的实现

在views/shopinfo文件夹下新建Enlarge.vue 在template中定义商品的照片图片的放大工具、缩略图，通过商品照片触发mousenteer事件、mouseleavee事件赫尔mousemove事件执行相应的方法。
在script标签中编写鼠标在商品图片上移入移出时所执行的方法。在mouseEnter方法中是指放大的工具赫尔放大的图片显示；在mouseLeave中设置图片放大工具和图片的隐藏；在mouseMove通过元素的定位属性设置图片放大工具和放大的图片位置实现放大效果。

<template>
      <div class="clearfixLeft" id="clearcontent">
        <div class="box">
          <div class="enlarge" @mouseenter="mouseEnter" @mouseleave="mouseLeave" @mousemove="mouseMove">
            <img :src="bigImgUrl[n]" title="细节展示放大镜特效">
            <span class="tool"></span>
            <div class="bigbox">
              <img :src="bigImgUrl[n]" class="bigimg">
            </div>
          </div>
          <ul class="tb-thumb" id="thumblist">
            <li :class="{selected:n == index}" v-for="(item,index) in smallImgUrl" :key="index" @mouseover="setIndex(index)">
              <div class="tb-pic tb-s40">
                <a href="javascript:void(0)"><img :src="item"></a>
              </div>
            </li>
          </ul>
        </div>
        <div class="clear"></div>
      </div>
</template>

<script>
  export default {
    data: function(){
      return {
        n: 0,//缩略图索引
        smallImgUrl: [//缩略图数组
          require('@/assets/images/01_small.jpg'),
          require('@/assets/images/02_small.jpg'),
          require('@/assets/images/03_small.jpg')
        ],
        bigImgUrl: [//商品图片数组
          require('@/assets/images/01.jpg'),
          require('@/assets/images/02.jpg'),
          require('@/assets/images/03.jpg')
        ]
      }
    },
    methods: {
      mouseEnter: function () {//鼠标进入图片的效果
        document.querySelector('.tool').style.display='block';
        document.querySelector('.bigbox').style.display='block';
      },
      mouseLeave: function () {//鼠标移出图片的效果
        document.querySelector('.tool').style.display='none';
        document.querySelector('.bigbox').style.display='none';
      },
      mouseMove: function (e) {
        var enlarge=document.querySelector('.enlarge');
        var tool=document.querySelector('.tool');
        var bigimg=document.querySelector('.bigimg');
        var ev=window.event || e;//获取事件对象
        //获取图片放大工具到商品图片左端距离
        var x=ev.clientX-enlarge.offsetLeft-tool.offsetWidth/2+document.documentElement.scrollLeft;
        //获取图片放大工具到商品图片顶端距离
        var y=ev.clientY-enlarge.offsetTop-tool.offsetHeight/2+document.documentElement.scrollTop;
        if(x<0) x=0;
        if(y<0) y=0;
        if(x>enlarge.offsetWidth-tool.offsetWidth){
          x=enlarge.offsetWidth-tool.offsetWidth;//图片放大工具到商品图片左端最大距离
        }
        if(y>enlarge.offsetHeight-tool.offsetHeight){
          y=enlarge.offsetHeight-tool.offsetHeight;//图片放大工具到商品图片顶端最大距离
        }
        //设置图片放大工具定位
        tool.style.left = x+'px';
        tool.style.top = y+'px';
        //设置放大图片定位
        bigimg.style.left = -x * 2+'px';
        bigimg.style.top = -y * 2+'px';
      },
      setIndex: function (index) {
        this.n=index;//设置缩略图索引
      }
    }
  }
</script>
<style src="@/assets/css/optstyle.css" scoped></style>
<style src="@/assets/css/infoStyle.css" scoped></style>
<style scoped>
  .enlarge{
    border:1px solid #CDCDCD;
    position:relative;
    width: 400px;
    height: 400px;
  }
  .tool{
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 200px;
    background: goldenrod;
    opacity: 0.6;
    cursor: move;
  }
  .bigbox{
    width:400px;
    height:400px;
    overflow:hidden;
    position:absolute;
    top: 0;
    left: 410px;
    z-index:1;
    display: none;
  }
  .bigbox img{
    width: 800px;
    height: 800px;
    position: absolute;
    top: 0;
    left: 0;
  }
</style>

二、商品概要功能的实现

商品概要功能，包含商品的名称、价格、和配送地址等信息。用户快速阅览商品的基本信息可以了解销量等问题。方便用户快速决策，节省浏览时间。

<template>
  <div>
    <ol class="mr-breadcrumb mr-breadcrumb-slash">
      <li><a href="javascript:void(0)">首页</a></li>
      <li><a href="javascript:void(0)">分类</a></li>
      <li class="mr-active">内容</li>
    </ol>

    <div class="scoll">
      <section class="slider">
        <div class="flexslider">
          <ul class="slides">
            <li>
              <img src="@/assets/images/01.jpg" title="pic">
            </li>
            <li>
              <img src="@/assets/images/02.jpg">
            </li>
            <li>
              <img src="@/assets/images/03.jpg">
            </li>
          </ul>
        </div>
      </section>
    </div>

    <!--放大镜-->

    <div class="item-inform">
      <Enlarge/>

      <div class="clearfixRight">

        <!--规格属性-->
        <!--名称-->
        <div class="tb-detail-hd">
          <h1>
            {{goodsInfo.name}}
          </h1>
        </div>
        <div class="tb-detail-list">
          <!--价格-->
          <div class="tb-detail-price">
            <li class="price iteminfo_price">
              <dt>促销价</dt>
              <dd><em>¥</em><b class="sys_item_price">{{goodsInfo.unitPrice | formatPrice}}</b></dd>
            </li>
            <li class="price iteminfo_mktprice">
              <dt>原价</dt>
              <dd><em>¥</em><b class="sys_item_mktprice">599.00</b></dd>
            </li>
            <div class="clear"></div>
          </div>

          <!--地址-->
          <dl class="iteminfo_parameter freight">
            <dt>配送至</dt>
            <div class="iteminfo_freprice">
              <div class="mr-form-content address">
                <select data-mr-selected>
                  <option value="a">浙江省</option>
                  <option value="b">吉林省</option>
                </select>
                <select data-mr-selected>
                  <option value="a">温州市</option>
                  <option value="b">长春市</option>
                </select>
                <select data-mr-selected>
                  <option value="a">瑞安区</option>
                  <option value="b">南关区</option>
                </select>
              </div>
              <div class="pay-logis">
                快递<b class="sys_item_freprice">10</b>元
              </div>
            </div>
          </dl>
          <div class="clear"></div>

          <!--销量-->
          <ul class="tm-ind-panel">
            <li class="tm-ind-item tm-ind-sellCount canClick">
              <div class="tm-indcon"><span class="tm-label">月销量</span><span class="tm-count">1015</span></div>
            </li>
            <li class="tm-ind-item tm-ind-sumCount canClick">
              <div class="tm-indcon"><span class="tm-label">累计销量</span><span class="tm-count">6015</span></div>
            </li>
            <li class="tm-ind-item tm-ind-reviewCount canClick tm-line3">
              <div class="tm-indcon"><span class="tm-label">累计评价</span><span class="tm-count">640</span></div>
            </li>
          </ul>
          <div class="clear"></div>

          <!--各种规格-->
          <dl class="iteminfo_parameter sys_item_specpara">
            <dt class="theme-login">
              <div class="cart-title">可选规格<span class="mr-icon-angle-right"></span></div>
            </dt>
            <dd>
              <!--操作页面-->

              <div class="theme-popover-mask"></div>

              <div class="theme-popover">
                <div class="theme-span"></div>
                <div class="theme-poptit">
                  <a href="javascript:;" title="关闭" class="close">×</a>
                </div>
                <div class="theme-popbod dform">
                  <form class="theme-signin" name="loginform" action="" method="post">

                    <div class="theme-signin-left">

                      <div class="theme-options">
                        <div class="cart-title">颜色</div>
                        <ul>
                          <li class="sku-line selected">荣耀金<i></i></li>
                          <li class="sku-line">冰河银<i></i></li>
                          <li class="sku-line">雅典灰<i></i></li>
                        </ul>
                      </div>
                      <div class="theme-options">
                        <div class="cart-title">套装</div>
                        <ul>
                          <li class="sku-line selected">保护套装<i></i></li>
                          <li class="sku-line">原厂电源<i></i></li>
                          <li class="sku-line">存储套装<i></i></li>
                        </ul>
                      </div>
                      <div class="theme-options">
                        <div class="cart-title number">数量</div>
            <dd>
              <input id="min" class="mr-btn mr-btn-default" @click="reduce" type="button" value="-"/>
              <input id="text_box" type="text" value="1" v-model="number" style="width:30px;"/>
              <input id="add" class="mr-btn mr-btn-default" @click="add" type="button" value="+"/>
              <span id="Stock" class="tb-hidden">库存<span class="stock">1000</span>件</span>
            </dd>

        </div>
        <div class="clear"></div>

        <div class="btn-op">
          <div class="btn mr-btn mr-btn-warning">确认</div>
          <div class="btn close mr-btn mr-btn-warning">取消</div>
        </div>
      </div>
      <div class="theme-signin-right">
        <div class="img-info">
          <img src=""/>
        </div>
        <div class="text-info">
          <span class="J_Price price-now">¥39.00</span>
          <span id="Stock" class="tb-hidden">库存<span class="stock">1000</span>件</span>
        </div>
      </div>

      </form>
    </div>
  </div>

  </dd>
  </dl>
  <div class="clear"></div>
  <!--活动	-->
  <div class="shopPromotion gold">
    <div class="hot">
      <dt class="tb-metatit">店铺优惠</dt>
      <div class="gold-list">
        <p>购物满2件打8折，满3件7折</p>
      </div>
    </div>
    <div class="clear"></div>
  </div>
  </div>

  <div class="pay">
    <div class="pay-opt">
      <a href="index.html"><span class="mr-icon-home mr-icon-fw">首页</span></a>
      <a><span class="mr-icon-heart mr-icon-fw">收藏</span></a>

    </div>
    <li>
      <div class="clearfix tb-btn tb-btn-buy theme-login">
        <a id="LikBuy" title="点此按钮到下一步确认购买信息" @click="show">立即购买</a>
      </div>
    </li>
    <li>
      <div class="clearfix tb-btn tb-btn-basket theme-login">
        <a id="LikBasket" title="加入购物车" @click="show"><i></i>加入购物车</a>
      </div>
    </li>
  </div>

  </div>

  <div class="clear"></div>

  </div>
  </div>
</template>

<script>
  import Enlarge from '@/views/shopinfo/Enlarge'
  import {mapState,mapActions} from 'vuex'//引入mapState和mapActions
  export default {
    components: {
      Enlarge
    },
    data: function(){
      return {
        number: 1,//商品数量
        goodsInfo: {//商品基本信息
          img : require("@/assets/images/honor.jpg"),
          name : "华为 荣耀 畅玩4X 白色 移动4G手机",
          num : 0,
          unitPrice : 499,
          isSelect : true
        }
      }
    },
    computed: {
      ...mapState([
              'user'//this.user映射为this.$store.state.user
      ])
    },
      watch: {
        number: function (newVal,oldVal) {
            if(isNaN(newVal) || newVal == 0){//输入的是非数字或0
                this.number = oldVal;//数量为原来的值
            }
        }
      },
    filters: {
      formatPrice : function(value){
        return value.toFixed(2);//保留两位小数
      }
    },
    methods: {
      ...mapActions([
              'getListAction'//this.getListAction()映射为this.$store.dispatch('getListAction')
      ]),
      show: function () {
          if(this.user == null){
              alert('亲，请登录！');
              this.$router.push({name:'login'});//跳转到登录页面
          }else{
            this.getListAction({//执行方法并传递参数
              goodsInfo: this.goodsInfo,
              number: parseInt(this.number)
            });
              this.$router.push({name:'shopcart'});//跳转到购物车页面
          }
      },
      reduce: function () {
        if(this.number >= 2){
          this.number--;//商品数量减1
        }

      },
      add: function () {
        this.number++;//商品数量加1
      }
    }
  }
</script>
<style src="@/assets/css/optstyle.css" scoped></style>
<style src="@/assets/css/infoStyle.css" scoped></style>

---

总结

了解需求，解决需求。