我的订单页面；订单详情页面；

pages.json

@@ -164,6 +164,13 @@
 			{
 				"navigationBarTitleText" : "我的订单"
 			}
+		},
+		{
+			"path" : "pages/self/order/detail",
+			"style" : 
+			{
+				"navigationBarTitleText" : "订单详情"
+			}
 		}
 	],
 	"globalStyle": {

pages/self/order/detail.vue

@@ -0,0 +1,325 @@
+<template>
+	<view class="page-wrap">
+		<view class="header-panel">
+			<view class="name">记账报税套餐（年度）</view>
+			<view class="text">订单类型：财税 - 新签</view>
+			<view class="text">订单编号：HC25263</view>
+			<view class="state">待提交</view>
+		</view>
+		<view class="info-panel">
+			<view class="title-row">
+				<image class="icon" src="../../../static/svg/tag.svg"></image>
+				订单信息
+			</view>
+			<view class="text-row">
+				<view class="label">签约类型</view>
+				<view class="text">新签</view>
+			</view>
+			<view class="text-row" style="border: none">
+				<view class="label">合同期限</view>
+				<view class="text">2023-09-21 至 2024-10-05</view>
+			</view>
+			<view class="text-row">
+				<view class="label">服务类型</view>
+				<view class="text">年度服务</view>
+			</view>
+			<view class="text-row">
+				<view class="label">服务内容</view>
+				<view class="text">记账报税、税控托管</view>
+			</view>
+			<view class="text-row">
+				<view class="label">服务费</view>
+				<view class="text">3800.00</view>
+			</view>
+			<view class="text-row">
+				<view class="label">合同付款方式</view>
+				<view class="text">年付</view>
+			</view>
+			<view class="text-row">
+				<view class="label">日滞纳金</view>
+				<view class="text">15%</view>
+			</view>
+		</view>
+		<view class="info-panel">
+			<view class="title-row">
+				<image class="icon" src="../../../static/svg/tag.svg"></image>
+				签约信息
+			</view>
+			<view class="text-row">
+				<view class="label">甲方</view>
+				<view class="text">天津鑫恩华产业园区管理有限公司</view>
+			</view>
+			<view class="text-row">
+				<view class="label">乙方</view>
+				<view class="text">天津超易达胜科技发展有限公司</view>
+			</view>
+			<view class="text-row">
+				<view class="label">联系人</view>
+				<view class="text">白经理</view>
+			</view>
+			<view class="text-row">
+				<view class="label">联系电话</view>
+				<view class="text">18625238521</view>
+			</view>
+			<view class="text-row">
+				<view class="label">电子件接收邮箱</view>
+				<view class="text">156306635@qq.com</view>
+			</view>
+			<view class="text-row">
+				<view class="label">销售人</view>
+				<view class="text">赵敏</view>
+			</view>
+			<view class="text-row">
+				<view class="label">跟单人</view>
+				<view class="text">周芷若</view>
+			</view>
+		</view>
+		<view class="info-panel">
+			<view class="title-row">
+				<image class="icon" src="../../../static/svg/tag.svg"></image>
+				备注信息
+			</view>
+			<view class="text-row">
+				<text class="remark">备注默认为空，如果有备注信息在这里填写， 最多三行，肯定够用了 按字义回车换行，显得更有条理</text>
+			</view>
+		</view>
+		<view class="info-panel">
+			<view class="title-row">
+				<image class="icon" src="../../../static/svg/tag.svg"></image>
+				账单列表
+			</view>
+			<view class="text-row">
+				<view class="label">应付# 财税·年服务费 3800.00</view>
+				<view class="text">未支付</view>
+			</view>
+		</view>
+		<view class="info-panel">
+			<view class="title-row">
+				<image class="icon" src="../../../static/svg/tag.svg"></image>
+				合同信息
+			</view>
+			<view class="text-row">
+				<view class="label">合同形式</view>
+				<view class="text">电子合同</view>
+			</view>
+			<view class="text-row arrow-row">
+				<view class="label">电子合同文件</view>
+				<view class="text">待签署</view>
+				<image class="arrow" src="../../../static/svg/arrow.svg"></image>
+			</view>
+		</view>
+		<view class="contact-row">
+			<image class="avatar" src="../../../static/img_avatar.png" mode="aspectFill"></image>
+			<view class="info">
+				<view class="name">陈禹佳</view>
+				<view class="desc">专属客服，24小时咨询</view>
+			</view>
+			<view class="tel">电话</view>
+			<image class="icon" src="../../../static/icon_tel.png"></image>
+		</view>
+		<view class="foot-panel">
+			<view class="foot-panel-wrap">
+				<button class="btn btn-1">删除订单</button>
+				<button class="btn">提交审核</button>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				isCollapse: false
+			};
+		},
+		methods: {}
+	};
+</script>
+
+<style lang="scss" scoped>
+	.header-panel {
+		height: 164.84rpx;
+		background: #fff;
+		padding: 13.74rpx 137.36rpx 13.74rpx 27.47rpx;
+		position: relative;
+		box-sizing: border-box;
+		border-top: 1rpx solid #e0e0e0;
+
+		.name {
+			font-size: 32.97rpx;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			margin: 6.87rpx 0 10.99rpx;
+		}
+
+		.text {
+			font-size: 27.47rpx;
+			color: #999;
+		}
+
+		.state {
+			font-size: 32.97rpx;
+			color: #F97631;
+			position: absolute;
+			right: 27.47rpx;
+			top: 50%;
+			transform: translateY(-50%);
+		}
+	}
+
+	.info-panel {
+		background: #fff;
+		margin-top: 13.74rpx;
+
+		.title-row {
+			padding: 13.74rpx 27.47rpx;
+			min-height: 82.42rpx;
+			box-sizing: border-box;
+			display: flex;
+			align-items: center;
+			border-bottom: 1rpx solid #e0e0e0;
+			font-size: 27.47rpx;
+			color: #0384d6;
+
+			.icon {
+				width: 20.6rpx;
+				height: 20.6rpx;
+				background: #3498db;
+				padding: 8.24rpx;
+				margin-right: 13.74rpx;
+			}
+		}
+
+		.text-row {
+			padding: 20.6rpx 27.47rpx;
+			min-height: 82.42rpx;
+			box-sizing: border-box;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			font-size: 27.47rpx;
+
+			&+.text-row {
+				border-top: 1rpx solid #e0e0e0;
+			}
+
+			.label {
+				white-space: nowrap;
+				margin-right: 27.47rpx;
+			}
+
+			.text {
+				word-break: break-all;
+				text-align: right;
+			}
+
+			.remark {
+				line-height: 41.21rpx;
+			}
+
+			.input {
+				width: 274.73rpx;
+				margin: -5.49rpx 0;
+			}
+		}
+		.arrow-row{
+			.label{
+				flex: 1;
+			}
+			.arrow{
+				width: 32.97rpx;
+				height: 32.97rpx;
+			}
+		}
+	}
+
+	.collapse-btn {
+		font-size: 24.73rpx;
+		color: #999;
+		line-height: 82.42rpx;
+		text-align: center;
+		background: #fff;
+		border-top: 1rpx solid #e0e0e0;
+	}
+
+	.contact-row {
+		display: flex;
+		align-items: center;
+		height: 109.89rpx;
+		background: #fff;
+		padding: 0 27.47rpx;
+		margin: 13.74rpx 0;
+
+		.avatar {
+			width: 76.92rpx;
+			height: 76.92rpx;
+			border-radius: 50%;
+		}
+
+		.info {
+			flex: 1;
+			margin: 0 13.74rpx;
+		}
+
+		.name {
+			font-size: 27.47rpx;
+			color: #545e8f;
+		}
+
+		.desc {
+			font-size: 24.73rpx;
+			color: #999;
+		}
+
+		.tel {
+			font-size: 27.47rpx;
+			color: #999;
+		}
+
+		.icon {
+			width: 54.95rpx;
+			height: 54.95rpx;
+			margin-left: 13.74rpx;
+		}
+	}
+
+	.foot-panel {
+		height: 96.15rpx;
+
+		&-wrap {
+			position: fixed;
+			left: 0;
+			bottom: 0;
+			right: 0;
+			height: 96.15rpx;
+			background: #f7f7f7;
+			z-index: 1;
+			display: flex;
+			align-items: center;
+			justify-content: flex-end;
+			padding: 0 27.47rpx;
+		}
+
+		.btn {
+			min-width: 164.84rpx;
+			height: 68.68rpx;
+			font-size: 27.47rpx;
+			line-height: 68.68rpx;
+			color: #fff;
+			background: #f97631;
+			border-radius: 5.49rpx;
+			box-sizing: border-box;
+			padding: 0 27.47rpx;
+			margin: 0 0 0 13.74rpx;
+
+			&-1 {
+				color: #666;
+				background: none;
+				border: 1rpx solid #ccc;
+				line-height: 65.93rpx;
+			}
+		}
+	}
+</style>

pages/self/order/index.scss

@@ -0,0 +1,132 @@
+.page-wrap {
+		padding-top: 82.42rpx;
+	}
+
+	.tabs-panel {
+		position: fixed;
+		left: 0;
+		top: 0;
+		right: 0;
+		height: 82.42rpx;
+		background: #fff;
+		display: flex;
+		z-index: 1;
+
+		&::before,
+		&::after {
+			content: '';
+			position: absolute;
+			left: 0;
+			right: 0;
+			height: 1rpx;
+			background: #e0e0e0;
+		}
+
+		&::before {
+			top: 0;
+		}
+
+		&::after {
+			bottom: 0;
+		}
+
+		.item {
+			flex: 1;
+			text-align: center;
+			font-size: 27.47rpx;
+			color: #999;
+			line-height: 82.42rpx;
+			position: relative;
+
+			&+.item::before {
+				content: '';
+				position: absolute;
+				left: 0;
+				top: 0;
+				bottom: 0;
+				width: 1rpx;
+				background: #e0e0e0;
+			}
+		}
+
+		.active {
+			color: #00bcd2;
+
+			&::after {
+				content: '';
+				position: absolute;
+				left: 0%;
+				right: 0%;
+				bottom: 0%;
+				height: 5.49rpx;
+				background: #00bcd2;
+				z-index: 1;
+			}
+		}
+	}
+
+	.order-panel {
+		padding: 13.74rpx 0;
+		.item{
+			background: #fff;
+			&+.item{
+				margin-top: 13.74rpx;
+			}
+		}
+		.head{
+			display: flex;
+			align-items: center;
+			padding: 0 27.47rpx;
+			height: 82.42rpx;
+			border-bottom: 1rpx solid #e0e0e0;
+			.icon{
+				width: 35.71rpx;
+				height: 35.71rpx;
+			}
+			.business{
+				margin: 0 13.74rpx;
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				flex: 1;
+				font-size: 27.47rpx;
+				color: #333;
+			}
+			.state{
+				font-size: 27.47rpx;
+				color: #F97631;
+			}
+		}
+		.content{
+			position: relative;
+			height: 206.04rpx;
+			padding: 27.47rpx 219.78rpx 27.47rpx 27.47rpx;
+			box-sizing: border-box;
+			.name{
+				font-size: 32.97rpx;
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				margin-bottom: 10.99rpx;
+			}
+			.text{
+				font-size: 27.47rpx;
+				color: #999;
+			}
+			.money{
+				font-size: 27.47rpx;
+				color: #666;
+				white-space: nowrap;
+				position: absolute;
+				top: 96.15rpx;
+				right: 27.47rpx;
+			}
+			.sub{
+				position: absolute;
+				right: 27.47rpx;
+				top: 54.95rpx;
+				font-size: 27.47rpx;
+				color: #666;
+			}
+		}
+	}

pages/self/order/index.vue

@@ -1,106 +1,79 @@
 <template>
 	<view class="page-wrap">
 		<view class="tabs-panel">
-			<view :class="{ item: true, active: tabActive === item.value }" v-for="(item, index) in tabList" :key="index" @click="tabActive = item.value">
+			<view :class="{ item: true, active: tabActive === item.value }" v-for="(item, index) in tabList" :key="index"
+				@click="tabActive = item.value">
 				{{ item.label }}
 			</view>
 		</view>
+		<view class="order-panel">
+			<view class="item" @click="handleOpenOrderDetail">
+				<view class="head">
+					<image class="icon" src="../../../static/svg/temp.svg" mode="aspectFill"></image>
+					<view class="business">财税</view>
+					<view class="state">待审核</view>
+				</view>
+				<view class="content">
+					<view class="name">记账报税套餐（年度）</view>
+					<view class="text">订单号：10735</view>
+					<view class="text">天津超易达胜科技发展有限公司</view>
+					<view class="text">2023-10 至 2024-09</view>
+					<view class="money">￥3600.00</view>
+					<view class="sub">新签申请</view>
+				</view>
+			</view>
+			<view class="item">
+				<view class="head">
+					<image class="icon" src="../../../static/svg/temp.svg" mode="aspectFill"></image>
+					<view class="business">财税</view>
+					<view class="state">生效中</view>
+				</view>
+				<view class="content">
+					<view class="name">记账报税套餐（年度）</view>
+					<view class="text">订单号：10735</view>
+					<view class="text">天津超易达胜科技发展有限公司</view>
+					<view class="text">2023-10 至 2024-09</view>
+					<view class="money">￥3600.00</view>
+				</view>
+			</view>
+		</view>
 	</view>
 </template>
 
 <script>
-export default {
-	data() {
-		return {
-			tabActive: 1,
-			tabList: [
-				{
-					label: '全部订单',
-					value: 1
-				},
-				{
-					label: '未生效',
-					value: 2
-				},
-				{
-					label: '未生效',
-					value: 3
-				},
-				{
-					label: '已完成',
-					value: 4
-				}
-			]
-		};
-	},
-	methods: {}
-};
+	export default {
+		data() {
+			return {
+				tabActive: 1,
+				tabList: [{
+						label: '全部订单',
+						value: 1
+					},
+					{
+						label: '未生效',
+						value: 2
+					},
+					{
+						label: '未生效',
+						value: 3
+					},
+					{
+						label: '已完成',
+						value: 4
+					}
+				]
+			};
+		},
+		methods: {
+			handleOpenOrderDetail() {
+				uni.navigateTo({
+					url: 'detail'
+				});
+			}
+		}
+	};
 </script>
 
 <style lang="scss" scoped>
-.page-wrap {
-	padding-top: 82.42rpx;
-}
-
-.tabs-panel {
-	position: fixed;
-	left: 0;
-	top: 0;
-	right: 0;
-	height: 82.42rpx;
-	background: #fff;
-	display: flex;
-	z-index: 1;
-
-	&::before,
-	&::after {
-		content: '';
-		position: absolute;
-		left: 0;
-		right: 0;
-		height: 1rpx;
-		background: #e0e0e0;
-	}
-
-	&::before {
-		top: 0;
-	}
-
-	&::after {
-		bottom: 0;
-	}
-
-	.item {
-		flex: 1;
-		text-align: center;
-		font-size: 27.47rpx;
-		color: #999;
-		line-height: 82.42rpx;
-		position: relative;
-		& + .item::before {
-			content: '';
-			position: absolute;
-			left: 0;
-			top: 0;
-			bottom: 0;
-			width: 1rpx;
-			background: #e0e0e0;
-		}
-	}
-
-	.active {
-		color: #00bcd2;
-
-		&::after {
-			content: '';
-			position: absolute;
-			left: 0%;
-			right: 0%;
-			bottom: 0%;
-			height: 5.49rpx;
-			background: #00bcd2;
-			z-index: 1;
-		}
-	}
-}
-</style>
+	@import 'index.scss';
+</style>