organsDetial.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547
  1. <template>
  2. <view class="organsDetial">
  3. <!-- 标题栏 -->
  4. <u-navbar :is-back="true" :back-icon-color="'#fff'" :background="{'background':'#1777FE'}" :border-bottom="true"
  5. :back-text="$t('common.Back')" :title-color="'#fff'" :back-text-style="{color:'#fff'}" :title="title">
  6. <view slot="right" style="margin-right:20upx">
  7. <u-icon name="share-fill" style="margin-right: 30upx;" color="white" size="50" @click="share"></u-icon>
  8. <u-icon name="heart-fill" color="#fff" size="36" @click="saveFollowModel(followed)"
  9. v-if="this.followed"></u-icon>
  10. <u-icon name="heart" color="#fff" size="36" @click="saveFollowModel(followed)" v-if="!this.followed">
  11. </u-icon>
  12. </view>
  13. </u-navbar>
  14. <!-- <view class="banner" style="text-align: center;"><image style="height: 100%;" :src="detial.photo" ></image></view> -->
  15. <view class="banner">
  16. <image class="bannerimg" :src="detial.photo" mode="widthFix"></image>
  17. </view>
  18. <view class="headInfo">
  19. <view class="title">{{detial.unitName}}</view>
  20. <view class="address">
  21. <view class="label">{{$t('common.place')}}:</view>
  22. <view class="text">{{detial.unitCountry}} </view>
  23. </view>
  24. <view class="web">
  25. <text>{{$t('common.Website')}}:</text><text>{{detial.officialWebsitePath}}</text>
  26. </view>
  27. <view class="des">
  28. <view class="label">{{$t('common.Introduce')}}:</view>
  29. <view class="text">
  30. <!-- <rich-text :nodes="detial.unitIntroduction"></rich-text> -->
  31. <view :class="flag?'':'introduct1'" v-html="detial.unitIntroduction"></view>
  32. <view class="more" @click="showAll" v-if="flag==false">{{$t('common.SeeAll')}}</view>
  33. <view style="clear: both;"></view>
  34. </view>
  35. </view>
  36. </view>
  37. <view class="line5"></view>
  38. <view class="tab">
  39. <view class="tabtitle">
  40. <u-tabs-swiper ref="uTabs" :list="tabTitleList" :current="current" :is-scroll="true" :bold="false"
  41. :bar-height="0" :bar-style="{margin:'0 auto',textAlign:'center'}" :swiperWidth="750"
  42. @change="tabsChange">
  43. </u-tabs-swiper>
  44. </view>
  45. <view class="tabcontent">
  46. <swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
  47. <swiper-item class="swiper-item" v-for="(item, index) in tabs" :key="index">
  48. <scroll-view :scroll-y="true" style="height:100%;width:100%;" @scrolltolower="onreachBottom">
  49. <!-- 页面1 -->
  50. <view class="page" v-if="index==0 && item.list.length>0">
  51. <view class="pageitem" v-for="(pageitem,pageidx) in item.list" :key="pageidx"
  52. @click="toShowDetial(pageitem)">
  53. <view class="label">{{pageitem.title}}</view>
  54. <view class="date">{{formatDate(pageitem.publishDate)}}</view>
  55. </view>
  56. </view>
  57. <!-- 页面2 -->
  58. <view class="page" v-if="index==1 && item.list.length>0">
  59. <view class="pageitem" v-for="(pageitem,pageidx) in item.list" :key="pageidx"
  60. @click="toShowDetial(pageitem)">
  61. <view class="label">{{pageitem.title}}</view>
  62. <view class="date">{{formatDate(pageitem.publishDate)}}</view>
  63. </view>
  64. </view>
  65. <view class="nodata" v-if="item.list.length==0">{{msg}}</view>
  66. </scroll-view>
  67. </swiper-item>
  68. </swiper>
  69. </view>
  70. </view>
  71. <view class="line5"></view>
  72. <view class="dynamic" v-if="infoList.length>0">
  73. <view class="zoneTitle">{{$t('common.InstitutionDynamic')}}</view>
  74. <view class="infoList">
  75. <view class="item" v-for="(item,index) in infoList" :key="index" @click="toShowDetial(item)">
  76. <!-- <view class="thumb"><image class="thumbimg" :src="item.thumb" mode="widthFix"></image></view> -->
  77. <view class="info">
  78. <view class="title">{{item.title}}</view>
  79. <view class="date">{{publishDate(item.publishDate)}}</view>
  80. </view>
  81. </view>
  82. </view>
  83. </view>
  84. <!-- 8.8.20.112:19001 -->
  85. <share v-show="ifShare == true" :show="ifShare" @closeShare="share" :title="i18n('FinancialInstitutions')"
  86. :summary="detial.unitName"
  87. :href="'https://m.geidcp.com/#/pages/financialService/financialOrgans/organsDetial?' + 'baseEntityId=' + baseEntityId + '&language=' + $i18n.locale"
  88. :imageUrl="detial.photo? detial.photo :
  89. 'https://geidcp.com/api/file/pub/defaultCutPic/shareLogo.png'">
  90. </share>
  91. <!-- #ifdef H5 -->
  92. <rf-back-home></rf-back-home>
  93. <!-- #endif -->
  94. <u-toast ref="uToast" />
  95. </view>
  96. </template>
  97. <script>
  98. import UNavbar from '@/components/uni-nav-bar/uni-nav-bar.vue'
  99. import UIcon from '@/components/uni-icons/uni-icons.vue'
  100. import {
  101. getBaseFinancialInstitutionInfos
  102. } from "@/api/financialService/baseFinancialInstitutionInfo";
  103. import {
  104. getInformationList
  105. } from '@/api/cooperation/baseCooperationUnit'
  106. import {
  107. saveFollowModel,
  108. getFollowModelStatusByModelIdAndUserId
  109. } from '@/api/operation/basePortalModelFollowInfo'
  110. import share from '@/components/share'
  111. export default {
  112. name: 'OrgansDetial',
  113. components: {
  114. UNavbar,
  115. UIcon,
  116. share
  117. },
  118. data: function() {
  119. return {
  120. title: '',
  121. msg: '',
  122. baseEntityId: '',
  123. modelType: 'financialInstitution',
  124. followed: '',
  125. detial: {},
  126. current: 0,
  127. ifShare: false,
  128. swiperCurrent: 0,
  129. // seeAll: '查看全部',
  130. tabTitleList: [{
  131. name: this.$t('common.ProductAndService')
  132. },
  133. {
  134. name: this.$t('common.InvestmentAndCases')
  135. }
  136. ],
  137. flag: false,
  138. tabs: [{
  139. list: []
  140. },
  141. {
  142. list: []
  143. }
  144. ],
  145. infoList: [],
  146. token: ''
  147. }
  148. },
  149. onShow: function() {
  150. this.token = uni.getStorageSync('Auth-Token') ? ('Bearer ' + uni.getStorageSync('Auth-Token')) : '';
  151. this.userId = uni.getStorageSync('user') ? (JSON.parse(uni.getStorageSync('user')).id) : '';
  152. },
  153. onLoad: function(e) {
  154. this.baseEntityId = e.baseEntityId;
  155. if (option.language) {
  156. uni.setStorageSync("language", option.language);
  157. this._i18n.locale = option.language;
  158. }
  159. uni.showLoading({
  160. title: this.$i18n.locale == 'zh' ? '加载中...' : 'Loading...',
  161. });
  162. this.seeAll = this.$i18n.locale == 'zh' ? '查看全部' : 'See All'
  163. this.title = this.$i18n.locale == 'zh' ? '机构详情' : 'InvestmentGuide Detial'
  164. this.msg = this.$i18n.locale == 'zh' ? '暂无数据' : 'No Data'
  165. setTimeout(() => {
  166. uni.hideLoading();
  167. }, 100)
  168. },
  169. created() {
  170. this.initData()
  171. },
  172. methods: {
  173. share() {
  174. this.ifShare = !this.ifShare;
  175. },
  176. i18n(data) {
  177. return this.$t('common.' + data);
  178. },
  179. async initData() {
  180. await this.getBaseFinancialInstitutionInfos()
  181. await this.getInformationList()
  182. },
  183. // tabs通知swiper切换
  184. tabsChange(index) {
  185. this.swiperCurrent = index;
  186. },
  187. // swiper-item左右移动,通知tabs的滑块跟随移动
  188. transition(e) {
  189. let dx = e.detail.dx;
  190. this.$refs.uTabs.setDx(dx);
  191. },
  192. // 由于swiper的内部机制问题,快速切换swiper不会触发dx的连续变化,需要在结束时重置状态 // swiper滑动结束,分别设置tabs和swiper的状态
  193. animationfinish(e) {
  194. let current = e.detail.current;
  195. this.$refs.uTabs.setFinishCurrent(current);
  196. this.swiperCurrent = current;
  197. this.current = current;
  198. },
  199. // 获取详情
  200. async getBaseFinancialInstitutionInfos() {
  201. let params = {
  202. pageNo: this.pageNo,
  203. language: this.$i18n.locale,
  204. baseEntityId: this.baseEntityId
  205. }
  206. const res = await this.$myRequest({
  207. url: '/project/baseFinancialInstitutionInfos/',
  208. data: {
  209. ...params
  210. }
  211. });
  212. // let res = await getBaseFinancialInstitutionInfos(params);
  213. this.detial = res.data.baseFinancialInstitutionInfos[0];
  214. this.$set(this.detial, 'photo', 'https://m.geidcp.com/api/file/pub/' + this.detial.photo);
  215. this.getFollowModelStatusByModelIdAndUserId();
  216. },
  217. // 获取产品与服务列表
  218. async getInformationList() {
  219. let params = {
  220. businessType: 'financial_institutions',
  221. businessId: this.detial.baseEntityId,
  222. language: this.$i18n.locale.toLocaleUpperCase(),
  223. }
  224. const res = await this.$myRequest({
  225. url: '/cms/cmsInformationViews/getInformationList/',
  226. data: {
  227. ...params
  228. }
  229. });
  230. // let res = await getInformationList(params);
  231. if (res.data.allDataList.length > 0) {
  232. this.tabs[0]['list'] = res.data['1']; //产品与服务
  233. this.tabs[1]['list'] = res.data['2']; //投融资案例
  234. this.infoList = res.data['3']; //机构动态
  235. }
  236. },
  237. //格式化日期
  238. publishDate(timenumber) {
  239. return new Date(parseInt(timenumber)).toLocaleDateString().replace(new RegExp(/\//, 'mg'), '-');
  240. },
  241. // scroll-view到底部加载更多
  242. onreachBottom() {
  243. },
  244. toShowDetial(item) {
  245. uni.setStorageSync('detialInfo', item)
  246. uni.navigateTo({
  247. url: '/pages/financialService/financialOrgans/organsInfoDetial'
  248. })
  249. },
  250. // 是否被关注
  251. async getFollowModelStatusByModelIdAndUserId() {
  252. let res = await this.$myRequest({
  253. url: '/op/basePortalModelFollowInfos/followModelStatusByModelIdAndUserId',
  254. data: {
  255. modelId: this.baseEntityId,
  256. modelType: this.modelType,
  257. userId: this.userId
  258. }
  259. })
  260. this.followed = res.data;
  261. },
  262. // 关注或取消关注
  263. async saveFollowModel(flag) {
  264. if (this.token.length <= 7) {
  265. uni.navigateTo({
  266. url: '/pages/public/login?back=1'
  267. })
  268. } else {
  269. let [type, msg, followfailmsg] = [];
  270. if (!flag) {
  271. type = "follow";
  272. msg = this.$i18n.locale == 'zh' ? '关注成功' : 'fowllow success'
  273. followfailmsg = this.$i18n.locale == 'zh' ? '关注失败' : 'fowllow fail'
  274. } else {
  275. type = "unfollow"
  276. msg = this.$i18n.locale == 'zh' ? '取消关注成功' : 'cancel fowllow success'
  277. followfailmsg = this.$i18n.locale == 'zh' ? '取消关注成功关注失败' : 'cnacel fowllow fail'
  278. }
  279. let res = await this.$myRequest({
  280. url: '/op/basePortalModelFollowInfos/followModel',
  281. method: 'post',
  282. headers: {
  283. token: this.token
  284. },
  285. data: {
  286. modelId: this.baseEntityId,
  287. modelType: this.modelType,
  288. userId: this.userId,
  289. followType: type,
  290. }
  291. })
  292. if (!flag) {
  293. if (res.status == '200' && res.msg == 'ok') {
  294. this.$refs.uToast.show({
  295. title: msg,
  296. type: 'success'
  297. })
  298. this.followed = !this.followed;
  299. } else this.$refs.uToast.show({
  300. title: followfailmsg,
  301. type: 'error'
  302. })
  303. } else {
  304. if (res.status == '200' && res.msg == 'ok') {
  305. this.$refs.uToast.show({
  306. title: msg,
  307. type: 'success'
  308. })
  309. this.followed = !this.followed;
  310. } else this.$refs.uToast.show({
  311. title: followfailmsg,
  312. type: 'error'
  313. })
  314. }
  315. }
  316. },
  317. //点击查看全部
  318. showAll() {
  319. this.flag = true
  320. }
  321. }
  322. }
  323. </script>
  324. <style lang="scss" scoped>
  325. /deep/ .uni-swiper-wrapper {
  326. min-height: 550upx !important;
  327. }
  328. /deep/ .u-tabs-scroll-box {
  329. display: flex;
  330. justify-content: space-around;
  331. }
  332. .organsDetial {
  333. background: #fefefe;
  334. .line5 {
  335. width: 100%;
  336. height: 10upx;
  337. background: #eee;
  338. }
  339. .banner {
  340. position: relative;
  341. // height: 340upx;
  342. .bannerimg {
  343. display: block;
  344. width: 100%;
  345. height: 100%;
  346. }
  347. }
  348. .headInfo {
  349. padding: 3%;
  350. .title {
  351. // height:80upx;
  352. // line-height:80upx;
  353. font-weight: 600;
  354. font-size: 30upx;
  355. color: #666;
  356. }
  357. .web,
  358. .address {
  359. height: 50upx;
  360. line-height: 50upx;
  361. display: flex;
  362. .label {
  363. width: 90upx;
  364. }
  365. .text {
  366. flex: 1;
  367. }
  368. }
  369. .des {
  370. // display:flex;
  371. margin-top: 20upx;
  372. .label {
  373. float: left;
  374. max-width: 200upx;
  375. }
  376. .text {
  377. .more {
  378. float: right;
  379. color: #2979FF;
  380. }
  381. .introduct1 {
  382. height: 120upx;
  383. display: inline-block;
  384. display: -webkit-box;
  385. -webkit-box-orient: vertical;
  386. -webkit-line-clamp: 3;
  387. overflow: hidden;
  388. text-overflow: ellipsis;
  389. }
  390. // .introduct2{
  391. // display:inline-block;
  392. // }
  393. // flex:1;
  394. // color:#666;
  395. }
  396. }
  397. }
  398. .tab {
  399. .tabtitle {
  400. width: 100%;
  401. padding: 0 3%;
  402. height: 80upx;
  403. display: flex;
  404. align-items: center;
  405. justify-content: space-around;
  406. .item {
  407. width: 40%;
  408. border-bottom: 2upx solid transparent;
  409. text-align: center;
  410. line-height: 80upx;
  411. &.active {
  412. color: #007AFF;
  413. border-bottom: 4upx solid #007AFF;
  414. }
  415. }
  416. }
  417. .tabcontent {
  418. padding: 0 3%;
  419. min-height: 550upx;
  420. border-top: 1px solid #eee;
  421. margin-top: 1px;
  422. .page {
  423. .pageitem {
  424. border-bottom: 2upx solid #eee;
  425. margin: 16upx 0;
  426. padding: 2% 0;
  427. .label {
  428. color: #666;
  429. }
  430. .date {
  431. color: #aaa;
  432. font-size: 20upx;
  433. }
  434. &:last-of-type {
  435. border: none;
  436. }
  437. }
  438. }
  439. }
  440. }
  441. .nodata {
  442. height: 200upx;
  443. line-height: 200upx;
  444. text-align: center;
  445. color: #aaa;
  446. }
  447. .dynamic {
  448. padding: 3%;
  449. width: 100%;
  450. .zoneTitle {
  451. height: 100upx;
  452. line-height: 100upx;
  453. font-weight: bold;
  454. position: relative;
  455. margin-left: 10upx;
  456. color: #666;
  457. &:before {
  458. content: "";
  459. width: 6upx;
  460. height: 40upx;
  461. background: #04e;
  462. position: absolute;
  463. left: -10upx;
  464. top: 50%;
  465. margin-top: -22upx;
  466. }
  467. }
  468. .infoList {
  469. .item {
  470. display: flex;
  471. margin: 20upx 0;
  472. border-bottom: 1px solid #eee;
  473. .thumb {
  474. width: 200upx;
  475. position: relative;
  476. overflow: hidden;
  477. margin-right: 20upx;
  478. .thumbimg {
  479. display: block;
  480. width: 100%;
  481. margin-top: 10upx;
  482. }
  483. }
  484. .info {
  485. flex: 1;
  486. .title {
  487. margin-bottom: 10upx;
  488. }
  489. .date {
  490. font-size: 20upx;
  491. color: #aaa;
  492. margin-bottom: 10upx;
  493. }
  494. }
  495. }
  496. }
  497. }
  498. }
  499. </style>