Vue实战教程之仿肯德基宅急送App

│ App.vue
│ main.js
│
├─assets
│   logo.png
│
├─components
│ │ cartcontrol.vue
│ │ code.vue
│ │ coupon.vue
│ │ mineHeader.vue
│ │ scroll.vue
│ │ shopHeader.vue
│ │ sidebar.vue
│ │ submitBar.vue
│ │ takeout.vue
│ │ wallet.vue
│ │
│ └─tabs
│     Other.vue
│     Outward.vue
│     Selfhelp.vue
│     Vgold.vue
│
├─pages
│ ├─home
│ │   home.vue
│ │
│ ├─mine
│ │   mine.vue
│ │
│ ├─order
│ │   order.vue
│ │
│ └─shop
│     shop.vue
│
├─router
│   index.js
│
└─vuex
  │ store.js
  │ types.js
  │
  └─modules
      com.js
      cou.js
      take.js

<template>
 <div ref="wrapper">
  <slot></slot>
 </div>
</template>
<script>
import BScroll from 'better-scroll';
const DIRECTION_H = 'horizontal';
const DIRECTION_V = 'vertical';
export default {
 name: 'scroll',
 props: {
  /**
   * 1 滚动的时候会派发scroll事件，会节流。
   * 2 滚动的时候实时派发scroll事件，不会节流。
   * 3 除了实时派发scroll事件，在swipe的情况下仍然能实时派发scroll事件
   */
  probeType: {
   type: Number,
   default: 1
  },
  /**
   * 点击列表是否派发click事件
   */
  click: {
   type: Boolean,
   default: true
  },
  /**
   * 是否开启横向滚动
   */
  scrollX: {
   type: Boolean,
   default: false
  },
  /**
   * 是否派发滚动事件
   */
  listenScroll: {
   type: Boolean,
   default: false
  },
  /**
   * 列表的数据
   */
  data: {
   type: Array,
   default: null
  },
  pullup: {
   type: Boolean,
   default: false
  },
  pulldown: {
   type: Boolean,
   default: false
  },
  beforeScroll: {
   type: Boolean,
   default: false
  },
  /**
   * 当数据更新后，刷新scroll的延时。
   */
  refreshDelay: {
   type: Number,
   default: 20
  },
  direction: {
   type: String,
   default: DIRECTION_V
  }
 },
 methods: {
  _initScroll() {
   if(!this.$refs.wrapper) {
    return
   }
   this.scroll = new BScroll(this.$refs.wrapper, {
    probeType: this.probeType,
    click: this.click,
    eventPassthrough: this.direction === DIRECTION_V "color: #ff0000">固定头部

 
头部相对页面是固定的，这里我把头部都封装成了组件，在主页面引入头部，要滑动的部分放入上面定义好的scroll组件即可
侧边栏以及弹出框

起初我的想法是用router-link直接跳转，然后发现这样做页面会自带导航栏，于是我决定通过CSS动态绑定来实现它


<template>
 <div class="sidebar">
  <div class="sidebar-con" :class="{showbar: showSidebar}">
   <div class="navbar_left" @click="backTo">
    <img src="/UploadFiles/2021-04-02/zuo.png">

样式用的是Vant UI组件，最外面绑定了一个动态样式showbar，然后把整体的初始位置设在屏幕之外，当传入参数为true时再回来，用Vuex管理它的状态


.sidebar-con {
 position: absolute;
 top: 0;
 left: -400px;
 transform: translateZ(0);
 opacity: 0;
 width: 100%;
 z-index: 1002;
 height: 100%;
 overflow: auto;
 transition: all 0.3s ease;
}
.showbar {
 transform: translateX(400px);
 opacity: 1;
}


Vuex状态管理


const state = {
 showSidebar: false
}
const mutations = {
 [types.COM_SHOW_SIDE_BAR] (state, status) {
  state.showSidebar = status
 }
}
const actions = {
 setShowSidebar ({commit}, status) {
  commit(types.COM_SHOW_SIDE_BAR, status)
 }
}
const getters = {
 showSidebar: state => state.showSidebar
}


用mapGetter拿到对象，然后传给computed属性，对象可以直接使用


computed: {
  ...mapGetters([
   'showSidebar'
  ])
 },


当需要显示的时候使用dispatch将参数传入 this.$store.dispatch('setShowSidebar', true)
整体代码


<template>
 <div class="sidebar">
  <div class="sidebar-con" :class="{showbar: showSidebar}">
   <div class="navbar_left" @click="backTo">
    <img src="/UploadFiles/2021-04-02/zuo.png">

外卖点餐



这里参考的是慕课网黄奕大大的课程，课程地址
商品展示


<template>
 <div class="takeout" :class="{showtakeout: showTakeout}">
  <div class="goods">
   <div class="header">
    <div class="navbar_left" @click="backTo">
     <img src="/UploadFiles/2021-04-02/zuo.png">

这里通过currentIndex和index做对比，来确认是否添加current类，通过添加current类来实现当前页面的区域的样式变化，他们之间的对比关系也就是menu区域和foods区域的显示区域的对比关系
需要注意的是vue传递原生事件使用$event


<script>
import BScroll from 'better-scroll'
import cartcontrol from './cartcontrol'
import submitBar from './submitBar'
import { mapGetters } from 'vuex'
export default {
 name: 'takeout',
 data() {
  return {
   goods: [],
   listHeight: [],
   scrollY: 0
  }
 },
 components: {
  cartcontrol,
  submitBar
 },
 computed: {
  ...mapGetters([
   'showTakeout'
  ]),
  currentIndex () {
   for(let i = 0; i < this.listHeight.length; i++) {
    let height1 = this.listHeight[i - 1]
    let height2 = this.listHeight[i]
    if (!height2 || (this.scrollY >= height1 && this.scrollY < height2)) {
     return i
    }
   }
   return 0
  },
  selectFoods () {
   let foods = []
   this.goods.forEach(good => {
    good.foods.forEach(food => {
     if (food.count) {
      foods.push(food)
     }
    })
   })
   return foods
  }
 },
 methods: {
  backTo () {
   this.$store.dispatch('setShowTakeout', false)
  },
   selectMenu(index, event) {
   if (!event._constructed) {
    return;
   }
   let foodList = this.$refs.foodList;
   let el = foodList[index];
   this.foodsScroll.scrollToElement(el, 300);
  },
  selectFood(food, event) {
   if (!event._constructed) {
    return;
   }
   this.selectedFood = food;
  },
  _initScroll() {
   this.meunScroll = new BScroll(this.$refs.menuWrapper, {
    click: true
   })
   this.foodsScroll = new BScroll(this.$refs.foodsWrapper, {
    click: true,
    probeType: 3
   })
   this.foodsScroll.on('scroll', pos => {
    this.scrollY = Math.abs(Math.round(pos.y))
   })
  },
  _calculateHeight () {
   let foodList = this.$refs.foodList
   let height = 0
   for (let i = 0; i < foodList.length; i++) {
    let item = foodList[i]
    height += item.clientHeight
    this.listHeight.push(height)
   }
  },
 },
 created () {
  this.$http.get('https://www.easy-mock.com/mock/5ca49494ea0dc52bf3b67f4e/example/takeout')
   .then(res => {
    if (res.data.errno === 0) {
     this.goods = res.data.data
     this.$nextTick(() => {
      this._initScroll()
      this._calculateHeight()
     })
    }
   })
 }
}
</script>


购物车


<template>
<div class="submitBar">
 <van-submit-bar
 :loading="setloading"
 :price="totalPrice"
 button-text="提交订单"
 @submit="onSubmit"
>
 <div class="shoppingCart" @click="toggleList">
  <img src="/UploadFiles/2021-04-02/gwc.png">

购物车列表的显示和隐藏以及清空按钮是通过数据fold来决定的，购物车列表是通过计算属性listshow来实现，清空按钮也是通过设置count属性来实现，这样都达到了不用操作dom就可以改变dom行为的效果。


<script>
import { SubmitBar } from 'vant';
import BScroll from 'better-scroll';
import cartcontrol from './cartcontrol';
export default {
 props: {
  selectFoods: {
   type: Array,
   default() {
    return [
     {
      price: 10,
      count: 1
     }
    ]
   }
  },
 },
 data() {
  return {
   setloading: false,
   fold: true
  }
 },
 computed: {
  totalCount () {
   let count = 0
   this.selectFoods.forEach((food) => {
    count += food.count
   })
   return count
  },
  totalPrice () {
   let total = 0
   this.selectFoods.forEach((food) => {
    total += food.price * food.count * 100
   })
   return total
  },
  listShow () {
   if (!this.totalCount) {
    this.fold = true
    return false
   }
   let show = !this.fold
   if (show) {
    this.$nextTick(() => {
     if (!this.scroll) {
      this.scroll = new BScroll(this.$refs.listContent, {
       click: true
      })
     } else {
      this.scroll.refresh()
     }
    })
   }
   return show
  }
 },
 methods: {
  toggleList(){
   console.log(this.totalCount)
   if (!this.totalCount) {
    return;
   }
   this.fold = !this.fold;
  },
  onSubmit() {
   this.setloading = true
  },
  empty() {
   this.selectFoods.forEach((food) => {
    food.count = 0;
   });
  },
  hideList() {
   this.fold = true;
  },
  addFood() {}
 },
 components: {
  cartcontrol
 }
}
</script>


操作按钮
这个模块主要通过三个小模块实现,删除按钮,显示数量块,增加按钮


<template>
 <div class="cartcontrol">
  <transition name="move">
   <div class="cart-decrease" v-show="food.count > 0" @click="decreaseCart">
    <div class="inner">
     <img width="15px" height="15px" src="/UploadFiles/2021-04-02/jian.png">

addCart以及decreaseCart方法，默认会传入event原生dom事件，food数据是从父组件传入的，所以对这个数据的修改，也能够反应到父组件，也因为购物车的数据也是从父组件传入的，使用同一个food数据，从而关联到购物车的购买数量统计。


<script>
export default {
 name: "cartcontrol",
 props: {
  food: {
   type: Object
  }
 },
 data() {
  return {

  }
 },
 methods: {
  addCart (event) {
   console.log(event)
   if (!event._constructed) {
    return
   }
   if (!this.food.count) {
    this.$set(this.food, 'count', 1)
   } else {
    this.food.count++
   }
   this.$emit('add', event.target)
  },
  decreaseCart (event) {
   if (!event._constructed) {
    return
   }
   if (this.food.count) {
    this.food.count--
   }
  }
 },
}
</script>


异步问题



<div class="various" v-for="(item,index) in various" :key="index">
  <div class="title">
   <div class="strip"></div>
   <p>{{item[0].name}}</p>
   <div class="strip"></div>
  </div>
  <div class="various_img">
   <div class="various_title">
    <img :src="/UploadFiles/2021-04-02/item[0].urll">

这里循环嵌套，整个DOM结构都是循环出来的，而better-scroll需要操作DOM结构，要实现横向滑动效果，难免会有异步问题。
可是无论我使用.then或者$nextTick都无法挂载better-scroll，查阅了大量文档也无法解决，最后只能使用原生的overflow-X，若是有解决办法，欢迎提出，感激不尽!
结语
总的来说这个项目还有很多不足，实现的功能也很少，后续我会继续改进。
如果这篇文章对你有帮助，不妨点个赞吧！
GitHub地址
总结
以上所述是小编给大家介绍的Vue实战教程之仿肯德基宅急送App,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

        
        

            
上一篇：使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
            
下一篇：微信小程序 扭蛋抽奖机css3动画实现详解
        
        
一句话新闻
高通与谷歌联手！首款骁龙PC优化Chrome浏览器发布
高通和谷歌日前宣布，推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中，全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前，搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世，有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示，此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。