feedback.js 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234
  1. /*!
  2. * ======================================================
  3. * FeedBack Template For MUI (http://dev.dcloud.net.cn/mui)
  4. * =======================================================
  5. * @version:1.0.0
  6. * @author:cuihongbao@dcloud.io
  7. */
  8. (function() {
  9. var index = 1;
  10. var size = null;
  11. var imageIndexIdNum = 0;
  12. var starIndex = 0;
  13. var feedback = {
  14. question: document.getElementById('question'),
  15. contact: document.getElementById('contact'),
  16. imageList: document.getElementById('image-list'),
  17. submitBtn: document.getElementById('submit')
  18. };
  19. var url = 'https://service.dcloud.net.cn/feedback';
  20. feedback.files = [];
  21. feedback.uploader = null;
  22. feedback.deviceInfo = null;
  23. mui.plusReady(function() {
  24. //设备信息,无需修改
  25. feedback.deviceInfo = {
  26. appid: plus.runtime.appid,
  27. imei: plus.device.imei, //设备标识
  28. images: feedback.files, //图片文件
  29. p: mui.os.android ? 'a' : 'i', //平台类型,i表示iOS平台,a表示Android平台。
  30. md: plus.device.model, //设备型号
  31. app_version: plus.runtime.version,
  32. plus_version: plus.runtime.innerVersion, //基座版本号
  33. os: mui.os.version,
  34. net: ''+plus.networkinfo.getCurrentType()
  35. }
  36. });
  37. /**
  38. *提交成功之后,恢复表单项
  39. */
  40. feedback.clearForm = function() {
  41. feedback.question.value = '';
  42. feedback.contact.value = '';
  43. feedback.imageList.innerHTML = '';
  44. feedback.newPlaceholder();
  45. feedback.files = [];
  46. index = 0;
  47. size = 0;
  48. imageIndexIdNum = 0;
  49. starIndex = 0;
  50. //清除所有星标
  51. mui('.icons i').each(function (index,element) {
  52. if (element.classList.contains('mui-icon-star-filled')) {
  53. element.classList.add('mui-icon-star')
  54. element.classList.remove('mui-icon-star-filled')
  55. }
  56. })
  57. };
  58. feedback.getFileInputArray = function() {
  59. return [].slice.call(feedback.imageList.querySelectorAll('.file'));
  60. };
  61. feedback.addFile = function(path) {
  62. feedback.files.push({name:"images"+index,path:path,id:"img-"+index});
  63. index++;
  64. };
  65. /**
  66. * 初始化图片域占位
  67. */
  68. feedback.newPlaceholder = function() {
  69. var fileInputArray = feedback.getFileInputArray();
  70. if (fileInputArray &&
  71. fileInputArray.length > 0 &&
  72. fileInputArray[fileInputArray.length - 1].parentNode.classList.contains('space')) {
  73. return;
  74. };
  75. imageIndexIdNum++;
  76. var placeholder = document.createElement('div');
  77. placeholder.setAttribute('class', 'image-item space');
  78. var up = document.createElement("div");
  79. up.setAttribute('class','image-up')
  80. //删除图片
  81. var closeButton = document.createElement('div');
  82. closeButton.setAttribute('class', 'image-close');
  83. closeButton.innerHTML = 'X';
  84. closeButton.id = "img-"+index;
  85. //小X的点击事件
  86. closeButton.addEventListener('tap', function(event) {
  87. setTimeout(function() {
  88. for(var temp=0;temp<feedback.files.length;temp++){
  89. if(feedback.files[temp].id==closeButton.id){
  90. feedback.files.splice(temp,1);
  91. }
  92. }
  93. feedback.imageList.removeChild(placeholder);
  94. }, 0);
  95. return false;
  96. }, false);
  97. //
  98. var fileInput = document.createElement('div');
  99. fileInput.setAttribute('class', 'file');
  100. fileInput.setAttribute('id', 'image-' + imageIndexIdNum);
  101. fileInput.addEventListener('tap', function(event) {
  102. var self = this;
  103. var index = (this.id).substr(-1);
  104. plus.gallery.pick(function(e) {
  105. // console.log("event:"+e);
  106. var name = e.substr(e.lastIndexOf('/') + 1);
  107. console.log("name:"+name);
  108. plus.zip.compressImage({
  109. src: e,
  110. dst: '_doc/' + name,
  111. overwrite: true,
  112. quality: 50
  113. }, function(zip) {
  114. size += zip.size
  115. console.log("filesize:"+zip.size+",totalsize:"+size);
  116. if (size > (10*1024*1024)) {
  117. return mui.toast('文件超大,请重新选择~');
  118. }
  119. if (!self.parentNode.classList.contains('space')) { //已有图片
  120. feedback.files.splice(index-1,1,{name:"images"+index,path:e});
  121. } else { //加号
  122. placeholder.classList.remove('space');
  123. feedback.addFile(zip.target);
  124. feedback.newPlaceholder();
  125. }
  126. up.classList.remove('image-up');
  127. placeholder.style.backgroundImage = 'url(' + zip.target + ')';
  128. }, function(zipe) {
  129. mui.toast('压缩失败!')
  130. });
  131. }, function(e) {
  132. mui.toast(e.message);
  133. },{});
  134. }, false);
  135. placeholder.appendChild(closeButton);
  136. placeholder.appendChild(up);
  137. placeholder.appendChild(fileInput);
  138. feedback.imageList.appendChild(placeholder);
  139. };
  140. feedback.newPlaceholder();
  141. feedback.submitBtn.addEventListener('tap', function(event) {
  142. if (feedback.question.value == '' ||
  143. (feedback.contact.value != '' &&
  144. feedback.contact.value.search(/^(\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+)|([1-9]\d{4,9})$/) != 0)) {
  145. return mui.toast('信息填写不符合规范');
  146. }
  147. if (feedback.question.value.length > 200 || feedback.contact.value.length > 200) {
  148. return mui.toast('信息超长,请重新填写~')
  149. }
  150. //判断网络连接
  151. if(plus.networkinfo.getCurrentType()==plus.networkinfo.CONNECTION_NONE){
  152. return mui.toast("连接网络失败,请稍后再试");
  153. }
  154. feedback.send(mui.extend({}, feedback.deviceInfo, {
  155. content: feedback.question.value,
  156. contact: feedback.contact.value,
  157. images: feedback.files,
  158. score:''+starIndex
  159. }))
  160. }, false)
  161. feedback.send = function(content) {
  162. feedback.uploader = plus.uploader.createUpload(url, {
  163. method: 'POST'
  164. }, function(upload, status) {
  165. // plus.nativeUI.closeWaiting()
  166. console.log("upload cb:"+upload.responseText);
  167. if(status==200){
  168. var data = JSON.parse(upload.responseText);
  169. //上传成功,重置表单
  170. if (data.ret === 0 && data.desc === 'Success') {
  171. // mui.toast('反馈成功~')
  172. console.log("upload success");
  173. // feedback.clearForm();
  174. }
  175. }else{
  176. console.log("upload fail");
  177. }
  178. });
  179. //添加上传数据
  180. mui.each(content, function(index, element) {
  181. if (index !== 'images') {
  182. console.log("addData:"+index+","+element);
  183. // console.log(index);
  184. feedback.uploader.addData(index, element)
  185. }
  186. });
  187. //添加上传文件
  188. mui.each(feedback.files, function(index, element) {
  189. var f = feedback.files[index];
  190. console.log("addFile:"+JSON.stringify(f));
  191. feedback.uploader.addFile(f.path, {
  192. key: f.name
  193. });
  194. });
  195. //开始上传任务
  196. feedback.uploader.start();
  197. mui.alert("感谢反馈,点击确定关闭","问题反馈","确定",function () {
  198. feedback.clearForm();
  199. mui.back();
  200. });
  201. // plus.nativeUI.showWaiting();
  202. };
  203. //应用评分
  204. mui('.icons').on('tap','i',function(){
  205. var index = parseInt(this.getAttribute("data-index"));
  206. var parent = this.parentNode;
  207. var children = parent.children;
  208. if(this.classList.contains("mui-icon-star")){
  209. for(var i=0;i<index;i++){
  210. children[i].classList.remove('mui-icon-star');
  211. children[i].classList.add('mui-icon-star-filled');
  212. }
  213. }else{
  214. for (var i = index; i < 5; i++) {
  215. children[i].classList.add('mui-icon-star')
  216. children[i].classList.remove('mui-icon-star-filled')
  217. }
  218. }
  219. starIndex = index;
  220. });
  221. //选择快捷输入
  222. mui('.mui-popover').on('tap','li',function(e){
  223. document.getElementById("question").value = document.getElementById("question").value + this.children[0].innerHTML;
  224. mui('.mui-popover').popover('toggle')
  225. })
  226. })();