上传身份证

.hbuilderx/launch.json

@@ -2,6 +2,10 @@
   // launchtype项可配置值为local或remote, local代表前端连本地云函数，remote代表前端连云端云函数
     "version": "0.0",
     "configurations": [{
+     	"app-plus" : 
+     	{
+     		"launchtype" : "local"
+     	},
      	"default" : 
      	{
      		"launchtype" : "local"

components/Rboy-upload-sfz/Rboy-upload-sfz.vue

@@ -0,0 +1,192 @@
+<template>
+	<div>
+		<view class="Rboy-box">
+			<view class="Rboy-obverse">
+				<image class="obverseimg" :src="obverseUrl ? obverseUrl : obverse" @click="obverse_btn" mode="">
+				</image>
+				<image class="del_btn" :src="del" mode="" v-if="obverseUrl" @click="del_btn('obverse')"></image>
+				<view class="bottom">
+					<text>身份证正面照</text>
+				</view>
+			</view>
+			<view class="Rboy-reverse">
+				<image class="reverseimg" :src="reverseUrl ? reverseUrl : reverse" @click="reverse_btn" mode="">
+				</image>
+				<image class="del_btn" :src="del" mode="" v-if="reverseUrl" @click="del_btn('reverse')"></image>
+				<view class="bottom">
+					<text>身份证反面照</text>
+				</view>
+			</view>
+		</view>
+	</div>
+</template>
+
+<script>
+	import file from "./file.js"
+	export default {
+		name: "Rboy-upload-sfz",
+		props: {
+			// 正面
+			obverseUrl: {
+				type: String,
+				default: ""
+			},
+			// 反面
+			reverseUrl: {
+				type: String,
+				default: ""
+			},
+			// album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
+			sourceType: {
+				type: Array || Object,
+				default: () => {
+					return ['album', 'camera']
+				}
+			}
+		},
+		data() {
+			return {
+				obverse: file.obverse,
+				reverse: file.reverse,
+				del: file.del,
+			}
+		},
+		created() {
+
+		},
+		methods: {
+			obverse_btn() {
+				if (this.obverseUrl) {
+					// 预览
+					this.previewImage(this.obverseUrl)
+				} else {
+					// 上传
+					this.select_change("obverse")
+				}
+			},
+			reverse_btn() {
+				if (this.reverseUrl) {
+					// 预览
+					this.previewImage(this.reverseUrl)
+				} else {
+					// 上传
+					this.select_change("reverse")
+				}
+			},
+			// 上传
+			select_change(name) {
+				uni.chooseImage({
+					count: 1, //默认9
+					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
+					sourceType: this.sourceType, // 从相册选择
+					success: (res) => {
+						this.$emit("selectChange", {
+							msg: `${name}Image:ok`,
+							name,
+							tempFilePath: res.tempFilePaths[0],
+							tempFile: res.tempFiles[0]
+						})
+					}
+				});
+			},
+			// 预览
+			previewImage(current = 0) {
+				uni.previewImage({
+					current,
+					urls: [this.obverseUrl, this.reverseUrl],
+				});
+			},
+			// 删除
+			del_btn(name) {
+				console.log(name)
+				this.$emit("del", {
+					name,
+				})
+			}
+		}
+	}
+</script>
+
+<style scoped lang="less">
+	@imgWidth: 345rpx;
+	@imgheight: 220rpx;
+	@boxheight: 280rpx;
+
+	.Rboy-box {
+		display: flex;
+		justify-content: space-between;
+		// align-items: center;
+
+		.Rboy-obverse {
+			border-radius: 10rpx;
+			width: @imgWidth;
+			height: @boxheight;
+			overflow: hidden;
+			display: flex;
+			flex-direction: column;
+			position: relative;
+
+			.obverseimg {
+				width: @imgWidth;
+				height: @imgheight;
+			}
+
+			.bottom {
+				text-align: center;
+				height: calc(@boxheight - @imgheight);
+				background-color: #B7D7FF;
+				color: #3B5FD2;
+				font-size: 28rpx;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+			}
+
+			.del_btn {
+				position: absolute;
+				top: 5rpx;
+				right: 5rpx;
+				width: 50rpx;
+				height: 50rpx;
+				border-radius: 50%;
+				z-index: 20;
+			}
+		}
+
+		.Rboy-reverse {
+			border-radius: 10rpx;
+			width: @imgWidth;
+			height: @boxheight;
+			overflow: hidden;
+			display: flex;
+			flex-direction: column;
+			position: relative;
+
+			.reverseimg {
+				width: @imgWidth;
+				height: @imgheight;
+			}
+
+			.bottom {
+				text-align: center;
+				height: calc(@boxheight - @imgheight);
+				background-color: #B7D7FF;
+				color: #3B5FD2;
+				font-size: 28rpx;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+			}
+
+			.del_btn {
+				position: absolute;
+				top: 5rpx;
+				right: 5rpx;
+				width: 50rpx;
+				height: 50rpx;
+				border-radius: 50%;
+				z-index: 20;
+			}
+		}
+	}
+</style>

components/Rboy-upload-sfz/readme.md

@@ -0,0 +1,64 @@
+
+
+## RboyUploadSfz 身份证正反面上传
+
+> **组件名：Rboy-upload-sfz**
+> 代码块： `Rboy-upload-sfz`
+
+
+## 属性
+- obverse-url 身份证正面图片地址
+- reverse-url 身份证反面图片地址
+- source-type 控制相机和相册（album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项）
+- @selectChange 身份证图片上传成功事件
+- @del 身份证图片删除事件
+
+
+
+## 使用方法
+1. 引入
+```js
+import RboyUploadSfz from "@/components/Rboy-upload-sfz/Rboy-upload-sfz.vue"
+```
+
+2. 注册组件
+```js
+components: {
+	RboyUploadSfz,
+},
+```
+
+3. 应用
+```html
+<Rboy-upload-sfz :obverse-url="formData.obverseUrl" :reverse-url="formData.reverseUrl" @selectChange="sfz_chagne" @del="del_btn"></Rboy-upload-sfz>
+```
+```js
+// 表单
+formData: {
+	// 正面
+	obverseUrl: "",
+	// 反面
+	reverseUrl: "",
+},
+methods: {
+	// 身份证
+	// 上传
+	sfz_chagne(e) {
+		if (e.name == "obverse") {
+			this.formData.obverseUrl = e.tempFilePath
+		} else if (e.name == "reverse") {
+			this.formData.reverseUrl = e.tempFilePath
+		}
+	},
+	// 删除
+	del_btn(e) {
+		if (e.name == "obverse") {
+			this.formData.obverseUrl = ""
+		} else if (e.name == "reverse") {
+			this.formData.reverseUrl = ""
+		}
+	},
+}
+```
+
+

config.js

@@ -1,11 +1,12 @@
 // 应用全局配置
 module.exports = {
-  baseUrl: 'http://192.168.3.77:8080',
+  // baseUrl: 'http://192.168.3.77:8080',
+   baseUrl: 'https://vue.ruoyi.vip/prod-api',
   // baseUrl: 'http://localhost:8080',
   // 应用信息
   appInfo: {
     // 应用名称
-    name: "ruoyi-app",
+    name: "arbitrate-wx",
     // 应用版本
     version: "1.1.0",
     // 应用logo

package.json

@@ -0,0 +1,17 @@
+{
+    "id": "Rboy-upload-sfz",
+    "displayName": "身份证正反面上传 ",
+    "version": "1.0.2",
+    "description": "身份证正反面上传 预览 删除",
+    "keywords": [
+        "身份证",
+        "上传",
+        "预览"
+    ],
+    "dcloudext": {
+        "category": [
+            "前端组件",
+            "通用组件"
+        ]
+    }
+}

pages.json

@@ -12,7 +12,7 @@
 	}, {
 		"path": "pages/index",
 		"style": {
-      "navigationBarTitleText": "若依移动端框架",
+			"navigationBarTitleText": "首页",
 			"navigationStyle": "custom"
 		}
 	}, {
@@ -70,6 +70,11 @@
 		"style": {
 			"navigationBarTitleText": "浏览文本"
 		}
+	},{
+		"path": "pages/certification/index",
+		"style": {
+			"navigationBarTitleText": "实名认证"
+		}
 	}],
 	"tabBar": {
 		"color": "#000000",
@@ -91,8 +96,7 @@
 			"iconPath": "static/images/tabbar/mine.png",
 			"selectedIconPath": "static/images/tabbar/mine_.png",
 			"text": "我的"
-      }
+		}]
-    ]
 	},
 	"globalStyle": {
 		"navigationBarTextStyle": "black",

pages/certification/index.vue

@@ -0,0 +1,49 @@
+<template>
+	<view class="">
+		<Rboy-upload-sfz :obverse-url="formData.obverseUrl" :reverse-url="formData.reverseUrl"
+			@selectChange="sfz_chagne" @del="del_btn"></Rboy-upload-sfz>
+	</view>
+</template>
+
+<script>
+	import RboyUploadSfz from "@/components/Rboy-upload-sfz/Rboy-upload-sfz.vue"
+	export default {
+		data() {
+			return {
+				// 表单
+				formData: {
+					// 正面
+					obverseUrl: "",
+					// 反面
+					reverseUrl: "",
+				},
+			}
+		},
+		methods: {
+			// 身份证
+			// 上传
+			sfz_chagne(e) {
+				if (e.name == "obverse") {
+					this.formData.obverseUrl = e.tempFilePath
+					console.log(this.formData.obverseUrl);
+				} else if (e.name == "reverse") {
+					this.formData.reverseUrl = e.tempFilePath
+				}
+			},
+			// 删除
+			del_btn(e) {
+				if (e.name == "obverse") {
+					this.formData.obverseUrl = ""
+				} else if (e.name == "reverse") {
+					this.formData.reverseUrl = ""
+				}
+			},
+		},
+		components: {
+			RboyUploadSfz,
+		},
+	}
+</script>
+
+<style>
+</style>

pages/index.vue

@@ -1,8 +1,8 @@
 <template>
   <view class="content">
-    <image class="logo" src="@/static/logo.png"></image>
+    <image class="logo" src="@/static/chuizi.png"></image>
     <view class="text-area">
-      <text class="title">Hello RuoYi</text>
+      <text class="title">法务系统</text>
     </view>
   </view>
 </template>

pages/login.vue

@@ -28,11 +28,15 @@
         <text class="text-grey1">没有账号？</text>
         <text @click="handleUserRegister" class="text-blue">立即注册</text>
       </view>
-      <view class="xieyi text-center">
+	 <!-- <view class="reg text-center" v-if="register">
+	    <text class="text-grey1">使用其他方式登录：</text>
+	    <text @click="handleUserRegister" class="text-blue"></text>
+	  </view> -->
+     <!-- <view class="xieyi text-center">
         <text class="text-grey1">登录即代表同意</text>
         <text @click="handleUserAgrement" class="text-blue">《用户协议》</text>
         <text @click="handlePrivacy" class="text-blue">《隐私协议》</text>
-      </view>
+      </view> -->
     </view>
      
   </view>
@@ -47,7 +51,7 @@
         codeUrl: "",
         captchaEnabled: true,
         // 用户注册开关
-        register: false,
+        register: true,
         globalConfig: getApp().globalData.config,
         loginForm: {
           username: "admin",

pages/register.vue

@@ -3,7 +3,7 @@
     <view class="logo-content align-center justify-center flex">
       <image style="width: 100rpx;height: 100rpx;" :src="globalConfig.appInfo.logo" mode="widthFix">
       </image>
-      <text class="title">若依移动端注册</text>
+      <text class="title">法务系统注册</text>
     </view>
     <view class="login-form-content">
       <view class="input-item flex align-center">

pages/work/index.vue

@@ -12,61 +12,72 @@
 		</uni-swiper-dot>
 
 		<!-- 宫格组件 -->
-    <uni-section title="系统管理" type="line"></uni-section>
+		<uni-section class="uni-section" title="系统管理" type="line" @click="certification">
+			<template v-slot:right>
+				{{certificationStatus}}
+			</template>
+		</uni-section>
+		<!-- <uni-section class="uni-section" title="系统管理" type="line"></uni-section> -->
 		<view class="grid-body">
 			<uni-grid :column="4" :showBorder="false" @change="changeGrid">
 				<uni-grid-item>
 					<view class="grid-item-box">
-            <uni-icons type="person-filled" size="30"></uni-icons>
+						<uni-icons type="compose" size="30" color="#327DD7"></uni-icons>
-            <text class="text">用户管理</text>
+						<text class="text">本人立案</text>
 					</view>
 				</uni-grid-item>
 				<uni-grid-item>
 					<view class="grid-item-box">
-            <uni-icons type="staff-filled" size="30"></uni-icons>
+						<uni-icons type="staff-filled" size="30" color="#327DD7"></uni-icons>
-            <text class="text">角色管理</text>
+						<text class="text">本人案件进展</text>
 					</view>
 				</uni-grid-item>
 				<uni-grid-item>
 					<view class="grid-item-box">
-            <uni-icons type="color" size="30"></uni-icons>
+						<uni-icons type="color" size="30" color="#327DD7"></uni-icons>
-            <text class="text">菜单管理</text>
+						<text class="text">代理立案</text>
 					</view>
 				</uni-grid-item>
 				<uni-grid-item>
 					<view class="grid-item-box">
-            <uni-icons type="settings-filled" size="30"></uni-icons>
+						<uni-icons type="settings-filled" size="30" color="#327DD7"></uni-icons>
-            <text class="text">部门管理</text>
+						<text class="text">代理案件进展</text>
 					</view>
 				</uni-grid-item>
 				<uni-grid-item>
 					<view class="grid-item-box">
-            <uni-icons type="heart-filled" size="30"></uni-icons>
+						<uni-icons type="heart-filled" size="30" color="#327DD7"></uni-icons>
-            <text class="text">岗位管理</text>
+						<text class="text">证据交换</text>
 					</view>
 				</uni-grid-item>
 				<uni-grid-item>
 					<view class="grid-item-box">
-            <uni-icons type="bars" size="30"></uni-icons>
+						<uni-icons type="bars" size="30" color="#327DD7"></uni-icons>
-            <text class="text">字典管理</text>
+						<text class="text">互联网庭</text>
 					</view>
 				</uni-grid-item>
 				<uni-grid-item>
 					<view class="grid-item-box">
-            <uni-icons type="gear-filled" size="30"></uni-icons>
+						<uni-icons type="gear-filled" size="30" color="#327DD7"></uni-icons>
-            <text class="text">参数设置</text>
+						<text class="text">在线撤诉</text>
 					</view>
 				</uni-grid-item>
 				<uni-grid-item>
 					<view class="grid-item-box">
-            <uni-icons type="chat-filled" size="30"></uni-icons>
+						<uni-icons type="chat-filled" size="30" color="#327DD7"></uni-icons>
-            <text class="text">通知公告</text>
+						<text class="text">笔录签字</text>
 					</view>
 				</uni-grid-item>
 				<uni-grid-item>
 					<view class="grid-item-box">
-            <uni-icons type="wallet-filled" size="30"></uni-icons>
+						<uni-icons type="wallet-filled" size="30" color="#327DD7"></uni-icons>
-            <text class="text">日志管理</text>
+						<text class="text">仲裁文书</text>
+					</view>
+				</uni-grid-item>
+				<uni-grid-item>
+					<view class="grid-item-box">
+						<uni-icons type="wallet-filled" size="30" color="#327DD7"></uni-icons>
+						<text class="text">法规政策</text>
 					</view>
 				</uni-grid-item>
 			</uni-grid>
@@ -81,15 +92,16 @@
 				current: 0,
 				swiperDotIndex: 0,
 				data: [{
-            image: '/static/images/banner/banner01.jpg'
+						image: 'https://img.tukuppt.com/bg_grid/00/09/96/qWJxN1umma.jpg!/fh/350'
 					},
 					{
-            image: '/static/images/banner/banner02.jpg'
+						image: 'https://img.tukuppt.com/bg_grid/00/18/92/JBheZs7ZVK.jpg!/fh/350'
 					},
 					{
-            image: '/static/images/banner/banner03.jpg'
+						image: 'https://img.tukuppt.com/bg_grid/00/81/07/DGEl4suqeV.jpg!/fh/350'
 					}
-        ]
+				],
+				certificationStatus:"未认证"
 			}
 		},
 		methods: {
@@ -101,6 +113,12 @@
 			},
 			changeGrid(e) {
 				this.$modal.showToast('模块建设中~')
+			},
+			// 点击实名认证
+			certification(){
+				uni.navigateTo({
+					url:('/pages/certification/index')
+				})
 			}
 		}
 	}
@@ -167,6 +185,24 @@
 		line-height: 300rpx;
 	}
 
+	.grid-body {
+		// background-image: url('https://img.tukuppt.com/bg_grid/00/18/52/aEicoC2qMI.jpg!/fh/350');
+		background-repeat: no-repeat;
+		background-size: cover;
+		height: 900rpx;
+		// color: #fff;
+		opacity: 0.9;
+	}
+
+	.uni-section {
+		background-color: #b90404 !important;
+		color: #fff;
+	}
+
+	/deep/ .uni-section__content-title {
+		color: #fff !important;
+	}
+
 	@media screen and (min-width: 500px) {
 		.uni-swiper-dot-box {
 			width: 400px;

unpackage/dist/dev/mp-weixin/app.json

@@ -13,7 +13,8 @@
     "pages/mine/help/index",
     "pages/mine/about/index",
     "pages/common/webview/index",
-    "pages/common/textview/index"
+    "pages/common/textview/index",
+    "pages/certification/index"
   ],
   "subPackages": [],
   "window": {

unpackage/dist/dev/mp-weixin/project.config.json

@@ -15,8 +15,7 @@
       "ignore": [],
       "disablePlugins": [],
       "outputPath": ""
-    },
+    }
-    "condition": false
   },
   "compileType": "miniprogram",
   "libVersion": "3.0.1",