From 7f3bad7f1b372bcb45adff63e5be69ce9365cdf9 Mon Sep 17 00:00:00 2001
From: chenbiao <chenbiao0828@foxmail.com>
Date: Tue, 10 May 2022 16:25:10 +0800
Subject: [PATCH] add 发票抬头：查看 编辑 新增； 发票表单结算 填充 确认

---
 common/uni.css                      |  16 ++++++++++++++++
 pages.json                          |  36 ++++++++++++++++++++++++++++++++++++
 pages/addTitle/addTitle.vue         | 159 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 pages/billing/billing.vue           |   5 ++++-
 pages/companyMsg/companyMsg.vue     | 121 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 pages/editTitle/editTitle.vue       | 130 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 pages/index/index.vue               |   8 +++++++-
 pages/invoiceTitle/invoiceTitle.vue | 130 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 8 files changed, 603 insertions(+), 2 deletions(-)
 create mode 100644 pages/addTitle/addTitle.vue
 create mode 100644 pages/companyMsg/companyMsg.vue
 create mode 100644 pages/editTitle/editTitle.vue
 create mode 100644 pages/invoiceTitle/invoiceTitle.vue

diff --git a/common/uni.css b/common/uni.css
index 11a4cbf..66159dc 100644
--- a/common/uni.css
+++ b/common/uni.css
@@ -1748,6 +1748,10 @@ checkbox-group label {
 	margin-left: 5px;
 }
 
+.margin-bottom-5 {
+	margin-bottom: 5px;
+}
+
 .paddinglr30 {
 	padding: 0 30px;
 }
@@ -1772,6 +1776,10 @@ checkbox-group label {
 	border-bottom: 1px solid #e5e5e5;
 }
 
+.border-bottom-5 {
+	border-bottom: 5px solid #efeff4;
+}
+
 .pos-rel {
 	position: relative;
 }
@@ -1780,6 +1788,10 @@ checkbox-group label {
 	position: absolute;
 }
 
+.display-block {
+	display: block;
+}
+
 .display-none {
 	display: none;
 }
@@ -1825,3 +1837,7 @@ checkbox-group label {
 .fontweightBold {
 	font-weight: bold;
 }
+
+.color-62c7ee {
+	background-color: #62c7ee !important;
+}
\ No newline at end of file
diff --git a/pages.json b/pages.json
index 364e0ee..0fe2502 100644
--- a/pages.json
+++ b/pages.json
@@ -186,6 +186,42 @@
             }
             
         }
+        ,{
+            "path" : "pages/invoiceTitle/invoiceTitle",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "发票抬头",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+        ,{
+            "path" : "pages/companyMsg/companyMsg",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "详情",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+        ,{
+            "path" : "pages/addTitle/addTitle",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+        ,{
+            "path" : "pages/editTitle/editTitle",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "编辑抬头",
+                "enablePullDownRefresh": false
+            }
+            
+        }
     ],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",
diff --git a/pages/addTitle/addTitle.vue b/pages/addTitle/addTitle.vue
new file mode 100644
index 0000000..877e86a
--- /dev/null
+++ b/pages/addTitle/addTitle.vue
@@ -0,0 +1,159 @@
+<template>
+	<view>
+		<uni-section title="抬头类型" type="line">
+			<view class="uni-list">
+				<radio-group @change="radioChange">
+					<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value">
+						<view>
+							<radio :value="item.value" :checked="index === current" />
+						</view>
+						<view style="flex: 1;">{{item.name}}</view>
+					</label>
+				</radio-group>
+			</view>
+		</uni-section>
+		<uni-section title="发票详情" type="line">
+			<view class="paddinglr30">
+				<!-- 基础用法，不包含校验规则 -->
+				<uni-forms ref="baseForm" :rules="rules" :modelValue="baseFormData">
+					<uni-forms-item label="发票抬头" name="invoicetitle" required>
+						<uni-easyinput v-model="baseFormData.invoicetitle" placeholder="请输入发票抬头" />
+					</uni-forms-item>
+					<uni-forms-item label="纳税人识别号" name="userId" required>
+						<uni-easyinput v-model="baseFormData.userId" placeholder="请输入纳税人识别号" />
+					</uni-forms-item>
+					<uni-forms-item label="注册地址">
+						<uni-easyinput v-model="baseFormData.address" placeholder="请输入注册地址" />
+					</uni-forms-item>
+					<uni-forms-item label="注册电话">
+						<uni-easyinput v-model="baseFormData.telphone" placeholder="请输入注册电话" />
+					</uni-forms-item>
+					<uni-forms-item label="开户行">
+						<uni-easyinput v-model="baseFormData.bank" placeholder="请输入开户行" />
+					</uni-forms-item>
+					<uni-forms-item label="开户账号">
+						<uni-easyinput v-model="baseFormData.bankAccount" placeholder="请输入开户账号" />
+					</uni-forms-item>
+					<uni-forms-item label="电子邮箱" name="email" required>
+						<uni-easyinput v-model="baseFormData.email" placeholder="请输入电子邮箱" />
+					</uni-forms-item>
+					<uni-forms-item label="备注">
+						<uni-easyinput type="textarea" v-model="baseFormData.remark" placeholder="备注" />
+					</uni-forms-item>
+					<uni-section title="纸质票邮寄方式" type="line">
+						<uni-forms-item label="邮寄地址" name="emsAdress" required="">
+							<uni-easyinput v-model="baseFormData.emsAdress" placeholder="请输入邮寄地址" />
+						</uni-forms-item>
+						<uni-forms-item label="联系人">
+							<uni-easyinput v-model="baseFormData.emsUsername" placeholder="请输入联系人" />
+						</uni-forms-item>
+						<uni-forms-item label="联系方式">
+							<uni-easyinput v-model="baseFormData.emsTel" placeholder="请输入联系方式" />
+						</uni-forms-item>
+					</uni-section>
+				</uni-forms>
+
+			</view>
+		</uni-section>
+		<view class="paddinglr30 margin-top-30 uni-common-mb">
+			<button type="primary" @click="submit('baseForm')">确认</button>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				items: [{
+						value: '1',
+						name: '个人'
+					},
+					{
+						value: '2',
+						name: '企业'
+					},
+					{
+						value: '3',
+						name: '非企业性单位'
+					},
+				],
+				current: 0,
+				baseFormData: {
+					invoicetitle: '',
+					userId: '',
+					address: '',
+					telphone: '',
+					bank: '',
+					bankAccount: '',
+					email: '',
+					remark: '',
+					emsAdress: '',
+					emsUsername: '',
+					emsTel: '',
+				},
+				// 校验规则
+				rules: {
+					invoicetitle: {
+						rules: [{
+							required: true,
+							errorMessage: '发票抬头不能为空'
+						}]
+					},
+					userId: {
+						rules: [{
+							required: true,
+							errorMessage: '纳税人识别号不能为空'
+						}, {
+							format: 'number',
+							errorMessage: '纳税人识别号只能输入数字'
+						}]
+					},
+					email: {
+						rules: [{
+							required: true,
+							errorMessage: '电子邮箱不能为空'
+						}, ]
+					},
+					emsAdress: {
+						rules: [{
+							required: true,
+							errorMessage: '邮寄地址不能为空'
+						}, ]
+					},
+				},
+			};
+		},
+		onLoad() {},
+
+		onReady() {
+			// 设置自定义表单校验规则，必须在节点渲染完毕后执行
+			this.$refs.baseForm.setRules(this.rules)
+		},
+
+		methods: {
+			radioChange: function(evt) {
+				for (let i = 0; i < this.items.length; i++) {
+					if (this.items[i].value === evt.detail.value) {
+						this.current = i;
+						break;
+					}
+				}
+			},
+			submit(ref) {
+				this.$refs[ref].validate().then(res => {
+					console.log('success', res);
+					uni.showToast({
+						title: `校验通过`
+					})
+				}).catch(err => {
+					console.log('err', err);
+				})
+			}
+		},
+	}
+</script>
+
+<style lang="scss">
+
+</style>
diff --git a/pages/billing/billing.vue b/pages/billing/billing.vue
index 70ee5cc..d9d447a 100644
--- a/pages/billing/billing.vue
+++ b/pages/billing/billing.vue
@@ -42,7 +42,7 @@
 					<text class="color-black">备注：</text>
 					<text class="color-black">111</text>
 				</view>
-				
+
 				<view class="uni-icon pos-abs icon-arrowright uni-icon-arrowright">
 				</view>
 			</view>
@@ -154,7 +154,10 @@
 				}
 			},
 			detailClick() {
+				uni.navigateTo({
+					url: '../invoiceTitle/invoiceTitle'
 
+				});
 			},
 			// 全选
 			changeAll: function(e) {
diff --git a/pages/companyMsg/companyMsg.vue b/pages/companyMsg/companyMsg.vue
new file mode 100644
index 0000000..9319ef9
--- /dev/null
+++ b/pages/companyMsg/companyMsg.vue
@@ -0,0 +1,121 @@
+<template>
+	<view>
+		<view class="paddinglr30 bg-white uni-text margin-bottom-5">
+			<view class="jy-fix-height34">
+				<text class="color-black">抬头类型：</text>
+				<text class="color-black">公司</text>
+			</view>
+		</view>
+		<uni-section title="发票详情" type="line">
+			<view class="uni-list">
+				<view class="uni-list-cell jy-fix-height34">
+					<view class="uni-list-cell-left">
+						<text class="is-required">*</text>发票抬头:
+					</view>
+					<view class="uni-list-cell-db">
+						中兴智能交通股份有限公司
+					</view>
+				</view>
+				<view class="uni-list-cell jy-fix-height34">
+					<view class="uni-list-cell-left">
+						<text class="is-required">*</text>纳税人识别号:
+					</view>
+					<view class="uni-list-cell-db">
+						123333
+					</view>
+				</view>
+				<view class="uni-list-cell">
+					<view class="uni-list-cell-left jy-fix-height34">
+						注册地址:
+					</view>
+					<view class="uni-list-cell-db uni-ellipsis-2">
+						北京市海淀区玲珑路中关村产业园北京市海淀区玲珑路中关村产业园
+					</view>
+				</view>
+				<view class="uni-list-cell jy-fix-height34">
+					<view class="uni-list-cell-left">
+						注册电话:
+					</view>
+					<view class="uni-list-cell-db">
+						123
+					</view>
+				</view>
+				<view class="uni-list-cell">
+					<view class="uni-list-cell-left jy-fix-height34">
+						开户行:
+					</view>
+					<view class="uni-list-cell-db uni-ellipsis-2">
+						北京市海淀区玲珑路中关村产业园北京市海淀区玲珑路中关村产业园
+					</view>
+				</view>
+				<view class="uni-list-cell jy-fix-height34">
+					<view class="uni-list-cell-left">
+						开户账号:
+					</view>
+					<view class="uni-list-cell-db">
+						1123村产业园
+					</view>
+				</view>
+				<view class="uni-list-cell jy-fix-height34">
+					<view class="uni-list-cell-left">
+						<text class="is-required">*</text>电子邮箱:
+					</view>
+					<view class="uni-list-cell-db">
+						1123@qq.com
+					</view>
+				</view>
+				<view class="uni-list-cell jy-fix-height34">
+					<view class="uni-list-cell-left">
+						备注:
+					</view>
+					<view class="uni-list-cell-db">
+						备注
+					</view>
+				</view>
+			</view>
+		</uni-section>
+
+		<uni-section title="纸质票邮寄方式" type="line">
+			<view class="uni-list">
+				<view class="uni-list-cell">
+					<view class="uni-list-cell-left jy-fix-height34">
+						邮寄地址:
+					</view>
+					<view class="uni-list-cell-db uni-ellipsis-2">
+						北京市海淀区玲珑路中关村产业园北京市海淀区玲珑路中关村产业园
+					</view>
+				</view>
+				<view class="uni-list-cell jy-fix-height34">
+					<view class="uni-list-cell-left">
+						联系人:
+					</view>
+					<view class="uni-list-cell-db">
+						中兴智能交通股份有限公司
+					</view>
+				</view>
+				<view class="uni-list-cell jy-fix-height34">
+					<view class="uni-list-cell-left">
+						联系方式:
+					</view>
+					<view class="uni-list-cell-db">
+						13113131212
+					</view>
+				</view>
+			</view>
+		</uni-section>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+
+			};
+		}
+	}
+</script>
+
+<style lang="scss">
+
+</style>
diff --git a/pages/editTitle/editTitle.vue b/pages/editTitle/editTitle.vue
new file mode 100644
index 0000000..14c177b
--- /dev/null
+++ b/pages/editTitle/editTitle.vue
@@ -0,0 +1,130 @@
+<template>
+	<view>
+		<uni-section title="抬头类型" type="line">
+			<view class="uni-list">
+				<radio-group @change="radioChange">
+					<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value">
+						<view>
+							<radio :value="item.value" :checked="index === current" />
+						</view>
+						<view style="flex: 1;">{{item.name}}</view>
+					</label>
+				</radio-group>
+			</view>
+		</uni-section>
+		<uni-section title="发票详情" type="line">
+			<view class="paddinglr30">
+				<!-- 包含校验规则 -->
+				<uni-forms ref="baseForm" :rules="rules" :modelValue="baseFormData">
+					<uni-forms-item label="发票抬头" name="invoicetitle" required>
+						<uni-easyinput v-model="baseFormData.invoicetitle" placeholder="请输入发票抬头" />
+					</uni-forms-item>			
+					<uni-forms-item label="电子邮箱" name="email" required>
+						<uni-easyinput v-model="baseFormData.email" placeholder="请输入电子邮箱" />
+					</uni-forms-item>
+					<uni-forms-item label="备注">
+						<uni-easyinput type="textarea" v-model="baseFormData.remark" placeholder="备注" />
+					</uni-forms-item>
+					<uni-section title="纸质票邮寄方式" type="line">
+						<uni-forms-item label="邮寄地址" name="emsAdress" required="">
+							<uni-easyinput v-model="baseFormData.emsAdress" placeholder="请输入邮寄地址" />
+						</uni-forms-item>
+						<uni-forms-item label="联系人">
+							<uni-easyinput v-model="baseFormData.emsUsername" placeholder="请输入联系人" />
+						</uni-forms-item>
+						<uni-forms-item label="联系方式">
+							<uni-easyinput v-model="baseFormData.emsTel" placeholder="请输入联系方式" />
+						</uni-forms-item>
+					</uni-section>
+				</uni-forms>
+
+			</view>
+		</uni-section>
+		<view class="paddinglr30 margin-top-30 uni-common-mb">
+			<button type="primary" @click="submit('baseForm')">确认</button>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				items: [{
+						value: '1',
+						name: '个人'
+					},
+					{
+						value: '2',
+						name: '企业'
+					},
+					{
+						value: '3',
+						name: '非企业性单位'
+					},
+				],
+				current: 0,
+				baseFormData: {
+					invoicetitle: '',			
+					email: '',
+					remark: '',
+					emsAdress: '',
+					emsUsername: '',
+					emsTel: '',
+				},
+				// 校验规则
+				rules: {
+					invoicetitle: {
+						rules: [{
+							required: true,
+							errorMessage: '发票抬头不能为空'
+						}]
+					},			
+					email: {
+						rules: [{
+							required: true,
+							errorMessage: '电子邮箱不能为空'
+						}, ]
+					},
+					emsAdress: {
+						rules: [{
+							required: true,
+							errorMessage: '邮寄地址不能为空'
+						}, ]
+					},
+				},
+			};
+		},
+		onLoad() {},
+
+		onReady() {
+			// 设置自定义表单校验规则，必须在节点渲染完毕后执行
+			this.$refs.baseForm.setRules(this.rules)
+		},
+
+		methods: {
+			radioChange: function(evt) {
+				for (let i = 0; i < this.items.length; i++) {
+					if (this.items[i].value === evt.detail.value) {
+						this.current = i;
+						break;
+					}
+				}
+			},
+			submit(ref) {
+				this.$refs[ref].validate().then(res => {
+					console.log('success', res);
+					uni.showToast({
+						title: `校验通过`
+					})
+				}).catch(err => {
+					console.log('err', err);
+				})
+			}
+		},
+	}
+</script>
+
+<style lang="scss">
+
+</style>
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 47bc91c..e289cd0 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -44,7 +44,7 @@
 						</view>
 						<view class="index-title">卡券管理</view>
 					</view>
-					<view class="flex-item">
+					<view class="flex-item" @click="toInvoicePage">
 						<view class="">
 							<image src="../../static/me/me-fapao.png" class="index-icon"></image>
 						</view>
@@ -77,6 +77,12 @@
 					url: '../setting/setting'
 
 				});
+			},
+			toInvoicePage() {
+				uni.navigateTo({
+					url: '../invoiceClaim/invoiceClaim'
+				
+				});
 			}
 		}
 	}
diff --git a/pages/invoiceTitle/invoiceTitle.vue b/pages/invoiceTitle/invoiceTitle.vue
new file mode 100644
index 0000000..012acbf
--- /dev/null
+++ b/pages/invoiceTitle/invoiceTitle.vue
@@ -0,0 +1,130 @@
+<template>
+	<view>
+		<view>
+
+			<view class="uni-list">
+				<radio-group @change="titleChange">
+					<label class="display-block border-bottom-5" v-for="(item, index) in items" :key="item.value">
+						<view class="elec-card bg-white">
+							<view class="elec-card-left float-left">
+								<view class="elec-card-msg">黄石肯特科技发展有限公司</view>
+								<view class="elec-card-msg">发票类型:公司</view>
+							</view>
+							<view class="elec-card-right float-right">
+								<button class="mini-btn color-62c7ee" type="primary" size="mini">去使用</button>
+							</view>
+						</view>
+						<view class="uni-list-cell uni-list-cell-pd">
+							<view>
+								<radio :value="item.value" :checked="index === current" />
+							</view>
+							<view style="flex:1;">默认抬头</view>
+							<view>
+								<button class="mini-btn margin-left-5" type="primary" size="mini"
+									@click="detailLookBtn">查看</button>
+								<button class="mini-btn margin-left-5" type="default" size="mini"
+									@click="detailEditBtn">编辑</button>
+								<button class="mini-btn margin-left-5" type="warn" size="mini"
+									@click="detailDelBtn">删除</button>
+							</view>
+						</view>
+					</label>
+				</radio-group>
+			</view>
+			<view class="billing-all">
+				<button type="primary" class="title-submit" @click="addInvoiceTitle">添加发票抬头</button>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				items: [{
+						value: '1',
+						checked: 'true'
+
+					},
+					{
+						value: '2'
+
+					},
+					{
+						value: '3'
+
+					},
+				],
+				current: 0,
+			};
+		},
+		methods: {
+			titleChange: function(evt) {
+				for (let i = 0; i < this.items.length; i++) {
+					if (this.items[i].value === evt.detail.value) {
+						this.current = i;
+						break;
+					}
+				}
+			},
+			detailLookBtn() {
+				uni.navigateTo({
+					url: '../companyMsg/companyMsg'
+				});
+			},
+			detailEditBtn() {
+				uni.navigateTo({
+					url: '../editTitle/editTitle'
+				});
+			},
+			detailDelBtn() {
+
+			},
+			addInvoiceTitle() {
+				uni.navigateTo({
+					url: '../addTitle/addTitle'
+				});
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	.elec-card {
+		width: 100%;
+		height: 64upx;
+		padding: 22upx 30upx;
+
+		border-bottom: 1px solid #e5e5e5;
+	}
+
+	.elec-card-left {
+		width: 70%;
+		height: 64upx;
+
+	}
+
+	.elec-card-right {
+		width: 30%;
+		height: 64upx;
+		line-height: 64upx;
+	}
+
+	.elec-card-msg {
+		line-height: 32upx;
+		color: rgba(0, 0, 0, .7);
+
+	}
+
+	.billing-all {
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		width: 100%;
+		height: 46px;
+		line-height: 46px;
+		// font-size: 24px;
+
+	}
+</style>
--
libgit2 0.21.4