portal html css js resource

r.html 19KB

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