meetingOver.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474
  1. <template>
  2. <!--<view style="padding-bottom: 110rpx;" :style="{ backgroundColor:backgroundcolorApp }">-->
  3. <view style="padding-bottom: 110rpx;background-color: #fff;">
  4. <!-- 顶部导航栏 -->
  5. <!--<uni-nav-bar status-bar=true fixed=true left-icon="arrowleft" :background-color="navbarColor" color="#ffffff" @clickLeft="navigateBack">-->
  6. <uni-nav-bar status-bar=true fixed=true left-icon="arrowleft" :background-color="'#538BE7'" color="#ffffff"
  7. @clickLeft="navigateBack">
  8. <text slot="default" style="text-align: center; flex: 1; font-size: 18px; font-weight: bold;">会议详情</text>
  9. <!-- 反馈和分享按钮 -->
  10. <view class="navbar-right" slot="right">
  11. <view class="message-box right-item" @click="showMenu">
  12. <u-icon name="share-fill" color="white" size="50"></u-icon>
  13. </view>
  14. </view>
  15. </uni-nav-bar>
  16. <!-- 点击分享按钮后出现的按钮 -->
  17. <view class="menu" :class="{ 'menuOn':menuflag }">
  18. <button @click="toFeedback(feedbackId)" class="sunmit-btn" hover-class="button-hover">反馈</button>
  19. <button @click="share" class="sunmit-btn" hover-class="button-hover">分享</button>
  20. </view>
  21. <!-- 图片 -->
  22. <view class="topimage" style="padding: 32upx;">
  23. <image :src="websiteUrl + meetingListDetail.meetingPicUrl + '?custom=600_390'" mode=""></image>
  24. </view>
  25. <!-- 会议介绍 -->
  26. <view class="meeting-intry" :class="{'meeting-intry-load':loadflag}" :style="{color:fontColor}">
  27. <view style="display: flex;justify-content: space-between;margin-bottom: 20rpx;">
  28. <view class="font-tb">
  29. {{moment(meetingListDetail.meetingStartDate).format('YYYY'+'年'+'MM'+'月'+'DD'+'日')}}
  30. </view>
  31. <view class="font-tb">{{meetingListDetail.meetingPlace}}</view>
  32. </view>
  33. <view style="font-size: 40rpx;font-weight: 700;">{{meetingListDetail.meetingName}}</view>
  34. <view class="font-centre">{{meetingListDetail.meetingIntroduction}}</view>
  35. <!-- 加载更多 -->
  36. <view class="load" @click="loadMore" v-if="loadbutton">{{loadtext}}</view>
  37. </view>
  38. <!-- 会议议程 -->
  39. <view class="agenda" v-if="conferenceAgenda" :style="{color:fontColor}">
  40. <view class="toptext">会议议程</view>
  41. <!-- <view class="icon-arrowdown">
  42. <uni-icons type="arrowdown" size="25" class="top-arrowdown" color="#aaaaaa"></uni-icons>
  43. <uni-icons type="arrowdown" size="25" color="#aaaaaa"></uni-icons>
  44. </view> -->
  45. <!-- 列表部分 -->
  46. <view class="listBox" v-html="meetingListDetail.meetingYicheng"></view>
  47. </view>
  48. <!-- 会议相关 -->
  49. <!-- 相关链接 -->
  50. <view class="agenda" v-if="link_flag" :style="{color:fontColor}">
  51. <view class="toptext">相关材料</view>
  52. <view v-for="(item,index) in meetingOutInfoFile" :key="index" @click="">
  53. <view v-for="(items,indexs) in item.list" :key="indexs" style="display: flex;margin-bottom: 20rpx;">
  54. <view style="margin-right: 15rpx;">{{++index}}</view>
  55. <view @click="download(websiteUrl+items.attachmentSavePath)" style="text-decoration: underline;">
  56. {{item.title}}
  57. </view>
  58. </view>
  59. </view>
  60. </view>
  61. <!-- 相关观点 -->
  62. <view class="agenda" v-if="view_flag" :style="{color:fontColor}">
  63. <view class="toptext">相关观点</view>
  64. <view class="viewpoint" v-for="(item,index) in meetingOutInfoGuandian" :key="index"
  65. @click="toViewpoint(item.id)">
  66. {{item.speakGuest}}
  67. </view>
  68. </view>
  69. <!-- 相关图片视频 -->
  70. <view class="agenda" v-if="img_flag" :style="{color:fontColor}">
  71. <view class="toptext">相关图片/视频</view>
  72. <view class="uni-padding-wrap">
  73. <view class="page-section swiper">
  74. <view class="page-section-spacing">
  75. <swiper class="swiper" next-margin="140rpx" :autoplay="autoplay" :interval="interval"
  76. :duration="duration">
  77. <swiper-item v-for="(item,index) in imgData">
  78. <image class="myImage" :src="websiteUrl + item + '?custom=400_260'" mode=""
  79. @click="navigateTo(item.id)"></image>
  80. </swiper-item>
  81. </swiper>
  82. </view>
  83. </view>
  84. </view>
  85. </view>
  86. <!-- 相关新闻 -->
  87. <view class="agenda" v-if="news_flag" :style="{color:fontColor}">
  88. <view class="toptext">相关新闻</view>
  89. <view style="display: flex;margin-bottom: 20rpx;" v-for="(item,index) in meetingOutInfoNews" :key="index"
  90. @click="toNewsDetail(item.id)">
  91. <view style="width: 30rpx;margin-right: 15rpx;">{{++index}}</view>
  92. <view style="text-decoration: underline;">{{item.title}}</view>
  93. </view>
  94. </view>
  95. <!-- 底部报名按钮 -->
  96. <button type="default" class="bottomBtn" disabled="true"
  97. style="background-color: #d7d7d7;color: #FFFFFF;">已结束</button>
  98. <!-- title 分享的分类 summary 分享的介绍 href 分享的地址 8.8.20.112:19001 -->
  99. <share v-show="ifShare == true" :show="ifShare" @closeShare="share" :title="'会议服务'"
  100. :summary="meetingListDetail.meetingName"
  101. :href="'https://m.geidcp.com/#/pages/conference/meetingIndexCh/meetingDetail?' + 'id=' + meetingListDetail.id"
  102. :imageUrl="websiteUrl + meetingListDetail.meetingPicUrl +'?custom=600_390'">
  103. </share>
  104. </view>
  105. </template>
  106. <script>
  107. import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue";
  108. import uniIcons from "@/components/uni-icons/uni-icons.vue";
  109. import share from '@/pages/conference/share.vue';
  110. export default {
  111. data() {
  112. return {
  113. background: ['color1', 'color2', 'color3'],
  114. // indicatorDots: true,
  115. autoplay: false,
  116. interval: 2000,
  117. duration: 500,
  118. //``````````````````````````
  119. link_flag: true, //决定相关链接是否显示
  120. view_flag: true, //决定相关观点是否显示
  121. img_flag: true, //决定相关图片是否显示
  122. news_flag: true, //决定相关新闻是否显示
  123. loadflag: false, //加载全部样式flag
  124. //``````````````````````````
  125. meetingListDetail: {},
  126. meetingOutInfoFile: {}, //相关文件链接
  127. meetingOutInfoGuandian: {}, //观点
  128. meetingOutInfoNews: {}, //新闻
  129. conferenceAgenda: true, //决定会议议程是否显示
  130. agendaData: '',
  131. imgData: [],
  132. backgroundcolorApp: '', //背景色
  133. navbarColor: '', //导航栏背景色
  134. fontColor: '', //字体颜色
  135. feedbackId: '', //传给反馈的id
  136. loadtext: '加载更多', //加载更多按钮的文字
  137. ifShare: false, //分享弹出
  138. loadbutton: true, //加载按钮flag
  139. menuflag: false, //弹出反馈和分享按钮
  140. }
  141. },
  142. components: {
  143. uniIcons,
  144. uniNavBar,
  145. share
  146. },
  147. methods: {
  148. async getList(id) {
  149. const res = await this.$myRequest({
  150. url: '/meeting/meetingOutInfos/findMeetingDetail/',
  151. data: {
  152. id: id
  153. },
  154. header: {
  155. ANON: true
  156. }
  157. });
  158. // this.bannerData = []
  159. // console.log(opt)
  160. this.backgroundcolorApp = res.data.basicInfo.backgroundcolorForApp //背景色
  161. this.navbarColor = res.data.basicInfo.backgroundcolorForApp //导航栏背景色
  162. if (!this.backgroundcolorApp) {
  163. this.fontColor = '#333333'
  164. this.navbarColor = '#3387ff'
  165. }
  166. this.meetingListDetail = res.data.basicInfo
  167. this.meetingOutInfoFile = res.data.meetingOutInfo.file.filter(item => {
  168. return item.list.length > 0 && item.title != ''
  169. })
  170. this.meetingOutInfoGuandian = res.data.meetingOutInfo.guandian
  171. this.meetingOutInfoNews = res.data.meetingOutInfo.news.filter(item => {
  172. return item.languageType == 'zh' && item.title && item.title != ''
  173. })
  174. if (res.data.meetingOutInfo.image.length) {
  175. let filterdFile = [];
  176. res.data.meetingOutInfo.image.forEach((item) => {
  177. if (item.photoType == "meeting_yicheng") {
  178. filterdFile.push(item);
  179. } else if (item.photoType == "meeting_pro_img") {
  180. item.list.forEach((_item) => {
  181. this.imgData.push(_item.attachmentSavePath);
  182. });
  183. }
  184. });
  185. if (filterdFile[0].list.length) {
  186. this.agendaData = filterdFile[0].list[0].attachmentSavePath;
  187. } else {
  188. this.agendaData = '';
  189. }
  190. } else {
  191. this.agendaData = '';
  192. this.imgData = [];
  193. }
  194. //如果当会议议程没有时,直接去掉会议议程部分
  195. if (res.data.basicInfo.meetingYicheng == '') {
  196. this.conferenceAgenda = false
  197. }
  198. if (this.meetingOutInfoFile == '') {
  199. this.link_flag = false
  200. }
  201. if (this.meetingOutInfoGuandian == '') {
  202. this.view_flag = false
  203. }
  204. if (this.imgData == '') {
  205. this.img_flag = false
  206. }
  207. if (this.meetingOutInfoNews == '') {
  208. this.news_flag = false
  209. }
  210. if (this.meetingListDetail.meetingIntroduction.length < 280) {
  211. this.loadbutton = false
  212. }
  213. },
  214. navigateBack() {
  215. uni.navigateBack();
  216. },
  217. toNewsDetail(id) {
  218. uni.navigateTo({
  219. url: "newsDetailCh?id=" + id
  220. })
  221. },
  222. toViewpoint(id) {
  223. uni.navigateTo({
  224. url: "viewpoint?id=" + id
  225. })
  226. },
  227. toFeedback(id) {
  228. let user = uni.getStorageSync('user');
  229. let token = uni.getStorageSync('Auth-Token');
  230. let path = "/pages/conference/meetingIndexCh/meetingFeedback?id=" + id;
  231. if (user && token) {
  232. uni.navigateTo({
  233. url: path
  234. })
  235. } else {
  236. uni.setStorageSync('pathReminder', path)
  237. uni.showToast({
  238. title: '请先登录',
  239. icon: 'none'
  240. })
  241. setTimeout(() => {
  242. uni.navigateTo({
  243. url: "/pages/public/login?back=1&language=zh"
  244. })
  245. }, 1000)
  246. }
  247. },
  248. download(url) {
  249. // uni.openDocument({
  250. // filePath: url,
  251. // success: function (res) {
  252. // console.log('打开文档成功');
  253. // }
  254. // });
  255. // console.log(url)
  256. // return
  257. uni.downloadFile({
  258. url: url,
  259. success: function(res) {
  260. var filePath = res.tempFilePath;
  261. uni.openDocument({
  262. filePath: filePath,
  263. success: function(res) {
  264. console.log('打开文档成功');
  265. }
  266. });
  267. }
  268. });
  269. },
  270. //加载更多按钮
  271. loadMore() {
  272. this.loadflag = !this.loadflag
  273. if (!this.loadflag) {
  274. this.loadtext = '加载更多'
  275. } else {
  276. this.loadtext = '收起'
  277. }
  278. },
  279. //分享和反馈显示按钮
  280. showMenu() {
  281. this.menuflag = !this.menuflag
  282. },
  283. //分享
  284. share() {
  285. this.ifShare = !this.ifShare;
  286. },
  287. },
  288. onLoad(option) {
  289. // console.log("option.id", option.id)
  290. this.feedbackId = option.id
  291. this.getList(option.id)
  292. },
  293. onShow() {
  294. // console.log('====',this.meetingListDetail)
  295. }
  296. }
  297. </script>
  298. <style>
  299. page {
  300. /* background-color: #6592ef; */
  301. }
  302. .topimage {
  303. width: 100%;
  304. height: 460rpx;
  305. }
  306. .topimage image {
  307. width: 100%;
  308. height: 100%;
  309. }
  310. .meeting-intry {
  311. position: relative;
  312. width: 686rpx;
  313. height: 900rpx;
  314. overflow: hidden;
  315. margin: auto;
  316. margin-bottom: 40rpx;
  317. padding: 42rpx 0rpx;
  318. /*background-color: rgb(0,0,0,0.2);*/
  319. color: #000;
  320. border-radius: 24rpx;
  321. }
  322. .meeting-intry-load {
  323. height: auto;
  324. }
  325. /* 文字样式 */
  326. .font-tb {
  327. font-size: 24rpx;
  328. }
  329. .font-centre {
  330. font-size: 28rpx;
  331. text-indent: 2em;
  332. line-height: 56rpx;
  333. margin: 20rpx 0;
  334. }
  335. /* 加载全部内容 */
  336. .load {
  337. width: 100%;
  338. height: 30px;
  339. position: absolute;
  340. bottom: 0px;
  341. left: 0px;
  342. /*background: rgb(134 134 134);*/
  343. background: #fff;
  344. text-align: center;
  345. font-size: 20px;
  346. color: rgba(0, 0, 0, .37);
  347. }
  348. /* 会议议程部分样式 */
  349. .agenda {
  350. position: relative;
  351. width: 686rpx;
  352. margin: auto;
  353. margin-bottom: 40rpx;
  354. padding: 50rpx 30rpx 50rpx 30rpx;
  355. border-top: 2px solid #DCDCDC;
  356. /*background-color: rgb(0,0,0,0.2);*/
  357. color: #000;
  358. border-radius: 24rpx;
  359. overflow: hidden;
  360. }
  361. .toptext {
  362. font-size: 40rpx;
  363. font-weight: 700;
  364. margin-bottom: 20rpx;
  365. text-align: center;
  366. font-style: italic;
  367. /* color: #3c6a0b; */
  368. }
  369. .icon-arrowdown {
  370. position: absolute;
  371. top: -30rpx;
  372. right: 26rpx;
  373. width: 50rpx;
  374. height: 50rpx;
  375. }
  376. .top-arrowdown {
  377. position: absolute;
  378. top: -16rpx;
  379. left: 0;
  380. }
  381. .bottomBtn {
  382. position: fixed;
  383. bottom: 0;
  384. width: 100%;
  385. height: 110rpx;
  386. font-size: 48rpx;
  387. text-align: center;
  388. line-height: 110rpx;
  389. border: 0px;
  390. }
  391. .viewpoint {
  392. display: inline-block;
  393. margin: 10rpx 20rpx 24rpx 0;
  394. padding: 10rpx 28rpx;
  395. background-color: #99aae8;
  396. font-size: 14px;
  397. border: 1px transparent solid;
  398. border-image: linear-gradient(to top, #d00d0d, #040101) 1 10;
  399. }
  400. /* 轮播图部分 */
  401. image {
  402. width: 230px;
  403. height: 160px;
  404. }
  405. .sunmit-btn {
  406. width: 57px;
  407. height: 30px;
  408. line-height: 30px;
  409. font-size: 14px;
  410. /* color: #FFFFFF; */
  411. /* background-color: #2d79e5; */
  412. background-color: #FFFFFF;
  413. padding: 0 10px;
  414. border-radius: 18px;
  415. }
  416. .button-hover[type=submit] {
  417. opacity: .75;
  418. transform: scale(0.95, 0.95);
  419. }
  420. .menu {
  421. /* background-color: pink; */
  422. width: 132rpx;
  423. height: 0rpx;
  424. position: fixed;
  425. top: 100rpx;
  426. right: 10rpx;
  427. overflow: hidden;
  428. z-index: 9;
  429. transition: all 0.3s ease-in-out 0s;
  430. opacity: 0;
  431. transform: scale(0);
  432. }
  433. .menuOn {
  434. height: auto;
  435. opacity: 1;
  436. transform: scale(1);
  437. }
  438. .menu>button {
  439. margin-bottom: 10rpx;
  440. }
  441. </style>