meetingIndexEn.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511
  1. <template>
  2. <view>
  3. <view v-if="emptyBox">
  4. <u-navbar :back-text="i18n('Backs')" :back-text-style="backStyle" back-icon-color="#fff" title-color="#fff"
  5. :title="i18n('ThinkTankConsultingInfoDetails')" :background="background">
  6. </u-navbar>
  7. </view>
  8. <!-- 房子按钮 -->
  9. <view class="house" @click="toHome" v-if="!emptyBox">
  10. <uni-icons type="home" size="20" color="#EEEEEE"></uni-icons>
  11. </view>
  12. <!-- 轮播图 -->
  13. <view class="swiperBig" :class="{'swiperSmall':pastEvent}" v-show="swiperexist">
  14. <view class="uni-padding-wrap">
  15. <!-- 图片部分 -->
  16. <view class="page-section swiper">
  17. <view class="page-section-spacing">
  18. <swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
  19. :duration="duration" circular @change="test" @touchmove="handletouchmove"
  20. @touchstart="handletouchstart" @touchend="handletouchend">
  21. <swiper-item v-for="(item,index) in bannerData" :key="index">
  22. <!-- <image
  23. class="myImage"
  24. :src="websiteUrl + item.appPublicityImgEn+ '?custom=375_694'"
  25. mode=""
  26. @click="navigateTo(item.id)"></image> -->
  27. <image class="myImage" :src="websiteUrl + item.appPublicityImgEn" mode=""
  28. @click="navigateTo(item.id)"></image>
  29. </swiper-item>
  30. </swiper>
  31. </view>
  32. </view>
  33. <!-- 箭头按钮 -->
  34. <view class="nextBig" @click="arrowNavto">
  35. <uni-icons type="arrowthinright" size="30" color="#EEEEEE"></uni-icons>
  36. </view>
  37. <!-- 大小图切换(past event) -->
  38. <view class="changeview" @click="changeMyView" v-show="pastEvents">
  39. Past Event
  40. <uni-icons type="arrowdown" size="30" color="#fff" class="arrowdown"></uni-icons>
  41. </view>
  42. </view>
  43. </view>
  44. <!-- <view style="height: 100rpx"></view> -->
  45. <!-- 空白盒子,当没有未开始会议没有轮播图时,为了把列表挤下来 -->
  46. <!-- <view style="height: 70rpx;" v-if="emptyBox"></view> -->
  47. <!-- 搜索框 -->
  48. <view class="mySearch" :class="{'mySearchSmall':pastEvent}" v-show="pastEvent">
  49. <mSearch :show="false" @search="search($event,0)" placeholder='' backgroundColor='#d7d7d7' border="0px">
  50. </mSearch>
  51. </view>
  52. <!-- 列表展示 -->
  53. <view class="" v-for="(_item,_index) in meetingList" :key="_index">
  54. <!-- 分类年份 -->
  55. <view class="conference-time" v-show="pastEvent">
  56. <view
  57. style="width: 7px;height: 18px;background-color: #6dd400;display: inline-block;margin-right: 6px;">
  58. </view>
  59. {{_item.year}}
  60. </view>
  61. <!-- 每个会议 -->
  62. <view class="myList" v-for="(item,index) in _item.data" :key="index" v-show="pastEvent"
  63. @click="navigateOver(item.id)">
  64. <view class="listLeft" style="">
  65. <view style="text-align: center;font-size: 23px;color: #8a8989;">
  66. {{moment(item.meetingStartDate).format('DD')}}
  67. </view>
  68. <view style="text-align: center;color: #8a8989;">
  69. {{moment(item.meetingStartDate).format('YYYY - MM')}}
  70. </view>
  71. </view>
  72. <view class="listRight">
  73. <text style="font-size: 32rpx;line-height: 25px;font-weight: bold;">
  74. {{item.meetingNameEn}}
  75. </text>
  76. <text style="color: #a8a8a8;">
  77. {{item.meetingPlaceEn}}
  78. </text>
  79. </view>
  80. </view>
  81. </view>
  82. </view>
  83. </template>
  84. <script>
  85. import uniIcons from "@/components/uni-icons/uni-icons.vue";
  86. import mSearch from '@/components/mehaotian-search/mehaotian-search.vue';
  87. import {
  88. getConfrences
  89. } from "@/api/meeting/meetingOutInfo.js";
  90. export default {
  91. data() {
  92. return {
  93. background: {
  94. // backgroundImage: 'linear-gradient(270deg, #4BC0E2 0%, #538BE7 100%)',
  95. backgroundColor: '#1777FE'
  96. },
  97. backStyle: {
  98. color: '#fff'
  99. },
  100. // background: ['color1', 'color2', 'color3'],
  101. indicatorDots: true,
  102. autoplay: false,
  103. interval: 2000,
  104. duration: 500,
  105. meetingList: {}, //会议的搜有数据
  106. conferenceData: [],
  107. bannerData: [], //筛选出的未开始的会议
  108. pastEvent: false, //决定轮播图下面的内容是否显示(false不显示)
  109. pastEvents: true, //决定pastEvent按钮是否显示
  110. swiperexist: true, //决定轮播图是否显示
  111. currentId: '',
  112. emptyBox: false,
  113. // 滑动需要用的变量
  114. flag: 0,
  115. text: '',
  116. lastX: 0,
  117. lastY: 0,
  118. }
  119. },
  120. components: {
  121. uniIcons,
  122. mSearch
  123. },
  124. methods: {
  125. i18n(data) {
  126. return this.$t('common.' + data);
  127. },
  128. back() {
  129. uni.navigateBack();
  130. },
  131. changeIndicatorDots(e) {
  132. this.indicatorDots = !this.indicatorDots
  133. },
  134. changeAutoplay(e) {
  135. this.autoplay = !this.autoplay
  136. },
  137. intervalChange(e) {
  138. this.interval = e.target.value
  139. },
  140. durationChange(e) {
  141. this.duration = e.target.value
  142. },
  143. async getList() {
  144. const res = await this.$myRequest({
  145. url: '/meeting/meetingBasicInfos/getListEn',
  146. });
  147. this.bannerData = []
  148. res.data.meetingBasicInfos.forEach(item => {
  149. // 报名未开始会议
  150. if (!this.isMeetingOver(item.meetingEndDate) && item.meetingIsShow == "01" && item
  151. .meetingIsEnroll == "01") {
  152. this.bannerData.push(item)
  153. //把未开始会议的第一个的 id 赋值给 currentId. 防止当未开始会议只有一个时,没办法触发轮播图
  154. //change事件而导致 currentId 没有值,转调时就会出现详情页没有数据
  155. this.currentId = this.bannerData[0].id;
  156. }
  157. // 已结束会议
  158. if (this.isMeetingOver(item.meetingEndDate) && item.meetingIsShow == "01") {
  159. this.conferenceData.push(item)
  160. }
  161. });
  162. // 当未开始会议为零时,则不显示轮播图
  163. if (this.bannerData.length === 0) {
  164. this.swiperexist = false
  165. this.pastEvent = true
  166. this.emptyBox = true
  167. }
  168. // console.log("======="+this.bannerData.id)
  169. // this.meetingList = this.conferenceData;
  170. this.formatConferenceData(this.conferenceData);
  171. },
  172. // 结束会议数据重组
  173. formatConferenceData(data) {
  174. if (data.length) {
  175. this.meetingList = [];
  176. data.forEach(item => {
  177. let year = this.moment(item.meetingStartDate).format('YYYY');
  178. if (this.meetingList.length) {
  179. let hasSameLetter = false;
  180. let listItemIndex;
  181. for (let l = 0; l < this.meetingList.length; l++) {
  182. if (this.meetingList[l].year == year) {
  183. hasSameLetter = true;
  184. listItemIndex = l;
  185. break;
  186. }
  187. }
  188. if (hasSameLetter) {
  189. this.meetingList[listItemIndex].data.push(item);
  190. } else {
  191. this.meetingList.push({
  192. year: year,
  193. data: [item]
  194. });
  195. }
  196. } else {
  197. this.meetingList.push({
  198. year: year,
  199. data: [item]
  200. });
  201. }
  202. })
  203. }
  204. },
  205. // 判断会议是否结束
  206. isMeetingOver(t) {
  207. var ct = Date.parse(new Date());
  208. if (ct - t > 0) {
  209. return true;
  210. } else {
  211. return false;
  212. }
  213. },
  214. //改变视图
  215. changeMyView() {
  216. // console.log(this.pastEvent)
  217. this.pastEvent = !this.pastEvent
  218. this.pastEvents = false
  219. },
  220. navigateTo(id) {
  221. uni.navigateTo({
  222. url: "meetingDetailEn?id=" + id
  223. })
  224. // console.log(id)
  225. },
  226. navigateOver(id) {
  227. uni.navigateTo({
  228. url: "meetingOverEn?id=" + id
  229. })
  230. // console.log(id)
  231. },
  232. toHome() {
  233. this.$mRouter.reLaunch({
  234. route: '/pages/index/index'
  235. });
  236. },
  237. test(e) {
  238. this.currentId = this.bannerData[e.detail.current].id;
  239. console.log(e)
  240. // console.log(this.currentId)
  241. },
  242. arrowNavto() {
  243. uni.navigateTo({
  244. url: "meetingDetailEn?id=" + this.currentId
  245. })
  246. },
  247. // 搜索方法
  248. search(e) {
  249. if (e == '') {
  250. // this.meetingList = this.conferenceData;
  251. this.formatConferenceData(this.conferenceData)
  252. } else {
  253. // this.meetingList = this.conferenceData.filter(item=>{
  254. // return item.meetingName.includes(e)>0 || item.meetingNameEn.includes(e)>0
  255. // });
  256. let ddd = this.conferenceData.filter(item => {
  257. return item.meetingName.includes(e) > 0 || item.meetingNameEn.includes(e) > 0
  258. });
  259. this.formatConferenceData(ddd)
  260. }
  261. if (!this.meetingList.length) {
  262. this.$message.warning('未找到匹配的内容');
  263. }
  264. },
  265. // 自定义的滑动事件
  266. handletouchmove: function(event) {
  267. // console.log(event)
  268. if (this.flag !== 0) {
  269. return;
  270. }
  271. let currentX = event.touches[0].pageX;
  272. let currentY = event.touches[0].pageY;
  273. let tx = currentX - this.lastX;
  274. let ty = currentY - this.lastY;
  275. let text = '';
  276. this.mindex = -1;
  277. //左右方向滑动
  278. if (Math.abs(tx) > Math.abs(ty)) {
  279. if (tx < 0) {
  280. text = '向左滑动';
  281. this.flag = 1;
  282. // this.getList(); //调用列表的方法
  283. } else if (tx > 0) {
  284. text = '向右滑动';
  285. this.flag = 2;
  286. }
  287. }
  288. //上下方向滑动
  289. else {
  290. if (ty < 0) {
  291. text = '向上滑动';
  292. this.flag = 3;
  293. this.pastEvent = true;
  294. this.pastEvents = false;
  295. // this.getList(); //调用列表的方法
  296. } else if (ty > 0) {
  297. text = '向下滑动';
  298. this.flag = 4;
  299. this.pastEvent = false;
  300. this.pastEvents = true;
  301. }
  302. }
  303. //将当前坐标进行保存以进行下一次计算
  304. this.lastX = currentX;
  305. this.lastY = currentY;
  306. this.text = text;
  307. },
  308. handletouchstart: function(event) {
  309. // console.log(event)
  310. this.lastX = event.touches[0].pageX;
  311. this.lastY = event.touches[0].pageY;
  312. },
  313. handletouchend: function(event) {
  314. this.flag = 0;
  315. this.text = '没有滑动';
  316. },
  317. },
  318. onReady() {
  319. // this.getList()
  320. // this.meetingList = getMeetingApplys()
  321. // console.log('====',this.meetingList)
  322. },
  323. // 下拉刷新更新加载会议信息
  324. onLoad() {
  325. this.getList()
  326. // this.test(0)
  327. // this.currentId = this.bannerData[0].id;
  328. },
  329. }
  330. </script>
  331. <style scoped>
  332. page {
  333. background-color: #ffffff;
  334. }
  335. /deep/uni-swiper .uni-swiper-dots-horizontal {
  336. left: 10%;
  337. bottom: 11%;
  338. }
  339. .uni-padding-wrap {
  340. box-sizing: border-box;
  341. position: relative;
  342. /* height: 100%; */
  343. /* margin: 0 0rpx; */
  344. /* padding-bottom: 100rpx; */
  345. /* border-bottom-right-radius: 100rpx; */
  346. overflow: hidden;
  347. }
  348. /* 轮播图高度样式一 */
  349. .swiper {
  350. height: calc(100vh);
  351. /* transition: all 1s; */
  352. }
  353. .swiperBig {
  354. transition: all 1s;
  355. }
  356. /* 轮播图样式二 */
  357. .swiperSmall {
  358. /* height: 430rpx; */
  359. transform: translateY(-820rpx);
  360. transition: all 1s;
  361. margin-bottom: -810rpx;
  362. }
  363. swiper-item {
  364. display: block;
  365. text-align: center;
  366. }
  367. .myImage {
  368. width: 100%;
  369. height: 100%;
  370. }
  371. /* 大图房子样式 */
  372. .house {
  373. z-index: 1;
  374. position: fixed;
  375. top: 70rpx;
  376. right: 48rpx;
  377. height: 60rpx;
  378. width: 100rpx;
  379. background-color: #667b9e;
  380. border-radius: 40rpx;
  381. text-align: center;
  382. line-height: 70rpx;
  383. }
  384. /* 小图房子样式 */
  385. .houseSmall {
  386. position: absolute;
  387. top: 890rpx;
  388. right: 50rpx;
  389. height: 60rpx;
  390. width: 100rpx;
  391. background-color: #667b9e;
  392. border-radius: 40rpx;
  393. text-align: center;
  394. line-height: 70rpx;
  395. transition: all 1s;
  396. }
  397. /* 箭头样式一 */
  398. .nextBig {
  399. position: absolute;
  400. bottom: 100rpx;
  401. right: 70rpx;
  402. height: 120rpx;
  403. width: 120rpx;
  404. background-color: #a3d3f1;
  405. border-radius: 50%;
  406. text-align: center;
  407. line-height: 120rpx;
  408. transition: all 1s;
  409. }
  410. .changeview {
  411. position: absolute;
  412. bottom: 52rpx;
  413. left: 52rpx;
  414. height: 60rpx;
  415. width: 380rpx;
  416. font-size: 48rpx;
  417. font-weight: 700;
  418. color: #FFFFFF;
  419. line-height: 60rpx;
  420. }
  421. .arrowdown {
  422. position: absolute;
  423. top: 2rpx;
  424. right: 60rpx;
  425. }
  426. /* 搜索框样式 */
  427. .mySearch {
  428. width: 710rpx;
  429. height: 90rpx;
  430. margin: 10rpx 20rpx;
  431. border: 0rpx;
  432. background-color: #e7e7e7;
  433. border-radius: 42rpx;
  434. }
  435. .search {
  436. border-radius: 60rpx;
  437. }
  438. .conference-time {
  439. text-align: left;
  440. padding-left: 30rpx;
  441. font-size: 24px;
  442. line-height: 50px;
  443. font-weight: bold;
  444. color: #666;
  445. border-top: 10px solid #d7d7d7;
  446. }
  447. /* 内容列表 */
  448. .myList {
  449. display: flex;
  450. flex-direction: row;
  451. width: 100%;
  452. padding: 0 30rpx 0 0;
  453. margin-bottom: 15px;
  454. /* transform: translateY(-820rpx);
  455. transition: all 1s; */
  456. }
  457. .myList view {
  458. width: 100%;
  459. height: 100%;
  460. }
  461. .listLeft {
  462. display: flex;
  463. flex-direction: column;
  464. flex: 1;
  465. }
  466. .listRight {
  467. /* padding-top: 6rpx; */
  468. display: flex;
  469. flex-direction: column;
  470. flex: 3;
  471. /* white-space:nowrap; */
  472. /* text-overflow:ellipsis */
  473. }
  474. /deep/ uni-swiper .uni-swiper-dot {
  475. background: #ccc;
  476. margin-bottom: 2px;
  477. }
  478. /deep/ uni-swiper .uni-swiper-dot-active {
  479. background-color: #ccc;
  480. border: 2px solid #FFFFFF;
  481. margin-bottom: 0;
  482. }
  483. </style>