Vue.js 2 高仿饿了么开发及解注六:goods 商品件组

Vue.js 2 高仿饿了么开发及解注六

欢迎交换友链: laker.me–进击的程序媛
Github:https://github.com/younglaker
V信: lakerHQ (请注明‘来自博客’)

慕课网早期出了《Vue.js 1 高仿饿了么APP》的课程,本系列文章根据课程,使用 Vue.js 2 版本进行开发,并进行了一步步开发流程记录和详细的代码注解。

原作者的代码

我做的含有详细代码注解的版本


购物车组件

功能: 点击购物车组件(不只是购物车logo,是整个底部的购物车栏),弹出购物车详情列表,可以删减数量、清空购物车。付款功能

shopcart.vue 引入并注册 cartcontrol 组件

1
2
3
4
5
6
7
// “添减食品” 组件
import cartcontrol from 'components/cartcontrol/cartcontrol'
...
components: {
cartcontrol
}

购物车清单HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!-- 点击购物车logo出来的购物列表 -->
<!-- 折叠动画 fold -->
<transition name="fold">
<!-- 根据 listShow 的值来显示列表 -->
<div class="shopcart-list" v-show="listShow">
<div class="list-header">
<h1 class="title">购物车</h1>
<span class="empty" @click="empty">清空</span>
</div>
<!-- 购物清单 -->
<!-- 定义了 ref="listContent",可以传入BS插件,滑动购物清单 -->
<div class="list-content" ref="listContent">
<ul>
<!-- 展示加进购物车的食品、数量、价钱 -->
<!-- goods组件传进来的selectFoods -->
<li class="food" v-for="food in selectFoods">
<span class="name">{{food.name}}</span>
<div class="price">
<span>{{food.price*food.count}}</span>
</div
<div class="cartcontrol-wrapper">
<!-- “添减食品” 组件 -->
<!-- 传入当前 food -->
<cartcontrol @add="addFood" :food="food"></cartcontrol>
</div>
</li>
</ul>
</div>
</div>
</transition>

购物车清单JavaScript部分
先定义一个购物车清单的折叠的标记

1
2
3
4
5
6
data () {
return {
...
fold: true
}
},

通过fold来触发计算listShow(),HTML根据listShow()的返回值来展开、折叠

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!-- 根据 listShow 的值来显示列表 -->
<div class="shopcart-list" v-show="listShow">
computed: {
/* 判断购物车详情列表折叠、打开状态 */
listShow () {
// 若购物车里没有东西,则折叠标记fold = true,跳出整个函数
if (!this.totalCount) {
this.fold = true
return false
}
// 能运行到这里,说明购物车里有东西,fold=false,所以show=true
let show = !this.fold
if (show) {
// 购物清单超过高度,添加 BScroll 插件,可以滑动清单
this.$nextTick(() => {
// 如果this.scroll不存在,则创建
if (!this.scroll) {
// 传入DOM <div class="list-content" ref="listContent">,定义了 ref="listContent"
this.scroll = new BScroll(this.$refs.listContent, {
click: true
})
} else { // 如果this.scroll存在,则更新(插件重新计算内容是否超出固定高度来使用滑动)
this.scroll.refresh()
}
})
}
return show
}
},

点击触发的展开、折叠:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!-- 底部购物车 -->
<!-- 点击触发折叠/展开购物车清单 -->
<div class="content" @click="toggleList">
<!-- @click="hideList":点击阴影遮罩,收起购物车清单 -->
<div class="list-mask" @click="hideList" v-show="listShow"></div>
methods: {
/* 折叠/展开购物车清单 */
toggleList () {
// 如果购物车为空,则退出
if (!this.totalCount) {
return
}
// 此时购物车不为空,点击购物车组件,设置fold为之前的相反值
this.fold = !this.fold
},
/* 收起购物车清单 */
hideList () {
// fold值的变化,会触发listShow()重新计算
this.fold = true
},
}

清空购物车:

1
2
3
4
5
6
7
8
<span class="empty" @click="empty">清空</span>
/* 清空购物车 */
empty () {
this.selectFoods.forEach((food) => {
food.count = 0
})
}

付款:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!-- 结算按钮 -->
<!-- .stop.prevent 阻止事件冒泡,避免点击付款时,触发整个购物条的点击事件(显示购物清单) -->
<div class="content-right" @click.stop.prevent="pay">
<div class="pay" :class="payClass">
{{payDesc}}
</div>
</div>
computed: {
/* 付款按钮的字样 */
payDesc () {
if (this.totalPrice === 0) {
// ES6字符串拼接: `字符串${变量}字符串` 等同于'字符串'+变量+'字符串'
// 注意是反引号 ` ,而不是单引号 '
return `¥${this.minPrice}元起送`
} else if (this.totalPrice < this.minPrice) {
// totalPrice是上面的totalPrice(),minPrice是从goods.vue传进来的
let diff = this.minPrice - this.totalPrice
return `还差¥${diff}元起送`
} else {
return '去结算'
}
},
/* 付款按钮的CSS类 */
payClass () {
if (this.totalPrice < this.minPrice) {
return 'not-enough'
} else {
return 'enough'
}
}
},
methods: {
/* 付款 */
pay () {
// 如果购买金额不足最低消费要求,则退出函数
if (this.totalPrice < this.minPrice) {
return
}
window.alert(`支付${this.totalPrice}元`)
}
}

Vue.js 2 高仿饿了么开发及解注六:goods 商品件组

本文原创自http://laker.me/blog,转载请注明出处,欢迎交换友链

如果本文对您有帮助,微信扫一扫,请我喝杯咖啡吧

评论组件不稳定,有事请联系V信 lakerHQ (请备注来自博客)