serviceDetails.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289
  1. /*
  2. * @author:liting
  3. * @update:2018/06/20
  4. *
  5. */
  6. import 'css/bootstrap.less';
  7. import 'bootstrap/dist/js/bootstrap.js';
  8. import 'css/newMenu/public.css';
  9. import 'css/newMenu/header.css'
  10. import 'css/newMenu/serviceDetails.css';
  11. import 'js/public.js';
  12. import 'css/newMenu/quill.bubble.css'
  13. "use strict";
  14. $(function () {
  15. init();
  16. function init(){
  17. heightF();
  18. pages();
  19. add();
  20. }
  21. $('.collection p').eq(0).click(function () {
  22. let heart = $('.heart');
  23. if (heart.hasClass('active')) {
  24. collectionApi(0) //取消收藏
  25. } else {
  26. collectionApi(1) //收藏
  27. }
  28. })
  29. //数量加减;
  30. var nub=0;
  31. function add(){
  32. $('.up').click(function(){
  33. nub = $(this).siblings('#number').val();
  34. nub++;
  35. if(nub>99){
  36. nub=99
  37. }
  38. $(this).siblings('#number').val(nub);
  39. })
  40. $('.down').click(function(){
  41. nub = $(this).siblings('#number').val();
  42. nub--;
  43. if(nub<1){
  44. nub=1
  45. }
  46. $(this).siblings('#number').val(nub);
  47. })
  48. $('#number').keyup(function(){
  49. let val = $(this).val();
  50. if(isNaN(val)){
  51. $(this).val(1)
  52. };
  53. if(val>99){
  54. $(this).val(99)
  55. };
  56. if(val<1){
  57. $(this).val(1)
  58. };
  59. })
  60. }
  61. let hash = window.location.search,
  62. hashArr =hash.split('='),
  63. ids =hashArr[1];
  64. function collectionApi(index) {
  65. let url = index?'/api/user/portal/projectInterest':'/api/user/portal/projectCancelInterest'
  66. $.ajax({
  67. method: "post",
  68. dataType: "json",
  69. url: globalConfig.context + url,
  70. data: {
  71. id:ids
  72. },
  73. success: function (data) {
  74. if (data.error && data.error.length) {
  75. msg(data.error[0].message);
  76. }else{
  77. if(!index){
  78. $('.heart').removeClass('active');
  79. }else{
  80. $('.heart').addClass('active');
  81. }
  82. msg(index?'收藏成功,请至个人中心查看.':'撤销收藏');
  83. }
  84. }
  85. })
  86. }
  87. //价值
  88. function heightF(){
  89. let het = $('.serviceDetailsList .value div').height();
  90. $('.serviceDetailsList .value h4').css({
  91. height:(het+20)+'px',
  92. lineHeight:(het+20)+'px'
  93. });
  94. };
  95. /*评论 切换*/
  96. $('.tabEvaluate li').click(function(){
  97. let index= $(this).index();
  98. $(this).addClass('active').siblings().removeClass('active');
  99. $('.tabList>div').eq(index).show().siblings().hide();
  100. });
  101. //评论列表
  102. loadDate();
  103. var thePageNo = 1,
  104. thePageLength = 1,
  105. pageSize = 4;
  106. function loadDate(pageNo) {
  107. $.ajax({
  108. method: "get",
  109. dataType: "json",
  110. url: globalConfig.context + "/open/unlanded/comment/list",
  111. data: {
  112. pageNo: pageNo || 1,
  113. pageSize:4,
  114. commodityId:ids
  115. },
  116. success: function (data) {
  117. var theArrs = [];
  118. if(data&&data.error.length){
  119. msg(data.error[0].message)
  120. };
  121. if(data.data.totalCommentCount>0){
  122. let good = (((data.data.positiveCommentCount)/(data.data.totalCommentCount))*100).toFixed(1),
  123. middle = (((data.data.ordinaryCommentCount)/(data.data.totalCommentCount))*100).toFixed(1),
  124. bad = (100-good-middle).toFixed(1);
  125. $('.commentDetails').html(`
  126. 评价 :<span>好评(${good+'%'})</span><span>中评(${middle+'%'})</span><span>差评(${bad+'%'})</span>
  127. `)
  128. }else{
  129. $('.commentDetails').html(`
  130. 评价 :<span>好评(100%)</span><span>中评(0%)</span><span>差评(0%)</span>
  131. `)
  132. }
  133. if (data.data && data.data.comments.list.length) {
  134. let nub = data.data.comments.list.length;
  135. for (let i = 0; i < nub; i++) {
  136. let thisdata = data.data.comments.list[i],name;
  137. let times =thisdata.createTime?new Date(thisdata.createTime).toLocaleString():'',
  138. star=thisdata.star;
  139. if(thisdata.uname.indexOf('游客')>-1){
  140. name='匿名'
  141. }else{
  142. name=thisdata.uname
  143. };
  144. theArrs.push(`
  145. <li>
  146. <div class="stasf">
  147. <p>用户名 :<span class="uName">${name}</span></p>
  148. <div class="satisfied">
  149. <span>满意度:</span>
  150. <ol>
  151. <li><span class="glyphicon ${star>=1?'glyphicon-star':'glyphicon-star-empty'} "></span></li>
  152. <li><span class="glyphicon ${star>=2?'glyphicon-star':'glyphicon-star-empty'}"></span></li>
  153. <li><span class="glyphicon ${star>=3?'glyphicon-star':'glyphicon-star-empty'}"></span></li>
  154. <li><span class="glyphicon ${star>=4?'glyphicon-star':'glyphicon-star-empty'}"></span></li>
  155. <li><span class="glyphicon ${star>=5?'glyphicon-star':'glyphicon-star-empty'}"></span></li>
  156. </ol>
  157. </div>
  158. </div>
  159. <div><time>${times}</time></div>
  160. <div class="satisfiedContent">
  161. <p>${thisdata.content}</p>
  162. </div>
  163. </li>`);
  164. };
  165. };
  166. $('.numberBars').html(data.data.totalCommentCount>10?'10+':data.data.totalCommentCount)
  167. $('.evaluateList>ul').empty();
  168. $('.evaluateList>ul').append(theArrs.join(''));
  169. if (!(data.data.comments.list.length)) {
  170. $('.evaluateList>ul').html("<div class='list_none'>暂无评论</div>");
  171. $('.pagination_box').css('display', 'none')
  172. }else{
  173. $('.pagination_box').css('display', 'block');
  174. }
  175. thePageLength = data.data.comments.totalCount ? Math.ceil(data.data.comments.totalCount / pageSize) : 1;
  176. $('.totalCount').html(`共${data.data.comments.totalCount}条数据 ${thePageLength}页`)
  177. var pageArr = [],
  178. firstNo = 1,
  179. endNo = 5;
  180. if (thePageNo > 3) {
  181. firstNo = thePageNo - 2;
  182. endNo = Math.min((Number(thePageNo) + 2), thePageLength);
  183. } else {
  184. endNo = Math.min(thePageLength, 5);
  185. };
  186. for (let i = firstNo; i <= endNo; i++) {
  187. if (i == thePageNo) {
  188. pageArr.push(
  189. '<li class="pageNumber active"><a href="#" value=' + i + ' >' + i + '</a></li>'
  190. );
  191. } else {
  192. pageArr.push(
  193. '<li class="pageNumber"><a href="#" value=' + i + ' >' + i + '</a></li>'
  194. );
  195. }
  196. };
  197. $('.pageNumber').remove();
  198. $('.pagePre').after(pageArr.join(''));
  199. }
  200. });
  201. }
  202. //f分页
  203. function pages() {
  204. $('.pagination').on('click', 'li', function (e) {
  205. e.preventDefault();
  206. if (this.className === 'pagePre') {
  207. if (thePageNo > 1) {
  208. thePageNo = 1;
  209. loadDate(thePageNo);
  210. }
  211. } else if (this.className === 'pageNext') {
  212. if (thePageNo < thePageLength) {
  213. thePageNo = thePageLength;
  214. loadDate(thePageNo);
  215. }
  216. } else {
  217. var nextPageNo = $(this).children()[0].text;
  218. if (thePageNo != nextPageNo) {
  219. $(this).siblings("li").removeClass("active");
  220. $(this).addClass("active");
  221. thePageNo = nextPageNo;
  222. loadDate(thePageNo);
  223. };
  224. };
  225. });
  226. }
  227. //提示框渐隐函数
  228. function msg(txt) {
  229. if($('.smg').hasClass('active')){
  230. return ;
  231. }
  232. txt?$('#msg').val(txt):'';
  233. $('.smg').addClass('active');
  234. var lit = $('#msg').val(txt);
  235. setTimeout(function () {
  236. $('.smg').removeClass('active');
  237. $('#msg').val('');
  238. }, 2000)
  239. }
  240. //评论星星
  241. star();
  242. function star(){
  243. $('.commentStar .ulStar span').hover(function(){
  244. $(this).addClass('glyphicon-star').removeClass('glyphicon-star-empty').prevAll().addClass('glyphicon-star').removeClass('glyphicon-star-empty');
  245. $(this).nextAll().removeClass('glyphicon-star').addClass('glyphicon-star-empty').stop(true);
  246. })
  247. }
  248. //新建评论
  249. addComment();
  250. function addComment(){
  251. $('.CommentSend .btn').click(function(e){
  252. e.preventDefault();
  253. let starNum = $('.commentStar .ulStar span.glyphicon-star').length,
  254. textVal = $('#commentArea').val();
  255. if(!starNum){
  256. msg('请您选择星级!');
  257. return;
  258. }
  259. if(!textVal){
  260. msg('请您填写评论内容!');
  261. return;
  262. }
  263. $.ajax({
  264. method:'post',
  265. url: globalConfig.context + "/open/addComment",
  266. dataType:'json',
  267. data:{
  268. commodityId:ids,
  269. content:textVal,
  270. star:starNum,
  271. commodityType:0
  272. }
  273. }).done(function(data){
  274. if(data&&data.error.length){
  275. msg(data.error[0].message);
  276. return;
  277. }
  278. msg('评论成功,感谢您的评论。');
  279. $('#commentArea').val('');
  280. $('.ulStar span').removeClass('glyphicon-star').addClass('glyphicon-star-empty');
  281. loadDate();
  282. })
  283. })
  284. }
  285. })