微信小程序评价页面实现

公司微信小程序需要收集客户评价提交到后台，历时一天搞出来的，记录一下，有很多不足，继续加油！！

assess.wxml 

<form actions="post" bindsubmit='formSubmit' bindreset='formReset'>
  <view class="title01">
    <h1>1.您对本次服务是否满意</h1>
    <view class="content">
      <view id="white01" wx:for="{{ list }}" wx:key="value" class="item {{ item.value === active ? 'active' : '' }}" bindtap="handleClick" data-value="{{ item.value }}" >
      {{item.name}}
      </view>
     </view>
    </view>
    <view class="title02">
      <h1>2.您对我司还有哪些建议</h1>
      <textarea placeholder="请输入您的建议" cols="40" rows="8" name="suggest"
        style="border:1px solid;border-radius:5px;background-color:rgba(241,241,241,.98);width: 600rpx;height: 400rpx;padding: 10px;resize: none;">
      </textarea>
    </view>
    <view class="btn-area">
      <button formType="submit">提交</button>
    </view>
</form>

assess.wxss

.title01{
  text-align: left;
  margin-top: 80rpx;
  margin-left: 50rpx;
}
.title02{
  text-align: left;
  margin-top: 40rpx;
  margin-left: 50rpx;
}
.btn-area{
  margin-left: 50rpx;
  margin-top: 100rpx;
  width: 640rpx;
}
.button-hover {
  background-color:#015AAB;
}
.satisficing{
  margin-top: 30rpx;
}
#white01:hover{
  color: aliceblue;
}
.item {
  display: inline-block;
  text-align: center;
  width: 180rpx;
  height: 85rpx;
  line-height: 2.5rem;
  margin-top: 30rpx;
  margin-left: 15rpx;
  background-color:rgba(241,241,241,.98);
  padding: 10rpx;
  border-radius: 20rpx;
}
.active {
  background:#015AAB;
}

assess.js

//index.js
//获取应用实例
const app = getApp()
const baseUrl = app.globalData.baseUrl;
var base64 = require('../../utils/lib/base64.modified.js');
Page({
  data: {
    list: [{value:1,name:"满意"},{value:2,name:"基本满意"},{value:3,name:"不满意"}],
    active: 0,
    message:{
        satisficing:"",
        suggest:"",
        clientelePhone:"",
        caseNo:"",
        licenceNo:"",
        userCode:"",
        userPhone:"",
        reportTime:"",
        surveyEndTime:""
    }
   },
  formSubmit: function (e) {
    var that = this
    console.log(e);
    this.setData({
      'message.suggest':e.detail.value.suggest,
      }
    )
    var datastr = base64.encode(JSON.stringify(this.data.message));
    if(this.data.active==0 ){
        wx.showToast({
          title: '请对我们的服务进行评价',
          icon:'none',
          // image:'../../images/img_right_icon.png',
          duration:2000
        })
    }else{
    wx.request({
      url: url,
      data: {data:datastr},
      method: 'post', 
      header: {
        'content-type': 'application/x-www-form-urlencoded' // 默认值
      },
      success:res =>{
        var data = base64.decode(res.data);
        data = JSON.parse(data);
        console.log(data);
        if (data.code == 1) {
          wx.showToast({
            title: "感谢您的评价",
            icon:"success",
            duration: 10000
          });
          wx.navigateBack({
            delta: 1,
          })
      }else{
          wx.showToast({
            title: '提交失败',
            icon:'loading',
            // image:'../../images/img_right_icon.png',
            duration: 2000
          });
        }
      },
    })
  }
},
onLoad(options){
  this.setData({
    message:{
      clientelePhone:options.clientelePhone,
      caseNo:options.caseNo,
      licenceNo:options.licenceNo,
      userCode:options.userCode,
      userPhone:options.userPhone,
      reportTime:options.reportTime,
      surveyEndTime:options.surveyEndTime
    }
  })
  console.log(options)
},
  handleClick(e) {
    // console.log(e.target.dataset.value)
    this.setData({
    'message.satisficing':e.target.dataset.value,
     active: e.target.dataset.value
    })
  }
})