微信小程序实现留言板


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 全选效果实现代码
Mar 23 Javascript
extjs grid设置某列背景颜色和字体颜色的实现方法
Sep 06 Javascript
IE不支持getElementsByClassName最终完美解决方案
Dec 17 Javascript
jQuery层次选择器选择元素使用介绍
Apr 18 Javascript
推荐10 个很棒的 jQuery 特效代码
Oct 04 Javascript
JavaScript构造函数详解
Dec 27 Javascript
JavaScript动态添加事件之事件委托
Jul 12 Javascript
js原生之焦点图转换加定时器实例
Dec 12 Javascript
jquery实现自适应banner焦点图
Feb 16 Javascript
关于foreach循环中遇到的问题小结
May 08 Javascript
js 图片转base64的方式(两种)
Apr 24 Javascript
详解vue.js移动端配置flexible.js及注意事项
Apr 10 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实现异步调用方法研究与分享
2011/10/27 PHP
在PHP中使用X-SendFile头让文件下载更快
2014/06/01 PHP
php支付宝接口用法分析
2015/01/04 PHP
如何在HTML 中嵌入 PHP 代码
2015/05/13 PHP
PHP实现在线阅读PDF文件的方法
2015/06/17 PHP
解决php表单重复提交实现方法
2015/09/29 PHP
PHP+Jquery与ajax相结合实现下拉淡出瀑布流效果【无需插件】
2016/05/06 PHP
php Session无效分析资料整理
2016/11/29 PHP
PHP使用PDO访问oracle数据库的步骤详解
2017/09/29 PHP
php实现解析xml并生成sql语句的方法
2018/02/03 PHP
在JavaScript中实现命名空间
2006/11/23 Javascript
jQuery + Flex 通过拖拽方式动态改变图片的代码
2011/08/03 Javascript
JavaScript立即执行函数的三种不同写法
2014/09/05 Javascript
利用jQuery实现漂亮的圆形进度条倒计时插件
2015/09/30 Javascript
JavaScript在网页中画圆的函数arc使用方法
2015/11/13 Javascript
微信小程序 常见问题总结(4058,40013)及解决办法
2017/01/11 Javascript
AngularJS学习笔记之表单验证功能实例详解
2017/07/06 Javascript
关于vue.extend和vue.component的区别浅析
2017/08/16 Javascript
微信小程序自定义导航栏
2018/12/31 Javascript
layui 弹出删除确认界面的实例
2019/09/06 Javascript
webpack HappyPack实战详解
2019/10/08 Javascript
vue-cli基础配置及webpack配置修改的完整步骤
2019/10/20 Javascript
vue 实现通过vuex 存储值 在不同界面使用
2019/11/11 Javascript
[07:37]DOTA2-DPC中国联赛2月2日Recap集锦
2021/03/11 DOTA
浅析python 中__name__ = '__main__' 的作用
2014/07/05 Python
Python的__builtin__模块中的一些要点知识
2015/05/02 Python
pandas.dataframe按行索引表达式选取方法
2018/10/30 Python
利用selenium爬虫抓取数据的基础教程
2019/06/10 Python
python中如何进行连乘计算
2020/05/28 Python
基于SQLAlchemy实现操作MySQL并执行原生sql语句
2020/06/10 Python
HTML5边玩边学(1)画布实现方法
2010/09/21 HTML / CSS
美国CVS药店官网:CVS Pharmacy
2018/07/26 全球购物
预备党员对照检查材料思想汇报
2014/09/24 职场文书
2014年乡镇纪委工作总结
2014/12/19 职场文书
学前教育见习总结
2015/06/23 职场文书
使用redis生成唯一编号及原理示例详解
2021/09/15 Redis