微信小程序实现留言板


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 相关文章推荐
javascript模拟的Ping效果代码 (Web Ping)
Mar 13 Javascript
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
Apr 08 Javascript
php显示当前文件所在的文件以及文件夹所有文件以树形展开
Dec 13 Javascript
js显示文本框提示文字的方法
May 07 Javascript
jQuery animate easing使用方法图文详解
Jun 17 Javascript
如何快速上手Vuex
Feb 14 Javascript
微信网页授权并获取用户信息的方法
Jul 30 Javascript
解决vue点击控制单个样式的问题
Sep 05 Javascript
npm scripts 使用指南详解
Oct 08 Javascript
Vue组件之单向数据流的解决方法
Nov 10 Javascript
微信小程序使用setData修改数组中单个对象的方法分析
Dec 30 Javascript
JS实现判断移动端PC端功能
Feb 21 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
一个阿拉伯数字转中文数字的函数
2006/10/09 PHP
PHP similar_text 字符串的相似性比较函数
2010/05/26 PHP
PHP中“简单工厂模式”实例代码讲解
2012/09/04 PHP
Mac系统下使用brew搭建PHP(LNMP/LAMP)开发环境
2015/03/03 PHP
PHP实现无限极分类的两种方式示例【递归和引用方式】
2019/03/25 PHP
Laravel 修改验证异常的响应格式实例代码详解
2020/05/25 PHP
js关闭浏览器窗口及检查浏览器关闭事件
2013/09/03 Javascript
一个字符串反转函数可实现字符串倒序
2014/09/15 Javascript
NodeJs——入门必看攻略
2016/06/27 NodeJs
JS实现简单易用的手机端浮动窗口显示效果
2016/09/07 Javascript
JS制作图形验证码实现代码
2020/10/19 Javascript
JavaScript实现窗口抖动效果
2016/10/19 Javascript
react.js 获取真实的DOM节点实例(必看)
2017/04/17 Javascript
强大的JavaScript响应式图表Chartist.js的使用
2017/09/13 Javascript
详解在微信小程序的JS脚本中使用Promise来优化函数处理
2019/03/06 Javascript
用js简单提供增删改查接口
2019/05/12 Javascript
JavaScript常用8种数组去重代码实例
2020/09/09 Javascript
Python黑魔法Descriptor描述符的实例解析
2016/06/02 Python
django rest framework 数据的查找、过滤、排序的示例
2018/06/25 Python
python 实现交换两个列表元素的位置示例
2019/06/26 Python
Django工程的分层结构详解
2019/07/18 Python
Python实现一个数组除以一个数的例子
2019/07/20 Python
matplotlib基础绘图命令之bar的使用方法
2020/08/13 Python
Django生成数据库及添加用户报错解决方案
2020/10/09 Python
Python实现图片指定位置加图片水印(附Pyinstaller打包exe)
2021/03/04 Python
基于HTML5实现类似微信手机摇一摇功能(计算摇动次数)
2017/07/24 HTML / CSS
记一次高分屏下canvas模糊问题
2020/02/17 HTML / CSS
亚马逊印度站:Amazon.in
2017/10/15 全球购物
Airbnb爱彼迎官网:成为爱彼迎房东,赚取收入
2019/03/14 全球购物
法国高保真音响和家庭影院商店:Son Video
2019/04/26 全球购物
寄语十八大感言
2014/02/07 职场文书
《每逢佳节倍思亲》教后反思
2014/04/19 职场文书
实习单位鉴定评语
2014/04/26 职场文书
租房协议书范例
2014/10/14 职场文书
关于迟到的检讨书
2015/05/06 职场文书
MySQL分区表管理命令汇总
2022/03/21 MySQL