great_mobileui/center/orderdetails.vue

<template>
	<view class="pages">
		<view class="" :style="{height: navHeight+'px' }"></view>
		<view class="navbar-box">
			<u-navbar title="订单详情" :safeAreaInsetTop="true" @leftClick="leftClick" :titleStyle="{color:'#fff'}" leftIconColor="#fff" bgColor="transparent"></u-navbar>
		</view>
		<view class="page-wrap">
			<view class="status-content">
				<view class="status-item">
					<view class="text">请尽快完成付款，还剩 {{countdown}}</view>
					<view class="btn-wrap u-flex u-row-center">
						<view class="btn cancel">取消订单</view>
						<view class="btn">立即支付</view>
					</view>
				</view>
			</view>
			<view class="base-info">
				<view class="top u-flex u-row-between">
					<view class="name">遵义《伟大转折》演艺中心</view>
					<view class="icon-wrap u-flex">
						<u-icon name="phone-fill" color="#999999" size="42rpx"></u-icon>
						<u-icon name="map-fill" color="#999999" size="42rpx"></u-icon>
					</view>
				</view>
				<view class="info u-flex u-row-between">
					<image class="img" :src="item.showImg||staticUrl+'/img/newsdetails-banner.png'"></image>
					<view class="text">
						<view class="name u-flex u-row-between">
							《伟大转折》-【成人票】
							<text class="status">未开始</text>
						</view>
						<view class="time">2023-11–03 14:00-16:00</view>
						<view class="position">5排6座</view>
					</view>
				</view>
			</view>
			<view class="box qr-wrap">
				<view class="title">二维码</view>
				<view class="qr-content">
					<view class="img-wrap">
						<image class="img" :src="item.showImg||staticUrl+'/img/newsdetails-banner.png'"></image>
						<image class="refund-ico" :src="staticUrl+'/img/refund-ico.png'"></image>
					</view>
					<view class="">1张演出票</view>
					<view class="order-num del-line">取票号：211277</view>
				</view>
			</view>
			<view class="box order-info">
				<view class="title u-flex u-row-between">
					订单信息
					<text class="btn" @click="refund">申请退款</text>
				</view>
				<view class="order-info-item" v-for="(item,index) in orderInfo[orderDetails.status]" :key="index">
					<text class="til">{{item.name}}</text>
					<text class="con">
						<text v-if="item.key=='payType'">{{orderDetails[item.key]|filterPayType}}</text>
						<text v-else>{{orderDetails[item.key]}}</text>
						<text class="copy-btn" @click="copyOrderNum(orderDetails[item.key])" v-if="item.key=='orderNum'">复制</text>
					</text>
				</view>
			</view>
			<view class="box tips">
				<view class="title">观影须知</view>
				<view class="tips-item" v-for="(item,index) in tipsArr" :key="index">
					{{item}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { systemInfo } from "@/mixin.js";
	export default {
		mixins:[systemInfo],
		data() {
			return {
				id:'',
				staticUrl:this.$commonConfig.staticUrl,
				orderDetails:{status:1},
				deadline: new Date("2023-12-01").getTime(), // 设置截止时间为某个日期的时间戳
				countdown: '', // 用于显示倒计时时间
				orderInfo:{
					0:[],
					1:[{name:'订单编号',key:'orderNum'},{name:'下单时间',key:'createTime'},{name:'支付方式',key:'payType'},{name:'支付时间',key:'payTime'}],
					2:[{name:'订单编号',key:'orderNum'},{name:'下单时间',key:'createTime'},{name:'支付方式',key:'payType'},{name:'支付时间',key:'payTime'}],
					3:[{name:'订单编号',key:'orderNum'},{name:'下单时间',key:'createTime'},{name:'支付方式',key:'payType'},{name:'支付时间',key:'payTime'},{name:'收货时间',key:'receiveTime'}],
					4:[{name:'订单编号',key:'orderNum'},{name:'下单时间',key:'createTime'}],
					5:[{name:'订单编号',key:'orderNum'},{name:'下单时间',key:'createTime'},{name:'支付方式',key:'payType'},{name:'支付时间',key:'payTime'}],
					6:[{name:'订单编号',key:'orderNum'},{name:'下单时间',key:'createTime'},{name:'支付方式',key:'payType'},{name:'支付时间',key:'payTime'}],
					7:[{name:'订单编号',key:'orderNum'},{name:'下单时间',key:'createTime'},{name:'支付方式',key:'payType'},{name:'支付时间',key:'payTime'}],
				},
				tipsArr:[
					'1.请提前到达影院现场，找到自助取票机，打印纸质电影票，完成取票',
					'2.如现场自助取票机无法打印电影票，请联系影院工作人员处理',
					'3.凭打印好的纸质电影票、检票入场观影',
					'4.如果订单使用了兑换券，或购买了特殊场次，暂不支持退票和改签'
				],
				params:{
					
				}
				
			}
		},
		onShow() {
		},
		onLoad(page) {
			console.log('page',page);
			this.getSystemInfo();

		},
		mounted() {
			// 每秒更新倒计时时间
			setInterval(() => {
			  const now = new Date().getTime();
			  const distance = this.deadline - now;
		
			  // 计算倒计时时间，可以根据需求自定义显示方式
			  const days = Math.floor(distance / (1000 * 60 * 60 * 24));
			  const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
			  const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
			  const seconds = Math.floor((distance % (1000 * 60)) / 1000);
		
			  // 更新倒计时时间
			  this.countdown = `${days}天 ${hours}小时 ${minutes}分钟 ${seconds}秒`;
			}, 1000);
		},
		methods: {
			leftClick(e){
				let pages = getCurrentPages();
				if(pages.length==1){
					uni.$u.route('/pages/index/index')
				}else{
					uni.navigateBack()
				};
			},
			refund(){
				uni.$u.route('/center/refund',{
					id:this.id
				})
			},
			copyOrderNum(orderNum){
				// console.log('copyOrderNum',orderNum);
				uni.setClipboardData({
				    data: orderNum,
				    success: function () {
				      uni.showToast({
				        title: '复制成功'
				      });
				    },
					fail(e) {
						// console.log('copyOrderNumfail',e);
						uni.showToast({
						  title: '复制失败',
						  icon:"error"
						});
					}
				});
			}

		}
	}
</script>
<style>
	page{
		background: linear-gradient(180deg, #ED0000 0%, #F9FBFD 50%,#F9FBFD 100%);
		background-repeat: no-repeat;
	}
</style>
<style lang="scss" scoped>
.status-content{
	text-align: center;
	padding-top: 30rpx;
	margin-bottom: 52rpx;
	.text{
		font-size: 32rpx;
		font-weight: 400;
		color: #FFFFFF;
		margin-bottom: 52rpx;
	}
	.btn-wrap{
		margin-bottom: 40rpx;
		.btn{
			height: 64rpx;
			line-height: 64rpx;
			padding: 0 28rpx;
			border-radius: 8rpx;
			border: 2rpx solid #FFFFFF;
			font-size: 24rpx;
			font-weight: 500;
			color: #FFFFFF;
			&.cancel{
				border-color: #F9B4B4;
				color: #F9B4B4;
			}
			&:not(:last-of-type){
				margin-right: 100rpx;
			}
		}
	}
}
.base-info{
	background: #FFFFFF;
	box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(221,221,221,0.5);
	border-radius: 20rpx;
	overflow: hidden;
	margin-bottom: 24rpx;
	.top{
		padding: 36rpx 24rpx;
		background: #F9FAFD;
		font-size: 24rpx;
		font-weight: 400;
		color: #7F7F7F;
	}
	.info{
		padding: 28rpx 20rpx 30rpx 24rpx;
		.img{
			width: 180rpx;
			height: 160rpx;
		}
		.text{
			font-size: 24rpx;
			font-weight: 400;
			color: #7F7F7F;
			padding-left: 26rpx;
			flex: 1;
			.name{
				font-size: 28rpx;
				font-weight: bold;
				color: #363636;
				margin-bottom: 20rpx;
			}
			.time{
				margin-bottom: 20rpx;
			}
			.position{
				margin-bottom: 20rpx;
			}
			.status{
				font-size: 24rpx;
				font-weight: 400;
				color: #EE0606;
			}
		}
	}
}
.box{
	margin-bottom: 24rpx;
	background: #FFFFFF;
	box-shadow: 0rpx 0rpx 20rpx 2rpx rgba(221,221,221,0.5);
	border-radius: 20rpx;
	padding: 36rpx 24rpx;
	.title{
		font-size: 28rpx;
		font-weight: bold;
		color: #2D2D2D;
		padding-bottom: 20rpx;
		margin-bottom: 24rpx;
		border-bottom: 1px solid #F4F4F4;
		.btn{
			height: 40rpx;
			line-height: 40rpx;
			padding: 0 20rpx;
			border-radius: 8rpx;
			border: 2rpx solid #606060;
			font-size: 24rpx;
			font-weight: 400;
			color: #606060;
			cursor: pointer;
		}
	}
}
.order-info{
	.order-info-item{
		font-size: 30rpx;
		font-weight: 400;
		color: #333333;
		padding: 10rpx 0;
		// &:not(:last-child){
		// 	border-bottom: 0.5px solid #eee;
		// }
		.til{
			font-size: 24rpx;
			font-weight: 400;
			color: #999999;
			margin-right: 90rpx;
		}
		.copy-btn{
			margin-left: 32rpx;
			height: 30rpx;
			line-height: 30rpx;
			padding: 0 14rpx;
			border-radius: 8rpx;
			font-size: 20rpx;
			font-weight: 400;
			color: #999999;
			background: #EDEDED;
		}
	}
}
.tips{
	.tips-item{
		font-size: 24rpx;
		font-weight: 400;
		color: #7F7F7F;
		line-height: 36rpx;
		margin-bottom: 20rpx;
	}
}
.qr-wrap{
	.qr-content{
		text-align: center;
		font-size: 24rpx;
		font-weight: 400;
		color: #7F7F7F;
	}
	.img-wrap{
		position: relative;
	}
	.img{
		width: 360rpx;
		height: 360rpx;
		display: block;
		margin: 0 auto 20rpx;
		
	}
	.refund-ico{
		width: 200rpx;
		height: 152rpx;
		position: absolute;
		bottom: -10rpx;
		right: 60rpx;
	}
	.order-num{
		position: relative;
		margin: 30rpx auto 0;
		font-size: 24rpx;
		font-weight: 400;
		color: #363636;
		border: 1px solid #363636;
		padding: 5rpx 20rpx;
		border-radius: 8rpx;
		width: fit-content;
		&.del-line{
			color: #BCBCBC;
			border: 1px solid #BCBCBC;
		}
		&.del-line::after{
			content: '';
			width: 110%;
			height: 1px;
			background-color: #BCBCBC;
			position: absolute;
			top: 50%;
			left: -5%;
		}
	}
}
</style>