saas_miniprogram/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 prop="type" >
							<u-radio-group v-model="form.type" @change="formTypeChange">
								<u-radio v-for="(item, index) in typeList" :key="index" :name="item.value">
									{{ item.name }}
								</u-radio>
							</u-radio-group>
						</u-form-item>
						
						<!-- 增值税发票 -->
						<template v-if="form.type == 2">
							
							<u-form-item label="申请主体" label-width="130" required  prop="main">
								<u-radio-group v-model="form.main">
									<u-radio :key="index" name="2">
										企业
									</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="tax" >
								<u-input placeholder="请输入" v-model="form.tax" />
							</u-form-item>
							<u-form-item label="单位地址" label-width="130" required prop="address" >
								<u-input placeholder="请输入" v-model="form.address" />
							</u-form-item>
							<u-form-item label="电话号码" label-width="130" required prop="tel" >
								<u-input placeholder="请输入" v-model="form.tel" />
							</u-form-item>
							<u-form-item label="开户银行" label-width="130" required prop="bank" >
								<u-input placeholder="请输入" v-model="form.bank" />
							</u-form-item>
							<u-form-item label="银行账号" label-width="130" required prop="bankNo" >
								<u-input placeholder="请输入" v-model="form.bankNo" />
							</u-form-item>
							<u-form-item label="收件地址" label-width="130" required prop="recieveAddress" >
								<u-input placeholder="请输入" v-model="form.recieveAddress" />
							</u-form-item>
							<u-form-item label="收件人" label-width="130" required prop="name" >
								<u-input placeholder="请输入" v-model="form.name" />
							</u-form-item>
							<u-form-item label="收件手机" label-width="130" required prop="phone" >
								<u-input placeholder="请输入" v-model="form.phone" />
							</u-form-item>
							
						</template>
						<!-- 增值税发票 -->
						
						<!-- 普通发票 -->
						<template v-else>
							<u-form-item label="申请主体" label-width="130" required prop="main">
								<u-radio-group v-model="form.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>
						</template>
						<!-- 普通发票 -->
						
						
						<u-form-item label="选择订单" label-width="130" required prop="orderIds" right-icon="arrow-right" ref="orderIds">
							<view class="form-item" @click="selectOrderModal = true">
								<u-input placeholder="请选择" disabled  @click="selectOrderModal = true" v-model="form.orderIds" />
							</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" @click="formSubmit">
					提交申请
				</view>
			</view>
			<view class="." v-if="current == 1">
				<view class="nodata" v-if="!recordList.length">
					您暂无相关发票记录哦~
				</view>
				
				<view class="record__list">
					<view class="record-item">
						<view class="item__time">2021/10/29 09:30:00</view>
						<view class="item__content">
							<view class="top">
								<view class="state">
									待审核
									<u-icon class="arrow" name="arrow-right" color="#ffffff" size="28"></u-icon>
								</view>
							</view>
							
							<view class="bottom">
								<view class="flex">
									<view class="text">发票类型</view>
									<view class="flex__auto">
										<text>普通发票</text>
									</view>
								</view>
								<view class="flex">
									<view class="text">申请主体</view>
									<view class="flex__auto">
										<text>个人</text>
									</view>
								</view>
								<view class="flex">
									<view class="text">发票状态</view>
									<view class="flex__auto">
										<text class="red">未开票</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>
								</view>
								<view class="order-list">
									<view class="order-item">1.2021七大员新考施工专业人员岗提高班</view>
									<view class="order-item">2.2021七大员新考施工专业人员岗提高班订单名称过长换行</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</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()">确定</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	components: {},
	data() {
		return {
			checkOrderList:[],
			recordList:[1],
			list: [
				{
					name: '发票申请'
				},
				{
					name: '发票记录'
				}
			],
			form:{
				type:'',
				main:'',
				header:'',
				orderIds:'',
			},
			rules: {
				phone: [
					{ 
						required: true, 
						message: '请输入收件手机', 
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change'],
					},
					{
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// this.$u.test.mobile()就是返回true或者false的
							return this.$u.test.mobile(value);
						},
						message: '手机号码格式不正确',
						// 触发器可以同时用blur和change
						trigger: ['change'],
					}
				],
				type: [
					{ 
						required: true, 
						message: '请选择发票类型', 
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change'],
					}
				],
				main: [
					{ 
						required: true, 
						message: '请选择申请主体', 
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change'],
					}
				],
				header: [
					{ 
						required: true, 
						message: '请输入发票抬头', 
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change'],
					}
				],
				tax: [
					{ 
						required: true, 
						message: '请输入单位税号', 
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change'],
					}
				],
				address: [
					{ 
						required: true, 
						message: '请输入单位地址', 
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change'],
					}
				],
				tel: [
					{ 
						required: true, 
						message: '请输入电话号码', 
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change'],
					}
				],
				bank: [
					{ 
						required: true, 
						message: '请输入开户银行', 
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change'],
					}
				],
				bankNo: [
					{ 
						required: true, 
						message: '请输入银行账号', 
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change'],
					}
				],
				recieveAddress: [
					{ 
						required: true, 
						message: '请输入收件地址', 
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change'],
					}
				],
				name: [
					{ 
						required: true, 
						message: '请输入收件人', 
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change'],
					}
				],
				orderIds: [
					{ 
						required: true, 
						message: '请选择订单', 
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change'],
					}
				],
			},
			orderValue:'',
			orderList:[{checked:false,name:'1'},{checked:false,name:'2'},{checked:false,name:'3'},{checked:false,name:'4'}],
			selectOrderModal:false,
			current: 1,
			order: [],
			typeList:[{
				name:'普通发票',
				value:'1'
			},{
				name:'增值税专用发票',
				value:'2'
			}],
			mainList:[{
				name:'个人',
				value:'1'
			},{
				name:'企业',
				value:'2'
			}]
		};
	},
	// onPullDownRefresh() {},
	onLoad(option) {
		// this.$refs.uForm.setRules(this.rules)
	},
	onShow() {
		
	},
	methods: {
		/**
		 * 发票申请提交
		 */
		formSubmit() {
			this.$refs.uForm.validate(valid => {
				if(valid) {
					uni.showToast({
						title:'申请成功'
					})
				}
			})
		},
		/**
		 * @param {Object} e value
		 * 发票类型修改
		 */
		formTypeChange(e) {
			console.log(e)
			if(e == '2') {
				this.$set(this.form,'main','2')
			} else {
				this.$set(this.form,'main','')
			}
		},
		/**
		 * @param {Object} e
		 * tabs 切换
		 */
		change(e) {
			console.log(e)
			this.current = e;
		},
		
		radioGroupChange(e) {
			console.log(e)
		},
		okPopup() {
			this.selectOrderModal = false;
			let strArr = [];
			this.orderList.forEach((item,index) => {
				if(item.checked) {
					this.$set(this.orderList[index],'disabled',true)
					strArr.push(item.name)
				}
			})
			
			this.form.orderIds = strArr.join(',')
			this.$nextTick(() => {
				this.$refs.orderIds.onFieldChange()
			})
			console.log(this.$refs.orderIds)
		},
		
		deleteOrder(index) { 
			this.$set(this.orderList[index],'disabled',false)
			this.$set(this.orderList[index],'checked',false)
			let strArr = [];
			this.orderList.forEach((item,index) => {
				if(item.checked) {
					strArr.push(item.name)
				}
			})
			
			this.form.orderIds = strArr.join(',')
			this.$nextTick(() => {
				this.$refs.orderIds.onFieldChange()
			})
		}
	},
	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 {
			padding-bottom:150rpx;
			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%);
			}
		}
		
		.record {
			.nodata {
				padding-top:160rpx;
				font-size: 32rpx;
				text-align: center;
				color: #999999;
			}
			
			&__list {
				
				.record-item {
					margin:0 8rpx 10rpx;
					.item__time {
						padding:20rpx 0;
						text-align: center;
						font-size: 24rpx;
						color: #999999;
					}
					
					.item__content {
						background:#fff;
						border-radius: 16rpx;
						
						.top {
							padding:12rpx 0;
							border-bottom:1px solid #EEEEEE;
							.state {
								position:relative;
								text-align: center;
								color:#fff;
								font-size: 30rpx;
								margin:0 auto;
								width: 240rpx;
								height: 56rpx;
								line-height: 56rpx;
								background: #007AFF;
								border-radius: 28rpx;
								
								.arrow {
									position:absolute;
									top:50%;
									transform: translateY(-50%);
									right:18rpx;
								}
							}
						}
						
						.bottom {
							padding:0 32rpx;
							.flex {
								height:80rpx;
								display: flex;
								align-items: center;
								border-bottom:1px solid #EEEEEE;
								
								&:nth-last-child(2){
									border:0;
								}
								
								
								.text {
									font-size: 24rpx;
									color: #666666;
								}
								
								&__auto {
									text-align: right;
									flex:1;
									font-size: 30rpx;
									font-weight: bold;
									color: #666666;
									
									.red {
										color:#FF3B30;
									}
									
									.green {
										color:#34C759;
									}
								}
							}
							
							.order-list {
								padding-bottom:30rpx;
								.order-item {
									border-radius: 16rpx;
									padding:14rpx;
									background:#F5F5F5;
									font-size: 30rpx;
									color:#333;
									margin-top:16rpx;
								}
							}
						}
					}
				}
			}
		}
	}
	
	.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>