<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>佳醫創照健康</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, minimum-scale=1.0, user-scalable=yes" />
    <link rel="icon" type="image/png" sizes="48x48" href="../../assets/images/icons/logo-icon.svg">
    <!--Header S-->
    <link rel="stylesheet" type="text/css" href="/assets/css/reset.css" />
    <link rel="stylesheet" type="text/css" href="/assets/css/animate.min.css" />
    <link rel="stylesheet" type="text/css" href="/assets/css/swiper-bundle.min.css" />
    <link rel="stylesheet" type="text/css" href="/assets/css/master.css" />
    <link rel="stylesheet" type="text/css" href="/assets/css/contact.css" />
    <script type="text/javascript" src="/assets/js/jquery-3.7.0.min.js"></script>
    <script type="text/javascript" src="/assets/js/vue.js"></script>
    <script type="text/javascript" src="/assets/js/moment-with-locales.min.js"></script>
    <script type="text/javascript" src="/assets/js/swiper-bundle.min.js"></script>
    <script type="text/javascript" src="/assets/js/font-awesome-5.13.0-all.min.js"></script>
    <script type="text/javascript" src="/assets/js/lazyload.min.js"></script>
    <script type="text/javascript" src="/assets/js/site.js"></script>
    <script type="text/javascript" src="/assets/js/uj.js?tf=202411271828"></script>
    <script type="text/javascript" src="/assets/js/frame.js"></script>

    <link rel="stylesheet" href="/assets/plugins/vue2-datepicker/index.css">
    <script src="/assets/plugins/vue2-datepicker/index.js"></script>
    <script src="/assets/plugins/vue2-datepicker/moment.min.js"></script>
    <style>
        .page-pay .font20 { font-size: 20px; font-weight: bold; }
        .page-pay .bar { font-size: 20px; }
        .page-pay .pay-box.atm .text-box { padding: 0; }
        .page-pay .pay-box.atm .text-box .info-box { display: inline-block; width: 49%; vertical-align: top; }
        .page-pay .pay-box.atm .order-box { margin: 10px 0; }
        .page-pay .pay-box.atm .btn-upload { font-weight: bold; padding: 0 20px; line-height: 50px; height: 50px; cursor: pointer; width: auto; font-size: 20px; }
        .page-pay .pay-box.atm input[type=file] { display: none; }
        .page-pay .pay-box.atm .btn-delete { font-size: 16px; background-color: #F8AE00; letter-spacing: 15px; text-indent: 15px; }
        .page-pay .pay-box.atm .btn-send { font-size: 20px; font-weight: bold; }
        .page-pay .pay-box.atm .order-box .receipt { display: inline-block; width: 30%; }
        @media (max-width: 768px) {
            .page-pay .pay-box.atm .text-box .info-box { display: block; width: 100%; }
            .page-pay .pay-box.atm .order-box .receipt { display: block; width: 100%; }
        }
        @media only screen and (max-width: 1024px) {
            .content-p-page { padding: 60px 0 0 0; }
        }
    </style>
    <!--Header E-->
</head>
<body>
    <header class="top-fixed gold-bar">
        <div class="default-w">
            <div class="m-top">
                <div class="logo"><a href="../index.html"><img src="../../assets/images/icons/ablc-logo.svg" /><em class="invisible-txt"></em></a></div>
                <div class="m-icon">
                    <div class="search">
                        <input type="text" placeholder="請輸入輔具名稱..." />
                        <a><img src="../../assets/images/icons/search.png" /></a>
                    </div>
                    <div class="cart">
                        <a><img src="../../assets/images/icons/cart.png" /></a>
                    </div>
                    <div class="member">
                        <a><img src="../../assets/images/icons/user-icon.png" /></a>
                    </div>
                </div>
            </div>
            <div class="menu-wrap">
                <div id="sub-menu" class="sub-menu"><a href="#" onclick="return false;">menu<span class="b-top"></span><span class="b-middle"></span><span class="b-bottom"></span><em class="t-btn"></em></a></div>
                <div class="menu-disp">
                    <ul class="ul-wrap">
                        <li>
                            <div class="search">
                                <input type="text" placeholder="請輸入輔具名稱..." />
                                <a><img src="../../assets/images/icons/search.png" /></a>
                            </div>
                        </li>
                        <li>
                            <div><a href="#" class="menu-lv1">我要租輔具</a></div>
                        </li>
                        <li>
                            <div><a href="../../Template/news/list.html" class="menu-lv1">最新消息</a></div>
                        </li>
                        <li>
                            <div><a href="#" class="menu-lv1">關於我們</a></div>
                        </li>
                        <li>
                            <div><a href="../Template/member/edit.html" class="menu-lv1">常見問題</a></div>
                        </li>
                        <li>
                            <div><a class="pr-0" href="../Template/member/edit.html" class="menu-lv1">出租排行榜</a></div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </header>
    <div id="content">
        <!--Content S-->
        <div class="default-w content-p-page page-pay">
            <div class="bar">付款資訊</div>
            <div class="pay-box atm">
                <div v-if="orderObj.enPayMethod == 100" class="text-box">
                    <div class="info-box">
                        <div>銀行代號：006 合作金庫銀行</div>
                        <div>分行代號：台北分行</div>
                        <div>戶名：佳醫健康事業股份有限公司</div>
                        <div>匯款帳號：<span class="font20">0540717-139725</span></div>
                        <div>應匯款金額：<span class="font20 red">$ {{orderObj.total.toLocaleString()}}</span></div>
                    </div>

                    <div class="info-box">
                        <ul class="order-box">
                            <li v-if="orderObj.enPaymentStatus == 100">
                                <a @click="triggerUpload('#fuReceipt')" class="pay-btn btn-upload">上傳匯款單或轉帳交易明細</a>
                                <input type="file" id="fuReceipt" accept=".gif, .jpg, .jpeg, .png, .webp" ref="fuReceipt" @change="onFileChange" />
                            </li>
                            <li v-else>轉帳交易明細</li>
                            <li v-for="(item, idx) in receipts" class="receipt">
                                <a :href="item.imgSrc" target="_blank"><img class="py-10" :src="item.imgSrc" style="width: 90%;" /></a>
                                <button class="pay-btn m-auto btn-delete" v-if="orderObj.enPaymentStatus == 100" @click="deleteReceipt(item, idx)" style="max-width: 90%;">刪除</button>
                            </li>
                        </ul>
                        <div class="my-20" v-if="orderObj.enPaymentStatus == 100"><a href="#" @click="saveData()" class="pay-btn m-auto btn-send">通知佳醫已匯款</a></div>
                    </div>
                </div>
                <div class="my-20" v-else-if="orderObj.enPayMethod == 200"><a href="#" onclick="alert('待串接刷卡機制.');" class="pay-btn m-auto">信用卡付款</a></div>
                <div class="my-20" v-else><div class="text-box">{{orderObj.payMethodString}}</div></div>
            </div>
        </div>
        <div class="default-w page-pay">
            <div class="bar">訂單資訊</div>
            <div class="pay-box">
                <div class="text-box">
                    <div>訂單編號：{{orderObj.orderNum}}</div>
                    <div>訂購時間：{{orderObj.createDatetime}}</div>

                    <div style="padding-top: 20px; font-weight: bold;">承租人</div>
                    <div>姓名：{{orderObj.tenantName}}</div>
                    <div>電子信箱：{{orderObj.email}}</div>
                    <div>手機號碼：{{orderObj.tenantMobile}}</div>
                    <div v-show="orderObj.tenantPhone != null && orderObj.tenantPhone.length > 0">電話：{{orderObj.tenantPhone}}</div>
                    <div>聯絡地址：{{orderObj.tenantCounty}}{{orderObj.tenantCity}}{{orderObj.tenantAddress}}</div>

                    <div style="padding-top: 20px; font-weight: bold;">使用人</div>
                    <div>姓名：{{orderObj.delivery.receiver}}</div>
                    <div>手機號碼：{{orderObj.delivery.mobile}}</div>
                    <div v-show="orderObj.delivery.phone != null && orderObj.delivery.phone.length > 0">電話：{{orderObj.delivery.phone}}</div>
                    <div>運送方式：<span v-for="s in ltShippingMethod" v-show="s.value == orderObj.enShippingMethod">{{s.name}}</span></div>
                    <div v-if="orderObj.enShippingMethod == 100">
                        取還門市：
                        <span v-for="item in ltStores" v-if="orderObj.delivery.storeId == item.id">{{item.shortName}}<span v-if="item.zipCode != null && item.zipCode != ''">  ({{item.county}}{{item.city}}{{item.address}})</span></span>
                    </div>
                    <div v-if="orderObj.enShippingMethod == 200">運送地址：{{orderObj.delivery.county}}{{orderObj.delivery.city}}{{orderObj.delivery.address}}</div>
                    <div v-if="orderObj.enShippingMethod == 250">工廠地點：桃園市龜山區文三三街22號之1號</div>
                </div>
                <div class="text-box">
                    <div style="padding-bottom: 10px;">租賃品項：</div>
                    <div class="order-box">
                        <table class="w-100">
                            <tbody>
                                <tr class="border" v-for="item in orderObj.details.list">
                                    <td class="py-2 py-10" style="width:60%;">
                                        <span class="font-bold">{{item.productName}}</span><br />
                                        <span><span>數量：{{item.qty}}</span>&nbsp;&nbsp;&nbsp;&nbsp;<span>天數：{{item.days}} 天</span></span><br />
                                        <span class="font-bold">租借日期：{{item.startDate}} ~ {{item.endDate}}</span><br />

                                        <div v-if="item.ltGifts != null && item.ltGifts.length > 0">
                                            <span class="font-bold">包含：</span>
                                            <span v-for="(pd, idx) in item.ltGifts">
                                                <span v-if="idx > 0">、</span>{{pd.productName}} x {{pd.qty}}
                                            </span>
                                        </div>
                                        <div v-if="item.ltSupplies != null && item.ltSupplies.length > 0">
                                            <span class="font-bold">加租：</span>
                                            <span v-for="(pd, idx) in item.ltSupplies">
                                                <span v-if="idx > 0">、</span>{{pd.productName}} <span v-show="pd.unitPrice > 0">${{pd.unitPrice * item.periodQty}} </span>x {{pd.qty}}
                                            </span>
                                        </div>
                                        <div v-if="item.ltAdditions != null && item.ltAdditions.length > 0">
                                            <span class="font-bold">加購：</span>
                                            <span v-for="(pd, idx) in item.ltAdditions">
                                                <span v-if="idx > 0">、</span>{{pd.productName}} ${{pd.unitPrice}} x {{pd.qty}}
                                            </span>
                                        </div>
                                    </td>
                                    <td class="font-bold py-10" style="width: 20%; vertical-align: middle;">
                                        <span>租金：{{item.subTotal.toLocaleString()}}</span><br />
                                        <span v-show="item.consumableFee > 0">耗材：{{(item.consumableFee * item.qty).toLocaleString()}}</span><br />
                                        <span v-show="item.deposit > 0">押金：{{(item.deposit * item.qty).toLocaleString()}}</span><br />
                                    </td>
                                    <td class="font-bold py-10" style="width:20%; vertical-align: middle;">
                                        <span>小計：${{item.total.toLocaleString()}}</span>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <table class="w-100" style="border-bottom: 1px solid #C5C5C5; ">
                            <tbody>
                                <tr class="border">
                                    <td style="width:60%;">&nbsp; </td>
                                    <td style="width:40%; vertical-align: bottom;">
                                        <table class="my-20 font-bold">
                                            <tbody>
                                                <tr>
                                                    <td>租金合計</td>
                                                    <td><span style="margin-left: 15px;">${{orderObj.details.subTotal.toLocaleString()}}</span></td>
                                                </tr>
                                                <tr v-show="orderObj.details.consumableFee > 0">
                                                    <td>耗材合計</td>
                                                    <td><span style="margin-left: 15px;">${{orderObj.details.consumableFee.toLocaleString()}}</span></td>
                                                </tr>
                                                <tr v-show="orderObj.details.deposit > 0">
                                                    <td>押金合計</td>
                                                    <td><span style="margin-left: 15px;">${{orderObj.details.deposit.toLocaleString()}}</span></td>
                                                </tr>
                                                <tr v-show="orderObj.details.suppliesTotal > 0">
                                                    <td>加租合計</td>
                                                    <td><span style="margin-left: 15px;">${{orderObj.details.suppliesTotal.toLocaleString()}}</span></td>
                                                </tr>
                                                <tr v-show="orderObj.details.additionsTotal > 0">
                                                    <td>加購合計</td>
                                                    <td><span style="margin-left: 15px;">${{orderObj.details.additionsTotal.toLocaleString()}}</span></td>
                                                </tr>
                                                <tr v-show="orderObj.details.freightage > 0">
                                                    <td>運費</td>
                                                    <td><span style="margin-left: 15px;">${{orderObj.details.freightage.toLocaleString()}}</span></td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <table class="w-100">
                            <tbody>
                                <tr>
                                    <td style="width:60%;">&nbsp;</td>
                                    <td style="width:40%;">
                                        <table class="my-20 font-bold">
                                            <tbody>
                                                <tr>
                                                    <td>總金額</td>
                                                    <td><span style="margin-left: 15px; font-size:25px;">${{orderObj.total.toLocaleString()}}</span></td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="my-20"></div>
                </div>
            </div>
            <div class="my-20"><a href="/member/member?t=order" class="pay-btn m-auto">前往訂單列表</a></div>
        </div>
        <!--Content E-->
    </div>
    <footer class="gold-bar">
        <div class="w1300">
            <div class="clear text-center">
                <div>
                    <ul class="footer-menu">
                        <li><a href="#">我要租輔具</a></li>
                        <li><a href="#">最新消息</a></li>
                        <li><a href="#">關於我們</a></li>
                        <li><a href="#">常見問題</a></li>
                        <li><a href="#">出租排行榜</a></li>
                    </ul>
                    <ul class="footer-menu">
                        <li><a>聯絡我們</a></li>
                        <li class="footer-t-sty">
                            <div>地址：新北市中和區中正路880號17樓</div>
                            <div>信箱：ULTRACLEAN@excelsior.com.tw</div>
                            <div>電話：03-328-3911</div>
                            <div>傳真：03-328-7588</div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="text text-center">
                <div class="g-line"></div>
                <div>Copyright ©2023 佳醫創照健康</div>
            </div>
        </div>
    </footer>

    <!--FinalScript S-->
    <script src="payment.js" type="module"></script>
    <!--FinalScript E-->
</body>
</html>