# mimall

**Repository Path**: yx102/mimall

## Basic Information

- **Project Name**: mimall
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-07-10
- **Last Updated**: 2020-12-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# mimall

## Project setup
```
npm install
```

### Compiles and hot-reloads for development
```
npm run serve
```

### Compiles and minifies for production
```
npm run build
```



## 配置全局变量

在`vue.config.js`文件中配置`style-resource`全局变量

下载：

```
npm i style-resources-loader -D
```

配置：注【全局变量less_reset文件不能使用config文件中的配置，没有设置为全局文件可以使用】

```
const path = require('path')
module.exports = {
  chainWebpack: config => {
    const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
    types.forEach(type => addStyleResource(config.module.rule('less').oneOf(type)))
    // 删除预加载的路由
    config.plugins.delete('prefetch')
  },
}
function addStyleResource (rule) {
  rule.use('style-resource')
    .loader('style-resources-loader')
    .options({
      patterns: [
        // 在此处添加less的mixin和变量
        path.resolve(__dirname, './src/assets/less/less_reset.less'),
        path.resolve(__dirname, './src/assets/less/config.less')
      ],
    })
}
```

方案二：配置局部全局变量，使用的时候每个页面引入

```
module.exports = {
  css: {
    loaderOptions: {
      less: {
        // 这里data换成 prependData  并且重启vue项目即可
        prependData: [`@import "@/assets/css/base.less";`, `@import "@/assets/css/common.less";`]
      }
    }
  }
}
```



## less函数

```
.flex(@row:center, @col:center) {
  display: flex;
  justify-content: @row;
  align-items: @col;
}

使用
.flex()
```

## scss函数

```
@mixin flex($row:center, $col:center){
  display: flex;
  justify-content: $row;
  align-items: $col;
}

使用
@include flex()
```



ul的li平均分布

```css
方式一：
li{
    float:left;
    width:20%
}

方式二：
ul{
    display:flex
}
li{
    flex: 1;
}
```





## 使用技术

![1594311712631](C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1594311712631.png)



需要掌握的内容

## navHeader组件

### logo的切换

a设置width: 110px;

a::before{width: 55px;}

a::after{width: 55px;}

&:hover::before {
       margin-left: -55px;
       transition: all 0.5s;
  }

```html
<div class="header-logo">
  <a href="/"></a>
</div>

<style>
.header-logo {
    width: 55px;
    height: 55px;

    background-color: @colorA;
    a {
      width: 110px;
      height: 100%;
      display: inline-block;

      &::before {
        content: '';
        display: inline-block;
        width: 55px;
        height: 55px;
        background: url('/imgs/mi-logo.png') no-repeat center;
        background-size: 55px;
        transition: all 0.5s;
      }
      &::after {
        content: '';
        display: inline-block;
        width: 55px;
        height: 55px;
        background: url('/imgs/mi-home.png') no-repeat center;
        background-size: 55px;
      }
      &:hover::before {
        margin-left: -55px;
        transition: all 0.5s;
      }
    }
  }
</style>
```



### 三角形定位

```html
<a href="javascript:;" class="dropApp">
<div class="app">
  <img src="/imgs/pay/icon-qrcode.png" alt />
  <span>小米商城App</span>
</div>下载App
</a>

<style>
a:hover {
  position: relative;
  color: #fff;
}
.dropApp {
  &:hover .app {
    height: 148px;
    transition: all 0.3s;
  }
  &::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 0;
    margin-left: -8px;
    border-width: 0 8px 8px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #fff;
  }
}
</style>
```



### 盒子

悬浮在某一个上面，下面会出现一个大框布局

```
<div class="header-menu">
  <div class="item-menu">
    <span>小米手机</span>
    <div class="children"></div>
  </div>
  <div class="item-menu">
    <span>红米手机</span>
    <div class="children"></div>
  </div>
  <div class="item-menu">
    <span>电视</span>
    <div class="children"></div>
  </div>
</div>
```

竖线

li开启相对定位，通过伪元素定位要实现；去除最后一条也是通过伪元素来实现

```html
<div class="children">
	<ul>
		<li class="product">
                  <a href="javascript:;" target="_blank">
                    <div class="pro-img">
                      <img
                        src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3bf20f1df3f2e22c5b29ff07634f3c59.png?thumb=1&w=160&h=110&f=webp&q=90"
                        alt
                      />
                    </div>
                    <div class="pro-name">小米11</div>
                    <div class="pro-price">2399元起</div>
                  </a>
                </li>
	</ul>
</div>

<style>
li {
    position: relative;
    float: left;
    width: 16.6%;
    height: 220px;
    // 添加竖线
    &::before {
      content: '';
      position: absolute;
      top: 28px;
      right: 0;
      border-left: 1px solid @colorF;
      height: 100px;
    }

    // 去除最后一条竖线
    &:last-of-type::before {
      border-left: none;
    }
  }
</style>
```

### 悬浮显示隐藏和动画

height

```
.item-menu{
	&:hover {
        .children {
          height: 220px;
          transition: all 1s;
        }
      }
    .children {
    	height: 0;
        overflow: hidden;
        transition: all 0.5s;
     }
}
```



### 输入框

`background-size: contain;`让元素充满整个盒子

### 抽取重复样式

抽取后的样式可以直接使用

```
.flex(@row:center, @col:center) {
  display: flex;
  justify-content: @row;
  align-items: @col;
}

使用
.flex()
```

## navFooter组件

## serviceBar组件

## 配置代理

`vue.config.js`文件配置代理

```js
  devServer: {
    host: 'localhost',
    port: 8080,
    proxy: {
      '/api': {
        target: 'http://mall-pre.springboot.cn',
        changeOrigin: true,
        pathRewrite: {
          '/api': ''
        }
      }
    }
  },
```

`ajax.js`文件封装请求函数

```js
import axios from 'axios'

const request = axios.create({
  baseURL: '/api',
  // 超出请求时间设置：
  timeout: 5000
})

request.interceptors.request.use(function (config) {
  if (config.headers.needToken) {
    const token = sessionStorage.getItem('token_key')
    if (token) {
      config.headers.Authorization = 'Token ' + token
    }
  }
  return config
}, function (error) {
  return Promise.reject(error);
})

// axios接口错误拦截器：
request.interceptors.response.use(function (response) {
  // 获取到接口的返回值
  let res = response.data;
  let path = location.hash;

  // 只有是0的时候才是成功：
  if (res.status == 0) {
    // 成功返回数据：
    return res.data;

    // 登录错误的报错码：
  } else if (res.status == 10) {
    // 跳转回login并抛出异常：
    if (path != '/') {
      window.location.href = '/login';
    }
    return Promise.reject(res)
  } else {
    // 弹错其他错误:
    console.dir(res.msg)
    return Promise.reject(res);
  }
}, (error) => {
  let res = error.response;
  console.dir(res.data.message);
  return Promise.reject(error);
})
export default request
```

完成navheader组件请求

```
async getNavHeader () {
  const result = await reqNavHeaderData('100012')
  // 只截取前六条数据
  if (result.list.length > 6) {
    this.navHeaderData = result.list.splice(0, 6)
  }
}
```

## 首页

下载轮播图插件



轮播图和左侧导航栏布局

左侧导航栏通过定位的方式实现压在轮播图上

```
<div class="container">
  <div class="swiperbox">
    <!-- 导航菜单： -->
    <div class="nav-menu">
      <ul class="menu-wrap">
        <li class="menu-item">
          <a href="javascript:;">手机 电话卡</a>
          <div class="children"></div>
        </li>
        <li class="menu-item">
          <a href="javascript:;">电视 盒子</a>
          <div class="children"></div>
        </li>
      </ul>
    </div>
    <HomeSwiper :slideList="slideList"></HomeSwiper>
  </div>
</div>

.nav-menu {
  position: relative;
  width: 264px;
  z-index: 3;
  .menu-wrap {
    position: absolute;
    width: 264px;
    height: 451px;
    padding: 26px 0;
    background-color: #55585a7a;
    box-sizing: border-box;
    .menu-item {
      height: 50px;
      line-height: 50px;
      &:hover {
        background-color: @colorA;
      }
      > a {
        font-size: 16px;
        color: #fff;
        padding-left: 30px;
        display: block;
        position: relative;

        &:after {
          position: absolute;
          right: 30px;
          top: 17.5px;
          content: '';
          .bgImg(10px, 15px, '/imgs/icon-arrow.png');
        }
      }
    }
  }
}
```



循环二维数组



切割二位数据

【slice不会改变原数组,splice会改变原数组】

```
// 前六条数据在header.取后八条：
res.list=res.list.slice(6,14);
// 分割产品到二维数组:
this.phoneList=[res.list.slice(0,4),res.list.slice(4,8)];
```



## modal做上下动画

```vue
<template>
  <transition name="slide">
    <div class="modal" v-show="showModal">
      <div class="mask"></div>
      <div class="modal-dialog" :class="[modalType]">
        <div class="modal-header">
          11
        </div>
        <div class="modal-body">
          <slot name="body"></slot>
        </div>
        <div class="modal-footer">
         11
        </div>
      </div>
    </div>
  </transition>
</template>

<style>
.modal {
  .position(fixed);
  z-index: 99;
  transition: all 0.6s linear;

  &.slide-enter-active {
    top: 0;
  }

  &.slide-leave-active {
    top: -100%;
  }

  &.slide-enter {
    top: -100%;
  }

  .mask {
    .position(fixed);
    background-color: @colorI;
    opacity: 0.5;
  }
}
</style>
```



## btn样式开发

```
.btn {
  display: inline-block;
  width: 110px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background-color: #ff6600;
  color: #ffffff;
  border: none;
  cursor: pointer;
}

// 默认按钮样式：
.btn-default {
  background-color: #b0b0b0;
  color: #ffffff;
  border: 1px solid #d7d7d7;
}

// 大号按钮：
.btn-large {
  width: 202px;
  height: 50px;
  line-height: 50px;
  font-size: 18px;
}

// 巨大号按钮
.btn-huge {
  width: 300px;
  height: 54px;
  line-height: 54px;
  font-size: 16px;
}

// 按钮组：
.btn-group {
  .btn {
    margin-right: 20px;
    &:last-child {
      margin-right: none;
    }
  }
}

使用：
 <div class="btn-group">
    <a href="javascript:;" class="btn">确定</a>
    <a href="javascript:;" class="btn btn-default">取消</a>
</div>
```



## 图片懒加载

下载

```
npm i vue-lazyload -S
```

引入

```
import VueLazyLoad from 'vue-lazyload'

Vue.use(VueLazyLoad, {
  loading: '/imgs/loading-svg/loading-bubbles.svg'
})
```

使用

```
动态
<img v-lazy="item.mainImage" alt />

静态:需要加引号，否则当成变量解析
<img v-lazy="'/imgs/mix-alpha.jpg'" alt />
```



## 登录页面

使用滑块校验：组件slide，存在的bug，出错不会重置

```vue
<template>
  <div class="drag" ref="dragDiv">
    <div class="drag_bg"></div>
    <div class="drag_text">{{confirmWords}}</div>
    <div
      ref="moveDiv"
      @mousedown="mouseDownFn($event)"
      :class="{'handler_ok_bg':confirmSuccess}"
      class="handler handler_bg"
      style="position: absolute;top: 0px;left: 0px;"
    ></div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      beginClientX: 0,           /*距离屏幕左端距离*/
      mouseMoveState: false,     /*触发拖动状态  判断*/
      maxWidth: '',               /*拖动最大宽度，依据滑块宽度算出来的*/
      confirmWords: '向右拖动滑块验证',   /*滑块文字*/
      confirmSuccess: false           /*验证成功判断*/
    }
  },
  methods: {
    //mousedown 事件
    mouseDownFn: function (e) {
      if (!this.confirmSuccess) {
        e.preventDefault && e.preventDefault();   //阻止文字选中等 浏览器默认事件
        this.mouseMoveState = true;
        this.beginClientX = e.clientX;
      }
    },
    //验证成功函数
    successFunction () {
      this.confirmSuccess = true;
      this.confirmWords = '验证通过';
      if (window.addEventListener) {
        document.getElementsByTagName('html')[0].removeEventListener('mousemove', this.mouseMoveFn);
        document.getElementsByTagName('html')[0].removeEventListener('mouseup', this.moseUpFn);
      } else {
        document.getElementsByTagName('html')[0].removeEventListener('mouseup', () => { });
      }
      document.getElementsByClassName('drag_text')[0].style.color = '#fff';
      document.getElementsByClassName('handler')[0].style.left = this.maxWidth + 'px';
      document.getElementsByClassName('drag_bg')[0].style.width = this.maxWidth + 'px';
    },
    //mousemove事件
    mouseMoveFn (e) {
      if (this.mouseMoveState) {
        let width = e.clientX - this.beginClientX;
        if (width > 0 && width <= this.maxWidth) {
          document.getElementsByClassName('handler')[0].style.left = width + 'px';
          document.getElementsByClassName('drag_bg')[0].style.width = width + 'px';
        } else if (width > this.maxWidth) {
          this.successFunction();
        }
      }
    },
    //mouseup事件
    moseUpFn (e) {
      this.mouseMoveState = false;
      var width = e.clientX - this.beginClientX;
      if (width < this.maxWidth) {
        document.getElementsByClassName('handler')[0].style.left = 0 + 'px';
        document.getElementsByClassName('drag_bg')[0].style.width = 0 + 'px';
      }
    }
  },
  mounted () {
    this.maxWidth = this.$refs.dragDiv.clientWidth - this.$refs.moveDiv.clientWidth;
    document.getElementsByTagName('html')[0].addEventListener('mousemove', this.mouseMoveFn);
    document.getElementsByTagName('html')[0].addEventListener('mouseup', this.moseUpFn)
  }
}
</script>
<style scoped>
.drag {
  position: relative;
  background-color: #e8e8e8;
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.handler {
  width: 40px;
  height: 38px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: move;
}
.handler_bg {
  background: #fff
    url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTEyNTVEMURGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTEyNTVEMUNGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2MTc5NzNmZS02OTQxLTQyOTYtYTIwNi02NDI2YTNkOWU5YmUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+YiRG4AAAALFJREFUeNpi/P//PwMlgImBQkA9A+bOnfsIiBOxKcInh+yCaCDuByoswaIOpxwjciACFegBqZ1AvBSIS5OTk/8TkmNEjwWgQiUgtQuIjwAxUF3yX3xyGIEIFLwHpKyAWB+I1xGSwxULIGf9A7mQkBwTlhBXAFLHgPgqEAcTkmNCU6AL9d8WII4HOvk3ITkWJAXWUMlOoGQHmsE45ViQ2KuBuASoYC4Wf+OUYxz6mQkgwAAN9mIrUReCXgAAAABJRU5ErkJggg==')
    no-repeat center;
}
.handler_ok_bg {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  background: #fff
    url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDlBRDI3NjVGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDlBRDI3NjRGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDphNWEzMWNhMC1hYmViLTQxNWEtYTEwZS04Y2U5NzRlN2Q4YTEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+k+sHwwAAASZJREFUeNpi/P//PwMyKD8uZw+kUoDYEYgloMIvgHg/EM/ptHx0EFk9I8wAoEZ+IDUPiIMY8IN1QJwENOgj3ACo5gNAbMBAHLgAxA4gQ5igAnNJ0MwAVTsX7IKyY7L2UNuJAf+AmAmJ78AEDTBiwGYg5gbifCSxFCZoaBMCy4A4GOjnH0D6DpK4IxNSVIHAfSDOAeLraJrjgJp/AwPbHMhejiQnwYRmUzNQ4VQgDQqXK0ia/0I17wJiPmQNTNBEAgMlQIWiQA2vgWw7QppBekGxsAjIiEUSBNnsBDWEAY9mEFgMMgBk00E0iZtA7AHEctDQ58MRuA6wlLgGFMoMpIG1QFeGwAIxGZo8GUhIysmwQGSAZgwHaEZhICIzOaBkJkqyM0CAAQDGx279Jf50AAAAAABJRU5ErkJggg==')
    no-repeat center;
}
.drag_bg {
  background-color: #7ac23c;
  height: 40px;
  width: 0px;
  border-radius: 4px 0 0 4px;
}
.drag_text {
  position: absolute;
  top: 0px;
  width: 100%;
  text-align: center;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  -o-user-select: none;
  -ms-user-select: none;
}
</style>
```



## js-cookie保存用户信息

下载

```js
npm install js-cookie --save
```

引入使用

```js
import Cookies from 'js-cookie'
```

[参考文章](https://www.npmjs.com/package/js-cookie)



## 引入element-ui

按需加载element-ui

```shell
npm install babel-plugin-component -D
```

### 全局注册组件

```js
import Vue from 'vue';
import { form, formItem, Input, Button, Checkbox } from "element-ui";

Vue.use(form);
Vue.use(formItem);
Vue.use(Input);
Vue.use(Button);
Vue.use(Checkbox);
Vue.use(form);
```

### 组件局部注册

```js
import { form, formItem, Input, Button, Checkbox } from "element-ui";

components: {
    [form.name]: form,
    [formItem.name]: formItem,
    [Button.name]: Button,
    [Input.name]: Input,
    [Checkbox.name]: Checkbox
  },
```



## 表单一行内包含两种内容

```html
<div class="qr-input-group">
  <el-form-item label="验证码" prop="yzm">
    <el-input v-model="ruleForm.yzm"></el-input>
  </el-form-item>
  <ver-code @refresh_yzm="refresh" ref="vercode"></ver-code>
</div>

<style>
.qrinput {
  width: 315px;
}
.qr-input-group {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}
</style>
```



## 导航吸顶

```
<div class="nav-bar" ref="navbar" :class="{is_fixed: searchBarFixed}"></div>

mounted () {
    window.addEventListener('scroll', this.handleScroll)
  },
destroyed () {
    window.removeEventListener('scroll', this.handleScroll, false)
  },
methods: {
    handleScroll () {
      this.$nextTick(() => {
        // 多版本兼容获取滚动条高度
        let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        let offsetTop = this.$refs['navbar'].offsetTop;
        if (scrollTop > offsetTop) {
          this.searchBarFixed = true;
        } else {
          this.searchBarFixed = false;
        }
      })
    }
  }
  
<style>
  .is_fixed {
    position: fixed;
    top: 0;
    width: 100%;
    box-shadow: 0 5px 5px @colorE;
  }
</style>
```



## 点击弹出视频

top：-50%；opacity：0；transition: all .6s;和 top：50%；opacity：1；是重点

```
<div class="item-video">
<h2>
60帧超慢动作摄影
<br />慢慢回味每一瞬间的精彩
</h2>
<p>
后置960帧电影般超慢动作视频，将眨眼间的美妙展现得淋漓尽致！
<br />更能AI 精准分析视频内容，15个场景智能匹配背景音效。
</p>
<div class="video-bg" @click="showVideo=true"></div>
<div class="video-box">
<div class="overlay" v-if="showVideo"></div>
<div class="video" :class="showVideo ? 'slide' : ''">
  <span class="icon-close" @click="showVideo=false"></span>
  <video src="/imgs/product/video.mp4" muted autoplay controls="controls"></video>
</div>
</div>
</div>

<style>
.item-video {
    height: 1044px;
    background-color: #070708;
    margin-bottom: 76px;
    color: #ffffff;
    text-align: center;
    h2 {
      font-size: 60px;
      padding-top: 82px;
      margin-bottom: 47px;
    }
    p {
      font-size: 24px;
      margin-bottom: 58px;
    }
    .video-bg {
      background: url('/imgs/product/gallery-1.png') no-repeat center;
      background-size: cover;
      width: 1226px;
      height: 540px;
      margin: 0 auto 120px;
      cursor: pointer;
    }
    
    .video-box {
      .overlay {
        .position(fixed);
        background-color: #333333;
        opacity: 0.4;
        z-index: 10;
      }
      .video {
        position: fixed;
        top: -50%; // 重点
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 10;
        width: 1000px;
        height: 536px;
        opacity: 0; // 重点
        transition: all 0.6s; // 重点
        &.slide {
          top: 50%; // 重点
          opacity: 1; // 重点
        }

        .icon-close {
          position: absolute;
          top: 20px;
          right: 20px;
          .bgImg(20px, 20px, '/imgs/icon-close.png');
          cursor: pointer;
          z-index: 11;
        }
        video {
          width: 100%;
          height: 100%;
          object-fit: cover;
          outline: none;
        }
      }
    }
  }
</style>
```



## 退出后刷新登录没有获取到购物车数据

解决办法：在app.vue和navHeader.vue中都发送请求

但是这样会重复发送两次请求，可以在navheader.vue组件添加拦截，只请求登录页面跳转过来数据，login.vue只能用name，用path不会进行请求

`navheader.vue`

```
created () {
    // 判断是否从登录页面跳转过来，如果是就发送请求，如果不是就不发送请求
    let params = this.$route.params
    if (params && params.from == 'login') {
      this.getCartCount()
    }
  },
```

`login.vue`

```
this.$router.replace({
  name: 'Indexpage',
  params: {
    from: 'login'
  }
})
```



## cookies会话期间有效

注：会话期间是`expiress`,设置时间用`expires`

```
Cookies.set("uid", uid, { expiress: "Session" })
```



## 总结

如果是export const导出，需要用{}来引入

如果是export default 则不需要用{}来引入

```
export const reqLogin = () => {}
import {reqLogin} from './a.js'

export default []
import data from './a.js'
```



## 判断是否有选择地址

```
let addr = this.addressList[this.checkIndex]
if (!addr) {
	return this.$message.error("请选择一个收货地址")
}
```



## 携带参数跳转到结算页面

```
const result = await reqSubmitOrder(addr.id)
this.$router.push({
  path: '/order/pay',
  query: {
    orderNo: result.orderNo
  }
})
```



## 结算页面

订单展示

有支付宝支付和微信支付两种支付接口



## 订单列表是否显示

添加变量：showDetail

```
<p>
订单详情
<em
  class="icon-down"
  @click="showDetail=!showDetail"
  :class="{'up':showDetail}"
></em>
</p>

<div class="item-detail" v-show="showDetail">
<div class="item">
  <div class="detail-title">订单号：</div>
  <div class="detail-info theme-color">5190702816411009</div>
</div>
</div>

data:{
	showDetail:true
}
```



## 在js中打开新窗口

```
window.open('地址', '_blank')
window.open('/order/alipay?orderId=' + this.orderNo, '_blank')
```



## 阿里支付页面布局

```
<template>
    <div class="ali-pay">
        <Loading v-if="loading"></Loading>
        <!-- 使用v-html绑定返回的form -->
        <div class="form" v-html="content">

        </div>
    </div>
</template>
<script>
import Loading from './../components/Loading'
export default {
    name:'alipay',
    components:{
        Loading
    },
    data(){
        return{
            orderId:this.$route.query.orderId,
            content:'',
            loading:true
        }
    },
    mounted(){
        this.paySubmit();
    },
    methods:{
        paySubmit(){
            this.axios.post('/pay/',{
                orderId:this.orderId,
                orderName:'Vue高仿商城',
                amount:0.01,//金额
                payType:1 //1支付宝 2微信
            }).then((res)=>{
                // 支付宝支付接口是返回一个html页面,页面中有一个form,需要去触发表单的跳转
                this.content=res.content;
                setTimeout(()=>{
                    // 提交支付宝推送的表单 ,支付宝有一层网关，拿到签名重定向到收银台，再进行扫码支付
                    document.forms[0].submit();
                },100)
            })
        }
    }
}
</script>
```



## loading通用组件

```
<template>
  <div class="loading">
    <!-- 直接加根目录是因为public默认就是根目录(index.html) -->
    <img src="/imgs/loading-svg/loading-bars.svg" alt />
  </div>
</template>>
<script>
export default {
  name: 'loading'
}
</script>
<style lang="less">
.loading {
  height: 80px;
  line-height: 80px;
  text-align: center;
  padding: 0 30px;
  img {
    height: 100%;
  }
}
</style>
```



## 微信生成支付二维码

后台返回一个链接，需要将链接生成二维码

```
const result = await reqPay(this.orderNo, 'Vue高仿商城', 0.01, 2)
// console.log(result) // content: "weixin://wxpay/bizpayurl?pr=kD5oENL"
方式一：
QRCode.toDataURL(result.content)
  .then(url => {
    this.payImg = url
  }).catch(() => {
    this.$message.error("微信二维码生成失败");
  });
  
方式二：
try {
  this.payImg = await QRCode.toDataURL(result.content)
  this.payByWechat = true
} catch (err) {
  this.$message.error("微信二维码生成失败,请稍后重试");
}
```



## 微信轮询支付状态

如果已经支付需要清除定时器，在生成二维码的时候就需要开启轮询状态，检测到支付成功清除定时器，跳转页面；点击关闭二维码弹框也需要清除定时器

```
一：轮询
//轮询当前订单支付状态，如果支付完毕则自动关闭(状态20)
loopOrderState () {
  this.timeId = setInterval(async () => {
    const result = await reqOrderDetail(this.orderNo)
    if (result.status === 20) {
      // 清除定时器
      clearInterval(this.timeId)
      // 跳转页面
      this.goOrderList()
    }
  }, 1000)
},


二：生成二维码时开启轮询【this.loopOrderState()】
async paySubmit (type) {
  if (type === 1) {
    this.payInfo = 1
    window.open('/order/alipay?orderId=' + this.orderNo, '_blank')
  } else {
    this.payInfo = 2
    const result = await reqPay(this.orderNo, 'Vue高仿商城', 0.01, 2)
    try {
      this.payImg = await QRCode.toDataURL(result.content)
      this.payByWechat = true
      this.loopOrderState()
    } catch (err) {
      this.$message.error("微信二维码生成失败,请稍后重试");
    }
  }
},

三：关闭二维码弹框清除定时器【clearInterval(this.timeId)】
closeWxpay () {
  this.payByWechat = false
  this.showPayModal = true
  clearInterval(this.timeId)
},
```



## 修复跳转title不生效bug

由于只是跳转没有刷新页面，在mounted中检测URL只会检测一次，因此需要给每个子组件都添加orderheader而不是在父组件中定义通过mounted来改变，通过this.$router.push()跳转的会检测不到URL的变化，因此会不生效





## 分页切换

```
async getOrderList () {
  this.loading = true
  const result = await reqOrderList(this.pageNum, this.pageSize)
  this.orderList = [...this.orderList, ...result.list]
  this.total = result.total
  this.loading = false
},

LoadingMore () {
  this.loading = true
  // 计算总页数
  let totalPage = Math.ceil(this.total / this.pageSize)
  if (this.pageNum >= totalPage) {
    this.$message.warning('没有更多数据')
  } else {
    this.pageNum++
    this.getOrderList()
  }
  this.loading = false
}
```



```

```