activity.vue 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617
  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" :close-on-click-overlay="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. if(!res.data.customer_info.has_apply){
  308. if(res.data.customer_info.status=='冻结'||(res.data.customer_info.status=='试用'&&res.data.customer_info.is_suspend==1)){
  309. apiApplyPermission({
  310. company_name:res.data.customer_info.company_name,
  311. real_name:res.data.customer_info.name,
  312. }).then(res=>{
  313. if(res.code===200){
  314. console.log('主动申请成功');
  315. }
  316. })
  317. }
  318. }
  319. this.pupData.content=`<p>您暂无权限参加此会议,若想参加请联系对口销售--${res.data.name}:${res.data.mobile}</p>`
  320. this.pupData.mobile=res.data.mobile
  321. }else if(res.data.type=='apply'){
  322. this.pupData.content=`<p style="margin-top:20px">您暂无权限参加此会议,若想参加可以申请开通哦</p>`
  323. }
  324. this.pupData.show=true
  325. this.pupData={...this.pupData,...res.data}
  326. }
  327. },
  328. //取消提醒
  329. async handleCancelRemind(e,index){
  330. const res=await apiActivityCancelRemind({activity_id:Number(e.activityId)})
  331. if(res.code===200){
  332. uni.showToast({
  333. title:"取消提醒成功",
  334. icon:"none"
  335. })
  336. this.handleUpateRemindStatus(index)
  337. }else if(res.code===403){
  338. uni.showToast({
  339. title:res.msg,
  340. icon:"none"
  341. })
  342. }
  343. },
  344. //更新列表中某项的设置提醒状态
  345. handleUpateRemindStatus(index){
  346. if(this.list[index].hasRemind===0){
  347. this.list[index].hasRemind=1
  348. }else{
  349. this.list[index].hasRemind=0
  350. }
  351. },
  352. handleRegister(e,index){
  353. if(e.registerState===0){
  354. this.handleAddRegister(e,index)
  355. }else{
  356. this.handleCancelRegister(e,index)
  357. }
  358. },
  359. // 线下报名
  360. async handleAddRegister(e,index){
  361. const res=await apiActivityRegister({activity_id:Number(e.activityId)})
  362. if(res.code===200){
  363. this.pupData.content=`<h4 style="text-align:center;margin-bottom:5px">报名成功</h4>
  364. <p>请关注【弘则研究】公众号,接收会前1小时微信提醒,并及时获取活动信息变更通知</p>`
  365. this.pupData.show=true
  366. this.handleUpdateRegister(index)
  367. }else if(res.code===4001){
  368. if(res.data.type=='time'){
  369. this.pupData.content=`<p style="margin-top:20px">活动开始前15分钟内无法设置会议提醒</p>`
  370. this.pupData.type='time'
  371. }else if(res.data.type=='full'){
  372. this.pupData.content=`<p style="margin-top:20px">此活动报名人数已满,请留意下期活动</p>`
  373. this.pupData.type='full'
  374. }
  375. this.pupData.show=true
  376. }else if(res.code===403){
  377. if(res.data.type=='contact'){
  378. if(!res.data.customer_info.has_apply){
  379. if(res.data.customer_info.status=='冻结'||(res.data.customer_info.status=='试用'&&res.data.customer_info.is_suspend==1)){
  380. apiApplyPermission({
  381. company_name:res.data.customer_info.company_name,
  382. real_name:res.data.customer_info.name,
  383. }).then(res=>{
  384. if(res.code===200){
  385. console.log('主动申请成功');
  386. }
  387. })
  388. }
  389. }
  390. this.pupData.content=`<p>您暂无权限参加此活动,若想参加请联系对口销售--${res.data.name}:${res.data.mobile}</p>`
  391. this.pupData.mobile=res.data.mobile
  392. }else if(res.data.type=='apply'){
  393. this.pupData.content=`<p style="margin-top:20px">您暂无权限参加此活动,若想参加可以申请开通哦</p>`
  394. }
  395. this.pupData.show=true
  396. this.pupData={...this.pupData,...res.data}
  397. }
  398. },
  399. //取消线下报名
  400. async handleCancelRegister(e,index){
  401. const res=await apiActivityCancelRegister({activity_id:Number(e.activityId)})
  402. if(res.code===200){
  403. uni.showToast({
  404. title:"取消报名成功",
  405. icon:"none"
  406. })
  407. this.handleUpdateRegister(index)
  408. }else if(res.code===403){
  409. uni.showToast({
  410. title:res.msg,
  411. icon:"none"
  412. })
  413. }
  414. },
  415. // 更新报名状态
  416. handleUpdateRegister(index){
  417. if(this.list[index].registerState===0){
  418. this.list[index].registerState=1
  419. }else{
  420. this.list[index].registerState=0
  421. }
  422. },
  423. // 点击立即申请
  424. async handleApply(){
  425. if(this.pupData.customer_info.has_apply){//已经申请过
  426. this.pupData.content=`<p style="padding-top:20px">您已提交过申请,请耐心等待</p>`
  427. this.pupData.type=''
  428. }else{
  429. if(!this.pupData.customer_info.status||this.pupData.customer_info.status!='流失'){
  430. uni.navigateTo({
  431. url:"/pages-applyPermission/applyPermission"
  432. })
  433. }else{//主动调一次申请权限接口
  434. const res=await apiApplyPermission({
  435. company_name:this.pupData.customer_info.company_name,
  436. real_name:this.pupData.customer_info.name,
  437. })
  438. if(res.code===200){
  439. this.pupData.content=`<p>申请已提交</p><p>请等待销售人员与您联系</p>`
  440. this.pupData.type=''
  441. }
  442. }
  443. }
  444. },
  445. // 拨打电话
  446. handleCallPhone(tel){
  447. uni.makePhoneCall({
  448. phoneNumber: tel
  449. });
  450. }
  451. }
  452. }
  453. </script>
  454. <style lang="scss">
  455. .search-wrap {
  456. padding: 0 8rpx;
  457. background-color: $global-bg-color;
  458. }
  459. .tabs-wrap {
  460. background-color: $global-bg-color;
  461. box-shadow: $global-tab-shadow-color;
  462. align-items: center;
  463. text-align: center;
  464. font-size: $global-font-size-lg;
  465. color: $global-text-color-grey;
  466. position: relative;
  467. z-index: 10;
  468. .tab-item {
  469. flex: 1;
  470. height: 94rpx;
  471. line-height: 94rpx;
  472. }
  473. .tab-active {
  474. font-weight: bold;
  475. color: $global-text-color-main;
  476. border-bottom: 6rpx solid $global-text-color-main;
  477. }
  478. }
  479. .status-wrap {
  480. background-color: $global-bg-color;
  481. padding: 40rpx 34rpx 20rpx 34rpx;
  482. .status-item {
  483. font-size: $global-font-size-sm;
  484. color: #444;
  485. min-width: 167rpx;
  486. text-align: center;
  487. padding: 14rpx;
  488. border-radius: 40rpx;
  489. background-color: #f6f6f6;
  490. margin-right: 40rpx;
  491. }
  492. .status-active {
  493. background: linear-gradient(270deg, #efc896 0%, #d9a35f 100%);
  494. color: $global-bg-color;
  495. }
  496. }
  497. .list {
  498. padding: 34rpx;
  499. .item {
  500. position: relative;
  501. margin-bottom: 30rpx;
  502. .status-box {
  503. top: 0;
  504. right: 0;
  505. position: absolute;
  506. width: 132rpx;
  507. line-height: 44rpx;
  508. text-align: center;
  509. font-size: $global-font-size-sm;
  510. color: $global-text-color-white;
  511. }
  512. .status-before {
  513. background-color: #e3b377;
  514. }
  515. .status-progress {
  516. background-color: #3385ff;
  517. }
  518. .status-end {
  519. background-color: #a2a2a2;
  520. }
  521. .top {
  522. padding-top: 64rpx;
  523. padding-left: 30rpx;
  524. padding-right: 30rpx;
  525. padding-bottom: 42rpx;
  526. .avatar {
  527. width: 168rpx;
  528. height: 168rpx;
  529. border-radius: 50%;
  530. margin-right: 30rpx;
  531. flex-shrink: 0;
  532. border: 1px solid $global-border-color;
  533. }
  534. .title {
  535. font-size: $global-font-size-lg;
  536. font-weight: bold;
  537. width: 400rpx;
  538. padding-right: 80rpx;
  539. padding-bottom: 10rpx;
  540. border-bottom: 1px solid $global-border-color;
  541. }
  542. .name {
  543. color: $global-text-color-grey;
  544. margin: 20rpx 0;
  545. }
  546. .time {
  547. font-size: $global-font-size-sm;
  548. color: $global-text-color-999;
  549. }
  550. }
  551. .bot {
  552. border-top: 1px solid $global-border-color;
  553. color: $global-text-color-999;
  554. view {
  555. line-height: 72rpx;
  556. flex: 1;
  557. text-align: center;
  558. border-right: 1px solid $global-border-color;
  559. }
  560. view:last-child {
  561. border: none;
  562. }
  563. .active{
  564. color: #E3B377;
  565. }
  566. }
  567. .content{
  568. width: 420rpx;
  569. position: relative;
  570. .icon-box{
  571. align-items: center;
  572. position: absolute;
  573. right: 0;
  574. top: 8rpx;
  575. font-size: $global-font-size-sm;
  576. color:$global-text-color-main;
  577. image{
  578. width: 26rpx;
  579. height: 26rpx;
  580. }
  581. }
  582. }
  583. }
  584. }
  585. </style>