meetingDetail.vue 8.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333
  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="share">
  12. <u-icon name="share-fill" color="white" size="50"></u-icon>
  13. </view>
  14. </view>
  15. </uni-nav-bar>
  16. <!-- 图片 -->
  17. <view class="topimage" :style="{'margin-top': systemInfo.statusBarHeight+'px'}" style="padding: 32upx;">
  18. <image :src="websiteUrl + meetingListDetail.meetingPicUrl +'?custom=600_390'" mode=""></image>
  19. </view>
  20. <!-- 会议介绍 -->
  21. <view class="meeting-intry" :class="{'meeting-intry-load':loadflag}" :style="{color:fontColor}">
  22. <view style="display: flex;justify-content: space-between;margin-bottom: 20rpx;">
  23. <view class="font-tb">
  24. {{moment(meetingListDetail.meetingStartDate).format('YYYY'+'年'+'MM'+'月'+'DD'+'日')}}
  25. </view>
  26. <view class="font-tb">{{meetingListDetail.meetingPlace}}</view>
  27. </view>
  28. <view style="font-size: 40rpx;font-weight: 700;">{{meetingListDetail.meetingName}}</view>
  29. <view class="font-centre">{{meetingListDetail.meetingIntroduction}}</view>
  30. <!-- 加载更多 -->
  31. <view class="load" @click="loadMore" v-if="loadbutton">{{loadtext}}</view>
  32. </view>
  33. <!-- 会议议程 -->
  34. <view class="agenda" :style="{color:fontColor}">
  35. <view class="toptext">会议议程</view>
  36. <!-- 列表部分 -->
  37. <view class="listBox" v-html="meetingListDetail.meetingYicheng"></view>
  38. </view>
  39. <!-- 底部报名按钮 -->
  40. <view v-if="meetingListDetail.meetingIsShow=='01' && !isMeetingOver(meetingListDetail.meetingEndDate)">
  41. <view class="bottomBtn" v-if="meetingListDetail.meetingMainFormDict=='01'">
  42. <button v-if="meetingListDetail.isShowZhOnsite=='Yes'" class="bottomBtn_test" type="default"
  43. style="background-color: #366092;" @click="toLocalApply(myId)">现场参会报名</button>
  44. </view>
  45. <view class="bottomBtn" v-else-if="meetingListDetail.meetingMainFormDict=='02'">
  46. <button v-if="meetingListDetail.isShowZhOnline=='Yes'" class="bottomBtn_test" type="default"
  47. style="background-color: #03B6B3;" @click="toNetApply(myId)">线上参会报名</button>
  48. </view>
  49. <view class="bottomBtn" v-else-if="meetingListDetail.meetingMainFormDict=='03'">
  50. <button v-if="meetingListDetail.isShowZhOnsite=='Yes'" class="bottomBtn_test" type="default"
  51. style="background-color: #366092;" @click="toLocalApply(myId)">现场参会报名</button>
  52. <button v-if="meetingListDetail.isShowZhOnline=='Yes'" class="bottomBtn_test" type="default"
  53. style="background-color: #03B6B3;" @click="toNetApply(myId)">线上参会报名</button>
  54. </view>
  55. </view>
  56. <!-- title 分享的分类 summary 分享的介绍 href 分享的地址
  57. 8.8.20.112:19001
  58. -->
  59. <share v-show="ifShare == true" :show="ifShare" @closeShare="share" :title="'会议服务'"
  60. :summary="meetingListDetail.meetingName"
  61. :href="'https://m.geidcp.com/#/pages/conference/meetingIndexCh/meetingDetail?' + 'id=' + meetingListDetail.id"
  62. :imageUrl="websiteUrl + meetingListDetail.meetingPicUrl +'?custom=600_390'">
  63. </share>
  64. </view>
  65. </template>
  66. <script>
  67. import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue";
  68. import uniIcons from "@/components/uni-icons/uni-icons.vue";
  69. import share from '@/pages/conference/share.vue';
  70. export default {
  71. data() {
  72. return {
  73. meetingListDetail: {},
  74. myId: '',
  75. backgroundcolorApp: '', //背景色
  76. navbarColor: '', //导航栏背景色
  77. fontColor: '', //字体颜色
  78. loadflag: false, //加载全部样式flag
  79. loadtext: '加载更多', //加载更多按钮的文字
  80. ifShare: false, //分享弹出
  81. loadbutton: true, //加载按钮flag
  82. }
  83. },
  84. components: {
  85. uniIcons,
  86. share,
  87. },
  88. methods: {
  89. async getList(id) {
  90. const res = await this.$myRequest({
  91. url: '/meeting/meetingOutInfos/findMeetingDetail/',
  92. data: {
  93. id: id
  94. },
  95. header: {
  96. ANON: true
  97. }
  98. });
  99. // this.bannerData = []
  100. // console.log(opt)
  101. this.backgroundcolorApp = res.data.basicInfo.backgroundcolorForApp //背景色
  102. this.navbarColor = res.data.basicInfo.backgroundcolorForApp //导航栏背景色
  103. if (!this.backgroundcolorApp) {
  104. this.fontColor = '#333333'
  105. this.navbarColor = '#3387ff'
  106. }
  107. this.meetingListDetail = res.data.basicInfo
  108. if (this.meetingListDetail.meetingIntroduction.length < 280) {
  109. this.loadbutton = false
  110. }
  111. },
  112. navigateBack() {
  113. uni.navigateBack();
  114. },
  115. toLocalApply(id) {
  116. let user = uni.getStorageSync('user');
  117. let token = uni.getStorageSync('Auth-Token');
  118. let path = "/pages/conference/conferenceOfflineZh/conference-offline-zh?id=" + id;
  119. if (user && token) {
  120. uni.navigateTo({
  121. url: path
  122. })
  123. } else {
  124. uni.setStorageSync('pathReminder', path)
  125. uni.showToast({
  126. title: '请先登录',
  127. icon: 'none'
  128. })
  129. setTimeout(() => {
  130. uni.navigateTo({
  131. url: "/pages/public/login?back=1&language=zh"
  132. })
  133. }, 1000)
  134. }
  135. },
  136. toNetApply(id) {
  137. let user = uni.getStorageSync('user');
  138. let token = uni.getStorageSync('Auth-Token');
  139. let path = "/pages/conference/conferenceOfflineZh/conference-offline-zh-other?id=" + id;
  140. if (user && token) {
  141. uni.navigateTo({
  142. url: path
  143. })
  144. } else {
  145. uni.setStorageSync('pathReminder', path)
  146. uni.showToast({
  147. title: '请先登录',
  148. icon: 'none'
  149. })
  150. setTimeout(() => {
  151. uni.navigateTo({
  152. url: "/pages/public/login?back=1&language=zh"
  153. })
  154. }, 1000)
  155. }
  156. },
  157. // 判断会议是否结束
  158. isMeetingOver(t) {
  159. var ct = Date.parse(new Date());
  160. if (ct - t > 0) {
  161. return true;
  162. } else {
  163. return false;
  164. }
  165. },
  166. //加载更多按钮
  167. loadMore() {
  168. this.loadflag = !this.loadflag
  169. if (!this.loadflag) {
  170. this.loadtext = '加载更多'
  171. } else {
  172. this.loadtext = '收起'
  173. }
  174. },
  175. //分享
  176. share() {
  177. this.ifShare = !this.ifShare;
  178. // console.log("伞兵",typeof this.meetingListDetail.meetingIntroduction,this.meetingListDetail.meetingIntroduction.length)
  179. },
  180. },
  181. onLoad(option) {
  182. // console.log("option.id", option.id)
  183. this.myId = option.id
  184. this.getList(option.id)
  185. },
  186. onShow() {
  187. // console.log('====',this.meetingListDetail)
  188. // console.log("伞兵",typeof this.meetingListDetail.meetingIntroduction,this.meetingListDetail.meetingIntroduction.length)
  189. },
  190. }
  191. </script>
  192. <style>
  193. page {
  194. /* background-color: #ffffff; */
  195. }
  196. .iconsback {
  197. width: 30px;
  198. height: 30px;
  199. line-height: 30px;
  200. text-align: center;
  201. position: fixed;
  202. top: 72rpx;
  203. left: 20rpx;
  204. z-index: 1;
  205. background: rgba(200, 200, 200, .7);
  206. border-radius: 50%;
  207. }
  208. .iconsback:active {
  209. background: rgba(200, 200, 200, 1);
  210. }
  211. .topimage {
  212. width: 100%;
  213. height: 460rpx;
  214. }
  215. .topimage image {
  216. width: 100%;
  217. height: 100%;
  218. }
  219. .meeting-intry {
  220. position: relative;
  221. width: 686rpx;
  222. height: 900rpx;
  223. overflow: hidden;
  224. margin: auto;
  225. margin-bottom: 40rpx;
  226. padding: 42rpx 0rpx;
  227. /*background-color: rgb(0,0,0,0.2);*/
  228. color: #000;
  229. border-radius: 24rpx;
  230. }
  231. .meeting-intry-load {
  232. height: auto;
  233. }
  234. /* 文字样式 */
  235. .font-tb {
  236. font-size: 24rpx;
  237. }
  238. .font-centre {
  239. font-size: 28rpx;
  240. text-indent: 2em;
  241. line-height: 56rpx;
  242. margin: 20rpx 0;
  243. }
  244. /* 加载全部内容 */
  245. .load {
  246. width: 100%;
  247. height: 30px;
  248. position: absolute;
  249. bottom: 0px;
  250. left: 0px;
  251. /*background: rgb(134 134 134);*/
  252. background: #fff;
  253. text-align: center;
  254. font-size: 20px;
  255. color: rgba(0, 0, 0, .37);
  256. }
  257. /* 会议议程部分样式 */
  258. .agenda {
  259. position: relative;
  260. width: 686rpx;
  261. margin: auto;
  262. margin-bottom: 40rpx;
  263. padding: 50rpx 30rpx 50rpx 30rpx;
  264. border-top: 2px solid #DCDCDC;
  265. /*background-color: rgb(0,0,0,0.2);*/
  266. color: #000;
  267. border-radius: 24rpx;
  268. overflow: hidden;
  269. }
  270. .toptext {
  271. font-size: 40rpx;
  272. font-weight: 700;
  273. margin-bottom: 20rpx;
  274. text-align: center;
  275. font-style: italic;
  276. /* color: #3c6a0b; */
  277. /* color: #000000; */
  278. }
  279. .icon-arrowdown {
  280. position: absolute;
  281. top: -30rpx;
  282. right: 26rpx;
  283. width: 50rpx;
  284. height: 50rpx;
  285. }
  286. .top-arrowdown {
  287. position: absolute;
  288. top: -16rpx;
  289. left: 0;
  290. }
  291. .bottomBtn {
  292. display: flex;
  293. position: fixed;
  294. bottom: 0;
  295. width: 100%;
  296. height: 110rpx;
  297. border: 0px;
  298. }
  299. .bottomBtn_test {
  300. align-content: space-between;
  301. width: 100%;
  302. height: 100%;
  303. font-size: 48rpx;
  304. text-align: center;
  305. line-height: 110rpx;
  306. color: #FFFFFF;
  307. /* border-radius: 30px;
  308. margin-bottom: 10px; */
  309. }
  310. </style>