退款订单详情页面新增图片查看及下载功能

998e56d8 · dongchun · 张国柄 · c063e1f0 · 998e56d8
Commit 998e56d8 authored Oct 29, 2021 by dongchun Committed by 张国柄 Oct 29, 2021
Hide whitespace changes
Inline Side-by-side

Showing with 142 additions and 1 deletion

details.html ...in/resources/templates/zhengzai/kylin/refund/details.html +142 -1

No files found.
--- a/liquidnet-bus-client/liquidnet-client-admin/liquidnet-client-admin-web/src/main/resources/templates/zhengzai/kylin/refund/details.html
+++ b/liquidnet-bus-client/liquidnet-client-admin/liquidnet-client-admin-web/src/main/resources/templates/zhengzai/kylin/refund/details.html
@@ -2,6 +2,110 @@
 <html lang="zh" xmlns:th="http://www.thymeleaf.org">
 <head>
    <th:block th:include="include :: header('退款详情')"/>
+    <style>
+        .showPhotoModal {
+            display: none;
+            height: 450px;
+            width: 640px;
+            z-index: 999;
+            position: fixed;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            margin: 10% auto;
+            background: #fff;
+            box-shadow: rgba(0, 0, 0, 0.3) 1px 1px 50px;
+        }
+        .showPhotoModal .top{
+            height: 40px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            border-bottom: 1px solid #ccc;
+        }
+        .showPhotoModal .top .title{
+            padding-left: 12px;
+            font-size: 16px;
+        }
+        .showPhotoModal .top .close{
+            padding-right: 12px;
+            font-size: 16px;
+            color: black;
+        }
+        .showPhotoModal .content {
+            height: 360px;
+            width: 100%;
+            border-bottom: 1px solid #ccc;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        .showPhotoModal .content img{
+            max-height: 360px;
+            /* width: 100%; */
+        }
+        .showPhotoModal .bottom {
+            height: 50px;
+            display: flex;
+            flex-direction: row-reverse;
+            align-items: center;
+        }
+        .showPhotoModal .bottom {
+            display: flex;
+            flex-direction: row-reverse;
+            align-items: center;
+        }
+        .showPhotoModal .bottom div span {
+            cursor: pointer;
+            font-size: 12px;
+            font-weight: normal;
+            margin: 0px 7px;
+            padding: 0px 15px;
+            color: rgb(255, 255, 255);
+            border: 1px solid rgb(0, 100, 182);
+            background: no-repeat rgb(0, 113, 206);
+            border-radius: 3px;
+            display: inline-block;
+            height: 30px;
+            line-height: 30px;
+            text-align: center;
+            vertical-align: middle;
+            text-decoration: none;
+            outline: none;
+            box-sizing: content-box;
+        }
+        .showPhotoModal .bottom div span:last-child {
+            font-size: 12px;
+            font-weight: normal;
+            margin: 0px 7px;
+            padding: 0px 15px;
+            color: black;
+            border: 1px solid #bbb;
+            background: no-repeat #fff;
+            border-radius: 3px;
+            display: inline-block;
+            height: 30px;
+            line-height: 30px;
+            text-align: center;
+            vertical-align: middle;
+            text-decoration: none;
+            outline: none;
+            box-sizing: content-box;
+        }
+        .modals {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            top: 0;
+            left: 0;
+            z-index: 888;
+            display: none;
+            overflow: hidden;
+            background-color: rgb(0, 0, 0);
+            opacity: 0.3;
+        }
+    </style>
 </head>
 <body class="white-bg">
 <div class="wrapper wrapper-content animated fadeInRight ibox-content">
@@ -73,7 +177,7 @@
                <tbody>
                <tr>
                    <td th:each="str : ${KylinOrderRefundsVo.picList}" style="float: left">
-                        <img th:src="${str}" width="25%">
+                        <img th:src="${str}" onclick="showPic(this)" width="25%">
                    </td>
                </tr>
                </tbody>
@@ -105,8 +209,45 @@
                </tbody>
            </table>
        </div>
+        <a id="downLoadImg" href="" download style="display: none;"></a>
+        <div class="modals"></div>
+        <div class="showPhotoModal">
+            <div class="top">
+                <div class="title">
+                    图片展示
+                </div>
+                <div class="close" onclick="closeModal()">
+                    x
+                </div>
+            </div>
+            <div class="content">
+                <img id="showPhoto" src="" alt="">
+            </div>
+            <div class="bottom">
+                <div>
+                    <span onclick="downloadImg()">下载</span>
+                    <span onclick="closeModal()">关闭</span>
+                </div>
+            </div>
+        </div>
    </form>
 </div>
 <th:block th:include="include :: footer"/>
 </body>
+<script>
+    function showPic(e) {
+        $(".showPhotoModal").show();
+        $(".modals").show();
+        $("#showPhoto").attr('src', $(e).attr('src'));
+    };
+    function downloadImg() {
+        $("#downLoadImg").attr('href', $("#showPhoto").attr('src')+'?response-content-type=application/octet-stream');
+        $("#downLoadImg")[0].click();
+        closeModal();
+    };
+    function closeModal() {
+        $(".showPhotoModal").hide();
+        $(".modals").hide();
+    };
+</script>
 </html>