微信小程序实现留言板


Posted in Javascript onOctober 31, 2018

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

微信小程序实现留言板

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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
抽出www.templatemonster.com的鼠标悬停加载大图模板的代码
Jul 11 Javascript
JavaScript 利用Cookie记录用户登录信息
Dec 08 Javascript
js 遍历对象的属性的代码
Dec 29 Javascript
利用javaScript实现点击输入框弹出窗体选择信息
Dec 11 Javascript
javascript实现随机读取数组的方法
Aug 03 Javascript
jQuery数据检索中根据关键字快速定位GridView指定行的实现方法
Jun 08 Javascript
jquery 实现回车登录详解及实例代码
Oct 23 Javascript
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
Jun 17 Javascript
实时监控input框,实现输入框与下拉框联动的实例
Jan 23 Javascript
Vue用v-for给循环标签自身属性添加属性值的方法
Oct 18 Javascript
详解小程序开发经验:多页面数据同步
May 18 Javascript
JavaScript内置对象之Array的使用小结
May 12 Javascript
Angular父子组件通过服务传参的示例方法
Oct 31 #Javascript
JS中通过url动态获取图片大小的方法小结(两种方法)
Oct 31 #Javascript
微信小程序实现留言功能
Oct 31 #Javascript
微信小程序签到功能
Oct 31 #Javascript
vue+element-ui实现表格编辑的三种实现方式
Oct 31 #Javascript
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
Oct 31 #Javascript
微信小程序实现签到功能
Oct 31 #Javascript
You might like
PHP 5.3.0 安装分析心得
2009/08/07 PHP
CI框架中数据库操作函数$this-&gt;db-&gt;where()相关用法总结
2016/05/17 PHP
PHP实现打包zip并下载功能
2018/06/12 PHP
关于flash遮盖div浮动层的解决方法
2010/07/17 Javascript
javascript继承之为什么要继承
2012/11/10 Javascript
利用JQuery和JS实现奇偶行背景颜色自定义效果
2012/11/19 Javascript
jquery 通过name快速取值示例
2014/01/24 Javascript
js返回前一页刷新本页重载页面
2014/07/29 Javascript
JavaScript闭包详解
2015/02/02 Javascript
JS仿iGoogle自定义首页模块拖拽特效的方法
2015/02/13 Javascript
Javascript 5种方法实现过滤删除前后所有空格
2016/06/22 Javascript
Vuejs第八篇之Vuejs组件的定义实例解析
2016/09/05 Javascript
微信小程序 教程之模块化
2016/10/17 Javascript
angular源码学习第一篇 setupModuleLoader方法
2016/10/20 Javascript
JavaScript基于自定义函数判断变量类型的实现方法
2016/11/23 Javascript
解决Layui数据表格显示无数据提示的问题
2019/11/14 Javascript
vue3.0中使用postcss-pxtorem的具体方法
2019/11/20 Javascript
vue组件创建的三种方式小结
2020/02/03 Javascript
Python实现登录人人网并抓取新鲜事的方法
2015/05/11 Python
Python实现类似jQuery使用中的链式调用的示例
2016/06/16 Python
python爬虫实现教程转换成 PDF 电子书
2017/02/19 Python
python实现决策树
2017/12/21 Python
使用python读取csv文件快速插入数据库的实例
2018/06/21 Python
python3读取csv和xlsx文件的实例
2018/06/22 Python
详细介绍Python进度条tqdm的使用
2019/07/31 Python
关于Python 常用获取元素 Driver 总结
2019/11/24 Python
python根据完整路径获得盘名/路径名/文件名/文件扩展名的方法
2020/04/22 Python
css3针对移动端卡顿问题的解决(动画性能优化)
2020/02/14 HTML / CSS
HTML5本地存储之Web Storage详解
2016/07/04 HTML / CSS
法国奢华女性时尚配饰网上商店:Monnier Frères
2016/08/27 全球购物
Booking.com缤客中国:全球酒店在线预订网站
2020/05/03 全球购物
毕业生自我推荐
2013/11/04 职场文书
党员批评与自我批评总结
2014/10/15 职场文书
群众路线教育实践活动调研报告
2014/11/03 职场文书
2015年教师业务工作总结
2015/05/26 职场文书
心理健康教育主题班会
2015/08/13 职场文书