微信小程序评价页面

 1 <!--服务评价-->
 2 <view class="service">
 3   <!--评分-->
 4   <view class='score'>
 5     <view class='left'>
 6       评分
 7     </view>
 8     <view class='right'>
 9        <view bindtap="starTap" data-index="{{index}}"  class="star" wx:for="{{userStars}}" wx:key="index">
10         <image src="{{item}}"></image>
11       </view>
12       <text class='rtxt'>{{wjxScore}}.0分</text>
13     </view>
14   </view>
15   <!--内容-->
16   <view class='content'>
17     <view class='left'>
18       内容
19     </view>
20     <view class='right'>
21       <text bindtap='label' class="{{attitude===true ? 'labelColor':''}}" data-index="{{attitude}}">服务态度好</text>
22       <text bindtap='label1' class="{{time===false? 'labelColor':''}}" data-index="{{time}}">排队时间短</text>
23       <text bindtap='label2' class="{{efficiency===false?'labelColor':''}}" data-index="{{efficiency}}">效率高</text>
24       <text bindtap='label3' class="{{environment===false?'labelColor':''}}" data-index="{{environment}}">门店环境好</text>
25       <text bindtap='label4' class="{{professional===false?'labelColor':''}}" data-index="{{professional}}">很专业</text> 
26     </view>
27   </view>
28   <!--图片-->
29   <view class='picture'>
30     <view class='left'>
31       图片
32     </view>
33     <view class='right'>
34        <view class="parcel" wx:for="{{pics}}" wx:key="{{index}}">
35        <image src="{{pics[index]}}" class="According" data-index="{{index}}" mode="aspectFill" bindtap="previewImg"></image>
36        <image src="{{staticImg}}home/order/apply/error.png" class='deleteimg' catchtap="deleteImg" data-index="{{index}}"></image>
37        </view>
38       <image src='/pages/service/img/add.png' class='add' bindtap='choose'></image>
39     </view>
40   </view>
41 </view>
42 <!--textarea-->
43 <view class="conts">
44     <textarea class="areas" placeholder='更多评价请写在这里（最多300字）' minlength="{{min}}" maxlength="{{max}}" bindinput="inputs"> 
45         <!-- <text class="currentWordNumber">{{currentWordNumber|0}}/{{max}}</text> -->
46     </textarea>
47 </view>
48 <!--提交评价-->
49 <button class='btn'>提交评价</button>

  1 page {
  2   width: 100%;
  3   height: 100%;
  4   background: #f0f0f0;
  5 }
  6 .service {
  7   width: 100%;
  8   overflow: hidden;
  9   box-sizing: border-box;
 10   padding: 0 20rpx;
 11   background: #fff;
 12 }
 13 .score {
 14   width: 100%;
 15   height: 100rpx;
 16   border-bottom: 1px solid #ccc;
 17 }
 18 .star {
 19   float: left;
 20   width: 54rpx;
 21   height: 100rpx;
 22   text-align: center;
 23   line-height: 100rpx;
 24 }
 25 .star image{
 26   width: 40rpx;
 27   height: 40rpx;
 28   margin-top: 30rpx;
 29 }
 30 .score .left {
 31   width: 100rpx;
 32   line-height: 100rpx;
 33   font-size: 30rpx;
 34   float: left;
 35 }
 36 .score .right {
 37   width: 610rpx;
 38   font-size: 30rpx;
 39   float: left;
 40   color: #888;
 41 }
 42 
 43 .score .right .rtxt {
 44   display: inline-block;
 45   height: 100rpx;
 46   line-height: 100rpx;
 47   margin-left: 15rpx;
 48   color: #c00;
 49   font-weight: bold;
 50 }
 51 .labelColor {
 52   color: #c00;
 53   border: 1px solid #c00 !important;
 54 }
 55 .content {
 56   width: 100%;
 57   overflow: hidden;
 58   border-bottom:1px solid #ccc;
 59   padding:0 0 26rpx 0;
 60   box-sizing: border-box;
 61 } 
 62 .content .left {
 63   width: 100rpx;
 64   font-size: 30rpx;
 65   float: left;
 66   padding-top: 20rpx;
 67 }
 68 .content .right {
 69   width: 610rpx;
 70   font-size: 24rpx;
 71   float: left;
 72   color: #888;
 73 }
 74 .content .right text {
 75   font-size: 24rpx;
 76   padding: 13rpx 24rpx;
 77   float: left;
 78   border: 1px solid #888;
 79   border-radius: 10rpx;
 80   margin-right: 34rpx;
 81   margin-top: 20rpx;
 82 }
 83 .picture {
 84   width: 100%;
 85   overflow: hidden;
 86   background: #fff;
 87   border-bottom: 1px solid #ccc;
 88 }
 89 .picture .left {
 90   width: 100rpx;
 91   font-size: 30rpx;
 92   float: left;
 93   padding-top: 20rpx;
 94 }
 95 .picture .right {
 96   width: 610rpx;
 97   font-size: 24rpx;
 98   float: left;
 99   color: #888;
100   box-sizing: border-box;
101   padding-top:36rpx; 
102 }
103 .picture .right .add {
104   width: 120rpx;
105   height: 120rpx;
106   margin-right: 10rpx;
107 }
108 .According{
109   width:120rpx;
110   height:120rpx;
111   float:left;
112   margin-right:10rpx;
113   margin-bottom: 10rpx;
114 }
115 .parcel{
116  width:120rpx;
117   height:120rpx;
118   float:left;
119   margin-right:10rpx;
120    margin-bottom: 10rpx;
121   position: relative;
122 }
123 .deleteimg{
124   width:30rpx;
125   height:30rpx;
126   position: absolute;
127   right:0;
128   top:0;
129   z-index: 2;
130 }
131 .conts{
132   width: 100%;
133   height: auto;
134   background: #fff;
135 }
136 textarea {
137   width: 687rpx;
138 }
139 .areas{
140   height:315rpx;
141   font-size: 30rpx;
142   padding-top: 30rpx;
143   margin: 0 auto;
144   overflow: hidden;   
145   position: relative; 
146 }
147 .currentWordNumber{
148   font-size: 28rpx;
149   position: absolute;
150   left: 0%;
151   bottom: 0rpx;
152   color: #c00;
153 }
154 .hint{
155    font-size: 28rpx;
156    position: absolute;
157    top: 120rpx;
158    left: 30rpx;
159    color: #FF6600;
160 }
161 .btn {
162   width: 600rpx;
163   height: 80rpx;
164   line-height: 80rpx;
165   font-size: 30rpx;
166   color: #fff;
167   background: #c00;
168   position: fixed;
169   left:75rpx;
170   bottom: 37rpx;
171 } 
172 button:after {
173   border: 0;
174 }

  1 const app = getApp();
  2 Page({
  3   data: {
  4     staticImg: app.globalData.staticImg,
  5     current:0,
  6     attitude:true,
  7     time: true,
  8     efficiency: true,
  9     environment:true,
 10     professional:true,
 11     userStars: [
 12       "/pages/service/img/rwjx.png",
 13       "/pages/service/img/rwjx.png",
 14       "/pages/service/img/rwjx.png",
 15       "/pages/service/img/rwjx.png",
 16       "/pages/service/img/rwjx.png",
 17     ],
 18     wjxScore:5,
 19     // textarea
 20     min: 5,//最少字数
 21     max: 300, //最多字数 (根据自己需求改变) 
 22     pics:[],
 23   },
 24   // 星星点击事件
 25   starTap: function (e) {
 26     var that = this;
 27     var index = e.currentTarget.dataset.index; // 获取当前点击的是第几颗星星
 28     var tempUserStars = this.data.userStars; // 暂存星星数组
 29     var len = tempUserStars.length; // 获取星星数组的长度
 30     for (var i = 0; i < len; i++) {
 31       if (i <= index) { // 小于等于index的是满心
 32         tempUserStars[i] = "/pages/service/img/rwjx.png";
 33         that.setData({
 34           wjxScore:i+1,
 35         })
 36       } else { // 其他是空心
 37         tempUserStars[i] = "/pages/service/img/wjx.png"
 38       }
 39     }
 40     // 重新赋值就可以显示了
 41     that.setData({
 42       userStars: tempUserStars
 43     })
 44   },
 45   // 标签
 46   label:function(e){
 47     console.log(e)
 48     var that = this;
 49     that.setData({
 50       attitude:!e.currentTarget.dataset.index
 51     })
 52   },
 53    label1: function (e) {
 54     console.log(e)
 55     var that = this;
 56     that.setData({
 57       time: !e.currentTarget.dataset.index
 58     })
 59   },
 60    label2: function (e) {
 61      console.log(e)
 62      var that = this;
 63      that.setData({
 64        efficiency: !e.currentTarget.dataset.index
 65      })
 66    },
 67     label3: function (e) {
 68      console.log(e)
 69      var that = this;
 70      that.setData({
 71        environment: !e.currentTarget.dataset.index
 72      })
 73    },
 74     label4: function (e) {
 75       console.log(e)
 76       var that = this;
 77       that.setData({
 78         professional: !e.currentTarget.dataset.index
 79       })
 80     },
 81     // 留言
 82     //字数限制  
 83   inputs: function (e) {
 84       // 获取输入框的内容
 85       var value = e.detail.value;
 86       // 获取输入框内容的长度
 87       var len = parseInt(value.length);
 88       //最多字数限制
 89       if (len > this.data.max) return;
 90       // 当输入框内容的长度大于最大长度限制（max)时，终止setData()的执行
 91       this.setData({
 92         currentWordNumber: len //当前字数  
 93       });
 94     },
 95     // 图片
 96     choose: function (e) {//这里是选取图片的方法
 97     var that = this;
 98     var pics = that.data.pics;
 99     wx.chooseImage({
100       count: 5 - pics.length, // 最多可以选择的图片张数，默认9
101       sizeType: ['original', 'compressed'], // original 原图，compressed 压缩图，默认二者都有
102       sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有
103       success: function (res) {
104 
105         var imgsrc = res.tempFilePaths;
106         pics = pics.concat(imgsrc);
107         console.log(pics);
108         // console.log(imgsrc);
109         that.setData({
110           pics: pics,
111           // console.log(pics),
112         });
113       },
114       fail: function () {
115         // fail
116       },
117       complete: function () {
118         // complete
119       }
120     })
121 
122   },
123   uploadimg: function () {//这里触发图片上传的方法
124     var pics = this.data.pics;
125     console.log(pics);
126     app.uploadimg({
127       url: 'https://........',//这里是你图片上传的接口
128       path: pics//这里是选取的图片的地址数组
129     });
130   },
131   onLoad: function (options) {
132 
133   },
134   // 删除图片
135   deleteImg: function (e) {
136     var pics = this.data.pics;
137     var index = e.currentTarget.dataset.index;
138     pics.splice(index, 1);
139     this.setData({
140       pics: pics
141     });
142   },
143   // 预览图片
144   previewImg: function (e) {
145     //获取当前图片的下标
146     var index = e.currentTarget.dataset.index;
147     //所有图片
148     var pics = this.data.pics;
149     wx.previewImage({
150       //当前显示图片
151       current: pics[index],
152       //所有图片
153       urls: pics
154     })
155   },
156 })

 

转载于:https://www.cnblogs.com/xinheng/p/9516843.html