微信小程序实现五星好评案例例子参考

21天前   阅读:176   分类:后端    标签: 微信小程序

前景:小程序这几年很火,很多公司,特别是服务行业公司做一个满意度评分小程序还是不错的。

效果图展示:

image.png

.wxml代码:

<!-- 评价管理 -->
<view class="star-title">1、品质效果</view>
<view class="star-pos">
  <image class='stars' bindtap="changeColor" data-index='0' data-no="{{item}}" wx:for="{{stardata}}" wx:key="index"
        src="{{flag[0]>=item? '/asset/img/icon/star-red.png': '/asset/img/icon/star-empty.png'}}" />
  <view style='margin-left: 30rpx;'>{{startext[0]}}</view>
</view>
<view class="star-title">2、服务质量</view>
 <view class="star-pos">
  <image class='stars' bindtap="changeColor" data-index='1' data-no="{{item}}" wx:for="{{stardata}}" wx:key="index"
          src="{{flag[1]>=item? '/asset/img/icon/star-red.png': '/asset/img/icon/star-empty.png'}}" />
  <view style='margin-left: 30rpx;'>{{startext[1]}}</view>
</view>
<view class="star-title">3、综合管理</view>
<view class="star-pos">
  <image class='stars' bindtap="changeColor" data-index='2' data-no="{{item}}" wx:for="{{stardata}}" wx:key="index"
        src="{{flag[2]>=item? '/asset/img/icon/star-red.png': '/asset/img/icon/star-empty.png'}}" />
  <view style='margin-left: 30rpx;'>{{startext[2]}}</view>
</view>

.js代码:

Page({

  /**
   * 页面的初始数据
   */
  data: {
	flag:[0, 0, 0],  //每行标记变量 改变显示的五角星
    startext: ['', '', ''],   //各个下标对应每行显示  5个评价中的一个 非常不满意/不满意
    stardata: [1, 2, 3, 4, 5],  //每颗星星对应的数值  决定了渲染出几颗五角星
  },

  // 五星评价事件
  changeColor: function (e) {
    var index = e.currentTarget.dataset.index;  //判断选中了哪个评价 在前端页面写死的索引
    var num = e.currentTarget.dataset.no; //前端页面的 item 传来选择了多少个
    console.log(num)
    var a = 'flag[' + index + ']';
    var b = 'startext[' + index + ']';
    console.log(a,b)
    var that = this;
    if(num == 1) {
      that.setData({
        [a]: 1,
        [b]: '非常不满意'
      });
    } else if (num == 2){
      that.setData({
        [a]: 2,
        [b]: '不满意'
      });
    } else if (num == 3) {
      that.setData({
        [a]: 3,
        [b]: '一般'
      });
    } else if (num == 4) {
      that.setData({
        [a]: 4,
        [b]: '满意'
      });
    } else if (num == 5) {
      that.setData({
        [a]: 5,
        [b]: '非常满意'
      });
    }
  },
})

.wxss代码:

/* 评价 */
.star-pos {
  margin: 10rpx;
  display: flex;
  flex-direction: row;
}
.stars{
  width: 40rpx;
  height: 40rpx;
  margin-left: 30rpx;
}

一开始做五星评分小程序会觉得很难,下面给出判断五星是否为空或者未选择方法:

1、获取点击后的值,并赋值给数据,根据数组下标修改数组中的stars的值:这里往changeColor点击事件中追加如下方法

      // 修改数组中stars值
      var id= index;
      for(var q = 0;  q <that.data.starsKey.length; q++){
        if(that.data.starsKey[q].id ==id){
          this.setData({
            [`starsKey[${q}].stars`] : num
          })
        }
      }
         // 修改数组中stars值end

2、判断五星好评是否为空:当用户点击提交按钮,获取数据长度,starsKey几位后端接口数据数组。

    // 判断五星好评是否为空
    for (let r = 0;r < _that2.data.starsKey.length;r++){
      if (_that2.data.starsKey[r].stars ==0){
        wx.showToast({
          title: '您还有未填写项',
          image: '/asset/cry.png',
          mask: true,
          duration: 2000
        })
         return false
     }
   }


【腾讯云】618云上GO!云服务器限时秒杀,1核2G首年95元!

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号,获取最新文章动态
转载:请说明文章出处“来源简忆博客”。http://www.tpxhm.com/adetail/697.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

文章评论(0)

登录
简忆博客壁纸 头像

简忆博客
勤于学习,乐于分享。

置顶推荐

打赏本站

如果你觉得本站很棒,可以通过扫码支付打赏哦!
微信扫码:你说多少就多少~
微信扫码
支付宝扫码:你说多少就多少~
支付宝扫码
×