微信小程序实现留言板


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 相关文章推荐
硬盘浏览程序,保存成网页格式便可使用
Dec 03 Javascript
使用JavaScript switch case 另类写法
Mar 14 Javascript
jQuery 菜单随滚条改为以定位方式(固定要浏览器顶部)
May 24 Javascript
JavaScript中的ubound函数使用实例
Nov 04 Javascript
JavaScript实现select添加option
Jul 03 Javascript
javascript实现根据3原色制作颜色选择器的方法
Jul 17 Javascript
Angular的$http与$location
Dec 26 Javascript
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
Sep 27 Javascript
VUEX-action可以修改state吗
Nov 19 Javascript
微信小程序按顺序同步执行的两种方式
Dec 20 Javascript
JS面向对象编程实现的Tab选项卡案例详解
Mar 03 Javascript
Js Snowflake(雪花算法)生成随机ID的实现方法
Aug 26 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
用js生产批量批处理执行命令
2008/07/28 Javascript
js工具方法弹出蒙版
2013/05/08 Javascript
js 异步操作回调函数如何控制执行顺序
2013/12/24 Javascript
实例说明为什么不要行内使用javascript
2014/04/18 Javascript
第二次聊一聊JS require.js模块化工具的基础知识
2016/04/17 Javascript
JS hashMap实例详解
2016/05/26 Javascript
原生js代码实现图片放大境效果
2016/10/30 Javascript
理解javascript中的闭包
2017/01/11 Javascript
Angular4学习笔记之实现绑定和分包
2017/08/01 Javascript
JavaScript监听手机物理返回键的两种解决方法
2017/08/14 Javascript
AngularJs 最新验证手机号码的实例,成功测试通过
2017/11/26 Javascript
基于vue2.0实现简单轮播图
2017/11/27 Javascript
vue下拉列表功能实例代码
2018/04/08 Javascript
Vue项目查看当前使用的elementUI版本的方法
2018/09/27 Javascript
vue 实现微信浮标效果
2019/09/01 Javascript
python3简单实现微信爬虫
2015/04/09 Python
python+Splinter实现12306抢票功能
2018/09/25 Python
python 文本单词提取和词频统计的实例
2018/12/22 Python
Django学习笔记之为Model添加Action
2019/04/30 Python
Python分析彩票记录并预测中奖号码过程详解
2019/07/09 Python
Python爬虫使用浏览器cookies:browsercookie过程解析
2019/10/22 Python
Python 实现OpenCV格式和PIL.Image格式互转
2020/01/09 Python
详解python 降级到3.6终极解决方案
2020/02/06 Python
python+adb命令实现自动刷视频脚本案例
2020/04/23 Python
scrapy在python爬虫中搭建出错的解决方法
2020/11/22 Python
css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
2014/10/10 HTML / CSS
基于CSS3的animation属性实现微信拍一拍动画效果
2020/06/22 HTML / CSS
Fossil美国官网:Fossil手表、手袋、珠宝及配件
2017/02/01 全球购物
香港永安旅游网:Wing On Travel
2017/04/10 全球购物
澳大利亚在线划船、露营和钓鱼商店:BCF Australia
2020/03/22 全球购物
物业管理应届生求职信
2013/10/28 职场文书
电子商务专业学生的自我鉴定
2013/11/28 职场文书
幼儿园小班教师寄语
2014/04/03 职场文书
个人借条范本
2015/05/25 职场文书
飞屋环游记观后感
2015/06/08 职场文书
高一军训口号
2015/12/25 职场文书