更新记录

1.0.0（2023-07-09） 下载此版本

组件初始化

平台兼容性

cc-starEvaluate

使用方法

<!-- stars:星级数据 @click：点击事件 -->
<cc-starEvaluate :stars="stars" @click="setStar"></cc-starEvaluate>

<!-- 设置数据 默认五星 -->
            stars: [{
                        id: 1,
                        types: true,

                    },
                    {
                        id: 2,
                        types: true,

                    },
                    {
                        id: 3,
                        types: true,

                    },
                    {
                        id: 4,
                        types: true,

                    },
                    {
                        id: 5,
                        types: true,

                    },
                ],

HTML代码实现部分

<template>
    <view>
        <view class="evaluate">

            <view class="Rate">
                <p>整体评价</p>
                <!-- stars:星级数据 @click：点击事件 -->
                <cc-starEvaluate :stars="stars" @click="setStar"></cc-starEvaluate>

            </view>

            <view class="Rate">
                <p>物流评价</p>
                <!-- stars:星级数据 @click：点击事件 -->
                <cc-starEvaluate :stars="starsTwo" @click="setStarTwo"></cc-starEvaluate>

            </view>

        </view>

    </view>
</template>
<script>
    export default {
        data() {
            return {

                // 默认五星
                stars: [{
                        id: 1,
                        types: true,

                    },
                    {
                        id: 2,
                        types: true,

                    },
                    {
                        id: 3,
                        types: true,

                    },
                    {
                        id: 4,
                        types: true,

                    },
                    {
                        id: 5,
                        types: true,

                    },
                ],

                // 默认0星
                starsTwo: [{
                        id: 1,
                        types: false,

                    },
                    {
                        id: 2,
                        types: false,

                    },
                    {
                        id: 3,
                        types: false,

                    },
                    {
                        id: 4,
                        types: false,

                    },
                    {
                        id: 5,
                        types: false,

                    },
                ],

            };
        },

        onLoad(options) {

        },
        methods: {

            // 总体评价
            setStar(value) { 

                console.log("stars = " + value);
                uni.showModal({
                    title:'点击评价',
                    content:'点击评价 = ' + value + '星'
                })
            },

            // 物流评价
            setStarTwo(value) { 

                console.log("stars = " + value);
                uni.showModal({
                    title:'点击评价',
                    content:'点击评价 = ' + value + ' 星'
                })
            },
        }
    };
</script>

<style lang="scss" scoped>
    page {
        background-color: #F8F8F8;
    }

    .evaluate {
        margin: 0 4%;
        background-color: #FFFFFF;
        box-shadow: 0upx 0upx 10upx #DDDDDD;
        border-radius: 8upx;
        position: relative;
        top: 20upx;

        .Rate {
            padding: 0upx 30upx 30upx;
            background-color: #FFFFFF;
            border-bottom: 1upx solid #eee;

            p {
                height: 60upx;
                line-height: 60upx;
                font-size: 30upx;
                color: #333;
            }

        }
     }
</style>