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>