Company micro channel small program needs to collect customer evaluation information submitted to the background, lasted a day to come out, record, there are a lot of deficiencies, continue to come on!! The interface layout 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 (241241241, 98); width: 600rpx; height: 400rpx; padding: 10px; resize: none;" </view> <view class="btn-area"> <button formType="submit" </button> </view> </form>Copy the code

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; The line - height: 2.5 rem; margin-top: 30rpx; margin-left: 15rpx; Background - color: rgba (241241241, 98); padding: 10rpx; border-radius: 20rpx; } .active { background:#015AAB; }Copy the code

Interface logic assess.js

//index.js // get the application instance const app = getApp() const baseUrl = app.globaldata.baseurl; var base64 = require('.. /.. /utils/lib/base64.modified.js'); Page ({data: {list: [{value: 1, the name: "satisfied"}, {value: 2, the name: "basically satisfied"}, {value: 3, the name: "not satisfied"}], 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: 'Please comment on our service ', 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' // default}, success:res =>{var data = base64.decode(res.data); data = JSON.parse(data); console.log(data); If (data.code == 1) {wx.showtoast ({title: "thank you for your comment ", icon:"success", duration: 10000}); Wx.navigateback ({delta: 1,})}else{wx.showtoast ({title: 'commit failed ', 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 }) } })Copy the code