activity.vue 38 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085
  1. <template>
  2. <page-meta :page-style="currentAudioMsg.show? 'overflow: hidden;' : ''" />
  3. <view class="activity-page">
  4. <van-sticky style="background: #fff">
  5. <!-- <view class="search-wrap">
  6. <van-search
  7. shape="round"
  8. :value="searchVal"
  9. placeholder="搜索您想要的商品名"
  10. @change="searchValChange"
  11. @search="onSearch"
  12. @clear="onClearSearch"
  13. />
  14. </view> -->
  15. <view class="flex tabs-wrap" @click="tabChange">
  16. <view
  17. :class="['tab-item', tabActive === '1' && 'tab-active']"
  18. data-type="1"
  19. >线上会议</view>
  20. <view
  21. :class="['tab-item', tabActive === '3' && 'tab-active']"
  22. data-type="3"
  23. >线下沙龙</view>
  24. </view>
  25. <view class="flex status-wrap" @click="statusChange">
  26. <view
  27. :class="[
  28. 'status-item',
  29. statusActive === '1' && 'status-active',
  30. ]"
  31. data-status="1">本周预告
  32. </view>
  33. <view
  34. :class="[
  35. 'status-item',
  36. statusActive === '2' && 'status-active',
  37. ]"
  38. data-status="2">进行中
  39. </view>
  40. <view
  41. :class="[
  42. 'status-item',
  43. statusActive === '3' && 'status-active',
  44. ]"
  45. data-status="3">已结束
  46. </view>
  47. <van-checkbox
  48. class="auth-box"
  49. shape="square"
  50. :value="onlySeeAuth"
  51. @change="handleAuthChange"
  52. checked-color="#D5AD79"
  53. icon-size="16px"
  54. >
  55. <view class="text">只看有权限</view>
  56. </van-checkbox>
  57. </view>
  58. </van-sticky>
  59. <view class="list" v-if="list.length > 0">
  60. <view
  61. class="global-list-card item"
  62. v-for="(item,index) in list"
  63. :key="item.activityId"
  64. @click="handleGoDetail(item.activityId)"
  65. >
  66. <view class="status-box status-before" v-if="item.activityState===1">未开始</view>
  67. <view class="status-box status-progress" v-if="item.activityState===2">进行中</view>
  68. <view class="status-box status-end" v-if="item.activityState===3">已结束</view>
  69. <view class="flex top">
  70. <image class="avatar" :src="item.speakerHeadPic" mode="aspectFill"></image>
  71. <view class="content">
  72. <view class="flex icon-box" @click.stop="handleGetAudio(item)">
  73. <template v-if="item.firstActivityTypeId===3&&item.city">
  74. <image src='../../static/position.png'></image>
  75. <text>{{item.city}}</text>
  76. </template>
  77. <template v-if="item.firstActivityTypeId===1&&item.activityState===3&&item.hasPlayBack">
  78. <image :src="currentAudioMsg.activityId==item.activityId&&currentAudioMsg.play?'../../static/audio-doing.png':'../../static/audio-pause-3.png'"></image>
  79. <text>{{currentAudioMsg.activityId==item.activityId?currentAudioMsg.play?'暂停':'回放':'回放'}}</text>
  80. </template>
  81. </view>
  82. <view class="van-ellipsis title">{{item.activityTypeName}}</view>
  83. <view class="name">主讲:{{item.speaker}}</view>
  84. <view class="time">{{ item.startTime | formatActivityTime(item.endTime) }}</view>
  85. </view>
  86. </view>
  87. <view class="flex bot" v-if="item.activityState===1">
  88. <view
  89. :class="!item.hasRemind&&'active'"
  90. @click.stop="handleRemind(item,index)"
  91. >
  92. {{item.hasRemind?'取消提醒':'会议提醒'}}
  93. </view>
  94. <view
  95. :class="!item.registerState&&'active'"
  96. v-if="item.firstActivityTypeId===3"
  97. @click.stop="handleRegister(item,index)"
  98. >
  99. {{item.registerState?'取消线下报名':'报名线下参会'}}
  100. </view>
  101. </view>
  102. </view>
  103. </view>
  104. <view class="report-empty-box" v-if="list.length===0&&finished">
  105. <image :src="globalImgUrls.chartEmpty" mode="widthFix" />
  106. <view>暂无活动</view>
  107. </view>
  108. <!-- <van-empty description="暂无数据" v-if="list.length===0&&finished" /> -->
  109. <!-- 弹窗 -->
  110. <van-popup :show="pupData.show" @close="pupData.show=false" :close-on-click-overlay="false">
  111. <view class="global-pup">
  112. <view class="content">
  113. <rich-text :nodes="pupData.content"></rich-text>
  114. </view>
  115. <view class="flex bot" v-if="pupData.type=='contact'">
  116. <view @click="pupData.show=false" style="color:#A9AFB8">取消</view>
  117. <view @click="handleCallPhone(pupData.mobile)">拨号</view>
  118. </view>
  119. <view class="flex bot" v-else-if="pupData.type=='apply'">
  120. <view @click="pupData.show=false" style="color:#A9AFB8">取消</view>
  121. <view @click="handleApply">立即申请</view>
  122. </view>
  123. <view class="flex bot" v-else>
  124. <view @click="pupData.show=false">知道了</view>
  125. </view>
  126. </view>
  127. </van-popup>
  128. <!-- 音频弹窗 -->
  129. <van-popup
  130. :show="currentAudioMsg.show"
  131. @close="currentAudioMsg.show=false"
  132. position="bottom"
  133. closeable
  134. round
  135. z-index="99999"
  136. >
  137. <view class="audio-popup-box">
  138. <view class="title">{{currentAudioMsg.title}}</view>
  139. <view class="list">
  140. <view class="flex item" v-for="item in currentAudioMsg.list" :key="item.voiceUrl" @click="handleAudioChange(item)">
  141. <view>
  142. <view :style="{color:item.voiceUrl==currentAudioMsg.audioCurrentUrl?'#D5AD79':''}">{{item.voiceName}}</view>
  143. <view style="font-size:12px;color:#999">{{item.voicePlaySeconds|formatVoiceTime}}</view>
  144. </view>
  145. <!-- <image v-if="item.voiceUrl==currentAudioMsg.audioCurrentUrl&&currentAudioMsg.play" src="../../static/audio-doing.png" mode="scaleToFill"/>
  146. <image v-else-if="item.voiceUrl==currentAudioMsg.audioCurrentUrl&&!currentAudioMsg.play" src="../../static/audio-pause-3.png" mode="scaleToFill"/>
  147. <image v-else src="../../static/audio-pause-2.png" mode="scaleToFill"/> -->
  148. </view>
  149. </view>
  150. <view class="flex box">
  151. <text>{{currentAudioMsg.audioCurrentTime|formatVoiceTime}}</text>
  152. <slider
  153. activeColor="#e3b377"
  154. :max="currentAudioMsg.audioTime"
  155. :value="currentAudioMsg.audioCurrentTime"
  156. @change="handleAudioSliderChange($event)"
  157. block-size="20"
  158. />
  159. <text>{{currentAudioMsg.audioTime|formatVoiceTime}}</text>
  160. </view>
  161. <view class="flex btns">
  162. <image
  163. class="before"
  164. :src="isFirstAudio?'../../static/audio-before-grey.png':'../../static/audio-before.png'"
  165. mode="aspectFit"
  166. @click="handleAudioBtn('before')"
  167. />
  168. <image
  169. class="center"
  170. :src="currentAudioMsg.play?'../../static/audio-doing.png':'../../static/audio-pause-3.png'"
  171. mode="aspectFit"
  172. @click="handleAudioBtn('center')"
  173. />
  174. <image
  175. class="next"
  176. :src="isLastAudio?'../../static/audio-before-grey.png':'../../static/audio-before.png'"
  177. mode="aspectFit"
  178. @click="handleAudioBtn('next')"
  179. />
  180. </view>
  181. </view>
  182. </van-popup>
  183. <!-- 分享海报 -->
  184. <sharePoster
  185. :style="{bottom:'250rpx'}"
  186. :shareData="{
  187. type:'activity_list',
  188. code_page:'pages/activity/activity',
  189. code_scene:'',
  190. data:shareParams
  191. }"
  192. v-if="showPoster"
  193. ></sharePoster>
  194. </view>
  195. </template>
  196. <script>
  197. import {
  198. apiActivityList,
  199. apiActivityAddRemind,
  200. apiActivityCancelRemind,
  201. apiActivityRegister,
  202. apiActivityCancelRegister,
  203. apiActivityAudios
  204. } from '@/api/activity'
  205. import {apiApplyPermission,apiUserInfo} from '@/api/user'
  206. import sharePoster from '../../components/sharePoster/sharePoster.vue'
  207. const moment=require('@/utils/moment-with-locales.min')
  208. moment.locale('zh-cn');
  209. export default {
  210. components: {
  211. sharePoster
  212. },
  213. computed: {
  214. isFirstAudio(){
  215. if(!this.currentAudioMsg.audioCurrentUrl){
  216. return true
  217. }
  218. if(this.currentAudioMsg.list.length>0){
  219. return this.currentAudioMsg.audioCurrentUrl==this.currentAudioMsg.list[0].voiceUrl
  220. }
  221. },
  222. isLastAudio(){
  223. if(!this.currentAudioMsg.audioCurrentUrl){
  224. return true
  225. }
  226. if(this.currentAudioMsg.list.length>0){
  227. return this.currentAudioMsg.audioCurrentUrl==this.currentAudioMsg.list[this.currentAudioMsg.list.length-1].voiceUrl
  228. }
  229. },
  230. shareParams(){ //生成海报数据
  231. let obj={
  232. list_title:this.tabActive === '1'?'线上会议':'线下沙龙',
  233. status_1:'',
  234. avatar_1:'',
  235. title_1:'',
  236. speaker_1:'',
  237. time_1:'',
  238. status_2:'',
  239. avatar_2:'',
  240. title_2:'',
  241. speaker_2:'',
  242. time_2:'',
  243. }
  244. if(this.list[0]){
  245. obj.status_1=this.list[0].activityState==1?'未开始':this.list[0].activityState==2?'进行中':'已结束'
  246. obj.avatar_1=this.list[0].speakerHeadPic
  247. obj.title_1=this.list[0].activityTypeName
  248. obj.speaker_1=this.list[0].speaker
  249. obj.time_1=this.formatActivityTime(this.list[0].startTime,this.list[0].endTime)
  250. }
  251. if(this.list[1]){
  252. obj.status_2=this.list[1].activityState==1?'未开始':this.list[1].activityState==2?'进行中':'已结束'
  253. obj.avatar_2=this.list[1].speakerHeadPic
  254. obj.title_2=this.list[1].activityTypeName
  255. obj.speaker_2=this.list[1].speaker
  256. obj.time_2=this.formatActivityTime(this.list[1].startTime,this.list[1].endTime)
  257. }
  258. return obj
  259. }
  260. },
  261. watch: {
  262. 'pupData.show':{
  263. handler(nval){
  264. if(!nval){
  265. this.pupData={
  266. show:false,
  267. content:'',//弹窗html字符串
  268. type:'',
  269. mobile:"",
  270. }
  271. }
  272. }
  273. }
  274. },
  275. data() {
  276. return {
  277. searchVal: '',
  278. tabActive: '1',
  279. statusActive: '1',
  280. page: 1,
  281. pageSize: 20,
  282. list: [],
  283. finished: false,
  284. isInit:false,//是否是初始化获取数据
  285. pupData:{
  286. show:false,
  287. content:'',//弹窗html字符串
  288. type:'',
  289. mobile:"",
  290. },
  291. onlySeeAuth:false,// 是否只看有权限的
  292. currentAudioMsg:{
  293. activityId:'',//活动id
  294. play:false,//是否正在播放
  295. list:[],//音频列表数据
  296. show:false,//是否显示弹窗
  297. title:'',//音频弹窗标题
  298. audioCurrentTime:0,//音频播放实时时间
  299. audioTime:0,//当前音频时间
  300. audioCurrentUrl:'',//当前音频地址
  301. },
  302. showPoster:true
  303. }
  304. },
  305. onLoad() {
  306. this.isInit=true
  307. this.init()
  308. this.addEventListenerRemind()
  309. this.addEventListenerRegister()
  310. },
  311. onShow() {
  312. this.showPoster=true
  313. if(this.$store.state.activity.activityListPageRefresh){
  314. if(this.isInit) return
  315. this.allRefresh()
  316. }
  317. this.initAudio()
  318. uni.getSystemInfo({
  319. success: function (res) {
  320. if (res.windowWidth > 700) {
  321. console.log('跳转启动页判断进入pc');
  322. uni.reLaunch({
  323. url: "/pages/pc",
  324. });
  325. }
  326. },
  327. })
  328. },
  329. onHide(){
  330. this.showPoster=false
  331. this.pupData.show=false
  332. this.currentAudioMsg.show=false
  333. // 存一次音频信息
  334. uni.setStorageSync('audioMsg', JSON.stringify(this.currentAudioMsg))
  335. },
  336. onUnload(){
  337. uni.$off('activityDetailSetRemind')
  338. uni.$off('activityDetailSetRegister')
  339. },
  340. onShareAppMessage(res) {
  341. return {
  342. title: '弘则FICC周度电话会安排',
  343. path: ''
  344. }
  345. },
  346. onPullDownRefresh() {
  347. this.refreshPage()
  348. setTimeout(() => {
  349. uni.stopPullDownRefresh()
  350. }, 1500)
  351. },
  352. onReachBottom() {
  353. if (this.finished) return
  354. this.page++
  355. this.getList()
  356. },
  357. methods: {
  358. formatActivityTime(start,end){
  359. const week=moment(start).format('dddd');
  360. const day=moment(start).format('YYYY-MM-DD');
  361. const startTime=moment(start).format('HH:mm');
  362. const endTime=moment(end).format('HH:mm');
  363. return `${day} ${startTime}-${endTime} ${week}`
  364. },
  365. // 初始化音频状态
  366. initAudio(){
  367. console.log('音频src',this.globalBgMusic.src);
  368. if(this.globalBgMusic.src){
  369. const obj=uni.getStorageSync('audioMsg')
  370. if(obj){
  371. this.currentAudioMsg=JSON.parse(obj)
  372. }
  373. this.handleAudioFun()
  374. }else{
  375. this.currentAudioMsg={
  376. activityId:'',//活动id
  377. play:false,//是否正在播放
  378. list:[],//音频列表数据
  379. show:false,//是否显示弹窗
  380. title:'',//音频弹窗标题
  381. audioCurrentTime:0,//音频播放实时时间
  382. audioTime:0,//当前音频时间
  383. audioCurrentUrl:'',//当前音频地址
  384. }
  385. }
  386. },
  387. // 点击列表中播放音频
  388. async handleGetAudio(item){
  389. if(!(item.firstActivityTypeId===1&&item.activityState===3&&item.hasPlayBack)) return
  390. // 获取音频
  391. if(this.currentAudioMsg.activityId!=item.activityId){
  392. const res=await apiActivityAudios({activity_id: Number(item.activityId)})
  393. if(res.code===200){
  394. if(res.data){
  395. this.currentAudioMsg.activityId=item.activityId
  396. this.currentAudioMsg.list=res.data
  397. this.currentAudioMsg.title=item.activityTypeName
  398. this.handlePlayAudio(res.data[0])
  399. this.currentAudioMsg.show=!this.currentAudioMsg.show
  400. }else{
  401. uni.showToast({
  402. title:"无音频数据",
  403. icon:"none"
  404. })
  405. }
  406. }else if(res.code===403){
  407. if(res.data.type=='contact'){
  408. if(!res.data.customer_info.has_apply){
  409. if(res.data.customer_info.status=='冻结'||(res.data.customer_info.status=='试用'&&res.data.customer_info.is_suspend==1)){
  410. apiApplyPermission({
  411. company_name:res.data.customer_info.company_name,
  412. real_name:res.data.customer_info.name,
  413. source:2,
  414. from_page:'活动列表'
  415. }).then(res=>{
  416. if(res.code===200){
  417. console.log('主动申请成功');
  418. }
  419. })
  420. }
  421. }
  422. this.pupData.content=`<p>您暂无权限参加此活动,若想参加请联系对口销售--${res.data.name}:${res.data.mobile}</p>`
  423. this.pupData.mobile=res.data.mobile
  424. }else if(res.data.type=='apply'){
  425. this.pupData.content=`<p>您暂无权限参加此活动,若想参加可以申请开通哦</p>`
  426. }
  427. this.pupData.show=true
  428. this.pupData={...this.pupData,...res.data}
  429. }
  430. }else{
  431. if(this.currentAudioMsg.play){
  432. this.globalBgMusic.pause()
  433. }else{
  434. this.globalBgMusic.play()
  435. }
  436. this.currentAudioMsg.show=!this.currentAudioMsg.show
  437. }
  438. },
  439. // 播放音频
  440. handlePlayAudio(item){
  441. this.globalBgMusic.src=item.voiceUrl
  442. this.globalBgMusic.title=item.voiceName
  443. this.globalBgMusic.onCanplay(()=>{
  444. this.globalBgMusic.play()
  445. this.currentAudioMsg.audioTime=item.voicePlaySeconds
  446. })
  447. this.handleAudioFun()
  448. },
  449. // 音频事件
  450. handleAudioFun(){
  451. this.globalBgMusic.onPlay(()=>{
  452. this.currentAudioMsg.play=true
  453. this.currentAudioMsg.audioCurrentUrl=this.globalBgMusic.src
  454. })
  455. this.globalBgMusic.onPause(()=>{
  456. this.currentAudioMsg.play=false
  457. })
  458. this.globalBgMusic.onStop(()=>{
  459. this.currentAudioMsg.play=false
  460. this.currentAudioMsg.play=false
  461. this.currentAudioMsg.audioCurrentTime=0
  462. this.currentAudioMsg.audioTime=0
  463. this.currentAudioMsg.audioCurrentUrl=0
  464. })
  465. this.globalBgMusic.onEnded(()=>{
  466. console.log('onEnded');
  467. this.currentAudioMsg.play=false
  468. this.handleAudioBtn('next','auto')
  469. })
  470. this.globalBgMusic.onError((e)=>{
  471. console.log('onError',e);
  472. })
  473. this.globalBgMusic.onTimeUpdate(()=>{
  474. console.log('时间更新');
  475. // if(this.globalBgMusic.src==this.currentAudioMsg.audioCurrentUrl){
  476. this.currentAudioMsg.audioCurrentTime=parseInt(this.globalBgMusic.currentTime)
  477. // }
  478. })
  479. },
  480. // 点击弹窗中的按钮
  481. handleAudioBtn(type,e){
  482. if(type==='center'){
  483. if(this.globalBgMusic.src){
  484. if(this.currentAudioMsg.play){
  485. this.globalBgMusic.pause()
  486. }else{
  487. this.globalBgMusic.play()
  488. }
  489. }else{
  490. this.handlePlayAudio(this.currentAudioMsg.list[0])
  491. }
  492. }
  493. if(type==='before'){
  494. if(!this.isFirstAudio){
  495. this.currentAudioMsg.list.forEach((_item,index)=>{
  496. if(_item.voiceUrl==this.currentAudioMsg.audioCurrentUrl){
  497. this.handlePlayAudio(this.currentAudioMsg.list[index-1])
  498. }
  499. })
  500. }
  501. }
  502. if(type==='next'){
  503. if(!this.isLastAudio){
  504. this.currentAudioMsg.list.forEach((_item,index)=>{
  505. if(_item.voiceUrl==this.currentAudioMsg.audioCurrentUrl){
  506. this.handlePlayAudio(this.currentAudioMsg.list[index+1])
  507. }
  508. })
  509. }else{
  510. if(e==='auto'){
  511. this.currentAudioMsg.play=false
  512. this.currentAudioMsg.audioCurrentTime=0
  513. this.currentAudioMsg.audioTime=0
  514. this.currentAudioMsg.audioCurrentUrl=''
  515. }
  516. }
  517. }
  518. },
  519. //点击弹窗中的音频项
  520. handleAudioChange(item){
  521. // 点击的同一个
  522. if(item.voiceUrl==this.currentAudioMsg.audioCurrentUrl){
  523. // if(this.currentAudioMsg.play){
  524. // this.globalBgMusic.pause()
  525. // }else{
  526. // this.globalBgMusic.play()
  527. // }
  528. }else{
  529. this.handlePlayAudio(item)
  530. }
  531. },
  532. //拖动进度条
  533. handleAudioSliderChange(e){
  534. const value=e.detail.value
  535. this.globalBgMusic.seek(value)
  536. },
  537. async init(){
  538. let userInfoRes=this.userInfo
  539. if(!this.userInfo.status){
  540. const res=await apiUserInfo()
  541. if(res.code===200){
  542. userInfoRes=res.data
  543. }
  544. }
  545. if(['正式','永续'].includes(userInfoRes.status)){
  546. this.onlySeeAuth=true
  547. }
  548. if(userInfoRes.status=='试用'&&userInfoRes.is_suspend==0){
  549. this.onlySeeAuth=true
  550. }
  551. this.getList('init')
  552. },
  553. handleAuthChange(e){
  554. this.onlySeeAuth=e.detail
  555. this.refreshPage()
  556. },
  557. // 切换tabbar页面时 整个刷新
  558. allRefresh(){
  559. this.tabActive= '1'
  560. this.statusActive='1'
  561. this.pupData={
  562. show:false,
  563. content:'',//弹窗html字符串
  564. type:'',
  565. mobile:"",
  566. }
  567. this.page = 1
  568. this.list = []
  569. this.finished = false
  570. this.getList()
  571. },
  572. // 监听详情中设置提醒
  573. addEventListenerRemind(){
  574. uni.$on('activityDetailSetRemind',e=>{
  575. this.list.forEach((item,index) => {
  576. if(item.activityId==e.id){
  577. this.handleUpateRemindStatus(index)
  578. }
  579. });
  580. })
  581. },
  582. // 监听详情中报名
  583. addEventListenerRegister(){
  584. uni.$on('activityDetailSetRegister',e=>{
  585. this.list.forEach((item,index) => {
  586. if(item.activityId==e.id){
  587. this.handleUpdateRegister(index)
  588. }
  589. });
  590. })
  591. },
  592. //搜索
  593. onSearch(){
  594. this.refreshPage()
  595. this.getList()
  596. },
  597. //清除搜索内容
  598. onClearSearch(){
  599. this.searchVal=''
  600. this.refreshPage()
  601. this.getList()
  602. },
  603. // 同步搜索关键词
  604. searchValChange(e){
  605. this.searchVal=e.detail
  606. },
  607. // 类型切换
  608. tabChange(e) {
  609. const type = e.target.dataset.type
  610. if (!type||type === this.tabActive) return
  611. this.tabActive = type
  612. this.statusActive = '1'
  613. this.refreshPage()
  614. },
  615. // 状态切换
  616. statusChange(e) {
  617. const status = e.target.dataset.status
  618. if (!status||status === this.statusActive) return
  619. this.statusActive = status
  620. this.refreshPage()
  621. },
  622. // 刷新页面
  623. refreshPage() {
  624. this.page = 1
  625. this.list = []
  626. this.finished = false
  627. this.getList()
  628. },
  629. handleGoDetail(id) {
  630. uni.navigateTo({
  631. url: '/pages-activity/detail?id=' + id
  632. });
  633. },
  634. async getList(e) {
  635. const res = await apiActivityList({
  636. title:this.searchVal,
  637. active_state: Number(this.statusActive),
  638. activity_type: Number(this.tabActive),
  639. has_permission:this.onlySeeAuth?1:0,
  640. page: this.page,
  641. limit: this.pageSize
  642. })
  643. if(e=='init'){
  644. this.isInit=false
  645. }
  646. if (res.code === 200) {
  647. if(res.data){
  648. this.list = [...this.list, ...res.data]
  649. }else{
  650. this.finished=true
  651. }
  652. }
  653. },
  654. handleRemind(e,index){
  655. if(e.hasRemind===0){
  656. this.handleAddRemind(e,index)
  657. }else{
  658. this.handleCancelRemind(e,index)
  659. }
  660. },
  661. // 添加提醒
  662. async handleAddRemind(e,index){
  663. const res=await apiActivityAddRemind({activity_id:Number(e.activityId)})
  664. if(res.code===200){
  665. this.pupData.content=`<h4 style="text-align:center;margin-bottom:5px">设置成功</h4>
  666. <p>关注【弘则研究】公众号,接收会前15分钟微信提醒,并及时获取活动信息变更通知</p>`
  667. this.pupData.show=true
  668. this.handleUpateRemindStatus(index)
  669. }else if(res.code===4001){
  670. if(res.data.type=='time'){
  671. this.pupData.content=`<p>会议开始前15分钟内无法设置会议提醒</p>`
  672. this.pupData.type='time'
  673. }
  674. this.pupData.show=true
  675. }else if(res.code===403){
  676. if(res.data.type=='contact'){
  677. if(!res.data.customer_info.has_apply){
  678. if(res.data.customer_info.status=='冻结'||(res.data.customer_info.status=='试用'&&res.data.customer_info.is_suspend==1)){
  679. apiApplyPermission({
  680. company_name:res.data.customer_info.company_name,
  681. real_name:res.data.customer_info.name,
  682. source:2,
  683. from_page:'活动列表'
  684. }).then(res=>{
  685. if(res.code===200){
  686. console.log('主动申请成功');
  687. }
  688. })
  689. }
  690. }
  691. this.pupData.content=`<p>您暂无权限参加此会议,若想参加请联系对口销售--${res.data.name}:${res.data.mobile}</p>`
  692. this.pupData.mobile=res.data.mobile
  693. }else if(res.data.type=='apply'){
  694. this.pupData.content=`<p>您暂无权限参加此会议,若想参加可以申请开通哦</p>`
  695. }
  696. this.pupData.show=true
  697. this.pupData={...this.pupData,...res.data}
  698. }
  699. },
  700. //取消提醒
  701. async handleCancelRemind(e,index){
  702. const res=await apiActivityCancelRemind({activity_id:Number(e.activityId)})
  703. if(res.code===200){
  704. uni.showToast({
  705. title:"取消提醒成功",
  706. icon:"none"
  707. })
  708. this.handleUpateRemindStatus(index)
  709. }else if(res.code===403){
  710. uni.showToast({
  711. title:res.msg,
  712. icon:"none"
  713. })
  714. }
  715. },
  716. //更新列表中某项的设置提醒状态
  717. handleUpateRemindStatus(index){
  718. if(this.list[index].hasRemind===0){
  719. this.list[index].hasRemind=1
  720. }else{
  721. this.list[index].hasRemind=0
  722. }
  723. },
  724. handleRegister(e,index){
  725. if(e.registerState===0){
  726. this.handleAddRegister(e,index)
  727. }else{
  728. this.handleCancelRegister(e,index)
  729. }
  730. },
  731. // 线下报名
  732. async handleAddRegister(e,index){
  733. const res=await apiActivityRegister({activity_id:Number(e.activityId)})
  734. if(res.code===200){
  735. this.pupData.content=`<h4 style="text-align:center;margin-bottom:5px">报名成功</h4>
  736. <p>关注【弘则研究】公众号,接收会前1小时微信提醒,并及时获取活动信息变更通知</p>`
  737. this.pupData.show=true
  738. this.handleUpdateRegister(index)
  739. }else if(res.code===4001){
  740. if(res.data.type=='time'){
  741. this.pupData.content=`<p>活动开始前15分钟内无法设置会议提醒</p>`
  742. this.pupData.type='time'
  743. }else if(res.data.type=='full'){
  744. this.pupData.content=`<p>此活动报名人数已满,请留意下期活动</p>`
  745. this.pupData.type='full'
  746. }
  747. this.pupData.show=true
  748. }else if(res.code===403){
  749. if(res.data.type=='contact'){
  750. if(!res.data.customer_info.has_apply){
  751. if(res.data.customer_info.status=='冻结'||(res.data.customer_info.status=='试用'&&res.data.customer_info.is_suspend==1)){
  752. apiApplyPermission({
  753. company_name:res.data.customer_info.company_name,
  754. real_name:res.data.customer_info.name,
  755. source:2,
  756. from_page:'活动列表'
  757. }).then(res=>{
  758. if(res.code===200){
  759. console.log('主动申请成功');
  760. }
  761. })
  762. }
  763. }
  764. this.pupData.content=`<p>您暂无权限参加此活动,若想参加请联系对口销售--${res.data.name}:${res.data.mobile}</p>`
  765. this.pupData.mobile=res.data.mobile
  766. }else if(res.data.type=='apply'){
  767. this.pupData.content=`<p>您暂无权限参加此活动,若想参加可以申请开通哦</p>`
  768. }
  769. this.pupData.show=true
  770. this.pupData={...this.pupData,...res.data}
  771. }
  772. },
  773. //取消线下报名
  774. async handleCancelRegister(e,index){
  775. const res=await apiActivityCancelRegister({activity_id:Number(e.activityId)})
  776. if(res.code===200){
  777. uni.showToast({
  778. title:"取消报名成功",
  779. icon:"none"
  780. })
  781. this.handleUpdateRegister(index)
  782. }else if(res.code===403){
  783. uni.showToast({
  784. title:res.msg,
  785. icon:"none"
  786. })
  787. }
  788. },
  789. // 更新报名状态
  790. handleUpdateRegister(index){
  791. if(this.list[index].registerState===0){
  792. this.list[index].registerState=1
  793. }else{
  794. this.list[index].registerState=0
  795. }
  796. },
  797. // 点击立即申请
  798. async handleApply(){
  799. if(this.pupData.customer_info.has_apply){//已经申请过
  800. this.pupData.content=`<p>您已提交过申请,请耐心等待</p>`
  801. this.pupData.type=''
  802. }else{
  803. if(!this.pupData.customer_info.status||this.pupData.customer_info.status!='流失'){
  804. uni.navigateTo({
  805. url:"/pages-applyPermission/applyPermission?source=2"
  806. })
  807. }else{//主动调一次申请权限接口
  808. const res=await apiApplyPermission({
  809. company_name:this.pupData.customer_info.company_name,
  810. real_name:this.pupData.customer_info.name,
  811. source:2,
  812. from_page:'活动列表'
  813. })
  814. if(res.code===200){
  815. this.pupData.content=`<p>申请已提交</p><p>请等待销售人员与您联系</p>`
  816. this.pupData.type=''
  817. }
  818. }
  819. }
  820. },
  821. // 拨打电话
  822. handleCallPhone(tel){
  823. uni.makePhoneCall({
  824. phoneNumber: tel
  825. });
  826. }
  827. }
  828. }
  829. </script>
  830. <style lang="scss">
  831. .audio-popup-box{
  832. .title{
  833. font-size: 16px;
  834. font-weight: bold;
  835. padding: 40rpx 34rpx 0 34rpx;
  836. }
  837. .list{
  838. max-height: 50vh;
  839. overflow-y: auto;
  840. }
  841. .item{
  842. padding: 34rpx 52rpx 34rpx 34rpx;
  843. border-bottom: 1px solid $global-border-color;
  844. justify-content: space-between;
  845. image{
  846. width: 48rpx;
  847. height: 48rpx;
  848. flex-shrink: 0;
  849. }
  850. }
  851. .box{
  852. align-items: center;
  853. padding: 0rpx 54rpx 30rpx 54rpx;
  854. text{
  855. width: 110rpx;
  856. display: inline-block;
  857. font-size: 12px;
  858. }
  859. slider{
  860. flex: 1;
  861. }
  862. }
  863. .btns{
  864. width: 45%;
  865. margin-left: auto;
  866. margin-right: auto;
  867. margin-bottom: 20rpx;
  868. justify-content: space-between;
  869. image{
  870. width: 58rpx;
  871. height: 58rpx;
  872. }
  873. .next{
  874. transform: rotate(180deg);
  875. }
  876. }
  877. }
  878. .search-wrap {
  879. padding: 0 8rpx;
  880. background-color: $global-bg-color;
  881. }
  882. .tabs-wrap {
  883. background-color: $global-bg-color;
  884. box-shadow: $global-tab-shadow-color;
  885. align-items: center;
  886. text-align: center;
  887. font-size: $global-font-size-lg;
  888. color: $global-text-color-grey;
  889. position: relative;
  890. z-index: 10;
  891. .tab-item {
  892. flex: 1;
  893. height: 94rpx;
  894. line-height: 94rpx;
  895. }
  896. .tab-active {
  897. font-weight: bold;
  898. color: $global-text-color-main;
  899. border-bottom: 6rpx solid $global-text-color-main;
  900. }
  901. }
  902. .status-wrap {
  903. background-color: $global-bg-color;
  904. padding: 40rpx 34rpx 20rpx 34rpx;
  905. overflow-x: scroll;
  906. width: 100%;
  907. margin-right: 34rpx;
  908. align-items: center;
  909. &::-webkit-scrollbar{
  910. width: 0;
  911. display: none;
  912. }
  913. .status-item {
  914. font-size: $global-font-size-sm;
  915. color: #444;
  916. min-width: 167rpx;
  917. text-align: center;
  918. padding: 14rpx;
  919. border-radius: 40rpx;
  920. background-color: #f6f6f6;
  921. margin-right: 40rpx;
  922. // height: 60rpx;
  923. }
  924. .status-active {
  925. background: linear-gradient(270deg, #efc896 0%, #d9a35f 100%);
  926. color: $global-bg-color;
  927. }
  928. .auth-box{
  929. margin-right: 40rpx;
  930. .text{
  931. color: $global-text-color-main;
  932. font-size: $global-font-size-sm;
  933. min-width: 120rpx;
  934. white-space: nowrap;
  935. }
  936. }
  937. }
  938. .list {
  939. padding: 34rpx;
  940. .item {
  941. position: relative;
  942. margin-bottom: 30rpx;
  943. .status-box {
  944. top: 0;
  945. right: 0;
  946. position: absolute;
  947. width: 132rpx;
  948. line-height: 44rpx;
  949. text-align: center;
  950. font-size: $global-font-size-sm;
  951. color: $global-text-color-white;
  952. }
  953. .status-before {
  954. background-color: #e3b377;
  955. }
  956. .status-progress {
  957. background-color: #3385ff;
  958. }
  959. .status-end {
  960. background-color: #a2a2a2;
  961. }
  962. .top {
  963. padding-top: 64rpx;
  964. padding-left: 30rpx;
  965. padding-right: 30rpx;
  966. padding-bottom: 42rpx;
  967. .avatar {
  968. width: 168rpx;
  969. height: 168rpx;
  970. border-radius: 50%;
  971. margin-right: 30rpx;
  972. flex-shrink: 0;
  973. border: 1px solid $global-border-color;
  974. }
  975. .title {
  976. font-size: $global-font-size-lg;
  977. font-weight: bold;
  978. width: 400rpx;
  979. padding-right: 80rpx;
  980. padding-bottom: 10rpx;
  981. border-bottom: 1px solid $global-border-color;
  982. }
  983. .name {
  984. color: $global-text-color-grey;
  985. margin: 20rpx 0;
  986. }
  987. .time {
  988. font-size: $global-font-size-sm;
  989. color: $global-text-color-999;
  990. }
  991. }
  992. .bot {
  993. border-top: 1px solid $global-border-color;
  994. color: $global-text-color-999;
  995. view {
  996. line-height: 72rpx;
  997. flex: 1;
  998. text-align: center;
  999. border-right: 1px solid $global-border-color;
  1000. }
  1001. view:last-child {
  1002. border: none;
  1003. }
  1004. .active{
  1005. color: #E3B377;
  1006. }
  1007. }
  1008. .content{
  1009. width: 420rpx;
  1010. position: relative;
  1011. .icon-box{
  1012. align-items: center;
  1013. position: absolute;
  1014. right: 0;
  1015. top: -10rpx;
  1016. font-size: $global-font-size-sm;
  1017. color:$global-text-color-main;
  1018. width: 100rpx;
  1019. height: 70rpx;
  1020. justify-content: center;
  1021. image{
  1022. width: 26rpx;
  1023. height: 26rpx;
  1024. margin-right: 4rpx;
  1025. }
  1026. }
  1027. }
  1028. }
  1029. }
  1030. </style>