我的发票页面；优惠券模块拆分；

pages.json

@@ -102,13 +102,13 @@
 			}
 		},
 		{
-			"path": "pages/self/coupon",
+			"path": "pages/self/coupon/index",
 			"style": {
 				"navigationBarTitleText": "我的优惠券"
 			}
 		},
 		{
-			"path": "pages/self/couponDetail",
+			"path": "pages/self/coupon/detail",
 			"style": {
 				"navigationBarTitleText": "",
 				"navigationBarBackgroundColor": "#ff6e6e",
@@ -118,10 +118,16 @@
 			}
 		},
 		{
-			"path" : "pages/self/couponCenter",
+			"path": "pages/self/coupon/center",
+			"style": {
+				"navigationBarTitleText": "领券中心"
+			}
+		},
+		{
+			"path" : "pages/self/invoice/index",
 			"style" : 
 			{
-				"navigationBarTitleText" : "领券中心"
+				"navigationBarTitleText" : "我的发票"
 			}
 		}
 	],

pages/self/coupon/index.scss

@@ -0,0 +1,181 @@
+.page-wrap {
+	padding: 82.42rpx 0 96.15rpx;
+}
+.tabs-panel {
+	position: fixed;
+	left: 0;
+	top: 0;
+	right: 0;
+	height: 82.42rpx;
+	background: #fff;
+	display: flex;
+	padding: 0 41.21rpx;
+	z-index: 1;
+
+	&::before,
+	&::after {
+		content: '';
+		position: absolute;
+		left: 0;
+		right: 0;
+		height: 1rpx;
+		background: #e0e0e0;
+	}
+
+	&::before {
+		top: 0;
+	}
+
+	&::after {
+		bottom: 0;
+	}
+
+	.item {
+		padding: 0 9.62rpx;
+		text-align: center;
+		font-size: 27.47rpx;
+		color: #999;
+		line-height: 82.42rpx;
+		position: relative;
+
+		& + .item {
+			margin-left: 27.47rpx;
+		}
+	}
+
+	.active {
+		color: #00bcd2;
+
+		&::after {
+			content: '';
+			position: absolute;
+			left: 0%;
+			right: 0%;
+			bottom: 0%;
+			height: 5.49rpx;
+			background: #00bcd2;
+			z-index: 1;
+		}
+	}
+}
+.coupon-panel {
+	.item {
+		width: 708.79rpx;
+		height: 192.31rpx;
+		border-radius: 8.24rpx;
+		position: relative;
+		overflow: hidden;
+		padding: 27.47rpx 233.52rpx 27.47rpx 41.21rpx;
+		box-sizing: border-box;
+		margin: 13.74rpx auto;
+		&:before {
+			content: '';
+			position: absolute;
+			left: 0;
+			top: 0;
+			width: 100%;
+			height: 100%;
+			background: #fff;
+			-webkit-mask-image: radial-gradient(circle at 13.74rpx 50%, transparent 13.74rpx, red 13.74rpx);
+			-webkit-mask-position: -13.74rpx;
+			z-index: -1;
+		}
+		&::after {
+			content: '';
+			position: absolute;
+			right: -27.47rpx;
+			top: 0;
+			height: 100%;
+			width: 239.01rpx;
+			background: #fe6e6d;
+			-webkit-mask-image: radial-gradient(circle at 5rpx, transparent 6rpx, red 6rpx);
+			-webkit-mask-position: -6rpx;
+			-webkit-mask-size: 100% 19rpx;
+			z-index: -1;
+		}
+		&.disabled::after {
+			background: #ccc;
+		}
+	}
+	.name {
+		font-size: 30.22rpx;
+		height: 68.68rpx;
+		display: flex;
+		align-items: center;
+		margin-top: -14rpx;
+		.text {
+			flex: 1;
+			width: 0;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+		.price {
+			line-height: 1;
+			margin: -14rpx 10rpx 0 0;
+		}
+	}
+	.desc {
+		font-size: 24.73rpx;
+		color: #999;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		line-height: 1.3;
+	}
+	.side {
+		position: absolute;
+		right: 0;
+		top: 0;
+		height: 100%;
+		width: 211.54rpx;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		font-size: 21.98rpx;
+		color: #fff;
+		padding-top: 27.47rpx;
+	}
+	.price {
+		font-size: 68.68rpx;
+		&:before {
+			content: '￥';
+			font-size: 38.46rpx;
+		}
+	}
+	.state-1 {
+		width: 182.69rpx;
+		height: 120.88rpx;
+		margin-top: 13.74rpx;
+	}
+	.state-2 {
+		width: 189.56rpx;
+		height: 130.49rpx;
+		margin-top: 8.24rpx;
+	}
+}
+.foot-btn {
+	position: fixed;
+	left: 0;
+	bottom: 0;
+	width: 100%;
+	height: 96.15rpx;
+	background: #fff;
+	font-size: 30.22rpx;
+	color: #00bcd2;
+	line-height: 96.15rpx;
+	border: none;
+	border-radius: 0;
+	&:before {
+		content: '';
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		height: 1rpx;
+		background: #e0e0e0;
+	}
+	&::after {
+		display: none;
+	}
+}

pages/self/coupon.vue

@@ -120,12 +120,12 @@ export default {
 	methods: {
 		handleOpenCouponDetail() {
 			uni.navigateTo({
-				url: 'couponDetail'
+				url: 'detail'
 			});
 		},
-		handleOpenCouponCenter(){
+		handleOpenCouponCenter() {
 			uni.navigateTo({
-				url: 'couponCenter'
+				url: 'center'
 			});
 		}
 	}
@@ -133,185 +133,5 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.page-wrap {
-	padding: 82.42rpx 0 96.15rpx;
-}
-.tabs-panel {
-	position: fixed;
-	left: 0;
-	top: 0;
-	right: 0;
-	height: 82.42rpx;
-	background: #fff;
-	display: flex;
-	padding: 0 41.21rpx;
-	z-index: 1;
-
-	&::before,
-	&::after {
-		content: '';
-		position: absolute;
-		left: 0;
-		right: 0;
-		height: 1rpx;
-		background: #e0e0e0;
-	}
-
-	&::before {
-		top: 0;
-	}
-
-	&::after {
-		bottom: 0;
-	}
-
-	.item {
-		padding: 0 9.62rpx;
-		text-align: center;
-		font-size: 27.47rpx;
-		color: #999;
-		line-height: 82.42rpx;
-		position: relative;
-
-		& + .item {
-			margin-left: 27.47rpx;
-		}
-	}
-
-	.active {
-		color: #00bcd2;
-
-		&::after {
-			content: '';
-			position: absolute;
-			left: 0%;
-			right: 0%;
-			bottom: 0%;
-			height: 5.49rpx;
-			background: #00bcd2;
-			z-index: 1;
-		}
-	}
-}
-.coupon-panel {
-	.item {
-		width: 708.79rpx;
-		height: 192.31rpx;
-		border-radius: 8.24rpx;
-		position: relative;
-		overflow: hidden;
-		padding: 27.47rpx 233.52rpx 27.47rpx 41.21rpx;
-		box-sizing: border-box;
-		margin: 13.74rpx auto;
-		&:before {
-			content: '';
-			position: absolute;
-			left: 0;
-			top: 0;
-			width: 100%;
-			height: 100%;
-			background: #fff;
-			-webkit-mask-image: radial-gradient(circle at 13.74rpx 50%, transparent 13.74rpx, red 13.74rpx);
-			-webkit-mask-position: -13.74rpx;
-			z-index: -1;
-		}
-		&::after {
-			content: '';
-			position: absolute;
-			right: -27.47rpx;
-			top: 0;
-			height: 100%;
-			width: 239.01rpx;
-			background: #fe6e6d;
-			-webkit-mask-image: radial-gradient(circle at 5rpx, transparent 6rpx, red 6rpx);
-			-webkit-mask-position: -6rpx;
-			-webkit-mask-size: 100% 19rpx;
-			z-index: -1;
-		}
-		&.disabled::after {
-			background: #ccc;
-		}
-	}
-	.name {
-		font-size: 30.22rpx;
-		height: 68.68rpx;
-		display: flex;
-		align-items: center;
-		margin-top: -14rpx;
-		.text {
-			flex: 1;
-			width: 0;
-			white-space: nowrap;
-			overflow: hidden;
-			text-overflow: ellipsis;
-		}
-		.price {
-			line-height: 1;
-			margin: -14rpx 10rpx 0 0;
-		}
-	}
-	.desc {
-		font-size: 24.73rpx;
-		color: #999;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		line-height: 1.3;
-	}
-	.side {
-		position: absolute;
-		right: 0;
-		top: 0;
-		height: 100%;
-		width: 211.54rpx;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		font-size: 21.98rpx;
-		color: #fff;
-		padding-top: 27.47rpx;
-	}
-	.price {
-		font-size: 68.68rpx;
-		&:before {
-			content: '￥';
-			font-size: 38.46rpx;
-		}
-	}
-	.state-1 {
-		width: 182.69rpx;
-		height: 120.88rpx;
-		margin-top: 13.74rpx;
-	}
-	.state-2 {
-		width: 189.56rpx;
-		height: 130.49rpx;
-		margin-top: 8.24rpx;
-	}
-}
-.foot-btn {
-	position: fixed;
-	left: 0;
-	bottom: 0;
-	width: 100%;
-	height: 96.15rpx;
-	background: #fff;
-	font-size: 30.22rpx;
-	color: #00bcd2;
-	line-height: 96.15rpx;
-	border: none;
-	border-radius: 0;
-	&:before {
-		content: '';
-		position: absolute;
-		top: 0;
-		left: 0;
-		right: 0;
-		height: 1rpx;
-		background: #e0e0e0;
-	}
-	&::after {
-		display: none;
-	}
-}
+@import 'index.scss';
 </style>

pages/self/index.vue

@@ -11,18 +11,16 @@
 			<button v-else class="btn" @click.stop="handleOpenLogin">登录</button>
 		</view>
 		<view class="menu-panel">
-			<view class="item" v-for="(item, index) in manuList" :key="index">
+			<view class="item" v-for="(item, index) in manuList" :key="index" @click="handleMenu(item.value)">
 				<image class="icon" :src="`../../static/svg/user_menu_${item.value}.svg`"></image>
 				{{ item.label }}
 				<view class="badge" v-if="item.value === 2">4</view>
 			</view>
 		</view>
 		<view class="nav-panel">
-			<view :class="{ item: true, sapce: item.topSpace }" v-for="(item, index) in navList" :key="index"
-				@click="handleNav(item.value)">
+			<view :class="{ item: true, sapce: item.topSpace }" v-for="(item, index) in navList" :key="index" @click="handleNav(item.value)">
 				<view class="icon">
-					<image :class="'icon-img icon-img-' + item.value" :src="`../../static/svg/user_nav_${item.value}.svg`">
-					</image>
+					<image :class="'icon-img icon-img-' + item.value" :src="`../../static/svg/user_nav_${item.value}.svg`"></image>
 				</view>
 				<view class="label">
 					{{ item.label }}
@@ -38,152 +36,165 @@
 </template>
 
 <script>
-	import avatar from '@/static/taxation/poster.jpg';
-	export default {
-		components: {},
-		data() {
-			return {
-				userInfo: '',
-				manuList: [{
-						label: '我的订单',
-						value: 1
-					},
-					{
-						label: '我的账单',
-						value: 2
-					},
-					{
-						label: '我的发票',
-						value: 3
-					},
-					{
-						label: '企业钱包',
-						value: 4
-					}
-				],
-				navList: [{
-						label: '企业资料',
-						value: 1
-					},
-					{
-						label: '企业团队',
-						value: 2
-					},
-					{
-						label: '认证信息',
-						value: 3
-					},
-					{
-						label: '我的分销',
-						value: 4,
-						topSpace: true
-					},
-					{
-						label: '我的优惠券',
-						value: 5
-					},
-					{
-						label: '常见问题',
-						value: 6,
-						topSpace: true
-					},
-					{
-						label: '关于我们',
-						value: 7
-					}
-				],
-				list: [{
-						icon: '/static/scan.png',
-						name: '企业资料',
-						// url: "/pages/index/scanCode/index",
-						isShow: true
-					},
-					{
-						icon: '/static/self-icon.png',
-						name: '企业团队',
-						url: '/pages/index/self_info',
-						isShow: true
-					},
-					{
-						icon: '/static/org-icon.png',
-						name: '认证信息',
-						url: '/pages/index/org_member',
-						isShow: true
-					},
-					{
-						icon: '/static/explain-icon.png',
-						name: '我的分销',
-						url: '/pages/index/back_login',
-						isShow: true
-					},
-					{
-						icon: '/static/back.png',
-						name: '我的优惠券',
-						// url: "/pages/index/scanCode/index",
-						isShow: true
-					},
-					{
-						icon: '/static/explain-icon.png',
-						name: '常见问题',
-						url: '/pages/index/back_login',
-						isShow: true
-					},
-					{
-						icon: '/static/back.png',
-						name: '关于我们',
-						// url: "/pages/index/scanCode/index",
-						isShow: true
-					}
-				]
+import avatar from '@/static/taxation/poster.jpg';
+export default {
+	components: {},
+	data() {
+		return {
+			userInfo: '',
+			manuList: [
+				{
+					label: '我的订单',
+					value: 1
+				},
+				{
+					label: '我的账单',
+					value: 2
+				},
+				{
+					label: '我的发票',
+					value: 3
+				},
+				{
+					label: '企业钱包',
+					value: 4
+				}
+			],
+			navList: [
+				{
+					label: '企业资料',
+					value: 1
+				},
+				{
+					label: '企业团队',
+					value: 2
+				},
+				{
+					label: '认证信息',
+					value: 3
+				},
+				{
+					label: '我的分销',
+					value: 4,
+					topSpace: true
+				},
+				{
+					label: '我的优惠券',
+					value: 5
+				},
+				{
+					label: '常见问题',
+					value: 6,
+					topSpace: true
+				},
+				{
+					label: '关于我们',
+					value: 7
+				}
+			],
+			list: [
+				{
+					icon: '/static/scan.png',
+					name: '企业资料',
+					// url: "/pages/index/scanCode/index",
+					isShow: true
+				},
+				{
+					icon: '/static/self-icon.png',
+					name: '企业团队',
+					url: '/pages/index/self_info',
+					isShow: true
+				},
+				{
+					icon: '/static/org-icon.png',
+					name: '认证信息',
+					url: '/pages/index/org_member',
+					isShow: true
+				},
+				{
+					icon: '/static/explain-icon.png',
+					name: '我的分销',
+					url: '/pages/index/back_login',
+					isShow: true
+				},
+				{
+					icon: '/static/back.png',
+					name: '我的优惠券',
+					// url: "/pages/index/scanCode/index",
+					isShow: true
+				},
+				{
+					icon: '/static/explain-icon.png',
+					name: '常见问题',
+					url: '/pages/index/back_login',
+					isShow: true
+				},
+				{
+					icon: '/static/back.png',
+					name: '关于我们',
+					// url: "/pages/index/scanCode/index",
+					isShow: true
+				}
+			]
+		};
+	},
+	onLoad() {},
+	onShow() {},
+	methods: {
+		handleOpenLogin() {
+			this.userInfo = {
+				name: 'Caocao',
+				company: '天津超易达胜科技',
+				avatar: avatar
 			};
 		},
-		onLoad() {},
-		onShow() {},
-		methods: {
-			handleOpenLogin() {
-				this.userInfo = {
-					name: 'Caocao',
-					company: '天津超易达胜科技',
-					avatar: avatar,
-
-				};
-			},
-			handleOpenInfo() {
-				if (!this.userInfo) return
-				uni.navigateTo({
-					url: 'info'
-				});
-			},
-			handleNav(val) {
-				let url = '';
-				switch (val) {
-					case 1:
-						url = 'enterpriseInfo'
-						break
-					case 2:
-						url = 'enterpriseTeam'
-						break
-					case 3:
-						url = 'auth'
-						break
-					case 5:
-						url = 'coupon'
-						break
-					case 6:
-						url = 'commonQuestion'
-						break
-					case 7:
-						url = 'about'
-						break
-				}
-				uni.navigateTo({
-					url
-				});
+		handleOpenInfo() {
+			if (!this.userInfo) return;
+			uni.navigateTo({
+				url: 'info'
+			});
+		},
+		handleMenu(val){
+			let url = '';
+			switch (val) {
+				case 3:
+					url = 'invoice/index';
+					break;
+			}
+			uni.navigateTo({
+				url
+			});
+		},
+		handleNav(val) {
+			let url = '';
+			switch (val) {
+				case 1:
+					url = 'enterpriseInfo';
+					break;
+				case 2:
+					url = 'enterpriseTeam';
+					break;
+				case 3:
+					url = 'auth';
+					break;
+				case 5:
+					url = 'coupon/index';
+					break;
+				case 6:
+					url = 'commonQuestion';
+					break;
+				case 7:
+					url = 'about';
+					break;
 			}
+			uni.navigateTo({
+				url
+			});
 		}
-	};
+	}
+};
 </script>
 
 <style lang="scss" scoped>
-	@import 'index.scss';
-</style>
+@import 'index.scss';
+</style>

pages/self/invoice/index.scss

@@ -0,0 +1,118 @@
+.page-wrap {
+	padding-top: 96.15rpx;
+}
+.fixed-header {
+	position: fixed;
+	left: 0%;
+	top: 0%;
+	right: 0%;
+	height: 96.15rpx;
+	background: #fff;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 0 68.68rpx;
+
+	&::before {
+		content: '';
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		height: 1rpx;
+		background: #e0e0e0;
+	}
+	.search-input {
+		width: 439.56rpx;
+		height: 61.81rpx;
+		border: 1rpx solid #d0dde9;
+		border-radius: 8.24rpx;
+		position: relative;
+		.input {
+			width: 100%;
+			height: 100%;
+			font-size: 24.73rpx;
+			padding: 0 82.42rpx 0 13.74rpx;
+			box-sizing: border-box;
+		}
+		.icon {
+			width: 39.84rpx;
+			height: 39.84rpx;
+			position: absolute;
+			right: 27.47rpx;
+			top: 50%;
+			transform: translateY(-50%);
+		}
+	}
+	.filter {
+		font-size: 27.47rpx;
+		background: none;
+		border: none;
+		padding: 0;
+		margin: 0;
+		&::after {
+			display: none;
+		}
+	}
+}
+.invoice-panel {
+	padding: 13.74rpx 0;
+	.item {
+		height: 206.04rpx;
+		background: #fff;
+		padding: 13.74rpx 233.52rpx 13.74rpx 27.47rpx;
+		position: relative;
+		box-sizing: border-box;
+		&+.item{
+			margin-top: 13.74rpx;
+		}
+	}
+	.state{
+		width: 178.57rpx;
+		height: 178.57rpx;
+		position: absolute;
+		right: 27.47rpx;
+		top: 13.74rpx;
+		border-radius: 8.24rpx;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		font-size: 32.97rpx;
+		color: #fff;
+		&::after{
+			font-size: 27.47rpx;
+			margin-top: 13.74rpx;
+		}
+		&-1{
+			background: #00bfbf;
+			&::after{
+				content: '待申请';
+			}
+		}
+		&-2{
+			background: #ccc;
+			&::after{
+				content: '申请中';
+			}
+		}
+		&-3{
+			background: #f7922a;
+			&::after{
+				content: '已开票';
+			}
+		}
+	}
+	.name{
+		font-size: 27.47rpx;
+		line-height: 1.5;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+	.desc{
+		font-size: 24.73rpx;
+		line-height: 1.5;
+		color: #999;
+	}
+}

pages/self/invoice/index.vue

@@ -0,0 +1,50 @@
+<template>
+	<view class="page-wrap">
+		<view class="fixed-header">
+			<view class="search-input">
+				<input class="input" placeholder-style="color: #999" type="text" placeholder="关键词" maxlength="20" />
+				<image class="icon" src="../../../static/icon_search.png"></image>
+			</view>
+			<button class="filter">筛选</button>
+		</view>
+		<view class="invoice-panel">
+			<view class="item">
+				<view class="name">天津鑫恩华产业园区管理有限公司</view>
+				<view class="name">To：天津超易达胜科技发展有限公司</view>
+				<view class="desc">发票类型：普票</view>
+				<view class="desc">发票用途：房租</view>
+				<view class="desc">申请日期：2023-09-21</view>
+				<view class="state state-1">49760.00</view>
+			</view>
+			<view class="item">
+				<view class="name">天津鑫恩华产业园区管理有限公司</view>
+				<view class="name">To：天津超易达胜科技发展有限公司</view>
+				<view class="desc">发票类型：普票</view>
+				<view class="desc">发票用途：房租</view>
+				<view class="desc">申请日期：2023-09-21</view>
+				<view class="state state-2">3600.00</view>
+			</view>
+			<view class="item">
+				<view class="name">天津鑫恩华产业园区管理有限公司</view>
+				<view class="name">To：天津超易达胜科技发展有限公司</view>
+				<view class="desc">发票类型：普票</view>
+				<view class="desc">发票用途：房租</view>
+				<view class="desc">申请日期：2023-09-21</view>
+				<view class="state state-3">1200.00</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	data() {
+		return {};
+	},
+	methods: {}
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'index.scss';
+</style>