zc_saas_h5/pages2/invoice/index.vue

<template>
	<view class="invoice">
		<view class="invoice__tabs">
			<u-tabs :list="list" sticky :current="current" @change="change" active-color="#007AFF"></u-tabs>
		</view>
		<view class="invoice__content">
			<view class="open" v-if="current == 0">
				<view class="form">
					<u-form :model="form" ref="uForm">
						<u-form-item label="发票类型" label-width="130" required >
							<u-radio-group v-model="form.type" prop="type">
								<u-radio v-for="(item, index) in typeList" :key="index" :name="item.value">
									{{ item.name }}
								</u-radio>
							</u-radio-group>
						</u-form-item>
						<u-form-item label="申请主体" label-width="130" required >
							<u-radio-group v-model="form.main" prop="main">
								<u-radio v-for="(item, index) in mainList" :key="index" :name="item.value">
									{{ item.name }}
								</u-radio>
							</u-radio-group>
						</u-form-item>
						<u-form-item label="发票抬头" label-width="130" required prop="header" >
							<u-input placeholder="请输入" v-model="form.header" />
						</u-form-item>
						<u-form-item label="选择订单" label-width="130" required prop="orderId" right-icon="arrow-right">
							<view class="form-item" @click="selectOrderModal = true">
								<u-input v-if="false" v-model="form.orderId" />
								<view class="content">
									{{ form.orderId || '请选择' }}
								</view>
							</view>
						</u-form-item>
						
						<view>
							<view class="check-order" v-for="(item,index) in orderList" :key="index" v-if="item.disabled">
									<view class="close" @click="deleteOrder(index)">
										<u-icon name="close-circle-fill" color="#FF2D55" size="40"></u-icon>
									</view>
									<view class="title">商品名称</view>
									<view class="number">订单编号</view>
									<view class="price">¥ 100元</view>
							</view>
						</view>
						
					</u-form>
				</view>
				
				<view class="order-text">
					<view class="order-text__label">本次申请开票金额：</view>
					<view class="order-text__price">¥ 999.00</view>
				</view>
				
				<view class="submit">
					提交申请
				</view>
			</view>
			<view class="record" v-if="current == 1">
				record
			</view>
		</view>
		
		<u-popup class="modal" v-model="selectOrderModal" mode="bottom" border-radius="40">
			<view class="popup_box">
				<view class="line"></view>
				<view class="title">选择订单</view>
				<u-line color="#D6D6DB" />
				<view>
					<scroll-view scroll-y="true" style="height: 500rpx;">
						<view>
							<u-checkbox-group>
								<view v-for="(item, index) in orderList" :key="index" >
									<view class="order-item">
										<view>
											<u-checkbox 
												:disabled="item.disabled"
												shape="circle"
												:name="item.name"
												v-model="item.checked"
											>	
												<view class="order-item__bg" :class="item.checked?'active':''" >
													<view>
														<view class="order-title">商品名称</view>
														<view class="order-number">订单编号</view>
														<view class="order-price">¥ 100元</view>
													</view>
												</view>
											</u-checkbox >
										</view>
										
									</view>
								</view>
							</u-checkbox-group>
						</view>
					</scroll-view>
				</view>
				<view class="confrim-btn">
					<view class="okBtn" @click="okPopup(1)">确定</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	components: {},
	data() {
		return {
			checkOrderList:[],
			list: [
				{
					name: '发票申请'
				},
				{
					name: '发票记录'
				}
			],
			form:{
				type:'',
				main:'',
				header:'',
				orderId:'',
			},
			orderValue:'',
			orderList:[{checked:false,name:'1'},{checked:false,name:'2'},{checked:false,name:'3'},{checked:false,name:'4'}],
			selectOrderModal:false,
			current: 0,
			order: [],
			typeList:[{
				name:'普通发票',
				value:'1'
			},{
				name:'增值税专用发票',
				value:'2'
			}],
			mainList:[{
				name:'个人',
				value:'1'
			},{
				name:'企业',
				value:'2'
			}]
		};
	},
	// onPullDownRefresh() {},
	onLoad(option) {
		
	},
	onShow() {
		
	},
	methods: {
		change(e) {
			console.log(e)
			this.current = e;
		},
		
		radioGroupChange(e) {
			console.log(e)
		},
		okPopup() {
			this.selectOrderModal = false;
			this.orderList.forEach((item,index) => {
				if(item.checked) {
					this.$set(this.orderList[index],'disabled',true)
				}
			})
			
			console.log(this.checkOrderList)
		},
		
		deleteOrder(index) { 
			this.$set(this.orderList[index],'disabled',false)
			this.$set(this.orderList[index],'checked',false)
		}
	},
	computed: { ...mapGetters(['userInfo']) }
};
</script>
<style>
page {
	background: #eaeef1;
}
</style>
<style scoped lang="scss">
	
.invoice {
	&__tabs {
		width: 100%;
		text-align: center;
		position: fixed;
		height: 96rpx;
		z-index: 999;
	}
	
	&__content {
		padding-top:96rpx;
		
		.open {
			margin:8rpx 24rpx 0;
			
			.form {
				padding:24rpx;
				width: 702rpx;
				background: #FFFFFF;
				border-radius: 24rpx;
				
				// /deep/ .u-input__input {
				// 	text-align: right;
				// }
				
				
				.form-item {
					height:78rpx;
					display: flex;
					align-items: center;
					
					.text {
						font-size: 28rpx;
						width:120rpx;
						// color: #999999;
					}
					
					.content {
						flex:1;
						text-align: left;
						color:#bbb;
					}
				}
				
				.check-order {
					margin-top:20rpx;
					width: 654rpx;
					height: 168rpx;
					background: #F5F5F5;
					border: 2px solid #F5F5F5;
					padding:20rpx;
					position:relative;
					
					.close {
						position:absolute;
						right:0;
						top:0;
					}
					
					
					.title,.number,.price {
						color:#333333;
						margin-top:10rpx;
						line-height: 30rpx;
						font-size: 30rpx;
					}
					
					.number {
						color:#999;
					}
				}
				
			}
			
			.order-text {
				margin-top:16rpx;
				padding:0 30rpx;
				width: 702rpx;
				height: 80rpx;
				background: #FFFFFF;
				border-radius: 24rpx;
				display: flex;
				align-items: center;
				
				&__label {
					font-size: 24rpx;
				}
				
				&__price {
					font-size: 30rpx;
					margin-left:20rpx;
					color:#FF2D55;
				}
			}
				
			.submit {
				text-align: center;
				line-height: 80rpx;
				color:#fff;
				font-size: 30rpx;
				width: 526rpx;
				height: 80rpx;
				background: #007AFF;
				box-shadow: 0rpx 8rpx 7rpx 1rpx rgba(0, 122, 255, 0.1);
				border-radius: 40rpx;
				position:fixed;
				left:50%;
				bottom:40rpx;
				transform: translateX(-50%);
			}
		}
	}
	
	.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;
		}
		
		.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;
			}
		}
		
	}
}


</style>