guest.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462
  1. <template>
  2. <page-layout class="guest-detail">
  3. <nav-bar title="演讲嘉宾" @init="onInitNavbar"></nav-bar>
  4. <u-scroll-view>
  5. <view class="main-container" :class="{'loading':!init,'loaded':init}">
  6. <view class="activity-head">
  7. <view class="activity-title">{{ meetingInfo['title'] }}</view>
  8. <view class="activity-time">
  9. {{ meetingInfo['time'] }} | {{ meetingInfo['address'] }}
  10. </view>
  11. <!-- <view class="activity-action">
  12. <button open-type="share" :plain="true">
  13. <view>
  14. <view class="iconfont icon-zhuanfa"></view>
  15. <view>分享</view>
  16. </view>
  17. </button>
  18. <view @click="onCollect(meetingInfo)">
  19. <view v-if="meetingInfo.is_collect" class="iconfont icon-favourites-filled-star-symbol active"></view>
  20. <view v-else class="iconfont icon-Favourites-Add-Large"></view>
  21. <view>收藏</view>
  22. </view>
  23. </view>-->
  24. </view>
  25. <view class="activity-guest-list">
  26. <template v-for="(item, index) in meetingInfo['speech_schedule']">
  27. <template
  28. v-if="item['expand_content'] && item['expand_content']['schedule'] && item['expand_content']['schedule']['value']">
  29. <view class="activity-guest-item">
  30. <view class="activity-guest-title-1">演讲嘉宾</view>
  31. <view class="activity-guest" v-for="(speaker_item,child_index) in item['expand_content']['schedule']['value']"
  32. :key="child_index">
  33. <view class="activity-guest-avatar">
  34. <image :src="speaker_item[0]['value']" :alt="speaker_item[0]['alt']" mode="aspectFill"/>
  35. </view>
  36. <view class="activity-guest-info">
  37. <view class="activity-guest-name">{{ speaker_item[1]['value'] }}</view>
  38. <view class="activity-guest-alias">{{ speaker_item[2]['value'] }}</view>
  39. <van-collapse :value="activeIndex" @change="(e) => onGuestCollapseChange(e, index,child_index)">
  40. <van-collapse-item :title="speaker_item[3]['value']" :name="index + '-' + child_index">
  41. <text>
  42. {{ speaker_item[3]['value'] }}
  43. </text>
  44. </van-collapse-item>
  45. </van-collapse>
  46. </view>
  47. </view>
  48. <view class="activity-guest-title-2">演讲时间与主题</view>
  49. <view class="activity-guest-time">
  50. {{item.time}}
  51. </view>
  52. <van-collapse class="subject-collapse" :value="item.active" @change="(e) => onSubjectCollapseChange(e, index)">
  53. <van-collapse-item :title="item.description" :name="item.title">
  54. <text class="description">{{item.description}}</text>
  55. </van-collapse-item>
  56. </van-collapse>
  57. </view>
  58. </template>
  59. </template>
  60. </view>
  61. <view class="activity-operation">
  62. <!-- <view class="activity-views"></view>-->
  63. <view class="activity-action">
  64. <button open-type="share" :plain="true">
  65. <view>
  66. <view class="iconfont icon-zhuanfa"></view>
  67. <view>分享</view>
  68. </view>
  69. </button>
  70. <view @click="onCollect(meetingInfo)">
  71. <view v-if="meetingInfo.is_collect" class="iconfont icon-favourites-filled-star-symbol active"></view>
  72. <view v-else class="iconfont icon-Favourites-Add-Large"></view>
  73. <view>收藏</view>
  74. </view>
  75. </view>
  76. </view>
  77. </view>
  78. </u-scroll-view>
  79. </page-layout>
  80. </template>
  81. <script>
  82. import NavBar from '@/components/layout/nav-bar'
  83. import UScrollView from '@/components/common/u-scroll-view'
  84. import VanCollapse from '@/wxcomponents/vant/collapse/index'
  85. import VanCollapseItem from '@/wxcomponents/vant/collapse-item/index'
  86. import PageLayout from "@/components/layout/page-layout";
  87. import {getMeetingInfo} from "@/api/meeting";
  88. import {returnTimeFormat} from "@/utils";
  89. import {meetingCancelCollect, meetingCollect} from "@/api/exhibitor";
  90. export default {
  91. options: {
  92. styleIsolation: 'shared'
  93. },
  94. components: {
  95. PageLayout,
  96. NavBar,
  97. UScrollView,
  98. VanCollapse,
  99. VanCollapseItem
  100. },
  101. computed: {},
  102. onLoad(options) {
  103. this.id = options.id
  104. this.getActiveInfo()
  105. },
  106. data() {
  107. return {
  108. init: false,
  109. id: 0,
  110. favorited: true,
  111. activeIndex: '',
  112. guests: [{
  113. subjectCollapse: [],
  114. descCollapse: []
  115. }, {
  116. subjectCollapse: [],
  117. descCollapse: []
  118. }, {
  119. subjectCollapse: [],
  120. descCollapse: []
  121. }],
  122. meetingInfo: {},
  123. expand_content: {}
  124. }
  125. },
  126. created() {
  127. },
  128. methods: {
  129. onCollect(item) { // 收藏
  130. if (!this.checkAuth('/pages/activity/guest?id='+ this.id)) {
  131. return
  132. }
  133. if (item.is_collect === 1) {
  134. meetingCancelCollect({ id: item.id }).then(res => {
  135. if (res.code === 0) {
  136. this.meetingInfo.is_collect = 0
  137. }
  138. })
  139. } else {
  140. meetingCollect({ id: item.id }).then(res => {
  141. if (res.code === 0) {
  142. this.meetingInfo.is_collect = 1
  143. }
  144. })
  145. }
  146. },
  147. getActiveInfo() {
  148. this.showLoading()
  149. getMeetingInfo({id: this.id}).then(res => {
  150. this.meetingInfo = res.data
  151. this.meetingInfo.time = returnTimeFormat(res.data.start_date, res.data.end_date)
  152. this.expand_content = res.data.expand_content
  153. this.meetingInfo.speech_schedule.forEach(item=>{
  154. item.active = []
  155. item.time = returnTimeFormat(item.start_date, item.end_date)
  156. item['expand_content']['schedule']['value'].forEach(child_item=>{
  157. child_item.active = []
  158. })
  159. })
  160. this.hideLoading()
  161. setTimeout(()=>{
  162. this.init = true
  163. },500)
  164. // this.meetingInfo.content = convertRichTextToWXML(res.data.content)
  165. })
  166. },
  167. onSubjectCollapseChange(activeNames, index) {
  168. this.meetingInfo['speech_schedule'][index].active = activeNames
  169. this.$forceUpdate()
  170. },
  171. onGuestCollapseChange(activeNames, index,child_index) {
  172. this.activeIndex = activeNames
  173. }
  174. }
  175. }
  176. </script>
  177. <style lang="scss">
  178. .main-container {
  179. transition: .1s ease-in-out;
  180. &.loading {
  181. opacity: 0;
  182. }
  183. &.loaded {
  184. opacity: 1;
  185. }
  186. }
  187. .guest-detail {
  188. .van-collapse-item__content {
  189. padding-top: 0 !important;
  190. }
  191. .activity-head {
  192. position: relative;
  193. font-weight: normal;
  194. font-size: $fontSize6;
  195. color: #333333;
  196. .activity-title {
  197. font-weight: bold;
  198. }
  199. .activity-time {
  200. margin-top: 25rpx;
  201. font-size: $fontSize2;
  202. }
  203. .activity-action {
  204. /*position: absolute;
  205. bottom: 0;
  206. right: 0;*/
  207. margin-left: auto;
  208. margin-top: 10rpx;
  209. }
  210. }
  211. .activity-operation {
  212. @include display-flex-between;
  213. //margin-top: 32rpx;
  214. position: fixed;
  215. width: 100%;
  216. left: 0;
  217. bottom: 0;
  218. padding: 40rpx 0;
  219. padding: 40rpx 30rpx;
  220. background-color: #ffffff;
  221. }
  222. .activity-views {
  223. font-size: $fontSize2;
  224. color: #555555;
  225. }
  226. .activity-action {
  227. display: grid;
  228. grid-template-columns: 1fr 1fr;
  229. font-size: $fontSize3;
  230. color: #555555;
  231. grid-gap: 10rpx;
  232. width: 100%;
  233. & > view {
  234. display: flex;
  235. align-items: center;
  236. justify-content: center;
  237. }
  238. .iconfont {
  239. font-size: 30rpx;
  240. margin-right: 6rpx;
  241. }
  242. .icon-Favourites-Add-Large {
  243. &.active {
  244. &::before {
  245. content: '\e669';
  246. }
  247. color: $textActionColor;
  248. }
  249. }
  250. button {
  251. font-size: $fontSize3;
  252. white-space: nowrap;
  253. line-height: inherit;
  254. background-color: transparent;
  255. border: none;
  256. view {
  257. display: flex;
  258. align-items: center;
  259. font-size: $fontSize3;
  260. }
  261. }
  262. }
  263. .activity-guest-list {
  264. display: grid;
  265. grid-template-columns: 1fr;
  266. grid-row-gap: 41rpx;
  267. margin-top: 30rpx;
  268. }
  269. .activity-guest-item {
  270. padding: 27rpx 18rpx;
  271. background-color: #FFFFFF;
  272. box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0, 0, 0, 0.15);
  273. border-radius: 10rpx;
  274. .van-hairline--top-bottom:after {
  275. opacity: 0;
  276. }
  277. .van-cell {
  278. padding: 0;
  279. line-height: inherit;
  280. background-color: transparent;
  281. &:after {
  282. content: unset;
  283. }
  284. }
  285. .van-cell {
  286. }
  287. .van-collapse {
  288. margin-top: 35rpx;
  289. }
  290. .van-collapse-item__title--expanded .van-cell__title {
  291. visibility: hidden;
  292. }
  293. .subject-collapse {
  294. .description {
  295. line-height: 1.6;
  296. }
  297. .van-collapse-item {
  298. border-radius: 6px;
  299. border: 1px solid #E3E9F1;
  300. position: relative;
  301. }
  302. .van-collapse-item__title--expanded {
  303. &:before {
  304. content:'';
  305. width: 100%;
  306. height: 100%;
  307. border: 4px solid rgba(232,116,0,0.34);
  308. position: absolute;
  309. border-radius: 6rpx;
  310. left: -8rpx;
  311. top: -8rpx;
  312. }
  313. }
  314. }
  315. .van-icon-arrow {
  316. font-size: $fontSize2;
  317. }
  318. .van-collapse-item__content {
  319. padding: 0;
  320. font-size: $fontSize2;
  321. background-color: transparent;
  322. }
  323. .van-cell__left-icon-wrap, .van-cell__right-icon-wrap {
  324. height: auto;
  325. }
  326. .van-cell__title {
  327. width: 0;
  328. background-color: transparent;
  329. font-size: $fontSize2;
  330. color: #333333;
  331. @include text-ellipsis;
  332. }
  333. }
  334. .subject-collapse {
  335. border-radius: 6rpx;
  336. background-color: #FFFFFF;
  337. &.van-collapse-expanded {
  338. .van-collapse {
  339. border-color: rgba(232, 116, 0, 0.34);
  340. }
  341. .van-cell {
  342. border: 1rpx dotted rgba(0, 0, 0, 0.15);
  343. }
  344. }
  345. .van-collapse {
  346. border: 4rpx solid #FFFFFF;
  347. }
  348. .van-collapse-item__title--expanded {
  349. .van-cell__title {
  350. color: #E87400;
  351. font-weight: bold;
  352. visibility: visible;
  353. }
  354. .van-icon-arrow {
  355. color: #E87400;
  356. }
  357. }
  358. .van-cell {
  359. padding: 31rpx 28rpx;
  360. }
  361. .van-cell__title {
  362. font-size: $fontSize3;
  363. }
  364. .van-collapse-item__content {
  365. font-size: $fontSize2;
  366. color: #535353;
  367. line-height: 30rpx;
  368. padding: 31rpx 28rpx 23rpx 28rpx;
  369. }
  370. }
  371. .activity-guest-title-1, .activity-guest-title-2 {
  372. font-size: $fontSize4;
  373. font-weight: bold;
  374. color: #323232;
  375. }
  376. .activity-guest-title-2 {
  377. margin-top: 39rpx;
  378. }
  379. .activity-guest-time {
  380. margin-top: 20rpx;
  381. font-size: $fontSize2;
  382. color: #333333;
  383. }
  384. .activity-guest {
  385. display: flex;
  386. background-color: #F6F6F6;
  387. border-radius: 10rpx;
  388. margin-top: 23rpx;
  389. padding: 28rpx;
  390. .activity-guest-info {
  391. flex: 1;
  392. }
  393. .activity-guest-name {
  394. font-weight: bold;
  395. font-size: $fontSize3;
  396. color: #333333;
  397. line-height: 35rpx;
  398. }
  399. .activity-guest-alias {
  400. margin-top: 8rpx;
  401. font-size: $fontSize1;
  402. color: #7D7D7D;
  403. line-height: 24rpx;
  404. letter-spacing: 2rpx;
  405. }
  406. .activity-guest-avatar {
  407. width: 96rpx;
  408. height: 96rpx;
  409. margin-right: 32rpx;
  410. border-radius: 50%;
  411. overflow: hidden;
  412. flex-shrink: 0;
  413. }
  414. }
  415. }
  416. </style>