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

2023-02-20    分类: 微信小程序


不管是商城、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>


JS代码如下

var util = require('../../utils/util.js')
var app = getApp()//获取应用实例
Page({
data: {
star_1: 0,
star_2: 0,
star_3: 0,
order_id:0
},
onLoad:function(e) {
var that = this
var order_id = e.order_id
that.setData({
order_id:order_id
})
},
change_star:function(e) {
var that = this
var star_item = e.currentTarget.dataset.item
var star = e.currentTarget.dataset.star
if (star_item == 'star_1') {
that.setData({
star_1: star
});
}else if(star_item == 'star_2') {
that.setData({
star_2: star
});
} else if (star_item == 'star_3') {
that.setData({
star_3: star
});
}
},
add_comment:function(e) {
var that = this
var star_1 = that.data.star_1
var star_2 = that.data.star_2
var star_3 = that.data.star_3
var detail = e.detail.value.detail
if(star_1 == 0) {
util.showNotice("请针对服务态度打分!")
} else if (star_2 == 0) {
util.showNotice("请针对服务质量打分!")
} else if (star_3 == 0) {
util.showNotice("请针对服务效率打分!")
} else if (detail == "") {
util.showNotice("请填写评价内容!")
} else {
var order_id = that.data.order_id
var session3rd = wx.getStorageSync('session3rd')
var post_data = {
"session3rd": session3rd,
"order_id": order_id,
"star_1": star_1,
"star_2": star_2,
"star_3": star_3,
"detail": detail,
"ctype": 1
}
var url_comment = util.getApiUrl(app, "/Comment/add", "")
util._post_from(url_comment, post_data, function (res) {
console.log('评价侠客返回')
console.log(res)
if (res.data.code = '200') {
wx.showModal({
content: '提交评论成功',
showCancel:false,
success:function(val) {
app.globalData.is_need_update_post_info = true
wx.navigateBack()
}
})
} else {
util.showNotice(res.data.msg)
}
})
}
}
})


以上基本就实现了星星评价效果。

网页名称:微信小程序:制作星星评价代码分享
转载来源:/news/238305.html

网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有微信小程序

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

成都定制网站建设