|
|
@@ -4,15 +4,16 @@
|
|
|
<u-navbar title="订单详情" :safeAreaInsetTop="true" @leftClick="leftClick" :titleStyle="{color:'#fff'}" leftIconColor="#fff" bgColor="transparent"></u-navbar>
|
|
|
</view>
|
|
|
<view class="banner">
|
|
|
- <image class="img" :src="staticUrl+'/img/bookticket-banner.png'" alt="">
|
|
|
+ <!-- <image class="img" :src="staticUrl+'/img/bookticket-banner.png'" alt=""> -->
|
|
|
+ <image class="img" :src="theatre.showImg" alt="">
|
|
|
<view class="content">
|
|
|
- <view class="share">
|
|
|
+ <view class="share" @click="openShare(item)">
|
|
|
<image class="icon" :src="staticUrl+'/img/share-ico.png'" ></image>
|
|
|
</view>
|
|
|
- <view class="name">《伟大转折》</view>
|
|
|
+ <view class="name">{{theatre.name}}</view>
|
|
|
<view class="addr u-flex u-row-between">
|
|
|
- <view class="text">演出地址：遵义市《伟大转折》演艺中心</view>
|
|
|
- <u-icon name="arrow-right" color="#ffffff" size="36rpx"></u-icon>
|
|
|
+ <view class="text">{{theatre.address}}</view>
|
|
|
+ <u-icon name="arrow-right" color="#ffffff" size="36rpx" @click="goMap"></u-icon>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -24,13 +25,21 @@
|
|
|
lineColor="#ED0000"
|
|
|
lineWidth="82rpx"
|
|
|
:activeStyle="{color: '#2D2D2D',fontWeight: 'bold'}"
|
|
|
- itemStyle="width:50%; height: 46px;box-sizing:border-box"
|
|
|
+ itemStyle="width:33%; height: 46px;box-sizing:border-box"
|
|
|
>
|
|
|
</u-tabs>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="page-wrap">
|
|
|
<view class="ticket" v-if="tabsIndex==0">
|
|
|
+ <view class="date-block auditorium">
|
|
|
+ <view class="title">演出厅</view>
|
|
|
+ <view class="date-list u-flex u-flex-wrap">
|
|
|
+ <view class="date-item" :class="{active:auditoriumIndex==index}" @click="auditoriumClick(index)" v-for="(date,index) in auditoriumList" :key="index">
|
|
|
+ <view class="name">{{ date.name }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
<view class="date-block">
|
|
|
<view class="title">游玩日期</view>
|
|
|
<view class="date-list u-flex">
|
|
|
@@ -51,26 +60,30 @@
|
|
|
<view class="title">演出场次</view>
|
|
|
<view class="session">
|
|
|
<view class="session-item" :class="{active:sessionIndex==index}" @click="sessionClick(index)" v-for="(date,index) in sessionList" :key="index">
|
|
|
- {{ date.session }}
|
|
|
+ {{ $u.timeFormat(date.performTimeStart, 'hh:MM') }} - {{ $u.timeFormat(date.performTimeEnd, 'hh:MM') }}
|
|
|
</view>
|
|
|
</view>
|
|
|
+ <view class="empty" v-if="auditoriumList>=1&&sessionList.length<1">
|
|
|
+ 当前日期暂无演出场次，请重新选择
|
|
|
+ </view>
|
|
|
</view>
|
|
|
<view class="date-block ticket-type">
|
|
|
<view class="title">门票</view>
|
|
|
<view class="type-item" :class="{active:sessionIndex==index}" v-for="(item,index) in ticketTypeList" :key="index">
|
|
|
<view class="name-price u-flex u-row-between">
|
|
|
- <view class="name">{{item.name}}</view>
|
|
|
- <view class="prices">¥ {{item.prices}}</view>
|
|
|
+ <view class="name">{{item.goodsName}}</view>
|
|
|
+ <view class="prices">¥ {{item.salePrice}}</view>
|
|
|
</view>
|
|
|
<view class="ishave">
|
|
|
- <text class="text">有票</text>
|
|
|
+ <text class="text">{{(item.quantity>0&&sessionList.length>=1)?'有票':'无票'}}</text>
|
|
|
</view>
|
|
|
<view class="bottom u-flex u-row-between">
|
|
|
<view class="left u-flex">
|
|
|
购票须知
|
|
|
<u-icon name="arrow-right" color="#7F7F7F" size="24rpx"></u-icon>
|
|
|
</view>
|
|
|
- <view class="btn" @click="book(item)">预定</view>
|
|
|
+ <view class="btn" @click="book(item)" v-if="item.quantity>0&&sessionList.length>=1">预定</view>
|
|
|
+ <view class="btn disabled" v-else>暂无余票</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -80,30 +93,34 @@
|
|
|
<view class="details-block">
|
|
|
<view class="title">剧情简介</view>
|
|
|
<view class="intro">
|
|
|
- 剧情简介剧情简介剧情简介剧情简介剧情简介
|
|
|
+ <u-parse :content="performInfo.performSnapshot"></u-parse>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="details-block actors">
|
|
|
<view class="title u-flex u-row-between">
|
|
|
演职人员
|
|
|
- <view class="right u-flex">
|
|
|
- <text>全部20人</text>
|
|
|
+ <view class="right u-flex" @click="$u.route('pages/actors')">
|
|
|
+ <text>更多</text>
|
|
|
<u-icon name="arrow-right" color="#7F7F7F" size="24rpx"></u-icon>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="actor-list">
|
|
|
<u-scroll-list :indicator="false">
|
|
|
<view class="item" v-for="(item, index) in actorsArr" :key="index">
|
|
|
- <image class="img" :src="item.imgUrl"></image>
|
|
|
+ <image class="img" :src="item.performerHead"></image>
|
|
|
<view class="text">
|
|
|
- <view class="name">{{item.name}}</view>
|
|
|
- <view class="role u-line-1">{{item.role}}</view>
|
|
|
+ <view class="name">{{item.performerName}}</view>
|
|
|
+ <view class="role u-line-1">{{item.performerRole}}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</u-scroll-list>
|
|
|
+ <u-empty text="暂无" v-if="actorsArr.length<1"></u-empty>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
+ <view class="viewingTips" v-if="tabsIndex==2">
|
|
|
+
|
|
|
+ </view>
|
|
|
</view>
|
|
|
<u-calendar
|
|
|
ref="calendar"
|
|
|
@@ -113,6 +130,29 @@
|
|
|
@close="closeCalendar"
|
|
|
@confirm="confirmCalendar">
|
|
|
</u-calendar>
|
|
|
+ <!-- 分享选择弹出内容 -->
|
|
|
+ <view class="share-option" :class="{shareShow:shareShow}">
|
|
|
+ <view class="overlay" v-if="shareShow" @click="shareShow=false"></view>
|
|
|
+ <button class="share-option-item wx-share" data-name="shareBtn" open-type="share">
|
|
|
+ 发送给朋友
|
|
|
+ </button>
|
|
|
+ <view class="share-option-item" @click="getPoster">生成海报</view>
|
|
|
+ <view class="share-option-item" @click="shareShow=false">取消</view>
|
|
|
+ </view>
|
|
|
+ <u-popup :show="posterShow" @close="posterShow=false" ref="uni-popup">
|
|
|
+ <view class="poster-wrap u-flex u-col-center">
|
|
|
+ <view class="poster-inner">
|
|
|
+ <view class="close-wrap" @click="posterShow=false">
|
|
|
+ <u-icon name="close-circle" color="#fff" size="56rpx"></u-icon>
|
|
|
+ </view>
|
|
|
+ <view class="poster" id="poster" ref="poster" >
|
|
|
+ <u--image :showLoading="true" :src="posterSrc" width="100%" height="65vh" mode="aspectFit"></u--image>
|
|
|
+ </view>
|
|
|
+ <!-- savePoster -->
|
|
|
+ <view class="poster-btn" @click="saveImage">保存图片</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </u-popup>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
@@ -129,44 +169,42 @@
|
|
|
mixins:[systemInfo],
|
|
|
data() {
|
|
|
return {
|
|
|
+ performId:'',
|
|
|
staticUrl:this.$commonConfig.staticUrl,
|
|
|
tabsArr:[
|
|
|
{name:'票务购买'},
|
|
|
- {name:'演出详情'}
|
|
|
+ {name:'演出详情'},
|
|
|
+ {name:'观影须知'}
|
|
|
],
|
|
|
+ theatre:{},
|
|
|
tabsIndex:0,
|
|
|
dateList:[],
|
|
|
dateIndex:0,
|
|
|
calendarShow:false,//日历
|
|
|
maxDate:`${year}-${month}-${date + 10}`,
|
|
|
- sessionList:[
|
|
|
- {session:'10:00-11:00'},
|
|
|
- {session:'10:00-11:00'},
|
|
|
- {session:'10:00-11:00'},
|
|
|
- {session:'10:00-11:00'},
|
|
|
- {session:'10:00-11:00'},
|
|
|
- ],
|
|
|
+ auditoriumList:[],//演艺厅
|
|
|
+ auditoriumIndex:0,
|
|
|
+ sessionList:[],//演出场次
|
|
|
sessionIndex:0,
|
|
|
- ticketTypeList:[
|
|
|
- {name:'成人票',prices:'15'},
|
|
|
- {name:'成人票',prices:'15'},
|
|
|
- {name:'成人票',prices:'15'},
|
|
|
- ],
|
|
|
- actorsArr:[
|
|
|
- {name:'张三',role:'导演',imgUrl:'https://unsplash.it/160/200?id=1'},
|
|
|
- {name:'张三',role:'导演',imgUrl:'https://unsplash.it/160/200?id=2'},
|
|
|
- {name:'张三',role:'导演',imgUrl:'https://unsplash.it/160/200?id=3'},
|
|
|
- {name:'张三',role:'导演',imgUrl:'https://unsplash.it/160/200?id=4'},
|
|
|
- ]
|
|
|
+ ticketTypeList:[],//门票
|
|
|
+ actorsArr:[],
|
|
|
+ shareShow:false,
|
|
|
+ posterShow:false,
|
|
|
+ posterSrc:'',
|
|
|
+ performInfo:{},//节目详情
|
|
|
|
|
|
}
|
|
|
},
|
|
|
onShow() {
|
|
|
},
|
|
|
- onLoad() {
|
|
|
+ onLoad(page) {
|
|
|
+ console.log('page',page);
|
|
|
+ this.performId = page.id;
|
|
|
+ this.getPerformData();
|
|
|
// this.getSystemInfo();
|
|
|
let today = new Date();
|
|
|
this.setDate(today);
|
|
|
+ this.getPerformInfo();
|
|
|
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -178,6 +216,44 @@
|
|
|
uni.navigateBack()
|
|
|
};
|
|
|
},
|
|
|
+ getPerformData(){
|
|
|
+ this.$u.api.performSell({performId:this.performId}).then(res=>{
|
|
|
+ // console.log('getPerformData',res.data);
|
|
|
+ this.theatre = res.data.theatreList[0];
|
|
|
+ this.auditoriumList = res.data.theatreList[0].auditoriumList;
|
|
|
+ this.ticketTypeList = res.data.goodsList;
|
|
|
+ this.getTimes()
|
|
|
+ console.log('auditoriumList',this.auditoriumList);
|
|
|
+ }).catch(err=>{
|
|
|
+ console.log('getPoster',err);
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getPerformInfo(){
|
|
|
+ this.$u.api.performInfo({id:this.performId}).then(res=>{
|
|
|
+ console.log('getPerformInfo',res.data);
|
|
|
+ this.performInfo = res.data;
|
|
|
+ this.actorsArr = res.data.performerList;
|
|
|
+ }).catch(err=>{
|
|
|
+ console.log('getPerformInfo',err);
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getTimes(){
|
|
|
+ let auditoriumId= this.auditoriumList[this.auditoriumIndex]?.id;
|
|
|
+ if(!auditoriumId){return}
|
|
|
+ let dateOBJ = this.dateList[this.dateIndex];
|
|
|
+ let param = {
|
|
|
+ auditoriumId:auditoriumId,//演艺厅ID(演艺厅列表)
|
|
|
+ performId:this.performId,
|
|
|
+ date:`${dateOBJ.year}-${dateOBJ.month}-${dateOBJ.day}`
|
|
|
+ };
|
|
|
+ // console.log('param',param);
|
|
|
+ this.$u.api.getAuditoriumTimes(param).then(res=>{
|
|
|
+ console.log('getTimes',res.data);
|
|
|
+ this.sessionList = res.data.list;
|
|
|
+ }).catch(err=>{
|
|
|
+ console.log('getPoster',err);
|
|
|
+ })
|
|
|
+ },
|
|
|
setDate(firstDay){
|
|
|
let today = firstDay;
|
|
|
let tomorrow = new Date();
|
|
|
@@ -190,9 +266,16 @@
|
|
|
{ year: tomorrow.getFullYear(), month: tomorrow.getMonth() + 1, day: tomorrow.getDate() ,name:'明天'},
|
|
|
{ year: afterTomorrow.getFullYear(), month: afterTomorrow.getMonth() + 1, day: afterTomorrow.getDate(),name:'后天' }
|
|
|
];
|
|
|
+
|
|
|
+ this.getTimes()
|
|
|
+
|
|
|
},
|
|
|
dateClick(index){
|
|
|
this.dateIndex = index;
|
|
|
+ this.getTimes()
|
|
|
+ },
|
|
|
+ auditoriumClick(index){
|
|
|
+ this.auditoriumIndex = index;
|
|
|
},
|
|
|
confirmCalendar(e){
|
|
|
console.log('confirmCalendar',e);
|
|
|
@@ -217,7 +300,99 @@
|
|
|
uni.$u.route('pages/bookticket',{
|
|
|
id:item.id
|
|
|
})
|
|
|
- }
|
|
|
+ },
|
|
|
+ openShare(){
|
|
|
+ this.shareShow = true;
|
|
|
+ },
|
|
|
+ // 海报相关开始
|
|
|
+ getPoster(item){
|
|
|
+ this.posterShow = true;
|
|
|
+ this.shareShow = false;
|
|
|
+ this.$u.api.performQrcode({performId:this.performId}).then(res=>{
|
|
|
+ this.posterSrc = res.data.imageUrl;
|
|
|
+ // console.log('getPoster',res.data);
|
|
|
+ }).catch(err=>{
|
|
|
+ console.log('getPoster',err);
|
|
|
+ })
|
|
|
+ },
|
|
|
+ saveImage() {
|
|
|
+ let that = this;
|
|
|
+ uni.showLoading({
|
|
|
+ title: '保存中'
|
|
|
+ });
|
|
|
+ uni.downloadFile({
|
|
|
+ url: this.posterSrc,
|
|
|
+ success(res) {
|
|
|
+ if (res.statusCode === 200) {
|
|
|
+ uni.saveImageToPhotosAlbum({
|
|
|
+ filePath: res.tempFilePath,
|
|
|
+ success() {
|
|
|
+ uni.showToast({
|
|
|
+ title: '保存到相册成功',
|
|
|
+ icon: 'success'
|
|
|
+ });
|
|
|
+ },
|
|
|
+ fail(err) {
|
|
|
+ console.log('保存图片失败',err);
|
|
|
+ if (err.errMsg === 'saveImageToPhotosAlbum:fail auth deny') {
|
|
|
+ uni.getSetting({
|
|
|
+ success(res) {
|
|
|
+ if (!res.authSetting['scope.writePhotosAlbum']) {
|
|
|
+ uni.showModal({
|
|
|
+ title: '提示',
|
|
|
+ content: '您还没有授权访问相册，请前往设置页面打开权限。',
|
|
|
+ confirmText: '去设置',
|
|
|
+ success(res) {
|
|
|
+ if (res.confirm) {
|
|
|
+ uni.openSetting();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: '保存图片失败',
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: '保存图片失败',
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ complete() {
|
|
|
+ uni.hideLoading();
|
|
|
+ that.posterShow = false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: '下载图片失败',
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ fail() {
|
|
|
+ uni.showToast({
|
|
|
+ title: '下载图片失败',
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 海报相关结束
|
|
|
+ goMap(){
|
|
|
+ uni.openLocation({
|
|
|
+ latitude:Number(this.theatre.latitude), //维度
|
|
|
+ longitude: Number(this.theatre.longitude), //经度
|
|
|
+ name: this.theatre.name, //目的地定位名称
|
|
|
+ scale: 15, //缩放比例
|
|
|
+ address: this.theatre.address //导航详细地址
|
|
|
+ })
|
|
|
+ },
|
|
|
|
|
|
}
|
|
|
}
|
|
|
@@ -292,12 +467,21 @@
|
|
|
margin-bottom: 64rpx;
|
|
|
}
|
|
|
.title{
|
|
|
- font-size: 32rpx;
|
|
|
- font-weight: bold;
|
|
|
- color: #2D2D2D;
|
|
|
- line-height: 48rpx;
|
|
|
- margin-bottom: 38rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #2D2D2D;
|
|
|
+ line-height: 48rpx;
|
|
|
+ margin-bottom: 38rpx;
|
|
|
+}
|
|
|
+.session-wrap{
|
|
|
+ .empty{
|
|
|
+ background-color: #636363;
|
|
|
+ color: #979797;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ padding: 24rpx;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
+}
|
|
|
.session{
|
|
|
display: grid;
|
|
|
grid-template-columns: repeat(3, 1fr);
|
|
|
@@ -363,6 +547,9 @@
|
|
|
font-size: 28rpx;
|
|
|
font-weight: 500;
|
|
|
color: #FFFFFF;
|
|
|
+ &.disabled{
|
|
|
+ background: #979797;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
