No Description
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

comment_add.htm 21KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461
  1. {include file="public/layout" /}
  2. <body class="bodystyle" style="overflow-y: scroll; cursor: default; -moz-user-select: inherit;min-width:auto;">
  3. <div id="append_parent"></div>
  4. <div id="ajaxwaitid"></div>
  5. {include file="shop/left" /}
  6. <style type="text/css">
  7. .comment_add_textarea {width: 90%; height: 30px; min-height: 30px; overflow-y: hidden;}
  8. .comment_add_li {width: 40px; height: 40px;}
  9. </style>
  10. <div class="page min-hg-c-10">
  11. <div class="fixed-bar">
  12. <div class="item-title">
  13. <a class="back_xin" href="{:url('ShopComment/comment_index')}" title="返回"><i class="iconfont e-fanhui"></i></a>
  14. <div class="subject">
  15. <h3>创建评价</h3>
  16. <h5></h5>
  17. </div>
  18. </div>
  19. </div>
  20. <div class="flexigrid">
  21. <form class="form-horizontal" id="post_form">
  22. <div class="ncap-form-default">
  23. <dl class="row">
  24. <dt class="tit">选择商品</dt>
  25. <dd class="opt" id="goods_list">
  26. <a href="JavaScript:void(0);" data-href="{:url('ShopComment/comment_goods_list')}" onclick="openFullframe(this, '选择商品', '80%', '80%');" class="ncap-btn ncap-btn-green">选择商品</a>
  27. </dd>
  28. </dl>
  29. <dl class="row" id="goods_details" style="display: none;">
  30. <dt class="tit"></dt>
  31. <dd class="opt">
  32. <div class="ey-pro-goods">
  33. <input type="hidden" name="aid" id="goods_id" value="0">
  34. <div class="image"><img id="goods_litpic" width="60" height="60" src=""></div>
  35. <div class="content" id="goods_title">默认商品名</div>
  36. </div>
  37. </dd>
  38. </dl>
  39. <dl class="row">
  40. <dt class="tit">评分等级</dt>
  41. <dd class="opt">
  42. <div class="ey-start-ment curpoin">
  43. <input type="hidden" name="total_score" id="total_score" value="5">
  44. <i class="iconfont e-xingxing active" onclick="totalScore(0);"></i>
  45. <i class="iconfont e-xingxing active" onclick="totalScore(1);"></i>
  46. <i class="iconfont e-xingxing active" onclick="totalScore(2);"></i>
  47. <i class="iconfont e-xingxing active" onclick="totalScore(3);"></i>
  48. <i class="iconfont e-xingxing active" onclick="totalScore(4);"></i>
  49. </div>
  50. </dd>
  51. </dl>
  52. <dl class="row">
  53. <dt class="tit"> <label>评价内容</label> </dt>
  54. <dd class="opt">
  55. <div class="ment-comment-table">
  56. <div class="ment-table-wrapper">
  57. <div class="ment-table ment-table-default">
  58. <div class="ment-table-header">
  59. <table cellspacing="0" cellpadding="0" border="0" style="width: 947px;">
  60. <colgroup> <col width="616"> <col width="270"> <col width="60"> </colgroup>
  61. <thead>
  62. <tr>
  63. <th> <div class="ment-table-cell"><span>评价文字</span> </div> </th>
  64. <th> <div class="ment-table-cell"><span>评价图片</span> </div> </th>
  65. <th> <div class="ment-table-cell"><span>操作</span> </div> </th>
  66. </tr>
  67. </thead>
  68. </table>
  69. </div>
  70. <div class="ment-table-body">
  71. <table cellspacing="0" cellpadding="0" border="0" style="width: 947px;">
  72. <colgroup> <col width="616"> <col width="270"> <col width="60"> </colgroup>
  73. <tbody class="ment-table-tbody" id="comment_add_tr">
  74. <tr draggable="false" class="ment-table-row" id="comment_add_tr_1">
  75. <td class="ment-table-column-jPj8o1">
  76. <div class="ment-table-cell">
  77. <div class="ment-table-cell-slot">
  78. <div class="ment-form-item ment-form-item-required" style="margin-bottom: 0px;">
  79. <div class="ment-form-item-content">
  80. <div class="ment-input-wrapper ment-input-wrapper-default ment-input-type-textarea">
  81. <textarea wrap="soft" autocomplete="off" spellcheck="false" placeholder="请输入评价" rows="2" maxlength="500" class="ment-input comment_add_textarea" name="content[1]" id="comment_add_textarea_1"></textarea>
  82. </div>
  83. </div>
  84. </div>
  85. </div>
  86. </div>
  87. </td>
  88. <td class="ment-table-column-fbhv6T">
  89. <div class="ment-table-cell">
  90. <div class="ment-table-cell-slot">
  91. <div class="show-img swiper-img">
  92. <div class="slide-image">
  93. <ul class="image" id="comment_add_ul_1">
  94. <li class="slide-image-add comment_add_li" id="comment_add_li_1" data-id="1" data-pic-id="1" onClick="recordCommentID(this);" title="最多允许上传6张图片">
  95. <div class="text-icon">
  96. <span class="iconfont e-jiahao icon"></span><span>添加图片</span>
  97. </div>
  98. </li>
  99. </ul>
  100. </div>
  101. </div>
  102. </div>
  103. </div>
  104. </td>
  105. <td class="ment-table-column-6E5cHe"> <div class="ment-table-cell"><div><!-- 删除 --></div></div> </td>
  106. </tr>
  107. </tbody>
  108. </table>
  109. </div>
  110. </div>
  111. </div>
  112. <div class="add-con">
  113. <a class="ment-btn ment-btn-text" href="JavaScript:void(0);" data-id="1" onClick="addCommentHtml(this);"><span>+添加评价</span></a>
  114. </div>
  115. </div>
  116. </dd>
  117. </dl>
  118. <dl class="row">
  119. <dt class="tit"> <label><em>*</em>用户</label> </dt>
  120. <dd class="opt">
  121. <input type="hidden" name="users_id" id="users_id" value="0">
  122. <span id="users_details" style="display: none;"> 已选择<font id="users_select" color="red">0</font>位用户 &nbsp; </span>
  123. <a href="JavaScript:void(0);" data-href="{:url('ShopComment/comment_users_list')}" onclick="openFullframe(this, '添加用户', '80%', '80%');" data-cancel_callback="cancel_callback" class="ncap-btn ncap-btn-green">添加用户</a>
  124. <p class="notic">建议选择的用户数量与评价文字条数对应匹配,每条评价对应一个用户;数量不对应时随机匹配</p>
  125. </dd>
  126. </dl>
  127. <dl class="row">
  128. <dt class="tit"> <label for="eYLaydateTimeLinkage">评价时段</label> </dt>
  129. <dd class="opt">
  130. <input type="text" id="eYLaydateTimeLinkage" name="add_time" placeholder="请选择时间范围" lay-verify='datetime' class="choicetime w220 layui-ldate"/>
  131. <span class="add-on input-group-addon"> <i class="glyphicon glyphicon-calendar fa fa-calendar"></i></span>
  132. </dd>
  133. </dl>
  134. <dl class="row">
  135. <dt class="tit"> <label>审核状态</label> </dt>
  136. <dd class="opt">
  137. <label> <input type="radio" name="is_show" value="1" checked="checked">已审核 </label>
  138. &nbsp;&nbsp;&nbsp;
  139. <label> <input type="radio" name="is_show" value="0">未审核 </label>
  140. </dd>
  141. </dl>
  142. </div>
  143. <div class="ncap-form-default">
  144. <dl class="row">
  145. <div class="bot">
  146. <a href="JavaScript:void(0);" data-url="{:url('ShopComment/comment_add', ['_ajax'=>1])}" onclick="commentAdd(this);" class="ncap-btn-big ncap-btn-green" id="submitBtn">确认提交</a>
  147. </div>
  148. </dl>
  149. </div>
  150. </form>
  151. </div>
  152. </div>
  153. <!-- 日期联动选择js文件 start -->
  154. <script type="text/javascript" src="__STATIC__/common/js/ey_laydate_time_linkage.js?v={$version}"></script>
  155. <!-- 日期联动选择js文件 end -->
  156. <script type="text/javascript">
  157. try {
  158. if (typeof(eval('is_conceal_1649209614')) == "function" && is_conceal_1649209614()){
  159. $(".page").css("margin-left", "");
  160. $(".page").css("min-width", "");
  161. } else {
  162. $(".page").css("margin-left", "100px");
  163. $(".page").css("min-width", "auto");
  164. }
  165. } catch(e) {
  166. }
  167. // 商品选择页所需方法
  168. function goodsSelect(obj) {
  169. var goods_id = $(obj).data('id');
  170. var goods_title = $(obj).data('title');
  171. var goods_litpic = $(obj).data('litpic');
  172. if (goods_id && goods_title && goods_litpic) {
  173. // 隐藏商品选择按钮
  174. // $('#goods_list').hide();
  175. // 赋值商品信息
  176. $('#goods_id').val(goods_id);
  177. $('#goods_title').html(goods_title);
  178. $('#goods_litpic').attr('src', goods_litpic);
  179. // 显示商品信息
  180. $('#goods_details').show();
  181. // 关闭所有弹框
  182. layer.closeAll();
  183. }
  184. }
  185. // 会员选择页所需方法
  186. var usersID = [];
  187. var usersStr = '';
  188. function usersSelect(obj, opt) {
  189. // 当前点击会员ID
  190. var users_id = $(obj).val();
  191. if (users_id) {
  192. // 数组去重
  193. usersID = $.unique(usersID.sort());
  194. // 判断是否已选择当前点击会员
  195. var index = $.inArray(users_id, usersID);
  196. if ('cut' == opt) {
  197. console.log(34)
  198. // 去除已选
  199. usersID.splice(index, 1);
  200. } else if ('add' == opt) {
  201. console.log(56)
  202. // 增加已选
  203. usersID.push(users_id);
  204. }
  205. usersStr = usersID.join(',');
  206. }
  207. }
  208. // 清空已选会员 并 关闭所有弹框
  209. function closeUsersSelect(clear) {
  210. // 清空已选会员
  211. if (clear) usersID = [];
  212. // 关闭所有弹框
  213. layer.closeAll();
  214. }
  215. function cancel_callback()
  216. {
  217. usersID = [];
  218. }
  219. // 处理已选会员 并 关闭所有弹框
  220. function submitUsersSelect() {
  221. if (usersID.length >= 1) {
  222. // 显示已选会员数量
  223. $('#users_details').show().children('#users_select').html(usersID.length);
  224. // 赋值会员ID隐藏域
  225. $('#users_id').val(usersStr);
  226. } else {
  227. showErrorAlert('请选择会员');
  228. return false;
  229. }
  230. // 关闭所有弹框
  231. closeUsersSelect(false);
  232. }
  233. // 评分设置
  234. function totalScore(score) {
  235. // 删除所有评分选中效果
  236. $('.e-xingxing').removeClass('active');
  237. // 追加当选评分
  238. $('.e-xingxing').each(function(idx, ele) {
  239. $('.e-xingxing').eq(idx).addClass('active');
  240. if (idx == score) {
  241. $('#total_score').val(score+1);
  242. return false;
  243. }
  244. });
  245. }
  246. // 添加评价的html
  247. function addCommentHtml(obj) {
  248. // 获取当前评价框最大ID 后 +1
  249. var id = parseInt($(obj).attr('data-id')) + parseInt(1);
  250. // 追加新的评价框HTML
  251. var html = [
  252. '<tr draggable="false" class="ment-table-row" id="comment_add_tr_' + id + '">'+
  253. '<td class="ment-table-column-jPj8o1">'+
  254. '<div class="ment-table-cell">'+
  255. '<div class="ment-table-cell-slot">'+
  256. '<div class="ment-form-item ment-form-item-required" style="margin-bottom: 0px;">'+
  257. '<div class="ment-form-item-content">'+
  258. '<div class="ment-input-wrapper ment-input-wrapper-default ment-input-type-textarea">'+
  259. '<textarea wrap="soft" autocomplete="off" spellcheck="false" placeholder="请输入评价" rows="2" maxlength="500" class="ment-input comment_add_textarea" name="content[' + id + ']" id="comment_add_textarea_' + id + '"></textarea>'+
  260. '</div>'+
  261. '</div>'+
  262. '</div>'+
  263. '</div>'+
  264. '</div>'+
  265. '</td>'+
  266. '<td class="ment-table-column-fbhv6T">'+
  267. '<div class="ment-table-cell">'+
  268. '<div class="ment-table-cell-slot">'+
  269. '<div class="show-img swiper-img">'+
  270. '<div class="slide-image">'+
  271. '<ul class="image" id="comment_add_ul_' + id + '">'+
  272. '<li class="slide-image-add comment_add_li" id="comment_add_li_' + id + '" data-id="' + id + '" data-pic-id="1" onClick="recordCommentID(this);" title="最多允许上传6张图片">'+
  273. '<div class="text-icon">'+
  274. '<span class="iconfont e-jiahao icon"></span><span>添加图片</span>'+
  275. '</div>'+
  276. '</li>'+
  277. '</ul>'+
  278. '</div>'+
  279. '</div>'+
  280. '</div>'+
  281. '</div>'+
  282. '</td>'+
  283. '<td class="ment-table-column-6E5cHe"> <div class="ment-table-cell" onClick="delCommentHtml(' + id + ');"><div>删除</div></div> </td>'+
  284. '</tr>'
  285. ];
  286. $('#comment_add_tr').append(html);
  287. // 覆盖当前评价框最大ID
  288. $(obj).attr('data-id', id);
  289. }
  290. // 删除评价HTML
  291. function delCommentHtml(id) {
  292. $('#comment_add_tr_' + id).remove();
  293. }
  294. // 记录当前点击要上传图片的评论列表ID
  295. var commentID = commentPicID = 1;
  296. function recordCommentID(obj) {
  297. // 设置点击的评价ID
  298. commentID = $(obj).attr('data-id') ? $(obj).attr('data-id') : 1;
  299. // 设置点击的评价ID
  300. commentPicID = $(obj).attr('data-pic-id') ? $(obj).attr('data-pic-id') : 1;
  301. // 调用图片上传
  302. GetUploadify(6, '', 'allimg', 'uploadImgProimgCallBack');
  303. }
  304. // 图片上传后续处理图片数据
  305. function uploadImgProimgCallBack(paths) {
  306. var html = [];
  307. for (var i = 0; i < paths.length; i++) {
  308. // 已上传6张图片,多余图片已被清理
  309. if (commentPicID > 6) {
  310. $('#comment_add_li_' + commentID).hide();
  311. window.top.layer.alert('评价图片总数超过6张上限,仅显示前6张图片', {icon: 1, title: false, closeBtn: false, yes: function () {
  312. window.top.layer.closeAll();
  313. }});
  314. return false;
  315. }
  316. // 图片显示框加载
  317. html = [
  318. '<li class="img-li comment_add_li">'+
  319. '<input type="hidden" name="upload_img[' + commentID + '][]" value="' + paths[i] + '">'+
  320. '<img src="' + paths[i] + '">'+
  321. '<i class="iconfont e-guanbi" data-paths="' + paths[i] + '" data-id="' + commentID + '" onClick="uploadImgClear(this);"></i>'+
  322. '</li>'
  323. ];
  324. $("#comment_add_ul_" + commentID + ' li:last').before(html);
  325. // 更新图片上传ID
  326. commentPicID = parseInt(commentPicID) + parseInt(1);
  327. $('#comment_add_li_' + commentID).attr('data-pic-id', commentPicID);
  328. }
  329. // 若上传图片大于等于6
  330. if (commentPicID > 6) $('#comment_add_li_' + commentID).hide();
  331. // 关闭所有弹框
  332. window.top.layer.closeAll();
  333. }
  334. // 清理选中的图片
  335. function uploadImgClear(obj) {
  336. // 设置点击的评价ID
  337. commentID = $(obj).attr('data-id') ? $(obj).attr('data-id') : 1;
  338. // 图片路径
  339. var path = $(obj).attr('data-paths');
  340. // 删除图片显示框
  341. $(obj).parent().remove();
  342. // 恢复可上传图片数量
  343. commentPicID = $('#comment_add_li_' + commentID).attr('data-pic-id');
  344. commentPicID = parseInt(commentPicID) - parseInt(1);
  345. $('#comment_add_li_' + commentID).attr('data-pic-id', commentPicID);
  346. // 显示对应上传按钮
  347. $('#comment_add_li_' + commentID).show();
  348. // 删除服务器图片文件(目前已停用)
  349. $.ajax({
  350. type:'POST',
  351. url :"{:url('Uploadimgnew/delupload')}",
  352. data:{action: "del", filename: path, _ajax: 1},
  353. success:function(){}
  354. });
  355. }
  356. // 添加评价
  357. var addGoodsID = 0;
  358. var addGoodsMsg = 0;
  359. var addUsersID = 0;
  360. var addUsersMsg = 0;
  361. function commentAdd(obj) {
  362. // 评价参数处理
  363. var isPost = commentPost();
  364. if (!isPost) return false;
  365. // 发送数据
  366. $.ajax({
  367. type: 'post',
  368. url : $(obj).attr('data-url'),
  369. data: $('#post_form').serialize(),
  370. dataType: 'json',
  371. success : function(res) {
  372. if (1 === parseInt(res.code)) {
  373. layer.msg(res.msg, {icon: 1, time: 2000}, function() {
  374. window.location.href = res.url;
  375. });
  376. } else {
  377. if (res.data.post) {
  378. commentPost();
  379. } else {
  380. // 指向提示未填写处
  381. if (res.data.obj) $(res.data.obj).focus();
  382. // 提示内容
  383. showErrorMsg(res.msg);
  384. }
  385. }
  386. },
  387. error: function(e) {
  388. showErrorAlert(e.responseText);
  389. }
  390. });
  391. }
  392. // 评价参数处理
  393. function commentPost() {
  394. // 商品参数处理
  395. addGoodsID = $('#goods_id').val() ? $('#goods_id').val() : 0;
  396. if (parseInt(addGoodsID) === 0) {
  397. addGoodsMsg = 1;
  398. $('#goods_list').children('a').click();
  399. return false;
  400. }
  401. // 会员参数处理
  402. addUsersID = $('#users_id').val() ? $('#users_id').val() : 0;
  403. if (parseInt(addUsersID) === 0) {
  404. addUsersMsg = 1;
  405. $('#users_id').siblings('a').click();
  406. return false;
  407. }
  408. // 评分处理
  409. var totalScore = $('#total_score').val() ? $('#total_score').val() : 0;
  410. if (parseInt(totalScore) === 0) {
  411. $('#total_score').val(5);
  412. $('.e-xingxing').addClass('active');
  413. return false;
  414. }
  415. // 评价时间处理
  416. var eYLaydateTimeLinkage = $('#eYLaydateTimeLinkage').val() ? $('#eYLaydateTimeLinkage').val() : 0;
  417. if (parseInt(eYLaydateTimeLinkage) === 0) {
  418. layer.msg('请选择评价时段', {icon: 5, time: 2000});
  419. return false;
  420. }
  421. return true;
  422. }
  423. </script>
  424. {include file="public/footer" /}