上传代码

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

@@ -0,0 +1,195 @@
+<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 RboyUploadSfz from "@/components/Rboy-upload-sfz/Rboy-upload-sfz.vue"
+	export default {
+		name: "Rboy-upload-sfz",
+		components: {
+		RboyUploadSfz,
+		},
+		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>

distribution/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 = ""
+		}
+	},
+}
+```
+
+