From db82e5990f81ba35b1668e08dcbbb71990a6a486 Mon Sep 17 00:00:00 2001
From: zhaoxiaoqiang <287285524@qq.com>
Date: Fri, 05 Aug 2022 15:02:35 +0800
Subject: [PATCH] 身份证
---
src/components/upload/uploadIdCard.vue | 78 +++++++++++++++++++++++++-------------
1 files changed, 51 insertions(+), 27 deletions(-)
diff --git a/src/components/upload/uploadIdCard.vue b/src/components/upload/uploadIdCard.vue
index 0bccd04..8de02da 100644
--- a/src/components/upload/uploadIdCard.vue
+++ b/src/components/upload/uploadIdCard.vue
@@ -1,7 +1,7 @@
<!--
* @Date: 2019-08-30 18:04:49
* @LastEditors: zxq
- * @LastEditTime: 2022-08-04 15:39:32
+ * @LastEditTime: 2022-08-05 15:02:07
* @Description:
-->
<template>
@@ -20,32 +20,44 @@
</div>
<!-- 真正的上传按钮-->
<div>
- <input
- style=" visibility: hidden;cursor:pointer;"
- type="file"
- id='androidInputFileImage'
- ref="androidInputFileImage"
- @change="handlePhotoChange($event,1)"
- accept="image/jpg, image/jpeg, image/png"
- />
- <input
- style=" visibility: hidden;cursor:pointer;"
- type="file"
- id='androidInputFileCapture'
- ref="androidInputFileCapture"
- @change="handlePhotoChange($event,2)"
- accept="image/*"
- capture="camera"
- />
+
+
</div>
<!--选择上传图片还是拍照-->
- <van-action-sheet
+ <!-- <van-action-sheet
v-model="selectModel"
:close-on-click-overlay="false"
cancel-text="取消"
:actions="nav"
@select="handleMenuSelect"
- ></van-action-sheet>
+ ></van-action-sheet> -->
+ <van-action-sheet v-model="selectModel" cancel-text="取消" title="上传身份证">
+ <div class="content">
+ <div class="upload_input">
+ <div>拍照</div>
+ <input
+ style="cursor:pointer;width:100%;opacity:0;"
+ type="file"
+ id='inputFileCapture'
+ ref="androidInputFileCapture"
+ @change="handlePhotoChange($event,2)"
+ accept="image/*"
+ capture="camera"
+ />
+ </div>
+ <div class="upload_input">
+ <div>本地相册上传</div>
+ <input
+ style="cursor:pointer;width:100%;opacity: 0;"
+ type="file"
+ id='inputFileImage'
+ ref="androidInputFileImage"
+ @change="handlePhotoChange($event,1)"
+ accept="image/jpg, image/jpeg, image/png"
+ />
+ </div>
+ </div>
+ </van-action-sheet>
<!-- <button @click="onclick">aa</button> -->
</div>
</template>
@@ -64,7 +76,7 @@
data() {
return {
selectModel: false, // 模态窗选择拍照还是相册
- nav: [{ name: "拍照" }, { name: "从手机相册选择" }],
+ nav: [{ name: "拍照",code:0 }, { name: "从手机相册选择",code:1 }],
picList: [{}, {}],
picZ: {},
picF: {},
@@ -98,6 +110,7 @@
...mapMutations([SET_APP_LOADING]),
// 处理图片上传的事件(deleteIndex---删除图片的索引)
handlePhotoChange: function(evt,type) {
+ this.selectModel = false;
let that = this;
let shebei = this.judgeBrand(navigator.userAgent.toLowerCase());
that.SET_APP_LOADING(true);
@@ -312,12 +325,11 @@
this.selectModel = true;
},
// 选择拍照或者相册选项
- handleMenuSelect(item, index) {
- console.log(this.$refs,index)
+ handleMenuSelect(index) {
if (index === 0) {
- this.$refs.androidInputFileCapture.$el.click();
+ this.$refs.androidInputFileCapture.click();
} else {
- this.$refs.androidInputFileImage.$el.click();
+ this.$refs.androidInputFileImage.click();
}
this.selectModel = false;
},
@@ -360,8 +372,21 @@
};
</script>
-<style lang="less" scoped >
+<style lang="less" >
.component-photo-upload {
+ .upload_input{
+ font-size: 16px;
+ width: 100%;
+ height: 45px;
+ position: relative;
+ text-align: center;
+ margin-top: 10px;
+ input{
+ position: absolute;
+ left: 0;
+ top: 0;
+ }
+ }
.pic-title {
h4 {
padding: 10px 0;
@@ -369,7 +394,6 @@
line-height: 1;
color: #333;
font-weight: normal;
-
}
}
--
Gitblit v1.8.0