committeeLayout.vue 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364
  1. <template>
  2. <view class="committeeLayout">
  3. <!-- 头部 -->
  4. <u-navbar back-icon-color="#fff" :height="50" :is-back="true" :back-text="$t('common.Back')"
  5. :background="{background:'#1777FE'}" :back-text-style="{color:'#fff'}" :border-bottom="true"
  6. title-color="#fff" title-width="400" :title="detail.committeeName" :custom-back="back">
  7. </u-navbar>
  8. <!-- 头部图像 -->
  9. <view class="banner">
  10. <image class="bannerimg" :src="websiteUrl+detail.nationalFlag" mode="widthFix"></image>
  11. </view>
  12. <!-- 主要信息 -->
  13. <view class="maininfo">
  14. <view class="block">
  15. <view class="blockTitle round">{{$t('common.AbouttheCommittee')}}</view>
  16. <!-- <rich-text :nodes="detail.committeeProfileUe"></rich-text> -->
  17. <view class="desText">{{detail.committeeProfile}}</view>
  18. </view>
  19. <view class="datalist">
  20. <view class="block" v-for="(positem,posindex) in positionList" :key="posindex">
  21. <view class="unit" v-if="positem.correlationType==='C'">
  22. <view class="block" @click="showDetail('o',positem)">
  23. <view class="blockTitle">
  24. <text>{{positem.language=='EN'?positem.countryDuty:positem.countryDuty}}</text>
  25. <text class="more">&gt;</text>
  26. </view>
  27. <view class="name">
  28. <image class="icon" src="../../../static/yituojigou.png" mode="aspectFill"></image>
  29. <text>{{positem.language=='EN'?positem.nameEn:positem.name}}</text>
  30. </view>
  31. <view class="desTitle">{{$t('common.Introduction')}}</view>
  32. <view class="desText line3">
  33. <!-- {{positem.unitProfile}} -->
  34. <rich-text :nodes="positem.unitProfile"></rich-text>
  35. </view>
  36. </view>
  37. </view>
  38. <view class="pos" v-if="positem.correlationType==='P'">
  39. <view class="blockTitle">{{positem.countryDuty}}</view>
  40. <view class="weiyuan">
  41. <view class="userThumb">
  42. <image class="userimg" v-if="positem.spareTwo" :src="websiteUrl+positem.spareTwo"
  43. mode="widthFix">
  44. </image>
  45. <image class="userimg" v-if="!positem.spareTwo" :src="userImg" alt=""></image>
  46. </view>
  47. <view class="info">
  48. <view class="name">
  49. <image class="icon" src="../../../static/weiyuanuser.png" mode="widthFix"></image>
  50. <text>{{positem.language=='EN'?positem.nameEn:positem.name}}</text>
  51. </view>
  52. <view class="name">
  53. <image class="icon iconp" src="../../../static/weiyuanpos.png" mode="widthFix">
  54. </image>
  55. <text>{{positem.country}}</text>
  56. </view>
  57. </view>
  58. </view>
  59. <view class="desTitle">{{positem.language=='EN'?'Profile':'人物简介'}}</view>
  60. <view class="desText">
  61. <rich-text :nodes="positem.personalProfileUe"></rich-text>
  62. <!-- {{positem.personalProfileUe}} -->
  63. </view>
  64. </view>
  65. </view>
  66. </view>
  67. </view>
  68. <!-- 动态 -->
  69. <view class="maininfo two" v-if="infoList.length>0">
  70. <view class="blockTitle round">{{this.$i18n.locale.toUpperCase()=='EN'?'Dynamics':'动态'}}</view>
  71. <view class="infowrap">
  72. <view class="infoitem" v-for="(infoitem,infoindex) in infoList" :key="infoindex"
  73. @click="showDetail('d',infoitem)">
  74. <view class="label">{{infoitem.activityName}}</view>
  75. <view class="date">{{formatDate(infoitem.activityStartTime)}}</view>
  76. </view>
  77. </view>
  78. </view>
  79. </view>
  80. </template>
  81. <script>
  82. export default {
  83. name: 'CommitteeLayout',
  84. data() {
  85. return {
  86. detail: {},
  87. userImg: require('../../../static/E2.png'),
  88. positionList: [],
  89. infoList: []
  90. }
  91. },
  92. onShow() {
  93. this.detail = uni.getStorageSync('committeeData') ? uni.getStorageSync('committeeData') : false;
  94. },
  95. onUnload() {
  96. uni.removeStorageSync('committeeData')
  97. },
  98. mounted() {
  99. this.getMoreData()
  100. },
  101. methods: {
  102. //路由后退一步
  103. back() {
  104. // #ifdef H5
  105. history.back()
  106. // #endif
  107. // #ifndef H5
  108. uni.navigateBack()
  109. // #endif
  110. },
  111. showDetail(type, item) {
  112. let url;
  113. if (type == 'o') {
  114. console.log(type, item)
  115. url = '/pages/nationalregionalCommissions/nationalregionalInformaions/organizationDetail?entityId=' +
  116. item.entityId
  117. } else {
  118. url =
  119. '/pages/nationalregionalCommissions/nationalregionalInformaions/nationalregionlInformationDetail?id=' +
  120. item.entityId
  121. }
  122. if (url) uni.navigateTo({
  123. url: url
  124. })
  125. },
  126. // 获取详情数据
  127. async getMoreData() {
  128. let res = await this.$myRequest({
  129. url: '/project/committeeBasisInfos/getCommitteeCountryRelationInfoForApp',
  130. data: {
  131. entityId: this.detail.entityId,
  132. language: this.$i18n.locale.toUpperCase()
  133. }
  134. })
  135. if (res.status == 200) {
  136. if (res.data) {
  137. let data = res.data;
  138. // 职位
  139. if (data.committeeShowMessageInfos) {
  140. if (Array.isArray(data.committeeShowMessageInfos) && data.committeeShowMessageInfos
  141. .length > 0) {
  142. let unit = [];
  143. let pos = [];
  144. for (let i = 0; i < data.committeeShowMessageInfos.length; i++) {
  145. if (data.committeeShowMessageInfos[i]['correlationType'] === 'C') unit.push(data
  146. .committeeShowMessageInfos[i]);
  147. else pos.push(data.committeeShowMessageInfos[i]);
  148. }
  149. this.positionList = [...unit, ...pos];
  150. }
  151. }
  152. // 动态
  153. if (data.activityInfos) {
  154. if (Array.isArray(data.activityInfos) && data.activityInfos.length > 0) {
  155. this.infoList = data.activityInfos
  156. }
  157. }
  158. }
  159. }
  160. },
  161. //
  162. }
  163. }
  164. </script>
  165. <style lang="scss" scoped>
  166. .committeeLayout {
  167. .space {
  168. height: 10upx;
  169. width: 100%;
  170. background-color: #F3F4F5;
  171. }
  172. background-color:#F3F4F5;
  173. .banner {
  174. position: relative;
  175. overflow: hidden;
  176. z-index: 1;
  177. .bannerimg {
  178. display: block;
  179. width: 100%;
  180. }
  181. }
  182. .maininfo {
  183. margin: -16upx auto 0;
  184. background: #fff;
  185. border-radius: 20upx 20upx 0 0;
  186. padding: 20upx;
  187. position: relative;
  188. z-index: 10;
  189. &.two {
  190. margin: 20upx auto 0;
  191. .blockTitle.round {
  192. margin-bottom: 0;
  193. }
  194. .infoitem {
  195. margin: 10upx 0;
  196. padding: 20upx 0;
  197. border-bottom: 1px solid #eee;
  198. &:last-of-type {
  199. border: none
  200. }
  201. .label {
  202. overflow: hidden;
  203. text-overflow: ellipsis;
  204. white-space: nowrap;
  205. height: 50upx;
  206. line-height: 50upx;
  207. }
  208. .date {
  209. color: #aaa;
  210. }
  211. }
  212. }
  213. .block {
  214. margin: 20upx 0;
  215. .name {
  216. display: flex;
  217. align-items: center;
  218. overflow: hidden;
  219. text-overflow: ellipsis;
  220. white-space: nowrap;
  221. text-indent: 16upx;
  222. margin: 16upx 0;
  223. .icon {
  224. width: 36upx;
  225. height: 36upx;
  226. display: block;
  227. margin: -9upx 0 0 48upx;
  228. }
  229. }
  230. .desTitle {
  231. position: relative;
  232. overflow: hidden;
  233. padding: 16upx;
  234. text-indent: 30upx;
  235. &::after {
  236. content: "";
  237. position: absolute;
  238. left: 20upx;
  239. top: 26upx;
  240. width: 0;
  241. height: 0;
  242. border: 10upx solid #0F2F59;
  243. border-right: none;
  244. border-top: 10upx solid transparent;
  245. border-bottom: 10upx solid transparent;
  246. }
  247. }
  248. .desText {
  249. padding: 0 20upx;
  250. text-indent: 64upx;
  251. &.line3 {
  252. overflow: hidden;
  253. text-overflow: ellipsis;
  254. display: -webkit-box;
  255. -webkit-box-orient: vertical;
  256. -webkit-line-clamp: 3;
  257. }
  258. }
  259. .weiyuan {
  260. display: flex;
  261. align-items: center;
  262. padding: 0 20upx;
  263. margin-left: 20upx;
  264. .userThumb {
  265. width: 140upx;
  266. height: 140upx;
  267. border-radius: 50%;
  268. // padding:4upx;
  269. border: 2upx solid #DFF3FB;
  270. position: relative;
  271. overflow: hidden;
  272. .userimg {
  273. display: block;
  274. width: 110%;
  275. margin: 0;
  276. }
  277. }
  278. .info {
  279. .name {
  280. text-indent: 10upx;
  281. display: flex;
  282. align-items: center;
  283. height: 60upx;
  284. line-height: 60upx;
  285. .icon {
  286. width: 32upx;
  287. display: block;
  288. margin: 0 0 0 28upx;
  289. &.iconp {
  290. height: 40upx
  291. }
  292. }
  293. }
  294. }
  295. }
  296. }
  297. .blockTitle {
  298. height: 80upx;
  299. line-height: 80upx;
  300. background-color: #EFF6FF;
  301. padding: 0 20upx;
  302. color: #0B0B11;
  303. font-size: 30upx;
  304. margin-bottom: 30upx;
  305. position: relative;
  306. overflow: hidden;
  307. text-indent: 20upx;
  308. display: flex;
  309. justify-content: space-between;
  310. align-items: center;
  311. font-weight: 700;
  312. &.round {
  313. border-radius: 20upx 20upx 0 0;
  314. }
  315. .more {
  316. color: #999;
  317. font-size: 28upx
  318. }
  319. &:after {
  320. position: absolute;
  321. left: 20upx;
  322. top: 25upx;
  323. content: "";
  324. width: 8upx;
  325. height: 30upx;
  326. background: #0055D4;
  327. }
  328. }
  329. }
  330. }
  331. </style>