我的订单及其详情静态页完成

pages.json

@@ -135,6 +135,18 @@
 					"style": {
 						"navigationStyle": "custom"
 					}
+				},
+				{
+					"path": "order",
+					"style": {
+						"navigationStyle": "custom"
+					}
+				},
+				{
+					"path": "orderDetail",
+					"style": {
+						"navigationStyle": "custom"
+					}
 				}
 			]
 		}

pages/my.vue

@@ -64,7 +64,7 @@
 					{
 						img:this.$imgBase+'my_order.png',
 						title:'我的订单',
-						path:''
+						path:'/pagesMy/order'
 					},
 					{
 						img:this.$imgBase+'my_record.png',

pagesMy/order.vue

@@ -0,0 +1,247 @@
+<template>
+	<view class="default_page" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
+		<cus-header title='我的订单'></cus-header>
+		<view class="tab adfac">
+			<view class="tab-pre" :class="{'active':tindex===index}" @click="changeTab(item,index)"
+				v-for="(item,index) in statusList" :key="index">{{item}}</view>
+		</view>
+		<view class="list">
+			<view class="list-pre" v-for="(item,index) in list" :key="index" @click.prevent="handleDetail(item)">
+				<view class="list-pre-top adfacjb">
+					<view class="list-pre-top-no">订单号：{{item.no}}</view>
+					<view class="list-pre-top-status" :class="statusColor[item.status]">{{statusCfg[item.status]}}</view>
+				</view>
+				<view class="list-pre-info adf">
+					<view class="list-pre-info-left adfac">
+						<image class="list-pre-info-left-img" :src="imgBase+'order_img.png'"></image>
+						<view class="list-pre-info-left-texts">
+							<view class="list-pre-info-left-texts-num">{{typeCfg[item.type]}}{{item.sum}}次，剩余{{item.next}}次可用</view>
+							<view class="list-pre-info-left-texts-date">有效期至 {{item.date}}</view>
+						</view>
+					</view>
+					<view class="list-pre-info-right">￥{{item.price.toFixed(2)}}</view>
+				</view>
+				<view class="list-pre-btns adf">
+					<view class="list-pre-btns-pre cancel" v-if="item.status==0" @click.stop="orderCancel">取消订单</view>
+					<view class="list-pre-btns-pre" @click.stop="buyAgain">再次购买</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data(){
+			return {
+				tindex:0,
+				statusList:['全部','已支付','待支付','已取消'],
+				statusCfg:{
+					0:'待支付',
+					1:'已支付',
+					2:'已取消'
+				},
+				statusColor:{
+					0:'dzf',
+					1:'yzf',
+					2:'yqx'
+				},
+				typeCfg:{
+					1:'基础版',
+					2:'专业版'
+				},
+				list:[
+					{
+						no:'20229485872902',
+						status:1,
+						type:1,
+						sum:1,
+						next:1,
+						price:99,
+						date:'2025-11-11'
+					},
+					{
+						no:'20229485872902',
+						status:0,
+						type:2,
+						sum:5,
+						next:4,
+						price:199,
+						date:'2025-11-11'
+					},
+					{
+						no:'20229485872902',
+						status:2,
+						type:2,
+						sum:10,
+						next:0,
+						price:799,
+						date:'2025-11-11'
+					}
+				]
+			}
+		},
+		methods:{
+			changeTab(item,index){
+				this.tindex = index;
+			},
+			handleDetail(item){
+				uni.navigateTo({
+					url:'/pagesMy/orderDetail?item='+encodeURIComponent(JSON.stringify(item))
+				})
+			},
+			orderCancel(){
+			},
+			buyAgain(){
+			},
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.default_page{
+		padding: 0 24rpx 40rpx;
+		box-sizing: border-box;
+		background: #F7F7F7;
+		
+		.tab{
+			position: fixed;
+			left: 0;
+			right: 0;
+			height: 90rpx;
+			background: #FFFFFF;
+			&-pre{
+				width: 25%;
+				height: 90rpx;
+				font-family: PingFangSC, PingFang SC;
+				font-weight: 400;
+				font-size: 28rpx;
+				color: #667E90;
+				line-height: 90rpx;
+				text-align: center;
+				position: relative;
+				&.active{
+					font-weight: bold;
+					font-size: 32rpx;
+					color: #002846;
+					&::after{
+						content: '';
+						width: 48rpx;
+						height: 6rpx;
+						background: #904A87;
+						border-radius: 5rpx;
+						position: absolute;
+						left: 50%;
+						margin-left: -24rpx;
+						bottom: 4rpx;
+					}
+				}
+			}
+		}
+		
+		.list{
+			padding-top: 110rpx;
+			&-pre{
+				background: #FFFFFF;
+				border-radius: 25rpx;
+				margin-top: 20rpx;
+				padding: 36rpx 24rpx 29rpx;
+				&:first-child{
+					margin-top: 0;
+				}
+				
+				&-top{
+					&-no{
+						font-family: PingFangSC, PingFang SC;
+						font-weight: 400;
+						font-size: 26rpx;
+						color: #667E90;
+						line-height: 30rpx;
+					}
+					&-status{
+						padding: 6rpx 13rpx;
+						border-radius: 6rpx;
+						font-family: PingFangSC, PingFang SC;
+						font-weight: 400;
+						font-size: 24rpx;
+						line-height: 30rpx;
+						&.yzf{
+							color: #33A7A7;
+							background: rgba(51,167,167,0.08);
+						}
+						&.dzf{
+							color: #FD4F66;
+							background: rgba(244,101,122,0.1);
+						}
+						&.yqx{
+							color: #667E90;
+							background: #F0F2F8;
+						}
+					}
+				}
+				
+				&-info{
+					margin-top: 16rpx;
+					border-top: 1rpx solid #EFEFEF;
+					padding-top: 32rpx;
+					justify-content: space-between;
+					&-left{
+						&-img{
+							width: 64rpx;
+							height: 64rpx;
+						}
+						&-texts{
+							margin-left: 20rpx;
+							&-num{
+								font-family: PingFang-SC, PingFang-SC;
+								font-weight: bold;
+								font-size: 30rpx;
+								color: #002846;
+								line-height: 30rpx;
+							}
+							&-date{
+								font-family: PingFangSC, PingFang SC;
+								font-weight: 400;
+								font-size: 26rpx;
+								color: #667E90;
+								line-height: 30rpx;
+								margin-top: 20rpx;
+							}
+						}
+					}
+					&-right{
+						font-family: PingFang-SC, PingFang-SC;
+						font-weight: bold;
+						font-size: 30rpx;
+						color: #1D2129;
+						line-height: 30rpx;
+						text-align: right;
+					}
+				}
+				
+				&-btns{
+					justify-content: flex-end;
+					margin-top: 30rpx;
+					&-pre{
+						background: #904A87;
+						border-radius: 27rpx;
+						border: 1rpx solid #904A87;
+						font-family: PingFangSC, PingFang SC;
+						font-weight: 400;
+						font-size: 24rpx;
+						color: #FFFFFF;
+						line-height: 30rpx;
+						padding: 12rpx 26rpx;
+						letter-spacing: 2rpx;
+						margin-left: 30rpx;
+						&.cancel{
+							background: #FFFFFF;
+							border: 1rpx solid #E2E2E2;
+							color: #95A5B1;
+						}
+					}
+				}
+			}
+		}
+	}
+</style>

pagesMy/orderDetail.vue

@@ -0,0 +1,197 @@
+<template>
+	<view class="default_page" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
+		<cus-header title='我的订单' bgColor="transparent"></cus-header>
+		<image class="top_bg" :src="imgBase+'order_detail_bg.png'" mode="widthFix"></image>
+		<view class="top adf">
+			<view class="top-left adfac">
+				<image :src="imgBase+'order_detail_success.png'"></image>
+				<view class="top-left-texts adffc">
+					<text>{{statusCfg[orderInfo.status]}}</text>
+					<text class="tip" v-if="orderInfo.status>0">{{statusTip[orderInfo.status]}}</text>
+					<text class="tip" v-else>剩余支付时间 {{'00:05:00'}}，超时将自动取消</text>
+				</view>
+			</view>
+			<view class="top-right">￥{{orderInfo.price}}</view>
+		</view>
+		<view class="form">
+			<view class="form-item adfacjb">
+				<view class="form-item-title">订单号</view>
+				<view class="form-item-value">{{orderInfo.no}}</view>
+			</view>
+			<view class="form-item adfacjb">
+				<view class="form-item-title">订单类型</view>
+				<view class="form-item-value">{{typeCfg[orderInfo.type]}} {{orderInfo.sum}}次</view>
+			</view>
+			<view class="form-item adfacjb">
+				<view class="form-item-title">订单金额</view>
+				<view class="form-item-value">￥{{orderInfo.price}}</view>
+			</view>
+			<view class="form-item adfacjb">
+				<view class="form-item-title">下单时间</view>
+				<view class="form-item-value">{{'2025-10-10 09:10:11'}}</view>
+			</view>
+			<view class="form-item adfacjb">
+				<view class="form-item-title">有效期至</view>
+				<view class="form-item-value">{{orderInfo.date}}</view>
+			</view>
+		</view>
+		<view class="bottom adfacjb">
+			<template v-if="orderInfo.status!=0">
+				<view class="bottom-default" @click="buyAgain">再次购买</view>
+			</template>
+			<template v-else>
+				<view class="bottom-default half qx" @click="orderCancel">取消</view>
+				<view class="bottom-default half" @click="orderPay">去支付</view>
+			</template>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data(){
+			return {
+				orderInfo:null,
+				statusCfg:{
+					0:'待支付',
+					1:'已完成',
+					2:'已取消'
+				},
+				typeCfg:{
+					1:'基础版',
+					2:'专业版'
+				},
+				statusTip:{
+					1:'您的问卷已激活，开始PREILL评估',
+					2:'您的订单已取消，可重新购买'
+				}
+			}
+		},
+		onLoad(options) {
+			if(options.item) this.orderInfo = JSON.parse(decodeURIComponent(options.item))
+			console.log(this.orderInfo);
+		},
+		methods:{
+			buyAgain(){
+				
+			},
+			orderCancel(){
+				
+			},
+			orderPay(){
+				
+			},
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.default_page{
+		padding: 0 24rpx 192rpx;
+		box-sizing: border-box;
+		background: #F7F7F7;
+		
+		.top_bg{
+			width: 100%;
+			position: absolute;
+			left: 0;
+			top: 0;
+		}
+		
+		.top{
+			margin-top: 54rpx;
+			padding: 0 24rpx;
+			position: relative;
+			justify-content: space-between;
+			&-left{
+				image{
+					width: 69rpx;
+					height: 69rpx;
+				}
+				&-texts{
+					margin-left: 20rpx;
+					text{
+						font-family: PingFang-SC, PingFang-SC;
+						font-weight: bold;
+						font-size: 40rpx;
+						color: #002846;
+						line-height: 40rpx;
+						&.tip{
+							font-family: PingFangSC, PingFang SC;
+							font-weight: 400;
+							font-size: 24rpx;
+							color: #667E90;
+							line-height: 26rpx;
+							margin-top: 24rpx;
+						}
+					}
+				}
+			}
+			&-right{
+				font-family: PingFang-SC, PingFang-SC;
+				font-weight: bold;
+				font-size: 36rpx;
+				color: #002846;
+				line-height: 30rpx;
+				text-align: right;
+			}
+		}
+		
+		.form{
+			background: #FFFFFF;
+			border-radius: 25rpx;
+			margin-top: 54rpx;
+			padding: 0 24rpx;
+			position: relative;
+			&-item{
+				box-shadow: inset 0rpx -1rpx 0rpx 0rpx #EFEFEF;
+				padding: 34rpx 0;
+				&-title{
+					font-family: PingFangSC, PingFang SC;
+					font-weight: 400;
+					font-size: 30rpx;
+					color: #002846;
+					line-height: 30rpx;
+				}
+				&-value{
+					font-family: PingFangSC, PingFang SC;
+					font-weight: 400;
+					font-size: 30rpx;
+					color: #667E90;
+					line-height: 30rpx;
+					text-align: right;
+				}
+			}
+		}
+	
+		.bottom{
+			width: calc(100% - 88rpx);
+			height: 88rpx;
+			position: fixed;
+			left: 44rpx;
+			bottom: 54rpx;
+			&-default{
+				width: 100%;
+				height: 88rpx;
+				border: 1rpx solid #904A87;
+				background: #904A87;
+				border-radius: 44rpx;
+				font-family: PingFang-SC, PingFang-SC;
+				font-weight: bold;
+				font-size: 32rpx;
+				color: #FFFFFF;
+				line-height: 88rpx;
+				text-align: center;
+				letter-spacing: 2rpx;
+				&.half{
+					width: calc(50% - 19rpx);
+				}
+				&.qx{
+					color: #657588;
+					background: #FFFFFF;
+					border: 1rpx solid #CCD4DA;
+				}
+			}
+		}
+	}
+</style>