ExhibitionServiceDetail.vue 30 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130
  1. <template>
  2. <div class="autoBox box" style="min-height: 900px; position: relative">
  3. <div class="crumbs">
  4. <el-breadcrumb separator="/">
  5. <el-breadcrumb-item :to="{ path: 'home' }">{{
  6. $t('common.Home')
  7. }}</el-breadcrumb-item>
  8. <el-breadcrumb-item :to="{ path: 'exhibitionService2' }"
  9. >{{ $t('common.ExhibitionService') }}
  10. </el-breadcrumb-item>
  11. <el-breadcrumb-item>{{
  12. $t('common.ExhibitionServiceDetail')
  13. }}</el-breadcrumb-item>
  14. </el-breadcrumb>
  15. </div>
  16. <div class="ui-body" v-if="$i18n.locale == 'zh'">
  17. <div class="ui-left">
  18. <h3 :title="listDetail.name">{{ listDetail.name }}</h3>
  19. <div class="ui-infos">
  20. <ul class="ui-uls">
  21. <li class="ui-ul-li">
  22. <div class="ui-li-left">
  23. <div class="ui-info-left">举办时间:</div>
  24. <div class="ui-info-right">
  25. {{ listDetail.validityStartDate | time('YYYY-MM-DD') }} --
  26. {{ listDetail.validityEndDate | time('YYYY-MM-DD') }}
  27. </div>
  28. </div>
  29. <div class="ui-li-right">
  30. <div class="ui-info-left">举办地区:</div>
  31. <div class="ui-info-rights" :title="listDetail.region">
  32. {{ listDetail.region }}
  33. </div>
  34. </div>
  35. </li>
  36. <li class="ui-ul-li">
  37. <div class="ui-li-left">
  38. <div class="ui-info-left">举办地点:</div>
  39. <div class="ui-info-right" :title="listDetail.place">
  40. {{ listDetail.place }}
  41. </div>
  42. </div>
  43. <div class="ui-li-right">
  44. <div class="ui-info-left">展商数量:</div>
  45. <div
  46. class="ui-info-right"
  47. :title="listDetail.showbusinessNumber"
  48. >
  49. {{ listDetail.showbusinessNumber }}
  50. </div>
  51. </div>
  52. </li>
  53. <li class="ui-ul-info">
  54. <div class="ui-info-left">主办单位:</div>
  55. <div class="ui-info-right" :title="listDetail.company">
  56. {{ listDetail.company }}
  57. </div>
  58. </li>
  59. <li class="ui-ul-info">
  60. <div class="ui-info-left">承办单位:</div>
  61. <div class="ui-info-right" :title="listDetail.undertakeCompany">
  62. {{ listDetail.undertakeCompany }}
  63. </div>
  64. </li>
  65. <li class="ui-ul-info">
  66. <div class="ui-info-left">会展面积:</div>
  67. <div class="ui-info-right" :title="listDetail.area">
  68. {{ listDetail.area }}万平
  69. </div>
  70. </li>
  71. </ul>
  72. </div>
  73. <div class="user-btn">
  74. <el-button type="primary" @click="toJoin(listDetail.extendTwo)"
  75. >参展报名</el-button
  76. >
  77. <el-button
  78. v-if="yunShang"
  79. plain
  80. @click="toTop(listDetail.exhibitionHallUrl)"
  81. >云上展厅</el-button
  82. >
  83. </div>
  84. <div class="user-info" v-html="listDetail.introduceHtml"></div>
  85. <div class="to-user-detail" @click="aboutInfo">
  86. <span style="cursor: hand">相关会议</span>
  87. </div>
  88. <el-dialog
  89. title="参展报名"
  90. :visible.sync="dialogFormVisible"
  91. :close-on-click-modal="false"
  92. style="width: 100%"
  93. :append-to-body="true"
  94. :destroy-on-close="destroyOnClose"
  95. >
  96. <el-form :model="dynamicValidateForm" ref="dynamicValidateForm">
  97. <el-form-item
  98. label="展位性质"
  99. :label-width="formLabelWidth"
  100. prop="radio"
  101. >
  102. <el-radio-group v-model="dynamicValidateForm.radio" size="medium">
  103. <el-radio label="参展商"></el-radio>
  104. <el-radio label="参展观众"></el-radio>
  105. </el-radio-group>
  106. </el-form-item>
  107. <el-form-item
  108. label="企业名称"
  109. :label-width="formLabelWidth"
  110. prop="unitName"
  111. :rules="[
  112. { required: true, message: '请输入企业名称', trigger: 'blur' },
  113. ]"
  114. >
  115. <el-input
  116. v-model="dynamicValidateForm.unitName"
  117. placeholder="请输入企业名称"
  118. ></el-input>
  119. </el-form-item>
  120. <el-form-item
  121. label="联系人"
  122. :label-width="formLabelWidth"
  123. prop="contact"
  124. :rules="[
  125. { required: true, message: '请输入联系人', trigger: 'blur' },
  126. ]"
  127. >
  128. <el-input
  129. v-model="dynamicValidateForm.contact"
  130. placeholder="请输入联系人"
  131. ></el-input>
  132. </el-form-item>
  133. <el-form-item
  134. label="电话"
  135. :label-width="formLabelWidth"
  136. prop="mobile"
  137. :rules="[
  138. { required: true, message: '请输入电话', trigger: 'blur' },
  139. ]"
  140. >
  141. <el-input
  142. v-model="dynamicValidateForm.mobile"
  143. placeholder="请输入电话"
  144. ></el-input>
  145. </el-form-item>
  146. <el-form-item
  147. label="邮箱"
  148. :label-width="formLabelWidth"
  149. prop="email"
  150. :rules="[
  151. { required: true, message: '请输入邮箱', trigger: 'blur' },
  152. ]"
  153. >
  154. <el-input
  155. v-model="dynamicValidateForm.email"
  156. placeholder="请输入邮箱"
  157. ></el-input>
  158. </el-form-item>
  159. <el-form-item
  160. label="备注"
  161. :label-width="formLabelWidth"
  162. prop="advisoryDetails"
  163. :rules="[
  164. { required: true, message: '请填写备注', trigger: 'blur' },
  165. ]"
  166. >
  167. <el-input
  168. v-model="dynamicValidateForm.advisoryDetails"
  169. placeholder="请输入"
  170. ></el-input>
  171. </el-form-item>
  172. <el-form-item label="上传附件" :label-width="formLabelWidth">
  173. <el-upload
  174. class="upload-demo"
  175. ref="upload"
  176. action="/api/file/upload/attachment?module=resourceshare&attachmentBusinessType=exhibition_apply"
  177. :limit="limit"
  178. :headers="myHeaders"
  179. :on-remove="handleRemove"
  180. :on-exceed="onExceed"
  181. :before-upload="beforeUpload"
  182. :on-success="handleAvatarSuccessAnnex"
  183. :file-list="fileList"
  184. :auto-upload="autoUpload"
  185. >
  186. <el-button slot="trigger" size="small" type="primary"
  187. >选取文件</el-button
  188. >
  189. </el-upload>
  190. </el-form-item>
  191. </el-form>
  192. <div slot="footer" class="dialog-footer">
  193. <el-button @click="cancel">取 消</el-button>
  194. <el-button type="primary" @click="toReady()">确 定</el-button>
  195. </div>
  196. </el-dialog>
  197. </div>
  198. <div class="ui-right">
  199. <div style="margin-top: 20px; margin-left: 10px">
  200. <div class="relevanInformation">
  201. <div class="informationTitle informationTitleAfter">
  202. <!-- <img src="@/assets/img/cooperationExchange/20200608_03.gif" alt=""
  203. style="height: 20px;vertical-align: middle;"> -->
  204. {{ $t('common.LookBackAt') }}
  205. </div>
  206. <ul class="user-out" style="overflow: auto">
  207. <li
  208. v-for="(item, index) in historyInfo"
  209. :key="index"
  210. @click="toDetail(item)"
  211. class="list-infos"
  212. >
  213. · {{ item.name }}
  214. </li>
  215. </ul>
  216. </div>
  217. </div>
  218. <div style="margin-top: 20px; margin-left: 10px">
  219. <div class="relevanInformation">
  220. <div class="informationTitle informationTitleAfter">
  221. <!-- <img src="@/assets/img/cooperationExchange/20200608_03.gif" alt=""
  222. style="height: 20px;vertical-align: middle;"> -->
  223. {{ $t('common.ContactInformations') }}
  224. </div>
  225. <div>
  226. <ul class="user-out">
  227. <li class="user-list-info">
  228. <div class="user-list-pic">
  229. <img
  230. src="@/assets/img/exhibition/who.png"
  231. alt=""
  232. class="user-list-pic-info"
  233. />
  234. <i>联系人:</i>
  235. </div>
  236. <div class="user-info-d">{{ listDetail.contactMen }}</div>
  237. </li>
  238. <li class="user-list-info">
  239. <div class="user-list-pic">
  240. <img
  241. src="@/assets/img/exhibition/24gl-phoneBubble.png"
  242. alt=""
  243. class="user-list-pic-info"
  244. />
  245. <i>电话:</i>
  246. </div>
  247. <div class="user-info-d">{{ listDetail.contactPhone }}</div>
  248. </li>
  249. <li class="user-list-info">
  250. <div class="user-list-pic">
  251. <img
  252. src="@/assets/img/exhibition/email.png"
  253. alt=""
  254. class="user-list-pic-info"
  255. />
  256. <i>邮箱:</i>
  257. </div>
  258. <div class="user-info-d">{{ listDetail.email }}</div>
  259. </li>
  260. <li class="user-list-info">
  261. <div class="user-list-pic">
  262. <img
  263. src="@/assets/img/exhibition/QQ.png"
  264. alt=""
  265. class="user-list-pic-info"
  266. />
  267. <i>QQ:</i>
  268. </div>
  269. <div class="user-info-d">{{ listDetail.qq }}</div>
  270. </li>
  271. </ul>
  272. </div>
  273. </div>
  274. </div>
  275. </div>
  276. </div>
  277. <div class="ui-body" v-if="$i18n.locale == 'en'">
  278. <div class="ui-left">
  279. <h3 :title="listDetail.name">{{ listDetail.name }}</h3>
  280. <div class="ui-infos">
  281. <ul class="ui-uls">
  282. <li class="ui-ul-li">
  283. <div class="ui-li-left">
  284. <div class="ui-info-left">Holding time:</div>
  285. <div class="ui-info-right">
  286. {{ listDetail.validityStartDate | time('YYYY-MM-DD') }} --
  287. {{ listDetail.validityEndDate | time('YYYY-MM-DD') }}
  288. </div>
  289. </div>
  290. <div class="ui-li-right">
  291. <div class="ui-info-left">Hold area:</div>
  292. <div class="ui-info-rights" :title="listDetail.region">
  293. {{ listDetail.region }}
  294. </div>
  295. </div>
  296. </li>
  297. <li class="ui-ul-li">
  298. <div class="ui-li-left">
  299. <div class="ui-info-left">Host place:</div>
  300. <div class="ui-info-right" :title="listDetail.place">
  301. {{ listDetail.place }}
  302. </div>
  303. </div>
  304. <div class="ui-li-right">
  305. <div class="ui-info-left">Exhibitors number:</div>
  306. <div
  307. class="ui-info-right"
  308. :title="listDetail.showbusinessNumber"
  309. >
  310. {{ listDetail.showbusinessNumber }}
  311. </div>
  312. </div>
  313. </li>
  314. <li class="ui-ul-info">
  315. <div class="ui-info-left">Host unit:</div>
  316. <div class="ui-info-right" :title="listDetail.company">
  317. {{ listDetail.company }}
  318. </div>
  319. </li>
  320. <li class="ui-ul-info">
  321. <div class="ui-info-left">Responsible unit:</div>
  322. <div class="ui-info-right" :title="listDetail.undertakeCompany">
  323. {{ listDetail.undertakeCompany }}
  324. </div>
  325. </li>
  326. <li class="ui-ul-info">
  327. <div class="ui-info-left">Exhibition area:</div>
  328. <div class="ui-info-right">{{ listDetail.area }}Myriametre</div>
  329. </li>
  330. </ul>
  331. </div>
  332. <div class="user-btn">
  333. <el-button type="primary" @click="toJoin(listDetail.extendTwo)"
  334. >Apply</el-button
  335. >
  336. <el-button
  337. v-if="yunShang"
  338. plain
  339. @click="toTop(listDetail.exhibitionHallUrl)"
  340. >Exhibition</el-button
  341. >
  342. </div>
  343. <div class="user-info" v-html="listDetail.introduceHtml"></div>
  344. <div class="to-user-detail" @click="aboutInfo">
  345. <span style="cursor: hand">Related Conference Registration</span>
  346. </div>
  347. <el-dialog
  348. title="The exhibition registration"
  349. :visible.sync="dialogFormVisible"
  350. :close-on-click-modal="false"
  351. style="width: 100%"
  352. :append-to-body="true"
  353. :destroy-on-close="destroyOnClose"
  354. >
  355. <el-form :model="dynamicValidateForm" ref="dynamicValidateForm">
  356. <el-form-item
  357. label="Nature of the booth"
  358. :label-width="formLabelWidth"
  359. prop="radio"
  360. >
  361. <el-radio-group v-model="dynamicValidateForm.radio" size="medium">
  362. <el-radio label="Exhibitor"></el-radio>
  363. <el-radio label="The exhibition audience"></el-radio>
  364. </el-radio-group>
  365. </el-form-item>
  366. <el-form-item
  367. label="The name of firm"
  368. :label-width="formLabelWidth"
  369. prop="unitName"
  370. :rules="[
  371. {
  372. required: true,
  373. message: 'Please enter the business name',
  374. trigger: 'blur',
  375. },
  376. ]"
  377. >
  378. <el-input
  379. v-model="dynamicValidateForm.unitName"
  380. placeholder="Please enter the business name"
  381. ></el-input>
  382. </el-form-item>
  383. <el-form-item
  384. label="Contacts"
  385. :label-width="formLabelWidth"
  386. prop="contact"
  387. :rules="[
  388. {
  389. required: true,
  390. message: 'Please enter the contact person',
  391. trigger: 'blur',
  392. },
  393. ]"
  394. >
  395. <el-input
  396. v-model="dynamicValidateForm.contact"
  397. placeholder="Please enter the contact person"
  398. ></el-input>
  399. </el-form-item>
  400. <el-form-item
  401. label="Telephone"
  402. :label-width="formLabelWidth"
  403. prop="mobile"
  404. :rules="[
  405. {
  406. required: true,
  407. message: 'Please enter the telephone number',
  408. trigger: 'blur',
  409. },
  410. ]"
  411. >
  412. <el-input
  413. v-model="dynamicValidateForm.mobile"
  414. placeholder="Please enter the telephone number"
  415. ></el-input>
  416. </el-form-item>
  417. <el-form-item
  418. label="E-mail"
  419. :label-width="formLabelWidth"
  420. prop="email"
  421. :rules="[
  422. {
  423. required: true,
  424. message: 'Please enter email address',
  425. trigger: 'blur',
  426. },
  427. ]"
  428. >
  429. <el-input
  430. v-model="dynamicValidateForm.email"
  431. placeholder="Please enter email address"
  432. >
  433. </el-input>
  434. </el-form-item>
  435. <el-form-item
  436. label="Remark"
  437. :label-width="formLabelWidth"
  438. prop="advisoryDetails"
  439. :rules="[
  440. {
  441. required: true,
  442. message: 'Please fill in the remarks',
  443. trigger: 'blur',
  444. },
  445. ]"
  446. >
  447. <el-input
  448. v-model="dynamicValidateForm.advisoryDetails"
  449. placeholder="Please fill in the remarks"
  450. >
  451. </el-input>
  452. </el-form-item>
  453. <el-form-item
  454. label="Upload attachment"
  455. :label-width="formLabelWidth"
  456. >
  457. <el-upload
  458. class="upload-demo"
  459. ref="upload"
  460. action="/api/file/upload/attachment?module=resourceshare&attachmentBusinessType=exhibition_apply"
  461. :limit="limit"
  462. :headers="myHeaders"
  463. :on-remove="handleRemove"
  464. :on-exceed="onExceed"
  465. :before-upload="beforeUpload"
  466. :on-success="handleAvatarSuccessAnnex"
  467. :file-list="fileList"
  468. :auto-upload="autoUpload"
  469. >
  470. <el-button slot="trigger" size="small" type="primary"
  471. >Select the file</el-button
  472. >
  473. </el-upload>
  474. </el-form-item>
  475. </el-form>
  476. <div slot="footer" class="dialog-footer">
  477. <el-button @click="cancel">Take away</el-button>
  478. <el-button type="primary" @click="toReady()">Determine</el-button>
  479. </div>
  480. </el-dialog>
  481. </div>
  482. <div class="ui-right">
  483. <div style="margin-top: 20px; margin-left: 10px">
  484. <div class="relevanInformation">
  485. <div class="informationTitle informationTitleAfter">
  486. <!-- <img src="@/assets/img/cooperationExchange/20200608_03.gif" alt=""
  487. style="height: 20px;vertical-align: middle;"> -->
  488. {{ $t('common.LookBackAt') }}
  489. </div>
  490. <ul
  491. class="user-out"
  492. v-infinite-scroll="load"
  493. style="overflow: auto"
  494. >
  495. <li
  496. v-for="(item, index) in historyInfo"
  497. :key="index"
  498. @click="toDetail(item)"
  499. class="list-infos"
  500. >
  501. · {{ item.name }}
  502. </li>
  503. </ul>
  504. </div>
  505. </div>
  506. <div style="margin-top: 20px; margin-left: 10px">
  507. <div class="relevanInformation">
  508. <div class="informationTitle informationTitleAfter">
  509. <!-- <img src="@/assets/img/cooperationExchange/20200608_03.gif" alt=""
  510. style="height: 20px;vertical-align: middle;"> -->
  511. {{ $t('common.ContactInformations') }}
  512. </div>
  513. <div>
  514. <ul class="user-out">
  515. <li class="user-list-info">
  516. <div class="user-list-pic">
  517. <img
  518. src="@/assets/img/exhibition/who.png"
  519. alt=""
  520. class="user-list-pic-info"
  521. />
  522. <i>Contacts:</i>
  523. </div>
  524. <div class="user-info-d">{{ listDetail.contactMen }}</div>
  525. </li>
  526. <li class="user-list-info">
  527. <div class="user-list-pic">
  528. <img
  529. src="@/assets/img/exhibition/24gl-phoneBubble.png"
  530. alt=""
  531. class="user-list-pic-info"
  532. />
  533. <i>Telephone:</i>
  534. </div>
  535. <div class="user-info-d">{{ listDetail.contactPhone }}</div>
  536. </li>
  537. <li class="user-list-info">
  538. <div class="user-list-pic">
  539. <img
  540. src="@/assets/img/exhibition/email.png"
  541. alt=""
  542. class="user-list-pic-info"
  543. />
  544. <i>E-mail:</i>
  545. </div>
  546. <div class="user-info-d">{{ listDetail.email }}</div>
  547. </li>
  548. <li class="user-list-info">
  549. <div class="user-list-pic">
  550. <img
  551. src="@/assets/img/exhibition/QQ.png"
  552. alt=""
  553. class="user-list-pic-info"
  554. />
  555. <i>QQ:</i>
  556. </div>
  557. <div class="user-info-d">{{ listDetail.qq }}</div>
  558. </li>
  559. </ul>
  560. </div>
  561. </div>
  562. </div>
  563. </div>
  564. </div>
  565. </div>
  566. </template>
  567. <script>
  568. import { ConventionRegistration } from '@/api/exhibition'
  569. import { getToken } from '@/utils/auth'
  570. import { getTokens } from '@/api/token'
  571. import { ExhibitionListsDetail } from '@/api/exhibition'
  572. import moment from 'moment'
  573. export default {
  574. name: 'exhibitionServiceDetail',
  575. data() {
  576. return {
  577. dialogFormVisible: false,
  578. dynamicValidateForm: {
  579. unitName: '',
  580. contact: '',
  581. mobile: '',
  582. email: '',
  583. radio: '',
  584. advisoryDetails: '',
  585. },
  586. formLabelWidth: '150px',
  587. fileList: [],
  588. typeNum: null,
  589. limit: 1,
  590. fileInfo: {},
  591. autoUpload: true,
  592. myHeaders: { Authorization: 'Bearer ' + getToken() },
  593. detailId: null,
  594. three1: null,
  595. listDetail: {},
  596. historyInfo: [],
  597. yunShang: true,
  598. logNum: null,
  599. flag: false,
  600. destroyOnClose: true,
  601. // flagShe: false,
  602. }
  603. },
  604. watch: {
  605. '$i18n.locale'() {
  606. this.initData()
  607. },
  608. },
  609. beforeDestroy() {
  610. // window.onbeforeunload = function (e) {
  611. // var storage = window.sessionStorage;
  612. // storage.clear()
  613. // }
  614. // sessionStorage.removeItem('hzfw-params');
  615. // sessionStorage.removeItem('hzfw-query')
  616. },
  617. mounted() {
  618. // 缓存不存在
  619. if (sessionStorage.getItem('hzfw-params') == null) {
  620. // 原始进入方式
  621. let params1 = this.$route.params
  622. this.detailId = params1.id
  623. this.three1 = params1.three1
  624. sessionStorage.setItem('hzfw-params', JSON.stringify(params1))
  625. } else if (sessionStorage.getItem('hzfw-params') != null) {
  626. // 缓存存在 详情跳转的地方
  627. // 点击详情进来会保存在这里
  628. let params2 = JSON.parse(sessionStorage.getItem('hzfw-params'))
  629. if (this.$route.params.id && params2.id != this.$route.params.id) {
  630. params2 = this.$route.params
  631. sessionStorage.setItem('hzfw-params', JSON.stringify(params2))
  632. }
  633. this.detailId = params2.id
  634. this.three1 = params2.three1
  635. }
  636. // 缓存不存在
  637. let query3 = this.$route.query
  638. let num = query3.num
  639. if (num == 1) {
  640. // 点击往期回顾
  641. let query1 = this.$route.query
  642. this.detailId = query1.id
  643. this.three1 = query1.three1
  644. sessionStorage.setItem('hzfw-query', JSON.stringify(query1))
  645. } else {
  646. if (sessionStorage.getItem('hzfw-query') != null) {
  647. let params2 = JSON.parse(sessionStorage.getItem('hzfw-query'))
  648. this.detailId = params2.id
  649. this.three1 = params2.three1
  650. }
  651. }
  652. this.initData()
  653. },
  654. filters: {
  655. twoDecimal(value) {
  656. return parseFloat(String(value)).toFixed(2)
  657. },
  658. time(data, type) {
  659. return moment(data).format(type)
  660. },
  661. },
  662. methods: {
  663. toJoin(time) {
  664. console.log(time)
  665. let user = window.sessionStorage.getItem('user')
  666. if (!this.$Cookies.get('token')) {
  667. if (this.$i18n.locale.toUpperCase() == 'ZH') {
  668. this.$message.error('未登录用户无法报名')
  669. } else {
  670. this.$message.error('Users who are not logged in cannot sign up')
  671. }
  672. this.logNum = 1
  673. let logNums = sessionStorage.setItem('num', this.logNum)
  674. } else {
  675. if (time == '未开始') {
  676. if (this.$i18n.locale.toUpperCase() == 'ZH') {
  677. this.$message('活动未开始')
  678. } else {
  679. this.$message('The activity did not start')
  680. }
  681. } else if(time=='已结束') {
  682. if (this.$i18n.locale.toUpperCase() == 'ZH') {
  683. this.$message('活动已结束')
  684. } else {
  685. this.$message('Activity has ended')
  686. }
  687. }else{
  688. if (this.$Cookies.get('token')) {
  689. this.dialogFormVisible = true
  690. } else {
  691. if (this.$i18n.locale.toUpperCase() == 'ZH') {
  692. this.$message('请登录')
  693. } else {
  694. this.$message('Please login')
  695. }
  696. }
  697. }
  698. }
  699. },
  700. initData() {
  701. let id = this.detailId
  702. let three1 = this.three1
  703. let param = {
  704. id: three1,
  705. language: this.$i18n.locale.toUpperCase(),
  706. }
  707. // console.log(three1, 'three1');
  708. ExhibitionListsDetail(param).then((res) => {
  709. console.log(res)
  710. this.listDetail = res.data.exhibitionManagementLists[0]
  711. this.historyInfo = res.data.historyDate
  712. this.detailId = this.listDetail.id
  713. // if (res.data.historyDate) {
  714. // this.flagShe = false
  715. // }
  716. // this.listNum=res.data.historyDate.length
  717. if (this.listDetail.exhibitionHallUrl) {
  718. this.yunShang = true
  719. } else {
  720. this.yunShang = false
  721. }
  722. })
  723. },
  724. toDetail(item) {
  725. // console.log(id);
  726. let picId = item.id
  727. let three1 = item.extendThree
  728. console.log(picId)
  729. this.$router.push({
  730. name: 'exhibitionServiceDetailInfo',
  731. params: {
  732. id: picId,
  733. three1: three1,
  734. },
  735. })
  736. // const { href } = this.$router.resolve({
  737. // name: 'exhibitionServiceDetails',
  738. // query: {
  739. // id: picId,
  740. // three1: three1,
  741. // num: 1
  742. // }
  743. // });
  744. // sessionStorage.removeItem('hzfw-query')
  745. // window.open(href, '_blank')
  746. },
  747. toTop(url) {
  748. window.open(url)
  749. },
  750. aboutInfo() {
  751. this.$router.push('conferenceServices')
  752. },
  753. cancel() {
  754. console.log()
  755. this.dialogFormVisible = false
  756. },
  757. toReady() {
  758. this.$refs.upload.clearFiles()
  759. console.log(this.fileInfo)
  760. this.$refs.dynamicValidateForm.validate((valid) => {
  761. if (valid) {
  762. // alert('submit!');
  763. if (this.dynamicValidateForm.radio == '参展商') {
  764. this.typeNum = 0
  765. } else {
  766. this.typeNum = 1
  767. }
  768. if (this.fileInfo.data) {
  769. let exhibitionApply = {
  770. unitName: this.dynamicValidateForm.unitName,
  771. contact: this.dynamicValidateForm.contact,
  772. mobile: this.dynamicValidateForm.mobile,
  773. email: this.dynamicValidateForm.email,
  774. type: this.typeNum,
  775. fileId: this.fileInfo.data.attachmentId,
  776. fileUrl: this.fileInfo.data.path,
  777. advisoryDetails: this.dynamicValidateForm.advisoryDetails,
  778. exhibitionId: this.detailId,
  779. extend1: this.listDetail.extendThree,
  780. extend2: this.$i18n.locale.toUpperCase(),
  781. }
  782. console.log(exhibitionApply, '传给后台的参数')
  783. getTokens().then((res) => {
  784. ConventionRegistration(JSON.stringify(exhibitionApply), res.data)
  785. .then((res) => {
  786. if (this.$i18n.locale.toUpperCase() == 'ZH') {
  787. this.$message.success('报名成功')
  788. } else {
  789. this.$message.success('Registration success')
  790. }
  791. })
  792. .catch((error) => {
  793. if (this.$i18n.locale.toUpperCase() == 'ZH') {
  794. this.$message.error('报名失败')
  795. } else {
  796. this.$message.success('Registration failed')
  797. }
  798. })
  799. })
  800. this.dialogFormVisible = false
  801. this.$refs.dynamicValidateForm.resetFields()
  802. } else {
  803. let exhibitionApply = {
  804. unitName: this.dynamicValidateForm.unitName,
  805. contact: this.dynamicValidateForm.contact,
  806. mobile: this.dynamicValidateForm.mobile,
  807. email: this.dynamicValidateForm.email,
  808. advisoryDetails: this.dynamicValidateForm.advisoryDetails,
  809. type: this.typeNum,
  810. exhibitionId: this.detailId,
  811. extend1: this.listDetail.extendThree,
  812. extend2: this.$i18n.locale.toUpperCase(),
  813. }
  814. console.log(exhibitionApply, '传给后台的参数')
  815. getTokens().then((res) => {
  816. ConventionRegistration(JSON.stringify(exhibitionApply), res.data)
  817. .then((res) => {
  818. if (this.$i18n.locale.toUpperCase() == 'ZH') {
  819. this.$message.success('报名成功')
  820. } else {
  821. this.$message.success('Registration success')
  822. }
  823. })
  824. .catch((error) => {
  825. if (this.$i18n.locale.toUpperCase() == 'ZH') {
  826. this.$message.error('报名失败')
  827. } else {
  828. this.$message.success('Registration failed')
  829. }
  830. })
  831. })
  832. this.dialogFormVisible = false
  833. this.$refs.dynamicValidateForm.resetFields()
  834. }
  835. } else {
  836. console.log('error submit!!')
  837. return false
  838. }
  839. })
  840. },
  841. handleRemove(file, fileList) {
  842. this.files.forEach((i) => {
  843. if (i == file.uid) {
  844. var index = this.files.indexOf(i)
  845. this.files.splice(index, 1)
  846. }
  847. })
  848. },
  849. onExceed(files, fileList) {
  850. console.log(files, fileList)
  851. if (this.$i18n.locale.toUpperCase() == 'ZH') {
  852. this.$message.error('最多上传一个附件')
  853. } else {
  854. this.$message.error('A maximum of one attachment can be uploaded')
  855. }
  856. },
  857. handleAvatarSuccessAnnex(res, file) {
  858. console.log(res)
  859. this.fileInfo = res
  860. console.log(this.fileInfo)
  861. // this.files.push(res.data.attachmentId);
  862. },
  863. beforeUpload(file) {
  864. var FileExt = file.name.replace(/.+\./, '')
  865. console.log(FileExt);
  866. if (
  867. [ 'pdf', 'zip', 'png'].indexOf(FileExt.toLowerCase()) === -1
  868. ) {
  869. if (this.$i18n.locale.toUpperCase() == 'ZH') {
  870. this.$message({
  871. type: 'warning',
  872. message: '请上传pdf,zip,png 的附件!',
  873. })
  874. } else {
  875. this.$message({
  876. type: 'warning',
  877. message:
  878. 'Please upload the attachment of zip, PDF, word and excel!',
  879. })
  880. }
  881. this.fileList.splice(this.fileList.indexOf(file), 1)
  882. return false
  883. }
  884. this.isLt2k = file.size / 1024 / 1024 < 2 ? '1' : '0'
  885. if (this.isLt2k === '0') {
  886. if (this.$i18n.locale.toUpperCase() == 'ZH') {
  887. this.$message({
  888. message: '上传文件大小不能超过2M!',
  889. type: 'error',
  890. })
  891. } else {
  892. this.$message({
  893. message: 'Upload file size cannot exceed 2m!',
  894. type: 'error',
  895. })
  896. }
  897. this.fileList.splice(this.fileList.indexOf(file), 1)
  898. return false
  899. }
  900. },
  901. },
  902. }
  903. </script>
  904. <style lang="less" scoped>
  905. .box {
  906. margin-top: 10px;
  907. background: #fff;
  908. /* height: 500px; */
  909. padding: 20px 0;
  910. .crumbs {
  911. margin-left: 20px;
  912. }
  913. }
  914. .user-info {
  915. margin-top: 20px;
  916. }
  917. .ui-body {
  918. padding: 30px 12px;
  919. display: flex;
  920. justify-content: space-between;
  921. .ui-left {
  922. width: 63%;
  923. position: relative;
  924. h3 {
  925. display: inline-block;
  926. width: 90%;
  927. margin-left: 5%;
  928. text-align: center;
  929. overflow: hidden;
  930. white-space: nowrap;
  931. text-overflow: ellipsis;
  932. }
  933. .ui-infos {
  934. width: 100%;
  935. height: 240px;
  936. background-image: url('~@/assets/img/exhibition/Group 98.png');
  937. border: 1px solid #d8d6d6;
  938. background-size: 100% 100%;
  939. .ui-uls {
  940. width: 100%;
  941. height: 200px;
  942. padding: 20px 20px;
  943. .ui-ul-li {
  944. display: flex;
  945. height: 40px;
  946. width: 100%;
  947. .ui-li-left {
  948. width: 50%;
  949. height: 40px;
  950. display: flex;
  951. }
  952. .ui-li-right {
  953. width: 50%;
  954. height: 40px;
  955. display: flex;
  956. }
  957. .ui-info-left {
  958. width: 40%;
  959. height: 40px;
  960. line-height: 40px;
  961. font-size: 15px;
  962. color: rgb(0, 0, 0);
  963. text-align: center;
  964. }
  965. .ui-info-right {
  966. font-size: 15px;
  967. height: 40px;
  968. width: 60%;
  969. line-height: 40px;
  970. color: rgb(52, 194, 250);
  971. overflow: hidden;
  972. white-space: nowrap;
  973. text-overflow: ellipsis;
  974. }
  975. .ui-info-rights {
  976. font-size: 15px;
  977. height: 40px;
  978. width: 50%;
  979. line-height: 40px;
  980. color: rgb(52, 194, 250);
  981. overflow: hidden;
  982. white-space: nowrap;
  983. text-overflow: ellipsis;
  984. }
  985. }
  986. .ui-ul-info {
  987. width: 100%;
  988. height: 40px;
  989. display: flex;
  990. .ui-info-left {
  991. width: 20%;
  992. height: 40px;
  993. font-size: 15px;
  994. line-height: 40px;
  995. color: rgb(0, 0, 0);
  996. text-align: center;
  997. }
  998. .ui-info-right {
  999. height: 40px;
  1000. width: 30%;
  1001. line-height: 40px;
  1002. color: rgb(52, 194, 250);
  1003. overflow: hidden;
  1004. white-space: nowrap;
  1005. text-overflow: ellipsis;
  1006. }
  1007. }
  1008. }
  1009. }
  1010. .user-btn {
  1011. position: absolute;
  1012. top: 220px;
  1013. left: 510px;
  1014. }
  1015. .to-user-detail {
  1016. margin-top: 50px;
  1017. span {
  1018. height: 30px;
  1019. line-height: 30px;
  1020. color: rgb(21, 138, 247);
  1021. border-bottom: 1px solid rgb(21, 138, 247);
  1022. cursor: pointer;
  1023. }
  1024. }
  1025. }
  1026. .ui-right {
  1027. width: 33%;
  1028. .relevanInformation {
  1029. padding: 0;
  1030. overflow: hidden;
  1031. .informationTitle {
  1032. border-bottom: 1px solid #2c558a;
  1033. padding: 0 0 10px 0;
  1034. font-weight: 600;
  1035. font-size: 20px;
  1036. opacity: 0.9;
  1037. }
  1038. .informationTitleAfter {
  1039. position: relative;
  1040. }
  1041. }
  1042. .user-out {
  1043. margin-top: 10px;
  1044. height: 235px;
  1045. overflow: hidden;
  1046. width: 100%;
  1047. .list-infos {
  1048. height: 45px;
  1049. line-height: 45px;
  1050. padding: 0 20px;
  1051. margin-bottom: 5px;
  1052. border-bottom: 1px solid rgb(219, 216, 216);
  1053. cursor: pointer;
  1054. overflow: hidden;
  1055. white-space: nowrap;
  1056. text-overflow: ellipsis;
  1057. }
  1058. }
  1059. }
  1060. }
  1061. // li::before {
  1062. // content: "";
  1063. // display: inline-block;
  1064. // width: 5px;
  1065. // height: 5px;
  1066. // line-height: 5px;
  1067. // background-color: skyblue;
  1068. // border-radius: 50%;
  1069. // margin-right: 5px;
  1070. // }
  1071. .user-list-info {
  1072. display: flex;
  1073. height: 40px;
  1074. line-height: 40px;
  1075. margin-bottom: 5px;
  1076. padding: 0 5px;
  1077. .user-list-pic {
  1078. width: 120px;
  1079. i {
  1080. font-style: normal;
  1081. display: inline-block;
  1082. transform: translateY(-14px);
  1083. }
  1084. .user-list-pic-info {
  1085. width: 20px;
  1086. height: 20px;
  1087. padding: 10px 5px;
  1088. }
  1089. }
  1090. .user-info-d {
  1091. width: 240px;
  1092. height: 40px;
  1093. line-height: 40px;
  1094. // background-color: red;
  1095. overflow: hidden;
  1096. white-space: nowrap;
  1097. text-overflow: ellipsis;
  1098. }
  1099. }
  1100. </style>