EnterpriseInformationDetails.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427
  1. <template>
  2. <div class="autoBox box" style="min-height: 550px;">
  3. <div class="crumbs">
  4. <el-breadcrumb separator="/">
  5. <el-breadcrumb-item :to="{ path: 'home' }">{{$t('common.Home')}}</el-breadcrumb-item>
  6. <el-breadcrumb-item ><span @click="back" style="font-weight: 700;cursor: pointer;">{{$t('common.EnterpriseShow')}}</span></el-breadcrumb-item>
  7. <el-breadcrumb-item>{{$t(name)}}</el-breadcrumb-item>
  8. </el-breadcrumb>
  9. </div>
  10. <div style="margin-top: 30px;width: 100%;">
  11. <div style="padding:0 100px;text-align: center;line-height: 50px;color: #666;font-size: 28px;font-weight: 700;">{{initData.title}}</div>
  12. <div style="margin: 0 20px;padding: 0 10px; line-height: 50px;color: #bcbcbc;font-size: 15px;border-bottom: 1px solid #bcbcbc;">
  13. <span>{{$t('common.ReleaseTime')}}:{{formatDate(initData.updateDate)}} | {{$t('common.Source')}}:{{initData.auther}}</span>
  14. <span style="float: right;cursor: pointer;" v-if="!collectionType" @click="Collection">{{$t('common.Collection')}}</span>
  15. <span style="float: right;cursor: pointer;" v-if="collectionType" @click="unCollection">{{$t('common.Collected')}}</span>
  16. <!-- Collected -->
  17. </div>
  18. <!-- <img :src="'api/file/pub/'+ content.pictureUrl" alt="" style="width: 300px;" :style="content.picturePosition=='L'?'float: left;margin-right:20px;':'float: right;margin-left:20px;'">-->
  19. <div class="contentDiv" style="padding:0 50px;line-height: 40px;font-size: #666;padding:20px;" v-html="initData.contentHtml"></div>
  20. <!-- <div style="padding:0 50px;line-height: 40px;font-size: #666;margin-top: 30px;">
  21. 附件:<a href="javascript:;">{{initData.path}}</a>
  22. </div> -->
  23. <!--<div style="padding:0 50px;line-height: 40px;font-size: #666;">
  24. {{$t('common.ReleaseTime')}}:{{formatDate(content.createDate)}}
  25. </div>-->
  26. </div>
  27. <el-dialog
  28. :title="$i18n.locale == 'zh' ? '提示' : 'Reminder'"
  29. :visible.sync="toViewLogin"
  30. :width="$i18n.locale == 'zh' ? '30%' : '40%'"
  31. :height="$i18n.locale == 'zh' ? '300px' : '386px'"
  32. :before-close="toViewLoginChange"
  33. >
  34. <div style="width: 100%; height: 100%">
  35. <img
  36. src="@/assets/img/loginTips.png"
  37. alt=""
  38. style="width: 180px; height: 180px; margin-left: 20px"
  39. />
  40. <div
  41. style="float: right; margin-right: 20px"
  42. :style="
  43. $i18n.locale == 'zh'
  44. ? 'width: 49%;margin-top: 10px;'
  45. : 'width: 453px;margin-top: -25px;'">
  46. <div style="
  47. font-size: 20px;
  48. font-weight: normal;
  49. color: #333333;
  50. font-family: HiraginoSansGB-W3, HiraginoSansGB;
  51. line-height: 40px;">
  52. {{ $t("common.ReminderFirst") }}
  53. </div>
  54. <div style="
  55. font-size: 16px;
  56. font-family: HiraginoSansGB-W3, HiraginoSansGB;
  57. font-weight: normal;
  58. color: #666666;
  59. line-height: 30px;">
  60. {{ $t("common.ReminderSecond") }}
  61. <span style="color: #0091ff; font-size: 18px">{{ num }}</span>
  62. {{ $t("common.ReminderThird") }}
  63. </div>
  64. <div style="
  65. font-size: 14px;
  66. font-family: HiraginoSansGB-W3, HiraginoSansGB;
  67. font-weight: normal;
  68. color: #666666;
  69. line-height: 30px;">
  70. {{ $t("common.ReminderForth") }}
  71. </div>
  72. <div style="
  73. font-size: 14px;
  74. font-family: HiraginoSansGB-W3, HiraginoSansGB;
  75. height: 33px;
  76. line-height: 60px;
  77. font-weight: normal;
  78. color: #0091ff;">
  79. <span
  80. style="margin-left: 40px"
  81. class="cursor"
  82. @click="toViewLoginCh('login')">
  83. {{ $t("common.ReminderFifth") }}
  84. </span>
  85. <span
  86. style="margin-left: 10px"
  87. class="cursor"
  88. @click="toView('Register')">
  89. {{ $t("common.ReminderSixth") }}
  90. </span>
  91. </div>
  92. </div>
  93. </div>
  94. </el-dialog>
  95. </div>
  96. </template>
  97. <script>
  98. import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
  99. import 'vue-awesome-swiper/node_modules/swiper/dist/css/swiper.css'
  100. import {addCollectInfo} from "@/api/baseUnitView";
  101. import {getPortalMyCollectModelByResearch } from "@/api/operation/basePortalModelFollowInfo";
  102. import {getInformationById} from "@/api/baseUnitView";
  103. import { getToken, resetToken } from "@/utils/auth";
  104. export default {
  105. name: 'countryInformationDetails',
  106. data () {
  107. return {
  108. collectionType:false,
  109. initData:{},
  110. toViewLogin: false,
  111. timer: "",
  112. num: 0,
  113. name:this.$route.query.name,
  114. page:{
  115. baseId:this.$route.query.key,
  116. },
  117. }
  118. },
  119. watch:{
  120. '$i18n.locale'(){
  121. this.getData();
  122. },
  123. toViewLogin() {
  124. if (this.toViewLogin == true) {
  125. this.loginTipsChange();
  126. }
  127. },
  128. },
  129. created(){},
  130. mounted(){
  131. this.$store.commit('modify', 'enterpriseInformationDetails');
  132. window.localStorage.setItem('router', 'enterpriseInformationDetails');
  133. clearInterval(this.timer);
  134. this.getData();
  135. this.Swiper()
  136. },
  137. methods:{
  138. getData(){
  139. this.page.language=this.$i18n.locale.toUpperCase();
  140. getInformationById(this.page).then(res=>{
  141. var data = res.data;
  142. if(data){
  143. this.initData=res.data.cmsInformationView;
  144. }
  145. this.getCollection()
  146. })
  147. },
  148. Swiper(){
  149. var galleryThumbs = new Swiper('.gallery-thumbs', {
  150. spaceBetween: 10,
  151. slidesPerView: 4,
  152. freeMode: true,
  153. watchSlidesVisibility: true,
  154. watchSlidesProgress: true,
  155. });
  156. var galleryTop = new Swiper('.gallery-top', {
  157. spaceBetween: 10,
  158. navigation: {
  159. nextEl: '.swiper-button-next',
  160. prevEl: '.swiper-button-prev',
  161. },
  162. thumbs: {
  163. swiper: galleryThumbs
  164. }
  165. });
  166. },
  167. toViewLoginCh(router){
  168. clearInterval(this.timer);
  169. this.$router.push(router);
  170. },
  171. toView (router, json) {
  172. this.$store.commit('modify', router);
  173. window.localStorage.setItem('router', router);
  174. const { href } = this.$router.resolve({
  175. name: router,
  176. query: {
  177. key: json
  178. }
  179. });
  180. window.open(href, '_blank');
  181. },
  182. getIconUrl(url){
  183. return require("@/assets/img/realTimeInfo/"+url);
  184. },
  185. toView(router,json){
  186. this.$router.push({name:router,params:json})
  187. },
  188. screenBack(data){
  189. console.log(data,'screenBackscreenBackscreenBackscreenBack')
  190. },
  191. // 未登录跳转
  192. loginTipsChange() {
  193. const that = this;
  194. this.num = 5;
  195. clearInterval(that.timer);
  196. this.timer = setInterval(function () {
  197. if (that.num > 0) {
  198. that.num--;
  199. } else {
  200. if (that.toViewLogin == true) {
  201. clearInterval(that.timer);
  202. that.toViewLoginCh("login");
  203. } else {
  204. clearInterval(that.timer);
  205. }
  206. }
  207. }, 1000);
  208. },
  209. getCollection(){
  210. let that = this;
  211. let user = window.localStorage.getItem('user');
  212. var users = JSON.parse(user);
  213. var modelType = 'information';
  214. var userId = users.userId;
  215. var modelId=this.initData.baseEntityId;
  216. getPortalMyCollectModelByResearch(modelId, modelType, userId).then(res => {
  217. that.collectionType = res.data.result;
  218. })
  219. },
  220. unCollection(){
  221. let user = window.localStorage.getItem('user');
  222. let tokenDetaile= this.$Cookies.get('token');
  223. if (!tokenDetaile) {
  224. // this.$message.warning(this.$i18n.locale=='zh'?"请先登录":"Please login first");
  225. this.toViewLogin = true;
  226. }else{
  227. var users = JSON.parse(user);
  228. this.userId = users.userId;
  229. let list ={
  230. modelId:this.initData.baseEntityId,
  231. modelType:"message",
  232. userId:users.userId,
  233. collectType:"uncollect"
  234. }
  235. var token = "" + getToken();
  236. addCollectInfo(list.modelId,list.modelType,list.userId,list.collectType,token).then(res=>{
  237. if(res.status==200){
  238. this.$message({
  239. message: this.$i18n.locale=='zh'?"取消收藏成功":"DisCollection of success",
  240. type: 'success'
  241. });
  242. this.collectionType = false;
  243. }
  244. this.resetToken();
  245. }).catch(error => {
  246. this.resetToken();
  247. });
  248. }
  249. },
  250. Collection(){
  251. let user = window.localStorage.getItem('user');
  252. let tokenDetaile= this.$Cookies.get('token');
  253. if (!tokenDetaile) {
  254. // this.$message.warning(this.$i18n.locale=='zh'?"请先登录":"Please login first");
  255. this.toViewLogin = true;
  256. }else{
  257. var users = JSON.parse(user);
  258. this.userId = users.userId;
  259. let list ={
  260. modelId:this.initData.baseEntityId,
  261. modelType:"message",
  262. userId:users.userId,
  263. collectType:"collect"
  264. }
  265. var token = "" + getToken();
  266. addCollectInfo(list.modelId,list.modelType,list.userId,list.collectType,token).then(res=>{
  267. if(res.status==200){
  268. this.$message({
  269. message: this.$i18n.locale=='zh'?"收藏成功":"Collection of success",
  270. type: 'success'
  271. });
  272. this.collectionType = true;
  273. }
  274. this.resetToken();
  275. }).catch(error => {
  276. this.resetToken();
  277. });
  278. }
  279. },
  280. screen(i){
  281. this.index=i
  282. },
  283. getInformation(num){
  284. this.informationsClass=num
  285. },
  286. back() {
  287. this.$router.go(-1); //返回上一层
  288. },
  289. }
  290. }
  291. </script>
  292. <!-- Add "scoped" attribute to limit CSS to this component only -->
  293. <style scoped>
  294. .box {
  295. margin-top: 10px;
  296. background: #fff;
  297. /* height: 500px; */
  298. padding: 20px 0;
  299. }
  300. .crumbs {
  301. margin-left: 20px;
  302. }
  303. body {
  304. margin: 0;
  305. }
  306. .swipers {
  307. position: absolute;
  308. top: 30px;
  309. left: 100px;
  310. width: 460px;
  311. height: 390px;
  312. }
  313. .details {
  314. position: absolute;
  315. top: 30px;
  316. left: 600px;
  317. width: 460px;
  318. height: 390px;
  319. }
  320. .swiper-container {
  321. width: 100%;
  322. height: 300px;
  323. margin-left: auto;
  324. margin-right: auto;
  325. }
  326. .swiper-slide {
  327. background-size: cover;
  328. background-position: center;
  329. }
  330. .gallery-top {
  331. height: 80%;
  332. width: 100%;
  333. }
  334. .gallery-thumbs {
  335. height: 20%;
  336. box-sizing: border-box;
  337. padding: 10px 0;
  338. }
  339. .gallery-thumbs .swiper-slide {
  340. width: 25%;
  341. height: 100%;
  342. opacity: 0.4;
  343. }
  344. .gallery-thumbs .swiper-slide-thumb-active {
  345. opacity: 1;
  346. }
  347. .initData_label {
  348. color: #6c8c9d;
  349. font-weight: 700;
  350. font-size: 18px;
  351. line-height: 42px;
  352. }
  353. .enterprise_style{
  354. line-height: 40px;
  355. color: #6C819D;
  356. /* padding-left: 100px; */
  357. font-size: 18px;
  358. /* font-weight: 700; */
  359. margin-top: 5px;
  360. margin-left: 100px;
  361. border-bottom: 1px solid #95d13e;
  362. }
  363. .enterprise_style_span {
  364. padding: 10px;
  365. text-align: center;
  366. height: 100%;
  367. background: #95d13e;
  368. color: #fff;
  369. /* border-bottom: 2px solid #6699ff; */
  370. }
  371. .enterprise_style_product tr {
  372. line-height: 30px;
  373. width: 100%;
  374. display: inline-block;
  375. border-bottom: 1px dashed #ccc;
  376. font-size: 14px;
  377. color: #6C819D;
  378. margin-bottom: 5px;
  379. }
  380. .recommend {
  381. margin-top:15px;
  382. margin-left: 100px;
  383. }
  384. .recommend li{
  385. display: inline-block;
  386. width: 170px;
  387. /* height: 130px; */
  388. text-align: center;
  389. margin-right: 15px;
  390. }
  391. .information1 {
  392. display: inline-block;
  393. width: 123px;
  394. height: 100%;
  395. border:1px solid rgba(228, 228, 228, 1);
  396. text-align: center;
  397. background: #f9f9f9;
  398. color: #999;
  399. }
  400. .information2 {
  401. display: inline-block;
  402. width: 123px;
  403. height: 100%;
  404. border-top:3px solid #2c5589;
  405. text-align: center;
  406. color: #2c5589;
  407. }
  408. .information1:hover {
  409. color: #FF0036;
  410. }
  411. .contentDiv >>> table{
  412. margin: auto;
  413. border-collapse:collapse !important;
  414. }
  415. .contentDiv >>> tr ,.contentDiv >>> td{
  416. border: 1px solid black !important;
  417. }
  418. .contentDiv >>>tbody {
  419. width: 800px;
  420. display: inherit;
  421. }
  422. </style>