vue前台（六点二）

一，分页组件连续页起始和结束计算

自定义通用的分页组件
    
    实现静态组件（模板结构样式）
        参考文档去获取

    设计数据
        外部接受的
            当前页码
            每页数量
            总数
            连续页码数量   一般都是奇数个

        自己内部的
            总页数
            连续页码的起始和结束（比较恶心）

            1、先判断连续页码是不是比最大的页码还要大，如果是那么start=1  end就是最大页码
            2、如果连续页码比最大页码小
                我们让start  =   当前页码 - 连续页码/2 取整
                      end   =    当前页码 + 连续页码/2 取整
                
                     如果start 求出来比1还小  那么start修正为1 end需要+修正的偏移量
                     如果end   求出来比最大页码还大   同样end修正为最大页码   start - 修正的偏移量

自定义通用的分页组件

1、去课件当中获取到分页的静态组件
2、注册组件并渲染静态组件
3、动态组件的逻辑和功能
3-1：思考设计 分页组件所需要的从父组件传递的数据是那些（1、当前页码 2、每页数量 3、总数 4、连续页数）
3-2：思考设计 分页内部需要计算的数据：总页数 连续页码的起始和结束
3-3：在分页当中开始去计算逻辑

1.在component中创建分页组件paginnation，

2.在入口文件main.js全局注册分页组件

import Pagination from '@/components/Pagination'

Vue.component('Pagination',Pagination)

 

3.在search组件中实例化分页组件paginnation，

 data() {
    return {
      //初始化搜索参数（收集搜索参数）
      //为搜索请求提供搜索参数
      searchParams: {
        category1Id: "",
        category2Id: "",
        category3Id: "",
        categoryName: "",
        keyword: "",
        order: "2:desc", //排序标志：排序类型    1代表综合排序 2代表价格排序 asc升序  desc降序
        // 当前页码数
        pageNo: 1,
        // 每页图片数
        pageSize: 4,
        props: [],
        trademark: ""
      },
    };
  },

4.1，父子通信，search组件的数据传递给子组件paginnation，传递当前页，每页条数，总条数，连续页数，

 <Pagination 
            :currentPageNum="searchParams.pageNo"
            :pageSize="searchParams.pageSize"
            :total="goodsListInfo.total"
            :continueNum="5"
            @changePage="changePageNum">
          </Pagination>

4.2，.pagination组件props接收数据，default为默认值，

 

 props:{
      // 当前页码数
      currentPageNum:{
        type:Number,
        default:1
      },
      //每页图片数
      pageSize:{
        type:Number,
        default:10
      },

      //总图片数
      total:{
        type:Number,
        default:0
      },

      // 连续页码数量
      continueNum:{
        type:Number,
        default:5
      }
    },

4.3，连续页码起始和结束计算

 computed:{
      //计算总页数，有所少页，总图片数 / 每页图片数，向上取整
      totalPage(){
        return  Math.ceil(this.total / this.pageSize) 
      },
      //计算连续页的起始和结束
      startEnd(){
        let {currentPageNum,totalPage,continueNum} = this
        let start
        let end
        let disNum
        //第一步：判断总页码是否比连续页码还要小
        if(totalPage <= continueNum){
          start = 1
          end = totalPage
        }else{
          //正常情况,向下取整
          start = currentPageNum - Math.floor(continueNum / 2)
          end = currentPageNum + Math.floor(continueNum / 2)
          //左边界限制，start
          if(start <= 1){
　　　　　　　　//计算间隔
            disNum = 1- start
            start += disNum
            end += disNum
          }
          //右边界限制
          if(end >= totalPage ){
            disNum = end - totalPage
            start -= disNum
            end -= disNum
          }
        }
        return {start,end}
      }
    }

二，分页器模板动态页码数据及背景展示

类名

.active {
        cursor: not-allowed;
        background-color: #409eff;
        color: #fff;
      }

动态页码展示

注；连续页码用v-for, 并且page要大于start,

<template>
  <div class="pagination">
    <button :disabled="currentPageNum === 1" @click="$emit('changePage',currentPageNum - 1)">上一页</button>
    <!-- 1平时是一直显示的，只有当start的值和1一样，那么1就不显示，而是显示start的1 -->
    <button v-show="startEnd.start > 1" :class="{active:currentPageNum === 1}" @click="$emit('changePage',1)">1</button>
    <button v-show="startEnd.start > 2">···</button>

    <!-- 如果v-for和v-if同时存在，v-for优先级比v-if要高 -->
    <button 
      v-for="page in startEnd.end" :key="page" 
      v-if="page >= startEnd.start"
      :class="{active:page === currentPageNum}"
      @click="$emit('changePage',page)"
      >{{page}}</button>
        
    <button v-show="startEnd.end < totalPage - 1">···</button>
    <button v-show="startEnd.end < totalPage" :class="{active:currentPageNum === totalPage}"  @click="$emit('changePage',totalPage)">{{totalPage}}</button>
    <button :disabled="currentPageNum === totalPage" @click="$emit('changePage',currentPageNum + 1)">下一页</button>
    
    <button style="margin-left: 30px">共 {{total}} 条</button>
  </div>
</template>

 三，点击页码的交互逻辑（跟新父组件页码参数，重新发请求），自定义事件，父子通信，

用户点击当前页，pagintation子组件触发事件，传递currentPageNum当前页参数给search,重新发送请求

 

<template>
  <div class="pagination">
    <button :disabled="currentPageNum === 1" @click="$emit('changePage',currentPageNum - 1)">上一页</button>
    <!-- 1平时是一直显示的，只有当start的值和1一样，那么1就不显示，而是显示start的1 -->
    <button v-show="startEnd.start > 1" :class="{active:currentPageNum === 1}" @click="$emit('changePage',1)">1</button>
    <button v-show="startEnd.start > 2">···</button>

    <!-- 如果v-for和v-if同时存在，v-for优先级比v-if要高 -->
    <button 
      v-for="page in startEnd.end" :key="page" 
      v-if="page >= startEnd.start"
      :class="{active:page === currentPageNum}"
      @click="$emit('changePage',page)"
      >{{page}}</button>
        
    <button v-show="startEnd.end < totalPage - 1">···</button>
    <button v-show="startEnd.end < totalPage" :class="{active:currentPageNum === totalPage}"  @click="$emit('changePage',totalPage)">{{totalPage}}</button>
    <button :disabled="currentPageNum === totalPage" @click="$emit('changePage',currentPageNum + 1)">下一页</button>
    
    <button style="margin-left: 30px">共 {{total}} 条</button>
  </div>
</template>

search父组件，绑定自定义事件，接收子传过来的参数，发送请求

          <Pagination 
            :currentPageNum="searchParams.pageNo"
            :pageSize="searchParams.pageSize"
            :total="goodsListInfo.total"
            :continueNum="5"
            @changePage="changePageNum">
          </Pagination>

changePageNum(num){
      this.searchParams.pageNo = num
      this.getGoodsListInfo();
    }

注：用户搜索条件改变，让其变成第一页，然后发送请求

四，search中商品详情静态页面的展示及路由滚动行为

在pages中创建deteil组件，在router.js引入，注册，路径

export default [
  {
    path:'/detail/:goodsId',
    component:Detail
  },

设置路由连接

  <li class="yui3-u-1-5" v-for="(goods, index) in goodsList" :key="goods.id">
                <div class="list-wrap">
                  <div class="p-img">
                    <router-link :to="`/detail/${goods.id}`">
                      <img :src="goods.defaultImg" />
                    </router-link>
                  </div>
                  <div class="price">
                    <strong>
                      <em>¥</em>
                      <i>{{goods.price}}</i>
                    </strong>
                  </div>
                  <div class="attr">
                    <a
                      target="_blank"
                      href="item.html"
                      title="促销信息，下单即赠送三个月CIBN视频会员卡！【小米电视新品4A 58 火爆预约中】"
                    >{{goods.title}}</a>
                  </div>
                  <div class="commit">
                    <i class="command">
                      已有
                      <span>2000</span>人评价
                    </i>
                  </div>
                  <div class="operate">
                    <a
                      href="success-cart.html"
                      target="_blank"
                      class="sui-btn btn-bordered btn-danger"
                    >加入购物车</a>
                    <a href="javascript:void(0);" class="sui-btn btn-bordered">收藏</a>
                  </div>
                </div>
              </li>

此时，跳转到detail组件中，但是没有跳转到页面顶部，需要配置下滚动行为，在router中

export default new VueRouter({
  routes,
  scrollBehavior (to, from, savedPosition) {
    return { x: 0, y: 0 }
  }
})

五，此时detail中要获取商品的动态数据，需要请求接口

1.在api中封装接口函数

//请求商品详情数据 

//  /api/item/{ skuId }   get

export const reqGoodsDetailInfo = (skuId) => Ajax.get(`/item/${ skuId }`)

2.创建detail的vuex

import {reqGoodsDetailInfo} from '@/api'

const state = {
  goodsDetailInfo : {}
}
const mutations = {
  //直接修改数据
  RECEIVEGOODSDETAILINFO(state,goodsDetailInfo){
    state.goodsDetailInfo = goodsDetailInfo
  },

}

const actions = {
  //异步请求数据
  //async 和 await的用法
  async getGoodsDetailInfo({commit},skuId){
    const result = await reqGoodsDetailInfo(skuId)
    if(result.code === 200){
      commit('RECEIVEGOODSDETAILINFO',result.data)
    }
  },

  
}

const getters = {
  categoryView(state){
    return state.goodsDetailInfo.categoryView || {}
  },
  skuInfo(state){
    return state.goodsDetailInfo.skuInfo || {}
  },
  spuSaleAttrList(state){
    return state.goodsDetailInfo.spuSaleAttrList || []
  }
}

export default {
  state,
  mutations,
  actions,
  getters
}

3.在总的vuex注册

export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters,
  modules:{
    home,
    search,
    detail
  }
})

4.在detail组件中关联vuex, 发送请求，

  mounted() {
    this.getGoodsDetailInfo();
  },
  methods: {
    getGoodsDetailInfo() {
      this.$store.dispatch("getGoodsDetailInfo", this.$route.params.goodsId);
    }
  },

5.从vuex中获取数据

import { mapGetters } from "vuex";

 computed: {
    ...mapGetters(["categoryView", "skuInfo", "spuSaleAttrList"])
  },

6.向htm模板中填充数据

  <!-- 导航路径区域 -->
      <div class="conPoin">
        <span>{{categoryView.category1Name}}</span>
        <span>{{categoryView.category2Name}}</span>
        <span>{{categoryView.category3Name}}</span>
      </div>

   <div class="chooseArea">
              <div class="choosed"></div>
              <dl v-for="(item, index) in spuSaleAttrList" :key="index">
                <dt class="title">{{item.saleAttrName}}</dt>
                <dd
                  changepirce="0"
                  class="active"
                  v-for="(attrValue, index) in item.spuSaleAttrValueList"
                  :key="attrValue.id"
                >{{attrValue.saleAttrValueName}}</dd>
              </dl>
            </div>