小程序留言板-快速捎话(最终版)

这是小程序wxml,wxss，js

<!--pages/order/message/message.wxml-->
<view class='message_nav'>
  <form bindsubmit='FormSubmit'>
  <view class='section'>
  <textarea class='message1' type='text' placeholder="请选择或者输入捎话(60字以内)" maxlength='80' style="word- wrap:break-word"  bindinput='bindTextAreaChange' value="{{message}}"></textarea>
</view>
 <view class='fast'>快速捎话：</view> 
<checkbox-group class="checkboxChange">
  <view  wx:for="{{msgData}}" wx:key="{{index}}" data-index="{{index}}" data-id="{{item.child_id}}"   data-checked='{{item.checked}}'  bindtap='click' >
    <checkbox  value='{{item.msg}}' class='item'  checked='{{item.checked}}' >{{item.msg}}</checkbox>
  </view>
</checkbox-group>
<button class='submit' bindtap='submit'>捎话</button>
</form>
</view>

/* pages/order/message/message.wxss */
/*捎话  */
.section{
width:96%;
height:220rpx;
margin-left:5px;
}
.message1{
  width:96%;
  height:210rpx;
  margin-top: 30rpx;
  font-size: 68%;
  margin-left:20px;
}
.circle{
  height:35rpx;
  width:35rpx;
  border-radius: 50%;
  border: 1rpx solid #ccc;
  display:inline-block;
  margin:28rpx 45rpx auto 50rpx;
  
}
.fast{
  position:relative;
  top:-50rpx;
  font-size:90%;
  background:#f4f4f4;
  line-height:100rpx;
  text-indent:2em;
}
.item{
position:relative;
border-bottom:1px solid #f4f4f4;
padding-bottom:10px;
top: -60rpx;
}
.item:hover{  
background:pink;  
color: #f4f4f4; 
}  
.message_font{
  font-size:80%;
  font-family:"微软雅黑";
  font-weight:blod;
  display:inline-block;
  position:relative;
  top:-5rpx;
}
.submit{
   outline:none;
  border:none;
  list-style: none;
  width:100%;
  height: 100rpx;
  background: #fed1d6;
  position: relative;
  top:160rpx;
  line-height: 100rpx;
  -webkit-border-radius: 1rpx;  
    -moz-border-radius: 1rpx;  
    border-radius: 1rpx;  
  -webkit-appearance : none ;  
}
button::after{
  border:none;
  }
.item{
position:relative;
border-bottom:1px solid #f4f4f4;
padding-top:5px;
top: -60rpx;
width:100%;
padding-left: 45rpx;
}
.checkboxChange{
  position:relative;
  top:15rpx;
  font-size: 68%;
  border-radius: 50%;
}
/* .circle{
  border-radius: 50%;
} */

//这是js

const app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {

    msgData:
    [
      {
        child_id: 1,
        msg:
        "我想做个眉毛，到店后求推荐。",
        
        checked:''
      },
      {
        child_id: 2,
        msg:
        "我只有2小时，您看着安排吧。",
        checked: ''
      },
      {
        child_id: 3,
        msg:
        "我和朋友一起过来。",
        checked: ''
      },
      {
        child_id: 4,
        msg:
        "美甲样式到店挑选。",
        checked: ''
      },
      {
        child_id: 5,
        msg:
        
        "给眉毛再补个颜色。",
        checked: ''
      },
      {
        child_id: 6,
        msg:
        "我要补睫毛哦。",
         checked:''
      }
    ],
    message: '',
    message_id:[],
  },

  bindTextAreaChange: function(e){
    var that = this
    that.setData({
      message:e.detail.value
    })
  },

  click:function(e){
    var that = this;
    let id = e.currentTarget.dataset.id;
    let index = e.currentTarget.dataset.index;
    var value = [];
    value = this.data.message_id;
    var array_i = this.in_array(id, value);
    var chekeds = that.data.msgData;
    var msg = chekeds[index].msg;
    var message = that.data.message;
    if (!e.currentTarget.dataset.checked){ 
      chekeds[index].checked = true
      that.setData({
        message: message + msg
      })
    }else{
      chekeds[index].checked = false
      that.setData({
        message: message.replace(msg, '')
      })
    }
    that.setData({
      msgData: chekeds
    })
    if (array_i) {
      value.splice(array_i, 1);
    } else {
      value.push(id);
    }
    this.setData({
      message_id: value,
    })
  },
  in_array: function (search, array) {
    for (var i in array) {
      if (array[i] == search) {
        return i;
      }
    }
    return false;
  },
  submit:function(){
    var value = [];
    var message = this.data.message;
    var msgData = this.data.msgData;
    if (message == '' && !value.length) {
      wx.showToast({
        title: '暂无选择项目',
        icon:'none'
      })
      return;
    }
    app.globalData.message = message;
    for (var i = 0; i < msgData.length; i++) {
      if(message.indexOf(msgData[i].msg) > -1){
        value[i] = msgData[i].child_id;
      }
    }
    wx.request({
     url: 'https://www.omeiclub.com/app/public/index.php/index/index/server',
      method: 'POST',
      data: { message_id: value, openId: app.globalData.openId, message: message, token: app.globalData.token},
      header: {
       'Accept': 'application/json'
      },
      success: function (res) {
        if(res){
          // wx.showToast({
          //   title: '捎话成功',
          //   success:function(){
              
          //   }
          // })
          wx.switchTab({
            url: '/pages/order/order',
            success: function (e) {
              var page = getCurrentPages().pop();
              if (page == undefined || page == null) return;
              page.onLoad();
            }
          })
          app.globalData.message = message;
        }
        
        console.log(res)
      }
    })
  },
  
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    wx.request({
     url: 'https://www.omeiclub.com/app/public/index.php/index/index/serversle',
      method: 'POST',
      data: { openId: app.globalData.openId, token: app.globalData.token},
      header: {
       'Accept': 'application/json'
      },
      success: function (res) {
        if (res.data){
          var message_id = res.data.message_id;
          var value = that.data.msgData;
          var message = res.data.message;
          that.setData({
            message: message
          });
          for (var i = 0; i < value.length;i++) {
            if (that.in_array(value[i].child_id, message_id)) {
              value[i].checked = true;
              that.setData({
                msgData: value,
              });
            }
          }
        }
      }
    })

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
   
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
    
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})