123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357 |
- <template>
- <view class="rf-category">
- <rf-search-bar @search="navToSearch" icon="iconkuaijiecaidan" @tab="tabClick"
- :title="$i18n.locale=='zh'?'发现':'Find'"
- :placeholder="$i18n.locale == 'zh'? '请输入关键字': 'Please input keywords'" />
- <!-- 轮播 -->
- <view class="uni-padding-wrap" style="paddingTop:70upx">
- <view class="page-section swiper">
- <view class="page-section-spacing">
- <swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
- :duration="duration" circular="true">
- <swiper-item v-for="(item,index) in activityInfo" v-if="item.logoFlag && item.logoFlag=='n'">
- <view class="swiper-item uni-bg-red">
- <img v-if="item.activityLogo" :src="websiteUrl+ item.activityLogo" alt="">
- <img :src="websiteUrl+'/def/projectdefault.png'" alt="" v-else>
- </view>
- </swiper-item>
- </swiper>
- </view>
- </view>
- </view>
- <!-- 分类列表 -->
- <view class="classification-list">
- <view class="module-classify-icon" v-for="(item,index) in findInitData" @click="navTo(item.value)">
- <view style="width: 100upx;height: 100upx;margin-left: 10upx;" :style="{'backgroundImage':'url( '+ item.icon +' )',
- 'background-repeat':'no-repeat', backgroundSize:'100upx 100upx'}">
- </view>
- <text>{{i18n(item.label)}}</text>
- </view>
- </view>
- <view class="module-classify-border"></view>
- <!-- 活动区域 -->
- <view class="classification-area">
- <view class="module-classify-icon" @click="navTo(item.value)" v-for="(item,index) in findZoneOfAction">
- <view style="width: 320upx;height: 150upx;" :style="{'backgroundImage':'url( '+ item.icon +' )',
- 'background-repeat':'no-repeat', backgroundSize:'320upx 150upx'}">
- </view>
- <text class="module-classify-text">{{i18n(item.label)}}</text>
- </view>
- </view>
- <view class="module-classify-border"></view>
- <!-- 推荐活动 -->
- <view style="background-color: #fff;padding-top: 25upx;">
- <scroll-view scroll-x class="index-cate">
- <text style="font-size: 35upx;color: #0B0B11;margin-left: 20upx;">{{i18n('recommend')}}</text>
- <view style="float: right; display: inline-block;" :style="$i18n.locale=='en'?'margin-right:20upx':''">
- <view v-for="(item, index) in categoryList" :key="index" class="index-cate-item"
- :class="tabCurrentIndex === index ? `text-${themeColor.name} active` : ''" style="color: #000;"
- @tap.stop="tabClicks(index, item.value)">
- {{ i18n(item.label) }}
- </view>
- </view>
- </scroll-view>
- <view v-if="tabCurrentIndex == 0">
- <view style="margin: 10upx 20upx;height: 464upx;border-radius: 30upx;
- overflow: hidden;background-color: #fff;position: relative;" v-for="(item,index) in activityInfo"
- @click="toView(item)">
- <img :src="websiteUrl+ item.activityLogo" alt="" v-if="item.activityLogo && !item.meetingPicUrl"
- style="width: 100%;height: 300upx;border-radius: 0 0 20upx 20upx;">
- <img :src="websiteUrl+'/def/projectdefault.png'" alt=""
- v-if="!item.activityLogo && !item.meetingPicUrl"
- style="width: 100%;height: 300upx;border-radius: 0 0 20upx 20upx;">
- <view class="" v-if="$i18n.locale=='en'" :class="item.activityType=='会员活动'?'yellow'
- :item.activityType=='联盟活动'?'green'
- :'red'">
- {{item.activityType=='会员活动'?'MemberActivities'
- :item.activityType=='联盟活动'?'AllianceActivities'
- :'CooperationActivities'}}
- </view>
- <view class="" v-if="$i18n.locale=='zh'"
- :class="item.activityType=='会员活动'?'yellow':item.activityType=='联盟活动'?'green':item.activityType?'red':'bule'">
- {{item.activityType}}
- <!-- ?item.activityType:i18n('ConferenceActivities') -->
- </view>
- <view class="recommend-bottom">
- <view class="recommend-bottom-name">{{item.activityName}}</view>
- <view class="recommend-bottom-time">{{i18n('ActivityTime')}}:
- <text>{{formatDate(item.activityStartTime)}} - {{formatDate(item.activityEndTime)}}</text>
- </view>
- </view>
- </view>
- </view>
- <view v-if="tabCurrentIndex == 1">
- <view style="margin: 10upx 20upx;height: 464upx;border-radius: 30upx;
- overflow: hidden;background-color: #fff;position: relative;" v-for="(item,index) in recommendData"
- @click="toView(item)">
- <img :src="websiteUrl+ item.meetingPicUrl" alt="" v-if="item.meetingPicUrl"
- style="width: 100%;height: 300upx;border-radius: 0 0 20upx 20upx;">
- <img :src="websiteUrl+'/def/projectdefault.png'" alt="" v-if="!item.meetingPicUrl "
- style="width: 100%;height: 300upx;border-radius: 0 0 20upx 20upx;">
- <view class="" v-if="$i18n.locale=='en'" class="bule">
- {{i18n('ConferenceActivities')}}
- </view>
- <view class="" v-if="$i18n.locale=='zh'" class="bule">
- {{i18n('ConferenceActivities')}}
- </view>
- <view class="recommend-bottom">
- <view class="recommend-bottom-name">{{$i18n.locale=='zh'?item.meetingName:item.meetingNameEn}}
- </view>
- <view class="recommend-bottom-time">{{i18n('ActivityTime')}}:
- <text>{{formatDate(item.meetingStartDate)}} - {{formatDate(item.meetingEndDate)}}</text>
- </view>
- </view>
- </view>
- </view>
- </view>
- </view>
- </template>
- <script>
- import rfSearchBar from '@/components/rf-search-bar';
- export default {
- components: {
- rfSearchBar,
- },
- data() {
- return {
- background: ['color1', 'color2', 'color3'],
- indicatorDots: true,
- autoplay: true,
- interval: 2000,
- tabCurrentIndex: 0,
- duration: 500,
- findInitData: {},
- findZoneOfAction: [],
- activityInfo: [], // 活动信息
- recommendData: [], // 会议信息
- categoryList: [{
- "label": 'Events',
- "value": "3"
- },
- {
- "label": 'Conference',
- "value": "2"
- },
- // {"label":'Achievements',"value":"4"},
- ],
- };
- },
- async onShow() {
- this.findInitData = await this.$api.json('findInitData');
- console.log("findInitData",this.findInitData);
- this.findZoneOfAction = await this.$api.json('findZoneOfAction');
- this.getList();
- },
- computed: {
- },
- methods: {
- tabClick() {
- },
- tabClicks(index, num) {
- this.tabCurrentIndex = index;
- },
- async getList() {
- let page = {
- pageSize: 10,
- pageNo: 1,
- language: this.$i18n.locale.toUpperCase()
- }
- const that = this;
- const Info = await this.$myRequest({
- url: '/project/activityInfos/showActivityInfos',
- data: {
- ...page
- }
- });
- const res = await this.$myRequest({
- url: '/meeting/meetingBasicInfos/getList',
- data: {}
- })
- let recommendData = [];
- res.data.meetingBasicInfos.forEach((item, index) => {
- if (!that.isMeetingOver(item.meetingEndDate)) {
- if (index <= 5) {
- recommendData.push(item);
- } else {
- return;
- }
- }
- })
- this.activityInfo = Info.data.activityInfos;
- this.recommendData = recommendData;
- },
- isMeetingOver(t) {
- let ct = Date.parse(new Date());
- if (ct - t < 0) {
- return true;
- } else {
- return false;
- }
- },
- i18n(data) {
- return this.$t('common.' + data);
- },
- navTo(src) {
- this.$mRouter.push({
- route: src
- });
- },
- toView(item) {
- let id = item.id;
- let baseActivityEntityId = item.baseActivityEntityId ? item.baseActivityEntityId : null;
- if (!item.activityName) {
- // 会议
- this.$mRouter.push({
- route: `/pages/conference/meetingIndexCh/meetingOver?id=${id}`,
- });
- } else {
- // 活动
- this.$mRouter.push({
- route: `/pages/cooperationExchange/cooperationExchangeList/activitiesInfo?ActivitesId=${baseActivityEntityId}`
- })
- }
- },
- // 通用跳转
- navToSearch() {
- this.$mRouter.push({
- route: `/pages/index/search/search?data=${JSON.stringify(this.search)}`
- });
- },
- }
- };
- </script>
- <style lang="scss" scoped>
- .rf-category {
- background-color: $color-white;
- /* #ifdef APP-PLUS */
- margin-top: calc(20upx + var(--status-bar-height));
- /* #endif */
- .recommend-bottom {}
- .swiper {
- height: 300upx;
- }
- .swiper-item,
- .swiper-item img {
- width: 100%;
- height: 100%;
- }
- .yellow,
- .green,
- .red,
- .bule {
- position: absolute;
- top: 0;
- left: 0;
- /* min-width: 96px; */
- padding: 0 40upx;
- height: 64upx;
- text-align: center;
- line-height: 64upx;
- font-size: 28upx;
- color: #fff;
- border-radius: 0 0 20upx 0;
- }
- .yellow {
- background: rgb(255, 153, 0);
- }
- .green {
- background: rgb(102, 204, 1);
- }
- .red {
- background: rgb(224, 32, 32);
- }
- .bule {
- background: rgb(137, 190, 178);
- }
- .recommend-bottom-name {
- font-size: 45upx;
- font-family: PingFangSC-Medium, PingFang SC;
- font-weight: 500;
- color: #0B0B11;
- line-height: 65upx;
- margin-top: 10upx;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
- .recommend-bottom-time {
- line-height: 55upx;
- }
- .module-classify-border {
- background-color: #f1f2f3;
- height: 20upx;
- }
- .classification-list {
- height: 27vw;
- display: flex;
- padding: 0 30upx;
- flex-wrap: wrap;
- justify-content: space-between;
- align-items: center;
- background-color: $color-white;
- .module-classify-icon {
- width: 120upx;
- margin-right: 10upx;
- text-align: center;
- img {
- width: 100%;
- height: 100%;
- }
- }
- }
- }
- .classification-area {
- height: 65vw;
- display: flex;
- padding: 0upx 30upx 0 30upx;
- flex-wrap: wrap;
- justify-content: space-between;
- align-items: center;
- background-color: $color-white;
- .module-classify-icon {
- width: 320upx;
- height: 200upx;
- margin-right: 10upx;
- text-align: center;
- background-color: #eaeff9;
- border-radius: 30upx;
- img {
- width: 100%;
- height: 100%;
- }
- .module-classify-text {
- font-size: 25upx;
- font-weight: 700;
- }
- }
- }
- </style>
|