IntroductionPartnerInformationDetails.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396
  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 :to="{ path: 'IntroductionMemberProfile' }">{{$t('common.CooperationNetwork')}}</el-breadcrumb-item>
  8. <el-breadcrumb-item :to="{ path: 'IntroductionMemberProfile?key=cooperation'}">{{$t('common.CooperativeUnitIntroduction')}}</el-breadcrumb-item>
  9. <el-breadcrumb-item>{{initData.unitName}}</el-breadcrumb-item>
  10. </el-breadcrumb>
  11. </div>
  12. <div style="width: 100%;height:432px;margin-top:15px;">
  13. <div class="swipers">
  14. <div class="swiper-container gallery-top">
  15. <div class="swiper-wrapper">
  16. <div class="swiper-slide" v-for="(item,index) in img">
  17. <img :src="'api/file/pub/' + item" alt="" style="width: 100%;height: 100%;">
  18. </div>
  19. </div>
  20. <div class="swiper-button-next swiper-button-white"></div>
  21. <div class="swiper-button-prev swiper-button-white"></div>
  22. </div>
  23. <div class="swiper-container gallery-thumbs">
  24. <div class="swiper-wrapper">
  25. <div class="swiper-slide" v-for="(item,index) in img">
  26. <img :src="'api/file/pub/' + item" alt="" style="width: 100%;height: 100%;">
  27. </div>
  28. </div>
  29. </div>
  30. </div>
  31. <div class="unitDetails">
  32. <h3 style="font-size: 18px;color: #2c558a;margin-top: 30px;">{{initData.unitName}}</h3>
  33. <div style="font-size: 15px;color:#95949c;line-height: 35px;">
  34. <i class="el-icon-location-outline"></i>
  35. <span> {{$t('common.place')}}:<span>{{countryDictsMap[initData.unitCountryDict]}}{{initData.unitRegion?'-'+initData.unitRegion:''}}</span></span>
  36. </div>
  37. <div style="font-size: 15px;color:#95949c;line-height: 35px;">
  38. <i class="fa fa-star-o"></i>
  39. <span> {{$t('common.DateOfEstablishment')}}:<span>{{initData.setUpDate}}</span></span>
  40. </div>
  41. <div style="font-size: 15px;color:#95949c;line-height: 35px;">
  42. <i class="el-icon-office-building"></i>
  43. <span> {{$t('common.WebsiteForDetails')}}:<span style="font-weight: 400;color: #1890FF;">{{initData.officialWebsitePath}}</span></span>
  44. </div>
  45. <div>
  46. <el-tag type="danger">{{$t('common.CooperationUnit')}}</el-tag>
  47. </div>
  48. <div style="line-height: 35px;">
  49. <div style="color: #666;"> {{$t('common.Introduction')}}: </div>
  50. <div class="plate" style="line-height: 24px; color: rgb(51, 51, 51);
  51. font-size: 14px; -webkit-box-orient: vertical;
  52. position:relative;
  53. line-height:1.4em;
  54. overflow: hidden;
  55. height:6.5em;" @click="dialogVisibleChange">{{initData.projectPerformance}}</div>
  56. </div>
  57. </div>
  58. </div>
  59. <!-- 背景-->
  60. <div class="details" v-for="(item,index) in unitList" >
  61. <div>
  62. <div style="height: 50px;line-height: 50px;display:inline-block">
  63. <img src="@/assets/img/cooperationExchange/20200608_03.gif" alt="" style="height: 20px;vertical-align: middle;">
  64. <span style="color: #666666;font-weight: 700;margin-left: 5px;font-size: 18px;">{{item.title}}</span>
  65. </div>
  66. <div style="width:90%;height:1px;background:#eaeaea;display:inline-block;vertical-align:middle"></div>
  67. </div>
  68. <div style="padding-top: 20px;display: flex;">
  69. <div style="width:72%;float:left" :style="item.pictureUrl?'width:72%':'width:100%'">
  70. <p style="font-size: 16px;font-weight: 400;line-height: 28px;text-indent: 2em;" v-html="item.content"></p>
  71. </div>
  72. <img v-if="item.pictureUrl && item.pictureUrl!=='M' " alt="" :src="'/api/file/pub/' + item.pictureUrl" class="img-responsive"
  73. :style="item.picturePosition=='L'?'float: left;':'float: right;'" style="width: 25%;height: 150px;margin-left: 34px;margin-bottom: 20px;float: right;"/>
  74. </div>
  75. </div>
  76. <div style="width: 100%;height: 320px;border-bottom: 1px solid #ccc;" v-if="cooperationUnitDynamicList[0]">
  77. <div class="enterprise_style">
  78. <span class="enterprise_style_span" style="margin-left: 34px;text-align: left;">
  79. {{$t('common.CooperativeUnitDynamics')}}
  80. </span>
  81. </div>
  82. <div v-if="imgList.length > 0" style="float: left;;margin-top: 15px;margin-left: 100px;width: 400px;height: 230px;">
  83. <img :src="'/api/file/pub/' + imgList[0]" alt="" style="width: 100%;height: 200px">
  84. </div>
  85. <div style="float: left;margin-top: 15px;" :style="imgList.length > 0?'width: 620px;margin-left: 20px;':'width: 1020px;margin-left: 100px;'" class="enterprise_style_product">
  86. <tr v-for="(item,index) in cooperationUnitDynamicList" v-if="index<5" class="cursor" @click="viewChange('realTimeInfoItemdetails',item.baseEntityId)">
  87. <td style="float: left;width: 500px;display: inline-block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{item.title}}</td>
  88. <td style="float: right;">{{formatDate(item.publishDate)}}</td>
  89. <td style="clear:both"></td>
  90. </tr>
  91. </div>
  92. </div>
  93. </div>
  94. <el-dialog
  95. :title="$t('common.InformationDetails')"
  96. :visible.sync="dialogVisible"
  97. width="30%">
  98. <span style="line-height: 29px;font-size: 18px;" v-html="initData.unitIntrodution"></span>
  99. </el-dialog>
  100. </div>
  101. </template>
  102. <script>
  103. import Base from "@/views/base/Base";
  104. import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
  105. import 'vue-awesome-swiper/node_modules/swiper/dist/css/swiper.css'
  106. import Clipboard from "clipboard";
  107. import { getBaseCooperationUnits,getInformationList,memberDynamicInfos} from "@/api/cooperation/baseCooperationUnit";
  108. import {getViewByEntityId} from "@/api/baseUnitView";
  109. import {formatDate} from "@/utils/formatUtils";
  110. import {getDicts} from "@/api/dict";
  111. export default {
  112. name:'IntroductionPartnerInformationDetails',
  113. extends: Base,
  114. data(){
  115. return {
  116. initData:{},
  117. dialogVisible:false,
  118. cooperationUnitDynamicList:[],
  119. unitList:[],
  120. params: {
  121. pageNo: 1,
  122. pageSize: 6,
  123. language: "",
  124. businessType:"introduction_to_the_cooperative_unit",
  125. },
  126. countryDicts:[],
  127. imgList:[],
  128. img:[],
  129. baseCooprationId:this.$route.query.key,
  130. baseCooperation:{},
  131. };
  132. },
  133. watch: {
  134. "$i18n.locale"() {
  135. this.getUnitList();
  136. this.getCountry();
  137. }
  138. },
  139. updated(){
  140. this.Swiper();
  141. },
  142. mounted() {
  143. this.getUnitList();
  144. this.getCountry();
  145. },
  146. computed:{
  147. countryDictsMap() {
  148. return this.countryDicts.array2Obj('value', 'label');
  149. },
  150. },
  151. methods:{
  152. getCountry(){
  153. getDicts(this.$i18n.locale=='zh'?'UNIT_COUNTRY_DICT':'unit_country_dict_en').then(res=>{
  154. this.countryDicts=res.data[0];
  155. })
  156. },
  157. dialogVisibleChange(){
  158. this.dialogVisible=true;
  159. },
  160. getUnitList() {
  161. if(this.baseCooprationId != undefined){
  162. getBaseCooperationUnits({id:this.baseCooprationId}).then(result=>{
  163. var data = result.data;
  164. if(data){
  165. this.baseCooperation = data.baseCooperationUnits[0]||{};
  166. let language = this.$i18n.locale.toUpperCase();
  167. let businessId = this.baseCooperation.unitId;
  168. getViewByEntityId(businessId,language).then(res=>{
  169. const data = res.data ;
  170. if(data){
  171. this.initData = data[0] ;
  172. this.initData.setUpDate = formatDate(this.initData.setUpDate,'YYYY')
  173. }
  174. })
  175. }
  176. })
  177. }
  178. var params={
  179. language: this.$i18n.locale.toUpperCase(),
  180. businessType:"introduction_to_the_cooperative_unit",
  181. businessId: this.baseCooprationId
  182. }
  183. getInformationList(params).then((res) => {
  184. this.img = [];
  185. if(res.data){
  186. this.unitList = res.data['1'];
  187. if(null != this.unitList){
  188. this.unitList.forEach(element=>{
  189. if(element.pictureUrl){
  190. this.img.push(element.pictureUrl);
  191. }
  192. })
  193. }
  194. }
  195. this.imgList=[];
  196. if(this.img.length==0){
  197. this.img.push("/def/cooperationDef.png");
  198. }
  199. if(this.imgList.length==0){
  200. this.imgList.push("/def/cooperationDef.png");
  201. }
  202. });
  203. var params={
  204. language: this.$i18n.locale.toUpperCase(),
  205. objectId: this.$route.query.key,
  206. pageNo: 1,
  207. pageSize: 5,
  208. }
  209. memberDynamicInfos(params).then((result) => {
  210. var data = result.data;
  211. if(data){
  212. this.cooperationUnitDynamicList = data.memberDynamicInfos ||[];
  213. }
  214. this.imgList = [];
  215. this.cooperationUnitDynamicList.forEach(memberDynamic=>{
  216. if(memberDynamic.pictureUrl){
  217. this.imgList.push(memberDynamic.pictureUrl);
  218. }
  219. })
  220. });
  221. },
  222. viewChange(router,json){
  223. this.$store.commit('modify', router);
  224. window.localStorage.setItem('router', router);
  225. const { href } = this.$router.resolve({
  226. name: router,
  227. query: {
  228. key: json
  229. }
  230. });
  231. window.open(href, '_blank');
  232. },
  233. Swiper() {
  234. var galleryThumbs = new Swiper('.gallery-thumbs', {
  235. spaceBetween: 10,
  236. slidesPerView: 4,
  237. freeMode: true,
  238. watchSlidesVisibility: true,
  239. watchSlidesProgress: true,
  240. autoplay: {//自动播放
  241. delay: 4000,
  242. disableOnInteraction: false,//用户操作后是否停止 默认停止(true)
  243. },
  244. });
  245. var galleryTop = new Swiper('.gallery-top', {
  246. spaceBetween: 10,
  247. navigation: {
  248. nextEl: '.swiper-button-next',
  249. prevEl: '.swiper-button-prev',
  250. },
  251. autoplay: {//自动播放
  252. delay: 4000,
  253. disableOnInteraction: false,//用户操作后是否停止 默认停止(true)
  254. },
  255. thumbs: {
  256. swiper: galleryThumbs
  257. }
  258. });
  259. },
  260. toView(router,json){
  261. // console.log(index)
  262. this.$router.push({
  263. name:router,
  264. params:{
  265. id:json,
  266. },
  267. })
  268. },
  269. }
  270. }
  271. </script>
  272. <style scoped>
  273. .box {
  274. margin-top: 10px;
  275. background: #fff;
  276. padding: 20px 0;
  277. }
  278. .unitDetails{
  279. width: 48%;
  280. height: 100%;
  281. float: right;
  282. display: inline-block;
  283. padding-left: 34px;
  284. border: 1px solid #CDF0FD;
  285. border-left: none;
  286. background: url(../../assets/img/introductionCooperation/detailsbg.png) no-repeat;
  287. background-position: right;
  288. }
  289. .crumbs {
  290. margin-left :20px;
  291. }
  292. .comUnit{
  293. width:100px;
  294. height:38px;
  295. border:1px solid #c2e5ff;
  296. background:#e5f4ff;
  297. color: #35a8ff;
  298. margin-top:16px;
  299. text-align: center;
  300. line-height: 40px;
  301. }
  302. .comUnit1{
  303. width:160px;
  304. height:38px;
  305. border:1px solid #c2e5ff;
  306. background:#e5f4ff;
  307. color: #35a8ff;
  308. margin-top:16px;
  309. text-align: center;
  310. line-height: 40px;
  311. }
  312. .details{
  313. width: 95%;
  314. padding: 0 25px;
  315. color: #666666;
  316. margin-top: 20px;
  317. }
  318. .dynamic{
  319. width: 95%;
  320. height: 274px;
  321. margin: 30px 0 30px 20px;
  322. }
  323. .news{
  324. width: 65%;
  325. padding-left: 20px;
  326. height: 232px;
  327. float: left;
  328. }
  329. .news>ul{
  330. height: 100%;
  331. }
  332. .news>ul>li:nth-child(1){
  333. border-top: 1px dotted #dadada;
  334. }
  335. .news>ul>li{
  336. height: 20%;
  337. border-bottom: 1px dotted #dadada;
  338. line-height: 45px;
  339. }
  340. .news>ul>li>span{
  341. float: right;
  342. }
  343. .swipers {
  344. position: absolute;
  345. top: 52px;
  346. left: 30px;
  347. width: 550px;
  348. height: 439px;
  349. }
  350. .gallery-thumbs {
  351. height: 20%;
  352. box-sizing: border-box;
  353. padding: 10px 0;
  354. }
  355. .gallery-thumbs .swiper-slide {
  356. width: 25%;
  357. height: 100%;
  358. opacity: 0.4;
  359. }
  360. .gallery-thumbs .swiper-slide-thumb-active {
  361. opacity: 1;
  362. }
  363. .el-dialog__body{
  364. padding: 0px 20px 10px;
  365. word-break:normal;
  366. }
  367. .enterprise_style {
  368. line-height: 50px;
  369. color: #6C819D;
  370. padding-left: 30px;
  371. font-size: 18px;
  372. font-weight: 700;
  373. margin-top: 5px;
  374. }
  375. .enterprise_style_span {
  376. display: inline-block;
  377. text-align: center;
  378. height: 100%;
  379. border-bottom: 2px solid #6699ff;
  380. }
  381. .enterprise_style_product tr {
  382. line-height: 30px;
  383. width: 100%;
  384. display: inline-block;
  385. border-bottom: 1px dashed #ccc;
  386. font-size: 14px;
  387. color: #6C819D;
  388. margin-bottom: 5px;
  389. }
  390. </style>