订单列表，订单详情静态编码

center/center.vue

@@ -12,7 +12,7 @@
 						<view class="info">
 							<view class="name ellipsis-1">{{vuex_member_info.name}}</view>
 							<view class="mobile u-flex">
-								<text class="mobile">{{vuex_member_info.mobile}}</text>
+								<text class="mobile">{{vuex_member_info.mobile|hidePhoneNumber}}</text>
 							</view>
 						</view>
 					</view>

center/order.vue

@@ -0,0 +1,478 @@
+<template>
+	<view class="pages">
+		<u-navbar
+			title="我的订单"
+			:placeholder="true"
+			:autoBack="false"
+			 @leftClick="leftClick"
+			 :safeAreaInsetTop="true"
+		>
+		</u-navbar>
+		<view class="tabs-wrap">
+			<u-tabs 
+			:list="tabsList" 
+			lineColor="#EE0D0D" 
+			:current="tabsCurrent"
+			 :activeStyle="{color:'#EE0D0D','font-weight': '600','font-size':'30rpx'}"
+			 :inactiveStyle="{color:'#7F7F7F'}"
+			@click="tabsClick"></u-tabs>
+		</view>
+		<view class="page-wrap">
+			<mescroll-body class="" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
+				<view class="order">
+					<view v-for="(item,index) in orderListWithClass" class="order-item" 
+						:class="item.class"
+						@click="goOrderDetails(item.id)" :key="item.id">
+						<view class="top u-flex u-row-between">
+							<text>遵义《伟大转折》演艺中心</text>
+							<text>待支付</text>
+						</view>
+						<view class="info u-flex u-col-top">
+							<image class="img" :src="item.showImg||staticUrl+'/img/newsdetails-banner.png'"></image>
+							<view class="text">
+								<view class="name">《伟大转折》-【成人票】</view>
+								<view class="time">2023-11–03 14:00-16:00</view>
+								<view class="position">5排6座</view>
+								<view class="statistics">
+									<text>共1张</text>
+									<text class="label">合计：</text>
+									<text class="price">¥120.00</text>
+								</view>
+							</view>
+						</view>
+						<view class="btn-wrap u-flex u-row-right">
+							<view
+								class="btn"
+								:class="btn.class"
+								@click.stop="clickEven(btn.fun,item)"
+								v-for="(btn,index) in statusBtn[item.status]" :key="index">
+								{{btn.name}}
+							</view>
+						</view>
+					</view>
+				</view>
+			</mescroll-body>
+		</view>
+		<u-toast ref="uToast"></u-toast>
+		<tabbar :tabbarIndexProps="1" />
+	</view>
+</template>
+
+<script>
+	import tabbar from "../components/tabbar.vue";
+	// 引入mescroll-mixins.js
+	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
+	export default {
+		mixins: [MescrollMixin], // 使用mixin
+		components:{
+			tabbar
+		},
+		data() {
+			return {
+				staticUrl:this.$commonConfig.staticUrl,
+				goodsKey:1,
+				hasfetch:false,
+				tabsCurrent:1,
+				tabsList:[
+					{name:'全部',status:'',},
+					{name:'待支付',status:'0',badge:{isDot:false,value:null}},
+					{name:'待使用',status:'1',badge:{isDot:false,value:null}},
+					{name:'已完成',status:'2',badge:{isDot:false,value:null}},
+					{name:'售后',status:'3',badge:{isDot:false,value:null}}
+				],
+				status:'',
+				dataList:[{id:1,status:2}],
+				statusBtn:{
+					0:[{name:'取消订单',fun:'cancelOrder',class:''},{name:'去支付',fun:'pay',class:'red'}],
+					1:[{name:'申请退款',fun:'refund',class:''}],
+					2:[{name:'取消订单',fun:'cancelOrder',class:''},{name:'去支付',fun:'pay',class:'red solid'}],
+					3:[{name:'查看物流',fun:'logistics',class:''}],
+					//,{name:'评价',fun:'evaluate',class:'green'}
+					// 4:[{name:'查看物流',fun:'logistics',class:''},{name:'评价',fun:'evaluate',class:'green'}],
+					5:[{name:'查看退款',fun:'viewRefund',class:'green'}],
+					6:[{name:'查看物流',fun:'logistics',class:''}],
+					// ,{name:'查看评价',fun:'viewEvaluate',class:'green'}
+					7:[{name:'查看退款',fun:'viewRefund',class:'green'}]
+				},
+				orderBadge:{
+					noPayNum:0,
+					deliverNum:0,
+					collectNum:0,
+					commentNum:0,
+					refundNum:0,
+				},
+			}
+		},
+		computed: {
+		  orderListWithClass() {
+		      return this.dataList.map(order => {
+				  // let spliceData = order.detailList.splice(0,2);
+				  
+				  // let moreData = order.detailList.splice(2,order.detailList.length);
+				  // let moreData = order.detailList.slice(2);
+				  // if(order.detailList.length>2){
+					 //  moreData =  order.detailList;
+				  // }
+		        return {
+		          ...order,
+				  // spliceData:spliceData,
+				  // moreData:moreData,
+				  // showMore:false,
+		          class: {
+					0: 'status-0',
+		            1: 'status-1',
+		            2: 'status-2',
+		            3: 'status-3',
+		            4: 'status-4',
+		            5: 'status-5',
+		            6: 'status-6',
+		            7: 'status-7',
+		            8: 'status-8'
+		          }[order.status] || ''
+		        }
+		      })
+		    }
+		},
+		onLoad(page) {
+			// console.log('page',page);
+			const status = page.status;
+			const index = this.tabsList.findIndex(item => item.status === status);
+			this.tabsCurrent = index>=0?index:0;
+			
+		},
+		onShow() {
+			setTimeout(()=>{
+				this.hasfetch&&this.reloadList()
+			},500);
+			this.statisticsOrder();
+		},
+		methods: {
+			leftClick(){
+				uni.reLaunch({url: '/center/center'});
+			},
+			/*下拉刷新的回调, 重置列表为第一页 (此处可删,mixins已默认)
+			downCallback(){
+				this.mescroll.resetUpScroll();
+			},
+			/*上拉加载的回调*/
+			upCallback(page) {
+				this.statisticsOrder();
+				// 此处可以继续请求其他接口
+				// if(page.num == 1){
+				// 	// 请求其他接口...
+				// }
+			
+				// 如果希望先请求其他接口,再触发upCallback,可参考以下写法
+				// if(!this.hasTypeId){
+				// 	this.shopNewsType();
+				// 	return // 此处return,先获取xx
+				// }
+			
+				let pageNum = page.num; // 页码, 默认从1开始
+				let pageSize = page.size; // 页长, 默认每页10条
+
+				let params = {
+					pageNum : page.num,
+					pageSize :  page.size,
+					status : this.tabsList[this.tabsCurrent]?.status||'',
+					// status : this.tabsList[this.tabsCurrent].status,
+				}
+				// console.log('this.params',params);
+				this.$u.api.orderList(params).then(data => {
+					this.hasfetch = true;
+					console.log('data',JSON.parse(JSON.stringify(data)));
+					// 接口返回的当前页数据列表 (数组)
+					let curPageData = data.data.rows;
+					// console.log('curPageData',JSON.parse(JSON.stringify(curPageData)));
+					// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
+					let curPageLen = curPageData.length; 
+					// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
+					// let totalPage =  data.data.data.totalPage; 
+					// 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
+					let totalSize = data.data.total; 
+					// 接口返回的是否有下一页 (true/false)
+					// let hasNext = data.xxx; 
+					// console.log('totalPage',totalPage,'curPageLen',curPageLen);
+					//设置列表数据
+					if(page.num == 1) this.dataList = []; //如果是第一页需手动置空列表
+					this.dataList = this.dataList.concat(curPageData); //追加新数据
+					// 请求成功,隐藏加载状态
+					//方法一(推荐): 后台接口有返回列表的总页数 totalPage
+					// this.mescroll.endByPage(curPageLen, totalPage); 
+					//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
+					this.mescroll.endBySize(curPageLen, totalSize); 
+				}).catch(err => {
+					this.mescroll.endErr()
+					console.log(err)
+				});	
+			
+			},
+			/*若希望重新加载列表,只需调用此方法即可(内部会自动page.num=1,再主动触发up.callback)*/
+			reloadList() {
+				this.mescroll.resetUpScroll();
+			},
+			tabsClick(item){
+				// this.status = item.status;
+				this.tabsCurrent = item.index;
+				this.reloadList()
+				// console.log('item',item);
+			},
+			goOrderDetails(id){
+				uni.$u.route('/center/orderdetails', {
+					id: id
+				});
+			},
+			toggleMore(item,index){
+				// console.log('toggleMore',item);
+				this.orderListWithClass[index].showMore = !this.orderListWithClass[index].showMore
+				this.goodsKey++;
+			},
+			clickEven(fun,item){
+				// console.log('fun',fun);
+				let funObj = {
+				  pay: this.pay,
+				  logistics:this.logistics,
+				  evaluate:this.evaluate,
+				  refund:this.refund,
+				  cancelOrder:this.cancelOrder,
+				  viewRefund:this.viewRefund,
+				  confirmReceipt:this.confirmReceipt,
+				  viewEvaluate:this.viewEvaluate
+				};
+				// console.log('funObj[fun]',funObj[fun]);
+				if (fun in funObj) {
+				  funObj[fun](item);
+				}
+			},
+			pay(item){
+				console.log('pay',item);
+				uni.$u.route('/shopping/pay', {
+					orderId: item.id,
+					// openid: that.vuex_wechatOpenid,
+					payAmount:item.orderPrice
+				});
+			},
+			logistics(item){
+				// console.log('logistics',item);
+				uni.$u.route('/shopping/distribution', {
+					orderId: item.id
+				});
+			},
+			evaluate(item){
+				// console.log('logistics',item);
+				uni.$u.route('/shopping/evaluate', {
+					id: item.id
+				});
+			},
+			comment(orderId,orderDetailId,goodsId){
+				uni.$u.route('/shopping/addcomment', {
+					orderId,
+					orderDetailId,
+					goodsId
+				});
+			},
+			viewComment(orderDetailId,goodsId,goods){
+				uni.$u.route('/shopping/viewcomment', {
+					orderDetailId,
+					goodsId,
+					goods:JSON.stringify(goods)
+				});
+			},
+			refund(item){
+				// console.log('logistics',item);
+				uni.$u.route('/shopping/refund', {
+					id: item.id
+				});
+			},
+			cancelOrder(item){
+				let that = this;
+				uni.showModal({
+				    title: '提示',
+				    content: '确认取消吗！',
+				    success: res => {
+				        if (res.confirm) {
+				            this.$u.api.cancelOrder({orderId:item.id}).then(res=>{
+				            	this.$refs.uToast.show({
+				            		message:res.msg,
+				            		complete() {
+				            			that.reloadList();
+				            		}
+				            	});
+				            	// uni.$u.toast(res.msg);
+				            	console.log('res',res.data);
+				            }).catch(err=>{
+				            	console.log('cancelOrder',err);
+				            })
+				        }
+				    }
+				});
+				// console.log('logistics',item);
+				
+			},
+			viewRefund(item){
+				uni.$u.route('/shopping/viewRefund', {
+					orderId: item.id
+				});
+			},
+			confirmReceipt(item){
+				let that = this;
+				uni.showModal({
+				    title: '提示',
+				    content: '确认收货吗！',
+				    success: res => {
+				        if (res.confirm) {
+				            this.$u.api.confirmReceipt({orderId:item.id}).then(res=>{
+								uni.showToast({
+									title:res.msg,
+									duration:2000,
+									complete() {
+										that.reloadList();
+									}
+								});
+				            	console.log('res',res.data);
+				            }).catch(err=>{
+				            	console.log('confirmReceipt',err);
+				            })
+				        }
+				    }
+				})
+			},
+			viewEvaluate(item){
+				uni.$u.route('/shopping/orderdetails', {
+					id: item.id
+				});
+			},
+			statisticsOrder(){
+				this.$u.api.statisticsOrder().then(res=>{
+					let data = res.data || {};
+					this.orderBadge = Object.assign(this.orderBadge,data);
+					let {noPayNum,deliverNum,collectNum,commentNum,refundNum} = res.data;
+					let noPayNumindex = this.tabsList.findIndex(item => item.status == 0);
+
+						this.tabsList[1].badge.isDot = false;
+						this.tabsList[1].badge.value = noPayNum;
+
+
+						this.tabsList[2].badge.isDot = false;
+						this.tabsList[2].badge.value = deliverNum;
+
+
+						this.tabsList[3].badge.isDot = false;
+						this.tabsList[3].badge.value = collectNum;
+
+
+						this.tabsList[4].badge.isDot = false;
+						this.tabsList[4].badge.value = commentNum;
+
+
+						this.tabsList[5].badge.isDot = false;
+						this.tabsList[5].badge.value = refundNum;
+
+					// console.log('statisticsOrder',res.data);
+					// console.log('this.orderBadge',this.orderBadge);
+					}).catch(err=>{
+					console.log('memberInfo',err.data);
+				})
+			}
+		}
+	}
+</script>
+<style>
+page{
+	background-color: #F5F5F5;
+}
+</style>
+<style lang="scss" scoped>
+.tabs-wrap{
+	background-color: #fff;
+	margin-bottom: 10rpx;
+}
+.list-item{
+	overflow: hidden;
+	width: 48%;
+	margin-bottom: 30rpx;
+	background-color: #fff;
+	.image-wrap{
+		margin-bottom: 20rpx;
+	}
+}
+.order-item{
+	margin-bottom: 20rpx;
+	background: #FFFFFF;
+	box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(221,221,221,0.5);
+	border-radius: 20rpx;
+	padding: 32rpx;
+	.top{
+		font-size: 24rpx;
+		font-weight: 400;
+		color: #7F7F7F;
+		line-height: 36rpx;
+		margin-bottom: 36rpx;
+	}
+	.info{
+		margin-bottom: 30rpx;
+		.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;
+			}
+			.statistics{
+				text-align: right;
+			}
+			.label{
+				font-size: 24rpx;
+				font-weight: 400;
+				color: #363636;
+				margin-left: 10rpx;
+			}
+			.price{
+				font-size: 32rpx;
+				font-weight: bold;
+				color: #ED0000;
+			}
+		}
+	}
+	.btn-wrap{
+		
+	}
+	.btn{
+		padding: 12rpx 40rpx;
+		border: 1px solid #E5E5E5;
+		color: #7F7F7F;
+		text-align: center;
+		border-radius: 8rpx;
+		font-size: 24rpx;
+		&.red{border-color: #ED0000;color: #ED0000;}
+		&.red.solid{border-color: #ED0000;background-color:#ED0000;color: #fff;}
+		&.green{color: #00A447;border-color: #00A447;}
+		&:not(:first-child){
+			margin-left: 20rpx;
+		}
+	}
+	&.status-0{.status{color:#FF3C3F;}}
+	&.status-1{.status{color:#FF3C3F;}}
+	&.status-2{.status{color:#0099EB;}}
+	&.status-3{.status{color:#00A447;}}
+	&.status-4{.status{color:#FF3C3F;}}
+	&.status-5{.status{color:#FF3C3F;}}
+	&.status-6{.status{color:#FF3C3F;}}
+	&.status-7{.status{color:#FFB100;}}
+}
+</style>

center/orderdetails.vue

@@ -0,0 +1,359 @@
+<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>

components/tabbar.vue

@@ -8,7 +8,7 @@
 			:border="false"
 			inactiveColor="#666"
 			activeColor="#EE0808"
-			:customStyle="{'padding-top':'5px','z-index':'30','bottom':'40rpx','margin':'0 48rpx','border-radius':'50rpx','box-shadow':'rgba(100, 100, 111, 0.2) 0px 7px 29px 0px'}"
+			:customStyle="{'padding-top':'5px','padding-bottom':'5px','z-index':'30','bottom':'40rpx','margin':'0 48rpx','border-radius':'50rpx','box-shadow':'rgba(100, 100, 111, 0.2) 0px 7px 29px 0px'}"
 			:safeAreaInsetBottom="true"
 		>
 			<u-tabbar-item text="购票" >
@@ -27,12 +27,12 @@
 				<image
 					class="u-page__item__slot-icon"
 					slot="active-icon"
-					:src="staticUrl+'/img/tabbar-mall.png'"
+					:src="staticUrl+'/img/tabbar-order.png'"
 				></image>
 				<image
 					class="u-page__item__slot-icon"
 					slot="inactive-icon"
-					:src="staticUrl+'/img/tabbar-mall-gray.png'"
+					:src="staticUrl+'/img/tabbar-order-gray.png'"
 				></image>
 			</u-tabbar-item>
 			<u-tabbar-item text="我的" >
@@ -119,8 +119,8 @@ export default {
 
 <style lang="scss" scoped>
 .u-page__item__slot-icon{
-	width: 40rpx;
-	height: 40rpx;
+	width: 62rpx;
+	height: 62rpx;
 	&.big{
 		transform: scale(1.5) translateY(-0.5em);
 	}