feedback.html 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
  6. <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  7. <title></title>
  8. <link rel="stylesheet" type="text/css" href="../../css/api.css" />
  9. <link rel="stylesheet" type="text/css" href="../../css/weui.min.css" />
  10. <link rel="stylesheet" type="text/css" href="../../css/iconfont.css" />
  11. <link rel="stylesheet" type="text/css" href="../../css/style.css" />
  12. <style>
  13. .back-item{
  14. width:100%;
  15. padding:10px;
  16. text-align:center;
  17. /*border-bottom: 1px solid #e8e8e8;*/
  18. box-sizing: border-box;
  19. }
  20. .back-item img{
  21. width:20px;
  22. }
  23. textarea{
  24. width:100%;
  25. height: 2rem;
  26. font-size: 0.28rem;
  27. line-height: 0.38rem;
  28. padding: 0.5em;
  29. box-sizing: border-box;
  30. -webkit-appearance: none;
  31. }
  32. .close_btn {
  33. position: absolute;
  34. margin-left: -0.52rem;
  35. color: #d9251c;
  36. }
  37. .image-list .img_item {
  38. float: left;
  39. }
  40. .my-order.my-btn-list.font-rem11.apply-agent {
  41. line-height: 0.7rem;
  42. }
  43. .my-order.my-btn-list.font-rem11.apply-agent span.span_emil {
  44. line-height: 0;
  45. position: absolute;
  46. padding-left: 0.35rem;
  47. }
  48. </style>
  49. <script>
  50. (function(w, d, m) {
  51. function r() {
  52. var t = 100,
  53. o = 750,
  54. e = d.documentElement.clientWidth || w.innerWidth,
  55. n = m.max(m.min(e, 480), 320),
  56. h = 50;
  57. 320 >= n && (h = m.floor(n / o * t * .99)),
  58. n > 320 && 362 >= n && (h = m.floor(n / o * t * 1)),
  59. n > 362 && 375 >= n && (h = m.floor(n / o * t * 1)),
  60. n > 375 && (h = m.floor(n / o * t * .97)),
  61. d.querySelector("html").style.fontSize = h + "px"
  62. };
  63. r();
  64. w.onresize = function() {
  65. r()
  66. }
  67. })(window, document, Math);
  68. </script>
  69. </head>
  70. <body>
  71. <div class="topbar"></div>
  72. <header class="back-header back-header-bottom">
  73. <ul>
  74. <li class="padding-20 back-btn"><img class="back-header-ico" src="../../image/nav_button_back_default.png" /></li>
  75. <li class="back-header-title">意见反馈</li>
  76. <li class="more-btn"></li>
  77. </ul>
  78. </header>
  79. <section class="border-none padding-top">
  80. <div class="back-item" style="position:relative;" id="wordCount">
  81. <textarea row="5" id="content" maxlength="100" placeholder="您有什么意见或反馈,请告诉我们..."></textarea>
  82. <!-- <span style="position:absolute;right:10px;bottom:5px;"><span id="count-txt">0</span>/100</span> -->
  83. <span class="wordwrap" style="bottom: -0.32rem;"><var class="word">100</var>/ 100</span>
  84. </div>
  85. <div class="h50"></div>
  86. <div style="font-size: 0.28rem;">添加图片(最多3张)</div>
  87. <div class="h5"></div>
  88. <div class="image-list">
  89. <span></span>
  90. <img id="select-image" src="../../image/addimg.png" style="width: 0.86rem;" />
  91. </div>
  92. <div class="h20" style="padding-bottom: 0.3rem;"></div>
  93. <div class="m-bottom">提 交</div>
  94. <div class="h20" style="height: 0.5rem;"></div>
  95. <div class="setting-item" style="text-align: center;font-size: 0.28rem;border-bottom:none;">
  96. <img src="../../image/tel.png" style="width: 0.36rem;vertical-align: middle;" >
  97. <span> 客服电话:400-8233-289</span>
  98. </div>
  99. </section>
  100. </body>
  101. <script type="text/javascript" src="../../script/api.js"></script>
  102. <script type="text/javascript" src="../../script/jquery.min.js"></script>
  103. <script type="text/javascript" src="../../script/jquery.tap.js"></script>
  104. <script type="text/javascript">
  105. var _imgArr = [];
  106. var _tImgArr = [];
  107. apiready = function() {
  108. setFixStatusBar();
  109. };
  110. $(function() {
  111. var wordCount = $("#wordCount"), textArea = wordCount.find("textarea"), word = wordCount.find(".word");
  112. statInputNum(textArea, word);
  113. })
  114. $(".m-bottom").on("tap", function() {
  115. if ($("#content").val() == "") {
  116. api.toast({ msg: '请填写反馈内容!' });
  117. return false;
  118. }
  119. _imgArr.splice(0, _imgArr.length);
  120. $(".image-list .img_item").each(function() {
  121. var _src = $(this).data("img");
  122. _imgArr.push(_src);
  123. });
  124. toast_loding_show();
  125. $.ajax({
  126. url: siteurl + 'v2/member/feedback',//'v1/member/feedback',
  127. data: {
  128. member_id: $api.getStorage("memberid"),
  129. content: $("#content").val(),
  130. images: _imgArr.toString()
  131. },
  132. headers: { "X-TOKEN": $api.getStorage("accesstoken") },
  133. dataType: 'json',
  134. type: 'post',
  135. success: function(datas) {
  136. toast_loding_hide();
  137. api.toast({ msg: datas.msg });
  138. }
  139. });
  140. return false;
  141. })
  142. $("#select-image").on("tap", function() {
  143. if (_tImgArr.length < 3) {
  144. var has = hasPermission('storage');
  145. if(!has || !has[0] || !has[0].granted){
  146. api.confirm({
  147. title: '提醒',
  148. msg: "没有获得 存储 权限\n是否前往设置?",
  149. buttons: ['去设置', '取消']
  150. }, function (ret, err) {
  151. var index = ret.buttonIndex;
  152. if (index == 1) {
  153. reqPermission('storage');
  154. } else {
  155. api.toast({ msg: '获取存储权限失败...' });
  156. }
  157. });
  158. // $(".border-none").removeClass("mask-hidden");
  159. return false;
  160. }
  161. api.getPicture({
  162. sourceType: 'album',
  163. encodingType: 'jpg',
  164. mediaValue: 'pic',
  165. destinationType: 'url',
  166. allowEdit: false,
  167. quality: 100,
  168. targetWidth: 600,
  169. targetHeight: 600,
  170. saveToPhotoAlbum: false
  171. }, function(ret, err) {
  172. if (ret) {
  173. upimg(ret.data);
  174. // _tImgArr.push(ret.data);
  175. }
  176. });
  177. } else {
  178. api.toast({ msg: '上传不能超过3张图片' });
  179. }
  180. return false;
  181. })
  182. //setting-item
  183. $(".setting-item").on("tap", function() {
  184. var _phone = '4008233289';
  185. api.call({
  186. type: 'tel_prompt',
  187. number: _phone
  188. });
  189. return false;
  190. })
  191. function upimg(files) {
  192. if (files) {
  193. api.ajax({
  194. url: siteurl + 'v2/upload/tmp',//'?do=upfile',
  195. method: 'post',
  196. data: {
  197. files: {
  198. file: files
  199. }
  200. },
  201. headers: { "X-TOKEN": $api.getStorage("accesstoken") }
  202. }, function(ret, err) {
  203. if (ret) {
  204. _tImgArr.push(ret.data);
  205. create_html(_tImgArr);
  206. }
  207. });
  208. }
  209. }
  210. function create_html(list){
  211. var html = '';
  212. for(var i in list){
  213. html += '<div class="img_item" data-img="'+list[i].file_name+'"><img id="select-image" class="select-image" src="' + list[i].url + '" style="width: 1.6rem;margin-right: 0.2rem;"/><span class="close_btn iconfont icon-guanbi" data-index="'+i+'"></span></div>'
  214. }
  215. $(".image-list span").html(html);
  216. }
  217. $(".image-list").on("tap", ".close_btn", function() {
  218. // console.log(this)
  219. _tImgArr.splice($(this).data('index')*1, 1);
  220. create_html(_tImgArr);
  221. });
  222. </script>
  223. </html>