微信小程序实现留言板


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 相关文章推荐
jquery tools之tabs 选项卡/页签
Jul 25 Javascript
js判断背景图片是否加载成功使用img的width实现
May 29 Javascript
Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)
Jul 09 Javascript
关于js中for in的缺陷浅析
Dec 02 Javascript
jquery选择符快速提取web表单数据示例
Mar 27 Javascript
jQuery简单实现tab选项卡切换效果
Jun 20 Javascript
JS去除重复并统计数量的实现方法
Dec 15 Javascript
Vue中fragment.js使用方法详解
Mar 09 Javascript
解决vue里碰到 $refs 的问题的方法
Jul 13 Javascript
微信小程序 调用微信授权窗口相关问题解决
Jul 25 Javascript
vue点击Dashboard不同内容 跳转到同一表格的实例
Nov 13 Javascript
vue使用transition组件动画效果的实例代码
Jan 28 Vue.js
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间隔一段时间执行代码的方法
2014/12/02 PHP
PHP输出两个数字中间有多少个回文数的方法
2015/03/23 PHP
php将日期格式转换成xx天前的格式
2015/04/16 PHP
PHP自定义错误用法示例
2016/09/28 PHP
yii2实现Ueditor百度编辑器的示例代码
2018/11/02 PHP
ThinkPHP5.0框架实现切换数据库的方法分析
2019/10/30 PHP
极酷的javascirpt,让你随意编辑任何网页
2007/02/25 Javascript
js 跨域和ajax 跨域问题小结
2009/07/01 Javascript
javascript权威指南 学习笔记之变量作用域分享
2011/09/28 Javascript
js中eval详解
2012/03/30 Javascript
js克隆对象、数组的常用方法介绍
2013/09/26 Javascript
JS/Jquery判断对象为空的方法
2015/06/11 Javascript
jQuery DateTimePicker 日期和时间插件示例
2017/01/22 Javascript
js时间查询插件使用详解
2017/04/07 Javascript
vue.js2.0 实现better-scroll的滚动效果实例详解
2018/08/13 Javascript
微信jssdk逻辑在vue中的运用详解
2018/11/14 Javascript
ES6 Class中实现私有属性的一些方法总结
2019/07/08 Javascript
JS代码简洁方式之函数方法详解
2020/07/28 Javascript
Python实现冒泡,插入,选择排序简单实例
2014/08/18 Python
python计算一个序列的平均值的方法
2015/07/11 Python
python制作一个桌面便签软件
2015/08/09 Python
Python使用matplotlib填充图形指定区域代码示例
2018/01/16 Python
python实现列表中最大最小值输出的示例
2019/07/09 Python
解决Pycharm 包已经下载,但是运行代码提示找不到模块的问题
2019/08/31 Python
Python实现JS解密并爬取某音漫客网站
2020/10/23 Python
Html5 实现微信分享及自定义内容的流程
2019/08/20 HTML / CSS
苹果美国官方商城:Apple美国
2016/08/24 全球购物
英国体育器材进口商店:UK Sport Imports
2017/03/14 全球购物
迟到检讨书大全
2014/01/25 职场文书
《在山的那边》教学反思
2014/02/23 职场文书
最新大学生创业计划书写作攻略
2014/04/02 职场文书
企业授权委托书范本
2014/09/22 职场文书
逃课检讨书怎么写
2015/01/01 职场文书
公司处罚决定书
2015/06/24 职场文书
感恩老师主题班会
2015/08/12 职场文书
班主任班级管理心得体会
2016/01/07 职场文书