永兴集团(中国区)官方网站-Macau App Station

不管是商城、O2O等类型的小程序都需要用到评价，而星星评价是最常用的类型，永兴集团今天分享平时在项目制作中如何实现星星评价。

评价结果
上图是评价后的结果，主要分为三项评价，平均得出综合评价，那么就需要用户选择三项星星评价,如下图

提交评价
实现的要点是如何通过点击星星自动实现评价效果，如点击第三颗星星就自动变成3星。

WXML代码如下
服务态度得分view>



view>

view>

view>

view>

view>

view>

view>



服务质量得分view>



view>

view>

view>

view>

view>

view>

view>



服务效率得分view>



view>

view>

view>

view>

view>

view>

view>



textarea><br />
view><br />
<view class="btn"><br />
<button form-type="submit">确定提交button><br />
view><br />
form><br />
view><br />
view><br />
<br />
WXSS代码如下：<br />
<br />
.container {<br />
background: #f0f0f0;<br />
}<br />
.comment_box{<br />
width:100%;<br />
}<br />
.comment_item{<br />
width:100%;<br />
padding:0 20rpx;<br />
height:100rpx;<br />
line-height:100rpx;<br />
display:flex;<br />
flex-direction:row;<br />
justify-content:space-between;<br />
box-sizing:border-box;<br />
border-bottom:1px dotted #eee;<br />
background-color:#fff;<br />
}<br />
.comment_item_t{<br />
font-size:32rpx;<br />
height:100rpx;<br />
line-height:100rpx;<br />
color: #333333;<br />
}<br />
.comment_item_star{<br />
display:flex;<br />
flex-direction:row;<br />
}<br />
.comment_item_star .star{<br />
z-index: 1;<br />
width:80rpx;<br />
height:100rpx;<br />
background-image: url("亮色星星图片");<br />
background-size:20px 19px;<br />
background-position:center center;<br />
background-repeat:no-repeat;<br />
}<br />
.comment_item_star .star_gray{<br />
background-image: url("灰色星星图片");<br />
}<br />
.comment_text textarea{<br />
width:100%;<br />
height:256rpx;<br />
font-size:32rpx;<br />
line-height:64rpx;<br />
color: #333333;<br />
background: #fff;<br />
padding:20rpx;<br />
box-sizing:border-box;<br />
}<br />
.btn button{<br />
width: 670rpx;<br />
height: 90rpx;<br />
line-height:90rpx;<br />
background: #ffda44;<br />
border-radius: 45rpx;<br />
font-size: 32rpx;<br />
margin: 40rpx 40rpx 60rpx 40rpx;<br />
color: #333;<br />
}<br />
 </div>

<div style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 254); font-family: Consolas; font-size: 14px; line-height: 18px; white-space: pre;"><br />
JS代码如下<br />
 
<div style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 254); font-family: Consolas; font-size: 14px; line-height: 18px; white-space: pre;">
<div><br />
var util = require('../../utils/util.js')<br />
var app = getApp()//获取应用实例<br />
Page({<br />
data: {<br />
star_1: 0,<br />
star_2: 0,<br />
star_3: 0,<br />
order_id:0<br />
},<br />
onLoad:function(e) {<br />
var that = this<br />
var order_id = e.order_id<br />
that.setData({<br />
order_id:order_id<br />
})<br />
},<br />
change_star:function(e) {<br />
var that = this<br />
var star_item = e.currentTarget.dataset.item<br />
var star = e.currentTarget.dataset.star<br />
if (star_item == 'star_1') {<br />
that.setData({<br />
star_1: star<br />
});<br />
}else if(star_item == 'star_2') {<br />
that.setData({<br />
star_2: star<br />
});<br />
} else if (star_item == 'star_3') {<br />
that.setData({<br />
star_3: star<br />
});<br />
}<br />
},<br />
add_comment:function(e) {<br />
var that = this<br />
var star_1 = that.data.star_1<br />
var star_2 = that.data.star_2<br />
var star_3 = that.data.star_3<br />
var detail = e.detail.value.detail<br />
if(star_1 == 0) {<br />
util.showNotice("请针对服务态度打分!")<br />
} else if (star_2 == 0) {<br />
util.showNotice("请针对服务质量打分!")<br />
} else if (star_3 == 0) {<br />
util.showNotice("请针对服务效率打分!")<br />
} else if (detail == "") {<br />
util.showNotice("请填写评价内容!")<br />
} else {<br />
var order_id = that.data.order_id<br />
var session3rd = wx.getStorageSync('session3rd')<br />
var post_data = {<br />
"session3rd": session3rd,<br />
"order_id": order_id,<br />
"star_1": star_1,<br />
"star_2": star_2,<br />
"star_3": star_3,<br />
"detail": detail,<br />
"ctype": 1<br />
}<br />
var url_comment = util.getApiUrl(app, "/Comment/add", "")<br />
util._post_from(url_comment, post_data, function (res) {<br />
console.log('评价侠客返回')<br />
console.log(res)<br />
if (res.data.code = '200') {<br />
wx.showModal({<br />
content: '提交评论成功',<br />
showCancel:false,<br />
success:function(val) {<br />
app.globalData.is_need_update_post_info = true<br />
wx.navigateBack()<br />
}<br />
})<br />
} else {<br />
util.showNotice(res.data.msg)<br />
}<br />
})<br />
}<br />
}<br />
})<br />
 </div>

<div><br />
以上基本就实现了星星评价效果。</div>
</div>
<br />
 </div>
</div>
                    <div class="notice" style="font-size:14px;color:#999;margin-top:10px;">如没特殊注明，文章均为永兴集团原创,转载请注明来自/news/4268.html</div>
                    <script type="text/javascript">
                        var resizeContentID = "editor";
                        var maxWidth = 838;
                        var images = document.getElementById(resizeContentID).getElementsByTagName("img");
                        for (var i = 0; i < images.length; i++) {
                            resizepic(images[i]);
                        }
                        function resizepic(thispic)
                        {
                            thispic.onload = function() {
                                if (thispic.width > maxWidth) {
                                    thispic.style.height = thispic.height * maxWidth / thispic.width + "px";
                                    thispic.style.width = maxWidth + "px";
                                }
                            }
                        }
                        document.oncopy=function(){return false;};
                    </script>
                    <div class="clickbox">
                        上一篇： <a href="/news/4267.html">什么是营销型网站建设和网站关键词的选择优化</a> <br>                    下一篇： <a href="/news/4269.html">微信小程序用户登录授权开发心得分享</a>                    </div>
                </div>
                <div class="case-sj">
                    <div class="title">相关网站设计案例</div>
                    <div class="list clearfix">
                        <ul>
                            <li>
                                <a rel="nofollow" href="/cases/723.html" target="_blank">
                                    <div class="img"><img class="mip-img-popUp-wrapper" src="https://oss.szfangwei.cn/cases/2025-05-28/92xPSjzF.jpg" alt="医疗器械创新网案例图片"></div>
                                    <div class="title">医疗器械创新网</div>
                                </a>
                            </li><li>
                                <a rel="nofollow" href="/cases/679.html" target="_blank">
                                    <div class="img"><img class="mip-img-popUp-wrapper" src="https://oss.szfangwei.cn/cases/2023-12-28/49T25bec.jpg" alt="森鹰窗业小程序案例图片"></div>
                                    <div class="title">森鹰窗业小程序</div>
                                </a>
                            </li><li>
                                <a rel="nofollow" href="/cases/662.html" target="_blank">
                                    <div class="img"><img class="mip-img-popUp-wrapper" src="https://oss.szfangwei.cn/cases/2023-09-26/78K8GXK8.jpg" alt="博岳生物小程序案例图片"></div>
                                    <div class="title">博岳生物小程序</div>
                                </a>
                            </li>                                                    </ul>
                    </div>
                </div>
            </div>
            <div class="rightbox">
                <div class="news-tj">
                    <div class="title">相关资讯</div>
                    <div class="list">
                        <ul>
                            <li>
                                <a href="/news/8865.html">
                                    <div class="t1">【再签】速普仪器小程序开发项目</div>
                                   
                                    <div class="t3">日期：2025-06-06  浏览：6</div>
                                </a>
                            </li><li>
                                <a href="/news/8755.html">
                                    <div class="t1">永兴集团：小程序开发如何助力药...</div>
                                   
                                    <div class="t3">日期：2025-03-27  浏览：830</div>
                                </a>
                            </li><li>
                                <a href="/news/8544.html">
                                    <div class="t1">微信灰度测试送礼物功能，大家...</div>
                                   
                                    <div class="t3">日期：2024-12-20  浏览：1195</div>
                                </a>
                            </li>                        </ul>
                    </div>
                </div>
                <div class="news-tj">
                    <div class="title">常见问题</div>
                    <div class="list">
                        <ul>
                            <li>
                                <a href="/news/6994.html" class="t1">企业网站建设常见问题整理合集【置顶】</a>
                            </li><li>
                                <a href="/news/3728.html" class="t1">在深圳建设一个公司网站多少钱</a>
                            </li><li>
                                <a href="/news/4998.html" class="t1">开发网站需要多久跟这九个因素有关</a>
                            </li>                        </ul>
                    </div>
                </div>
                                <div class="news-tj">
                    <div class="title">最新文章</div>
                    <div class="list">
                        <ul>
                            <li>
                                <a href="/news/4266.html">
                                    <div class="t1">前端制作：非常好用的表单验证插件...</div>
                                   
                                    <div class="t3">浏览量：7499</div>
                                </a>
                            </li><li>
                                <a href="/news/4265.html">
                                    <div class="t1">电商平台设计中的“顺序”问题</div>
                                   
                                    <div class="t3">浏览量：5049</div>
                                </a>
                            </li><li>
                                <a href="/news/4264.html">
                                    <div class="t1">怎么让用户信任一个网站呢 提高网站...</div>
                                   
                                    <div class="t3">浏览量：5136</div>
                                </a>
                            </li><li>
                                <a href="/news/4263.html">
                                    <div class="t1">周鹏谈市场营销</div>
                                   
                                    <div class="t3">浏览量：3487</div>
                                </a>
                            </li><li>
                                <a href="/news/4262.html">
                                    <div class="t1">永兴集团：有了APP、商城 为何还要上...</div>
                                   
                                    <div class="t3">浏览量：4949</div>
                                </a>
                            </li><li>
                                <a href="/news/4261.html">
                                    <div class="t1">一个盈利的网站 要过的三道关</div>
                                   
                                    <div class="t3">浏览量：5695</div>
                                </a>
                            </li>                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <link rel="stylesheet" href="/Public/web2019/js/jquery.fancybox.min.css" />
    <script type="text/javascript" src="/Public/web2019/js/jquery.fancybox.min.js"></script>
    <script type="text/javascript">
    $(function() {
        $("#news-info-con img").each(function(i) {
            if (!this.parentNode.href) {
                $(this).wrap("<a href='" + this.src + "' data-fancybox='fancybox' data-caption='" + this.alt + "'></a>")
            }
        })
        $("[data-fancybox]").fancybox()
    });
    </script>
       <footer>
        <div class="foot-top">
            <ul>
                <li>
                    <div class="title">关于永兴集团</div>
                    <div class="tbox">
                        <div class="txt">
                            永兴集团专注于网站建设、小程序开发，
                            <br />
                            用心做好每一个网站，懂您所需、做您所想！
                            <br />
                            永兴集团比其他网络公司做的更好、做的更多，
                            <br />
                            为客户创造更大的价值，让客户更省心!
                        </div>
                        <a rel="nofollow" href="/about/" class="more">MORE</a>
                    </div>
                </li>
                <li>
                    <div class="title">相关专题</div>
                    <div class="tbox">
                        <a href="/Website/" class="link">企业官网定制</a>
                        <a href="/Xcx/" class="link">小程序定制</a>
                        <a href="/WebDesign/" class="link">品牌网站设计</a>
                        <a href="/tag/" class="link">网站建设标签</a>
                        <a href="/shenzhen/" class="link">深圳网站建设</a>
                        <a href="/gaoduanweb/" class="link">高端网站设计</a>
                        <a href="/gongsiweb/" class="link">公司做网站</a>
                        <a href="/mobile/" class="link">微网站开发</a>
                        <a href="http://www.fwshop.net" target="_blank" class="link">商城系统</a>
                    </div>
                </li>
                <li>
                    <div class="title">凭什么选择永兴集团</div>
                    <div class="tbox">
                        <a class="link" style="cursor:text;">专业设计团队</a>
                        <a class="link" style="cursor:text;">快速响应服务</a>
                        <a class="link" style="color:#2e9ec2;cursor:text;">国家高新技术企业</a>
                        <a class="link" style="cursor:text;">15个软件著作权</a>
                        <a class="link" style="cursor:text;">已服务6000+客户</a>
                        <a class="link" style="cursor:text;">项目检测具体全面</a>
                        <a class="link" style="cursor:text;">技术研发能力强劲</a>
                        <a class="link" style="cursor:text;">深度符合用户体验</a>
                        <a class="link" style="cursor:text;">15项设计奖项</a>
                        <a class="link" style="cursor:text;">注意字体和图片版权</a>
                        <a class="link" style="cursor:text;">完善的制作流程</a>
                        <a class="link" style="cursor:text;">售后服务让您省心</a>
                    </div>
                </li>
                <li>
                    <div class="title">网站设计案例</div>
                    <div class="tbox">
                        <ul>
                            <li>
                                <a rel="noFollow" href="/cases/725.html" target="_blank">
                                    <div class="img"><img src="https://oss.szfangwei.cn/cases/2025-05-28/150447XDBrtn.jpg" alt="中特威科技" /></div>
                                    <div class="tboxs">
                                        <div class="t1">中特威科技</div>
                                        <div class="t2">深圳市中特威科技有限公司成...</div>
                                    </div>
                                </a>
                            </li><li>
                                <a rel="noFollow" href="/cases/724.html" target="_blank">
                                    <div class="img"><img src="https://oss.szfangwei.cn/cases/2025-05-28/150113di82Fj.jpg" alt="哲商集团" /></div>
                                    <div class="tboxs">
                                        <div class="t1">哲商集团</div>
                                        <div class="t2">哲商(香港)有限公司是-家立...</div>
                                    </div>
                                </a>
                            </li>                        </ul>
                    </div>
                </li>
            </ul>
        </div>
        <div class="foot-center">
            <ul>
                <li>
                    <div class="f-ewm"><img alt="微信客服" src="/Public/web2019/images/ewmwx.jpg" /></div>
                    <div class="tbox ewm">
                        <div class="t1">微信扫一扫</div>
                        <div class="t2">专业客服为你解答</div>
                    </div>
                </li>
                <li>
                    <div class="tbox tel">
                        <div class="t1">电话/邮箱</div>
                        <div class="t2">
                            400-800-9385 / 400-800-9385<br>fangwei@fwwl.net                        </div>
                    </div>
                </li>
                <li>
                    <div class="tbox sz">
                        <div class="t1">深圳（总部）</div>
                        <div class="t2">
                            深圳市 福田区 车公庙中国有色大厦713-715
                            <br>
                            大客户专线：400-800-9385
                        </div>
                    </div>
                </li>
                <li>
                    <div class="tbox gz">
                        <div class="t1">广州（分部）</div>
                        <div class="t2">
                            广州市 天河区 地中海酒店1627
                            <br />
                            400-800-9385
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="foot-button">
            <div class="link-box" style="width:100%;float:none;">
                <div class="a-box">
                    <a href="/gaoduanweb/" target="_blank">高端网站设计</a><a href="/gaibanweb/" target="_blank">网站改版</a><a href="/xcxweb/" target="_blank">小程序制作</a>                    <a href="/tag/11659.html" target="_blank">MCP</a><a href="/tag/11658.html" target="_blank">java制作网站</a><a href="/tag/11657.html" target="_blank">Midjourney</a>                    <a href="/jianpuzai/" >柬埔寨网站建设</a><a href="/dalian/" >大连网站建设</a>                </div>
                <div style="border-top:1px solid #ebebeb;font-size:12px;color:#666666;line-height:2;padding-top:20px;margin-top:20px;">业务范围包括企业网站建设、商城系统开发、品牌网站设计、旅游网站制作、英文外贸网站、教育培训门户网站开发、微信手机移动端开发、响应式网站建设、微信小程序开发、APP定制和其他类型网站定制等。
                    <br>服务区域包括深圳市福田区、罗湖区、南山区、盐田区、龙岗区、宝安区、坪山新区、龙华新区、广州市以及全国各地接受异地服务商的公司企业或者机构。</div>
                <div class="copyright">©2010-2024 深圳永兴集团科技有限公司 版权所有 抄袭必究 -- 专注于网站建设和小程序开发</div>
            </div>
            
        </div>
    </footer>

<div class="fixed-contact-wrap show">
    <ul class="item-list clearfix">
        <li class="phone">
            <a rel="nofollow" target="_blank" href="tel:400-800-9385">
                <i class="icon"></i>
                <strong>400-800-9385</strong>
            </a>
        </li>
        <li class="wechat">
            <a rel="nofollow" >
                <i class="icon"></i>
                <div class="wechat_img"><img src="/Public/web2019/images/wechat_hc.png" alt="微信扫码添加客服" /></div>
            </a>
        </li>
        <li class="back-top">
            <a href="#" rel="nofollow" class="back-to-top">
                <i class="icon"></i>
                <strong> 回到顶部</strong>
            </a>
        </li>
    </ul>
</div>
<script type="text/javascript">
    //右侧联系永兴集团悬浮窗
    $(".fixed-contact-wrap").hover(function(){
        $(this).addClass("active");
    },function(){
        $(this).removeClass("active");
    })
    
    function show_phone_menu(){
        $(".right-side ul").toggle();
    }
    
    var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
    document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fd8344b6a8c16d55b7dabce090ed226b7' type='text/javascript'%3E%3C/script%3E"));

    (function(){
        var bp = document.createElement('script');
        var curProtocol = window.location.protocol.split(':')[0];
        if (curProtocol === 'https'){
           bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
        }else{
           bp.src = 'http://push.zhanzhang.baidu.com/push.js';
        }
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(bp, s);
    })();
</script>
<div style="display:none">
    <script type="text/javascript">
        var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
        document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fbead5b7e6366bdd222355571c0493ac1' type='text/javascript'%3E%3C/script%3E"));
    </script>
</div>
</body><div style="clear:both;padding:10px;text-align:center;margin:5"><a href="/sitemap.xml" target="_blank">XML 地图</a>
</html>
永兴集团(中国区)官方网站-Macau App Station

微信小程序：制作星星评价代码分享
