IntroductionLeagueMemberDetails.vue 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543
  1. <template>
  2. <div>
  3. <div class="autoBox box">
  4. <div class="crumbs">
  5. <el-breadcrumb separator="/">
  6. <el-breadcrumb-item :to="{ path: 'home' }">{{$t('common.Home')}}</el-breadcrumb-item>
  7. <el-breadcrumb-item @click="toView('IntroductionMemberProfile',union)" >{{$t('common.AllianceShow')}}</el-breadcrumb-item>
  8. <el-breadcrumb-item>{{initData.unitName}}</el-breadcrumb-item>
  9. </el-breadcrumb>
  10. </div>
  11. <div style="width: 100%;height: 510px;position: relative;border-bottom: 1px solid #ccc;">
  12. <div class="swipers">
  13. <div class="swiper-container gallery-top">
  14. <div class="swiper-wrapper">
  15. <div class="swiper-slide" v-for="(item,index) in img" v-if="img.length>0">
  16. <img :src="'api/file/pub/' + item" alt="" style="width: 100%;height: 100%;" >
  17. <img :src="'api/file/pub/' + '/def/def1.png'" alt="" style="width: 100%;height: 100%;">
  18. </div>
  19. <div class="swiper-slide" v-if="img.length <= 0">
  20. <img :src="'api/file/pub/' + '/def/def1.png'" alt="" style="width: 100%;height: 100%;">
  21. </div>
  22. </div>
  23. <div class="swiper-button-next swiper-button-white"></div>
  24. <div class="swiper-button-prev swiper-button-white"></div>
  25. </div>
  26. <div class="swiper-container gallery-thumbs">
  27. <div class="swiper-wrapper">
  28. <div class="swiper-slide" v-for="(item,index) in img">
  29. <img :src="'api/file/pub/' + item" alt="" style="width: 100%;height: 100%;">
  30. </div>
  31. <div class="swiper-slide" v-if="img.length <= 0">
  32. <img :src="'api/file/pub/' + '/def/def1.png'" alt="" style="width: 100%;height: 100%;">
  33. </div>
  34. </div>
  35. </div>
  36. <div style="float: right;color: #666;font-size: 14px;margin-right: 20px;">
  37. </div>
  38. </div>
  39. <div class="details">
  40. <div style="width: 100%; font-size: 15px;color: #95949c;" >
  41. <div>
  42. <span class="initData_label cursor" style="color: #2c558a;width: 100%;">{{initData.unitName}}</span>
  43. </div>
  44. <div style="line-height: 35px;">
  45. <div>
  46. <span>
  47. <i class="el-icon-location-outline"></i>
  48. {{$t('common.place')}}:{{countryDictsMap[initData.unitCountryDict]}}{{initData.unitRegion?'-'+initData.unitRegion:''}}
  49. </span>
  50. </div>
  51. <div>
  52. <span>
  53. <i class="fa fa-star-o"></i>
  54. {{$t('common.DateOfEstablishment')}}:{{initData.setUpDate}}
  55. </span>
  56. </div>
  57. <div>
  58. <span>
  59. <i class="el-icon-time"></i>
  60. {{$t('common.LegalRepresentative')}}:{{initData.corporateName}}
  61. </span>
  62. </div>
  63. <div>
  64. <span><i class="el-icon-office-building"></i> {{$t('common.OfficialWebsite')}}:
  65. <a href="javaScript:;" class="a-style" @click="toOffcial(initData.officialWebsitePath)">
  66. {{initData.officialWebsitePath?initData.officialWebsitePath:''}}
  67. </a></span>
  68. </div>
  69. <div v-if="initData.unitLabel" >
  70. <el-tag style="margin-right: 10px;" v-for="item in initData.unitLabel">{{item}}</el-tag>
  71. </div>
  72. <div>
  73. <div style="color: #666;">{{$t('common.intro')}}:</div>
  74. <div style="height: 120px; line-height: 24px; color: rgb(51, 51, 51); font-size: 14px;
  75. -webkit-box-orient: vertical;
  76. position:relative;
  77. line-height:1.4em;
  78. overflow: hidden;
  79. height:7em;" class="plate" @click="dialogVisibleChange">
  80. {{initData.projectPerformance}}
  81. </div>
  82. </div>
  83. </div>
  84. </div>
  85. </div>
  86. </div>
  87. <div style="margin: 0 30px" v-for="(item,index) in history">
  88. <div class="enterprise_style">
  89. <span class="enterprise_style_span" style="display: inline-block;">{{item.title}}</span>
  90. </div>
  91. <div :style="$i18n.locale=='zh'?'text-indent: 30px;':''" style="float: left;margin-top: 15px;width: 773px;margin-left: 30px;font-size: 16px;" v-html="item.contentHtml">
  92. </div>
  93. <div style="margin-left: 20px;width: 225px;height: 140px;padding-right:55px;padding-top:17px;float: right;"
  94. v-if="item.pictureUrl" alt="" >
  95. <img :src="'/api/file/pub/' + item.pictureUrl" alt="" style="width: 100%;height: 100%;">
  96. </div>
  97. <div style="clear:both"></div>
  98. </div>
  99. <div style="clear: both;"></div>
  100. <div style="width: 100%;height: 320px;border-bottom: 1px solid #ccc;" v-if="leagueMemberDynamicList[0]">
  101. <div class="enterprise_style">
  102. <span class="enterprise_style_span" style="margin-left: 34px;text-align: left;">
  103. {{$t('common.AllianceMemberDynamics')}}
  104. </span>
  105. </div>
  106. <div v-if="leagueMemberDynamicPics.length > 0" style="float: left;;margin-top: 15px;margin-left: 100px;width: 400px;height: 230px;">
  107. <img :src="'/api/file/pub/' + leagueMemberDynamicPics[0]" alt="" style="width: 100%;height: 200px">
  108. </div>
  109. <div style="float: left;margin-top: 15px;" :style="leagueMemberDynamicPics.length > 0?'width: 620px;margin-left: 20px;':'width: 1020px;margin-left: 100px;'" class="enterprise_style_product">
  110. <tr v-for="(item,index) in leagueMemberDynamicList" v-if="index<5" class="cursor" @click="viewChange('realTimeInfoItemdetails',item.baseEntityId)">
  111. <td style="float: left;width: 500px;display: inline-block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{item.title}}</td>
  112. <td style="float: right;">{{formatDate(item.publishDate)}}</td>
  113. <td style="clear:both"></td>
  114. </tr>
  115. </div>
  116. </div>
  117. </div>
  118. <el-dialog
  119. :title="$t('common.InformationDetails')"
  120. :visible.sync="dialogVisible"
  121. width="30%">
  122. <span style="line-height: 29px;font-size: 18px;" v-html="initData.unitIntrodution"></span>
  123. </el-dialog>
  124. </div>
  125. </template>
  126. <script>
  127. import Base from "@/views/base/Base";
  128. import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
  129. import 'vue-awesome-swiper/node_modules/swiper/dist/css/swiper.css'
  130. import Clipboard from "clipboard";
  131. import {saveOrUpdate} from '@/api/consultMessageInfo'
  132. import {getToken} from "@/utils/auth";
  133. import {getInformationList,memberDynamicInfos} from "@/api/cooperation/baseCooperationUnit";
  134. import {getViewByEntityId,getLeagueIdByUnitId} from "@/api/baseUnitView";
  135. import {getLeagueMember} from '@/api/leagueMember/leagueMember'
  136. import { formatDate } from '@/utils/formatUtils'
  137. import {getDicts} from "@/api/dict";
  138. export default {
  139. name: 'IntroductionLeagueMemberDetails',
  140. extends: Base,
  141. data() {
  142. return {
  143. enterpriseDetails: '',
  144. dialogVisible:false,
  145. textarea: '',
  146. url: '',
  147. ProjectConsultant:{},
  148. consultMessageInfo: {},
  149. img: [],
  150. initData: {},
  151. history:[],
  152. cooperationUnitDynamicList:[],
  153. params: {
  154. pageNo: 1,
  155. pageSize: 60,
  156. language: "",
  157. businessType:"introduction_to_members",
  158. businessId: this.$route.params.id,
  159. index:this.$route.query.index
  160. },
  161. countryDicts:[],
  162. enterprise: {
  163. label1: {
  164. label: '经营范围包括三峡工程建设和经营管理,住宿经营的管理;长江中上游水资源开发;水利水电技术服务;水利水电工程所需物资、设备的销售(国家有专营专项的除外);与上述业务有关的咨询服务;经营或代理公司所属企业自产产品(国家组织统一联合经营的16种出口商品除外)的出口业务;经营或代理公司及所属产业所需设备和材料(国家指定公司经营的12种进口商品除外)的进口业务;经营或代理技术进出口业务;承办中外合资经营、合作生产、来料加工、来样加工、来件装配、补偿贸易及易货贸易业务。(企依法自主选择经营项目,开展经营活动;依法需批准的项目;经相关部门批准后依批准的内容开展经营活动;不得从事本市产业政策禁止和限制类的经营活动。',
  165. src: 'u31492.jpg',
  166. src2:'u31520.jpg'
  167. },
  168. },
  169. baseEntityId:'',
  170. leagueMemberId:this.$route.query.key,
  171. leagueMember:{},
  172. leagueMemberDynamicList:[],
  173. leagueMemberDynamicPics:[],
  174. }
  175. },
  176. watch:{
  177. '$i18n.locale'(){
  178. this.getInitData();
  179. this.getCountry();
  180. }
  181. },
  182. created() {},
  183. updated(){
  184. this.Swiper();
  185. },
  186. computed:{
  187. countryDictsMap() {
  188. return this.countryDicts.array2Obj('value', 'label');
  189. },
  190. },
  191. mounted() {
  192. this.getInitData();
  193. this.getCountry();
  194. },
  195. methods: {
  196. getCountry(){
  197. getDicts(this.$i18n.locale=='zh'?'UNIT_COUNTRY_DICT':'unit_country_dict_en').then(res=>{
  198. this.countryDicts=res.data[0];
  199. })
  200. },
  201. toOffcial(url){
  202. if(url.indexOf('http') == -1){
  203. url = 'http://' + url
  204. }
  205. window.open(url,'_blank')
  206. },
  207. getTig(){
  208. getLeagueIdByUnitId({baseEntityId:this.initData.baseEntityId}).then(res=>{
  209. })
  210. },
  211. getInitData:function(){
  212. const that = this;
  213. if(this.leagueMemberId != undefined){
  214. getLeagueMember({id:this.leagueMemberId}).then(result=>{
  215. var data = result.data;
  216. if(data){
  217. that.leagueMember = data.baseLeagueMembers[0]||{};
  218. getViewByEntityId(that.leagueMember.unitId,that.$i18n.locale.toUpperCase()).then(result=>{
  219. var data = result.data;
  220. if(data){
  221. that.initData = data[0]||{};
  222. that.initData.task= that.initData.unitIntrodution?
  223. that.initData.unitIntrodution.replace(/<[^>]+>|&[^>]+;/g, ""):'';
  224. this.initData.setUpDate = formatDate(this.initData.setUpDate,'YYYY')
  225. this.initData.unitLabel=this.initData.unitLabel?this.initData.unitLabel.split(','):"";
  226. }
  227. })
  228. }
  229. })
  230. }
  231. var params={
  232. language: this.$i18n.locale.toUpperCase(),
  233. businessType:"introduction_to_the_alliance",
  234. businessId: this.leagueMemberId
  235. }
  236. getInformationList(params).then((res) => {
  237. this.img = [];
  238. if(res.data){
  239. if(res.data['1']){
  240. this.history = res.data['1'];
  241. this.history.forEach(element=>{
  242. if(element.pictureUrl){
  243. this.img.push(element.pictureUrl);
  244. }
  245. })
  246. }else{
  247. this.history = [];
  248. }
  249. }
  250. });
  251. var params={
  252. language: this.$i18n.locale.toUpperCase(),
  253. objectId: this.$route.query.key,
  254. pageNo: 1,
  255. pageSize: 5,
  256. }
  257. memberDynamicInfos(params).then((result) => {
  258. var data = result.data;
  259. if(data){
  260. this.leagueMemberDynamicList = data.memberDynamicInfos ||[];
  261. }
  262. this.leagueMemberDynamicPics = [];
  263. this.leagueMemberDynamicList.forEach(leagueMemberDynamic=>{
  264. if(leagueMemberDynamic.pictureUrl){
  265. this.leagueMemberDynamicPics.push(leagueMemberDynamic.pictureUrl);
  266. }
  267. })
  268. });
  269. },
  270. dialogVisibleChange(){
  271. this.dialogVisible=true;
  272. },
  273. getProjectList(){
  274. this.params.language = this.$i18n.locale.toUpperCase();
  275. const that =this;
  276. },
  277. viewChange(router,json){
  278. this.$store.commit('modify', router);
  279. window.localStorage.setItem('router', router);
  280. const { href } = this.$router.resolve({
  281. name: router,
  282. query: {
  283. key: json
  284. }
  285. });
  286. window.open(href, '_blank');
  287. },
  288. copy() {
  289. var _this = this;
  290. var clipboard = new Clipboard(".btn");
  291. clipboard.on("success", e => {
  292. // 释放内存
  293. this.$message({
  294. message: '复制项目已成功',
  295. type: 'success'
  296. });
  297. clipboard.destroy();
  298. });
  299. clipboard.on("error", e => {
  300. // 不支持复制
  301. this.$message({
  302. message: "该浏览器不支持自动复制",
  303. type: "warning"
  304. });
  305. // 释放内存
  306. clipboard.destroy();
  307. });
  308. },
  309. Swiper() {
  310. var galleryThumbs = new Swiper('.gallery-thumbs', {
  311. spaceBetween: 10,
  312. slidesPerView: 4,
  313. freeMode: true,
  314. watchSlidesVisibility: true,
  315. watchSlidesProgress: true,
  316. autoplay: {//自动播放
  317. delay: 4000,
  318. disableOnInteraction: false,//用户操作后是否停止 默认停止(true)
  319. },
  320. });
  321. var galleryTop = new Swiper('.gallery-top', {
  322. spaceBetween: 10,
  323. navigation: {
  324. nextEl: '.swiper-button-next',
  325. prevEl: '.swiper-button-prev',
  326. },
  327. autoplay: {//自动播放
  328. delay: 4000,
  329. disableOnInteraction: false,//用户操作后是否停止 默认停止(true)
  330. },
  331. thumbs: {
  332. swiper: galleryThumbs
  333. }
  334. });
  335. },
  336. // 项目收藏改变
  337. shareChange() {
  338. if (this.initData[0].share == 'y') {
  339. this.initData[0].share = 'n'
  340. } else {
  341. this.initData[0].share = 'y'
  342. }
  343. },
  344. consultMessage() {
  345. // 人员信息
  346. let user = window.localStorage.getItem('user');
  347. if (!user) {
  348. this.$message.warning("请先登录");
  349. } else {
  350. var users = JSON.parse(user);
  351. this.consultMessageInfo.senderId = users.userId;
  352. this.consultMessageInfo.replyStatusDict = "N";
  353. this.consultMessageInfo.senderDate = new Date();
  354. var token = "" + getToken();
  355. // 接口逻辑
  356. this.submitHandler(token => {
  357. saveOrUpdate(JSON.stringify(this.consultMessageInfo),token).then(result => {
  358. alert(result.msg);
  359. this.$message({
  360. message: '已发送成功,请等待',
  361. type: 'success'
  362. });
  363. this.consultMessageInfo = {}
  364. }).catch(error => {
  365. // 此处你的业务代码
  366. });
  367. });
  368. }
  369. },
  370. getIconUrl(url) {
  371. return require("@/assets/img/introductionCooperation/" + url);
  372. },
  373. toView(router, json) {
  374. this.$router.push({
  375. name: router,
  376. query: {key:json}
  377. })
  378. },
  379. screenBack(data) {
  380. },
  381. screen(i) {
  382. this.index = i
  383. }
  384. }
  385. }
  386. </script>
  387. <!-- Add "scoped" attribute to limit CSS to this component only -->
  388. <style scoped>
  389. .box {
  390. margin-top: 10px;
  391. background: #fff;
  392. /* height: 500px; */
  393. padding: 20px 0;
  394. }
  395. .crumbs {
  396. margin-left: 20px;
  397. }
  398. body {
  399. margin: 0;
  400. }
  401. .swipers {
  402. position: absolute;
  403. top: 30px;
  404. left: 30px;
  405. width: 550px;
  406. height: 439px;
  407. }
  408. .details {
  409. position: absolute;
  410. top: 30px;
  411. left: 600px;
  412. width: 460px;
  413. height: 390px;
  414. }
  415. .swiper-container {
  416. width: 100%;
  417. height: 300px;
  418. margin-left: auto;
  419. margin-right: auto;
  420. }
  421. .swiper-slide {
  422. background-size: cover;
  423. background-position: center;
  424. }
  425. .gallery-top {
  426. height: 80%;
  427. width: 100%;
  428. }
  429. .gallery-thumbs {
  430. height: 20%;
  431. box-sizing: border-box;
  432. padding: 10px 0;
  433. }
  434. .gallery-thumbs .swiper-slide {
  435. width: 25%;
  436. height: 100%;
  437. opacity: 0.4;
  438. }
  439. .gallery-thumbs .swiper-slide-thumb-active {
  440. opacity: 1;
  441. }
  442. .initData_label {
  443. color: #6c8c9d;
  444. font-weight: 700;
  445. font-size: 18px;
  446. line-height: 42px;
  447. width: 330px;
  448. display: inline-block;
  449. /* overflow:hidden;
  450. white-space:nowrap;
  451. text-overflow:ellipsis; */
  452. }
  453. .enterprise_style {
  454. line-height: 50px;
  455. color: #6C819D;
  456. padding-left: 30px;
  457. font-size: 18px;
  458. font-weight: 700;
  459. margin-top: 5px;
  460. }
  461. .enterprise_style_span {
  462. display: block;
  463. text-align: center;
  464. height: 100%;
  465. border-bottom: 2px solid #6699ff;
  466. }
  467. .enterprise_style_product tr {
  468. line-height: 30px;
  469. width: 100%;
  470. display: inline-block;
  471. border-bottom: 1px dashed #ccc;
  472. font-size: 14px;
  473. color: #6C819D;
  474. margin-bottom: 5px;
  475. }
  476. .recommend {
  477. margin-top: 15px;
  478. margin-left: 30px;
  479. }
  480. .recommend li {
  481. display: inline-block;
  482. width: 170px;
  483. /* height: 130px; */
  484. text-align: center;
  485. margin-right: 15px;
  486. }
  487. .share:hover {
  488. color: #66b1ff;
  489. }
  490. .dynamic{
  491. width: 95%;
  492. height: 274px;
  493. margin: 30px 0 30px 20px;
  494. }
  495. .news>ul{
  496. height: 100%;
  497. }
  498. .news>ul>li:nth-child(1){
  499. border-top: 1px dotted #dadada;
  500. }
  501. .news>ul>li{
  502. height: 20%;
  503. border-bottom: 1px dotted #dadada;
  504. line-height: 45px;
  505. }
  506. .news>ul>li>span{
  507. float: right;
  508. }
  509. >>>.el-dialog__body{
  510. padding: 0px 20px 10px;
  511. word-break:normal;
  512. }
  513. </style>