ticketlist.vue 33 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136
  1. <template>
  2. <view class="pages">
  3. <view class="navbar-box">
  4. <u-navbar title=" " :safeAreaInsetTop="true" @leftClick="leftClick" :titleStyle="{color:'#fff'}" leftIconColor="#fff" bgColor="transparent"></u-navbar>
  5. </view>
  6. <view class="banner">
  7. <!-- <image class="img" :src="staticUrl+'/img/bookticket-banner.png'" alt=""> -->
  8. <!-- <image class="img" :src="theatre.showImg" alt=""> -->
  9. <u-swiper
  10. :list="performInfo.photoList"
  11. height="554rpx"
  12. indicatorMode="dot"
  13. :indicatorStyle="{bottom:'100rpx'}"
  14. keyName="imageUrl"
  15. radius="0"
  16. @click="previewBanner"
  17. :indicator="false"
  18. circular
  19. ></u-swiper>
  20. <!-- <view class="content">
  21. <view class="share" @click="openShare()">
  22. <image class="icon" :src="staticUrl+'/img/share-ico.png'" ></image>
  23. </view>
  24. </view> -->
  25. </view>
  26. <view class="base-info">
  27. <view class="inner">
  28. <view class="name">{{performInfo.name}}</view>
  29. <view class="addr u-flex u-row-between">
  30. <view class="text">演出地址:{{theatre.address||''}}</view>
  31. <view class="menu u-flex">
  32. <view class="item" @click="goMap">
  33. <image class="icon" :src="staticUrl+'/img/map-ico.png'" ></image>
  34. <text>导航</text>
  35. </view>
  36. <view class="item" @click="phoneCall">
  37. <image class="icon" :src="staticUrl+'/img/phone-call-ico.png'" ></image>
  38. <text>电话</text>
  39. </view>
  40. <view class="item" @click="openShare()">
  41. <image class="icon" :src="staticUrl+'/img/share-ico-v2.png'" ></image>
  42. <text>分享</text>
  43. </view>
  44. <!-- <u-icon name="arrow-right" color="#ffffff" size="36rpx" @click="goMap"></u-icon>
  45. <u-icon name="arrow-right" color="#ffffff" size="36rpx" @click="goMap"></u-icon> -->
  46. </view>
  47. </view>
  48. </view>
  49. </view>
  50. <view class="tabs-wrap">
  51. <view class="inner">
  52. <u-tabs
  53. :list="tabsArr"
  54. @click="tabsClick"
  55. lineColor="#ED0000"
  56. lineWidth="82rpx"
  57. :activeStyle="{color: '#2D2D2D',fontWeight: 'bold'}"
  58. itemStyle="width:33%; height: 46px;box-sizing:border-box"
  59. >
  60. </u-tabs>
  61. </view>
  62. </view>
  63. <view class="page-wrap">
  64. <view class="ticket" v-if="tabsIndex==0">
  65. <view class="date-block">
  66. <view class="title">演出日期</view>
  67. <view class="date-list u-flex">
  68. <view class="date-item"
  69. :class="{active:dateIndex==index,dot:performDateList.find(item => item.performDate === `${date.year}-${date.month}-${date.day}`) !== undefined}"
  70. @click="dateClick(index)"
  71. v-for="(date,index) in dateList" :key="index">
  72. <!-- <view class="name">{{ date.name || ' ' }}</view> -->
  73. <!-- <view class="name">
  74. {{ performDateList.find(item => item.performDate === date.fullDay ) !== undefined?'有演出':'无演出' }}
  75. </view> -->
  76. <view class="name">
  77. {{date.fullDay|checkWeekDate}}
  78. </view>
  79. <view class="date">{{ date.month }} - {{ date.day }}</view>
  80. <image class="selected-img" :src="staticUrl+'/img/selected.png'"></image>
  81. </view>
  82. <view class="date-item more-date u-flex u-row-center" @click="calendarShow = true">
  83. <view class="text">
  84. <view class="">更多</view>
  85. <view class="">日期</view>
  86. </view>
  87. <u-icon name="arrow-right" color="#7F7F7F" size="24rpx"></u-icon>
  88. </view>
  89. </view>
  90. </view>
  91. <view class="date-block auditorium generic-block" v-show="false">
  92. <view class="title">演出厅</view>
  93. <view class="date-list u-flex u-flex-wrap">
  94. <view class="date-item" :class="{active:auditoriumIndex==index}" @click="auditoriumClick(index)" v-for="(date,index) in auditoriumList" :key="index">
  95. <view class="name">{{ date.name }}</view>
  96. </view>
  97. </view>
  98. </view>
  99. <view class="date-block session-wrap generic-block">
  100. <view class="title">演出场次</view>
  101. <view class="empty" v-if="auditoriumList.length>=1&&sessionList.length<1">
  102. 当前日期暂无演出场次,请重新选择
  103. </view>
  104. <view class="date-list u-flex u-flex-wrap" v-else>
  105. <view class="date-item" :class="{active:sessionIndex==index}" @click="sessionClick(index)" v-for="(date,index) in sessionList" :key="index">
  106. <view class="name">{{ date.performTimeStart}} - {{date.performTimeEnd}}</view>
  107. </view>
  108. </view>
  109. </view>
  110. <!-- <view class="date-block generic-block session-wrap">
  111. <view class="title">演出场次</view>
  112. <view class="session">
  113. <view class="session-item" :class="{active:sessionIndex==index}" @click="sessionClick(index)" v-for="(date,index) in sessionList" :key="index">
  114. {{ date.performTimeStart}} - {{date.performTimeEnd}}
  115. </view>
  116. </view>
  117. <view class="empty" v-if="auditoriumList.length>=1&&sessionList.length<1">
  118. 当前日期暂无演出场次,请重新选择
  119. </view>
  120. </view> -->
  121. <view class="date-block ticket-type generic-block" v-if="sessionList.length>=1">
  122. <view class="title">票务信息</view>
  123. <view class="empty" v-if="ticketTypeList.length<1">
  124. 暂无门票
  125. </view>
  126. <view class="date-list u-flex u-flex-wrap">
  127. <view class="date-item" :class="{active:ticketTypeIndex==index}" @click="ticketTypeClick(index)" v-for="(date,index) in ticketTypeList" :key="index">
  128. <view class="name">{{ date.goodsName }}</view>
  129. </view>
  130. </view>
  131. <view class="goodsSnapshot" v-if="ticketTypeList.length>0&&goodsSnapshot">
  132. 票务说明:{{goodsSnapshot}}
  133. </view>
  134. <!-- <view class="type-item" :class="{active:sessionIndex==index}" v-for="(item,index) in ticketTypeList" :key="index">
  135. <view class="name-price u-flex u-row-between">
  136. <view class="name">{{item.goodsName}}</view>
  137. <view class="prices">¥ {{item.salePrice}} 起</view>
  138. </view>
  139. <view class="bottom u-flex u-row-between">
  140. <view class="left u-flex" v-html="item.goodsSnapshot||''">
  141. </view>
  142. <view class="btn" @click="book(item)" v-if="item.quantity!==0&&sessionList.length>=1">预定</view>
  143. <view class="btn disabled" v-else>无票</view>
  144. </view>
  145. </view> -->
  146. </view>
  147. <view class="date-block position-select generic-block" v-if="sessionList.length>=1">
  148. <view class="title u-flex u-row-between">
  149. <view class="">类型选择</view>
  150. <view v-if="positionData.seatImg" class="" style="font-size: 24rpx;color: #aaa" @click="showSeatImg">票区图</view>
  151. </view>
  152. <view class="empty" v-if="positionArr.length<1">
  153. 没有座位信息
  154. </view>
  155. <view class="date-list u-flex u-flex-wrap">
  156. <view class="date-item" :class="{active:positionIndex==index}" @click="positionClick(index)" v-for="(date,index) in positionArr" :key="index">
  157. <view class="name">{{ date.seatTypeName }} <br />¥ {{date.salePrice}}</view>
  158. </view>
  159. </view>
  160. </view>
  161. <view class="book-btn full-btn" v-if="positionArr.length>=1&&sessionList.length>=1" @click="book()">确定</view>
  162. <view class="full-btn gray" v-else>确定</view>
  163. </view>
  164. <!-- ticket end -->
  165. <view class="details" v-if="tabsIndex==1">
  166. <view class="details-block">
  167. <view class="title">剧情简介</view>
  168. <view class="intro parse-content">
  169. <u-parse :content="performInfo.performSnapshot"></u-parse>
  170. </view>
  171. </view>
  172. <view class="details-block actors">
  173. <view class="title u-flex u-row-between">
  174. 演职人员
  175. <view class="right u-flex" @click="$u.route('pages/actors',{performId:performId})">
  176. <text>更多</text>
  177. <u-icon name="arrow-right" color="#7F7F7F" size="24rpx"></u-icon>
  178. </view>
  179. </view>
  180. <view class="actor-list">
  181. <u-scroll-list :indicator="false">
  182. <view class="item" v-for="(item, index) in actorsArr" :key="index" @click="$u.route('/pages/actorsinfo',{id:item.id})">
  183. <image class="img" :src="item.performerHead||staticUrl+'/img/actors.png'"></image>
  184. <view class="text">
  185. <view class="name">{{item.performerName}}</view>
  186. <view class="role u-line-1">{{item.performerRole}}</view>
  187. </view>
  188. </view>
  189. </u-scroll-list>
  190. <u-empty text="暂无" v-if="actorsArr.length<1"></u-empty>
  191. </view>
  192. </view>
  193. </view>
  194. <view class="viewingTips parse-content" v-if="tabsIndex==2">
  195. <u-parse :content="formerNotice"></u-parse>
  196. </view>
  197. </view>
  198. <!-- :maxDate="maxDate" -->
  199. <u-calendar
  200. ref="calendar"
  201. :formatter="formatter"
  202. :maxDate="maxDate"
  203. monthNum="12"
  204. :show="calendarShow"
  205. color="#EF1010"
  206. :closeOnClickOverlay="true"
  207. @close="closeCalendar"
  208. @confirm="confirmCalendar">
  209. </u-calendar>
  210. <!-- 分享选择弹出内容 -->
  211. <view class="share-option" :class="{shareShow:shareShow}">
  212. <view class="overlay" v-if="shareShow" @click="shareShow=false"></view>
  213. <!-- #ifdef MP-WEIXIN -->
  214. <button class="share-option-item wx-share" data-name="shareBtn" open-type="share">
  215. 发送给朋友
  216. </button>
  217. <!-- #endif -->
  218. <view class="share-option-item" @click="getPoster">生成海报</view>
  219. <view class="share-option-item" @click="shareShow=false">取消</view>
  220. </view>
  221. <u-popup :show="posterShow" @close="posterShow=false" ref="uni-popup">
  222. <view class="poster-wrap u-flex u-col-center">
  223. <view class="poster-inner">
  224. <view class="close-wrap" @click="posterShow=false">
  225. <u-icon name="close-circle" color="#fff" size="56rpx"></u-icon>
  226. </view>
  227. <view class="poster" id="poster" ref="poster" >
  228. <u--image :showLoading="false" :src="posterSrc" width="100%" height="65vh" mode="aspectFit"></u--image>
  229. </view>
  230. <!-- savePoster -->
  231. <view class="poster-btn" @click="saveImage">保存图片</view>
  232. </view>
  233. </view>
  234. </u-popup>
  235. <canvas canvas-id="canvas" class="canvas" style="width: 574px; height: 1042px;"></canvas>
  236. </view>
  237. </template>
  238. <script>
  239. import moment from 'moment';
  240. import { systemInfo } from "@/mixin.js";
  241. // 日历
  242. const d = new Date()
  243. const year = d.getFullYear()
  244. let month = d.getMonth() + 1
  245. month = month < 10 ? `0${month}` : month
  246. const date = d.getDate()
  247. // 日历
  248. // 算最大日期
  249. const maxd = new Date()
  250. maxd.setMonth(maxd.getMonth() + 12) // 将月份加3
  251. const maxdyear = maxd.getFullYear()
  252. let maxdmonth = maxd.getMonth() + 1
  253. maxdmonth = maxdmonth < 10 ? `0${maxdmonth}` : maxdmonth
  254. const maxddate = maxd.getDate()
  255. const theMaxDate = `${maxdyear}-${maxdmonth}-${maxddate}`
  256. // console.log('theMaxDate=============================',theMaxDate) //输出:
  257. //算最大日期
  258. let parentThis= null;
  259. let sharePath = '/pages/index/index';
  260. export default {
  261. onShareAppMessage(res) {
  262. if (res.from === 'button') {// 来自页面内分享按钮
  263. console.log(res.target)
  264. }
  265. return {
  266. title: '伟大转折演艺',
  267. path: sharePath
  268. }
  269. },
  270. onShareTimeline(res) {
  271. if (res.from === 'button') {// 来自页面内分享按钮
  272. console.log(res.target)
  273. }
  274. return {
  275. title: '伟大转折演艺',
  276. path: '/pages/ticketlist'
  277. }
  278. },
  279. mixins:[systemInfo],
  280. data() {
  281. return {
  282. performId:'',
  283. staticUrl:this.$commonConfig.staticUrl,
  284. tabsArr:[
  285. {name:'票务购买'},
  286. {name:'演出详情'},
  287. {name:'观影须知'}
  288. ],
  289. theatre:{},
  290. tabsIndex:0,
  291. dateList:[],
  292. dateIndex:0,
  293. calendarShow:false,//日历
  294. // maxDate:`${year}-${month}-${date + 30}`,
  295. maxDate:theMaxDate,
  296. auditoriumList:[],//演艺厅
  297. auditoriumIndex:0,
  298. sessionList:[],//演出场次
  299. sessionIndex:0,
  300. ticketTypeList:[],//门票
  301. actorsArr:[],
  302. shareShow:false,
  303. posterShow:false,
  304. posterSrc:'',
  305. posterSrcType:null,
  306. performInfo:{},//节目详情
  307. formerNotice:{},//节目观影须知
  308. performDateList:[],//有票的日期
  309. // firstGet:0,
  310. ticketTypeIndex:0,
  311. positionData:{},//座位信息接口
  312. positionArr:[],
  313. positionIndex:0,
  314. scene:null,
  315. retailId:null,//分销码
  316. label:null,//scene解析出来的
  317. goodsSnapshot:null,//票务说明
  318. retailId:null,
  319. }
  320. },
  321. onShow() {
  322. if(this.auditoriumList.length>=1){
  323. this.getPositionData();
  324. }
  325. },
  326. onLoad(page) {
  327. // console.log('ticketlist page',page);
  328. parentThis = this;
  329. const scene = decodeURIComponent(page.scene);
  330. if(scene&&scene!='undefined'){
  331. uni.setStorage({
  332. key:'scene',
  333. data:scene
  334. });
  335. }
  336. // console.log('scene=========',scene);
  337. if(scene&&scene!='undefined'){
  338. this.$u.api.uncompress({scene:scene}).then(res=>{
  339. this.performId = res.data.performId;
  340. sharePath=`/pages/ticketlist?id=${res.data.performId}`;
  341. this.getPerformData();
  342. // this.getSystemInfo();
  343. let today = new Date();
  344. this.setDate(today);
  345. this.getPerformInfo();
  346. this.getPerformerNotice();
  347. // this.label = res.data.label;
  348. // console.log('uncompress',res.data);
  349. }).catch(err=>{
  350. console.log('uncompress',err);
  351. })
  352. }else{
  353. this.performId = page.id;
  354. sharePath=`/pages/ticketlist?id=${page.id}`;
  355. this.getPerformData();
  356. // this.getSystemInfo();
  357. let today = new Date();
  358. this.setDate(today);
  359. this.getPerformInfo();
  360. this.getPerformerNotice();
  361. }
  362. },
  363. onReady() {
  364. // 如果需要兼容微信小程序的话,需要用此写法
  365. this.$refs.calendar.setFormatter(this.formatter);
  366. },
  367. methods: {
  368. leftClick(e){
  369. let pages = getCurrentPages();
  370. if(pages.length==1){
  371. uni.$u.route('/pages/index/index')
  372. }else{
  373. uni.navigateBack()
  374. };
  375. },
  376. uncompress(scene){
  377. this.$u.api.uncompress({scene:scene}).then(res=>{
  378. this.performId = res.data.performId;
  379. // this.label = res.data.label;
  380. // console.log('uncompress',res.data);
  381. }).catch(err=>{
  382. console.log('uncompress',err);
  383. })
  384. },
  385. getPerformData(){
  386. this.$u.api.performSell({performId:this.performId}).then(res=>{
  387. // console.log('getPerformData',res.data);
  388. this.theatre = res.data.theatreList[0];
  389. this.auditoriumList = res.data.theatreList[0].auditoriumList;
  390. // this.ticketTypeList = res.data.goodsList;
  391. // this.goodsSnapshot = this.ticketTypeList[this.ticketTypeIndex]?.goodsSnapshot;
  392. this.performDateList = this.auditoriumList[this.auditoriumIndex].performDateList;
  393. this.getDate()
  394. // console.log('auditoriumList',this.auditoriumList);
  395. }).catch(err=>{
  396. console.log('getPoster',err);
  397. })
  398. },
  399. getPerformInfo(){
  400. this.$u.api.performInfo({id:this.performId}).then(res=>{
  401. // console.log('getPerformInfo',res.data);
  402. this.performInfo = res.data;
  403. this.actorsArr = res.data.performerList;
  404. }).catch(err=>{
  405. console.log('getPerformInfo',err);
  406. })
  407. },
  408. getPerformerNotice(){
  409. this.$u.api.performerNotice({performId:this.performId}).then(res=>{
  410. // console.log('getPerformerNotice',res.data);
  411. this.formerNotice = res.data.performNotice;
  412. }).catch(err=>{
  413. console.log('getPerformerNotice',err);
  414. })
  415. },
  416. getDate(){
  417. let param = {
  418. auditoriumId:this.auditoriumList[this.auditoriumIndex]?.id,//演艺厅ID(演艺厅列表)
  419. performId:this.performId,
  420. };
  421. this.$u.api.getAuditoriumDate(param).then(res=>{
  422. // console.log('getDate',res.data);
  423. this.performDateList = res.data.list||[];
  424. this.setDate();
  425. // this.getTimes();
  426. }).catch(err=>{
  427. console.log('getDate',err);
  428. })
  429. },
  430. getTimes(){
  431. // this.firstGet++;
  432. uni.showLoading();
  433. let auditoriumId= this.auditoriumList[this.auditoriumIndex]?.id;
  434. if(!auditoriumId){return}
  435. // console.log('this.dateList',this.dateList);
  436. // console.log('this.dateIndex',this.dateIndex);
  437. let dateOBJ = this.dateList[this.dateIndex];
  438. let param = {
  439. auditoriumId:auditoriumId,//演艺厅ID(演艺厅列表)
  440. performId:this.performId,
  441. date:`${dateOBJ.year}-${dateOBJ.month}-${dateOBJ.day}`
  442. };
  443. // console.log('param',param);
  444. this.$u.api.getAuditoriumTimes(param).then(res=>{
  445. // console.log('getTimes',res.data);
  446. this.sessionList = res.data.list.map(item=>{
  447. item.performTimeStart = item.performTimeStart;
  448. item.performTimeEnd = item.performTimeEnd;
  449. return item
  450. });
  451. console.log('this.sessionList',this.sessionList);
  452. this.sessionIndex = 0;
  453. let session = this.sessionList[this.sessionIndex];
  454. this.getPositionData();
  455. }).catch(err=>{
  456. console.log('getPoster',err);
  457. })
  458. },
  459. formatter: (day) => {
  460. if(!parentThis){
  461. return
  462. }
  463. day.date = moment(day.date).format("YYYY-MM-DD HH:mm:ss")
  464. // console.log('day',day);
  465. // console.log('thisthisthisthisthisthisthisthisthis',parentThis);
  466. // console.log('==================================',day.date.toISOString().split('T')[0]);
  467. let ticket = parentThis.performDateList.find(item => item.performDate === day.date.split(' ')[0]);
  468. if(ticket){
  469. day.dot = true
  470. }
  471. // if(ticket&&ticket.ishave){
  472. // day.bottomInfo = '有票'
  473. // day.dot = true
  474. // }else if(ticket){
  475. // day.dot = true
  476. // }
  477. return day
  478. },
  479. setDate(firstDay,isSelect){
  480. // console.log('this.performDateList',this.performDateList);
  481. if(this.performDateList[0]?.performDate&&!isSelect){
  482. // firstDay = new Date(this.performDateList[0].performDate);
  483. const uniquePerformDateList = Array.from(new Set(this.performDateList.map(JSON.stringify))).map(JSON.parse);//去重
  484. // console.log('uniquePerformDateList',uniquePerformDateList);
  485. let arr = uniquePerformDateList.slice(0, 3);//只要前三项
  486. this.dateList = arr.map(item=>{
  487. // console.log('uniquePerformDateList item',item);
  488. let day = item.performDate.split('-');
  489. // console.log('setDate day',day);
  490. return { year:day[0],month:String(day[1]),day:String(day[2]), fullDay:`${day[0]}-${String(day[1])}-${String(day[2])}`}
  491. });
  492. // console.log('this.dateList',this.dateList);
  493. this.dateIndex = 0;
  494. this.getTimes();
  495. //
  496. return
  497. }
  498. // console.log('this.dateListthis.dateListthis.dateListthis.dateList',this.dateList);
  499. // 前端写演出日期(今天,明天,后天)
  500. let today = firstDay||new Date();
  501. // console.log('today=========',today);
  502. let tomorrow = new Date(today.getTime());
  503. tomorrow.setDate(today.getDate() + 1);
  504. let afterTomorrow = new Date(today.getTime());
  505. afterTomorrow.setDate(today.getDate() + 2);
  506. this.dateList = [
  507. {
  508. year: today.getFullYear(),
  509. month: String(today.getMonth() + 1).padStart(2, '0'),
  510. day: String(today.getDate()).padStart(2, '0'),
  511. name: '日期',
  512. fullDay:`${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${ String(today.getDate()).padStart(2, '0')}`
  513. },
  514. {
  515. year: tomorrow.getFullYear(),
  516. month: String(tomorrow.getMonth() + 1).padStart(2, '0'),
  517. day: String(tomorrow.getDate()).padStart(2, '0'),
  518. name: '日期',
  519. fullDay:`${tomorrow.getFullYear()}-${String(tomorrow.getMonth() + 1).padStart(2, '0')}-${ String(tomorrow.getDate()).padStart(2, '0')}`
  520. },
  521. {
  522. year: afterTomorrow.getFullYear(),
  523. month: String(afterTomorrow.getMonth() + 1).padStart(2, '0'),
  524. day: String(afterTomorrow.getDate()).padStart(2, '0'),
  525. name: '日期',
  526. fullDay:`${afterTomorrow.getFullYear()}-${String(afterTomorrow.getMonth() + 1).padStart(2, '0')}-${ String(afterTomorrow.getDate()).padStart(2, '0')}`
  527. }
  528. ];
  529. this.getTimes()
  530. // console.log('this.dateList ',this.dateList);
  531. },
  532. dateClick(index){
  533. this.dateIndex = index;
  534. this.ticketTypeIndex = 0;
  535. this.positionIndex = 0;
  536. this.getTimes()
  537. },
  538. auditoriumClick(index){
  539. this.auditoriumIndex = index;
  540. this.getDate();
  541. },
  542. confirmCalendar(e){
  543. // console.log('confirmCalendar',e);
  544. // this.getDate(e)
  545. this.dateIndex = 0;
  546. this.setDate( new Date(e),true );
  547. // console.log('maxDate',this.maxDate);
  548. // console.log('dateList',this.dateList);
  549. this.calendarShow = false;
  550. },
  551. closeCalendar(){
  552. this.calendarShow = false;
  553. },
  554. tabsClick(e){
  555. // console.log('tabsClick',e);
  556. this.tabsIndex = e.index;
  557. },
  558. sessionClick(index){
  559. if(this.sessionIndex==index){
  560. // console.log('不变');
  561. return
  562. }
  563. this.sessionIndex = index;
  564. let session = this.sessionList[this.sessionIndex];
  565. this.getPositionData();
  566. this.ticketTypeIndex = 0;
  567. this.positionIndex = 0;
  568. // console.log('sessionClick',this.sessionList[this.sessionIndex]);
  569. },
  570. async getPositionData(){
  571. let _this = this;
  572. let retailId = null;
  573. try {
  574. retailId = await new Promise((resolve, reject) => {
  575. uni.getStorage({
  576. key: 'retailId',
  577. success: function (res) {
  578. // console.log('getPositionData retailId====', res.data);
  579. resolve(res.data);
  580. },
  581. fail: function (error) {
  582. reject(error);
  583. }
  584. });
  585. });
  586. console.log('getPositionData retailId', retailId);
  587. } catch (error) {
  588. console.error('获取retailId失败', error);
  589. // 在这里可以添加处理失败的逻辑
  590. }
  591. this.retailId = retailId;
  592. // console.log('getPositionData this.retailId',this.retailId);
  593. // if(this.scene&&this.scene!='undefined'){
  594. // await this.$u.api.uncompress({scene:this.scene}).then(res=>{
  595. // // data.performId = res.data.performId;
  596. // this.label = res.data.label;
  597. // this.retailId = res.data.retailId;
  598. // console.log('uncompress',res.data);
  599. // }).catch(err=>{
  600. // console.log('uncompress',err);
  601. // })
  602. // }
  603. let session = this.sessionList[this.sessionIndex]||{};
  604. let ticketType = this.ticketTypeList[this.ticketTypeIndex];
  605. let params ={
  606. performId:this.performId,
  607. // goodsId:ticketType.id,
  608. auditoriumId:this.auditoriumList[this.auditoriumIndex].id,
  609. performTimeId:session.id,
  610. label:this.label,
  611. retailId:this.retailId
  612. }
  613. // console.log('getPositionData params',params);
  614. this.$u.api.selectRegion(params).then(res=>{
  615. // console.log('getPositionData',res.data);
  616. this.positionData = res.data;
  617. // this.positionArr = res.data.regionPriceList||[];
  618. this.ticketTypeList = res.data.goodsList||[];
  619. this.goodsSnapshot = this.ticketTypeList[this.ticketTypeIndex]?.goodsSnapshot;
  620. this.positionArr = this.ticketTypeList[this.ticketTypeIndex]?.regionList||[];
  621. uni.hideLoading();
  622. }).catch(err=>{
  623. uni.hideLoading();
  624. console.log('getPositionData',err);
  625. })
  626. },
  627. ticketTypeClick(index){
  628. if(this.ticketTypeIndex==index){
  629. // console.log('不变');
  630. return
  631. }
  632. this.ticketTypeIndex = index;
  633. this.goodsSnapshot = this.ticketTypeList[this.ticketTypeIndex]?.goodsSnapshot;
  634. this.positionArr = this.ticketTypeList[this.ticketTypeIndex]?.regionList||[];
  635. this.positionIndex = 0;
  636. // this.getPositionData()
  637. },
  638. positionClick(index){
  639. if(this.positionIndex==index){
  640. // console.log('不变');
  641. return
  642. }
  643. this.positionIndex = index;
  644. },
  645. book(item){
  646. // console.log('book',item);
  647. // console.log('performInfo',this.performInfo);
  648. let session = this.sessionList[this.sessionIndex];
  649. // console.log('session',session);
  650. let performTimeStart = session.performTimeStart;
  651. let performTimeEnd = session.performTimeEnd;
  652. let dateOBJ = this.dateList[this.dateIndex];
  653. let ticketType = this.ticketTypeList[this.ticketTypeIndex];
  654. let seatType = this.positionArr[this.positionIndex];
  655. // console.log('ticketType',ticketType);
  656. let params ={
  657. performId:this.performId,
  658. goodsId:ticketType.id,
  659. auditoriumId:this.auditoriumList[this.auditoriumIndex].id,
  660. performTimeId:session.id,
  661. seatTypeId:seatType.seatTypeId,
  662. salePrice:seatType.salePrice
  663. }
  664. // console.log('book params',params);
  665. uni.$u.route('pages/bookticket',params)
  666. // 调整选择位置类型页面
  667. // uni.$u.route('pages/chosenposition',{
  668. // goodsId:item.id,
  669. // performId:this.performId,
  670. // performName:this.performInfo.name,
  671. // day:`${dateOBJ.year}-${dateOBJ.month}-${dateOBJ.day}`,
  672. // performTimeStart:session.performTimeStart,
  673. // performTimeEnd:session.performTimeEnd,
  674. // performTimeId:session.id,
  675. // auditoriumId:this.auditoriumList[this.auditoriumIndex].id
  676. // })
  677. },
  678. openShare(){
  679. if(!this.performInfo.posterImg){
  680. uni.$u.toast('没有节目信息');
  681. return false
  682. }
  683. this.shareShow = true;
  684. },
  685. // 海报相关开始
  686. getPoster(item){
  687. this.posterShow = true;
  688. this.shareShow = false;
  689. // 后端生成海报
  690. // this.$u.api.performQrcode({performId:this.performId}).then(res=>{
  691. // this.posterSrc = res.data.imageUrl;
  692. // // console.log('getPoster',res.data);
  693. // }).catch(err=>{
  694. // console.log('getPoster',err);
  695. // })
  696. //前端生成海报
  697. uni.showLoading({
  698. title: '生成海报中'
  699. });
  700. // 前端生成海报开始
  701. let that = this;
  702. const ctx = uni.createCanvasContext('canvas', this);
  703. // 加载海报背景图
  704. uni.getImageInfo({
  705. src: this.performInfo.posterImg,
  706. success: res1 => {
  707. const img1 = res1.path;
  708. // 加载海报二维码
  709. uni.getImageInfo({
  710. src: this.performInfo.appletQrcode,
  711. success: res2 => {
  712. const img2 = res2.path;
  713. // 绘制海报背景图
  714. ctx.drawImage(img1, 0, 0, 574, 1042);
  715. // 绘制海报二维码
  716. ctx.drawImage(img2, 428, 888, 114, 114);
  717. // 绘制完成后导出图片并显示
  718. ctx.draw(false, () => {
  719. uni.canvasToTempFilePath({
  720. canvasId: 'canvas',
  721. success: res3 => {
  722. this.posterSrc = res3.tempFilePath;
  723. this.posterSrcType = 'local';
  724. },
  725. fail: err => {
  726. console.error(err);
  727. },
  728. }, this);
  729. });
  730. },
  731. fail: err2 => {
  732. console.error(err2);
  733. },
  734. });
  735. },
  736. fail: err1 => {
  737. console.error(err1);
  738. },
  739. complete: () => {
  740. uni.hideLoading()
  741. }
  742. });
  743. // 前端生成海报结束
  744. },
  745. saveImage() {
  746. let that = this;
  747. uni.showLoading({
  748. title: '保存中'
  749. });
  750. if(this.posterSrcType == 'local'){
  751. let params = {
  752. tempFilePath:that.posterSrc
  753. }
  754. that.saveImageToPhotosAlbum(params);
  755. return
  756. }
  757. uni.downloadFile({
  758. url: this.posterSrc,
  759. success(res) {
  760. if (res.statusCode === 200) {
  761. that.saveImageToPhotosAlbum(res)
  762. } else {
  763. uni.showToast({
  764. title: '下载图片失败',
  765. icon: 'none'
  766. });
  767. }
  768. },
  769. fail(e) {
  770. console.log('下载图片失败', e);
  771. console.log('posterSrc',that.posterSrc);
  772. uni.showToast({
  773. title: '下载图片失败',
  774. icon: 'none'
  775. });
  776. }
  777. });
  778. },
  779. saveImageToPhotosAlbum(res){
  780. let that = this;
  781. uni.saveImageToPhotosAlbum({
  782. filePath: res.tempFilePath,
  783. success() {
  784. uni.showToast({
  785. title: '保存相册成功!',
  786. icon: 'success'
  787. });
  788. },
  789. fail(err) {
  790. console.log('保存图片失败',err);
  791. if (err.errMsg === 'saveImageToPhotosAlbum:fail auth deny') {
  792. uni.getSetting({
  793. success(res) {
  794. if (!res.authSetting['scope.writePhotosAlbum']) {
  795. uni.showModal({
  796. title: '提示',
  797. content: '您还没有授权访问相册,请前往设置页面打开权限。',
  798. confirmText: '去设置',
  799. success(res) {
  800. if (res.confirm) {
  801. uni.openSetting();
  802. }
  803. }
  804. });
  805. } else {
  806. uni.showToast({
  807. title: '保存图片失败',
  808. icon: 'none'
  809. });
  810. }
  811. }
  812. });
  813. } else {
  814. uni.showToast({
  815. title: '保存图片失败',
  816. icon: 'none'
  817. });
  818. }
  819. },
  820. complete() {
  821. setTimeout(()=>{
  822. uni.hideLoading();
  823. that.posterShow = false;
  824. },1500)
  825. }
  826. });
  827. },
  828. // 海报相关结束
  829. goMap(){
  830. uni.openLocation({
  831. latitude:Number(this.theatre.latitude), //维度
  832. longitude: Number(this.theatre.longitude), //经度
  833. name: this.theatre.name, //目的地定位名称
  834. scale: 15, //缩放比例
  835. address: this.theatre.address //导航详细地址
  836. })
  837. },
  838. phoneCall(){
  839. // console.log('this.theatre',this.theatre);
  840. uni.makePhoneCall({
  841. phoneNumber: this.theatre.customerServiceMobile,
  842. success() {
  843. console.log('success');
  844. },
  845. fail() {
  846. console.log('fail');
  847. }
  848. });
  849. },
  850. showSeatImg(){
  851. if(!this.positionData.seatImg){
  852. uni.$u.toast('没有图片')
  853. return
  854. }
  855. let urls = [];
  856. urls.push(this.positionData.seatImg)
  857. uni.previewImage({
  858. urls: urls,
  859. })
  860. },
  861. previewBanner(index){
  862. let urls = this.performInfo.photoList.map(item=>{
  863. return item.imageUrl
  864. });
  865. // console.log('urls',urls);
  866. uni.previewImage({
  867. urls: urls,
  868. current:index
  869. })
  870. }
  871. }
  872. }
  873. </script>
  874. <style lang="scss" scoped>
  875. .banner{
  876. position: relative;
  877. .img{
  878. width: 750rpx;
  879. height: 554rpx;
  880. display: block;
  881. }
  882. .content{
  883. position: absolute;
  884. // width: 100%;
  885. box-sizing: border-box;
  886. padding: 0 32rpx;
  887. right: 0;
  888. bottom: 200rpx;
  889. }
  890. .share{
  891. overflow: hidden;
  892. margin-bottom: 100rpx;
  893. float: right;
  894. .icon{
  895. float: right;
  896. display: block;
  897. width: 32rpx;
  898. height: 32rpx;
  899. padding: 10rpx;
  900. border-radius: 50%;
  901. background-color: rgba(0,0,0,0.4);
  902. }
  903. }
  904. }
  905. .base-info{
  906. position: relative;
  907. // margin-bottom: 54rpx;
  908. .inner{
  909. position: relative;
  910. padding: 50rpx 38rpx 58rpx 40rpx;
  911. background-color: #FFFFFF;
  912. border-radius: 32rpx 32rpx 0rpx 0rpx;
  913. margin-top: -30px;
  914. border-bottom: 12rpx solid #F7F8F9;
  915. }
  916. .name{
  917. font-size: 40rpx;
  918. font-weight: 800;
  919. color: #2D2D2D;
  920. margin-bottom: 26rpx;
  921. }
  922. .addr{
  923. font-size: 26rpx;
  924. font-weight: 400;
  925. color: #606060;
  926. }
  927. .menu{
  928. .item{
  929. margin-left: 18rpx;
  930. font-size: 18rpx;
  931. font-weight: 400;
  932. color: #999999;
  933. text-align: center;
  934. }
  935. .icon{
  936. width: 62rpx;
  937. height: 64rpx;
  938. display: block;
  939. margin-bottom: 4rpx;
  940. }
  941. }
  942. }
  943. .tabs-wrap{
  944. position: relative;
  945. margin-bottom: 54rpx;
  946. &::after{
  947. content: '';
  948. width: 100%;
  949. height: 1px;
  950. background-color: #eee;
  951. position: absolute;
  952. left: 0;
  953. right: 0;
  954. bottom: -46rpx;
  955. }
  956. .inner{
  957. position: relative;
  958. padding-top: 48rpx;
  959. background-color: #FFFFFF;
  960. // border-radius: 32rpx 32rpx 0rpx 0rpx;
  961. height: 46rpx;
  962. // margin-top: -30px;
  963. }
  964. }
  965. .date-block{
  966. margin-bottom: 64rpx;
  967. }
  968. .title{
  969. font-size: 32rpx;
  970. font-weight: bold;
  971. color: #2D2D2D;
  972. line-height: 48rpx;
  973. margin-bottom: 38rpx;
  974. }
  975. .empty{
  976. background-color: #636363;
  977. color: #979797;
  978. border-radius: 8rpx;
  979. padding: 24rpx;
  980. text-align: center;
  981. }
  982. .session-wrap{
  983. }
  984. .session{
  985. display: grid;
  986. grid-template-columns: repeat(3, 1fr);
  987. gap: 20rpx;
  988. .session-item{
  989. height: 80rpx;
  990. line-height: 80rpx;
  991. border-radius: 12rpx;
  992. border: 2rpx solid #636363;
  993. text-align: center;
  994. font-size: 24rpx;
  995. font-weight: 400;
  996. color: #636363;
  997. &.active{
  998. color: #ED0000;
  999. border-color: #ED0000;
  1000. }
  1001. }
  1002. }
  1003. .ticket-type{
  1004. .type-item{
  1005. background: #FFFFFF;
  1006. box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(180,180,180,0.5);
  1007. border-radius: 20rpx;
  1008. margin-bottom: 20rpx;
  1009. padding: 38rpx 40rpx;
  1010. .name-price{
  1011. margin-bottom: 26rpx;
  1012. }
  1013. .name{
  1014. font-size: 28rpx;
  1015. font-weight: 500;
  1016. color: #363636;
  1017. }
  1018. .prices{
  1019. font-size: 36rpx;
  1020. font-weight: bold;
  1021. color: #ED0000;
  1022. }
  1023. .ishave{
  1024. margin-bottom: 26rpx;
  1025. .text{
  1026. height: 30rpx;
  1027. line-height: 30rpx;
  1028. padding: 0 22rpx;
  1029. background: #FFC8C8;
  1030. border-radius: 20rpx;
  1031. font-size: 20rpx;
  1032. font-weight: 400;
  1033. color: #ED0000;
  1034. }
  1035. }
  1036. .bottom{
  1037. font-size: 22rpx;
  1038. font-weight: 400;
  1039. color: #7F7F7F;
  1040. .btn{
  1041. height: 60rpx;
  1042. line-height: 60rpx;
  1043. background: linear-gradient(90deg, #FF7979 0%, #ED0000 100%);
  1044. border-radius: 30rpx;
  1045. padding: 0 36rpx;
  1046. font-size: 28rpx;
  1047. font-weight: 500;
  1048. color: #FFFFFF;
  1049. &.disabled{
  1050. background: #979797;
  1051. }
  1052. }
  1053. }
  1054. }
  1055. .goodsSnapshot{
  1056. font-size: 24rpx;
  1057. color: #750000;
  1058. line-height: 1.5;
  1059. margin-top: 24rpx;
  1060. padding-bottom: 24rpx;
  1061. // border-bottom: 1px solid #750000;
  1062. }
  1063. }
  1064. .details{
  1065. .title{}
  1066. .details-block{
  1067. background: #FFFFFF;
  1068. box-shadow: 0rpx 2rpx 12rpx 2rpx rgba(221,221,221,0.5);
  1069. border-radius: 20rpx;
  1070. margin-bottom: 24rpx;
  1071. padding: 36rpx;
  1072. &.actors{
  1073. .title{
  1074. .right{
  1075. font-size: 24rpx;
  1076. font-weight: 400;
  1077. color: #7F7F7F;
  1078. }
  1079. }
  1080. }
  1081. }
  1082. .intro{
  1083. font-size: 26rpx;
  1084. font-weight: 400;
  1085. color: #4E4E4E;
  1086. line-height: 40rpx;
  1087. }
  1088. .actor-list{
  1089. .item{
  1090. flex-shrink: 0;
  1091. width: 160rpx;
  1092. text-align: center;
  1093. margin-right: 24rpx;
  1094. }
  1095. .img{
  1096. display: block;
  1097. width: 100%;
  1098. height: 200rpx;
  1099. margin-bottom: 16rpx;
  1100. }
  1101. .name{
  1102. font-size: 28rpx;
  1103. font-weight: 500;
  1104. color: #2D2D2D;
  1105. line-height: 42rpx;
  1106. margin-bottom: 4rpx;
  1107. }
  1108. .role{
  1109. font-size: 24rpx;
  1110. font-weight: 400;
  1111. color: #7F7F7F;
  1112. line-height: 36rpx;
  1113. }
  1114. }
  1115. }
  1116. .canvas{
  1117. position: fixed;
  1118. left: -99999px;
  1119. }
  1120. </style>