|
|
<template>
|
|
|
<view>
|
|
|
<view class="_container" :style="order_info.order_status !== 2 && order_info.order_status !== 1 ? 'padding-top:20rpx;' : ''">
|
|
|
<view v-if="order_info.order_status == 2" class="pay_status">
|
|
|
<view class="warn">
|
|
|
<view class="text1">待支付</view>
|
|
|
<view class="text2">若超时未支付，订单将自动取消</view>
|
|
|
</view>
|
|
|
<view class="cut_down">剩余 {{ countDownNum }}</view>
|
|
|
</view>
|
|
|
<view class="_succ" v-else-if="order_info.order_status == 1">
|
|
|
<view class="text1">支付成功！</view>
|
|
|
<view class="text2">请注意节目开始时间，提前进场。</view>
|
|
|
</view>
|
|
|
<view class="play_info">
|
|
|
<view class="_top">
|
|
|
<image class="img" :src="order_info.order_pic" />
|
|
|
<view class="info">
|
|
|
<view class="title">{{ show_info.show_name }}</view>
|
|
|
<view>
|
|
|
<view class="line">{{ show_info.show_date }}</view>
|
|
|
<view class="line">{{ show_info.city_name }}｜{{ show_info.theater_name }}</view>
|
|
|
</view>
|
|
|
<view class="line" style="font-weight: normal">
|
|
|
<image src="/static/images/ui/passed.png" />
|
|
|
<text>不支持退票</text>
|
|
|
<block v-if="show_info.is_invoice == 0">
|
|
|
<image src="/static/images/ui/closeRed.png" />
|
|
|
<text>不可开发票</text>
|
|
|
</block>
|
|
|
<block v-else-if="show_info.is_invoice == 1">
|
|
|
<image src="/static/images/ui/passedGreen.png" />
|
|
|
<text>可开发票</text>
|
|
|
</block>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="split-line"></view>
|
|
|
|
|
|
<view class="_bottom">
|
|
|
<view class="_ticket" v-for="(ticket_list, index) in ticket_info" :key="index">
|
|
|
<view class="sit_info">¥{{ ticket_list.price }}*{{ ticket_list.tkt_num }}张</view>
|
|
|
|
|
|
<view style="display: flex; flex-wrap: wrap">
|
|
|
<view class="sit_info1" v-for="(item, index1) in ticket_list.list" :key="index1">{{ item.seat_info }}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 订票人信息 -->
|
|
|
<view class="cellgroup">
|
|
|
<view class="cell" style="border-bottom: 1px dashed #dddddd">
|
|
|
<view class="title">取票手机</view>
|
|
|
<view class="value">{{ order_info.mobile }}</view>
|
|
|
</view>
|
|
|
<view class="cell" style="padding: 20rpx 0 0 0">
|
|
|
<view class="title">观演人</view>
|
|
|
<view class="value">
|
|
|
<view style="padding-bottom: 20rpx" v-for="(item, index) in viewer_info" :key="index">{{ item.name }} {{ item.id_card }}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- 地址信息 -->
|
|
|
<view class="cellgroup">
|
|
|
<view class="cell cell1">
|
|
|
<view class="title" style="width: 70%">
|
|
|
<view class="t">{{ show_info.city_name }}｜{{ show_info.theater_name }}</view>
|
|
|
<view class="b">地址：{{ show_info.traffic_info }}</view>
|
|
|
</view>
|
|
|
<image src="/static/images/ui/location.png" :data-longitude="show_info.longitude" :data-latitude="show_info.latitude" @tap="loc" />
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- 订单信息 -->
|
|
|
<view class="cellgroup">
|
|
|
<view class="cell" style="padding: 30rpx 0 0 0">
|
|
|
<view class="title">订单信息</view>
|
|
|
<view class="value"></view>
|
|
|
</view>
|
|
|
<view class="cell cell1" style="border-bottom: 1px solid #ebedf0">
|
|
|
<view class="title">支付金额</view>
|
|
|
<view class="value">
|
|
|
¥{{ order_info.order_price }}
|
|
|
<image src="/static/images/ui/arrow_right.png" style="width: 40rpx; height: 40rpx" />
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="cell cell1" style="border-bottom: 1px solid #ebedf0">
|
|
|
<view class="title">订单号</view>
|
|
|
<view class="value">{{ order_info.order_no }}</view>
|
|
|
</view>
|
|
|
<view class="cell cell1" style="margin-bottom: 10rpx">
|
|
|
<view class="title">下单时间</view>
|
|
|
<view class="value">{{ order_info.create_time }}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view style="height: 500rpx; width: 100%"></view>
|
|
|
<!-- 底栏 -->
|
|
|
<view class="bottom_selector" v-if="order_info.order_status == 2">
|
|
|
<view class="_sel">
|
|
|
<button class="_cancel" @tap="cancel">取消订单</button>
|
|
|
<button class="_confirm" @tap="pay">订单无误，立即支付</button>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="bottom_selector" v-else-if="order_info.order_status == 1 || order_info.order_status == 6 || order_info.order_status == 12">
|
|
|
<view class="statement_inf">
|
|
|
<view class="shaky">换票券码：{{ order_info.electronic_code }}（凭此码在取票机兑换票据）</view>
|
|
|
</view>
|
|
|
<view class="_b">
|
|
|
<button @tap="show=true" class="selector_dsn">查看电子票码</button>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 底部弹出层 -->
|
|
|
<u-popup :round="10" :show="show" @close="show=false">
|
|
|
<view v-for="(item, index) in a" :key="index" class="popup_dsn">
|
|
|
<view v-if="index == a_id" class="sit_info1">
|
|
|
<view class="code_preview">
|
|
|
<image src="/static/images/ui/arrow_left.png" style="width: 40px; height: 40px" :data-a_id="index" @tap="sub" />
|
|
|
<image :src="item.qr_code" style="width: 128px; height: 128px" />
|
|
|
<image src="/static/images/ui/arrow_right.png" style="width: 40px; height: 40px" :data-a_id="index" @tap="plus" />
|
|
|
</view>
|
|
|
<view>{{ item.seat_info }}</view>
|
|
|
<view>{{ item.price }}元</view>
|
|
|
<view>识别码：{{ item.ticket_code }}</view>
|
|
|
<button @tap="show=false" class="selector_dsn" style="margin: 40rpx auto">知道了</button>
|
|
|
</view>
|
|
|
</view>
|
|
|
</u-popup>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
// pages/order_detail/order_detail.js
|
|
|
import { http ,orderNoPay} from '../../../utils/util';
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
// checked: false,
|
|
|
show: false,
|
|
|
|
|
|
a_id: 0,
|
|
|
order_no: '',
|
|
|
clone_type: '',
|
|
|
|
|
|
order_info: {
|
|
|
order_status: 0,
|
|
|
order_pic: '',
|
|
|
mobile: '',
|
|
|
order_no: '',
|
|
|
create_time: '',
|
|
|
electronic_code: ''
|
|
|
},
|
|
|
|
|
|
show_info: {
|
|
|
show_name: '',
|
|
|
show_date: '',
|
|
|
city_name: '',
|
|
|
theater_name: '',
|
|
|
is_invoice: 0,
|
|
|
traffic_info: '',
|
|
|
longitude: '',
|
|
|
latitude: ''
|
|
|
},
|
|
|
|
|
|
ticket_info: '',
|
|
|
viewer_info: '',
|
|
|
a: '',
|
|
|
countDownNum: '',
|
|
|
timer: '',
|
|
|
|
|
|
ticket_list: {
|
|
|
price: '',
|
|
|
tkt_num: '',
|
|
|
list: []
|
|
|
}
|
|
|
};
|
|
|
},
|
|
|
/**
|
|
|
* 生命周期函数--监听页面加载
|
|
|
*/
|
|
|
onLoad: function (options) {
|
|
|
let order_no = options.order_no;
|
|
|
let _type = options._type;
|
|
|
this.setData({
|
|
|
order_no,
|
|
|
clone_type: _type
|
|
|
});
|
|
|
if (order_no && _type) {
|
|
|
http('/api/v1/order-detail', 'get', {
|
|
|
order_no,
|
|
|
type: _type
|
|
|
}).then((res) => {
|
|
|
this.countDown(res.order_info.timeout);
|
|
|
this.setData({
|
|
|
order_info: res.order_info,
|
|
|
show_info: res.show_info,
|
|
|
ticket_info: res.ticket_info,
|
|
|
viewer_info: res.viewer_info
|
|
|
});
|
|
|
let arr = res.ticket_info;
|
|
|
let a = [];
|
|
|
|
|
|
for (let x in arr) {
|
|
|
for (let i in arr[x].list) {
|
|
|
arr[x].list[i].price = arr[x].price;
|
|
|
a.push(arr[x].list[i]);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
this.setData({
|
|
|
a
|
|
|
});
|
|
|
});
|
|
|
} else {
|
|
|
my.alert({
|
|
|
content:JSON.stringify(options)
|
|
|
});
|
|
|
uni.showToast({
|
|
|
title: '未正常传入订单号',
|
|
|
icon: 'fail',
|
|
|
duration: 2000
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
/**
|
|
|
* 生命周期函数--监听页面初次渲染完成
|
|
|
*/
|
|
|
onReady: function () {
|
|
|
},
|
|
|
/**
|
|
|
* 生命周期函数--监听页面显示
|
|
|
*/
|
|
|
onShow: function () {},
|
|
|
/**
|
|
|
* 生命周期函数--监听页面隐藏
|
|
|
*/
|
|
|
onHide: function () {},
|
|
|
/**
|
|
|
* 生命周期函数--监听页面卸载
|
|
|
*/
|
|
|
onUnload: function () {},
|
|
|
/**
|
|
|
* 页面相关事件处理函数--监听用户下拉动作
|
|
|
*/
|
|
|
onPullDownRefresh: function () {},
|
|
|
/**
|
|
|
* 页面上拉触底事件的处理函数
|
|
|
*/
|
|
|
onReachBottom: function () {},
|
|
|
/**
|
|
|
* 用户点击右上角分享
|
|
|
*/
|
|
|
onShareAppMessage: function () {},
|
|
|
methods: {
|
|
|
sub(e) {
|
|
|
let a_id = e.currentTarget.dataset.a_id;
|
|
|
console.log(a_id);
|
|
|
|
|
|
if (a_id == 0) {
|
|
|
a_id = this.a.length - 1;
|
|
|
} else {
|
|
|
a_id = a_id - 1;
|
|
|
}
|
|
|
|
|
|
this.setData({
|
|
|
a_id
|
|
|
});
|
|
|
},
|
|
|
|
|
|
plus(e) {
|
|
|
let a_id = e.currentTarget.dataset.a_id;
|
|
|
console.log(a_id);
|
|
|
|
|
|
if (a_id == this.a.length - 1) {
|
|
|
a_id = 0;
|
|
|
} else {
|
|
|
a_id = a_id + 1;
|
|
|
}
|
|
|
|
|
|
this.setData({
|
|
|
a_id
|
|
|
});
|
|
|
},
|
|
|
|
|
|
/* check(event) {
|
|
|
this.setData({
|
|
|
checked: event.detail,
|
|
|
});
|
|
|
},
|
|
|
agreement() {
|
|
|
this.setData({
|
|
|
show1: true
|
|
|
})
|
|
|
}, */
|
|
|
loc(e) {
|
|
|
if (e.currentTarget.dataset.longitude && e.currentTarget.dataset.latitude) {
|
|
|
uni.openLocation({
|
|
|
latitude: e.currentTarget.dataset.latitude,
|
|
|
longitude: e.currentTarget.dataset.longitude,
|
|
|
name: this.show_info.theater_name,
|
|
|
address: this.show_info.traffic_info
|
|
|
});
|
|
|
} else {
|
|
|
uni.showToast({
|
|
|
title: '地址信息错误',
|
|
|
icon: 'fail',
|
|
|
duration: 2000
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
cancel(e) {
|
|
|
let that = this;
|
|
|
uni.showModal({
|
|
|
content: '是否取消订单',
|
|
|
|
|
|
success(res) {
|
|
|
if (res.confirm) {
|
|
|
http('/api/v1/order-cancel', 'post', {
|
|
|
order_no: that.order_no
|
|
|
}).then((res) => {
|
|
|
uni.showToast({
|
|
|
title: '取消订单成功！',
|
|
|
duration: 2000
|
|
|
});
|
|
|
uni.$emit('init_order');
|
|
|
uni.navigateBack();
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
|
|
|
pay() {
|
|
|
orderNoPay(this.order_no)
|
|
|
},
|
|
|
|
|
|
//定时器
|
|
|
countDown: function (timeout) {
|
|
|
let that = this;
|
|
|
let countDownNum = timeout; //获取倒计时初始值
|
|
|
|
|
|
let formatTime = that.getFormat(countDownNum);
|
|
|
let countDown = `${formatTime.hh}:${formatTime.mm}:${formatTime.ss}`;
|
|
|
that.setData({
|
|
|
countDownNum: countDown
|
|
|
}); //如果将定时器设置在外面，那么用户就看不到countDownNum的数值动态变化，所以要把定时器存进data里面
|
|
|
|
|
|
that.setData({
|
|
|
timer: setInterval(function () {
|
|
|
//这里把setInterval赋值给变量名为timer的变量
|
|
|
//每隔一秒countDownNum就减一，实现同步
|
|
|
countDownNum--;
|
|
|
let formatTime = that.getFormat(countDownNum);
|
|
|
let countDown = `${formatTime.hh}:${formatTime.mm}:${formatTime.ss}`; //然后把countDownNum存进data，好让用户知道时间在倒计着
|
|
|
|
|
|
that.setData({
|
|
|
countDownNum: countDown
|
|
|
}); //在倒计时还未到0时，这中间可以做其他的事情，按项目需求来
|
|
|
|
|
|
if (countDownNum == 0) {
|
|
|
//这里特别要注意，计时器是始终一直在走的，如果你的时间为0，那么就要关掉定时器！不然相当耗性能
|
|
|
//因为timer是存在data里面的，所以在关掉时，也要在data里取出后再关闭
|
|
|
clearInterval(that.timer);
|
|
|
typeNum = 1;
|
|
|
cardOption.answers = 0;
|
|
|
cardOption.success = false;
|
|
|
cardOption.answer = '';
|
|
|
that.save(cardOption); //关闭定时器之后，可作其他处理codes go here
|
|
|
}
|
|
|
}, 1000)
|
|
|
});
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
* 格式化时间
|
|
|
*/
|
|
|
getFormat: function (ss) {
|
|
|
let mm = 0;
|
|
|
let hh = 0;
|
|
|
|
|
|
if (ss > 60) {
|
|
|
mm = parseInt(ss / 60);
|
|
|
ss = parseInt(ss % 60);
|
|
|
|
|
|
if (mm > 60) {
|
|
|
hh = parseInt(mm / 60);
|
|
|
mm = parseInt(mm % 60);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
if (ss > 9) {
|
|
|
ss = ss;
|
|
|
} else {
|
|
|
ss = `0${ss}`;
|
|
|
}
|
|
|
|
|
|
if (mm > 9) {
|
|
|
mm = mm;
|
|
|
} else {
|
|
|
mm = `0${mm}`;
|
|
|
}
|
|
|
|
|
|
if (hh > 9) {
|
|
|
hh = hh;
|
|
|
} else {
|
|
|
hh = `0${hh}`;
|
|
|
}
|
|
|
|
|
|
return {
|
|
|
ss,
|
|
|
mm,
|
|
|
hh
|
|
|
};
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
|
_type: {
|
|
|
handler: function (newVal, oldVal) {
|
|
|
this.clone_type = newVal;
|
|
|
},
|
|
|
|
|
|
immediate: true
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
<style>
|
|
|
@import '/utils/shaky.css';
|
|
|
._container {
|
|
|
background-color: #ff446b;
|
|
|
padding: 0 30rpx 20rpx 30rpx;
|
|
|
}
|
|
|
|
|
|
/* 顶部支付提示区域 */
|
|
|
.pay_status {
|
|
|
background-color: #ff446b;
|
|
|
display: flex;
|
|
|
padding: 20rpx 10rpx;
|
|
|
}
|
|
|
.pay_status .warn {
|
|
|
color: #ffffff;
|
|
|
line-height: 48rpx;
|
|
|
}
|
|
|
|
|
|
.pay_status .cut_down {
|
|
|
margin: 0 10rpx 0 auto;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
color: #ffffff;
|
|
|
font-size: 28rpx;
|
|
|
}
|
|
|
._succ {
|
|
|
text-align: center;
|
|
|
padding: 20rpx;
|
|
|
color: #fff;
|
|
|
line-height: 24px;
|
|
|
}
|
|
|
|
|
|
.text1 {
|
|
|
font-size: 36rpx;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
.text2 {
|
|
|
font-size: 24rpx;
|
|
|
}
|
|
|
|
|
|
.play_info {
|
|
|
background-color: #ffffff;
|
|
|
border-radius: 20rpx;
|
|
|
}
|
|
|
|
|
|
._top {
|
|
|
display: flex;
|
|
|
padding: 20rpx;
|
|
|
}
|
|
|
|
|
|
._top .img {
|
|
|
background: #d8d8d8;
|
|
|
border-radius: 16rpx;
|
|
|
width: 168rpx;
|
|
|
height: 252rpx;
|
|
|
}
|
|
|
|
|
|
._top .info {
|
|
|
padding-left: 20rpx;
|
|
|
flex: 1;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: space-between;
|
|
|
}
|
|
|
|
|
|
._top .info .title {
|
|
|
font-size: 32rpx;
|
|
|
font-weight: bold;
|
|
|
line-height: 48rpx;
|
|
|
}
|
|
|
|
|
|
._top .info .line {
|
|
|
font-size: 24rpx;
|
|
|
line-height: 48rpx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
}
|
|
|
._top .info .line image {
|
|
|
width: 28rpx;
|
|
|
height: 28rpx;
|
|
|
}
|
|
|
._top .info .line text {
|
|
|
margin: 0 20rpx 0 10rpx;
|
|
|
}
|
|
|
._bottom {
|
|
|
padding: 20rpx 30rpx;
|
|
|
}
|
|
|
|
|
|
._bottom ._ticket {
|
|
|
font-size: 28rpx;
|
|
|
margin-bottom: 20rpx;
|
|
|
}
|
|
|
._bottom ._ticket .sit_info {
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
|
|
|
._bottom ._ticket .sit_info1 {
|
|
|
font-size: 24rpx;
|
|
|
color: #7b7b7b;
|
|
|
width: 33%;
|
|
|
}
|
|
|
.split-line {
|
|
|
position: relative;
|
|
|
flex: 0 0 0;
|
|
|
border-top: 2rpx dashed #eee;
|
|
|
}
|
|
|
.split-line:before,
|
|
|
.split-line:after {
|
|
|
content: '';
|
|
|
position: absolute;
|
|
|
width: 16rpx;
|
|
|
height: 32rpx;
|
|
|
background: #ff446b;
|
|
|
top: -18rpx;
|
|
|
z-index: 1;
|
|
|
}
|
|
|
.split-line:before {
|
|
|
border-radius: 0 32rpx 32rpx 0;
|
|
|
left: 0;
|
|
|
}
|
|
|
.split-line::after {
|
|
|
border-radius: 32rpx 0 0 32rpx;
|
|
|
right: 0;
|
|
|
}
|
|
|
|
|
|
.cellgroup {
|
|
|
background: #fff;
|
|
|
margin-bottom: 20rpx;
|
|
|
}
|
|
|
.cell {
|
|
|
display: flex;
|
|
|
margin: 0 30px;
|
|
|
padding: 10px 0;
|
|
|
color: #181818;
|
|
|
}
|
|
|
.cell .title {
|
|
|
font-size: 14px;
|
|
|
font-weight: bold;
|
|
|
width: 30%;
|
|
|
}
|
|
|
.cell .value {
|
|
|
font-size: 12px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
}
|
|
|
.cell1 {
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
}
|
|
|
.cell .title .t {
|
|
|
}
|
|
|
.cell .title .b {
|
|
|
font-size: 12px;
|
|
|
color: #7b7b7b;
|
|
|
}
|
|
|
.cell image {
|
|
|
width: 60rpx;
|
|
|
height: 60rpx;
|
|
|
}
|
|
|
.bottom_selector {
|
|
|
position: fixed;
|
|
|
bottom: 0;
|
|
|
width: 100%;
|
|
|
}
|
|
|
.statement_inf {
|
|
|
font-size: 24rpx;
|
|
|
color: #ff446b;
|
|
|
height: 80rpx;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
background-color: #fff0f5;
|
|
|
}
|
|
|
._b {
|
|
|
background: #fff;
|
|
|
padding: 30rpx 0;
|
|
|
}
|
|
|
.selector_dsn {
|
|
|
width: 400rpx;
|
|
|
margin:auto;
|
|
|
background: linear-gradient(90deg, #ff4284 0%, #ff1d42 100%);
|
|
|
border-radius: 44rpx;
|
|
|
color: #ffffff;
|
|
|
font-size: 28rpx;
|
|
|
}
|
|
|
.popup_dsn {
|
|
|
text-align: center;
|
|
|
}
|
|
|
.code_preview {
|
|
|
display: flex;
|
|
|
justify-content: space-around;
|
|
|
align-items: center;
|
|
|
width: 60%;
|
|
|
margin: 40rpx auto;
|
|
|
}
|
|
|
._sel {
|
|
|
width: 100%;
|
|
|
background-color: #ffffff;
|
|
|
padding: 30rpx 0;
|
|
|
display: flex;
|
|
|
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.2);
|
|
|
/* #ifdef MP-ALIPAY */
|
|
|
justify-content: space-between;
|
|
|
/* #endif */
|
|
|
}
|
|
|
._cancel {
|
|
|
color: #acacac;
|
|
|
font-size: 28rpx;
|
|
|
border-radius: 44rpx;
|
|
|
background: #ffffff;
|
|
|
border: 2rpx solid #acacac;
|
|
|
width: 27%;
|
|
|
margin-left: 4%;
|
|
|
/* #ifdef MP-ALIPAY */
|
|
|
height: 90rpx;
|
|
|
line-height: 90rpx;
|
|
|
/* #endif */
|
|
|
}
|
|
|
._confirm {
|
|
|
background: linear-gradient(90deg, #ff4284 0%, #ff1d42 100%);
|
|
|
border-radius: 44rpx;
|
|
|
font-size: 28rpx;
|
|
|
width: 54%;
|
|
|
color: #ffffff;
|
|
|
margin-right: 4%;
|
|
|
/* #ifdef MP-ALIPAY */
|
|
|
height: 90rpx;
|
|
|
line-height: 90rpx;
|
|
|
/* #endif */
|
|
|
}
|
|
|
</style>
|
