首页 > 课堂 > 小程序 > 正文

微信小程序实现留言板

2020-03-21 16:08:29
字体:
来源:转载
供稿:网友

本文实例为大家分享了微信小程序实现留言板的具体代码,供大家参考,具体内容如下

微信小程序,留言板

CSS:

/* pages/order/message2/message2.wxss */ .msg-box{ padding: 20px; } .send-box{ display: flex; } .input{ border: 1px solid #B0C4DE; padding: 5px; }.msg-info{ display: block; margin: 10px 0 0 0 ; color: #339900;  } .place-input{ color: salmon; } .list-view{ margin: 20px 0 0 0; } .item{ overflow: hidden; border-bottom: 1px dashed #87CEFF; height: 30px; line-height: 30px; } .text1{ float: left; } .close-btn{ float: right; margin: 5px 5px 0 0; }

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 () {  }})

html

<!--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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持VEVB武林网。


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表