|
@@ -2,11 +2,7 @@
|
|
|
<div class="containe">
|
|
|
<div class="main1" v-show="aaa">
|
|
|
<div class="left">
|
|
|
- <el-image
|
|
|
- style="width: 350px; height: 350px"
|
|
|
- :src="url"
|
|
|
- fit="contain"
|
|
|
- ></el-image>
|
|
|
+ <el-image style="width: 350px; height: 350px" :src="url" fit="contain"></el-image>
|
|
|
</div>
|
|
|
<div class="right">
|
|
|
{{ tt }}
|
|
@@ -16,14 +12,8 @@
|
|
|
<div class="top">
|
|
|
<img src="../../../assets/img/shangchuan.png" alt="" />
|
|
|
</div>
|
|
|
- <el-upload
|
|
|
- class="upload-demo"
|
|
|
- action="/identificat/upload"
|
|
|
- :on-preview="handlePreview"
|
|
|
- :on-success="handleAvatarSuccess"
|
|
|
- list-type="picture"
|
|
|
- :show-file-list="false"
|
|
|
- >
|
|
|
+ <el-upload class="upload-demo" :action="ocrUrl" :on-preview="handlePreview" :on-success="handleAvatarSuccess"
|
|
|
+ list-type="picture" :show-file-list="false">
|
|
|
<el-button size="small" type="primary">点击上传图片</el-button>
|
|
|
</el-upload>
|
|
|
</div>
|
|
@@ -33,99 +23,106 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-
|
|
|
-
|
|
|
-export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- url: "",
|
|
|
- //扫描界面默认关闭
|
|
|
- aaa: false,
|
|
|
- //图片上传界面默认打开
|
|
|
- bbb: true,
|
|
|
- //返回按钮与扫描界面同步
|
|
|
- ccc: false,
|
|
|
- //复制按钮与扫描界面同步
|
|
|
- tt: null,
|
|
|
- };
|
|
|
- },
|
|
|
- methods: {
|
|
|
- handlePreview(file) {
|
|
|
- console.log(file);
|
|
|
- },
|
|
|
- handleAvatarSuccess(response, file, fileList) {
|
|
|
- this.url = file.url;
|
|
|
- this.tt = response;
|
|
|
- this.aaa = true;
|
|
|
- this.bbb = false;
|
|
|
- this.ccc = true;
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ url: "",
|
|
|
+ //扫描界面默认关闭
|
|
|
+ aaa: false,
|
|
|
+ //图片上传界面默认打开
|
|
|
+ bbb: true,
|
|
|
+ //返回按钮与扫描界面同步
|
|
|
+ ccc: false,
|
|
|
+ //复制按钮与扫描界面同步
|
|
|
+ tt: null,
|
|
|
+ ocrUrl: ""
|
|
|
+ };
|
|
|
},
|
|
|
- returns() {
|
|
|
- this.aaa = false;
|
|
|
- this.bbb = true;
|
|
|
- this.ccc = false;
|
|
|
- this.url = "";
|
|
|
+ created() {
|
|
|
+ this.getConfigKey("api.ocr.url").then(response => {
|
|
|
+ this.ocrUrl = response.msg;
|
|
|
+ });
|
|
|
},
|
|
|
- copys() {
|
|
|
- this.$copyText(this.tt).then(
|
|
|
- this.$modal.alertSuccess("复制成功")
|
|
|
- );
|
|
|
+ methods: {
|
|
|
+ handlePreview(file) {
|
|
|
+ console.log(file);
|
|
|
+ },
|
|
|
+ handleAvatarSuccess(response, file, fileList) {
|
|
|
+ this.url = file.url;
|
|
|
+ this.tt = response;
|
|
|
+ this.aaa = true;
|
|
|
+ this.bbb = false;
|
|
|
+ this.ccc = true;
|
|
|
+ },
|
|
|
+ returns() {
|
|
|
+ this.aaa = false;
|
|
|
+ this.bbb = true;
|
|
|
+ this.ccc = false;
|
|
|
+ this.url = "";
|
|
|
+ },
|
|
|
+ copys() {
|
|
|
+ this.$copyText(this.tt).then(
|
|
|
+ this.$modal.alertSuccess("复制成功")
|
|
|
+ );
|
|
|
+ },
|
|
|
},
|
|
|
- },
|
|
|
-};
|
|
|
+ };
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang='scss'>
|
|
|
-.containe {
|
|
|
- .main1 {
|
|
|
- display: flex;
|
|
|
- justify-content: space-around;
|
|
|
- padding-top: calc(100vh * (100 / 1080));
|
|
|
- .left {
|
|
|
- width: calc(100vw * (800 / 1920));
|
|
|
- height: calc(100vh * (700 / 1080));
|
|
|
- border: 1px dashed white;
|
|
|
+ .containe {
|
|
|
+ .main1 {
|
|
|
display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
+ justify-content: space-around;
|
|
|
+ padding-top: calc(100vh * (100 / 1080));
|
|
|
+
|
|
|
+ .left {
|
|
|
+ width: calc(100vw * (800 / 1920));
|
|
|
+ height: calc(100vh * (700 / 1080));
|
|
|
+ border: 1px dashed white;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .right {
|
|
|
+ width: calc(100vw * (800 / 1920));
|
|
|
+ height: calc(100vh * (700 / 1080));
|
|
|
+ border: 1px dashed white;
|
|
|
+ color: #7ea4c8ff;
|
|
|
+ }
|
|
|
}
|
|
|
- .right {
|
|
|
+
|
|
|
+ .main2 {
|
|
|
width: calc(100vw * (800 / 1920));
|
|
|
height: calc(100vh * (700 / 1080));
|
|
|
- border: 1px dashed white;
|
|
|
- color: #7ea4c8ff;
|
|
|
+ position: absolute;
|
|
|
+ left: 30%;
|
|
|
+ top: 15%;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ .top {
|
|
|
+ margin-top: 10%;
|
|
|
+ margin-bottom: calc(100vh * (20 / 1080));
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- .main2 {
|
|
|
- width: calc(100vw * (800 / 1920));
|
|
|
- height: calc(100vh * (700 / 1080));
|
|
|
- position: absolute;
|
|
|
- left: 30%;
|
|
|
- top: 15%;
|
|
|
- text-align: center;
|
|
|
- .top {
|
|
|
- margin-top: 10%;
|
|
|
- margin-bottom: calc(100vh * (20 / 1080));
|
|
|
+
|
|
|
+ .returns {
|
|
|
+ margin-left: 20%;
|
|
|
+ margin-top: calc(100vh * (50 / 1080));
|
|
|
+ }
|
|
|
+
|
|
|
+ .copys {
|
|
|
+ margin-left: 30%;
|
|
|
+ margin-top: calc(100vh * (50 / 1080));
|
|
|
}
|
|
|
}
|
|
|
- .returns {
|
|
|
- margin-left: 20%;
|
|
|
- margin-top: calc(100vh * (50 / 1080));
|
|
|
- }
|
|
|
- .copys {
|
|
|
- margin-left: 30%;
|
|
|
- margin-top: calc(100vh * (50 / 1080));
|
|
|
+
|
|
|
+ ::v-deep .el-button--small {
|
|
|
+ width: calc(100vw * (400 / 1920));
|
|
|
+ height: calc(100vh * (80 / 1080));
|
|
|
+ font-size: 25px;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 30px 30px 30px 30px;
|
|
|
}
|
|
|
-}
|
|
|
-::v-deep .el-button--small {
|
|
|
- width: calc(100vw * (400 / 1920));
|
|
|
- height: calc(100vh * (80 / 1080));
|
|
|
- font-size: 25px;
|
|
|
- text-align: center;
|
|
|
- border-radius: 30px 30px 30px 30px;
|
|
|
-}
|
|
|
</style>
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|