此
项目为
外卖App核心的商家模块的SPA，包括商品、评论、商家介绍、购物车等多个子模块，使用
Vuejs全家桶+ES6+Webpack等前端最新最热的技术，采用模块化、组件化、工程化的模式
开发；
显示/隐藏优惠和公告详情
<template>
<div class="header">
<div class="content-wr
apper">
<div class="avatar">
<img width="64" height="64"src="seller
.avatar">
</div>
<div class="content">
<div class="title">
<span class="brand"></span>
<span class="name">{{seller
.name}}</span>
</div>
<div class="description">
{{seller
.description}}/{{seller
.deliveryTime}}分钟到达
</div>
<div class="support" v-if="seller
.supports">
<span class="icon"
:class="classMap[seller
.supports[0]
.type]"></span>
<span class="text">{{seller
.supports[0]
.description}}</span>
</div>
</div>
<div class="supports_count" v-if="seller
.supports" @click="showDetail
(true
)">
<span class="count">{{seller
.supports
.length}}个</span>
<span class="icon-keyboard_arrow_right"></span>
</div>
</div>
<div class="bulletin-wr
apper" @click="showDetail
(true
)">
<span class="bulletin-title"></span>
<span class="bulletin-text">{{seller
.bulletin}}</span>
<i class="icon-keyboard_arrow_right"></i>
</div>
<div class="background">
<img width="100%" height="100%"src="seller
.avatar">
</div>
<div class="detail" v-show="detailShow">
<div class="detail-wr
apper">
<div class="detail-main clearfix">
<div class="name">{{seller
.name}}</div>
<div class="star-wr
apper">star组件内容</div>
<div class="title">
<div class="line"></div>
<div class="text">优惠信息</div>
<div class="line"></div>
</div>
<ul class="supports" v-if="seller
.supports">
<li class="support" v-for="item in seller
.supports">
<span class="icon"
:class="classMap[item
.type]"></span>
<span class="text">{{item
.description}}</span>
</li>
</ul>
<div class="title">
<div class="line"></div>
<div class="text">商家公告</div>
<div class="line"></div>
</div>
<div class="content">
<p>{{seller
.bulletin}}</p>
</div>
</div>
</div>
<div class="detail-close" @click="showDetail
(false
)">
<span class="icon-close"></span>
</div>
</div>
</div>
</template>
[removed]
export default{
props
: {
seller
: {
type
: Object
}
},
data
() {
return {
detailShow
: false
}
},
created
() {
this
.classMap = ["decrease", "discount", "guarantee", "invoice", "special"]
},
methods
: {
showDetail
(isShow
) {
this
.detailShow = isShow
}
}
}
[removed]
本文介绍了一个使用Vue.js高仿饿了吗外卖APP的项目，涵盖Vue的数据驱动、组件化、项目技术架构，以及页面骨架、header组件、商品列表页、商品详情页、评价列表页和商家详情页的开发过程。涉及HTML、CSS、JavaScript和ES6的基础知识，以及Vue-cli、vue-router、webpack等工具的使用。
最低0.47元/天 解锁文章
扫一扫
3246
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
