add 信用等级实名认证form表单

chenbiao
1 parent 7f3bad7f
Showing 4 changed files with 193 additions and 4 deletions
pages.json
pages/creditRating/creditRating.vue
pages/index/index.vue
pages/nameAuthentication/nameAuthentication.vue
@@ -208,7 +208,7 @@
             "path" : "pages/addTitle/addTitle",
             "style" :                                                                                    
             {
-                "navigationBarTitleText": "",
+                "navigationBarTitleText": "添加抬头",
                 "enablePullDownRefresh": false
             }
  
@@ -222,6 +222,24 @@
             }
  
         }
+        ,{
+            "path" : "pages/creditRating/creditRating",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "信用等级",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+        ,{
+            "path" : "pages/nameAuthentication/nameAuthentication",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "实名认证",
+                "enablePullDownRefresh": false
+            }
+            
+        }
     ],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",
+<template>
+	<view>
+		<uni-section title="实名认证" type="line">
+			<uni-list>
+				<uni-list-item title="信用等级" :rightText="ratingText" clickable showArrow @click="ratingCell()" />
+			</uni-list>
+		</uni-section>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				ratingText:"未认证"
+			};
+		},
+		methods:{
+			ratingCell(){
+				uni.navigateTo({
+					url: '../nameAuthentication/nameAuthentication'								
+				});
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+
+</style>
@@ -50,7 +50,12 @@
 						</view>
 						<view class="index-title">发票申领</view>
 					</view>
-
+					<view class="flex-item" @click="toRatingPage">
+						<view class="">
+							<image src="../../static/me/me-aboutus.png" class="index-icon"></image>
+						</view>
+						<view class="index-title">信用等级</view>
+					</view>
 				</view>
 			</view>
 		</view>
@@ -81,9 +86,15 @@
 			toInvoicePage() {
 				uni.navigateTo({
 					url: '../invoiceClaim/invoiceClaim'
-				
+
 				});
-			}
+			},
+			toRatingPage() {
+				uni.navigateTo({
+					url: '../creditRating/creditRating'
+
+				});
+			},
 		}
 	}
 </script>
+<template>
+	<view>
+		<uni-section title="实名认证" type="line">
+			<view class="paddinglr30">
+				<!-- 基础用法，不包含校验规则 -->
+				<uni-forms ref="baseForm" :rules="rules" :modelValue="baseFormData">
+					<uni-forms-item label="姓名" name="username" required>
+						<uni-easyinput v-model="baseFormData.username" placeholder="请输入姓名" />
+					</uni-forms-item>
+					<uni-forms-item label="身份证号" name="userId" required>
+						<uni-easyinput v-model="baseFormData.userId" placeholder="请输入身份证号" />
+					</uni-forms-item>
+					<uni-file-picker
+						v-model="baseFormData.fontimageValue" 
+						fileMediatype="image" 
+						 
+						:image-styles="imageStyles"
+						return-type="array"
+						file-extname="png,jpg" 
+						:limit="1" 
+						@select="select" 
+						@progress="progress" 
+						@success="success" 
+						@fail="fail"
+						title="身份证正面" />
+					
+					<uni-file-picker 
+						v-model="baseFormData.sideimageValue" 
+						fileMediatype="image" 
+						 
+						:image-styles="imageStyles"
+						return-type="array"
+						file-extname="png,jpg" 
+						:limit="1" 
+						@select="select" 
+						@progress="progress" 
+						@success="success" 
+						@fail="fail"
+						title="身份证反面" />
+			
+				</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 {
+				baseFormData: {
+					invoicetitle: '',
+					userId: '',
+					fontimageValue:[],
+					sideimageValue:[],
+				},
+				// 校验规则
+				rules: {
+					username: {
+						rules: [{
+							required: true,
+							errorMessage: '姓名不能为空'
+						}]
+					},
+					userId: {
+						rules: [{
+							required: true,
+							errorMessage: '身份证号不能为空'
+						}, {
+							format: 'number',
+							errorMessage: '身份证号只能输入数字'
+						}]
+					},
+				},
+				imageStyles: {
+					width: 300,
+					height: 200,
+					// 线条样式
+					borderStyle: {
+						width: 1,
+						color: 'blue',
+						style: 'dashed',
+						radius: 2
+					}
+				},
+
+			}
+
+		},
+		methods: {
+			// 获取上传状态
+			select(e) {
+				console.log('选择文件：', e)
+			},
+			// 获取上传进度
+			progress(e) {
+				console.log('上传进度：', e)
+			},
+
+			// 上传成功
+			success(e) {
+				console.log('上传成功')
+			},
+
+			// 上传失败
+			fail(e) {
+				console.log('上传失败：', e)
+			},
+			
+			// 提交
+			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>