微信小程序之评分页面

首先给大家看看做好的效果图：

一、接下来我们说一下评分这个功能：

实际上就是一个简单的js，首先我们遍历出小星星，此时默认给的五星好评，在给他们一个点击事件，当点击时，我们获取到当前点击的是第几颗；代码如下：

var index = e.currentTarget.dataset.index; // 获取当前点击的是第几颗星星

接下来我们暂存星星的数组，获取星星数组的长度，代码如下：

var tempUserStars = this.data.userStars; // 暂存星星数组

var len = tempUserStars.length; // 获取星星数组的长度

下面就是最核心的地方了，判断显示的红心和分数：

1、循环星星数组的长度；

2、如果当前选中星星的index大于等于星星数组的长度，那么就是满分，让其星星数组的图片为红心，分数加1；

3、如果当前选中星星的index小于星星数组的长度，那么星星数组的图片为空心，给其重新赋值就可以了；

二、接下来是标签的功能：

每一个标签都是一个lable，在lable里做一个三目运算就可以，首先给一个false，当点击每一个lable时，让其变为true，类名变为所设置的颜色就OK了。

三、下面我们说说上传图片的功能：

图片上传的功能与我们的input里的上传功能相似，但是小程序给我们提供了一个便捷的方法------wx.chooseImage

给加号的图片一个点击事件，在事件里我们就可以用到这个方法了，那么它有哪些参数呢？小编给大家罗列出来：

count: 5 - pics.length, // 最多可以选择的图片张数，默认9

sizeType: ['original', 'compressed'], // original 原图，compressed 压缩图，默认二者都有

sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有

下面有一个成功的回调函数，成功后把成功的图片定义一个变量放到data定义好的变量中，在this.setData中更新添加的图片就可以了，代码如下：

success: function (res) {

　　var imgsrc = res.tempFilePaths;

　　pics = pics.concat(imgsrc);

　　console.log(pics);

　　// console.log(imgsrc);

　　that.setData({

　　　　pics: pics,

　　　　// console.log(pics),

　　});

}

 

四、最后我们说说评论功能：

我们一般会限制评论文字的长度，首先我们获取输入框的内容，用parseInt获取文字长度，如果内容长度超出我们设定的长度，直接return，在this.setData中更新只显示的固定长度的文字，代码如下：

inputs: function (e) {

　　// 获取输入框的内容

　　var value = e.detail.value;

　　// 获取输入框内容的长度

　　var len = parseInt(value.length);

　　//最多字数限制

　　if (len > this.data.max)

　　　　return;

　　// 当输入框内容的长度大于最大长度限制（max)时，终止setData()的执行

　　this.setData({

　　　　currentWordNumber: len //当前字数

　　});

}

 

最后给大家把完整代码写出：

HTML：

 <!--服务评价-->
 <view class="service">
   <!--评分-->
   <view class='score'>
     <view class='left'>
       评分
     </view>
     <view class='right'>
        <view bindtap="starTap" data-index="{{index}}"  class="star" wx:for="{{userStars}}" wx:key="index">
         <image src="{{item}}"></image>
       </view>
       <text class='rtxt'>{{wjxScore}}.0分</text>
     </view>
   </view>
   <!--内容-->
   <view class='content'>
     <view class='left'>
       内容
     </view>
     <view class='right'>
       <text bindtap='label' class="{{attitude===true ? 'labelColor':''}}" data-index="{{attitude}}">小清新</text>
       <text bindtap='label1' class="{{time===false? 'labelColor':''}}" data-index="{{time}}">文采好</text>
       <text bindtap='label2' class="{{efficiency===false?'labelColor':''}}" data-index="{{efficiency}}">甜甜的</text>
       <text bindtap='label3' class="{{environment===false?'labelColor':''}}" data-index="{{environment}}">值得收藏</text>
       <text bindtap='label4' class="{{professional===false?'labelColor':''}}" data-index="{{professional}}">很文艺</text>
     </view>
   </view>
   <!--图片-->
   <view class='picture'>
     <view class='left'>
       图片
     </view>
     <view class='right'>
        <view class="parcel" wx:for="{{pics}}" wx:key="{{index}}">
        <image src="{{pics[index]}}" class="According" data-index="{{index}}" mode="aspectFill" bindtap="previewImg"></image>
        </view>
       <image src='../img/add.png' class='add' bindtap='choose'></image>
     </view>
   </view>
 </view>
 <!--textarea-->
 <view class="conts">
     <textarea class="areas" placeholder='更多评价请写在这里（最多300字）' minlength="{{min}}" maxlength="{{max}}" bindinput="inputs">
         <!-- <text class="currentWordNumber">{{currentWordNumber|0}}/{{max}}</text> -->
     </textarea>
 </view>
 <!--提交评价-->
 <button class='btn' bindtap='handleBtn'>提交评价</button>

css：

 page {
   width: 100%;
   height: 100%;
   background: #f0f0f0;
 }
 .service {
   width: 100%;
   overflow: hidden;
   box-sizing: border-box;
   padding: 0 20rpx;
   background: #fff;
 }
 .score {
   width: 100%;
   height: 100rpx;
   border-bottom: 1px solid #ccc;
 }
 .star {
   float: left;
   width: 54rpx;
   height: 100rpx;
   text-align: center;
   line-height: 100rpx;
 }
 .star image{
   width: 40rpx;
   height: 40rpx;
   margin-top: 30rpx;
 }
 .score .left {
   width: 100rpx;
   line-height: 100rpx;
   font-size: 30rpx;
   float: left;
 }
 .score .right {
   width: 610rpx;
   font-size: 30rpx;
   float: left;
   color: #888;
 }

 .score .right .rtxt {
   display: inline-block;
   height: 100rpx;
   line-height: 100rpx;
   margin-left: 15rpx;
   color: #c00;
   font-weight: bold;
 }
 .labelColor {
   color: #c00;
   border: 1px solid #c00 !important;
 }
 .content {
   width: 100%;
   overflow: hidden;
   border-bottom:1px solid #ccc;
   padding:0 0 26rpx 0;
   box-sizing: border-box;
 }
 .content .left {
   width: 100rpx;
   font-size: 30rpx;
   float: left;
   padding-top: 20rpx;
 }
 .content .right {
   width: 610rpx;
   font-size: 24rpx;
   float: left;
   color: #888;
 }
 .content .right text {
   font-size: 24rpx;
   padding: 13rpx 24rpx;
   float: left;
   border: 1px solid #888;
   border-radius: 10rpx;
   margin-right: 34rpx;
   margin-top: 20rpx;
 }
 .picture {
   width: 100%;
   overflow: hidden;
   background: #fff;
   border-bottom: 1px solid #ccc;
 }
 .picture .left {
   width: 100rpx;
   font-size: 30rpx;
   float: left;
   padding-top: 20rpx;
 }
 .picture .right {
   width: 610rpx;
   font-size: 24rpx;
   float: left;
   color: #888;
   box-sizing: border-box;
   padding-top:36rpx;
 }
 .picture .right .add {
   width: 120rpx;
   height: 120rpx;
   margin-right: 10rpx;
 }
 .According{
   width:120rpx;
   height:120rpx;
   float:left;
   margin-right:10rpx;
   margin-bottom: 10rpx;
 }
 .parcel{
  width:120rpx;
   height:120rpx;
   float:left;
   margin-right:10rpx;
    margin-bottom: 10rpx;
   position: relative;
 }
 .deleteimg{
   width:30rpx;
   height:30rpx;
   position: absolute;
   right:;
   top:;
   z-index:;
 }
 .conts{
   width: 100%;
   height: auto;
   background: #fff;
 }
 textarea {
   width: 687rpx;
 }
 .areas{
   height:315rpx;
   font-size: 30rpx;
   padding-top: 30rpx;
   margin: 0 auto;
   overflow: hidden;
   position: relative;
 }
 .currentWordNumber{
   font-size: 28rpx;
   position: absolute;
   left: 0%;
   bottom: 0rpx;
   color: #c00;
 }
 .hint{
    font-size: 28rpx;
    position: absolute;
    top: 120rpx;
    left: 30rpx;
    color: #FF6600;
 }
 .btn {
   width: 600rpx;
   height: 80rpx;
   line-height: 80rpx;
   font-size: 30rpx;
   color: #fff;
   background: #c00;
   position: fixed;
   left:75rpx;
   bottom: 37rpx;
 }
 button:after {
   border:;
 }

js：

 const app = getApp();
 Page({
   data: {
     staticImg: app.globalData.staticImg,
     current: 0,
     attitude: true,
     time: true,
     efficiency: true,
     environment: true,
     professional: true,
     code:1,
     code1:2,
     userStars: [
       "../img/sx.png",
       "../img/sx.png",
       "../img/sx.png",
       "../img/sx.png",
       "../img/sx.png",
     ],
     wjxScore: 5,
     // textarea
     min: 5,//最少字数
     max: 300, //最多字数 (根据自己需求改变)
     pics: [],
   },
   // 星星点击事件
   starTap: function (e) {
     var that = this;
     var index = e.currentTarget.dataset.index; // 获取当前点击的是第几颗星星
     var tempUserStars = this.data.userStars; // 暂存星星数组
     var len = tempUserStars.length; // 获取星星数组的长度
     for (var i = 0; i < len; i++) {
       if (i <= index) { // 小于等于index的是满心
         tempUserStars[i] = "../img/sx.png";
         that.setData({
           wjxScore: i + 1,
         })
       } else { // 其他是空心
         tempUserStars[i] = "../img/kx.png"
       }
     }
     // 重新赋值就可以显示了
     that.setData({
       userStars: tempUserStars
     })
   },
   // 标签
   label: function (e) {
     console.log(e)
     var that = this;
     that.setData({
       attitude: !e.currentTarget.dataset.index
     })
   },
   label1: function (e) {
     console.log(e)
     var that = this;
     that.setData({
       time: !e.currentTarget.dataset.index
     })
   },
   label2: function (e) {
     console.log(e)
     var that = this;
     that.setData({
       efficiency: !e.currentTarget.dataset.index
     })
   },
   label3: function (e) {
     console.log(e)
     var that = this;
     that.setData({
       environment: !e.currentTarget.dataset.index
     })
   },
   label4: function (e) {
     console.log(e)
     var that = this;
     that.setData({
       professional: !e.currentTarget.dataset.index
     })
   },
   // 留言
   //字数限制
   inputs: function (e) {
     // 获取输入框的内容
     var value = e.detail.value;
     // 获取输入框内容的长度
     var len = parseInt(value.length);
     //最多字数限制
     if (len > this.data.max)
     return;
     // 当输入框内容的长度大于最大长度限制（max)时，终止setData()的执行
     this.setData({
       currentWordNumber: len //当前字数
     });
   },
   // 图片
   choose: function (e) {//这里是选取图片的方法
     var that = this;
     var pics = that.data.pics;
     wx.chooseImage({
       count: 5 - pics.length, // 最多可以选择的图片张数，默认9
       sizeType: ['original', 'compressed'], // original 原图，compressed 压缩图，默认二者都有
       sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有
       success: function (res) {
         var imgsrc = res.tempFilePaths;
         pics = pics.concat(imgsrc);
         console.log(pics);
         // console.log(imgsrc);
         that.setData({
           pics: pics,
           // console.log(pics),
         });
       },
       fail: function () {
         // fail
       },
       complete: function () {
         // complete
       }
     })

   },
   uploadimg: function () {//这里触发图片上传的方法
     var pics = this.data.pics;
     console.log(pics);
     app.uploadimg({
       url: 'https://........',//这里是你图片上传的接口
       path: pics//这里是选取的图片的地址数组
     });
   },
   onLoad: function (options) {

   },
   // 删除图片
   deleteImg: function (e) {
     var pics = this.data.pics;
     var index = e.currentTarget.dataset.index;
     pics.splice(index, 1);
     this.setData({
       pics: pics
     });
   },
   // 预览图片
   previewImg: function (e) {
     //获取当前图片的下标
     var index = e.currentTarget.dataset.index;
     //所有图片
     var pics = this.data.pics;
     wx.previewImage({
       //当前显示图片
       current: pics[index],
       //所有图片
       urls: pics
     })
   },
   handleBtn(){
     wx:if(this.data.code==1){
       wx.showToast({
         title: '评价成功',
         icon: 'succes',
         duration: 1500,
         mask: true,
         success:function(){
           setTimeout(function(){
             wx.reLaunch({
               url: '../index/index'
             })
           },1500)
         }
       });
     } else if (this.data.code1 == 2){
       console.log("111")
       wx.showToast({
         title: '评价失败',
         image: '../img/fail.png',
         duration: 1500,
         mask: true
       })
     }
   }
 })

这就是小编做的一个评论页面，如果有什么瑕疵，请大家在评论给我指出，谢谢大家！！！！