IntroductionMemberInformation.vue 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541
  1. <template>
  2. <div>
  3. <div class="autoBox box">
  4. <div class="crumbs">
  5. <el-breadcrumb separator="/" style="float: left;margin: 0px ">
  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>{{$t('common.MemberShow')}}</el-breadcrumb-item>
  9. </el-breadcrumb>
  10. <el-breadcrumb separator="/" style="float: right;margin:0px 15px 0 0">
  11. <span class="cursor" :class="screenIndex==index?'screen1':'screen2'"
  12. @click="realTimeInfoScreen(item,item.value)" v-for="(item,index) in realTimeInfoScreens">
  13. &nbsp;&nbsp;{{$t(item.lable)}} &nbsp;&nbsp;
  14. </span>
  15. </el-breadcrumb>
  16. </div>
  17. <div style="margin-top: 20px;" v-if="screen1s.item.length > 0 && screen2s.item.length > 0">
  18. <Screen v-bind:screen1="screen1s" :screen2="screen2s" :screen4="screen3s"
  19. @screenBack="screenBack"></Screen>
  20. </div>
  21. <div style="margin: 20px;color: #666;font-size: 14px;height: 50px;">
  22. {{$t('common.Total')}} {{totalCount}} {{$t('common.MemberNumbers')}}
  23. <el-input v-model="input" :placeholder="$t('common.PleaseEnterMemberName')"
  24. style="width: 250px;float: right;margin-right: 28px;">
  25. <i class="el-icon-search"></i>
  26. <el-button slot="append" icon="el-icon-search" style="background: #fff;border-left: 0;margin: -8px -20px;"
  27. @click="getData()"></el-button>
  28. </el-input>
  29. </div>
  30. <div style="margin: 20px;color: #666;font-size: 14px;" class="continents">
  31. <ul>
  32. <li class="cursor" style="margin-right: 22px;"
  33. @click="toViewDetail('IntroductionPresentationDetails',item)"
  34. v-for="(item,index) in initData">
  35. {{$i18n.locale=='zh'?item.memberNameZh:item.memberNameEn}}
  36. </li>
  37. </ul>
  38. </div>
  39. <div style="width: 100%;position: relative;height: 100px;">
  40. <el-pagination
  41. style="height: 80px;position: absolute;left: 50%;top: 100px;transform: translate(-50%,-50%);"
  42. background
  43. page-size=60
  44. layout="prev, pager, next"
  45. :total=totalCount
  46. @current-change="handleCurrentChange"
  47. >
  48. </el-pagination>
  49. </div>
  50. <div style="width: 100%;height: 50px;">
  51. <el-button type="primary" style="float: right;margin-right: 50px;"
  52. @click="toView('IntroductionFundingApplication','')">{{$t('common.IWantToJoinTheMemberShip')}}
  53. </el-button>
  54. </div>
  55. <div>
  56. <div style="color: #666;font-weight: 700;margin-left: 20px;">{{$t('common.Recommendmembers')}}</div>
  57. <div class="recommend">
  58. <ul>
  59. <li v-for="(item,index) in recommends" class="cursor" :key="index">
  60. <!--@click="toView('IntroductionPresentationDetails')" 推荐会员暂时为静态展示-->
  61. <img :src="getIconUrl(item.img)" alt="" style="width: 100%;height: 150px;">
  62. <!-- <div style="color: #bcbcbc;font-size: 14px;">{{item.num}}{{$t('common.Browse')}}</div>-->
  63. </li>
  64. </ul>
  65. </div>
  66. </div>
  67. </div>
  68. </div>
  69. </template>
  70. <script>
  71. import Screen from '@/components/screen'
  72. import {getDicts} from '@/api/dict'
  73. import {getMemberInformation} from '@/api/baseContactsInfo'
  74. import {gateGetUnitViewById} from "@/api/baseUnitView";
  75. export default {
  76. name: 'IntroductionMemberInformation',
  77. components: {Screen},
  78. data() {
  79. return {
  80. input: '',
  81. enterpriseDetails: '',
  82. screen1Item: '',
  83. screen2Item: '',
  84. totalCount: 0,
  85. realTimeInfoScreens: [{
  86. lable: 'common.AllianceIntroduction',
  87. value: 'union'
  88. }, {
  89. lable: 'common.CooperativeUnitIntroduction',
  90. value: 'cooperation'
  91. }, {
  92. lable: "common.CustomService",
  93. value: 'custom'
  94. }],
  95. page: {
  96. pageSize: 60,
  97. pageNo: 1,
  98. continentDict: null,
  99. industryDict: null,
  100. initialOrderZh: null,
  101. memberNameEn: null,
  102. memberNameZh:null,
  103. language: null,
  104. },
  105. screen1s: {
  106. value: 'common.Region',
  107. item: []
  108. },
  109. screen2s: {
  110. value:'common.Category',
  111. item: [],
  112. },
  113. screen3s: {
  114. value: 'common.Byletter',
  115. item: [
  116. {
  117. value: null,
  118. ifValue: true,
  119. label: 'common.All'
  120. }, {
  121. ifValue: false,
  122. value: 'A',
  123. label: 'A'
  124. }, {
  125. ifValue: false,
  126. value: 'B',
  127. label: 'B'
  128. }, {
  129. ifValue: false,
  130. value: 'C',
  131. label: 'C'
  132. }, {
  133. ifValue: false,
  134. value: 'D',
  135. label: 'D'
  136. }, {
  137. ifValue: false,
  138. value: 'E',
  139. label: 'E'
  140. }, {
  141. ifValue: false,
  142. value: 'F',
  143. label: 'F'
  144. }, {
  145. ifValue: false,
  146. value: 'G',
  147. label: 'G'
  148. }, {
  149. ifValue: false,
  150. value: 'H',
  151. label: 'H'
  152. }, {
  153. ifValue: false,
  154. value: 'I',
  155. label: 'I'
  156. }, {
  157. ifValue: false,
  158. value: 'J',
  159. label: 'J'
  160. }, {
  161. ifValue: false,
  162. value: 'K',
  163. label: 'K'
  164. }, {
  165. ifValue: false,
  166. value: 'L',
  167. label: 'L'
  168. }, {
  169. ifValue: false,
  170. value: 'M',
  171. label: 'M'
  172. }, {
  173. ifValue: false,
  174. value: 'N',
  175. label: 'N'
  176. }, {
  177. ifValue: false,
  178. value: 'O',
  179. label: 'O'
  180. }, {
  181. ifValue: false,
  182. value: 'P',
  183. label: 'P'
  184. }, {
  185. ifValue: false,
  186. value: 'Q',
  187. label: 'Q'
  188. }, {
  189. ifValue: false,
  190. value: 'R',
  191. label: 'R'
  192. }, {
  193. ifValue: false,
  194. value: 'S',
  195. label: 'S'
  196. }, {
  197. ifValue: false,
  198. value: 'T',
  199. label: 'T'
  200. }, {
  201. ifValue: false,
  202. value: 'U',
  203. label: 'U'
  204. }, {
  205. ifValue: false,
  206. value: 'V',
  207. label: 'V'
  208. }, {
  209. ifValue: false,
  210. value: 'W',
  211. label: 'W'
  212. }, {
  213. ifValue: false,
  214. value: 'X',
  215. label: 'X'
  216. }, {
  217. ifValue: false,
  218. value: 'Y',
  219. label: 'Y'
  220. }, {
  221. ifValue: false,
  222. value: 'Z',
  223. label: 'Z'
  224. }],
  225. },
  226. initData: [],
  227. recommend: [{
  228. img: 'u31492.jpg',
  229. num: '2934'
  230. }, {
  231. img: 'u31507.jpg',
  232. num: '2934'
  233. }, {
  234. img: 'u31520.jpg',
  235. num: '2934'
  236. }, {
  237. img: 'u31535.jpg',
  238. num: '2934'
  239. }, {
  240. img: 'u31520.jpg',
  241. num: '2934'
  242. }],
  243. recommends: [{
  244. img: 'beijng.jpg',
  245. num: '2934'
  246. }, {
  247. img: 'shandong.jpg',
  248. num: '2934'
  249. }, {
  250. img: 'shanghai.jpg',
  251. num: '2934'
  252. }, {
  253. img: 'wuhan.jpg',
  254. num: '2934'
  255. }, {
  256. img: 'zhejiang.jpg',
  257. num: '2934'
  258. }],
  259. }
  260. },
  261. created() {
  262. if (this.$route.params.id && !this.$route.params.id.img) {
  263. this.screen1Item = this.$route.params.id;
  264. } else {
  265. this.screen2Item = this.$route.params.id;
  266. }
  267. if (this.$route.params.type && !this.$route.params.id.img) {
  268. this.page.continentDict = this.$route.params.type;
  269. } else {
  270. this.page.industryDict = this.$route.params.type;
  271. }
  272. this.$nextTick(() => {
  273. this.getInitData();
  274. this.getinformation()
  275. });
  276. },
  277. watch: {
  278. "$i18n.locale"() {
  279. this.page.language = this.$i18n.locale;
  280. this.get();
  281. this.getInitData();
  282. }
  283. },
  284. methods: {
  285. getInitData() {
  286. getDicts(this.$i18n.locale == 'zh' ? 'INDUSTRY_DICTS' : 'INDUSTRY_DICTS_EN').then(res => {
  287. let both = {
  288. value: null,
  289. label: this.$i18n.locale == 'zh' ? '全部' : 'All'
  290. };
  291. this.screen2s.item = res.data[0];
  292. this.screen2s.item.unshift(both)
  293. this.screen2s.item.forEach(element => {
  294. if (element.value == this.screen2Item.value) {
  295. element.ifClick = true;
  296. }
  297. });
  298. for(var i = 0; i < this.screen2s.item.length; ) {
  299. if(this.screen2s.item[i].label == '其他' || this.screen2s.item[i].label == '个人会员') {
  300. this.screen2s.item.splice(i, 1);
  301. } else {
  302. i++;
  303. }
  304. };
  305. });
  306. getDicts(this.$i18n.locale == 'zh' ? 'CONTINENT_CODE_DICT' : 'CONTINENT_CODE_DICT_EN').then(res => {
  307. let both = {
  308. value: null,
  309. label: this.$i18n.locale == 'zh' ? '全部' : 'All'
  310. };
  311. this.screen1s.item = res.data[0]
  312. this.screen1s.item.unshift(both)
  313. this.screen1s.item.forEach(element => {
  314. if (element.value == this.screen1Item.value) {
  315. element.ifClick = true;
  316. }
  317. });
  318. });
  319. },
  320. getinformation() {
  321. this.page.continentDict = this.screen1Item.value;// 大洲
  322. this.page.language = this.$i18n.locale;// 语言
  323. this.get()
  324. },
  325. get() {
  326. const that = this;
  327. getMemberInformation(this.page).then(res => {
  328. if (res.data.page) {
  329. this.totalCount = res.data.page.totalCount - 0;
  330. this.initData = res.data.baseMemberInfos;
  331. } else {
  332. this.totalCount = 0;
  333. this.initData = [];
  334. }
  335. })
  336. },
  337. handleCurrentChange(val) {
  338. this.page.pageNo = val;
  339. this.get();
  340. },
  341. getIconUrl(url) {
  342. return require("@/assets/img/introductionCooperation/" + url);
  343. },
  344. toView(router, json, index, unitId, language) {
  345. this.$router.push({
  346. name: router,
  347. query: {
  348. id: json,
  349. index: index,
  350. baseEntityId: unitId,
  351. language: language
  352. },
  353. })
  354. },
  355. toView2(router, json,){
  356. this.$router.push({
  357. name: router,
  358. query: {
  359. key: json,
  360. },
  361. })
  362. },
  363. toViewDetail(router,json){
  364. gateGetUnitViewById(json.unitId,this.$i18n.locale.toUpperCase()).then(res => {
  365. var data = res.data;
  366. if(data){
  367. var baseUnitView = res.data.baseUnitView;
  368. if(baseUnitView.showable == '1'){
  369. this.$store.commit('modify', 'enterpriseDetails');
  370. window.localStorage.setItem('router', 'enterpriseDetails');
  371. const { href } = this.$router.resolve({
  372. name: 'enterpriseDetails',
  373. query: {
  374. key: json.unitId,
  375. }
  376. });
  377. window.open(href, '_blank');
  378. }else{
  379. if(json.showFlag === 'y'){
  380. this.$store.commit('modify', router);
  381. window.localStorage.setItem('router', router);
  382. let member ={
  383. memberNameZh: json.memberNameZh,
  384. memberNameEn:json.memberNameEn,
  385. unitId:json.unitId,
  386. }
  387. const { href } = this.$router.resolve({
  388. name: router,
  389. query: {
  390. key: json.id,
  391. member:JSON.stringify(member)
  392. }
  393. });
  394. window.open(href, '_blank');
  395. }else if(baseUnitView.officialWebsitePath){
  396. var url = baseUnitView.officialWebsitePath;
  397. if(url.indexOf('http') == -1){
  398. url = 'http://' + url
  399. }
  400. window.open(url,'_blank')
  401. }else{
  402. return
  403. }
  404. }
  405. }
  406. });
  407. },
  408. getData(){
  409. this.page.memberNameZh='';
  410. this.page.memberNameEn='';
  411. if(this.$i18n.locale === 'zh'){
  412. this.page.memberNameZh = this.input
  413. }else {
  414. this.page.memberNameEn= this.input
  415. }
  416. getMemberInformation(this.page).then(res => {
  417. if (res.data.page) {
  418. this.totalCount = res.data.page.totalCount - 0;
  419. this.initData = res.data.baseMemberInfos;
  420. } else {
  421. this.totalCount = 0;
  422. this.initData = [];
  423. }
  424. })
  425. },
  426. realTimeInfoScreen(i, index) {
  427. this.toView2('IntroductionMemberProfile', index)
  428. },
  429. screenBack(data) {
  430. this.page.continentDict = data.click1
  431. this.page.industryDict = data.click2
  432. if (this.$i18n.locale == 'zh') {
  433. this.page.initialOrderZh = data.click4 ? data.click4.toString() : ''
  434. } else if (this.$i18n.locale == 'en') {
  435. this.page.initialOrderEn = data.click4 ? data.click4.toString() : ''
  436. }
  437. this.get()
  438. },
  439. screen(i) {
  440. this.index = i
  441. }
  442. }
  443. }
  444. </script>
  445. <!-- Add "scoped" attribute to limit CSS to this component only -->
  446. <style scoped>
  447. .box {
  448. margin-top: 10px;
  449. background: #fff;
  450. /* height: 500px; */
  451. padding: 20px 0;
  452. }
  453. .crumbs {
  454. margin-left: 20px;
  455. height: 20px;
  456. }
  457. body {
  458. margin: 0;
  459. }
  460. .continents ul {
  461. text-align: top;
  462. display: flex;
  463. display: -webkit-flex; /* Safari */
  464. justify-content: flex-start;
  465. flex-wrap: wrap;
  466. }
  467. .continents ul li {
  468. border: 1px solid #f1f1f1;
  469. box-shadow: 5px 5px 5px #f1f1f1;
  470. margin-bottom: 10px;
  471. color: #2c558a;
  472. border-radius: 5px;
  473. width: 207px;
  474. overflow: hidden;
  475. white-space: nowrap;
  476. text-overflow: ellipsis;
  477. height: 35px;
  478. line-height: 35px;
  479. text-align: center;
  480. }
  481. .continents ul li:hover {
  482. border: 1px solid #e36844;
  483. }
  484. .continents ul li:active {
  485. background: #e36844;
  486. color: #fff;
  487. }
  488. .userCenterMyActivity >>> .el-pagination .el-pager li,
  489. .userCenterMyActivity >>> .el-pagination .btn-next,
  490. .userCenterMyActivity >>> .el-pagination .btn-prev {
  491. width: 35px;
  492. height: 35px;
  493. line-height: 35px;
  494. }
  495. .recommend {
  496. margin-top: 15px;
  497. margin-left: 10px;
  498. }
  499. .recommend li {
  500. display: inline-block;
  501. width: 212px;
  502. /* height: 130px; */
  503. text-align: center;
  504. margin-right: 15px;
  505. }
  506. .screen1 {
  507. background: linear-gradient(180deg, #3280E2 0%, #144E97 100%);
  508. border-radius: 20px 20px 20px 20px;
  509. padding: 8px 12px;
  510. color: #F0F3F8;
  511. margin-left: 10px;
  512. }
  513. .screen2 {
  514. font-size: 14px;
  515. background: linear-gradient(180deg, #B4D5FF 0%, #4F81BF 100%);
  516. border-radius: 20px;
  517. padding: 8px 12px;
  518. color: #165099;
  519. margin-left: 10px;
  520. }
  521. </style>