From d24c9dde20cba23b96082b4db81b5223c75e4ea9 Mon Sep 17 00:00:00 2001 From: odc.xiaohui <xiaohui@Q1> Date: 星期三, 08 三月 2023 09:06:28 +0800 Subject: [PATCH] 身份证正反面调整 --- src/components/filePictrue/index.vue | 182 ++++++++++++++++++++++++++------------------- 1 files changed, 105 insertions(+), 77 deletions(-) diff --git a/src/components/filePictrue/index.vue b/src/components/filePictrue/index.vue index 8b65250..5875503 100644 --- a/src/components/filePictrue/index.vue +++ b/src/components/filePictrue/index.vue @@ -1,97 +1,125 @@ <template> - <div class="file-picture"> - <div class="file-tell"> - <div class="tell-title">涓婃姤</div> - <div class="tell-show"> - <div class="my-demo"> - <!-- <img src="https://axure-file.lanhuapp.com/90466432-c999-4bf0-80b8-ee3f96a2099e__ef98ada722c616eccb097d1352880862.svg" - alt=""> --> - <img class="img" :src="imgSource[0].url" alt=""> - <div class="tip"> - <div>銆愬浘鐗囩被鍨嬨�戜笂鎶�</div> - <div>銆愪笂鎶ユ椂闂淬��2022-09-08 14:23:34</div> - </div> - </div> - <img src="https://axure-file.lanhuapp.com/90466432-c999-4bf0-80b8-ee3f96a2099e__ef98ada722c616eccb097d1352880862.svg" - alt=""> + <div class="file-picture"> + <div class="file-tell"> + <div class="tell-title">涓婃姤</div> + <div class="tell-show" v-for="item in imgSource" :key="item.id"> + <div v-if="item.type == '01'" style="display: flex"> + <div class="my-demo" v-for="childer in item.url"> + <img class="img" :src="childer" alt="" /> + <div class="tip"> + <div>銆愬浘鐗囩被鍨嬨�戜笂鎶�</div> + <div>銆愪笂浼犳椂闂淬�憑{ changeTime(item.createTime) }}</div> </div> + </div> </div> - <div class="file-deal"> - <div class="tell-title">澶勭疆</div> - <div class="tell-show"> - <div class="my-demo"> - <!-- <img src="https://axure-file.lanhuapp.com/90466432-c999-4bf0-80b8-ee3f96a2099e__ef98ada722c616eccb097d1352880862.svg" - alt=""> --> - <img class="img" :src="imgSource[1].url" alt=""> - <div class="tip"> - <div>銆愬浘鐗囩被鍨嬨�戝缃�</div> - <div>銆愪笂鎶ユ椂闂淬��2022-09-08 14:23:34</div> - </div> - </div> - <img src="https://axure-file.lanhuapp.com/90466432-c999-4bf0-80b8-ee3f96a2099e__ef98ada722c616eccb097d1352880862.svg" - alt=""> - </div> - </div> + </div> </div> + <div class="file-deal"> + <div class="tell-title">澶勭疆</div> + <div class="tell-show" v-for="item in imgSource" :key="item.id"> + <div v-if="item.type == '02'" class="tell-demo"> + <div class="my-demo" v-for="childer in item.url"> + <img class="img" :src="childer" alt="" /> + <div class="tip"> + <!-- <div>銆愬浘鐗囩被鍨嬨�戝缃�</div> --> + <div>銆愪笂浼犳椂闂淬�憑{ changeTime(item.createTime) }}</div> + </div> + </div> + </div> + </div> + </div> + </div> </template> <script> +import { parseTime } from "@/utils/index"; export default { - data() { - return { - imgSource: [] - } + data() { + return { + imgSource: [], + }; + }, + props: ["filesPictureVo", "mycode"], + created() { + const { + filesPictureVo: { imageResources: imgList }, + } = this; + + let pic = this.filesPictureVo.imageResources; + pic.forEach((item) => { + item.url = item.url.split(","); + }); + this.imgSource = pic; + // this.getEventInfo(this.mycode); + }, + methods: { + // 鑾峰彇token + getToken() { + const token = sessionStorage.getItem("token"); + const tokenHead = sessionStorage.getItem("tokenHead"); + if (token && tokenHead) { + return { Authorization: tokenHead + token }; + } }, - props: ['filesPictureVo'], - created() { - console.log(this.filesPictureVo); - const { filesPictureVo: { imageResources: mysource } } = this; - this.imgSource = mysource; + changeTime(time) { + if (time) { + return parseTime(time); + } }, - methods: { - // 鑾峰彇token - getToken() { - const token = sessionStorage.getItem('token'); - const tokenHead = sessionStorage.getItem('tokenHead'); - if (token && tokenHead) { - return { Authorization: tokenHead + token }; - } - } - } -} + getEventInfo(mycode) { + this.$axios({ + method: "get", + url: `sccg/base_case/baseCaseDetail/${mycode}`, + }).then((res) => { + this.info = res.data; + this.dialogView = true; + let pic = res.data.filesPictureVo.imageResources; + pic.forEach((item) => { + item.url = item.url.split(","); + }); + this.imgSource = pic; + }); + }, + }, +}; </script> <style lang="scss" scoped> .file-picture { - padding-top: 50px; + padding-top: 50px; - .file-tell, - .file-deal { - .tell-title { - line-height: 40px; - } - - .tell-show { - display: flex; - } + .file-tell, + .file-deal { + .tell-title { + line-height: 40px; } - .my-demo { - position: relative; - height: 159px; + .tell-show { + .tell-demo { + display: flex; + flex-wrap: wrap; + width: 100%; + } + } + } + + .my-demo { + position: relative; + height: 159px; + margin: 10px; + } + + .tip { + div { + line-height: 20px; } - .tip { - div { - line-height: 20px; - } + text-align: left; + position: absolute; + bottom: 0px; + } - text-align: left; - position: absolute; - bottom: 0px; - } - - .img { - width: 226px; - height: 159px; - } + .img { + width: 226px; + height: 159px; + } } </style> \ No newline at end of file -- Gitblit v1.8.0