leagueIntroduction.vue 9.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366
  1. <template>
  2. <view class="leagueIntroduction">
  3. <view class="leagueTab">
  4. <u-subsection :list="listTab" :current="curNow" bgColor="#ffffff"
  5. active-color="#ffffff" buttonColor="#1777FE" inactive-color="#3D7FFF" @change="sectionChange" :bold="false" font-size="12upx">
  6. </u-subsection>
  7. </view>
  8. <view class="leagueCont">
  9. <view class="university" style="width: 100%;">
  10. <view class="imgBox">
  11. <image class="img" v-if="backgroundImg === 'university'" src="../../../static/img/cooperationNetwork/university.png" mode=""></image>
  12. <image class="img" v-if="backgroundImg === 'Thinkanks'" src="../../../static/img/cooperationNetwork/Thinkanks.png" mode=""></image>
  13. <image class="img" v-if="backgroundImg === 'finances'" src="../../../static/img/cooperationNetwork/finances.png" mode=""></image>
  14. <image class="img" v-if="backgroundImg === 'equipments'" src="../../../static/img/cooperationNetwork/equipments.png" mode=""></image>
  15. </view>
  16. <view class="background">
  17. <view class="title">{{$t('common.Histroy')}}</view>
  18. <view class="expain">
  19. <view class="expain-text">{{ $t(Details.label) }}</view>
  20. <view class="expain-text">{{ $t(Details.value) }}</view>
  21. </view>
  22. </view>
  23. <view class="activity">
  24. <view class="title">{{$t('common.Activities')}}</view>
  25. <view class="uni-margin-wrap">
  26. <scroll-view class="scroll-view" scroll-x="true">
  27. <block>
  28. <view class="activityImg" v-for="(item,index) in AllianceActivities" :key="index">
  29. <image class="activity-img" :src="item.img" mode=""></image>
  30. <view class="activity-details">
  31. <view class="activity-title">{{$t(item.title)}}</view>
  32. <view class="activity-cont">{{$t(item.label)}}</view>
  33. </view>
  34. </view>
  35. </block>
  36. </scroll-view>
  37. </view>
  38. </view>
  39. <view class="member">
  40. <view class="title">{{$t('common.Member')}}</view>
  41. <view class="member-box">
  42. <u-row gutter="16">
  43. <u-col span="12" v-for="(item,index) in list" :key="index">
  44. <view class="member-item" @tap="toViewDetails(item)">
  45. <image v-if="memberUnits[item.unitId]" class="xin" src="../../../static/img/cooperationNetwork/xin.png" mode=""></image>
  46. <text>{{$i18n.locale=='zh'?item.unitZhName:item.unitEnName}}</text>
  47. </view>
  48. </u-col>
  49. </u-row>
  50. </view>
  51. </view>
  52. </view>
  53. </view>
  54. <view class="memberBtn">
  55. <u-button type="primary" shape="circle" @click="toLeagueApply">
  56. <!-- {{$t('common.AllianceApplication')}} Apply to join-->
  57. {{$i18n.locale ==='zh'? '入盟申请' : 'Apply to join'}}
  58. </u-button>
  59. </view>
  60. <u-toast ref="uToast" />
  61. </view>
  62. </template>
  63. <script>
  64. import activitiesImg1 from '../../../static/img/cooperationNetwork/all1.png';
  65. import activitiesImg2 from '../../../static/img/cooperationNetwork/all2.png';
  66. import activitiesImg3 from '../../../static/img/cooperationNetwork/all3.png';
  67. export default {
  68. data() {
  69. return {
  70. active:{
  71. "backgroundColor":'#3D7FFF',
  72. },
  73. detailShow: false,
  74. listTab: [{
  75. name: this.$i18n.locale ==='zh'?'大学联盟':'University '
  76. // name: this.$i18n.locale ==='zh'?'大学联盟':'University Alliance'
  77. },
  78. {
  79. name: this.$i18n.locale ==='zh'?'智库联盟':'Think Tank '
  80. // name: this.$i18n.locale ==='zh'?'智库联盟':'Think Tank Alliance'
  81. },
  82. {
  83. name: this.$i18n.locale ==='zh'?'金融联盟':'Financial '
  84. // name: this.$i18n.locale ==='zh'?'金融联盟':'Financial Alliance'
  85. },
  86. {
  87. name: this.$i18n.locale ==='zh'?'装备联盟':'Equipment '
  88. // name: this.$i18n.locale ==='zh'?'装备联盟':'Equipment Alliance'
  89. }
  90. ],
  91. AllianceActivities: [{
  92. img: activitiesImg1,
  93. title: 'common.ProfessionalActivities',
  94. label: "common.ProfessionalLable"
  95. }, {
  96. img: activitiesImg2,
  97. title: 'common.event',
  98. label: "common.eventLable"
  99. }, {
  100. img: activitiesImg3,
  101. title: 'common.OtherActivities',
  102. label: "common.OtherLable"
  103. }],
  104. page: {
  105. pageSize: 45,
  106. pageNo: 1,
  107. unitZhName: null,
  108. unitEnName:null,
  109. leagueName: null,
  110. language: null,
  111. },
  112. curNow: 0,
  113. Details: {},
  114. zhLeagueName: '',
  115. backgroundImg: '',
  116. list: [],
  117. memberUnits: {},
  118. }
  119. },
  120. mounted() {
  121. this.initLeagueData();
  122. this.getLeagueMemberByName();
  123. },
  124. methods: {
  125. sectionChange(index) {
  126. this.curNow = index;
  127. this.initLeagueData();
  128. this.getLeagueMemberByName();
  129. },
  130. initLeagueData() {
  131. if (this.curNow == 0) {
  132. this.zhLeagueName = '大学联盟';
  133. this.Details = {
  134. label: "common.GoalUniversitylabel",
  135. value: 'common.GoalUniversityvalue',
  136. establishment: 'common.Universityestablishment',
  137. purpose: 'common.Universitypurpose',
  138. Alliance: 'common.UniversityAlliances',
  139. }
  140. this.backgroundImg = 'university';
  141. } else if (this.curNow == 1) {
  142. this.zhLeagueName = '智库联盟';
  143. this.Details = {
  144. label: "common.GoalThinkTanklabel",
  145. value: 'common.GoalThinkTankvalue',
  146. establishment: 'common.ThinkTankestablishment',
  147. purpose: 'common.ThinkTankpurpose',
  148. Alliance: 'common.ThinkTankAlliances',
  149. }
  150. this.backgroundImg = 'Thinkanks';
  151. } else if (this.curNow == 2) {
  152. this.zhLeagueName = '金融联盟';
  153. this.Details = {
  154. label: "common.GoalFinanciallabel",
  155. value: 'common.GoalFinancialvalue',
  156. establishment: 'common.Financialestablishment',
  157. purpose: 'common.Financialpurpose',
  158. Alliance: 'common.FinancialAlliances',
  159. }
  160. this.backgroundImg = 'finances';
  161. } else if (this.curNow == 3) {
  162. this.zhLeagueName = '装备联盟';
  163. this.Details = {
  164. label: "common.GoalEquipmentlabel",
  165. value: 'common.GoalEquipmentvalue',
  166. establishment: 'common.Equipmentestablishment',
  167. purpose: 'common.Equipmentpurpose',
  168. Alliance: 'common.EquipmentAlliances',
  169. }
  170. this.backgroundImg = 'equipments';
  171. }
  172. },
  173. async getLeagueMemberByName() {
  174. this.page.language = this.$i18n.locale.toUpperCase();
  175. this.page.leagueName = this.zhLeagueName;
  176. const res = await this.$myRequest({
  177. url: '/project/baseLeagueMembers/getLeagueMemberByName',
  178. data: this.page
  179. })
  180. let data = res.data;
  181. if (data) {
  182. this.list = data.baseLeagueMembers || [];
  183. this.memberUnits = data.memberUnits
  184. }
  185. },
  186. toViewDetails(data) {
  187. this.$emit('league-event',data);
  188. },
  189. toLeagueApply() {
  190. let user = uni.getStorageSync('user');
  191. let token = uni.getStorageSync('Auth-Token');
  192. if(user && token) {
  193. uni.navigateTo({
  194. url: '/pages/service/membership/leagueApplication'
  195. })
  196. }else {
  197. uni.navigateTo({
  198. url: '/pages/public/login'
  199. })
  200. }
  201. }
  202. }
  203. }
  204. </script>
  205. <style lang="scss" scoped>
  206. .leagueIntroduction {
  207. padding-bottom: 140upx;
  208. .leagueTab {
  209. margin-top: 14upx;
  210. }
  211. .leagueCont {
  212. .imgBox {
  213. padding: 20upx 30upx;
  214. background-color: #FFFFFF;
  215. .img {
  216. width: 100%;
  217. height: 414upx;
  218. }
  219. }
  220. .background,
  221. .activity,
  222. .member {
  223. padding: 20upx 30upx;
  224. background-color: #FFFFFF;
  225. margin-top: 20upx;
  226. }
  227. .title {
  228. font-size: 30upx;
  229. color: #333333;
  230. margin-bottom: 20upx;
  231. font-weight: bold;
  232. position: relative;
  233. padding-left: 20upx;
  234. }
  235. .title:before {
  236. width: 10upx;
  237. height: 32upx;
  238. content: '';
  239. position: absolute;
  240. left: 0;
  241. top: 6upx;
  242. background-color: #6DD400;
  243. }
  244. .expain {
  245. .expain-text {
  246. font-size: 26upx;
  247. line-height: 48upx;
  248. color: #333333;
  249. text-indent: 2em;
  250. }
  251. }
  252. .swiper {
  253. height: 310upx;
  254. }
  255. .scroll-view {
  256. overflow: hidden;
  257. white-space: nowrap; // 滚动必须加的属性
  258. width: 100%;
  259. }
  260. .activityImg {
  261. width: 600upx;
  262. display: inline-block;
  263. vertical-align: top;
  264. position: relative;
  265. border-radius: 10upx;
  266. margin-right: 20upx;
  267. white-space: normal;
  268. .activity-details {
  269. position: absolute;
  270. bottom: 0;
  271. left: 0;
  272. height: 200upx;
  273. backdrop-filter: blur(2px);
  274. background-color: rgba(65, 65, 65, 0.36);
  275. // background: rgba(0, 0, 0, 0.37);
  276. color: #FFFFFF;
  277. padding: 20upx;
  278. border-radius: 0 0 20upx 20upx;
  279. .activity-title {
  280. font-size: 34upx;
  281. }
  282. .activity-cont {
  283. font-size: 28upx;
  284. }
  285. }
  286. }
  287. .activityImg:last-child {
  288. margin-right: 0;
  289. }
  290. .activity-img {
  291. width: 100%;
  292. height: 340upx;
  293. border-radius: 20upx;
  294. }
  295. .member-box {
  296. margin: -16upx -8upx 0;
  297. }
  298. .member-item {
  299. padding: 15upx 15upx 15upx 60upx;
  300. box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  301. font-size: 28upx;
  302. color: #333333;
  303. margin-top: 15upx;
  304. background-color: #FFFFFF;
  305. border-radius: 10upx;
  306. position: relative;
  307. .xin {
  308. width: 36upx;
  309. height: 30upx;
  310. position: absolute;
  311. left: 15upx;
  312. top: 50%;
  313. transform: translateY(-50%);
  314. }
  315. }
  316. }
  317. .memberBtn {
  318. position: fixed;
  319. bottom: 0;
  320. left: 0;
  321. width: 100%;
  322. background-color: #FFFFFF;
  323. padding: 30upx;
  324. }
  325. /deep/ .u-item-0,
  326. /deep/ .u-item-1,
  327. /deep/ .u-item-2,
  328. /deep/ .u-item-3,
  329. /deep/ .u-item-4,
  330. /deep/ .u-item-5{
  331. background-color:rgba(23, 119, 254, 0.1);
  332. border-radius:35px !important;
  333. padding:3px 0 !important;
  334. }
  335. /deep/ .u-item-bg{
  336. border-radius:35px !important;
  337. }
  338. // /deep/ .u-tab-item{
  339. // background-color:rgba(23, 119, 254, 0.1);
  340. // border-radius:35px !important;
  341. // margin-top:10upx !important;
  342. // margin-left:16upx !important;
  343. // // flex: 1 1 0%;
  344. // }
  345. }
  346. </style>