利用vue重构有赞商城的思路以及总结整理

<Swipe :lists="bannerLists" name="swpie.vue" v-if="bannerLists"></Swipe>

new Swiper('.swiper-container',{
   loop:true,
   pagination: '.swiper-pagination',
   autoplay: 2000
  })
  getBanner(){//获取轮播数据
   this.$http.get(url.banner).then(res=>{
    this.bannerLists = res.data.lists
    
   })

filters:{
  currency(num){
    num=num+''
    let arr=num.split('.')
    if (arr.length===1){
      return num+'.00'
    } else {
      if (arr[1].length===1){
        return num+'0'
      } else return num
    }
  }
}

<div class="price">￥{{list.price | currency}}</div>

<ul class="js-list js-lazy" data-src=""
v-infinite-scroll="getList"
infinite-scroll-disabled="loading"
infinite-scroll-distance="50"
>
  <li v-for="list in lists" :key="list.id">
   <div class="goods-item">
    <a :href="'/goods.html?id='+list.id" rel="external nofollow" >
     <div class="thumb img-box">
      <img class="fadeIn" v-bind:src="list.img">
     </div>
     <div class="detail">
      <div class="title">{{list.name}}</div>
      <div class="price">￥{{list.price | currency}}</div>
     </div>
    </a>
   </div>
  </li>
</ul>

getList(){
  if (this.allLoad) return
  this.loading=true
  axios.post(url.hostLists,{
    pageNum:this.pageNum,
    pageSize:this.pageSize
  }).then((response)=>{
    let currentList=response.data.lists
    if (currentList.length<this.pageSize) this.allLoad=true
    if (this.lists) {
      this.lists=this.lists.concat(currentList)
    } else {
      this.lists=currentList
    }
    this.pageNum +=1
    this.loading=false
  })
}

let {index}=qs.parse(window.location.search.substring(1))
export default {
 data(){
  return {
   navConfig,
   curIndex:parseInt(index,10) || 0
  }
 },
 methods:{
  changeNav(index,list){
   location.href=`${list.href}?index=${index}`
  }
 }
}

import Footnav from 'components/FootNav.vue'
let mixin={
  filters:{
    currency(num){
      num=num+''
      let arr=num.split('.')
      if (arr.length===1){
        return num+'.00'
      } else {
        if (arr[1].length===1){
          return num+'0'
        } else return num
      }
    }
  },
  components:{
    Footnav
  }
}
export default mixin

new Vue({
  ...
  mixins:[mixin]
})

let { index } = qs.parse(location.search.substr(1));

changeNav(list, index) {
   //this.curIndex = index;
   location.href = `${list.href}?index=${index}`;
   //页面跳转
   event.preventDefault();   
  }

//引入Velocity
import Velocity from 'velocity-animate/velocity.js'

//在methods中加入对应方法
methods:{
  scrollMove(){
    if (window.scrollY>=290){
      this.isShow=true
    } else {
      this.isShow=false
    }
  },
  goToTop(){
    Velocity(document.body, 'scroll', { duration: 500, easing: "easeOutQuart" });
    this.isShow=false //回到顶部图标消失
  }
}

<div id="demo">
 <button v-on:click="show = !show">
  Toggle
 </button>
 <transition name="fade">
  <p v-if="show">hello</p>
 </transition>
</div>

new Vue({
 el: '#demo',
 data: {
  show: true
 }
})

.fade-enter-active, .fade-leave-active {
 transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
 opacity: 0;
}

scrollTop = document.scrollingElement.scrollTop
document.body.style.top = -scrollTop + 'px'

document.scrollingElement.scrollTop = scrollTop

chooseSku(type) {//显示购买菜单
   this.skuType = type
   this.showModal = true
  },
  changeSku(num) {//增减数量
   if (num < 0 && this.skuNum === 1) return
   this.skuNum += num
  },

  addCart() {//加入购物车
   $.ajax($.url.cartAdd, {
    id,
    skuNum: this.skuNum
   }).then((data) => {
    if (data.status === 200) {
     this.showModal = false
     this.showAddMsg = true //添加成功的信息
     this.isAddedCart = true //显示购物车图标
     setTimeout(() => this.showAddMsg = false, 1200)
    }
   })
  }
 },

watch:{
  showSku(val,oldVal){
    if (val){
      scrollTop = document.scrollingElement.scrollTop
      document.body.style.top = -scrollTop + 'px'
    }
    document.body.style.position=val?'fixed':'static'
    // document.body.style.margin=val?`0 0 ${window.scrollY}px 0`:'0px'
    document.querySelector('html').style.overflow=val?'hidden':'auto'
    document.body.style.width=val?'100%':'auto'
    document.querySelector('html').style.height=val?'100%':'auto'
    if (!val){
      document.scrollingElement.scrollTop = scrollTop
    }
  }
}

getLists(){
  cart.getCartLists().then((response)=>{
    let list=response.data.cartList
    list.forEach(shop=>{
      shop.checked=true
      shop.editingStatus=false
      shop.editingMsg='编辑'
      shop.removeChecked=false
      shop.goodsList.forEach(good=>{
        good.checked=true
        good.removeChecked=false
        good.touchDelete=false
      })
    })
    this.cartLists=list
  })
}

start(e,good){
  good.startX=e.changedTouches[0].clientX
},
end(e,good,goodIndex,shopIndex,shop){
  let endX=e.changedTouches[0].clientX
  let left='0px'
  if (good.startX-endX>100){
    good.touchDelete=true
    left='-60px'
    Velocity(this.$refs[`goods-${shopIndex}-${goodIndex}`],{left})
    shop.goodsList.forEach((otherGood,index)=>{
      if (otherGood.touchDelete && index!==goodIndex) {
        otherGood.touchDelete=false
        Velocity(this.$refs[`goods-${shopIndex}-${index}`],{left:'0px'})
      }
    })
  } else if (endX-good.startX>100) {
    good.touchDelete=false
    left='0px'
    Velocity(this.$refs[`goods-${shopIndex}-${goodIndex}`],{left})
  }
}

shop.editingStatus=!shop.editingStatus
if (shop.editingStatus){  
  shop.goodsList.forEach((good,index)=>{
    if (good.touchDelete){
      good.touchDelete=false
      this.$refs[`goods-${shopIndex}-${index}`][0].style.left='0px'
    }
  })
}

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

//构造配置
let routes=[{
  path:'/',
  components: require('../components/member.vue')
},{
  path:'/address',
  components:require('../components/address.vue'),
  children:[{
    path:'',
    redirect: 'all'
  },{
    path:'all',
    components:require('../components/all.vue')
  },{
    path:'form',
    name:'form',
    components:require('../components/form.vue')
  }]
}]

//创建router实例
let router=new Router({
  routes
})

export default router

import Vue from 'vue'
import router from './router'
import store from './vuex'

//根组件注入
let view=new Vue({
  el:'#app',
  router,
  store
})
//router-view标签作为配置路由后组件的容器
<div id="app">
 <router-view></router-view>
</div>

//子组件
this.$emit('change',18)
//父组件
<foo :obj="obj" @change="changeAge"></foo>
//父组件
methods:{
  changeAge(age){
    this.obj.age=age
  }
}

//bus.js
import Vue from 'vue'
const bus=new Vue()
export default bus
//触发组件
import bus from 'js/bus.js'
bus.$emit('change',18)
//订阅组件
import bus from 'js/bus.js'
bus.$on('change',(age)=>{
  this.obj.age=age
})

import Vue from 'vue'

//使用vuex插件
import Vuex from 'vuex'
Vue.use(Vuex)

import address from 'js/addressService.js'

//创建Store实例
const store=new Vuex.Store({
  state:{
    lists:null
  },
  mutations: {
    init(state,lists){
      state.lists=lists
    }
  },
  actions: {
    getLists({commit}){
      address.getList().then(response=>{
        commit('init',response.data.lists)
      })
    }
  }
})

export default store

computed:{
  list(){
    if(this.$store.state.lists){
      return this.$store.state.lists
    }
    return false
  }
},
created(){
  if (!this.list){ //防止在新增地址或修改地址后多次触发mutations中的init
    this.$store.dispatch('getList')
  }
}