发票订单列表

pages2/invoice/index.vue

@@ -108,12 +108,14 @@
 				</view>
 				
 				<view class="record__list">
-					<view class="record-item">
+					<view class="record-item"  @click="orderDetailModal = true;" v-for="(record,index) in recordList" :key="index">
 						<view class="item__time">2021/10/29 09:30:00</view>
 						<view class="item__content">
 							<view class="top">
-								<view class="state">
-									待审核
+								<view class="state" :class="{wait:record.state == 1,refuse:record.state == 2,agree:record.state == 3}">
+									<text v-if="record.state == 1">待审核</text>
+									<text v-if="record.state == 2">驳回</text>
+									<text v-if="record.state == 3">通过</text>
 									<u-icon class="arrow" name="arrow-right" color="#ffffff" size="28"></u-icon>
 								</view>
 							</view>
@@ -134,19 +136,22 @@
 								<view class="flex">
 									<view class="text">发票状态</view>
 									<view class="flex__auto">
-										<text class="red">未开票</text>
+										<text class="red" :class="{red:record.state != 2 ,green:record.state == 2}">未开票</text>
 									</view>
 								</view>
-								<view class="flex">
-									<view class="text">开票订单</view>
-									<view class="flex__auto">
-										<text class="red">3</text>
-										<u-icon name="arrow-down" color="#ccc" size="28"></u-icon>
+								<view @click.stop="showOrder(record.checked,index)">
+									<view class="flex noborder" >
+										<view class="text">开票订单</view>
+										<view class="flex__auto">
+											<text class="red">3</text>
+											<u-icon v-if="!record.checked" name="arrow-down" color="#ccc" size="28"></u-icon>
+											<u-icon v-if="record.checked" name="arrow-up" color="#ccc" size="28"></u-icon>
+										</view>
+									</view>
+									<view class="order-list" v-if="record.checked">
+										<view class="order-item">1.2021七大员新考施工专业人员岗提高班</view>
+										<view class="order-item">2.2021七大员新考施工专业人员岗提高班订单名称过长换行</view>
 									</view>
-								</view>
-								<view class="order-list">
-									<view class="order-item">1.2021七大员新考施工专业人员岗提高班</view>
-									<view class="order-item">2.2021七大员新考施工专业人员岗提高班订单名称过长换行</view>
 								</view>
 							</view>
 						</view>
@@ -155,8 +160,8 @@
 			</view>
 		</view>
 		
-		<u-popup class="modal" v-model="selectOrderModal" mode="bottom" border-radius="40">
-			<view class="popup_box">
+		<u-popup class="modal" v-model="selectOrderModal" mode="bottom" border-radius="24">
+			<view class="select-order">
 				<view class="line"></view>
 				<view class="title">选择订单</view>
 				<u-line color="#D6D6DB" />
@@ -194,6 +199,153 @@
 				</view>
 			</view>
 		</u-popup>
+		
+		<u-popup class="modal" v-model="orderDetailModal" mode="center" border-radius="40">
+			<view class="order-detail">
+				<view class="order-detail__content">
+					<scroll-view scroll-y="true" style="height: 972rpx;">
+						<view class="header">2021年10月29日 09:30:00</view>
+						<view class="body">
+							<view class="body__item">
+								<view class="title">发票申请信息</view>
+								<view class="content">
+									<u-cell-item :border-bottom="false" hover-class="none" :arrow="false">
+										<view slot="title">发票类型：</view>
+										<text>普通发票</text>
+									</u-cell-item>
+									<u-cell-item :border-bottom="false" hover-class="none" :arrow="false">
+										<view slot="title">申请主体：</view>
+										<text>个人</text>
+									</u-cell-item>
+									<u-cell-item :border-bottom="false" hover-class="none" :arrow="false">
+										<view slot="title">发票抬头：</view>
+										<text>广东中正科技教育科技有限公司</text>
+									</u-cell-item>
+									<u-cell-item :border-bottom="false" hover-class="none" :arrow="false">
+										<view slot="title">单位税号：</view>
+										<text>SH123456789</text>
+									</u-cell-item>
+									<u-cell-item :border-bottom="false" hover-class="none" :arrow="false">
+										<view slot="title">单位地址：</view>
+										<text>广州市天河区燕岭路123号建设大厦F座 16楼过长换行</text>
+									</u-cell-item>
+									<u-cell-item :border-bottom="false" hover-class="none" :arrow="false">
+										<view slot="title">电话号码：</view>
+										<text>企业 拷贝</text>
+									</u-cell-item>
+									<u-cell-item :border-bottom="false" hover-class="none" :arrow="false">
+										<view slot="title">开户银行：</view>
+										<text>中国工商银行星星支行</text>
+									</u-cell-item>
+									<u-cell-item :border-bottom="false" hover-class="none" :arrow="false">
+										<view slot="title">银行账号：</view>
+										<text>SH123456789 拷贝</text>
+									</u-cell-item>
+									<u-cell-item :border-bottom="false" hover-class="none" :arrow="false">
+										<view slot="title">收件地址：</view>
+										<text>广州市天河区燕岭路123号</text>
+									</u-cell-item>
+									<u-cell-item :border-bottom="false" hover-class="none" :arrow="false">
+										<view slot="title">收件人：</view>
+										<text>李大米</text>
+									</u-cell-item>
+									<u-cell-item :border-bottom="false" hover-class="none" :arrow="false">
+										<view slot="title">发票抬头：</view>
+										<text>广东中正科技教育科技有限公司</text>
+									</u-cell-item>
+									<u-cell-item :border-bottom="false" hover-class="none" :arrow="false" >
+										<view slot="title">收件手机：</view>
+										<text>13800138000</text>
+									</u-cell-item>
+									<u-cell-item :border-bottom="false" hover-class="none" :arrow="false" >
+										<view slot="title">开票订单：</view>
+									</u-cell-item>
+									<view class="order-list">
+										<view class="order-item">
+											<view class="order-title">2021七大员新考施工专业人员岗提高班</view>
+											<view class="order-number">GDXY1234567890</view>
+											<view class="order-price">¥ 100元</view>
+										</view>
+										<view class="order-item">
+											<view class="order-title">2021七大员新考施工专业人员岗提高班</view>
+											<view class="order-number">GDXY1234567890</view>
+											<view class="order-price">¥ 100元</view>
+										</view>
+										<view class="order-item">
+											<view class="order-title">2021七大员新考施工专业人员岗提高班</view>
+											<view class="order-number">GDXY1234567890</view>
+											<view class="order-price">¥ 100元</view>
+										</view>
+									</view>
+									<view class="order-text">
+										<view class="order-text__label">本次申请开票金额：</view>
+										<view class="order-text__price">¥ 999.00</view>
+									</view>
+								</view>
+							</view>
+							<view class="body__item">
+								<view class="title">发票申请结果</view>
+								<view class="content">
+									<u-cell-item :border-bottom="false" hover-class="none" :arrow="false">
+										<view slot="title">审核结果：</view>
+										<text class="text wait">待审核</text>
+										<text class="text agree">通过</text>
+										<text class="text refuse">驳回</text>
+									</u-cell-item>
+									<u-cell-item :border-bottom="false" hover-class="none" :arrow="false">
+										<view slot="title">发票状态：</view>
+										<text class="text refuse">未开票</text>
+										<text class="text agree">已开票</text>
+										<text class="text refuse">已退票</text>
+									</u-cell-item>
+									
+									<u-cell-item :border-bottom="false" hover-class="none" :arrow="false">
+										<view slot="title">发票预览：</view>
+										<view>
+											<image class="preview" src="/static/info_3.png"></image>
+											<view class="download-btn" @click="download">下载电子发票</view>
+										</view>
+									</u-cell-item>
+									
+									
+									<u-cell-item :border-bottom="false" hover-class="none" :arrow="false">
+										<view slot="title">机构发票邮寄状态：</view>
+										<text class="text">是</text>
+									</u-cell-item>
+									
+									<u-cell-item :border-bottom="false" hover-class="none" :arrow="false">
+										<view slot="title">发票邮寄快递单号：</view>
+										<text class="text">153666689456</text>
+									</u-cell-item>
+								</view>
+							</view>
+						</view>
+					</scroll-view>
+				</view>
+				<view class="order-detail__btns">
+					<view class="btn" @click="orderDetailModal = false;">知道了</view>
+					<view class="btn warm" @click="orderCancelModal = true;">撤销申请</view>
+				</view>
+			</view>
+		</u-popup>
+		
+		<u-popup class="modal" v-model="orderCancelModal" mode="center" border-radius="24">
+			<view class="order-cancel">
+				<view class="header">
+					温馨提示
+				</view>
+				<view class="body">
+					<view>撤销申请后，</view>
+					<view>本次的发票申请内容将不存在。</view>
+					<view>请慎重考虑。 </view>
+					<view>您确定要取消本次发票申请吗？</view>
+				</view>
+				<view class="footer">
+					<view class="btn cancel" @click="orderCancelModal = false;">取消</view>
+					<view class="btn ok" @click="orderCancel()">确定</view>
+				</view>
+			</view>
+		</u-popup>
 	</view>
 </template>
 
@@ -204,7 +356,16 @@ export default {
 	data() {
 		return {
 			checkOrderList:[],
-			recordList:[1],
+			recordList:[{
+				checked:false,
+				state:'1'
+			},{
+				checked:false,
+				state:'2'
+			},{
+				checked:false,
+				state:'3'
+			}],
 			list: [
 				{
 					name: '发票申请'
@@ -330,6 +491,8 @@ export default {
 			orderValue:'',
 			orderList:[{checked:false,name:'1'},{checked:false,name:'2'},{checked:false,name:'3'},{checked:false,name:'4'}],
 			selectOrderModal:false,
+			orderDetailModal:false,
+			orderCancelModal:false,
 			current: 1,
 			order: [],
 			typeList:[{
@@ -356,6 +519,14 @@ export default {
 		
 	},
 	methods: {
+		/**
+		 * @param {Object} checkedState 显示状态
+		 * @param {Object} index 索引值
+		 * 修改开票订单列表显示状态
+		 */
+		showOrder(showState,index) {
+			this.$set(this.recordList[index],'checked',!showState)
+		},
 		/**
 		 * 发票申请提交
 		 */
@@ -423,6 +594,35 @@ export default {
 			this.$nextTick(() => {
 				this.$refs.orderIds.onFieldChange()
 			})
+		},
+		
+		download() {
+			uni.downloadFile({
+			  url: 'https://gw.alipayobjects.com/os/bmw-prod/c134022a-1088-47e2-bb76-a33ec0519101.pdf?spm=a2c4g.11186623.0.0.cf863d1fUcFiPN&file=c134022a-1088-47e2-bb76-a33ec0519101.pdf',
+			  success: function (res) {
+				  console.log(999)
+			    var filePath = res.tempFilePath;
+			    uni.openDocument({
+			      filePath: filePath,
+			      showMenu: true,
+			      success: function (res) {
+			        console.log(res,'打开文档成功');
+			      },
+				  fail:function(err) {
+					  console.log(err)
+				  }
+			    });
+			  }
+			});
+		},
+		
+		orderCancel() {
+			this.orderDetailModal = false;
+			this.orderCancelModal = false;
+			uni.showToast({
+				title:'撤销成功',
+				icon:'none'
+			})
 		}
 	},
 	computed: { ...mapGetters(['userInfo']) }
@@ -586,6 +786,16 @@ page {
 								background: #007AFF;
 								border-radius: 28rpx;
 								
+								&.wait {
+									background: #007AFF;
+								}
+								&.refuse {
+									background: #FF3B30;
+								}
+								&.wait {
+									background: #34C759;
+								}
+								
 								.arrow {
 									position:absolute;
 									top:50%;
@@ -603,7 +813,7 @@ page {
 								align-items: center;
 								border-bottom:1px solid #EEEEEE;
 								
-								&:nth-last-child(2){
+								&.noborder{
 									border:0;
 								}
 								
@@ -649,74 +859,295 @@ page {
 	}
 	
 	.modal {
-		.line {
-			width: 80rpx;
-			height: 8rpx;
-			background: #999999;
-			border-radius: 4rpx;
-			margin:8rpx auto 0;
-		}
 		
-		.title {
-			margin:20rpx 0 15rpx;
-			text-align: center;
-			font-size: 24rpx;
-			color: #999999;
+		.select-order {
+			.line {
+				width: 80rpx;
+				height: 8rpx;
+				background: #999999;
+				border-radius: 4rpx;
+				margin:8rpx auto 0;
+			}
+			
+			.title {
+				margin:20rpx 0 15rpx;
+				text-align: center;
+				font-size: 24rpx;
+				color: #999999;
+			}
+			
+			.order-item {
+				display: flex;
+				align-items: center;
+				padding: 20rpx;
+				
+				
+				&__bg {
+					width: 654rpx;
+					height: 168rpx;
+					background: #F5F5F5;
+					border: 2px solid #F5F5F5;
+					border-radius: 16rpx;
+					padding:20rpx;
+					
+					
+					&.active {
+						background: #EBF5FF;
+						border: 2px solid #007AFF;
+					}
+					
+					.order-title,.order-number,.order-price {
+						color:#333333;
+						margin-top:10rpx;
+						line-height: 30rpx;
+						font-size: 30rpx;
+					}
+					
+					.order-number {
+						color:#999;
+					}
+				}
+			}
+			
+			.confrim-btn {
+				width: 750rpx;
+				height: 98rpx;
+				background: rgba(255, 255, 255, 0.98);
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				
+				.okBtn {
+					text-align: center;
+					line-height: 64rpx;
+					color:#fff;
+					font-size: 30rpx;
+					width: 200rpx;
+					height: 64rpx;
+					background: linear-gradient(0deg, #015EEA, #00C0FA);
+					border-radius: 32rpx;
+				}
+			}
 		}
 		
-		.order-item {
+		.order-detail {
+			padding:24rpx 0 0;
+			width: 640rpx;
+			height: 1112rpx;
+			background: #FFFFFF;
 			display: flex;
-			align-items: center;
-			padding: 20rpx;
+			flex-direction: column;
 			
 			
-			&__bg {
-				width: 654rpx;
-				height: 168rpx;
-				background: #F5F5F5;
-				border: 2px solid #F5F5F5;
-				border-radius: 16rpx;
-				padding:20rpx;
+			&__content {
+				flex:1;
+				padding:0 24rpx;
 				
+				/deep/ .u-cell {
+					padding:10rpx;
+					
+					&_title {
+						color:#999;
+					}
+					
+					&__value {
+						color:#333;
+						text-align: left;
+					}
+					
+					.text {
+						&.wait {
+							color:#007AFF;
+						}
+						
+						&.agree {
+							color:#34C759;
+						}
+						
+						&.refuse {
+							color:#FF3B30;
+						}
+					}
+					
+					.preview {
+						width:240rpx;
+						height:160rpx;
+					}
+					
+					.download-btn {
+						margin:10rpx 0 0;
+						text-align: center;
+						line-height: 56rpx;
+						color:#fff;
+						font-size: 30rpx;
+						width: 224rpx;
+						height: 56rpx;
+						background: #007AFF;
+						border-radius: 16rpx;
+					}
+				}
 				
-				&.active {
-					background: #EBF5FF;
-					border: 2px solid #007AFF;
+				
+				.header {
+					font-size: 30rpx;
+					font-weight: bold;
+					color: #333333;
+					line-height: 48rpx;
+				}
+				
+				.body {
+					&__item {
+						
+						border-bottom:1px solid #EEEEEE;
+						padding-bottom:30rpx;
+						
+						&:last-child {
+							border:0;
+						}
+						
+						.title {
+							margin-top:30rpx;
+							font-size: 24rpx;
+							color: #007AFF;
+							line-height: 48rpx;
+							
+							&::before {
+								content:'';
+								width: 4rpx;
+								height: 24rpx;
+								background: #007AFF;
+								border-radius: 2rpx;
+								display: inline-block;
+								margin-right:10rpx;
+							}
+						}
+						
+						.order-list {
+							
+							.order-item {
+								overflow: hidden;
+								border-radius: 16rpx;
+								padding:0 14rpx 14rpx;
+								background:#F5F5F5;
+								font-size: 30rpx;
+								color:#333;
+								margin-top:16rpx;
+								
+								.order-title,.order-number,.order-price {
+									color:#333333;
+									margin-top:20rpx;
+									line-height: 26rpx;
+									font-size: 26rpx;
+								}
+								
+								.order-number {
+									color:#999;
+								}
+							}
+						}
+						
+						.order-text {
+							margin-top:16rpx;
+							padding:0 30rpx;
+							height: 80rpx;
+							background: #F5F5F5;
+							border-radius: 16rpx;
+							display: flex;
+							align-items: center;
+							
+							&__label {
+								font-size: 24rpx;
+								color:#999999;
+							}
+							
+							&__price {
+								font-size: 30rpx;
+								margin-left:20rpx;
+								color:#FF2D55;
+							}
+						}
+					}
 				}
 				
-				.order-title,.order-number,.order-price {
-					color:#333333;
-					margin-top:10rpx;
-					line-height: 30rpx;
+				
+			}
+			
+			&__btns {
+				border-top:1px solid #EEEEEE;
+				padding:0 24rpx;
+				width: 100%;
+				height: 140rpx;
+				background: #FFFFFF;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				
+				.btn {
+					text-align: center;
+					width: 200rpx;
+					height: 80rpx;
+					line-height: 80rpx;
+					background: #F5F5F5;
+					border-radius: 40rpx;
+					color:#007AFF;
 					font-size: 30rpx;
+					margin:0 10rpx;
 				}
 				
-				.order-number {
-					color:#999;
+				.warm {
+					background: #FF3B30;
+					color:#fff;
 				}
 			}
 		}
 		
-		.confrim-btn {
-			width: 750rpx;
-			height: 98rpx;
-			background: rgba(255, 255, 255, 0.98);
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			
-			.okBtn {
+		.order-cancel {
+			width: 640rpx;
+			height: 439rpx;
+			background: #FFFFFF;
+			padding:40rpx;
+			.header {
 				text-align: center;
-				line-height: 64rpx;
-				color:#fff;
 				font-size: 30rpx;
-				width: 200rpx;
-				height: 64rpx;
-				background: linear-gradient(0deg, #015EEA, #00C0FA);
-				border-radius: 32rpx;
+				font-weight: bold;
+				color: #333333;
+				line-height: 48rpx;
+			}
+			
+			.body {
+				margin-top:40rpx;
+				
+				view {
+					font-size: 30rpx;
+					color: #666666;
+					line-height: 48rpx;
+				}
+			}
+			
+			.footer {
+				margin-top:40rpx;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				
+				.btn {
+					text-align: center;
+					line-height: 80rpx;
+					font-size: 30rpx;
+					color:#007AFF;
+					width: 200rpx;
+					height: 80rpx;
+					background: #F5F5F5;
+					border-radius: 40rpx;
+					margin:0 10rpx;
+					
+					&.ok {
+						color:#fff;
+						background: #007AFF;
+					}
+				}
 			}
 		}
-		
 	}
 }