CooperationExchange.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403
  1. <template>
  2. <div>
  3. <div class="autoBox box cool">
  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>{{$t('common.Cooperation&Communication')}}</el-breadcrumb-item>
  8. <!-- <el-breadcrumb-item>{{$t('common.MemberActivities')}}</el-breadcrumb-item>-->
  9. </el-breadcrumb>
  10. </div>
  11. <div style="margin-top: 20px;">
  12. <el-carousel interval=5000 indicator-position="outside">
  13. <el-carousel-item v-for="(item,index) in initList" :key="'init'+index" v-if="index < 5">
  14. <div>
  15. <img :src="'api/fileextend/pub/' + item.activityLogo + '?custom=840_350'" alt="" style="width: 100%;height: 350px;">
  16. </div>
  17. <div class="activity"
  18. @click="toView('cooperationExchangeListDetails',item.baseActivityEntityId)">
  19. <div :style="$i18n.locale=='zh'?'margin-top: 100px;width: 100%;':'margin-top: 70px;width: 100%;'">
  20. <div style="width: 300px;line-height: 25px;margin-left: 50px;
  21. font-weight: 700;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
  22. {{item.activityName}}
  23. </div>
  24. <div style="width: 100%;line-height: 30px;font-size: 14px;line-height:30px;">
  25. <span style="margin-left: 50px;margin-right: 15px;">
  26. {{$t('common.place')}}: {{item.activityCity}}
  27. </span>
  28. <span :style="$i18n.locale=='zh'?'':'display:block;margin-left: 50px;line-height:30px;'">
  29. {{$t('common.line')}}: {{formatDate(item.activityStartTime)}}
  30. </span>
  31. <div class="border_box plate" style="width: 80%;font-size: 14px;max-height: 105px;
  32. line-height: 25px;margin-left: 40px;
  33. color: #666; -webkit-box-orient: vertical;position:relative;line-height:1.4em;overflow: hidden;height:5.6em">
  34. {{item.activityIntroduce}}
  35. </div>
  36. <!-- <div style="width: 80%;font-size: 14px;height: 40px;margin-left: 50px;color: #666;" v-if = "item.activityStatusDict=='1'" >
  37. {{$t('common.Existing')}}
  38. {{item.activityWonderfulReviewVideoIntroduce?item.activityWonderfulReviewVideoIntroduce:0}}
  39. {{$t('common.UnitRegistration')}}
  40. </div> -->
  41. <!-- <div style="width: 80%;font-size: 14px;height: 40px;margin-left: 50px;color: #666;">
  42. <el-button type="success" round>报名中</el-button>
  43. </div> -->
  44. </div>
  45. </div>
  46. </div>
  47. </el-carousel-item>
  48. </el-carousel>
  49. </div>
  50. <div style="width: 100%;height: 35px;margin-top: 20px;">
  51. <div style="float: left;">
  52. <span v-for="(item,index) in screen" :class="i==index?'screen2 cursor':'screen1 cursor'"
  53. @click="screens(item,index)">
  54. {{$t(item.lable)}}
  55. </span>
  56. </div>
  57. <div style="float: right;margin-right: 20px;transform: translateY(-10PX);">
  58. <el-select v-model="Area" placeholder="请选择区域" style="margin-right: 20px;">
  59. <el-option
  60. v-for="item in options"
  61. :key="'options'+index"
  62. :label="item.label"
  63. :value="item.value"
  64. >
  65. </el-option>
  66. </el-select>
  67. <el-select v-model="value2" placeholder="请选择分类">
  68. <el-option
  69. v-for="item in options2"
  70. :key="'options2'+index"
  71. :label="$t(item.label)"
  72. :value="item.value">
  73. </el-option>
  74. </el-select>
  75. </div>
  76. </div>
  77. <div style="width: 100%;margin-top: 20px;">
  78. <CooperationExchangeItems :init="initDatas"/>
  79. <!-- <CooperationExchangeList/> -->
  80. </div>
  81. <div style="width: 100%;position: relative;height: 100px;">
  82. <el-pagination
  83. style="height: 80px;position: absolute;left: 50%;top: 100px;transform: translate(-50%,-50%);"
  84. background
  85. layout="prev, pager, next"
  86. page-size=10
  87. @current-change="handleCurrentChange"
  88. :total=initData.length>
  89. </el-pagination>
  90. </div>
  91. <div class="autoBox">
  92. <div style="color: #666;font-weight: 700;margin-left: 20px;">{{$t('common.PastReview')}}</div>
  93. <div class="recommend">
  94. <ul>
  95. <li class="cursor" v-for="(item,index) in recommend" :key="'recom' + index" @click="toView('cooperationExchangeListDetails',item.baseActivityEntityId)">
  96. <img :src="'api/fileextend/pub/' + item.activityLogo + '?custom=212_150'" alt="" style="width: 100%;height: 150px;">
  97. <div style="color: rgba(51,51,51,1);font-weight: 700;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{item.activityName}}</div>
  98. <!-- <div style="color: #bcbcbc;font-size: 14px;">{{item.num?item.num:0}}人浏览</div>-->
  99. </li>
  100. </ul>
  101. </div>
  102. </div>
  103. </div>
  104. </div>
  105. </div>
  106. </template>
  107. <script>
  108. import HeaderItem from "@/components/headerItem";
  109. import tabers from "@/components/taber";
  110. import footers from "@/components/footers";
  111. import Screen from "@/components/screen";
  112. import CooperationExchangeItems from "@/views/cooperationExchange/CooperationExchangeItem";
  113. import CooperationExchangeList from "@/views/cooperationExchange/CooperationExchangeList";
  114. import { activityInfos } from "@/api/cooperation/baseCooperationUnit";
  115. import { getDicts } from "@/api/dict";
  116. export default {
  117. name: "cooperationExchange",
  118. components: {
  119. tabers,
  120. HeaderItem,
  121. footers,
  122. Screen,
  123. CooperationExchangeItems,
  124. CooperationExchangeList,
  125. },
  126. data() {
  127. return {
  128. i: 0,
  129. locale: "",
  130. Area: null,
  131. value2: null,
  132. type: null,
  133. initData: [],
  134. total: 0,
  135. options: [],
  136. initDatas: [],
  137. options2: [
  138. {
  139. label: "common.All",
  140. value: null,
  141. },
  142. {
  143. label: "common.Notstarted",
  144. value: 0,
  145. },
  146. {
  147. label: "common.Registrationinprogress",
  148. value: 1,
  149. },
  150. {
  151. label: "common.Inaction",
  152. value: 2,
  153. },
  154. {
  155. label: "common.Finished",
  156. value: 3,
  157. },
  158. ],
  159. screen: [
  160. {
  161. value: null,
  162. lable: "common.All",
  163. },
  164. {
  165. value: "0",
  166. lable: "common.MemberActivities",
  167. },
  168. {
  169. value: "1",
  170. lable: "common.AllianceActivities",
  171. },
  172. {
  173. value: "2",
  174. lable: "common.CooperationActivities",
  175. },
  176. ],
  177. recommend: [],
  178. };
  179. },
  180. watch: {
  181. Area() {
  182. this.getList(this.type, this.Area, this.value2);
  183. },
  184. value2() {
  185. this.getList(this.type, this.Area, this.value2);
  186. },
  187. "$i18n.locale"() {
  188. this.getList(this.type, this.activityArea, this.value2, 1);
  189. this.getData();
  190. this.getAllData();
  191. this.getactivityStatusDict();
  192. },
  193. initList() {
  194. this.$forceUpdate();
  195. },
  196. },
  197. mounted() {
  198. // this.$store.commit('modify', 'cooperationExchange');
  199. // window.localStorage.setItem('router', 'cooperationExchange');
  200. this.locale = this.$i18n.locale;
  201. console.log(
  202. this.$i18n.locale,
  203. "this.$i18n.localethis.$i18n.localethis.$i18n.locale"
  204. );
  205. this.getList();
  206. this.getData(); // 字典值
  207. this.getAllData(); // 获取全部数据
  208. this.getactivityStatusDict(); // 往期回顾
  209. },
  210. methods: {
  211. getData() {
  212. if (this.$i18n.locale == "zh") {
  213. getDicts("CONTINENT_CODE_DICT").then((res) => {
  214. this.options = res.data[0];
  215. this.options.unshift({
  216. label: "全部区域",
  217. value: null,
  218. });
  219. });
  220. } else if (this.$i18n.locale == "en") {
  221. getDicts("CONTINENT_CODE_DICT_EN").then((res) => {
  222. this.options = res.data[0];
  223. this.options.unshift({
  224. label: "All",
  225. value: null,
  226. });
  227. });
  228. }
  229. },
  230. getactivityStatusDict() {
  231. let list = {
  232. activityStatusDict: 3,
  233. language: this.$i18n.locale.toUpperCase(),
  234. pageNo: 1,
  235. pageSize: 5,
  236. };
  237. activityInfos(list).then((res) => {
  238. if (JSON.stringify(res.data) !== "{}") {
  239. this.recommend = res.data.activityInfos;
  240. this.$forceUpdate();
  241. } else {
  242. this.recommend = [];
  243. }
  244. });
  245. },
  246. showfunction() {
  247. console.log("safsdafsda");
  248. },
  249. getAllData() {
  250. this.initList = [];
  251. this.initDatas = [];
  252. let list = {
  253. language: this.$i18n.locale.toUpperCase(),
  254. };
  255. activityInfos(list).then((res) => {
  256. var oldList = [];
  257. oldList = res.data ? res.data.activityInfos : [];
  258. oldList.forEach((element) => {
  259. if ("y" == element.logoFlag) {
  260. this.initList.push(element);
  261. }
  262. });
  263. console.log(this.initList);
  264. this.initDatas = res.data ? res.data.activityInfos : [];
  265. this.$forceUpdate();
  266. });
  267. },
  268. getList(type, activityArea, activityStatusDict, pageNo) {
  269. let list = {
  270. pageSize: 9,
  271. pageNo: pageNo ? pageNo : 1,
  272. language: this.$i18n.locale.toUpperCase(),
  273. activityTypeDict: type ? type : "", // 类型
  274. activityArea: activityArea ? activityArea : "", // 大洲
  275. activityStatusDict: this.value2, // 活动类型
  276. };
  277. activityInfos(list).then((res) => {
  278. console.log(res, "___________----------------------");
  279. if (JSON.stringify(res.data) !== "{}") {
  280. this.initData = res.data.activityInfos;
  281. this.initDatas = res.data.activityInfos;
  282. } else {
  283. this.initData = [];
  284. this.initDatas = [];
  285. }
  286. });
  287. },
  288. handleCurrentChange(val) {
  289. this.getList(this.type, this.activityArea, "0", val);
  290. console.log(val);
  291. },
  292. getIconUrl(url) {
  293. return require("@/assets/img/cooperationExchange/" + url);
  294. },
  295. toView(router, json) {
  296. let language1 =window.localStorage.getItem("locale")
  297. this.$store.commit("modify", router);
  298. window.localStorage.setItem("router", router);
  299. const { href } = this.$router.resolve({
  300. name: router,
  301. query: {
  302. key: json,
  303. language: language1,
  304. },
  305. });
  306. window.open(href, "_blank");
  307. },
  308. screenBack(data) {
  309. console.log(data, "screenBackscreenBackscreenBackscreenBack");
  310. },
  311. screens(item, index) {
  312. this.i = index;
  313. this.type = item.value;
  314. this.getList(item.value);
  315. },
  316. },
  317. };
  318. </script>
  319. <!-- Add "scoped" attribute to limit CSS to this component only -->
  320. <style scoped>
  321. .box {
  322. margin-top: 10px;
  323. background: #fff;
  324. /* height: 500px; */
  325. padding: 20px 0;
  326. }
  327. .crumbs {
  328. margin-left: 20px;
  329. }
  330. body {
  331. margin: 0;
  332. }
  333. .el-carousel__item div:nth-child(1) {
  334. font-size: 18px;
  335. margin: 0;
  336. float: left;
  337. width: 70%;
  338. }
  339. .el-carousel__item div:nth-child(2) {
  340. font-size: 18px;
  341. margin: 0;
  342. float: right;
  343. width: 30%;
  344. }
  345. .el-carousel__item:nth-child(n) {
  346. background-color: #ecedef;
  347. color: #000;
  348. }
  349. .cool >>> .el-carousel__container {
  350. height: 350px;
  351. }
  352. .screen1 {
  353. padding: 10px 18px;
  354. font-size: 14px;
  355. background-color: #e8e8e8;
  356. }
  357. .screen2 {
  358. padding: 10px 18px;
  359. font-size: 14px;
  360. background-color: #12559c;
  361. color: #fff;
  362. }
  363. .initData li {
  364. width: 49%;
  365. float: left;
  366. }
  367. .initData li:nth-child(2n-1) {
  368. margin-right: 15px;
  369. }
  370. .recommend {
  371. margin-top: 15px;
  372. margin-left: 10px;
  373. }
  374. .recommend li {
  375. display: inline-block;
  376. width: 212px;
  377. /* height: 130px; */
  378. text-align: center;
  379. margin-right: 15px;
  380. }
  381. .activity {
  382. height: 100%;
  383. background: url(../../assets/img/introductionCooperation/detailsbg.png)
  384. no-repeat;
  385. }
  386. .border_box:hover {
  387. -webkit-transform: translateY(-3px);
  388. -ms-transform: translateY(-3px);
  389. transform: translateY(-3px);
  390. -webkit-box-shadow: 0 0 6px #999;
  391. box-shadow: 0 0 6px #999;
  392. -webkit-transition: all 0.5s ease-out;
  393. transition: all 0.5s ease-out;
  394. }
  395. </style>