activity.vue 33 KB

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