notify.vue 9.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357
  1. <template>
  2. <view class="rf-category">
  3. <rf-search-bar @search="navToSearch" icon="iconkuaijiecaidan" @tab="tabClick"
  4. :title="$i18n.locale=='zh'?'发现':'Find'"
  5. :placeholder="$i18n.locale == 'zh'? '请输入关键字': 'Please input keywords'" />
  6. <!-- 轮播 -->
  7. <view class="uni-padding-wrap" style="paddingTop:70upx">
  8. <view class="page-section swiper">
  9. <view class="page-section-spacing">
  10. <swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
  11. :duration="duration" circular="true">
  12. <swiper-item v-for="(item,index) in activityInfo" v-if="item.logoFlag && item.logoFlag=='n'">
  13. <view class="swiper-item uni-bg-red">
  14. <img v-if="item.activityLogo" :src="websiteUrl+ item.activityLogo" alt="">
  15. <img :src="websiteUrl+'/def/projectdefault.png'" alt="" v-else>
  16. </view>
  17. </swiper-item>
  18. </swiper>
  19. </view>
  20. </view>
  21. </view>
  22. <!-- 分类列表 -->
  23. <view class="classification-list">
  24. <view class="module-classify-icon" v-for="(item,index) in findInitData" @click="navTo(item.value)">
  25. <view style="width: 100upx;height: 100upx;margin-left: 10upx;" :style="{'backgroundImage':'url( '+ item.icon +' )',
  26. 'background-repeat':'no-repeat', backgroundSize:'100upx 100upx'}">
  27. </view>
  28. <text>{{i18n(item.label)}}</text>
  29. </view>
  30. </view>
  31. <view class="module-classify-border"></view>
  32. <!-- 活动区域 -->
  33. <view class="classification-area">
  34. <view class="module-classify-icon" @click="navTo(item.value)" v-for="(item,index) in findZoneOfAction">
  35. <view style="width: 320upx;height: 150upx;" :style="{'backgroundImage':'url( '+ item.icon +' )',
  36. 'background-repeat':'no-repeat', backgroundSize:'320upx 150upx'}">
  37. </view>
  38. <text class="module-classify-text">{{i18n(item.label)}}</text>
  39. </view>
  40. </view>
  41. <view class="module-classify-border"></view>
  42. <!-- 推荐活动 -->
  43. <view style="background-color: #fff;padding-top: 25upx;">
  44. <scroll-view scroll-x class="index-cate">
  45. <text style="font-size: 35upx;color: #0B0B11;margin-left: 20upx;">{{i18n('recommend')}}</text>
  46. <view style="float: right; display: inline-block;" :style="$i18n.locale=='en'?'margin-right:20upx':''">
  47. <view v-for="(item, index) in categoryList" :key="index" class="index-cate-item"
  48. :class="tabCurrentIndex === index ? `text-${themeColor.name} active` : ''" style="color: #000;"
  49. @tap.stop="tabClicks(index, item.value)">
  50. {{ i18n(item.label) }}
  51. </view>
  52. </view>
  53. </scroll-view>
  54. <view v-if="tabCurrentIndex == 0">
  55. <view style="margin: 10upx 20upx;height: 464upx;border-radius: 30upx;
  56. overflow: hidden;background-color: #fff;position: relative;" v-for="(item,index) in activityInfo"
  57. @click="toView(item)">
  58. <img :src="websiteUrl+ item.activityLogo" alt="" v-if="item.activityLogo && !item.meetingPicUrl"
  59. style="width: 100%;height: 300upx;border-radius: 0 0 20upx 20upx;">
  60. <img :src="websiteUrl+'/def/projectdefault.png'" alt=""
  61. v-if="!item.activityLogo && !item.meetingPicUrl"
  62. style="width: 100%;height: 300upx;border-radius: 0 0 20upx 20upx;">
  63. <view class="" v-if="$i18n.locale=='en'" :class="item.activityType=='会员活动'?'yellow'
  64. :item.activityType=='联盟活动'?'green'
  65. :'red'">
  66. {{item.activityType=='会员活动'?'MemberActivities'
  67. :item.activityType=='联盟活动'?'AllianceActivities'
  68. :'CooperationActivities'}}
  69. </view>
  70. <view class="" v-if="$i18n.locale=='zh'"
  71. :class="item.activityType=='会员活动'?'yellow':item.activityType=='联盟活动'?'green':item.activityType?'red':'bule'">
  72. {{item.activityType}}
  73. <!-- ?item.activityType:i18n('ConferenceActivities') -->
  74. </view>
  75. <view class="recommend-bottom">
  76. <view class="recommend-bottom-name">{{item.activityName}}</view>
  77. <view class="recommend-bottom-time">{{i18n('ActivityTime')}}:
  78. <text>{{formatDate(item.activityStartTime)}} - {{formatDate(item.activityEndTime)}}</text>
  79. </view>
  80. </view>
  81. </view>
  82. </view>
  83. <view v-if="tabCurrentIndex == 1">
  84. <view style="margin: 10upx 20upx;height: 464upx;border-radius: 30upx;
  85. overflow: hidden;background-color: #fff;position: relative;" v-for="(item,index) in recommendData"
  86. @click="toView(item)">
  87. <img :src="websiteUrl+ item.meetingPicUrl" alt="" v-if="item.meetingPicUrl"
  88. style="width: 100%;height: 300upx;border-radius: 0 0 20upx 20upx;">
  89. <img :src="websiteUrl+'/def/projectdefault.png'" alt="" v-if="!item.meetingPicUrl "
  90. style="width: 100%;height: 300upx;border-radius: 0 0 20upx 20upx;">
  91. <view class="" v-if="$i18n.locale=='en'" class="bule">
  92. {{i18n('ConferenceActivities')}}
  93. </view>
  94. <view class="" v-if="$i18n.locale=='zh'" class="bule">
  95. {{i18n('ConferenceActivities')}}
  96. </view>
  97. <view class="recommend-bottom">
  98. <view class="recommend-bottom-name">{{$i18n.locale=='zh'?item.meetingName:item.meetingNameEn}}
  99. </view>
  100. <view class="recommend-bottom-time">{{i18n('ActivityTime')}}:
  101. <text>{{formatDate(item.meetingStartDate)}} - {{formatDate(item.meetingEndDate)}}</text>
  102. </view>
  103. </view>
  104. </view>
  105. </view>
  106. </view>
  107. </view>
  108. </template>
  109. <script>
  110. import rfSearchBar from '@/components/rf-search-bar';
  111. export default {
  112. components: {
  113. rfSearchBar,
  114. },
  115. data() {
  116. return {
  117. background: ['color1', 'color2', 'color3'],
  118. indicatorDots: true,
  119. autoplay: true,
  120. interval: 2000,
  121. tabCurrentIndex: 0,
  122. duration: 500,
  123. findInitData: {},
  124. findZoneOfAction: [],
  125. activityInfo: [], // 活动信息
  126. recommendData: [], // 会议信息
  127. categoryList: [{
  128. "label": 'Events',
  129. "value": "3"
  130. },
  131. {
  132. "label": 'Conference',
  133. "value": "2"
  134. },
  135. // {"label":'Achievements',"value":"4"},
  136. ],
  137. };
  138. },
  139. async onShow() {
  140. this.findInitData = await this.$api.json('findInitData');
  141. console.log("findInitData",this.findInitData);
  142. this.findZoneOfAction = await this.$api.json('findZoneOfAction');
  143. this.getList();
  144. },
  145. computed: {
  146. },
  147. methods: {
  148. tabClick() {
  149. },
  150. tabClicks(index, num) {
  151. this.tabCurrentIndex = index;
  152. },
  153. async getList() {
  154. let page = {
  155. pageSize: 10,
  156. pageNo: 1,
  157. language: this.$i18n.locale.toUpperCase()
  158. }
  159. const that = this;
  160. const Info = await this.$myRequest({
  161. url: '/project/activityInfos/showActivityInfos',
  162. data: {
  163. ...page
  164. }
  165. });
  166. const res = await this.$myRequest({
  167. url: '/meeting/meetingBasicInfos/getList',
  168. data: {}
  169. })
  170. let recommendData = [];
  171. res.data.meetingBasicInfos.forEach((item, index) => {
  172. if (!that.isMeetingOver(item.meetingEndDate)) {
  173. if (index <= 5) {
  174. recommendData.push(item);
  175. } else {
  176. return;
  177. }
  178. }
  179. })
  180. this.activityInfo = Info.data.activityInfos;
  181. this.recommendData = recommendData;
  182. },
  183. isMeetingOver(t) {
  184. let ct = Date.parse(new Date());
  185. if (ct - t < 0) {
  186. return true;
  187. } else {
  188. return false;
  189. }
  190. },
  191. i18n(data) {
  192. return this.$t('common.' + data);
  193. },
  194. navTo(src) {
  195. this.$mRouter.push({
  196. route: src
  197. });
  198. },
  199. toView(item) {
  200. let id = item.id;
  201. let baseActivityEntityId = item.baseActivityEntityId ? item.baseActivityEntityId : null;
  202. if (!item.activityName) {
  203. // 会议
  204. this.$mRouter.push({
  205. route: `/pages/conference/meetingIndexCh/meetingOver?id=${id}`,
  206. });
  207. } else {
  208. // 活动
  209. this.$mRouter.push({
  210. route: `/pages/cooperationExchange/cooperationExchangeList/activitiesInfo?ActivitesId=${baseActivityEntityId}`
  211. })
  212. }
  213. },
  214. // 通用跳转
  215. navToSearch() {
  216. this.$mRouter.push({
  217. route: `/pages/index/search/search?data=${JSON.stringify(this.search)}`
  218. });
  219. },
  220. }
  221. };
  222. </script>
  223. <style lang="scss" scoped>
  224. .rf-category {
  225. background-color: $color-white;
  226. /* #ifdef APP-PLUS */
  227. margin-top: calc(20upx + var(--status-bar-height));
  228. /* #endif */
  229. .recommend-bottom {}
  230. .swiper {
  231. height: 300upx;
  232. }
  233. .swiper-item,
  234. .swiper-item img {
  235. width: 100%;
  236. height: 100%;
  237. }
  238. .yellow,
  239. .green,
  240. .red,
  241. .bule {
  242. position: absolute;
  243. top: 0;
  244. left: 0;
  245. /* min-width: 96px; */
  246. padding: 0 40upx;
  247. height: 64upx;
  248. text-align: center;
  249. line-height: 64upx;
  250. font-size: 28upx;
  251. color: #fff;
  252. border-radius: 0 0 20upx 0;
  253. }
  254. .yellow {
  255. background: rgb(255, 153, 0);
  256. }
  257. .green {
  258. background: rgb(102, 204, 1);
  259. }
  260. .red {
  261. background: rgb(224, 32, 32);
  262. }
  263. .bule {
  264. background: rgb(137, 190, 178);
  265. }
  266. .recommend-bottom-name {
  267. font-size: 45upx;
  268. font-family: PingFangSC-Medium, PingFang SC;
  269. font-weight: 500;
  270. color: #0B0B11;
  271. line-height: 65upx;
  272. margin-top: 10upx;
  273. overflow: hidden;
  274. text-overflow: ellipsis;
  275. white-space: nowrap;
  276. }
  277. .recommend-bottom-time {
  278. line-height: 55upx;
  279. }
  280. .module-classify-border {
  281. background-color: #f1f2f3;
  282. height: 20upx;
  283. }
  284. .classification-list {
  285. height: 27vw;
  286. display: flex;
  287. padding: 0 30upx;
  288. flex-wrap: wrap;
  289. justify-content: space-between;
  290. align-items: center;
  291. background-color: $color-white;
  292. .module-classify-icon {
  293. width: 120upx;
  294. margin-right: 10upx;
  295. text-align: center;
  296. img {
  297. width: 100%;
  298. height: 100%;
  299. }
  300. }
  301. }
  302. }
  303. .classification-area {
  304. height: 65vw;
  305. display: flex;
  306. padding: 0upx 30upx 0 30upx;
  307. flex-wrap: wrap;
  308. justify-content: space-between;
  309. align-items: center;
  310. background-color: $color-white;
  311. .module-classify-icon {
  312. width: 320upx;
  313. height: 200upx;
  314. margin-right: 10upx;
  315. text-align: center;
  316. background-color: #eaeff9;
  317. border-radius: 30upx;
  318. img {
  319. width: 100%;
  320. height: 100%;
  321. }
  322. .module-classify-text {
  323. font-size: 25upx;
  324. font-weight: 700;
  325. }
  326. }
  327. }
  328. </style>