经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 移动开发 » 微信小程序 » 查看文章
微信小程序实现留言板
来源:jb51  时间:2018/11/1 9:43:55  对本文有异议

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


CSS:

  1. /* pages/order/message2/message2.wxss */
  2. .msg-box{
  3. padding: 20px;
  4. }
  5. .send-box{
  6. display: flex;
  7. }
  8. .input{
  9. border: 1px solid #B0C4DE;
  10. padding: 5px;
  11. }
  12. .msg-info{
  13. display: block;
  14. margin: 10px 0 0 0 ;
  15. color: #339900;
  16. }
  17. .place-input{
  18. color: salmon;
  19. }
  20. .list-view{
  21. margin: 20px 0 0 0;
  22. }
  23. .item{
  24. overflow: hidden;
  25. border-bottom: 1px dashed #87CEFF;
  26. height: 30px;
  27. line-height: 30px;
  28. }
  29. .text1{
  30. float: left;
  31. }
  32. .close-btn{
  33. float: right;
  34. margin: 5px 5px 0 0;
  35. }
  36.  

js:

  1. const app = getApp();
  2. Page({
  3. /**
  4. * 页面的初始数据
  5. */
  6. data: {
  7. msgData:
  8. [
  9. {
  10. child_id: 1,
  11. msg:
  12. "我想做个眉毛,到店后求推荐。",
  13. checked:''
  14. },
  15. {
  16. child_id: 2,
  17. msg:
  18. "我只有2小时,您看着安排吧。",
  19. checked: ''
  20. },
  21. {
  22. child_id: 3,
  23. msg:
  24. "我和朋友一起过来。",
  25. checked: ''
  26. },
  27. {
  28. child_id: 4,
  29. msg:
  30. "美甲样式到店挑选。",
  31. checked: ''
  32. },
  33. {
  34. child_id: 5,
  35. msg:
  36. "给眉毛再补个颜色。",
  37. checked: ''
  38. },
  39. {
  40. child_id: 6,
  41. msg:
  42. "我要补睫毛哦。",
  43. checked:''
  44. }
  45. ],
  46. message: '',
  47. message_id:[],
  48. },
  49. bindTextAreaChange: function(e){
  50. var that = this
  51. that.setData({
  52. message:e.detail.value
  53. })
  54. },
  55. click:function(e){
  56. var that = this;
  57. let id = e.currentTarget.dataset.id;
  58. let index = e.currentTarget.dataset.index;
  59. var value = [];
  60. value = this.data.message_id;
  61. var array_i = this.in_array(id, value);
  62. var chekeds = that.data.msgData;
  63. var msg = chekeds[index].msg;
  64. var message = that.data.message;
  65. if (!e.currentTarget.dataset.checked){
  66. chekeds[index].checked = true
  67. that.setData({
  68. message: message + msg
  69. })
  70. }else{
  71. chekeds[index].checked = false
  72. that.setData({
  73. message: message.replace(msg, '')
  74. })
  75. }
  76. that.setData({
  77. msgData: chekeds
  78. })
  79. if (array_i) {
  80. value.splice(array_i, 1);
  81. } else {
  82. value.push(id);
  83. }
  84. this.setData({
  85. message_id: value,
  86. })
  87. },
  88. in_array: function (search, array) {
  89. for (var i in array) {
  90. if (array[i] == search) {
  91. return i;
  92. }
  93. }
  94. return false;
  95. },
  96. submit:function(){
  97. var value = [];
  98. var message = this.data.message;
  99. var msgData = this.data.msgData;
  100. if (message == '' && !value.length) {
  101. wx.showToast({
  102. title: '暂无选择项目',
  103. icon:'none'
  104. })
  105. return;
  106. }
  107. app.globalData.message = message;
  108. for (var i = 0; i < msgData.length; i++) {
  109. if(message.indexOf(msgData[i].msg) > -1){
  110. value[i] = msgData[i].child_id;
  111. }
  112. }
  113. wx.request({
  114. url: 'https://www.omeiclub.com/app/public/index.php/index/index/server',
  115. method: 'POST',
  116. data: { message_id: value, openId: app.globalData.openId, message: message, token: app.globalData.token},
  117. header: {
  118. 'Accept': 'application/json'
  119. },
  120. success: function (res) {
  121. if(res){
  122. // wx.showToast({
  123. // title: '捎话成功',
  124. // success:function(){
  125. // }
  126. // })
  127. wx.switchTab({
  128. url: '/pages/order/order',
  129. success: function (e) {
  130. var page = getCurrentPages().pop();
  131. if (page == undefined || page == null) return;
  132. page.onLoad();
  133. }
  134. })
  135. app.globalData.message = message;
  136. }
  137. console.log(res)
  138. }
  139. })
  140. },
  141. /**
  142. * 生命周期函数--监听页面加载
  143. */
  144. onLoad: function (options) {
  145. var that = this;
  146. wx.request({
  147. url: 'https://www.omeiclub.com/app/public/index.php/index/index/serversle',
  148. method: 'POST',
  149. data: { openId: app.globalData.openId, token: app.globalData.token},
  150. header: {
  151. 'Accept': 'application/json'
  152. },
  153. success: function (res) {
  154. if (res.data){
  155. var message_id = res.data.message_id;
  156. var value = that.data.msgData;
  157. var message = res.data.message;
  158. that.setData({
  159. message: message
  160. });
  161. for (var i = 0; i < value.length;i++) {
  162. if (that.in_array(value[i].child_id, message_id)) {
  163. value[i].checked = true;
  164. that.setData({
  165. msgData: value,
  166. });
  167. }
  168. }
  169. }
  170. }
  171. })
  172. },
  173. /**
  174. * 生命周期函数--监听页面初次渲染完成
  175. */
  176. onReady: function () {
  177. },
  178. /**
  179. * 生命周期函数--监听页面显示
  180. */
  181. onShow: function () {
  182. },
  183. /**
  184. * 生命周期函数--监听页面隐藏
  185. */
  186. onHide: function () {
  187. },
  188. /**
  189. * 生命周期函数--监听页面卸载
  190. */
  191. onUnload: function () {
  192. },
  193. /**
  194. * 页面相关事件处理函数--监听用户下拉动作
  195. */
  196. onPullDownRefresh: function () {
  197. },
  198. /**
  199. * 页面上拉触底事件的处理函数
  200. */
  201. onReachBottom: function () {
  202. },
  203. /**
  204. * 用户点击右上角分享
  205. */
  206. onShareAppMessage: function () {
  207. }
  208. })
  209.  

html

  1. <!--pages/order/message/message.wxml-->
  2. <view class='message_nav'>
  3. <form bindsubmit='FormSubmit'>
  4. <view class='section'>
  5. <textarea class='message1' type='text' placeholder="请选择或者输入捎话(60字以内)" maxlength='80' style="word- wrap:break-word" bindinput='bindTextAreaChange' value="{{message}}"></textarea>
  6. </view>
  7. <view class='fast'>快速捎话:</view>
  8. <checkbox-group class="checkboxChange">
  9. <view wx:for="{{msgData}}" wx:key="{{index}}" data-index="{{index}}" data-id="{{item.child_id}}" data-checked='{{item.checked}}' bindtap='click' >
  10. <checkbox value='{{item.msg}}' class='item' checked='{{item.checked}}' >{{item.msg}}</checkbox>
  11. </view>
  12. </checkbox-group>
  13. <button class='submit' bindtap='submit'>捎话</button>
  14. </form>
  15. </view>

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

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号