portal html css js resource

r.html 18KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>资源分享-科袖网</title>
  6. <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  7. <link rel="stylesheet" href="../css/reset.css" />
  8. <link rel="stylesheet" href="../css/common.css" />
  9. <link rel="stylesheet" href="../css/share.css" />
  10. <style>
  11. html,body{margin:0;padding:0px;background: #FFFFFF;}
  12. </style>
  13. <script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
  14. <script type="text/javascript" src="../js/public/swiper.min.js"></script>
  15. <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
  16. <script type="text/javascript" src="../js/public/shareCom.js"></script>
  17. </head>
  18. <body>
  19. <div class="contentBody2">
  20. <!--焦点图 start-->
  21. <div data-editor="topslider">
  22. <div id="index-container">
  23. <ul class="swiper-wrapper">
  24. <!--<li class="swiper-slide"><a class="tab-re"><img src="../images/banner/banner01.jpg" /></a></li>-->
  25. </ul>
  26. <div class="swiper-pagination" id="index-pagination"></div>
  27. </div>
  28. </div>
  29. <div class="showDetail">
  30. <div class="h1Font hWeight" id="resourceName"></div>
  31. <div class="showFont" id="application"></div>
  32. <div class="madiaBlock">
  33. <ul class="mui-table-view noactiveTab infoBlock">
  34. <li class="mui-table-view-cell">
  35. <div class="flexCenter mui-clearfix">
  36. <a id="thisInfo">
  37. <div class="madiaHead" id="thisPic"></div>
  38. <div class="madiaInfo">
  39. <p><span class="h1Font ellipsisSty" id="thisName"></span><em class="authiconNew" title="" id="authFlag"></em></p>
  40. <p class="h3Font ellipsisSty" id="thisOther"></p>
  41. </div>
  42. </a>
  43. <div class="goSpan">
  44. <span class="attenSpan">关注</span>
  45. </div>
  46. </div>
  47. </li>
  48. </ul>
  49. </div>
  50. <!--内容区-->
  51. <div class="showMain showRes">
  52. <ul>
  53. <li>
  54. <div class="showTit">所属机构</div>
  55. <div class="showCon" id="resorceOrg"></div>
  56. </li>
  57. <li>
  58. <div class="showTit">厂商型号</div>
  59. <div class="showCon" id="modelNumber"></div>
  60. </li>
  61. <li>
  62. <div class="showTit">性能参数</div>
  63. <div class="showCon" id="performancePa"></div>
  64. </li>
  65. <li>
  66. <div class="showTit">合作备注</div>
  67. <div class="showCon" id="remarkContent"></div>
  68. </li>
  69. <li>
  70. <div class="showTit">详细介绍</div>
  71. <div class="showCon" id="detailDescp"></div>
  72. </li>
  73. </ul>
  74. </div>
  75. <!--标签模块-->
  76. <ul class="tagList">
  77. <!--<li>
  78. <span class="h2Font"></span>
  79. </li>-->
  80. </ul>
  81. <div class="madiaBlock displayNone">
  82. <div class="madiaTit">相关文章</div>
  83. <ul class="mui-table-view" id="likeArtical">
  84. </ul>
  85. </div>
  86. <!--您可能感兴趣的资源-->
  87. <div class="madiaBlock displayNone">
  88. <div class="madiaTit">您可能感兴趣的资源</div>
  89. <ul class="mui-table-view" id="likeResource">
  90. </ul>
  91. </div>
  92. </div>
  93. <div class="shareEcode">
  94. <img class="Ecodecon" src="../images/ecordCard.jpg" />
  95. <div class="Ecodeinfo">
  96. <a href="http://a.app.qq.com/o/simple.jsp?pkgname=com.ekexiu.app"><button class="frmbtn frmactive">下载移动客户端</button></a>
  97. </div>
  98. </div>
  99. </div>
  100. <script type="text/javascript">
  101. $(document).ready(function() {
  102. var imgUrl = "http://www.ekexiu.com/images/logo180.png";
  103. var lineLink = document.location.href;
  104. var descContent;
  105. var shareTitle;
  106. var appid = '';
  107. var resourceId = GetQueryString("id");
  108. var othisInfo=document.getElementById("thisInfo"); //用户/企业信息
  109. var othisName = document.getElementById("thisName"); //专家名称
  110. var othisOther = document.getElementById("thisOther"); //专家职称/职位
  111. var oauthFlag = document.getElementById("authFlag"); //专家认证
  112. var othisPic = document.getElementById("thisPic"); //专家头像
  113. var oresorcePic = document.getElementById("resorcePic"); //资源图片
  114. var oresourceName = document.getElementById("resourceName"); //资源名称
  115. var oapplication = document.getElementById("application"); //应用用途
  116. var oresorceOrg = document.getElementById("resorceOrg"); //资源所属机构
  117. var omodelNumber = document.getElementById("modelNumber"); //厂商型号
  118. var operformancePa = document.getElementById("performancePa"); //性能参数
  119. var oremarkContent = document.getElementById("remarkContent"); //合作备注
  120. var odetailDescp = document.getElementById("detailDescp"); //详细描述
  121. getRecourceMe();/*获取信息*/
  122. relatedArticles();/*相关文章信息*/
  123. interestingResources();
  124. $.ajax({
  125. "url": "/ajax/resource/pageViews",
  126. "type": "POST",
  127. "dataType": "json",
  128. "data": {
  129. "resourceId": resourceId
  130. },
  131. "success": function(data) {
  132. console.log(data);
  133. if(data.success) {}
  134. },
  135. "error": function() {
  136. //$.MsgBox.Alert('提示', '链接服务器超时')
  137. }
  138. });
  139. //进入发布者详情页面
  140. $("#thisInfo").on("click", function() {
  141. var reType = this.getAttribute("data-type");
  142. if(reType=="1"){
  143. var proId=this.getAttribute("data-id");
  144. location.href="http://" + window.location.host + "/e/p.html?id=" + proId;
  145. }else{
  146. var cmpId=this.getAttribute("data-id");
  147. location.href="http://" + window.location.host + "/e/c.html?id=" + cmpId;
  148. }
  149. })
  150. $("body").on("click",".goSpan",function(){
  151. location.href="http://a.app.qq.com/o/simple.jsp?pkgname=com.ekexiu.app";
  152. $(this).addClass("activeThis");
  153. })
  154. function getRecourceMe() {
  155. $.ajax({
  156. url:'../ajax/resource/queryOne',
  157. data: {
  158. 'resourceId': resourceId,
  159. },
  160. dataType: 'json', //服务器返回json格式数据
  161. type: 'get', //HTTP请求类型
  162. timeout: 10000, //超时时间设置为10秒;
  163. success: function(data) {
  164. if(data.success) {
  165. var mydata = data.data;
  166. var resourceName = mydata.resourceName;
  167. document.title = resourceName;
  168. oresourceName.innerHTML = mydata.resourceName;
  169. oapplication.innerHTML = "用途:"+ mydata.supportedServices;
  170. //微信再次分享配置
  171. shareTitle = oresourceName.innerHTML;
  172. descContent = oapplication.innerHTML;
  173. if(mydata.editProfessor) {
  174. othisInfo.setAttribute("data-id",mydata.editProfessor.id);
  175. othisInfo.setAttribute("data-type",mydata.resourceType);
  176. professorId = othisInfo.getAttribute("data-id");
  177. if(mydata.orgName) { //所属机构
  178. oresorceOrg.innerText = mydata.orgName;
  179. oresorceOrg.parentNode.style.display="block";
  180. }
  181. //用户个人信息
  182. othisName.innerHTML = mydata.editProfessor.name;
  183. var otitleInfo="";
  184. var oOrgInfo="";
  185. if(mydata.editProfessor.title) {
  186. otitleInfo = mydata.editProfessor.title + ",";
  187. } else {
  188. if(mydata.editProfessor.office) {
  189. otitleInfo = mydata.editProfessor.office + ",";
  190. }else{
  191. otitleInfo = "";
  192. }
  193. }
  194. if(mydata.editProfessor.orgName) {
  195. oOrgInfo = mydata.editProfessor.orgName;
  196. }
  197. othisOther.innerHTML = otitleInfo + oOrgInfo;
  198. var professorFlag = autho(mydata.editProfessor.authType, mydata.editProfessor.orgAuth, mydata.editProfessor.authStatus);
  199. oauthFlag.classList.add(professorFlag.sty);
  200. othisPic.classList.add("useHead");
  201. if(mydata.editProfessor.hasHeadImage == 1) {
  202. othisPic.style.backgroundImage = 'url(../images/head/' + mydata.editProfessor.id + '_l.jpg)';
  203. }
  204. }else{
  205. othisInfo.setAttribute("data-id",mydata.organization.id);
  206. othisInfo.setAttribute("data-status",mydata.organization.authStatus);
  207. othisInfo.setAttribute("data-type",mydata.resourceType);
  208. if(mydata.organization.forShort) {
  209. othisName.innerHTML = mydata.organization.forShort;
  210. }else{
  211. othisName.innerHTML = mydata.organization.name;
  212. }
  213. if(mydata.organization.subject){
  214. othisOther.innerHTML = (mydata.organization.subject).replace(/,/, " | ");
  215. }
  216. var mgimg="../images/default-icon.jpg";
  217. if(mydata.organization.hasOrgLogo) {
  218. mgimg="/images/org/" + mydata.organization.id + ".jpg";
  219. }
  220. othisPic.classList.add("cmpHead2");
  221. othisPic.innerHTML='<div class="boxBlock"><img class="boxBlockimg" id="companyImg" src="'+ mgimg+'"></div>'
  222. if(mydata.organization.authStatus==3){
  223. oauthFlag.classList.add("authicon-com-ok");
  224. }
  225. }
  226. if(mydata.spec) { //厂商型号
  227. omodelNumber.innerText = mydata.spec;
  228. omodelNumber.parentNode.style.display="block";
  229. }
  230. if(mydata.parameter) { //性能参数
  231. operformancePa.innerHTML = mydata.parameter;
  232. operformancePa.parentNode.style.display="block";
  233. }
  234. if(mydata.cooperationNotes) { //合作备注
  235. oremarkContent.innerHTML = mydata.cooperationNotes;
  236. oremarkContent.parentNode.style.display="block";
  237. }
  238. if(mydata.descp) { //详细描述
  239. odetailDescp.innerHTML = mydata.descp;
  240. odetailDescp.parentNode.style.display="block";
  241. }
  242. if(mydata.subject) {
  243. var oSub = mydata.subject.split(",");
  244. var oSt = "";
  245. for(var i = 0; i < oSub.length; i++) {
  246. oSt += '<li><p class="h2Font">' + oSub[i] + '</p></li>'
  247. }
  248. $(".tagList").html(oSt);
  249. }else{
  250. $("#resourceList").parents(".otherShow").addClass("displayNone")
  251. }
  252. console.log(mydata.images.length)
  253. if(mydata.images.length!=0) {
  254. imgUrl="http://www.ekexiu.com/data/resource/" + mydata.images[0].imageSrc.replace(/.jpg/,"_s.jpg");
  255. var rPdiv ='';
  256. for(var i = 0; i < mydata.images.length; i++) {
  257. rPdiv +='<li class="swiper-slide"><a class="tab-re"><img src="../data/resource/' + mydata.images[i].imageSrc + '" /></a></li>'
  258. }
  259. $("#index-container ul").append(rPdiv);
  260. //轮换图片滚动
  261. var swiper = new Swiper('#index-container', {
  262. pagination: '#index-pagination',
  263. slidesPerView: 1,
  264. paginationClickable: true,
  265. loop: true,
  266. autoplay: 5000,
  267. autoplayDisableOnInteraction: false
  268. });
  269. }else{
  270. $("#index-container").parent().hide();
  271. }
  272. }
  273. },
  274. error: function(e) {
  275. return;
  276. }
  277. });
  278. }
  279. /*资源里面相关文章*/
  280. function relatedArticles() {
  281. $.ajax({
  282. url:'/ajax/article/byAssResource',
  283. type: "GET",
  284. data: {
  285. "id": resourceId,
  286. },
  287. dataType: "json",
  288. success: function(data) {
  289. if(data.success) {
  290. if(data.data.length == 0) {
  291. return;
  292. }
  293. document.getElementById("likeArtical").parentNode.classList.remove("displayNone");
  294. var $html= data.data;
  295. var lengthT;
  296. if($html.length>5){
  297. lengthT=5;
  298. }else{
  299. lengthT=$html.length
  300. }
  301. for(var i = 0; i < $html.length; i++) {
  302. (function(n) {
  303. var oURL;
  304. if($html[i].articleType==1) {
  305. oURL="/ajax/professor/baseInfo/" + $html[i].professorId;
  306. }else{
  307. oURL="/ajax/org/" + $html[i].orgId;
  308. }
  309. $.ajax({
  310. url:oURL,
  311. type: "GET",
  312. dataType: "json",
  313. success: function(data) {
  314. if(data.success) {
  315. var likeRUl = document.getElementById("likeArtical");
  316. var likeRli = document.createElement("li");
  317. likeRli.className = 'mui-table-view-cell';
  318. likeRli.setAttribute("data-id", $html[n].articleId);
  319. var comName="";
  320. if($html[n].articleType==1) {
  321. var stl = autho(data.data.authType, data.data.orgAuth, data.data.authStatus);
  322. comName=data.data.name;
  323. likeRli.setAttribute("data-type", 1);
  324. }else {
  325. var stl={};
  326. stl.sty="";
  327. stl.title="";
  328. if(data.data.authStatus==3) {
  329. stl.sty="authicon-com-ok";
  330. stl.title="认证企业";
  331. }
  332. if(data.data.forShort){
  333. comName=data.data.forShort;
  334. }else{
  335. comName=data.data.name;
  336. }
  337. likeRli.setAttribute("data-type", 2);
  338. }
  339. var str = ""
  340. str+='<div class="flexCenter OflexCenter mui-clearfix">'
  341. if($html[n].articleImg) {
  342. str += '<div class="madiaHead artHead" style="background-image: url(/data/article/' + $html[n].articleImg + ')"></div>'
  343. } else {
  344. str += '<div class="madiaHead artHead"></div>'
  345. }
  346. str += '<div class="madiaInfo OmadiaInfo">'
  347. str += '<p class="ellipsisSty-2 h1Font">' + $html[n].articleTitle + '</p>'
  348. str += '<p><span class="h2Font" style="margin-right:10px;">' + comName + '</span><span class="time">'+commenTime($html[n].publishTime)+'</span></p>'
  349. str += '</div></div>'
  350. likeRli.innerHTML = str;
  351. likeRUl.appendChild(likeRli,likeRUl.lastChild);
  352. }
  353. },
  354. error: function() {
  355. }
  356. });
  357. })(i);
  358. }
  359. }
  360. },
  361. error: function() {
  362. }
  363. });
  364. }
  365. /*感兴趣的资源*/
  366. function interestingResources() {
  367. $.ajax({
  368. url:"/ajax/resource/ralateResources",
  369. data: {"resourceId": resourceId},
  370. dataType: "json",
  371. traditional: true,
  372. type: 'get', //HTTP请求类型
  373. success: function(data) {
  374. if(data.success) {
  375. console.log(data)
  376. if(data.data.length == 0) {
  377. return;
  378. }
  379. document.getElementById("likeResource").parentNode.classList.remove("displayNone");
  380. var $respond=data.data;
  381. var lengthT;
  382. if($respond.length>5){
  383. lengthT=5;
  384. }else{
  385. lengthT=$respond.length
  386. }
  387. for(var i = 0; i < lengthT; i++) {
  388. (function(n) {
  389. var imgL="../images/default-resource.jpg";
  390. if($respond[i].images.length){
  391. imgL='/data/resource/' + $respond[i].images[0].imageSrc
  392. }
  393. var oURL;
  394. if($respond[i].resourceType==1) {
  395. oURL="/ajax/professor/baseInfo/"+$respond[i].professorId;
  396. }else{
  397. oURL="/ajax/org/" + $respond[i].orgId;
  398. }
  399. $.ajax({
  400. url:oURL,
  401. "type": "GET",
  402. 'dataType': "json",
  403. "success": function(data) {
  404. if(data.success){
  405. var thisName,userType,thisAuth,thisTitle
  406. if(data.data.forShort){
  407. thisName=data.data.forShort;
  408. }else{
  409. thisName=data.data.name;
  410. }
  411. if($respond.resourceType==1) {
  412. userType = autho(data.data.authType, data.data.orgAuth, data.data.authStatus);
  413. thisTitle = userType.title;
  414. thisAuth = userType.sty;
  415. }else {
  416. if(data.data.authStatus==3) {
  417. thisTitle = "科袖认证企业";
  418. thisAuth = "authicon-com-ok";
  419. }
  420. }
  421. var add = document.createElement("li");
  422. add.className = "mui-table-view-cell";
  423. add.setAttribute("data-id",$respond[n].resourceId);
  424. var itemlist = '<div class="flexCenter OflexCenter"><div class="madiaHead resourceHead" style="background-image:url('+imgL+')"></div>';
  425. itemlist += '<div class="madiaInfo OmadiaInfo">';
  426. itemlist += '<p class="ellipsisSty-2 h1Font" id="usertitle">'+$respond[n].resourceName+'</p>';
  427. itemlist += '<p><span class="h2Font">'+thisName+'</span><em class="authiconNew '+thisAuth+'" title="'+thisTitle+'"></em></p>';
  428. itemlist += '</div></div>';
  429. add.innerHTML=itemlist;
  430. document.getElementById("likeResource").appendChild(add);
  431. }
  432. },
  433. 'error': function() {
  434. }
  435. });
  436. })(i);
  437. }
  438. }
  439. },
  440. error: function() {
  441. }
  442. });
  443. }
  444. /*文章跳转*/
  445. $("#likeArtical").on("click", "li", function() {
  446. location.href="http://" + window.location.host + "/e/a.html?id=" + $(this).attr("data-id");
  447. })
  448. /*点击资源列表*/
  449. $("#likeResource").on("click", "li", function() {
  450. location.href="http://" + window.location.host + "/e/r.html?id=" + $(this).attr("data-id");
  451. })
  452. /*微信分享*/
  453. $.ajax({
  454. url: "../ajax/weixin/jsapiTicket",
  455. type: 'get',
  456. dataType: 'json',
  457. contentType: "application/x-www-form-urlencoded; charset=utf-8",
  458. data: {
  459. 'url': location.href.split('#')[0]
  460. },
  461. success: function(data) {
  462. if(data.data) {
  463. wx.config({
  464. debug: false, //调试模式好犀利
  465. appId: data.data.appId,
  466. timestamp: data.data.timestamp,
  467. nonceStr: data.data.nonceStr,
  468. signature: data.data.signature,
  469. jsApiList: [ // 所有要调用的 API 都要加到这个列表中
  470. "onMenuShareAppMessage",
  471. "onMenuShareTimeline",
  472. "onMenuShareQQ",
  473. "onMenuShareQZone",
  474. "scanQRCode",
  475. ]
  476. });
  477. wx.ready(function() {
  478. // 在这里调用 API
  479. wx.onMenuShareAppMessage({ //分享给朋友
  480. title: shareTitle, // 分享标题
  481. desc: descContent, // 分享描述
  482. link: lineLink, // 分享链接
  483. imgUrl: imgUrl, // 分享图标
  484. success: share_success_callback,
  485. cancel: share_cancel_callback
  486. });
  487. wx.onMenuShareTimeline({ //分享到朋友圈
  488. title: shareTitle, // 分享标题
  489. desc: descContent, // 分享描述
  490. link: lineLink, // 分享链接
  491. imgUrl: imgUrl, // 分享图标
  492. success: share_success_callback,
  493. cancel: share_cancel_callback
  494. });
  495. wx.onMenuShareQQ({ //分享到QQ
  496. title: shareTitle, // 分享标题
  497. desc: descContent, // 分享描述
  498. link: lineLink, // 分享链接
  499. imgUrl: imgUrl, // 分享图标
  500. success: share_success_callback,
  501. cancel: share_cancel_callback
  502. });
  503. wx.onMenuShareQZone({ //分享到QQ空间
  504. title: shareTitle, // 分享标题
  505. desc: descContent, // 分享描述
  506. link: lineLink, // 分享链接
  507. imgUrl: imgUrl, // 分享图标
  508. success: share_success_callback,
  509. cancel: share_cancel_callback
  510. });
  511. });
  512. //分享成功后的回调函数
  513. function share_success_callback() {}
  514. //用户取消分享后执行的回调函数
  515. function share_cancel_callback() {}
  516. }
  517. }
  518. });
  519. })
  520. </script>
  521. </body>
  522. </html>