123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366 |
- <template>
- <view class="leagueIntroduction">
- <view class="leagueTab">
- <u-subsection :list="listTab" :current="curNow" bgColor="#ffffff"
- active-color="#ffffff" buttonColor="#1777FE" inactive-color="#3D7FFF" @change="sectionChange" :bold="false" font-size="12upx">
- </u-subsection>
- </view>
- <view class="leagueCont">
- <view class="university" style="width: 100%;">
- <view class="imgBox">
- <image class="img" v-if="backgroundImg === 'university'" src="../../../static/img/cooperationNetwork/university.png" mode=""></image>
- <image class="img" v-if="backgroundImg === 'Thinkanks'" src="../../../static/img/cooperationNetwork/Thinkanks.png" mode=""></image>
- <image class="img" v-if="backgroundImg === 'finances'" src="../../../static/img/cooperationNetwork/finances.png" mode=""></image>
- <image class="img" v-if="backgroundImg === 'equipments'" src="../../../static/img/cooperationNetwork/equipments.png" mode=""></image>
- </view>
- <view class="background">
- <view class="title">{{$t('common.Histroy')}}</view>
- <view class="expain">
- <view class="expain-text">{{ $t(Details.label) }}</view>
- <view class="expain-text">{{ $t(Details.value) }}</view>
- </view>
- </view>
- <view class="activity">
- <view class="title">{{$t('common.Activities')}}</view>
- <view class="uni-margin-wrap">
- <scroll-view class="scroll-view" scroll-x="true">
- <block>
- <view class="activityImg" v-for="(item,index) in AllianceActivities" :key="index">
- <image class="activity-img" :src="item.img" mode=""></image>
- <view class="activity-details">
- <view class="activity-title">{{$t(item.title)}}</view>
- <view class="activity-cont">{{$t(item.label)}}</view>
- </view>
- </view>
- </block>
- </scroll-view>
- </view>
- </view>
- <view class="member">
- <view class="title">{{$t('common.Member')}}</view>
- <view class="member-box">
- <u-row gutter="16">
- <u-col span="12" v-for="(item,index) in list" :key="index">
- <view class="member-item" @tap="toViewDetails(item)">
- <image v-if="memberUnits[item.unitId]" class="xin" src="../../../static/img/cooperationNetwork/xin.png" mode=""></image>
- <text>{{$i18n.locale=='zh'?item.unitZhName:item.unitEnName}}</text>
- </view>
- </u-col>
- </u-row>
- </view>
- </view>
- </view>
- </view>
- <view class="memberBtn">
- <u-button type="primary" shape="circle" @click="toLeagueApply">
- <!-- {{$t('common.AllianceApplication')}} Apply to join-->
- {{$i18n.locale ==='zh'? '入盟申请' : 'Apply to join'}}
- </u-button>
- </view>
-
- <u-toast ref="uToast" />
- </view>
- </template>
- <script>
- import activitiesImg1 from '../../../static/img/cooperationNetwork/all1.png';
- import activitiesImg2 from '../../../static/img/cooperationNetwork/all2.png';
- import activitiesImg3 from '../../../static/img/cooperationNetwork/all3.png';
- export default {
- data() {
- return {
- active:{
- "backgroundColor":'#3D7FFF',
- },
- detailShow: false,
- listTab: [{
- name: this.$i18n.locale ==='zh'?'大学联盟':'University '
- // name: this.$i18n.locale ==='zh'?'大学联盟':'University Alliance'
- },
- {
- name: this.$i18n.locale ==='zh'?'智库联盟':'Think Tank '
- // name: this.$i18n.locale ==='zh'?'智库联盟':'Think Tank Alliance'
- },
- {
- name: this.$i18n.locale ==='zh'?'金融联盟':'Financial '
- // name: this.$i18n.locale ==='zh'?'金融联盟':'Financial Alliance'
- },
- {
- name: this.$i18n.locale ==='zh'?'装备联盟':'Equipment '
- // name: this.$i18n.locale ==='zh'?'装备联盟':'Equipment Alliance'
- }
- ],
- AllianceActivities: [{
- img: activitiesImg1,
- title: 'common.ProfessionalActivities',
- label: "common.ProfessionalLable"
- }, {
- img: activitiesImg2,
- title: 'common.event',
- label: "common.eventLable"
- }, {
- img: activitiesImg3,
- title: 'common.OtherActivities',
- label: "common.OtherLable"
- }],
- page: {
- pageSize: 45,
- pageNo: 1,
- unitZhName: null,
- unitEnName:null,
- leagueName: null,
- language: null,
- },
- curNow: 0,
- Details: {},
- zhLeagueName: '',
- backgroundImg: '',
- list: [],
- memberUnits: {},
- }
- },
- mounted() {
- this.initLeagueData();
- this.getLeagueMemberByName();
- },
- methods: {
- sectionChange(index) {
- this.curNow = index;
- this.initLeagueData();
- this.getLeagueMemberByName();
- },
- initLeagueData() {
- if (this.curNow == 0) {
- this.zhLeagueName = '大学联盟';
- this.Details = {
- label: "common.GoalUniversitylabel",
- value: 'common.GoalUniversityvalue',
- establishment: 'common.Universityestablishment',
- purpose: 'common.Universitypurpose',
- Alliance: 'common.UniversityAlliances',
- }
- this.backgroundImg = 'university';
- } else if (this.curNow == 1) {
- this.zhLeagueName = '智库联盟';
- this.Details = {
- label: "common.GoalThinkTanklabel",
- value: 'common.GoalThinkTankvalue',
- establishment: 'common.ThinkTankestablishment',
- purpose: 'common.ThinkTankpurpose',
- Alliance: 'common.ThinkTankAlliances',
- }
- this.backgroundImg = 'Thinkanks';
- } else if (this.curNow == 2) {
- this.zhLeagueName = '金融联盟';
- this.Details = {
- label: "common.GoalFinanciallabel",
- value: 'common.GoalFinancialvalue',
- establishment: 'common.Financialestablishment',
- purpose: 'common.Financialpurpose',
- Alliance: 'common.FinancialAlliances',
- }
- this.backgroundImg = 'finances';
- } else if (this.curNow == 3) {
- this.zhLeagueName = '装备联盟';
- this.Details = {
- label: "common.GoalEquipmentlabel",
- value: 'common.GoalEquipmentvalue',
- establishment: 'common.Equipmentestablishment',
- purpose: 'common.Equipmentpurpose',
- Alliance: 'common.EquipmentAlliances',
- }
- this.backgroundImg = 'equipments';
- }
- },
- async getLeagueMemberByName() {
- this.page.language = this.$i18n.locale.toUpperCase();
- this.page.leagueName = this.zhLeagueName;
-
- const res = await this.$myRequest({
- url: '/project/baseLeagueMembers/getLeagueMemberByName',
- data: this.page
- })
-
- let data = res.data;
- if (data) {
- this.list = data.baseLeagueMembers || [];
- this.memberUnits = data.memberUnits
- }
- },
- toViewDetails(data) {
- this.$emit('league-event',data);
- },
- toLeagueApply() {
- let user = uni.getStorageSync('user');
- let token = uni.getStorageSync('Auth-Token');
- if(user && token) {
- uni.navigateTo({
- url: '/pages/service/membership/leagueApplication'
- })
- }else {
- uni.navigateTo({
- url: '/pages/public/login'
- })
- }
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- .leagueIntroduction {
- padding-bottom: 140upx;
- .leagueTab {
- margin-top: 14upx;
- }
- .leagueCont {
- .imgBox {
- padding: 20upx 30upx;
- background-color: #FFFFFF;
- .img {
- width: 100%;
- height: 414upx;
- }
- }
- .background,
- .activity,
- .member {
- padding: 20upx 30upx;
- background-color: #FFFFFF;
- margin-top: 20upx;
- }
- .title {
- font-size: 30upx;
- color: #333333;
- margin-bottom: 20upx;
- font-weight: bold;
- position: relative;
- padding-left: 20upx;
- }
-
- .title:before {
- width: 10upx;
- height: 32upx;
- content: '';
- position: absolute;
- left: 0;
- top: 6upx;
- background-color: #6DD400;
- }
-
- .expain {
- .expain-text {
- font-size: 26upx;
- line-height: 48upx;
- color: #333333;
- text-indent: 2em;
- }
- }
-
- .swiper {
- height: 310upx;
- }
-
- .scroll-view {
- overflow: hidden;
- white-space: nowrap; // 滚动必须加的属性
- width: 100%;
- }
-
- .activityImg {
- width: 600upx;
- display: inline-block;
- vertical-align: top;
- position: relative;
- border-radius: 10upx;
- margin-right: 20upx;
- white-space: normal;
- .activity-details {
- position: absolute;
- bottom: 0;
- left: 0;
- height: 200upx;
- backdrop-filter: blur(2px);
- background-color: rgba(65, 65, 65, 0.36);
- // background: rgba(0, 0, 0, 0.37);
- color: #FFFFFF;
- padding: 20upx;
- border-radius: 0 0 20upx 20upx;
- .activity-title {
- font-size: 34upx;
- }
- .activity-cont {
- font-size: 28upx;
- }
- }
- }
-
- .activityImg:last-child {
- margin-right: 0;
- }
-
- .activity-img {
- width: 100%;
- height: 340upx;
- border-radius: 20upx;
- }
- .member-box {
- margin: -16upx -8upx 0;
- }
- .member-item {
- padding: 15upx 15upx 15upx 60upx;
- box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
- font-size: 28upx;
- color: #333333;
- margin-top: 15upx;
- background-color: #FFFFFF;
- border-radius: 10upx;
- position: relative;
- .xin {
- width: 36upx;
- height: 30upx;
- position: absolute;
- left: 15upx;
- top: 50%;
- transform: translateY(-50%);
- }
- }
- }
- .memberBtn {
- position: fixed;
- bottom: 0;
- left: 0;
- width: 100%;
- background-color: #FFFFFF;
- padding: 30upx;
- }
-
- /deep/ .u-item-0,
- /deep/ .u-item-1,
- /deep/ .u-item-2,
- /deep/ .u-item-3,
- /deep/ .u-item-4,
- /deep/ .u-item-5{
- background-color:rgba(23, 119, 254, 0.1);
- border-radius:35px !important;
- padding:3px 0 !important;
- }
- /deep/ .u-item-bg{
- border-radius:35px !important;
- }
- // /deep/ .u-tab-item{
- // background-color:rgba(23, 119, 254, 0.1);
- // border-radius:35px !important;
- // margin-top:10upx !important;
- // margin-left:16upx !important;
- // // flex: 1 1 0%;
- // }
- }
-
- </style>
|