|
@@ -1,63 +1,90 @@
|
|
|
<template>
|
|
|
<view>
|
|
|
- <view class="remind">请到影院现场柜台或取票机取票</view>
|
|
|
- <view class="des-box">
|
|
|
- <view class="code-box">
|
|
|
- <view class="code">
|
|
|
- <text>取票码</text>
|
|
|
- <text>{{JSON.parse(orderDes.orderDataJson.FilmOrderNotifyDTO.ticketCode).join(' ')}}</text>
|
|
|
- </view>
|
|
|
- <image class="qrcode" :src="JSON.parse(orderDes.orderDataJson.FilmOrderNotifyDTO.ticketImage)[0]"
|
|
|
- mode="widthFix"></image>
|
|
|
- </view>
|
|
|
- <view class="order-num">
|
|
|
- <text>订单号:{{orderDes.outTradeNo}}</text>
|
|
|
- <text>已兑换</text>
|
|
|
- </view>
|
|
|
- <view class="des">
|
|
|
- <text class="film-name">{{orderDes.orderDataJson.cinemaData.filmName}}</text>
|
|
|
- <view class="film-time">
|
|
|
- <text>时间</text>
|
|
|
- <text>{{orderDes.orderDataJson.cinemaData.showTime}}</text>
|
|
|
- </view>
|
|
|
- <view class="film-address">
|
|
|
- <text>影院</text>
|
|
|
- <text>{{orderDes.orderDataJson.cinemaData.showTime}}</text>
|
|
|
- </view>
|
|
|
- <view class="film-video">
|
|
|
- <text>影厅</text>
|
|
|
- <text>{{orderDes.orderDataJson.cinemaData.hallName}}</text>
|
|
|
+ <loadSke :loading='loading'>
|
|
|
+ <view class="remind">请到影院现场柜台或取票机取票</view>
|
|
|
+ <view class="des-box">
|
|
|
+ <loadSke :loading='!orderDes.orderDataJson.FilmOrderNotifyDTO'>
|
|
|
+ <view class="code-box">
|
|
|
+ <view class="code">
|
|
|
+ <text>取票码</text>
|
|
|
+ <text>{{JSON.parse(orderDes.orderDataJson.FilmOrderNotifyDTO.ticketCode).join(' ')}}</text>
|
|
|
+ </view>
|
|
|
+ <image class="qrcode" :src="JSON.parse(orderDes.orderDataJson.FilmOrderNotifyDTO.ticketImage)[0]" mode="widthFix"></image>
|
|
|
+ </view>
|
|
|
+ </loadSke>
|
|
|
+ <view class="order-num">
|
|
|
+ <text>订单号:{{orderDes.outTradeNo}}</text>
|
|
|
+ <text>{{orderDes.orderDataJson.FilmOrderNotifyDTO ? `出票成功` : `正在出票`}}</text>
|
|
|
</view>
|
|
|
- <view class="film-seat">
|
|
|
- <text>座位</text>
|
|
|
- <view class="seat-box">
|
|
|
- <text v-for="(item,index) in orderDes.orderDataJson.FilmOrderNotifyDTO.realSeat.split(',')" :key='index'>6排6列</text>
|
|
|
+ <view class="des">
|
|
|
+ <text class="film-name">{{orderDes.orderDataJson.cinemaData.filmName}}</text>
|
|
|
+ <view class="film-time">
|
|
|
+ <text>时间</text>
|
|
|
+ <text>{{orderDes.orderDataJson.cinemaData.showTime}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="film-address">
|
|
|
+ <text>影院</text>
|
|
|
+ <text>{{orderDes.orderDataJson.cinemaData.cinemaName}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="film-video">
|
|
|
+ <text>影厅</text>
|
|
|
+ <text>{{orderDes.orderDataJson.cinemaData.hallName}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="film-seat">
|
|
|
+ <text>座位</text>
|
|
|
+ <view class="seat-box">
|
|
|
+ <text v-for="(item,index) in seatList" :key='index'>{{item}}</text>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
+ <view class="price">
|
|
|
+ <text>总价</text>
|
|
|
+ <text>¥{{orderDes.total/100}}</text>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view class="price">
|
|
|
- <text>总价</text>
|
|
|
- <text>¥79.8</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ </loadSke>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import { getWxOrder } from '@/api/order.js'
|
|
|
+ import {
|
|
|
+ getWxOrder
|
|
|
+ } from '@/api/order.js'
|
|
|
export default {
|
|
|
data: () => ({
|
|
|
- orderDes:{}
|
|
|
+ orderDes: {},
|
|
|
+ seatList: [],
|
|
|
+ outTradeNo: null,
|
|
|
+ loading: true,
|
|
|
+ pollingTiemId:null
|
|
|
}),
|
|
|
+ onLoad: function(option) {
|
|
|
+ this.outTradeNo = option.outTradeNo
|
|
|
+ },
|
|
|
mounted() {
|
|
|
this.init()
|
|
|
},
|
|
|
- methods:{
|
|
|
- async init(){
|
|
|
- let orderRes = await getWxOrder('12021051714143017548116012554780')
|
|
|
- orderRes.data.orderDataJson=JSON.parse(orderRes.data.orderDataJson)
|
|
|
+ methods: {
|
|
|
+ async init() {
|
|
|
+ let orderRes = await getWxOrder(this.outTradeNo)
|
|
|
+ orderRes.data.orderDataJson = JSON.parse(orderRes.data.orderDataJson)
|
|
|
this.orderDes = orderRes.data
|
|
|
+ this.seatList = this.orderDes.orderDataJson.filmOrderCreateDTO.seat.split(',')
|
|
|
+ this.loading = false
|
|
|
+ this.polling()
|
|
|
+ },
|
|
|
+ polling() {
|
|
|
+ this.pollingTiemId = setInterval(async () => {
|
|
|
+ let orderRes = await getWxOrder(this.outTradeNo)
|
|
|
+ orderRes.data.orderDataJson = JSON.parse(orderRes.data.orderDataJson)
|
|
|
+ this.orderDes = orderRes.data
|
|
|
+ this.seatList = this.orderDes.orderDataJson.filmOrderCreateDTO.seat.split(',')
|
|
|
+ if(false) clearInterval(this.pollingTiemId)
|
|
|
+ }, 3000)
|
|
|
}
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ clearInterval(this.pollingTiemId)
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
@@ -83,7 +110,6 @@
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
padding-bottom: 38rpx;
|
|
|
- border-bottom: 1rpx solid #D9D9D9;
|
|
|
|
|
|
.code {
|
|
|
margin-top: 43rpx;
|
|
@@ -112,10 +138,11 @@
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
padding: 34rpx 31rpx;
|
|
|
- border-bottom: 1rpx solid #D9D9D9;
|
|
|
+ border-top: 1rpx dashed #D9D9D9;
|
|
|
+ border-bottom: 1rpx dashed #D9D9D9;
|
|
|
position: relative;
|
|
|
-
|
|
|
- &::after{
|
|
|
+
|
|
|
+ &::after {
|
|
|
content: '';
|
|
|
width: 24rpx;
|
|
|
height: 24rpx;
|
|
@@ -124,9 +151,10 @@
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
- transform: translate(-50%,-50%);
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
}
|
|
|
- &::before{
|
|
|
+
|
|
|
+ &::before {
|
|
|
content: '';
|
|
|
width: 24rpx;
|
|
|
height: 24rpx;
|
|
@@ -135,19 +163,20 @@
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
right: 0;
|
|
|
- transform: translate(50%,-50%);
|
|
|
+ transform: translate(50%, -50%);
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
text {
|
|
|
&:nth-child(1) {
|
|
|
+ width: 60%;
|
|
|
+ word-break: break-all;
|
|
|
font-size: 26rpx;
|
|
|
font-weight: 400;
|
|
|
color: #666666;
|
|
|
}
|
|
|
|
|
|
&:nth-child(2) {
|
|
|
- width: 91rpx;
|
|
|
- height: 34rpx;
|
|
|
+ padding: 10rpx;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
@@ -160,48 +189,56 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .des{
|
|
|
+
|
|
|
+ .des {
|
|
|
padding: 45rpx 30rpx;
|
|
|
- border-bottom: 1rpx solid #D9D9D9;
|
|
|
+ border-bottom: 1rpx dashed #D9D9D9;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
- .film-name{
|
|
|
+
|
|
|
+ .film-name {
|
|
|
font-size: 30rpx;
|
|
|
font-weight: 400;
|
|
|
color: #0F0404;
|
|
|
}
|
|
|
- text{
|
|
|
+
|
|
|
+ text {
|
|
|
font-size: 26rpx;
|
|
|
font-weight: 400;
|
|
|
color: #666666;
|
|
|
margin-right: 20rpx;
|
|
|
white-space: nowrap;
|
|
|
}
|
|
|
- .film-time{
|
|
|
- text:nth-child(2){
|
|
|
+
|
|
|
+ .film-time {
|
|
|
+ text:nth-child(2) {
|
|
|
color: #999999;
|
|
|
}
|
|
|
}
|
|
|
- .film-address{
|
|
|
- text:nth-child(2){
|
|
|
+
|
|
|
+ .film-address {
|
|
|
+ text:nth-child(2) {
|
|
|
color: #999999;
|
|
|
}
|
|
|
}
|
|
|
- .film-video{
|
|
|
- text:nth-child(2){
|
|
|
+
|
|
|
+ .film-video {
|
|
|
+ text:nth-child(2) {
|
|
|
color: #999999;
|
|
|
}
|
|
|
}
|
|
|
- .film-seat{
|
|
|
+
|
|
|
+ .film-seat {
|
|
|
display: flex;
|
|
|
justify-content: flex-start;
|
|
|
align-items: stretch;
|
|
|
margin-top: 10rpx;
|
|
|
- .seat-box{
|
|
|
+
|
|
|
+ .seat-box {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
- text{
|
|
|
+
|
|
|
+ text {
|
|
|
height: 40rpx;
|
|
|
padding: 4rpx 15rpx;
|
|
|
margin-bottom: 10rpx;
|
|
@@ -212,15 +249,17 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .price{
|
|
|
+
|
|
|
+ .price {
|
|
|
padding: 40rpx 30rpx;
|
|
|
- text{
|
|
|
+
|
|
|
+ text {
|
|
|
font-size: 26rpx;
|
|
|
font-weight: 400;
|
|
|
color: #666666;
|
|
|
margin-right: 20rpx;
|
|
|
- &:nth-child(2){
|
|
|
+
|
|
|
+ &:nth-child(2) {
|
|
|
color: #E31818;
|
|
|
}
|
|
|
}
|