vue2.0:(九)、外卖App弹窗部分星星评分
本篇是星星评分部分,先上代码:
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弹窗部分星星评分的更多相关文章
- 项目vue2.0仿外卖APP(五)
header组件 vue-resourse应用 https://github.com/pagekit/vue-resource vue-resource是Vue.js的一款插件,它可以通过XMLHtt ...
- 项目vue2.0仿外卖APP(六)
goods 商品列表页开发 布局编写 除了商品之外还有购物车,还有个详情页,挺复杂的. 两栏布局:左侧固定宽度,右侧自适应,还是用flex. 因为内容可能会超过手机高度,超过就隐藏.左右两侧的内容是可 ...
- 项目vue2.0仿外卖APP(四)
组件拆分 先把项目搭建时生成的代码给清了吧 现在static目录下引入reset.css 接着在index.html引入,并且设置<meta> 有时候呢,为了让代码符合我们平时的编码习惯, ...
- 项目vue2.0仿外卖APP(一)
最近用vue.js做一个仿饿了么外卖APP的项目,现在也把流程啊什么的暂时先整理一下在这个博客上面. 当然,这个过程会有点长,不过确实能学到很多东西. 话不多说,马上开始吧. 1.项目介绍 选用当前最 ...
- 项目vue2.0仿外卖APP(二)
vue-cli开启vue.js项目 github地址:https://github.com/vuejs/vue-cli Vue.js开发利器vue-cli,是vue的脚手架工具. 在工地上,脚手架是工 ...
- 项目vue2.0仿外卖APP(七)
ratings评价列表页实现 在ratings.vue组件里开发 首先先引入seller数据: 书写模板结构: 由于评价页又有之前写过的star.vue组件,所以又要在ratings.vue组件引入: ...
- 项目vue2.0仿外卖APP(三)
项目的结构如下: 项目资源准备 准备项目的各种图片资源等等 注意:在webpack可以不用css sprite,直接用单张图片,因为它会帮忙打包. 还有SVG图片, ...
- vue2.0:(八)、外卖App弹窗部分知识点总结
本篇文章是对外卖App弹窗部分知识点的总结. 知识点一:如何从接口取出不同的图片. 答: 1.header.vue: 代码: <ul v-if="seller.supports&quo ...
- vue2.0:(八-2)、外卖App弹窗部分sticky footer
什么是sticky-footer ? 如果页面内容不够长的时候,页脚块粘贴在视窗底部,如果内容足够长时,页脚块会被内容向下推送.那具体要怎么做呢?下面以外卖App为例: 第一种方法:这个自己用过,是好 ...
随机推荐
- 【运维程序】简单的命令控制器(支持定时命令执行、重复定时任务命令和进程管理,开发这个小程序主要是为了方便管理服务进程)【个人github项目】
一.前言: command-controller 一个运维程序,简单的命令控制器(支持定时命令执行和重复定时命令,开发这个程序主要是为了方便管理服务进程) 本来是要用python做的,但是之前做ffm ...
- 一次LVS+MySQL的主主负载均衡实战
这是去年做的一个项目的记录,如果大家有更好的解决方案,欢迎指出. 先说说项目需求,用户需要在两个地市部署两套应用系统和两套数据库,在一个地市主用,在另一个热备:数据要互备:而且如果主用地市流量很大,可 ...
- Pokemon Master
Pokemon Master Time Limit : 4000/2000ms (Java/Other) Memory Limit : 131072/65536K (Java/Other) Total ...
- cookie,sessionStorage 和 localStorage
1.三者之间的区别 cookie是网站为了标示用户身份而储存在用户本地终端(Client Side)上的数据(通常经过加密). cookie数据始终在同源的http请求中携带(即使不需要),记会在浏览 ...
- 【239】◀▶IEW-Unit04
Unit 4 Youth Issues: Computer Use 1 Model1题目及范文分析 Some teenagers spend a lot of time playing compute ...
- linux系统下file使用的magic文件格式说明
magic 本手册是file命令所使用的magic文件的格式说明文档,版本是5.04. file命令用于识别文件类型,其他检测,检测文件内容中是否符合 'magic模式',也就是规则. /usr/sh ...
- 远程抓取win7 的用户登录时间
protected void Page_Load(object sender, EventArgs e) { InvokeSystemPS("query user /server:192.1 ...
- conntrack-tools使用
基础用法 系统配置 ### 开启流数据包统计(packets和bytes) # echo "net.netfilter.nf_conntrack_acct=1" >> ...
- python矩阵相加
举个栗子: # 两个 3 行 3 列的矩阵,实现其对应位置的数据相加,并返回一个新矩阵: # 使用 for 迭代并取出 X 和 Y 矩阵中对应位置的值,相加后放到新矩阵的对应位置中. import n ...
- java.lang.IllegalStateException: Cannot get a STRING value from a NUMERIC cell
异常 在使用POI读取Excel文件内容时,发生了异常,报错如下: 大概意思是不能从一个数值的列获取一个字符串类型的值,我使用下面的代码来获取单元格的值: //此处省略N行代码 String cell ...