123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576 |
- <template>
- <view class="memberIntroduction">
- <view class="header-intro">
- <view class="bgcImg">
- <view class="title">{{$t('common.Provide')}}8{{$t('common.membershipservicesforyou')}}</view>
- <view class="wrap">
- <u-row gutter="0" style="margin: 0 10upx;">
- <u-col span="3" v-for="(item,index) in service" :key="index" style="text-align: center;">
- <text class="text" style="font-size: 24upx;">
- {{ $t(item.label) }}
- </text>
- </u-col>
- </u-row>
- </view>
- </view>
- </view>
- <view class="number">
- <view class="num-tab">
- <view class="tab">
- <view class="tabItem" :class="tabFlag === true ? 'tabActive' : ''" @tap="tabFlag = true">
- <text>{{ $t('common.MemberTotal') }}</text>
- <text class="numColor">{{ initDataList.sumCount }}</text>
- </view>
- </view>
- <view class="tab">
- <view class="tabItem" :class="tabFlag === false ? 'tabActive' : ''" @tap="tabFlag = false">
- <text>{{ $t('common.Category') }}</text>
- <text class="numColor">11</text>
- </view>
- </view>
- </view>
- <view class="num-cont">
- <view class="mapBox" v-show="tabFlag">
- <view class="tips">
- {{ $t('common.GEIDCOmembersarewidelydistributedon6continents') }},
- {{ countryNum }}{{ $t('common.Countries') }}
- </view>
- <view class="mapImgBox">
- <view class="mapImg">
- <view class="mapItem" v-for="(item,index) in continentsWorld" @tap="toView(item)"
- :key="index">
- <view class="quan">{{ item.num ? item.num : 0 }}</view>
- <text class="name">{{ item.label }}</text>
- </view>
- </view>
- </view>
- </view>
- <view class="type" v-show="!tabFlag">
- <u-row gutter="16">
- <u-col span="4" v-for="(item,index) in continents" @tap="toType(item)" :key="index">
- <view class="numItem">
- <view class="typeName" :style="{height: $i18n.locale=='zh'?'60upx':'100upx'}">
- {{ item.label }}
- </view>
- <view class="typeNum">
- <image class="typeImg" :src="getIconUrl2(item.img)" mode=""></image>
- <text class="num">{{ item.num }}</text>
- </view>
- </view>
- </u-col>
- </u-row>
- </view>
- </view>
- </view>
- <view class="exhibition-box">
- <view class="exhibition">
- <text class="title">{{$t('common.MemberUnitDisplay')}}</text>
- <view class="more" @tap="toMore">
- <text class="vert">{{$t('common.More')}}</text>
- <uni-icons class="vert" type="arrowright" color="#1777FE" size="16" />
- </view>
- </view>
- <view class="logo-img">
- <u-row gutter="20">
- <u-col span="4" v-for="(k,i) in logoMap" :key="i">
- <view class="logoBox">
- <image class="logoImg" v-if="k" :src="websiteUrl + k" mode=""></image>
- <image class="logoImg" v-else :src="websiteUrl + '/def/def1.png'" mode=""></image>
- </view>
- </u-col>
- </u-row>
- </view>
- </view>
- <view class="memberBtn">
- <u-button type="primary" shape="circle" @click="toMemberApply" style="height:88upx;">
- {{$t('common.MembershipApplication')}}
- </u-button>
- </view>
- </view>
- </template>
- <script>
- export default {
- data() {
- return {
- tabFlag: true,
- initDataList: {},
- countryNum: '',
- continentsWorld: [],
- continents: [],
- logoMap: {},
- continens: [{
- value: '01',
- img: 'tt.png'
- }, {
- value: '02',
- img: 'ky.png'
- }, {
- value: '03',
- img: 'gd.png'
- }, {
- value: '04',
- img: 'ny.png'
- }, {
- value: '05',
- img: 'zb.png'
- }, {
- value: '06',
- img: 'gc.png'
- }, {
- value: '07',
- img: 'jr.png'
- }, {
- value: '08',
- img: 'zx.png'
- }, {
- value: '09',
- img: 'xt.png'
- }, {
- value: '10',
- img: 'cm.png'
- }, {
- value: '11',
- img: 'wl.png'
- }],
- service: [{
- label: 'common.InformationService',
- value: ''
- }, {
- label: 'common.PublicityService',
- value: ''
- }, {
- label: 'common.ExchangeatConferences',
- value: ''
- }, {
- label: 'common.TrainingandSeminars',
- value: ''
- }, {
- label: 'common.ResourceSharingService',
- value: ''
- }, {
- label: 'common.BusinessDevelopment',
- value: ''
- }, {
- label: 'common.CustomizedService',
- value: ''
- }, {
- label: 'common.ProfessionalAlliancesactivities',
- value: ''
- }]
- }
- },
- mounted() {
- this.getInitData();
- this.getMemberLogo();
- },
- methods: {
- async getInitData() {
- const result = await this.$myRequest({
- url: '/sys/sysDicts',
- data: {
- type: this.$i18n.locale == 'zh' ? 'INDUSTRY_DICTS' : 'INDUSTRY_DICTS_EN'
- }
- });
- // console.log(result);
- this.continens.forEach(element => {
- result.data[0].forEach(i => {
- if (element.value == i.value) {
- element.label = i.label;
- element.dictTypeId = i.dictTypeId;
- element.id = i.id;
- }
- })
- });
- this.continents = this.continens;
- this.continents.forEach(item => {
- item.num = 0;
- });
- // console.log(this.continents);
- const res = await this.$myRequest({
- url: '/sys/sysDicts',
- data: {
- type: this.$i18n.locale == 'zh' ? 'CONTINENT_CODE_DICT' : 'CONTINENT_CODE_DICT_EN'
- }
- });
- // console.log(res);
- this.continentsWorld = res.data[0];
- this.continentsWorld.forEach((i, j) => {
- if (this.$i18n.locale != 'zh') {
- if (i.label == 'NorthAmerica') {
- this.continentsWorld[j].label = 'North America';
- } else if (i.label == 'SouthAmerica') {
- this.continentsWorld[j].label = 'South America';
- }
- }
- });
- this.getNteList();
- },
- async getNteList() {
- const res = await this.$myRequest({
- url: '/personnel/baseMemberInfos/showMemeberNumber',
- });
- // console.log(res);
- this.initDataList = res.data;
- this.countryNum = res.data.typeCountry.length;
- // 大洲数据
- res.data.typeContinent.forEach((element, index) => {
- this.continentsWorld.forEach((i, j) => {
- if (element.continent_dict == i.value) {
- i.num = element.count;
- }
- })
- });
- // 企业数据
- res.data.typeIndustry.forEach((element, index) => {
- this.continents.forEach((i, j) => {
- if (element.industry_dict == i.value) {
- i.num = element.count;
- }
- })
- });
- this.$forceUpdate();
- },
- async getMemberLogo() { //会员单位展示
- const res = await this.$myRequest({
- url: '/personnel/baseMemberInfos/searchByTypeAppForLogo',
- data: {
- language: this.$i18n.locale.toUpperCase()
- }
- });
- this.logoMap = res.data.logoMap;
- },
- getIconUrl2(url) {
- return require("@/static/img/cooperationNetwork/type/" + url);
- },
- toView(obj) {
- uni.navigateTo({
- url: './memberInformation?obj=' + encodeURIComponent(JSON.stringify(obj))
- });
- },
- toType(item) {
- uni.navigateTo({
- url: './memberInformation?item=' + encodeURIComponent(JSON.stringify(item))
- });
- },
- toMore() {
- uni.navigateTo({
- url: './memberInformation'
- })
- },
- toMemberApply() {
- let user = uni.getStorageSync('user');
- let token = uni.getStorageSync('Auth-Token');
- if (user && token) {
- uni.navigateTo({
- url: '/pages/service/membership/index'
- })
- } else {
- uni.navigateTo({
- url: '/pages/public/login'
- })
- }
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- @keyframes scaleDraw {
- from {
- transform: translateX(-50%) scale(0.8);
- }
- to {
- transform: translateX(-50%) scale(1.2);
- }
- }
- .memberIntroduction {
- padding-bottom: 140upx;
- .header-intro {
- padding: 20upx 30upx;
- background-color: #FFFFFF;
- .bgcImg {
- width: 100%;
- background: url(../../../static/img/cooperationNetwork/earth.png) no-repeat;
- background-size: 100% 100%;
- color: #FFFFFF;
- padding: 110upx 40rpx;
- box-sizing: border-box;
- .title {
- font-size: 34upx;
- margin-bottom: 36upx;
- text-align: center;
- }
- .wrap {
- .text {
- font-size: 26upx;
- color: rgba(251, 251, 251, .6);
- }
- }
- }
- }
- .number {
- margin-top: 20upx;
- background-color: #FFFFFF;
- .num-tab {
- display: flex;
- justify-content: space-between;
- border-bottom: 1px solid #E1E1E1;
- background-color: #FFFFFF;
- .tab {
- width: 50%;
- font-size: 28upx;
- color: #333333;
- text-align: center;
- .tabItem {
- padding: 16upx 0;
- font-size: 28upx;
- }
- .numColor {
- margin-left: 5upx;
- }
- }
- .tabActive {
- width: 100%;
- display: inline-block;
- border-bottom: 2px solid #2979ff;
- color: #2979ff;
- font-weight: 700;
- }
- }
- .num-cont {
- .mapBox {
- .tips {
- font-size: 26upx;
- padding: 20upx 30upx;
- }
- .mapImgBox {
- padding-bottom: 20upx;
- }
- .mapImg {
- width: 100%;
- height: 416upx;
- background: url(../../../static/img/cooperationNetwork/map.png) no-repeat;
- background-size: 100% 100%;
- position: relative;
- .mapItem {
- text-align: center;
- position: absolute;
- &:nth-child(4) {
- left: 15%;
- top: 100upx;
- }
- &:nth-child(5) {
- left: 22%;
- bottom: 52upx;
- }
- &:nth-child(3) {
- left: 50%;
- top: 60upx;
- }
- &:nth-child(2) {
- left: 48%;
- bottom: 90upx;
- }
- &:first-child {
- right: 23%;
- top: 120upx;
- }
- &:nth-child(6) {
- right: 13%;
- bottom: 56upx;
- }
- .quan {
- width: 60upx;
- height: 60upx;
- line-height: 60upx;
- text-align: center;
- color: #0092CD;
- font-size: 28upx;
- background: url(../../../static/img/cooperationNetwork/quan.png) no-repeat;
- background-size: 100% 100%;
- margin-left: 50%;
- animation: scaleDraw linear infinite 2s;
- }
- .name {
- color: #000000;
- font-weight: 700;
- font-size: 18upx;
- }
- }
- }
- }
- .type {
- padding: 20upx 30upx 0;
- margin: 0 -8upx;
- .u-col:first-child .typeName {
- background-color: rgba(102, 175, 255, 0.1);
- }
- .u-col:nth-child(2) .typeName {
- background-color: rgba(250, 100, 0, 0.1);
- }
- .u-col:nth-child(3) .typeName {
- background-color: rgba(98, 54, 255, 0.1);
- }
- .u-col:nth-child(4) .typeName {
- background-color: rgba(247, 181, 0, 0.1);
- }
- .u-col:nth-child(5) .typeName {
- background-color: rgba(109, 212, 0, 0.1);
- }
- .u-col:nth-child(6) .typeName {
- background-color: rgba(247, 181, 0, 0.1);
- }
- .u-col:nth-child(7) .typeName {
- background-color: rgba(68, 215, 182, 0.1);
- }
- .u-col:nth-child(8) .typeName {
- background-color: rgba(250, 100, 0, 0.1);
- }
- .u-col:nth-child(9) .typeName {
- background-color: rgba(98, 54, 255, 0.1);
- }
- .u-col:nth-child(10) .typeName {
- background-color: rgba(109, 212, 0, 0.1);
- }
- .u-col:nth-child(11) .typeName {
- background-color: rgba(250, 113, 22, 0.1);
- }
- .numItem {
- font-size: 32upx;
- margin-bottom: 33upx;
- .typeName {
- padding: 10upx 0;
- color: #333333;
- display: flex;
- align-items: center;
- justify-content: center;
- margin-bottom: 6upx;
- text-align: center;
- }
- .typeNum {
- display: flex;
- align-items: center;
- }
- .typeImg {
- width: 72upx;
- height: 72upx;
- }
- .num {
- margin-left: 30upx;
- color: #333333;
- font-size: 40upx;
- }
- }
- }
- }
- }
- .exhibition-box {
- margin-top: 20upx;
- padding: 20upx 30upx;
- background-color: #FFFFFF;
- .exhibition {
- display: flex;
- justify-content: space-between;
- .title {
- font-size: 30upx;
- font-weight: 700;
- color: #333333;
- position: relative;
- padding-left: 20rpx;
- }
- .title:before {
- width: 10rpx;
- height: 32rpx;
- content: '';
- position: absolute;
- left: 0;
- top: 6rpx;
- background-color: #6DD400;
- }
- .more {
- font-size: 24upx;
- flex-direction: row;
- }
- .vert {
- font-size: 28upx;
- flex-direction: row;
- color: #1777FE;
- }
- }
- .logo-img {
- .logoBox {
- margin-top: 20rpx;
- border: 1px solid #E1E1E1;
- }
- .logoImg {
- width: 100%;
- height: 200upx;
- }
- }
- }
- .memberBtn {
- position: fixed;
- bottom: 0;
- left: 0;
- width: 100%;
- background-color: #FFFFFF;
- padding: 30upx;
- }
- }
- </style>
|