本篇是星星评分部分,先上代码:

1.header.vue:

<template>
  <transition name="fade">
            <div v-show="detailShow" class="detail">
                <div class="detail-wrapper clearfix">
                    <div class="detail-main">
                        <h1 class="name">{{seller.name}}</h1>
                        <div class="star-wrapper">
                            <star :size="48" :score = "seller.score"></star> <!--忽略其他,红色部分为星星评分有效代码,这里是使用星星组件,并且这里绑定了size和score,使得在star.vue里也能取到。
                        </div>
                        <div class="title">
                            <div class="line"></div>
                            <div class="text">优惠信息</div>
                            <div class="line"></div>
                        </div>
                        <ul v-if="seller.supports" class="supports">
                            <li class="support-item" v-for="(item,index) in seller.supports">
                                <span class="icon" :class="classMap[seller.supports[index].type]"></span>
                                <span class="text">{{seller.supports[index].description}}</span>
                            </li>
                        </ul>
                        <div class="title">
                            <div class="line"></div>
                            <div class="text">商家公告</div>
                            <div class="line"></div>
                        </div>
                        <div class="bulletin">
                            <p class="content">{{seller.bulletin}}</p>
                        </div>
                    </div>
                </div>
                <div class="detail-close" @click="hideDetail">
                    <i class="icon-close">*</i>
                </div>
            </div>
        </transition>
</template>
<script>
import star from 'components/star/star'
; <!-----忽略其他,红色部分为星星评分有效代码,这里是引入星星组件
export default{
props:{
seller:{
type:Object
}
},
data(){
return {
detailShow:false
};
},
methods:{
showDetail(){
this.detailShow = true;
},
hideDetail(){
this.detailShow = false;
}
},
created() {
this.classMap = ['decrease','discount','special','invoice','guarantee'];
},
components:{ <!-----忽略其他,红色部分为星星评分有效代码,这里加入星星组件作为header的子组件。
star
}

}
</script>

2.star.vue:

<template>
<div class="star" :class="starType">
<span v-for="itemClass in itemClasses" :class="itemClass" class="star-item" track-by ="$index"></span>
<!-- v-for="(itemClass,index) in itemClasses" -->
</div>
</template>
<script>
const LENGTH = 5;
const CLS_ON = 'on';
const CLS_HALF = 'half';
const CLS_OFF = 'off';
export default{
props:{
size:{
type:Number
},
score:{
type:Number
}
},
computed:{
starType(){
return 'star-'+this.size;
},
itemClasses(){
let result = [];
let score = Math.floor(this.score *2) /2;// 通过分数算星星个数
// 向下取0.5的公式。floor() 执行向下取整
// floor(3.3 * 2) / 2 = 3 即 3颗全星+2颗无星
// floor(3.6 * 2) / 2 = 3.5 即 3颗全星+1颗半星+1颗无星
let hasDecimal = score % 1 !== 0;// 取余不为0则有半星
let integer = Math.floor(score);// 整数部分
for(let i=0;i<integer;i++){// 设置全星
result.push(CLS_ON);
}
if(hasDecimal){
result.push(CLS_HALF);
}
while(result.length < LENGTH){// 循环,补充无星
result.push(CLS_OFF);
}
return result;
}
}
}
</script>
<style lang='less'>
@import "../../common/style/mixin.less";
.star{
font-size:0;
.star-item{
display:inline-block;
background-repeat:no-repeat;
}
&.star-48{
.star-item{
width:20px;
height:20px;
margin-right:22px;
background-size:20px 20px;
&:last-child{
margin-right:0;
}
&.on{
.bg-image('star48_on')
}
&.half{
.bg-image('star48_half')
}
&.off{
.bg-image('star48_off')
}
}
}
&.star-36{
.star-item{
width:15px;
height:15px;
margin-right:6px;
background-size:15px 15px;
&:last-child{
margin-right:0;
}
&.on{
.bg-image('star36_on')
}
&.half{
.bg-image('star36_on')
}
&.off{
.bg-image('star36_on')
}
}
}
&.star-24{
.star-item{
width:10px;
height:10px;
margin-right:3px;
background-size:10px 10px;
&:last-child{
margin-right:0;
}
&.on{
.bg-image('star24_on')
}
&.half{
.bg-image('star24_on')
}
&.off{
.bg-image('star24_on')
}
}
}
}
</style>

vue2.0:(九)、外卖App弹窗部分星星评分的更多相关文章

  1. 项目vue2.0仿外卖APP(五)

    header组件 vue-resourse应用 https://github.com/pagekit/vue-resource vue-resource是Vue.js的一款插件,它可以通过XMLHtt ...

  2. 项目vue2.0仿外卖APP(六)

    goods 商品列表页开发 布局编写 除了商品之外还有购物车,还有个详情页,挺复杂的. 两栏布局:左侧固定宽度,右侧自适应,还是用flex. 因为内容可能会超过手机高度,超过就隐藏.左右两侧的内容是可 ...

  3. 项目vue2.0仿外卖APP(四)

    组件拆分 先把项目搭建时生成的代码给清了吧 现在static目录下引入reset.css 接着在index.html引入,并且设置<meta> 有时候呢,为了让代码符合我们平时的编码习惯, ...

  4. 项目vue2.0仿外卖APP(一)

    最近用vue.js做一个仿饿了么外卖APP的项目,现在也把流程啊什么的暂时先整理一下在这个博客上面. 当然,这个过程会有点长,不过确实能学到很多东西. 话不多说,马上开始吧. 1.项目介绍 选用当前最 ...

  5. 项目vue2.0仿外卖APP(二)

    vue-cli开启vue.js项目 github地址:https://github.com/vuejs/vue-cli Vue.js开发利器vue-cli,是vue的脚手架工具. 在工地上,脚手架是工 ...

  6. 项目vue2.0仿外卖APP(七)

    ratings评价列表页实现 在ratings.vue组件里开发 首先先引入seller数据: 书写模板结构: 由于评价页又有之前写过的star.vue组件,所以又要在ratings.vue组件引入: ...

  7. 项目vue2.0仿外卖APP(三)

    项目的结构如下:                   项目资源准备 准备项目的各种图片资源等等 注意:在webpack可以不用css sprite,直接用单张图片,因为它会帮忙打包. 还有SVG图片, ...

  8. vue2.0:(八)、外卖App弹窗部分知识点总结

    本篇文章是对外卖App弹窗部分知识点的总结. 知识点一:如何从接口取出不同的图片. 答: 1.header.vue: 代码: <ul v-if="seller.supports&quo ...

  9. vue2.0:(八-2)、外卖App弹窗部分sticky footer

    什么是sticky-footer ? 如果页面内容不够长的时候,页脚块粘贴在视窗底部,如果内容足够长时,页脚块会被内容向下推送.那具体要怎么做呢?下面以外卖App为例: 第一种方法:这个自己用过,是好 ...

随机推荐

  1. BZOJ1146:[CTSC2008]网络管理

    浅谈树状数组与线段树:https://www.cnblogs.com/AKMer/p/9946944.html 题目传送门:https://www.lydsy.com/JudgeOnline/prob ...

  2. Java 核心读书笔记 第11章

    1. 异常 用户希望在出现错误时,程序能够采用一些理智的行为. 如果由于出现错误而使得某些操作无法完成,程序应该:  返回到一种安全状态,并能够进行一些其他的命令: 或者:允许用于保存所有操作的结果, ...

  3. Spring 源码解析之DispatcherServlet源码解析(五)

    spring的整个请求流程都是围绕着DispatcherServlet进行的 类结构图 根据类的结构来说DispatcherServlet本身也是继承了HttpServlet的,所有的请求都是根据这一 ...

  4. java-并发-进程和线程

    浏览以下内容前,请点击并阅读 声明 软件的并发是指同时做多件事情,java平台一开始就支持并发编程,java编程语言以及类库含有对并发最基本的支持,从5.0版本开始,java平台开始包含一些高并发的A ...

  5. ubuntu在recovery模式下更改用户密码

    http://www.jb51.net/os/Ubuntu/164636.html 1, restart 2, Hold down shift key / press and hold 3, sele ...

  6. how to run faster

    题目大意: 已知 $$ b_i = \sum_{j=1}^n {(i,j)^d [i,j]^c x_j}$$,给定 $b_i$ 求解 $x_i$ 解法: 考虑 $f(n) = \sum_{d|n}{f ...

  7. linux&nbsp;ip地址自动获取,ip地址…

    linux ip地址自动获取,ip地址手动设置(图文解释) 2011-04-19 16:19:31| 分类: 服务器(appache/n | 标签: |字号大中小 订阅 linux ip地址自动获取( ...

  8. 《SpringBoot揭秘 快速构建微服务体系》读后感(四)

    再谈自动配置 基于条件的自动配置 调整自动配置的顺序

  9. redis需要掌握的知识点

  10. Microsoft EBooks

    Go pick up what you are interested J http://blogs.msdn.com/b/mssmallbiz/archive/2014/07/07/largest-c ...