此项目为外卖App核心的商家模块的SPA,包括商品、评论、商家介绍、购物车等多个子模块,使用Vuejs全家桶+ES6+Webpack等前端最新最热的技术,采用模块化、组件化、工程化的模式开发;
显示/隐藏优惠和公告详情
<template>
<div class="header">
<div class="content-wrapper">
<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-wrapper" @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-wrapper">
<div class="detail-main clearfix">
<div class="name">{{seller.name}}</div>
<div class="star-wrapper">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]
0
351
638KB
2019-08-17
26