activity.vue 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592
  1. <template>
  2. <view class="activity-page">
  3. <van-sticky style="background: #fff">
  4. <!-- <view class="search-wrap">
  5. <van-search
  6. shape="round"
  7. :value="searchVal"
  8. placeholder="搜索您想要的商品名"
  9. @change="searchValChange"
  10. @search="onSearch"
  11. @clear="onClearSearch"
  12. />
  13. </view> -->
  14. <view class="flex tabs-wrap" @click="tabChange">
  15. <view
  16. :class="['tab-item', tabActive === '1' && 'tab-active']"
  17. data-type="1"
  18. >线上会议</view>
  19. <view
  20. :class="['tab-item', tabActive === '3' && 'tab-active']"
  21. data-type="3"
  22. >线下沙龙</view>
  23. </view>
  24. <view class="flex status-wrap" @click="statusChange">
  25. <view
  26. :class="[
  27. 'status-item',
  28. statusActive === '1' && 'status-active',
  29. ]"
  30. data-status="1">本周预告
  31. </view>
  32. <view
  33. :class="[
  34. 'status-item',
  35. statusActive === '2' && 'status-active',
  36. ]"
  37. data-status="2">进行中
  38. </view>
  39. <view
  40. :class="[
  41. 'status-item',
  42. statusActive === '3' && 'status-active',
  43. ]"
  44. data-status="3">已结束
  45. </view>
  46. </view>
  47. </van-sticky>
  48. <view class="list" v-if="list.length > 0">
  49. <view
  50. class="global-list-card item"
  51. v-for="(item,index) in list"
  52. :key="item.activityId"
  53. @click="handleGoDetail(item.activityId)"
  54. >
  55. <view class="status-box status-before" v-if="item.activityState===1">未开始</view>
  56. <view class="status-box status-progress" v-if="item.activityState===2">进行中</view>
  57. <view class="status-box status-end" v-if="item.activityState===3">已结束</view>
  58. <view class="flex top">
  59. <image class="avatar" :src="item.speakerHeadPic" mode="aspectFill"></image>
  60. <view class="content">
  61. <view class="flex icon-box">
  62. <template v-if="item.firstActivityTypeId===3&&item.city">
  63. <image src='../../static/position.png'></image>
  64. <text>{{item.city}}</text>
  65. </template>
  66. <template v-if="item.firstActivityTypeId===1&&item.activityState===3&&item.hasPlayBack">
  67. <image src='../../static/hf.png'></image>
  68. <text>可回放</text>
  69. </template>
  70. </view>
  71. <view class="van-ellipsis title">{{item.activityTypeName}}</view>
  72. <view class="name">主讲:{{item.speaker}}</view>
  73. <view class="time">{{ item.startTime | formatActivityTime(item.endTime) }}</view>
  74. </view>
  75. </view>
  76. <view class="flex bot" v-if="item.activityState===1">
  77. <view
  78. :class="!item.hasRemind&&'active'"
  79. @click.stop="handleRemind(item,index)"
  80. >
  81. {{item.hasRemind?'取消提醒':'会议提醒'}}
  82. </view>
  83. <view
  84. :class="!item.registerState&&'active'"
  85. v-if="item.firstActivityTypeId===3"
  86. @click.stop="handleRegister(item,index)"
  87. >
  88. {{item.registerState?'取消线下报名':'报名线下参会'}}
  89. </view>
  90. </view>
  91. </view>
  92. </view>
  93. <van-empty description="暂无数据" v-else />
  94. <!-- 弹窗 -->
  95. <van-popup :show="pupData.show" @close="pupData.show=false">
  96. <view class="global-pup">
  97. <view class="content">
  98. <rich-text :nodes="pupData.content"></rich-text>
  99. </view>
  100. <view class="flex bot" v-if="pupData.type=='contact'">
  101. <view @click="pupData.show=false" style="color:#A9AFB8">取消</view>
  102. <view @click="handleCallPhone(pupData.mobile)">拨号</view>
  103. </view>
  104. <view class="flex bot" v-else-if="pupData.type=='apply'">
  105. <view @click="pupData.show=false" style="color:#A9AFB8">取消</view>
  106. <view @click="handleApply">立即申请</view>
  107. </view>
  108. <view class="flex bot" v-else>
  109. <view @click="pupData.show=false">知道了</view>
  110. </view>
  111. </view>
  112. </van-popup>
  113. </view>
  114. </template>
  115. <script>
  116. import {
  117. apiActivityList,
  118. apiActivityAddRemind,
  119. apiActivityCancelRemind,
  120. apiActivityRegister,
  121. apiActivityCancelRegister
  122. } from '@/api/activity'
  123. import {apiApplyPermission} from '@/api/user'
  124. export default {
  125. watch: {
  126. 'pupData.show':{
  127. handler(nval){
  128. if(!nval){
  129. this.pupData={
  130. show:false,
  131. content:'',//弹窗html字符串
  132. type:'',
  133. mobile:"",
  134. }
  135. }
  136. }
  137. }
  138. },
  139. data() {
  140. return {
  141. searchVal: '',
  142. tabActive: '1',
  143. statusActive: '1',
  144. page: 1,
  145. pageSize: 20,
  146. list: [],
  147. finished: false,
  148. pupData:{
  149. show:false,
  150. content:'',//弹窗html字符串
  151. type:'',
  152. mobile:"",
  153. }
  154. }
  155. },
  156. onLoad() {
  157. this.getList()
  158. this.addEventListenerRemind()
  159. this.addEventListenerRegister()
  160. },
  161. onShow() {
  162. if(this.$store.state.activity.activityListPageRefresh){
  163. this.allRefresh()
  164. }
  165. },
  166. onHide(){
  167. this.pupData.show=false
  168. },
  169. onUnload(){
  170. uni.$off('activityDetailSetRemind')
  171. uni.$off('activityDetailSetRegister')
  172. },
  173. onShareAppMessage(res) {
  174. return {
  175. title: '弘则研报',
  176. path: ''
  177. }
  178. },
  179. onPullDownRefresh() {
  180. this.refreshPage()
  181. setTimeout(() => {
  182. uni.stopPullDownRefresh()
  183. }, 1500)
  184. },
  185. onReachBottom() {
  186. if (this.finished) return
  187. this.page++
  188. this.getList()
  189. },
  190. methods: {
  191. // 切换tabbar页面时 整个刷新
  192. allRefresh(){
  193. this.tabActive= '1'
  194. this.statusActive='1'
  195. this.pupData={
  196. show:false,
  197. content:'',//弹窗html字符串
  198. type:'',
  199. mobile:"",
  200. }
  201. this.page = 1
  202. this.list = []
  203. this.finished = false
  204. this.getList()
  205. },
  206. // 监听详情中设置提醒
  207. addEventListenerRemind(){
  208. uni.$on('activityDetailSetRemind',e=>{
  209. this.list.forEach((item,index) => {
  210. if(item.activityId==e.id){
  211. this.handleUpateRemindStatus(index)
  212. }
  213. });
  214. })
  215. },
  216. // 监听详情中报名
  217. addEventListenerRegister(){
  218. uni.$on('activityDetailSetRegister',e=>{
  219. this.list.forEach((item,index) => {
  220. if(item.activityId==e.id){
  221. this.handleUpdateRegister(index)
  222. }
  223. });
  224. })
  225. },
  226. //搜索
  227. onSearch(){
  228. this.refreshPage()
  229. this.getList()
  230. },
  231. //清除搜索内容
  232. onClearSearch(){
  233. this.searchVal=''
  234. this.refreshPage()
  235. this.getList()
  236. },
  237. // 同步搜索关键词
  238. searchValChange(e){
  239. this.searchVal=e.detail
  240. },
  241. // 类型切换
  242. tabChange(e) {
  243. const type = e.target.dataset.type
  244. if (!type||type === this.tabActive) return
  245. this.tabActive = type
  246. this.statusActive = '1'
  247. this.refreshPage()
  248. },
  249. // 状态切换
  250. statusChange(e) {
  251. const status = e.target.dataset.status
  252. if (!status||status === this.statusActive) return
  253. this.statusActive = status
  254. this.refreshPage()
  255. },
  256. // 刷新页面
  257. refreshPage() {
  258. this.page = 1
  259. this.list = []
  260. this.finished = false
  261. this.getList()
  262. },
  263. handleGoDetail(id) {
  264. uni.navigateTo({
  265. url: '/pages-activity/detail?id=' + id
  266. });
  267. },
  268. async getList() {
  269. const res = await apiActivityList({
  270. title:this.searchVal,
  271. active_state: Number(this.statusActive),
  272. activity_type: Number(this.tabActive),
  273. page: this.page,
  274. limit: this.pageSize
  275. })
  276. if (res.code === 200) {
  277. if(res.data){
  278. this.list = [...this.list, ...res.data]
  279. }else{
  280. this.finished=true
  281. }
  282. }
  283. },
  284. handleRemind(e,index){
  285. if(e.hasRemind===0){
  286. this.handleAddRemind(e,index)
  287. }else{
  288. this.handleCancelRemind(e,index)
  289. }
  290. },
  291. // 添加提醒
  292. async handleAddRemind(e,index){
  293. const res=await apiActivityAddRemind({activity_id:Number(e.activityId)})
  294. if(res.code===200){
  295. this.pupData.content=`<h4 style="text-align:center;margin-bottom:5px">设置成功</h4>
  296. <p>请关注【弘则研究】公众号,接收会前15分钟微信提醒,并及时获取活动信息变更通知</p>`
  297. this.pupData.show=true
  298. this.handleUpateRemindStatus(index)
  299. }else if(res.code===4001){
  300. if(res.data.type=='time'){
  301. this.pupData.content=`<p style="margin-top:20px">会议开始前15分钟内无法设置会议提醒</p>`
  302. this.pupData.type='time'
  303. }
  304. this.pupData.show=true
  305. }else if(res.code===403){
  306. if(res.data.type=='contact'){
  307. this.pupData.content=`<p>您暂无权限参加此会议,若想参加请联系对口销售--${res.data.name}:${res.data.mobile}</p>`
  308. this.pupData.mobile=res.data.mobile
  309. }else if(res.data.type=='apply'){
  310. this.pupData.content=`<p style="margin-top:20px">您暂无权限参加此会议,若想参加可以申请开通哦</p>`
  311. }
  312. this.pupData.show=true
  313. this.pupData={...this.pupData,...res.data}
  314. }
  315. },
  316. //取消提醒
  317. async handleCancelRemind(e,index){
  318. const res=await apiActivityCancelRemind({activity_id:Number(e.activityId)})
  319. if(res.code===200){
  320. uni.showToast({
  321. title:"取消提醒成功",
  322. icon:"none"
  323. })
  324. this.handleUpateRemindStatus(index)
  325. }else if(res.code===403){
  326. uni.showToast({
  327. title:res.msg,
  328. icon:"none"
  329. })
  330. }
  331. },
  332. //更新列表中某项的设置提醒状态
  333. handleUpateRemindStatus(index){
  334. if(this.list[index].hasRemind===0){
  335. this.list[index].hasRemind=1
  336. }else{
  337. this.list[index].hasRemind=0
  338. }
  339. },
  340. handleRegister(e,index){
  341. if(e.registerState===0){
  342. this.handleAddRegister(e,index)
  343. }else{
  344. this.handleCancelRegister(e,index)
  345. }
  346. },
  347. // 线下报名
  348. async handleAddRegister(e,index){
  349. const res=await apiActivityRegister({activity_id:Number(e.activityId)})
  350. if(res.code===200){
  351. this.pupData.content=`<h4 style="text-align:center;margin-bottom:5px">报名成功</h4>
  352. <p>请关注【弘则研究】公众号,接收会前1小时微信提醒,并及时获取活动信息变更通知</p>`
  353. this.pupData.show=true
  354. this.handleUpdateRegister(index)
  355. }else if(res.code===4001){
  356. if(res.data.type=='time'){
  357. this.pupData.content=`<p style="margin-top:20px">活动开始前15分钟内无法设置会议提醒</p>`
  358. this.pupData.type='time'
  359. }else if(res.data.type=='full'){
  360. this.pupData.content=`<p style="margin-top:20px">此活动报名人数已满,请留意下期活动</p>`
  361. this.pupData.type='full'
  362. }
  363. this.pupData.show=true
  364. }else if(res.code===403){
  365. if(res.data.type=='contact'){
  366. this.pupData.content=`<p>您暂无权限参加此活动,若想参加请联系对口销售--${res.data.name}:${res.data.mobile}</p>`
  367. this.pupData.mobile=res.data.mobile
  368. }else if(res.data.type=='apply'){
  369. this.pupData.content=`<p style="margin-top:20px">您暂无权限参加此活动,若想参加可以申请开通哦</p>`
  370. }
  371. this.pupData.show=true
  372. this.pupData={...this.pupData,...res.data}
  373. }
  374. },
  375. //取消线下报名
  376. async handleCancelRegister(e,index){
  377. const res=await apiActivityCancelRegister({activity_id:Number(e.activityId)})
  378. if(res.code===200){
  379. uni.showToast({
  380. title:"取消报名成功",
  381. icon:"none"
  382. })
  383. this.handleUpdateRegister(index)
  384. }else if(res.code===403){
  385. uni.showToast({
  386. title:res.msg,
  387. icon:"none"
  388. })
  389. }
  390. },
  391. // 更新报名状态
  392. handleUpdateRegister(index){
  393. if(this.list[index].registerState===0){
  394. this.list[index].registerState=1
  395. }else{
  396. this.list[index].registerState=0
  397. }
  398. },
  399. // 点击立即申请
  400. async handleApply(){
  401. if(this.pupData.customer_info.has_apply){//已经申请过
  402. this.pupData.content=`<p style="padding-top:20px">您已提交过申请,请耐心等待</p>`
  403. this.pupData.type=''
  404. }else{
  405. if(!this.pupData.customer_info.status||this.pupData.customer_info.status!='流失'){
  406. uni.navigateTo({
  407. url:"/pages-applyPermission/applyPermission"
  408. })
  409. }else{//主动调一次申请权限接口
  410. const res=await apiApplyPermission({
  411. company_name:this.pupData.customer_info.company_name,
  412. real_name:this.pupData.customer_info.name,
  413. })
  414. if(res.code===200){
  415. this.pupData.content=`<p style="padding-top:20px">您已提交过申请,请耐心等待</p>`
  416. this.pupData.type=''
  417. }
  418. }
  419. }
  420. },
  421. // 拨打电话
  422. handleCallPhone(tel){
  423. uni.makePhoneCall({
  424. phoneNumber: tel
  425. });
  426. }
  427. }
  428. }
  429. </script>
  430. <style lang="scss">
  431. .search-wrap {
  432. padding: 0 8rpx;
  433. background-color: $global-bg-color;
  434. }
  435. .tabs-wrap {
  436. background-color: $global-bg-color;
  437. box-shadow: $global-tab-shadow-color;
  438. align-items: center;
  439. text-align: center;
  440. font-size: $global-font-size-lg;
  441. color: $global-text-color-grey;
  442. position: relative;
  443. z-index: 10;
  444. .tab-item {
  445. flex: 1;
  446. height: 94rpx;
  447. line-height: 94rpx;
  448. }
  449. .tab-active {
  450. font-weight: bold;
  451. color: $global-text-color-main;
  452. border-bottom: 6rpx solid $global-text-color-main;
  453. }
  454. }
  455. .status-wrap {
  456. background-color: $global-bg-color;
  457. padding: 40rpx 34rpx 20rpx 34rpx;
  458. .status-item {
  459. font-size: $global-font-size-sm;
  460. color: #444;
  461. min-width: 167rpx;
  462. text-align: center;
  463. padding: 14rpx;
  464. border-radius: 40rpx;
  465. background-color: #f6f6f6;
  466. margin-right: 40rpx;
  467. }
  468. .status-active {
  469. background: linear-gradient(270deg, #efc896 0%, #d9a35f 100%);
  470. color: $global-bg-color;
  471. }
  472. }
  473. .list {
  474. padding: 34rpx;
  475. .item {
  476. position: relative;
  477. margin-bottom: 30rpx;
  478. .status-box {
  479. top: 0;
  480. right: 0;
  481. position: absolute;
  482. width: 132rpx;
  483. line-height: 44rpx;
  484. text-align: center;
  485. font-size: $global-font-size-sm;
  486. color: $global-text-color-white;
  487. }
  488. .status-before {
  489. background-color: #e3b377;
  490. }
  491. .status-progress {
  492. background-color: #3385ff;
  493. }
  494. .status-end {
  495. background-color: #a2a2a2;
  496. }
  497. .top {
  498. padding-top: 64rpx;
  499. padding-left: 30rpx;
  500. padding-right: 30rpx;
  501. padding-bottom: 42rpx;
  502. .avatar {
  503. width: 168rpx;
  504. height: 168rpx;
  505. border-radius: 50%;
  506. margin-right: 30rpx;
  507. flex-shrink: 0;
  508. border: 1px solid $global-border-color;
  509. }
  510. .title {
  511. font-size: $global-font-size-lg;
  512. font-weight: bold;
  513. width: 420rpx;
  514. padding-right: 80rpx;
  515. padding-bottom: 10rpx;
  516. border-bottom: 1px solid $global-border-color;
  517. }
  518. .name {
  519. color: $global-text-color-grey;
  520. margin: 20rpx 0;
  521. }
  522. .time {
  523. font-size: $global-font-size-sm;
  524. color: $global-text-color-999;
  525. }
  526. }
  527. .bot {
  528. border-top: 1px solid $global-border-color;
  529. color: $global-text-color-999;
  530. view {
  531. line-height: 72rpx;
  532. flex: 1;
  533. text-align: center;
  534. border-right: 1px solid $global-border-color;
  535. }
  536. view:last-child {
  537. border: none;
  538. }
  539. .active{
  540. color: #E3B377;
  541. }
  542. }
  543. .content{
  544. width: 420rpx;
  545. position: relative;
  546. .icon-box{
  547. align-items: center;
  548. position: absolute;
  549. right: 0;
  550. top: 8rpx;
  551. font-size: $global-font-size-sm;
  552. color:$global-text-color-main;
  553. image{
  554. width: 26rpx;
  555. height: 26rpx;
  556. }
  557. }
  558. }
  559. }
  560. }
  561. </style>