开票说明 申请开票 发票详情 查看电子发票 发票抬头管理

assets/img/riFill-building-fill.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" width="48" height="48" style="" filter="none">
+    <defs><linearGradient id="U4cXjIfYU4cl2DKt2lRhOf1" x1="0" x2="100%" y1="0" y2="0" gradientTransform="matrix(6.123233995736766e-17, 1, -1, 6.123233995736766e-17, 16, 0)" gradientUnits="userSpaceOnUse"><stop stop-color="#ffffff" stop-opacity="0.2" offset="0.21"></stop><stop stop-color="#ffffff" stop-opacity="0" offset="0.91"></stop></linearGradient></defs>
+    <g>
+    <path d="M28 25.333h2.667v2.667h-29.333v-2.667h2.667v-20c0-0.736 0.597-1.333 1.333-1.333v0h13.333c0.736 0 1.333 0.597 1.333 1.333v0 20h2.667v-13.333h4c0.736 0 1.333 0.597 1.333 1.333v0 12zM9.333 14.667v2.667h5.333v-2.667h-5.333zM9.333 9.333v2.667h5.333v-2.667h-5.333z" fill="url(#U4cXjIfYU4cl2DKt2lRhOf1)"></path>
+    </g>
+  </svg>

assets/img/riFill-user-2-fill.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" width="48" height="48" style="" filter="none">
+    <defs><linearGradient id="U4cXjIfYU4clYqvToeJa0B1" x1="0" x2="100%" y1="0" y2="0" gradientTransform="matrix(6.123233995736766e-17, 1, -1, 6.123233995736766e-17, 16, 0)" gradientUnits="userSpaceOnUse"><stop stop-color="#ffffff" stop-opacity="0.28" offset="0.19"></stop><stop stop-color="#ffffff" stop-opacity="0" offset="1"></stop></linearGradient></defs>
+    <g>
+    <path d="M14.667 18.749v7.917h2.667v-7.917c5.261 0.656 9.333 5.144 9.333 10.584h-21.333c0-5.421 4.044-9.898 9.28-10.578l0.054-0.006zM16 17.333c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" fill="url(#U4cXjIfYU4clYqvToeJa0B1)"></path>
+    </g>
+  </svg>

pages.json

@@ -183,6 +183,46 @@
         		"navigationBarTitleText" : "",
         		"enablePullDownRefresh" : false
         	}
+        },
+        {
+        	"path" : "pages/businessHall/invoiceManagement/billingDescription",
+        	"style" : 
+        	{
+        		"navigationBarTitleText" : "",
+        		"enablePullDownRefresh" : false
+        	}
+        },
+        {
+        	"path" : "pages/businessHall/invoiceManagement/applyBilling",
+        	"style" : 
+        	{
+        		"navigationBarTitleText" : "",
+        		"enablePullDownRefresh" : false
+        	}
+        },
+        {
+        	"path" : "pages/businessHall/invoiceManagement/invoiceDetails",
+        	"style" : 
+        	{
+        		"navigationBarTitleText" : "",
+        		"enablePullDownRefresh" : false
+        	}
+        },
+        {
+        	"path" : "pages/businessHall/invoiceManagement/viewE-invoice",
+        	"style" : 
+        	{
+        		"navigationBarTitleText" : "",
+        		"enablePullDownRefresh" : false
+        	}
+        },
+        {
+        	"path" : "pages/businessHall/invoiceManagement/InvoiceTitleManagement",
+        	"style" : 
+        	{
+        		"navigationBarTitleText" : "",
+        		"enablePullDownRefresh" : false
+        	}
         }
        
     ],

pages/businessHall/deductionRecord/deductionDetails.vue

@@ -162,7 +162,7 @@
  // 返回
  .back{
 	 border: 1px solid rgba(205,205,205,1);
-	 
+	 border-radius: 8px;
 	 line-height: 88rpx;
 	 background-color: rgba(255,255,255,1);
 	 color: rgba(119,119,119,1);

pages/businessHall/invoiceManagement/InvoiceTitleManagement.vue

@@ -0,0 +1,123 @@
+<template>
+	<view>
+		<u-navbar title="发票抬头管理"  title-color="#101010" ></u-navbar>
+		<!-- 企业单位 -->
+		<view class="enterprise">
+			<view class="title">
+				企业单位
+				
+					<image class="img" src="@/assets/img/riFill-building-fill.svg" mode=""></image>
+				
+			</view>
+			<view class="infos">
+				<view class="name">
+					联通公司
+				</view>
+				<view class="number">
+					91421000706966173Y
+				</view>
+			</view>
+		</view>
+		<!-- 非企业 -->
+		<view class="nonbusiness">
+			<view class="title">
+				企业单位
+				
+					<image class="img" src="@/assets/img/riFill-user-2-fill.svg" mode=""></image>
+				
+			</view>
+			<view class="infos">
+				<view class="name">
+					李广宵 <view class="default">默认</view>
+				</view>
+				
+			</view>
+		</view>
+		<!-- 底部 -->
+		<view class="bottom">
+			<button class="add">新增发票抬头</button>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.enterprise,.nonbusiness{
+		border-radius: 8px;
+		margin: 24rpx 32rpx;
+		background-color: #fff;
+		overflow: hidden;
+		.title{
+			padding: 32rpx;
+			background: linear-gradient(90deg, rgba(49,110,207,1) 2%,rgba(20,73,159,1) 100%);
+			color: rgba(255,255,255,1);
+			font-size: 40rpx;
+			position: relative;
+			font-weight: 600;
+			.img{
+				width: 96rpx;
+				height: 96rpx;
+				position: absolute;
+				top: 16rpx;
+				right: 16rpx;
+			}
+		}
+		.infos{
+			padding: 24rpx 32rpx;
+			.name{
+				color: rgba(51,51,51,1);
+				font-size: 36rpx;
+				display: flex;
+				align-items: center;
+				.default{
+					width: 96rpx;
+					height: 48rpx;
+					line-height: 48rpx;
+					border-radius: 4px;
+					background-color: rgba(22,119,255,1);
+					color: rgba(255,255,255,1);
+					margin-left: 16rpx;
+					font-size: 28rpx;
+					text-align: center;
+				}
+			}
+			.number{
+				color: rgba(119,119,119,1);
+				margin-top: 2rpx;
+			}
+		}
+	}
+.nonbusiness{
+	.title{
+		background: linear-gradient(90deg, rgba(0,187,170,1) 2%,rgba(0,161,119,1) 100%);
+	}
+}
+// 底部
+.bottom{
+	padding: 24rpx 32rpx;
+	background-color: rgba(255,255,255,1);
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	.add{
+		line-height: 88rpx;
+		border-radius: 50px;
+		background: linear-gradient(-88.46deg, rgba(34,109,198,1) 2.59%,rgba(9,158,237,1) 97.02%);
+		color: rgba(255,255,255,1);
+		font-size: 36rpx;
+	}
+}
+</style>

pages/businessHall/invoiceManagement/applyBilling.vue

@@ -0,0 +1,123 @@
+<template>
+	<view>
+		<u-navbar title="申请开票"  title-color="#101010" ></u-navbar>
+		<view class="success-icon">
+			<image class="img" src="@/assets/img/md-check_circle vRxbRvD.svg" mode=""></image>
+		</view>
+		<view class="success-text">
+			申请成功
+
+		</view>
+		<!-- 支付详情 -->
+		<view class="payment-infos">
+			<view class="item">
+				<view class="item-title">
+					发票项目
+				</view>
+				<view class="item-value">
+					2024年1月扣费发票
+				</view>
+				
+			</view>
+			<view class="item">
+				<view class="item-title">
+					发票抬头
+				</view>
+				<view class="item-value">
+					联通公司
+				</view>
+				
+			</view>
+			<view class="item">
+				<view class="item-title">
+					发票金额
+				</view>
+				<view class="item-value">
+					1000.00元
+				</view>
+				
+			</view>
+			
+			
+		</view>
+		<!-- 按钮 -->
+		<view class="btns">
+			<button class="btn1">完成</button>
+			<button class="btn2">查看发票详情</button>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	page{
+		background-color: #fff;
+	}
+	.success-icon{
+		width: 132rpx;
+		height: 132rpx;
+		margin: 48rpx auto; 
+		.img{
+			width: 100%;
+			height: 100%;
+		}
+	}
+	.success-text{
+		color: rgba(51,51,51,1);
+		font-size: 48rpx;
+		text-align: center;
+	}
+	// 支付详情
+	.payment-infos{
+		margin-top: 64rpx;
+		padding: 0 80rpx;
+		.item{
+			display: flex;
+			justify-content: space-between;
+			margin-bottom: 24rpx;
+			.item-title{
+				color: rgb(119,119,119);
+			}
+			.item-value{
+				color: rgb(51,51,51);
+			}
+		}
+	}
+	// 按钮
+	.btns{
+		display: flex;
+		padding: 0 80rpx;
+		margin-top: 80rpx;
+		.btn1{
+			width: 280rpx;
+			height: 80rpx;
+			background-color: rgba(255,255,255,1);
+			color: rgba(51,51,51,1);
+			font-size: 32rpx;
+			border-radius: 50px;
+			border: 1px solid rgba(223,223,223,1);
+		}
+		.btn2{
+			width: 280rpx;
+			height: 80rpx;
+			border-radius: 50px;
+			background-color: rgba(22,119,255,1);
+			color: rgba(255,255,255,1);
+			font-size: 32rpx;
+			border: 0px solid rgba(187,187,187,1);
+		}
+	}
+
+</style>

pages/businessHall/invoiceManagement/billingDescription.vue

@@ -0,0 +1,50 @@
+<template>
+	<view>
+		<u-navbar title="退费详情"  title-color="#101010" ></u-navbar>
+		<view class="background">
+			<view class="main">
+				<p>1.月结发票：为已完全交清欠费用户出具的月消费账单发票。实缴发票：依据用户实际缴纳金额为用户开具的发票。发票金额不包括不能参与实销发票打印的费用，如：赠费等。</p>
+				<p>2.已经开具纸质发票的记录不能再开具电子发票。</p>
+				<p>3.每月1日0时至24时为系统出账期，为您提供相关查询服务延迟可能较长。月结发票将在系统出账后自动更新。</p>
+			</view>
+		</view>
+	
+	</view> 
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.background{
+		position: relative;
+		height: 200px;
+		background: linear-gradient(180deg, rgba(203,234,255,1) 0%,rgba(203,234,255,0) 100%);
+		.main{
+			position: absolute;
+			top: 24rpx;
+			left: 32rpx;
+			right: 32rpx;
+			background-color: #fff;
+			border-radius: 8px;
+			padding: 40rpx 32rpx;
+			p{
+				line-height: 48rpx;
+				color: rgba(51,51,51,1);
+				font-size: 32rpx;
+			}
+		}
+	}
+ 
+ 
+</style>

pages/businessHall/invoiceManagement/invoiceDetails.vue

@@ -0,0 +1,220 @@
+<template>
+	<view>
+		<u-navbar title="发票详情"  title-color="#101010" ></u-navbar>
+		<view class="background">
+			<view class="recharge-details">
+				<view class="headline">
+					发票金额(元)
+				</view>
+				<view class="sum">
+					1000.00
+				</view>
+				<view class="state">
+					开票中
+				</view>
+				<view class="details">
+					<view class="item">
+						<view class="item-title">
+							开票项目
+							
+						
+
+						</view>
+						<view class="item-value">
+							2024年1月扣费发票
+							
+							
+
+						</view>
+					</view>
+					<view class="item">
+						<view class="item-title">
+							发票类型
+							
+							
+						</view>
+						<view class="item-value">
+								企业单位
+								
+								
+						</view>
+					</view>
+					<view class="item">
+						<view class="item-title">
+							发票抬头
+							
+							
+						</view>
+						<view class="item-value">
+							联通公司
+							
+							
+						</view>
+					</view>
+					<view class="item">
+						<view class="item-title">
+							公司税号
+							
+							
+						</view>
+						<view class="item-value">
+							Y8521425210
+							
+							
+						</view>
+					</view>
+					<view class="item">
+						<view class="item-title">
+							手机号码
+							
+							
+						</view>
+						<view class="item-value">
+							15100001111
+							
+							
+						</view>
+					</view>
+					<view class="item">
+						<view class="item-title">
+							身份证号
+						</view>
+						<view class="item-value">
+					
+								420400200001011010
+								
+								
+								
+					
+						</view>
+					</view>
+				</view>
+				
+				<view class="details">
+					
+					
+					<view class="item">
+						<view class="item-title">
+							申请单号
+						</view>
+						<view class="item-value">
+							T20230816112557708460925
+							
+							
+
+						</view>
+					</view>
+					<view class="item">
+						<view class="item-title">
+							申请时间
+						</view>
+						<view class="item-value">
+							2023-08-20 10:29:00
+						</view>
+					</view>
+					<view class="item">
+						<view class="item-title">
+							开票时间
+						</view>
+						<view class="item-value">
+							2023-08-20 10:29:00
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<!-- 查看 -->
+		<button class="check">查看电子发票</button>
+		<!-- 返回 -->
+		<button class="back">返回</button>
+	</view> 
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.background{
+		position: relative;
+		height: 200px;
+		background: linear-gradient(180deg, rgba(203,234,255,1) 0%,rgba(203,234,255,0) 100%);
+		.recharge-details{
+			position: absolute;
+			top: 24rpx;
+			left: 32rpx;
+			right: 32rpx;
+			background-color: #fff;
+			border-radius: 8px;
+			padding: 40rpx 32rpx;
+			text-align: center;
+			.headline{
+				color: rgb(16,16,16);
+				font-size: 36rpx;
+				
+			}
+			.sum{
+				color: rgb(16,16,16);
+				font-size: 48rpx;
+				margin-top: 32rpx;
+
+			}
+			.state{
+				color: rgba(255,123,0,1);
+				margin-top: 8rpx;
+			}
+			.details{
+				margin-top: 40rpx;
+				padding-top: 40rpx;
+				border-top: 1px solid rgba(241,241,241,1);
+				.item{
+					display: flex;
+					align-items: center;
+					justify-content: space-between;
+					margin-bottom:16rpx;
+					.item-title{
+						color: rgb(119,119,119);
+					}
+					.item-value{
+						color: rgb(48,48,48);
+					}
+				}
+			}
+		}
+	}
+ // 返回
+ .back{
+	 border: 1px solid rgba(205,205,205,1);
+	 line-height: 88rpx;
+	 border-radius: 8px;
+	 background-color: rgba(255,255,255,1);
+	 color: rgba(119,119,119,1);
+	 font-size: 32rpx;
+	 position: absolute;
+	 top: 1132rpx;
+	 left: 32rpx;
+	 right: 32rpx;
+ }
+ // 查看
+ .check{
+	 
+	 line-height: 88rpx;
+	 border-radius: 8px;
+	 background-color: rgba(22,119,255,1);
+	 color: rgba(255,255,255,1);
+	 font-size: 32rpx;
+	 position: absolute;
+	 top: 1020rpx;
+	 left: 32rpx;
+	 right: 32rpx;
+ }
+</style>

pages/businessHall/invoiceManagement/viewE-invoice.vue

@@ -0,0 +1,63 @@
+<template>
+	<view>
+		<u-navbar title="查看电子发票"  title-color="#101010" ></u-navbar>
+		<view class="img-box">
+			<image class="img" src="@/assets/img/e-invoice.png" mode=""></image>
+		</view>
+		<view class="btn-box">
+			<button class="picture">下载图片</button>
+			<button class="pdf">下载PDF</button>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.img-box{
+		width: 100%;
+		height: 576rpx;
+		.img{
+			width: 100%;
+			height: 100%;
+		}
+	}
+    .btn-box{
+		
+		display: flex;
+		
+		margin-top: 24rpx;
+		.picture{
+			width: 332rpx;
+			
+			line-height: 88rpx;
+			border-radius: 8px;
+			background-color: rgba(255,255,255,1);
+			color: rgba(119,119,119,1);
+			font-size: 32rpx;
+			
+			
+			border: 1px solid rgba(205,205,205,1);
+		}
+		.pdf{
+			width: 330rpx;
+			
+			line-height: 88rpx;
+			border-radius: 8px;
+			background-color: rgba(22,119,255,1);
+			color: rgba(255,255,255,1);
+			font-size: 32rpx;
+		}
+	}
+</style>

pages/businessHall/recharge/monthlyBill.vue

@@ -156,6 +156,7 @@
  .back{
 	 border: 1px solid rgba(205,205,205,1);
 	 line-height: 88rpx;
+	 border-radius: 8px;
 	 background-color: rgba(255,255,255,1);
 	 color: rgba(119,119,119,1);
 	 font-size: 32rpx;

pages/businessHall/returnBalance/returnDetails.vue

@@ -158,6 +158,7 @@
  .back{
 	 border: 1px solid rgba(205,205,205,1);
 	 line-height: 88rpx;
+	 border-radius: 8px;
 	 background-color: rgba(255,255,255,1);
 	 color: rgba(119,119,119,1);
 	 font-size: 32rpx;