发票列表

pages2/invoice/index.vue

@@ -7,32 +7,78 @@
 			<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-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>
-						<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">
+						
+						<!-- 增值税发票 -->
+						<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 v-if="false" v-model="form.orderId" />
-								<view class="content">
-									{{ form.orderId || '请选择' }}
-								</view>
+								<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)">
@@ -52,12 +98,60 @@
 					<view class="order-text__price">¥ 999.00</view>
 				</view>
 				
-				<view class="submit">
+				<view class="submit" @click="formSubmit">
 					提交申请
 				</view>
 			</view>
-			<view class="record" v-if="current == 1">
-				record
+			<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>
 		
@@ -96,7 +190,7 @@
 					</scroll-view>
 				</view>
 				<view class="confrim-btn">
-					<view class="okBtn" @click="okPopup(1)">确定</view>
+					<view class="okBtn" @click="okPopup()">确定</view>
 				</view>
 			</view>
 		</u-popup>
@@ -110,6 +204,7 @@ export default {
 	data() {
 		return {
 			checkOrderList:[],
+			recordList:[1],
 			list: [
 				{
 					name: '发票申请'
@@ -122,12 +217,120 @@ export default {
 				type:'',
 				main:'',
 				header:'',
-				orderId:'',
+				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: 0,
+			current: 1,
 			order: [],
 			typeList:[{
 				name:'普通发票',
@@ -147,12 +350,40 @@ export default {
 	},
 	// 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;
@@ -163,18 +394,35 @@ export default {
 		},
 		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)
 				}
 			})
 			
-			console.log(this.checkOrderList)
+			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']) }
@@ -200,6 +448,7 @@ page {
 		padding-top:96rpx;
 		
 		.open {
+			padding-bottom:150rpx;
 			margin:8rpx 24rpx 0;
 			
 			.form {
@@ -298,6 +547,105 @@ page {
 				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 {