<!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/date.css" />
	<link rel="stylesheet" type="text/css" href="/assets/css/contact.css" />
	<link rel="stylesheet" type="text/css" href="/assets/css/member.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>
		.clearfix { clear: both; }
        .order-info-item { position: relative; }
        .order-info-item .order-info-item-action { position: absolute; right: 0; }
        .order-info-item .order-info-item-action ul li { margin: 0 0 0.5em 0; }
        .order-info-item .order-info-item-action ul li label.prettier-input { padding: 0; }
		.member-block .info .pd-wrap:first-child .text { color: #285F91; }
		.member-block .info .pd-wrap:first-child .text.red { color: #B02E0C; }
		.member-block .info .pd-wrap .pd-box { padding-right: 15px; }
        .member-block .info .pd-wrap .light-red { background-color: #FFF4F4; }
        .member-block .info .pd-wrap .light-blue { background-color: #F4FAFF; }
        .member-block .info .pd-wrap .light-gray { background-color: #D4D4D4; }
		
        .member-block .info .orders .list .order-details .info-middle-product .pd-box { display: block; }
        .member-block .info .orders .list .order-details .info-middle-product .pd-box:not(:last-child) { border-bottom: 1px solid #EFEFEF; }
        .member-block .info .orders .list .order-details .info-middle-product .pd-box .d-flex { display: block !important; }
        .member-block .info .orders .list .order-details .info-middle-product .pd-box .d-flex a { width: 10%; text-align: center; }
        .member-block .info .orders .list .order-details .info-middle-product .pd-box .d-flex a img { margin-bottom: 10px; }
        .member-block .info .orders .list .order-details .info-middle-product .pd-box .d-flex .pd-info { display: inline-block; width: 85%; }
        .member-block .info .orders .list .order-details .info-middle-product .pd-box .d-flex .pd-info .pd-wrap { display: block; }
        .member-block .info .orders .list .order-details .info-middle-product .pd-box .d-flex .pd-info .pd-wrap .li-wrap { display: block; }
        .member-block .info .orders .list .order-details .info-middle-product .pd-box .d-flex .pd-info .pd-wrap .li-wrap .add-pd-box { padding: 5px; }
        .member-block .info .orders .list .order-details .info-middle-product .pd-box .d-flex .pd-info .pd-wrap .li-wrap .add-pd-box a { width: 15%; padding: 0 10px; }
        .member-block .info .orders .list .order-details .info-middle-product .pd-box .d-flex .pd-info .pd-wrap .li-wrap .add-pd-box a img { margin: 0 auto; }
        .member-block .info .orders .list .order-details .info-middle-product .pd-box .d-flex .pd-info .pd-wrap .li-wrap .add-pd-box .text-wrap { display: inline-block; }
        .member-block .info .orders .list .order-details .info-middle-product .pd-box .d-flex .pd-info .pd-wrap .li-wrap .add-pd-box .text-wrap .price { margin-left: 20px; }
        .member-block .info .orders .list .order-details .info-bottom { border-top: 2px double #ccc;  }

        .popup-sty .card-body .detail-info ul li .products, .popup-sty .card-body .detail-info ul li .relations { display: block; vertical-align: top; }
        .popup-sty .card-body .detail-info ul li .relations .pd-wrap { display: flex; flex-wrap: wrap; }
        .popup-sty .card-body .detail-info ul li .relations .pd-wrap .relations-item { display: flex; width: calc((100% - 20px) / 2); padding: 5px; margin: 5px; border-radius: 5px; background-color: #F4FAFF; border: 1px solid #ccc; }
        .popup-sty .card-body .detail-info ul li .relations .pd-wrap .relations-item img { width: 50px; height: fit-content; }
        .popup-sty .card-body .detail-info ul li .relations .pd-wrap .relations-item .text-wrap { padding: 0 5px; font-size: 16px; line-height: 1.5; }
        .popup-sty .card-body .detail-info ul li .span-price { color: #285F91; font-size: 20px; }
        .popup-sty .card-body .detail-info ul.renew li:nth-child(2) { width: 38%; }
        .popup-sty .card-body .detail-info ul.renew li:nth-child(3) { width: 10%; }
        .popup-sty .card-body .detail-info ul.renew li:nth-child(4) { width: 40%; }
        .popup-sty .card-body .detail-info ul.renew li .renewstatus { border: solid 1px; padding: 5px 10px; text-align: center; border-radius: 5px; }
        .popup-sty .card-body .detail-info ul.renew li .renewstatus100 { color: #285F91; }
        .popup-sty .card-body .detail-info ul.renew li .renewstatus200 { color: #B02E0C; }
        .popup-sty .card-body .renew-order-info { padding: 10px 20px 5px; font-size: 20px; font-weight: bold; }
        .popup-sty .card-body .renew-order-info .recycle-info { width: 100%; max-width: 350px; margin: 10px auto 0 auto; padding: 10px; background-color: #EFEFEF; }
        .popup-sty .card-body .renew-order-info .list-box { display: flex; justify-content: space-between; }
        .popup-sty .card-body .renew-order-info .recycle-info .input-date input { background-color: #FFF; }
		.popup-sty .card-body .renew-order-info .renew-info { width: 100%; max-width: 350px; float: right; }
		
        .popup-sty .card-body .product { padding: 0; }
        .popup-sty .card-body .product .list-box.title { display: block; padding: 0 20px; margin-bottom: 10px; font-size: 28px; color: #285F91; border: 0; }
        .popup-sty .card-body .product .renew input { font-size: 20px; border: 0; }
        .popup-sty .card-body .product .renew .arrow-select { width: 100%; max-width: 195px; margin-right: 20px; position: relative; }
        .popup-sty .card-body .product .renew .arrow-select::after { content: ""; top: 9px; right: 15px; display: inline-block; border-style: solid; width: 15px; height: 15px; border-width: 1px 1px 0 0; border-color: #666; transform: matrix(-0.71, 0.71, -0.71, -0.71, 0, 0); position: absolute; }
        .popup-sty .card-body .product .renew select { width: 100% !important; font-size: 20px; border-radius: 0; border-color: #AAAAAA; cursor: pointer; }
		.popup-sty .card-body .product .renew .address { width: 100%; padding: 0 15px; margin-right: 24px; border: 1px solid #AAAAAA; border-radius: 0; }
        .popup-sty .card-body .product .renew textarea { width: 100%; border: 0; border: 1px solid #AAAAAA; }
        .popup-sty .card-body .product .renew .input-date input { border: 1px solid #AAAAAA; }

		.popup-sty .block-upload { width: 100%; display: block; padding: 5px 0 10px; text-align: left; }
        .popup-sty .block-upload .btn-upload { padding: 0 20px; line-height: 50px; height: 50px; }
        .popup-sty .block-upload .btn-upload:before { width: 0; height: 0; }
        .popup-sty .block-upload input[type=file] { display: none; }
		.popup-sty .block-receipts { display: flex; text-align: left; }
        .popup-sty .block-receipts .renew-receipts { margin: 10px 0; }
        .popup-sty .block-receipts .renew-receipts .btn-delete { padding: 0 20px; line-height: 50px; height: 50px; background-color: #F8AE00; margin: 10px 0; max-width: 90%; }
        .popup-sty .block-receipts .renew-receipts .btn-delete:before { width: 0; height: 0; }
        .popup-sty .block-receipts .renew-receipts .receipt { display: inline-block; width: 33%; }
        .popup-sty .block-receipts .renew-receipts .receipt img { margin: 0 auto; }
        
        @media only screen and (max-width: 767px) {
            .popup-sty .block .btn { display: inline-block; }
            .popup-sty .card-body .detail-info ul li img { width: 100%; }
            .popup-sty .card-body .detail-info ul li .relations .pd-wrap .relations-item { width: 100%; }
            .popup-sty .card-body .detail-info ul.renew li { width: 100% !important; }
            .popup-sty .card-body .detail-info ul.renew li:nth-child(1) { max-width: 200px; }
			.popup-sty .block-upload .btn-upload { margin: 10px auto; }
            .popup-sty .block-receipts .renew-receipts { margin: 5px 0; padding: 5px 10px; border: 1px solid #F1F0F0; }
            .popup-sty .block-receipts .renew-receipts .receipt { display: block; width: 100%; }
        }
	</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 id="div-main" class="default-w content-p-page">
			<div class="content">
				<div class="member-block" id="member-block">
					<div class="h-title">會員專區</div>
					<div class="bookmark">
						<ul>
							<li v-for="item in pageTitle"
								:class="{'selected' : item == bookmarkName }" :key="item"
								@click="clickBookMark(item)"><a>{{item}}</a></li>
						</ul>
					</div>
					<div class="info" :class="{ 'bg-color': bookmarkName !== '會員中心' && bookmarkName !== '訂單記錄' , 'border-b': bookmarkName !== '個人資訊' && bookmarkName !== '變更密碼'}">
						<!-- 會員中心 -->
                        <ul class="this" data-box="會員中心" :class="{'d-block': bookmarkName == '會員中心', 'd-none': bookmarkName != '會員中心'}">
                            <li class="pd-wrap" v-if="billboard.unpaids.length > 0">
                                <div class="text red">待付款</div>
                                <ul class="orderinfo">
                                    <li class="pd-box" v-for="order in billboard.unpaids">
                                        <div class="pd-info">
                                            <div v-for="item in order.details" class="items">
                                                <a :href="'/product/data/' + item.productId"><img class="img" :src="item.coverImage" /></a>
                                                <ul>
                                                    <li>{{item.productName}}</li>
                                                    <li>數量：{{item.qty}}</li>
                                                    <li>{{item.startDateString}} ~ {{item.endDateString}}</li>
                                                </ul>
                                            </div>
                                        </div>
										<div class="btn-box">
											<a @click="getOrderDetail(order.id)">查看訂單</a>
											<a class="btn-go-pay" v-if="order.enPayMethod < 300" :href="'/payment?id='+ order.id">前往付款</a>
											<a class="btn-cash" v-else>{{order.payMethodString}}</a>
											<div class="text" style="text-align: center; white-space: nowrap;">{{order.tenantName}}/{{order.deliveryReceiver}}</div>
										</div>
                                    </li>
                                </ul>
                            </li>
                            <li class="pd-wrap" v-if="billboard.expirings.length > 0">
                                <div class="text red">即將結束租用品項</div>
                                <ul class="orderinfo light-red">
                                    <li class="pd-box" v-for="order in billboard.expirings">
                                        <div class="pd-info">
                                            <div v-for="item in order.details" class="items">
                                                <a @click="renewOrder(order, 200)"><img class="img" :src="item.coverImage" /></a>
                                                <ul>
                                                    <li>{{item.productName}}</li>
                                                    <li>數量：{{item.qty}}</li>
                                                    <li>{{item.startDateString}} ~ {{item.endDateString}}</li>
                                                </ul>
                                            </div>
                                        </div>
										<div class="btn-box">
											<a @click="getOrderDetail(order.id)">查看訂單</a>
											<a v-if="order.showRenewBtn" @click="renewOrder(order, 200)" class="btn-plus">是否續租？</a>
											<div class="text" style="text-align: center; white-space: nowrap;">{{order.tenantName}}/{{order.deliveryReceiver}}</div>
										</div>
                                    </li>
                                </ul>
                            </li>
                            <li class="pd-wrap" v-if="billboard.returnables.length > 0">
                                <div class="text">轉退租清單</div>
                                <ul class="orderinfo light-gray">
                                    <li class="pd-box" v-for="order in billboard.returnables">
                                        <div class="pd-info">
                                            <div v-for="item in order.details" class="items">
                                                <a @click="getOrderDetail(order.id)"><img class="img" :src="item.coverImage" /></a>
                                                <ul>
                                                    <li>{{item.productName}}</li>
                                                    <li>數量：{{item.qty}}</li>
                                                    <li>{{item.startDateString}} ~ {{item.endDateString}}</li>
                                                </ul>
                                            </div>
                                        </div>
										<div class="btn-box">
											<a @click="getOrderDetail(order.id)">查看訂單</a>
											<a v-if="order.showRenewBtn" @click="renewOrder(order, 200)" class="btn-plus">是否續租？</a>
											<div class="text" style="text-align: center; white-space: nowrap;">{{order.tenantName}}/{{order.deliveryReceiver}}</div>
										</div>
                                    </li>
                                </ul>
                            </li>
                            <li class="pd-wrap">
                                <div class="text">正在租用中品項</div>
                                <ul class="orderinfo light-blue" v-if="billboard.renteds.length > 0">
                                    <li class="pd-box" v-for="order in billboard.renteds">
                                        <div class="pd-info">
                                            <div v-for="item in order.details" class="items">
                                                <a @click="renewOrder(order, 100)"><img class="img" :src="item.coverImage" /></a>
                                                <ul>
                                                    <li>{{item.productName}}</li>
                                                    <li>數量：{{item.qty}}</li>
                                                    <li>{{item.startDateString}} ~ {{item.endDateString}}</li>
                                                </ul>
                                            </div>
                                        </div>
										<div class="btn-box">
											<a @click="getOrderDetail(order.id)">查看訂單</a>
											<a v-if="order.showRenewBtn" @click="renewOrder(order, 100)" class="btn-plus">是否續租？</a>
											<div class="text" style="text-align: center; white-space: nowrap;">{{order.tenantName}}/{{order.deliveryReceiver}}</div>
										</div>
                                    </li>
                                </ul>
                                <div v-else>無</div>
                            </li>
                        </ul>
						<!-- 個人資訊 -->
                        <ul class="personal this" data-box="個人資訊" :class="{'d-block': bookmarkName == '個人資訊', 'd-none': bookmarkName != '個人資訊'}">
                            <li class="input-wrap">
                                <div class="text">姓名：<span class="red">*</span></div>
                                <input type="text" v-model="userPanel.user.name" />
                            </li>
                            <li class="input-wrap">
                                <div class="text">手機號碼：</div>
                                <input type="number" :value="userPanel.user.username" disabled />
                            </li>
                            <li class="input-wrap">
                                <div class="text">電話：</div>
                                <input type="number" v-model="userPanel.user.phone" />
                            </li>
                            <li class="input-wrap">
                                <div class="text">手機條碼載具：</div>
                                <input type="tel" placeholder="請輸入...例:/123AAAA" v-model="userPanel.user.mobileBarcode" maxlength="8" />
                            </li>
                            <li class="input-wrap">
                                <div class="text">電子信箱：</div>
                                <input type="email" v-model="userPanel.user.email" />
                            </li>
                            <li class="address-sty">
                                <div class="text">地址：<span class="red">*</span></div>
                                <div id="twzipcode" class="wrap-sty">
                                    <div class="arrow-select">
                                        <select data-role="county" class="form-control" v-model="userPanel.user.county" ref="county"></select>
                                    </div>
                                    <div class="arrow-select">
                                        <select data-role="district" class="form-control" v-model="userPanel.user.city" @change="changeCity('user')"></select>
                                        <input type="hidden" data-role="zipcode" />
                                    </div>
                                    <input class="address" type="text" placeholder="地址..." v-model="userPanel.user.address" ref="address" />
                                </div>
                            </li>
                            <li class="btn m-btn">
                                <div class="block">
                                    <!--<a class="logout" @click="Logout()">會員登出</a>-->
                                    <div class="btn m-auto btn-r-arrow" @click="saveUser()"><a>儲存</a></div>
                                </div>
                            </li>
                        </ul>
						<!-- 訂單記錄 -->
						<ul class="orders this" data-box="訂單記錄" :class="{'d-block': bookmarkName == '訂單記錄', 'd-none': bookmarkName != '訂單記錄'}">
							<li class="state">
								<ul>
									<li :class="{'selected' : orderPanel.query.status == -1 }" :key="-1" @click="clickStates(-1)"><a>全部訂單({{orderPanel.orderCount.total}})</a></li>
									<li v-for="item in orderPanel.ltOrderStatuss" :class="{'selected' : item.value == orderPanel.query.status }"
										:key="item.value" @click="clickStates(item.value)">
										<a>
											{{item.name}}
											<span v-for="cnt in orderPanel.orderCount.list" v-if="cnt.status == item.value">({{cnt.count}})</span>
										</a>
									</li>
								</ul>
							</li>
							<li class="list">
								<ul>
									<li v-if="orderPanel.orderObj === null" class="title">訂單明細<span class="s-tip">(只顯示兩年內的訂單明細)</span></li>
									<li v-if="orderPanel.orderObj !== null" class="back-to-list"><button @click="backToOrderList"><<  返回列表</button></li>
									<li v-if="orderPanel.orderObj === null" class="order-box" :style="{'background': item.enStatus == 9999 ? '#F9F9F9': '' }"
										v-for="item in orderPanel.orders.list">
										<div class="order-info-item">
											<ul class="states-list">
												<li>
													<ul v-if="item.enStatus != 500" class="list">
														<li v-for="s in orderPanel.ltOrderStatuss" v-if="s.value != 500" class="s-block" :class="{selected: item.enStatus === s.value}">{{s.name}}</li>
													</ul>
													<ul v-if="item.enStatus == 500" class="list">
														<li class="s-block s-cancel">{{item.statusString}}</li>
													</ul>
												</li>
											</ul>
											<div class="order-info-item-action">
												<ul class="states-list">
													<li>
														<ul>
															<li class="order-info"><a href="#" @click="getOrderDetail(item.id)">查看明細 ></a></li>
														</ul>
													</li>
												</ul>
											</div>
											<ul class="info-top">
												<li class="black">訂單編號：{{item.orderNum}}</li>
												<li>日期：{{item.createDatetime}}</li>
											</ul>
											<div class="order-info-item-action">
												<ul>
													<li v-if="item.enStatus == 200 && item.enPaymentStatus == 100 && item.enPayMethod < 300"><a class="btn-color" :href="'/payment?id='+ item.id">前往付款</a></li>
													<li v-if="item.contracts > 0"><a class="btn-print" :href="'@contract?oid=' + item.id" target="_blank">合約下載</a></li>
												</ul>
											</div>
											<ul class="info-bottom">
												<li>使用人：{{item.deliveryReceiver}}</li>
												<li>運送方式：{{item.shippingMethodString}}</li>
												<li>
													<ul class="cost-box info-middle-product">
														<li class="pd-box" v-for="detail in item.details.list">
															<a href="#" @click="getOrderDetail(item.id)"><img class="img" :src="detail.coverImage" /></a>
														</li>
													</ul>
												</li>
											</ul>
										</div>
									</li>
									<li v-if="orderPanel.orders.list == null || orderPanel.orders.list.length == 0" class="order-box">無訂單資料</li>
									<li v-if="orderPanel.orderObj === null">
										<div class="pagination" v-if="orderPanel.orders.pager.totalPage >1 ">
											<span class="page-item" :class="{disabled: orderPanel.query.currentPage <= 1}"><a href="#member-block" class="arrow-btn" @click="goPage(orderPanel.query.currentPage - 1);"><img src="../../assets/images/icons/arrow-prev.svg" /></a></span>
											<span v-for="n in orderPanel.orders.pager.endPage" v-if="n >= orderPanel.orders.pager.startPage" class="page-item" :class="{active: n == orderPanel.query.currentPage }"><a href="#member-block" class="page-num" @click="goPage(n);">{{n}}</a></span>
											<span class="page-item" :class="{disabled: orderPanel.orders.pager.totalPage <= orderPanel.orders.pager.currentPage}"><a href="#member-block" class="arrow-btn" @click="goPage(orderPanel.query.currentPage + 1);"><img src="../../assets/images/icons/arrow-next.svg" /></a></span>
										</div>
									</li>
									<!-- 訂單明細 -->
									<li class="order-box order-details" v-if="orderPanel.orderObj !== null">
										<ul class="states-list">
											<li>
												<ul class="list">
													<li class="s-block selected">{{orderPanel.orderObj.statusString}}</li>
												</ul>
											</li>
										</ul>
										<div class="order-info-item">
											<ul class="info-top">
												<li class="black">訂單編號：{{orderPanel.orderObj.orderNum}}</li>
												<li>日期：{{orderPanel.orderObj.createDatetime}}</li>
											</ul>
											<div class="order-info-item-action">
												<ul>
													<li v-if="orderPanel.orderObj.enStatus == 200 && orderPanel.orderObj.enPaymentStatus == 100 && orderPanel.orderObj.enPayMethod < 300"><a class="btn-color" :href="'/payment?id='+ orderPanel.orderObj.id">前往付款</a></li>
													<li v-if="orderPanel.orderObj.contracts > 0"><a class="btn-print" :href="'@contract?oid=' + orderPanel.orderObj.id" target="_blank">合約下載</a></li>
												</ul>
											</div>
											<ul class="info-middle">
												<li class="black">承租人</li>
												<li>姓名：{{orderPanel.orderObj.tenantName}}</li>
												<li>電子信箱：{{orderPanel.orderObj.email}}</li>
												<li>手機號碼：{{orderPanel.orderObj.tenantMobile}}</li>
												<li v-show="orderPanel.orderObj.tenantPhone != null && orderPanel.orderObj.tenantPhone.length > 0">電話：{{orderPanel.orderObj.tenantPhone}}</li>
												<li>聯絡地址：{{orderPanel.orderObj.tenantCounty}}{{orderPanel.orderObj.tenantCity}}{{orderPanel.orderObj.tenantAddress}}</li>
												<li>付款方式：{{orderPanel.orderObj.payMethodString}}</li>
											</ul>
											<ul class="info-middle">
												<li class="black">使用人</li>
												<li>
													姓名：{{orderPanel.orderObj.delivery.receiver}}
													<span v-show="orderPanel.orderObj.tenantRelation != null && orderPanel.orderObj.tenantRelation.length > 0">（<span v-if="orderPanel.orderObj.tenantRelation != '同承租人'">為承租人之</span>{{orderPanel.orderObj.tenantRelation}}）</span>
												</li>
												<li>手機號碼：{{orderPanel.orderObj.delivery.mobile}}</li>
												<li v-show="orderPanel.orderObj.delivery.phone != null && orderPanel.orderObj.delivery.phone.length > 0">電話：{{orderPanel.orderObj.delivery.phone}}</li>
												<li>運送方式：{{orderPanel.orderObj.shippingMethodString}}</li>
												<li v-if="orderPanel.orderObj.enShippingMethod == 250">工廠地點：桃園市龜山區文三三街22號之1號</li>
												<li v-if="orderPanel.orderObj.enShippingMethod == 200">運送地址：{{orderPanel.orderObj.delivery.county}}{{orderPanel.orderObj.delivery.city}}{{orderPanel.orderObj.delivery.address}}</li>
												<li v-if="orderPanel.orderObj.enShippingMethod == 100">
													取還門市：
													<span v-for="item in orderPanel.ltStores" v-if="orderPanel.orderObj.delivery.storeId == item.id">{{item.shortName}}<span v-if="item.zipCode != null && item.zipCode != ''">  ({{item.county}}{{item.city}}{{item.address}})</span></span>
												</li>
												<li v-if="orderPanel.orderObj.remark != null && orderPanel.orderObj.remark.length > 0">備註：<span v-html="orderPanel.orderObj.remark.replace(/\n/g,'<br />')"></span></li>
											</ul>
											<ul class="info-middle">
												<li class="black">發票</li>
												<li class="blue" v-if="orderPanel.orderObj.enSource != 200 && orderPanel.orderObj.enStatus > 100">付款狀態：{{orderPanel.orderObj.paymentStatusString}}</li>
												<li v-show="orderPanel.orderObj.receipts != null && orderPanel.orderObj.receipts.length > 0">
													匯款單或轉帳交易明細：
													<ul>
														<li v-for="(item, idx) in orderPanel.orderObj.receipts" style="display: inline-block; width: 30%;">
															<a :href="item.imgSrc" target="_blank"><img class="py-10" :src="item.imgSrc" style="width: 90%;" /></a>
														</li>
													</ul>
												</li>
												<li>{{orderPanel.orderObj.invoice.invoiceTypeString}} &nbsp;&nbsp;&nbsp;&nbsp;{{orderPanel.orderObj.invoice.billTypeString}}</li>
												<li v-show="orderPanel.orderObj.invoice.enInvoiceType === 200">統一編號：{{orderPanel.orderObj.invoice.invoiceTaxNo}}</li>
												<li v-show="orderPanel.orderObj.invoice.enInvoiceType === 200">公司名稱：{{orderPanel.orderObj.invoice.invoiceTitle}}</li>
												<li v-if="orderPanel.orderObj.invoice.enBillType === 100">收件人姓名：{{orderPanel.orderObj.invoice.receiver}}</li>
												<li v-if="orderPanel.orderObj.invoice.enBillType === 100">收件人電話：{{orderPanel.orderObj.invoice.mobile}}</li>
												<li v-if="orderPanel.orderObj.invoice.enBillType === 100">寄送地址：{{orderPanel.orderObj.invoice.county}}{{orderPanel.orderObj.invoice.city}}{{orderPanel.orderObj.invoice.address}}</li>
												<li v-if="orderPanel.orderObj.invoice.enBillType === 200">手機條碼載具：{{orderPanel.orderObj.invoice.mobileBarcode}}</li>
											</ul>
											<ul class="info-middle-product">
												<li class="pd-box" v-for="item in orderPanel.orderObj.details.list">
													<div class="d-flex">
														<a :href="'/product/data/' + item.productId">
															<img class="img" :src="item.coverImage" />
															<div class="black">{{item.statusString}}</div>
														</a>
														<div class="pd-info">
															<div>{{item.productName}}</div>
															<div v-if="item.seatWidthAttrId != null && item.seatWidthAttrId> 0">座寬：{{item.seatWidthAttrName}}</div>
															<div><span>數量：{{item.qty}}</span>&nbsp;&nbsp;&nbsp;&nbsp;<span>天數：{{item.days}} 天 ({{item.periodTypeString}})</span></div>
															<div>租借日期：{{item.startDate}} ~ {{item.endDate}}</div>
															<div class="black"><span>租金：${{item.subTotal.toLocaleString()}}</span><span v-show="item.consumableFee > 0"> / 耗材：${{(item.consumableFee * item.qty).toLocaleString()}}</span><span v-show="item.deposit > 0"> / 押金：${{(item.deposit * item.qty).toLocaleString()}}</span></div>

															<div v-if="item.ltGifts != null && item.ltGifts.length > 0">
																<div class="text">包含：</div>
																<ul class="pd-wrap">
																	<li class="li-wrap">
																		<div class="add-pd-box" v-for="pd in item.ltGifts">
																			<a v-if="pd.coverImage != null && pd.coverImage != ''"><img :src="pd.coverImage"></a>
																			<div class="text-wrap">
																				<div>{{pd.productName}} x {{pd.qty}}</div>
																				<div class="black" v-if="pd.enStatus == 9999">已出貨</div>
																				<div class="black" v-else>{{pd.statusString}}</div>
																			</div>
																		</div>
																	</li>
																</ul>
															</div>
															<div v-if="item.ltSupplies != null && item.ltSupplies.length > 0">
																<div class="text">加租：</div>
																<ul class="pd-wrap">
																	<li class="li-wrap">
																		<div class="add-pd-box" v-for="pd in item.ltSupplies">
																			<a v-if="pd.coverImage != null && pd.coverImage != ''"><img :src="pd.coverImage"></a>
																			<div class="text-wrap">
																				<div>
																					{{pd.productName}} x {{pd.qty}}
																					<span class="price black" v-show="pd.unitPrice > 0"><span>加租：${{(pd.unitPrice * item.periodQty * pd.qty).toLocaleString()}}</span></span>
																				</div>
																				<div class="black" v-if="pd.enStatus == 9999">已出貨</div>
																				<div class="black" v-else>{{pd.statusString}}</div>
																			</div>
																		</div>
																	</li>
																</ul>
															</div>
															<div v-if="item.ltAdditions != null && item.ltAdditions.length > 0">
																<div class="text">加購：</div>
																<ul class="pd-wrap">
																	<li class="li-wrap">
																		<div class="add-pd-box" v-for="pd in item.ltAdditions">
																			<a v-if="pd.coverImage != null && pd.coverImage != ''"><img :src="pd.coverImage"></a>
																			<div class="text-wrap">
																				<div>
																					{{pd.productName}} x {{pd.qty}}
																					<span class="price black"><span>加購：${{(pd.unitPrice * pd.qty).toLocaleString()}}</span></span>
																				</div>
																				<div class="black" v-if="pd.enStatus == 9999">已出貨</div>
																				<div class="black" v-else>{{pd.statusString}}</div>
																			</div>
																		</div>
																	</li>
																</ul>
															</div>
														</div>
													</div>
												</li>
											</ul>
											<ul class="info-bottom">
												<li>
													<ul class="cost-box">
														<li><div>租金</div><div class="pt-10 black">${{orderPanel.orderObj.details.subTotal.toLocaleString()}}</div></li>
														<li v-show="orderPanel.orderObj.details.consumableFee > 0" style="font-size:28px;">+</li>
														<li v-show="orderPanel.orderObj.details.consumableFee > 0"><div>耗材費</div><div class="pt-10 black">${{orderPanel.orderObj.details.consumableFee.toLocaleString()}}</div></li>
														<li v-show="orderPanel.orderObj.details.deposit > 0" style="font-size:28px;">+</li>
														<li v-show="orderPanel.orderObj.details.deposit > 0"><div>押金</div><div class="pt-10 black">${{orderPanel.orderObj.details.deposit.toLocaleString()}}</div></li>
														<li style="font-size:28px;">+</li>
														<li><div>運費</div><div class="pt-10 black">${{orderPanel.orderObj.details.freightage.toLocaleString()}}</div></li>
														<li v-show="orderPanel.orderObj.details.suppliesTotal > 0" style="font-size:28px;">+</li>
														<li v-show="orderPanel.orderObj.details.suppliesTotal > 0"><div>加租</div><div class="pt-10 black">${{orderPanel.orderObj.details.suppliesTotal.toLocaleString()}}</div></li>
														<li v-show="orderPanel.orderObj.details.additionsTotal > 0" style="font-size:28px;">+</li>
														<li v-show="orderPanel.orderObj.details.additionsTotal > 0"><div>加購</div><div class="pt-10 black">${{orderPanel.orderObj.details.additionsTotal.toLocaleString()}}</div></li>
														<li style="font-size:28px;">=</li>
														<li><div>總計</div><div class="pt-10 black">${{orderPanel.orderObj.total.toLocaleString()}}</div></li>
													</ul>
												</li>
											</ul>
										</div>
									</li>
								</ul>
							</li>
						</ul>
						<!-- 變更密碼 -->
						<ul class="change-password this" data-box="變更密碼" :class="{'d-block': bookmarkName == '變更密碼', 'd-none': bookmarkName != '變更密碼'}">
							<li class="input-wrap pw-eye">
								<div class="text">新密碼：</div>
								<input id="pwd1" type="password" placeholder="密碼為6-15碼(限英數字)" v-model="userPanel.user.password2" ref="password2" />
								<span class="password-toggle-icon" @click="pwShowHide('pwd1')">
									<img v-show="showPwd1 == false" src="/assets/images/icons/eye-closed-svgrepo-com.svg" />
									<img v-show="showPwd1 == true" src="/assets/images/icons/eye-svgrepo-com.svg" />
								</span>
							</li>
							<li class="input-wrap pw-eye">
								<div class="text">再次輸入新密碼：</div>
								<input id="pwd2" type="password" placeholder="密碼為6-15碼(限英數字)" v-model="userPanel.user.confirmpwd" ref="confirmpwd" @keypress="keychange($event);" />
								<span class="password-toggle-icon" @click="pwShowHide('pwd2')">
									<img v-show="showPwd2 == false" src="/assets/images/icons/eye-closed-svgrepo-com.svg" />
									<img v-show="showPwd2 == true" src="/assets/images/icons/eye-svgrepo-com.svg" />
								</span>
							</li>
							<li class="btn m-btn">
								<div class="block">
									<div class="btn m-auto btn-r-arrow" @click="resetPwd()"><a>儲存</a></div>
								</div>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>

		<!--popup-->
		<div style="font-weight:normal;" :class="{'show': openPopup, 'd-none': !openPopup}">
			<div class="popup-sty">
				<div class="p-block">
					<div id="p-paper" class="p-paper">
						<div class="card">
							<div class="x-btn"><a @click="openPopup = false;"><img src="/assets/images/icons/icon_14.svg" /></a></div>
							<div class="card-body">
								<div class="orderinfo">
									<ul>
										<li v-if="popupData.orderObj.enRentedFor == 100">{{popupData.orderObj.delivery.receiver}}</li>
										<li v-if="popupData.orderObj.enRentedFor == 100">{{popupData.orderObj.delivery.mobile}}</li>
										<li>{{popupData.orderObj.shippingMethodString}}</li>
										<li v-if="popupData.orderObj.enShippingMethod == 200">{{popupData.orderObj.delivery.county}}{{popupData.orderObj.delivery.city}}{{popupData.orderObj.delivery.address}}</li>
										<li>{{popupData.orderObj.orderNum}}</li>
									</ul>
								</div>
								<div v-show="popupData.step == 1">
									<div class="detail-info">
										<ul v-for="item in popupData.renewObj.details" class="prod">
											<li>
												<label><input type="radio" :name="'rbrenew' + item.id" @click="changeRenewStatus(item, 100);" :checked="item.enRenewStatus == 100" /><span>續租</span></label>
												<label><input type="radio" :name="'rbrenew' + item.id" @click="changeRenewStatus(item, 200);" :checked="item.enRenewStatus == 200" /><span>不續組，歸還</span></label>
											</li>
											<li><img :src="item.coverImage" /></li>
											<li class="left">
												<div class="products">
													{{item.productName}}
													<div v-if="item.seatWidthAttrId != null && item.seatWidthAttrId > 0">座寬：{{item.seatWidthAttrName}}</div>
													<div>租借數量：{{item.qty}}</div>
													<div>租借日期：{{item.startDateString}} ~ {{item.endDateString}}</div>
												</div>
												<div class="relations">
													<div class="list-box" v-if="item.ltGifts !== null && item.ltGifts.length > 0">
														包含品項：
														<div class="pd-wrap">
															<div v-for="(obj, idx) in item.ltGifts" class="relations-item">
																<img v-if="obj.coverImage != null && obj.coverImage.length > 0" :src="obj.coverImage" />
																<div class="text-wrap">
																	<div>{{obj.productName}}</div>
																	<div>數量：{{obj.qty}}</div>
																</div>
															</div>
														</div>
													</div>
													<div class="list-box" v-if="item.ltSupplies !== null && item.ltSupplies.length > 0">
														加租品項：
														<div class="pd-wrap">
															<div v-for="(obj, idx) in item.ltSupplies" class="relations-item">
																<img v-if="obj.coverImage != null && obj.coverImage.length > 0" :src="obj.coverImage" />
																<div class="text-wrap">
																	<div>{{obj.productName}}</div>
																	<div>數量：{{obj.qty}}</div>
																</div>
															</div>
														</div>
													</div>
												</div>
											</li>
											<li>
												<label><input type="radio" :name="'rbrenew-m-' + item.id" @click="changeRenewStatus(item, 100);" :checked="item.enRenewStatus == 100" /><span>續租</span></label>
												<label><input type="radio" :name="'rbrenew-m-' + item.id" @click="changeRenewStatus(item, 200);" :checked="item.enRenewStatus == 200" /><span>不續組，歸還</span></label>
											</li>
										</ul>
									</div>
									<ul class="block">
										<li class="btn btn-renew" @click="changeRenewStatusAll(100);"><a>全部續租</a></li>
										<li class="btn btn-return" @click="changeRenewStatusAll(200);"><a>不續租，全部歸還</a></li>
										<li class="btn m-auto btn-r-arrow" @click="renewStep(2);"><a>下一步</a></li>
									</ul>
								</div>
								<div v-show="popupData.step == 2">
									<div class="detail-info">
										<ul v-for="item in popupData.renewObj.details" class="renew">
											<li><img :src="item.coverImage" /></li>
											<li class="left">
												<div class="products">
													{{item.productName}}
													<div v-if="item.seatWidthAttrId != null && item.seatWidthAttrId > 0">座寬：{{item.seatWidthAttrName}}</div>
													<div>數量：{{item.qty}}</div>
													<div>租借日期：{{item.startDateString}} ~ {{item.endDateString}}</div>
												</div>
												<div class="relations">
													<div class="list-box" v-if="item.ltGifts !== null && item.ltGifts.length > 0">
														包含品項：
														<div class="pd-wrap">
															<div v-for="(obj, idx) in item.ltGifts" class="relations-item">
																<img v-if="obj.coverImage != null && obj.coverImage.length > 0" :src="obj.coverImage" />
																<div class="text-wrap">
																	<div>{{obj.productName}}</div>
																	<div>數量：{{obj.qty}}</div>
																</div>
															</div>
														</div>
													</div>
													<div class="list-box" v-if="item.ltSupplies !== null && item.ltSupplies.length > 0">
														加租品項：
														<div class="pd-wrap">
															<div v-for="(obj, idx) in item.ltSupplies" class="relations-item">
																<img v-if="obj.coverImage != null && obj.coverImage.length > 0" :src="obj.coverImage" />
																<div class="text-wrap">
																	<div>{{obj.productName}}</div>
																	<div>數量：{{obj.qty}}</div>
																</div>
															</div>
														</div>
													</div>
												</div>
											</li>
											<li class="left">
												<div v-if="item.enRenewStatus == 100" class="renewstatus renewstatus100">續組</div>
												<div v-if="item.enRenewStatus == 200" class="renewstatus renewstatus200">歸還</div>
											</li>
											<li class="left">
												<div class="input-date" v-show="item.enRenewStatus == 100">
													<div>計費方式：{{item.periodTypeString}}計費</div>
													續租日期：{{item.renewStartDate}} ~
													<date-picker value-type="YYYY-MM-DD"
																 format="YYYY-MM-DD"
																 placeholder="結束時間..."
																 :default-value="new Date()"
																 type="date"
																 :input-attr="{name: 'endDate', ref: 'endDate'}"
																 :not-before="item.renewStartDate"
																 :disabled-date="disabledEndDate"
																 @change="countRenewDays(item)"
																 v-model="item.renewEndDate">
													</date-picker>
												</div>
												<div v-show="item.enRenewStatus == 100">
													<div><span>天數：{{item.renewDays}}天({{item.periodTypeString}})</span></div>
													<div class="span-price"><span>租金：</span> <span>${{item.unitPrice.toLocaleString()}}</span> <span v-show="item.renewPeriodQty > 1"> x {{item.renewPeriodQty}}</span> <span v-show="item.qty > 1"> x {{item.qty}}</span></div>
													<div class="span-price" v-show="item.renewSuppliesTotal > 0"><span>加租：</span> <span>${{item.renewSuppliesTotal.toLocaleString()}}</span></div>
													<div class="span-price"><span>小計：</span> <span>${{item.renewTotal.toLocaleString()}}</span></div>
												</div>
												<div v-show="item.renewTakebackFreightage > 0">
													<div class="span-price"><span>回收運費：</span> <span>${{item.renewTakebackFreightage.toLocaleString()}}</span></div>
												</div>
											</li>
										</ul>
									</div>

                                    <div class="renew-order-info">
                                        <div class="recycle-info" v-show="popupData.renewObj.isRecycle && popupData.renewObj.total == 0">
                                            <div class="list-box">
                                                退租申請日：
                                                <div class="input-date">
                                                    <date-picker value-type="YYYY-MM-DD"
                                                                 format="YYYY-MM-DD"
                                                                 placeholder="可收件日..."
                                                                 :default-value="new Date()"
                                                                 type="date"
                                                                 :input-attr="{name: 'applyDate', ref: 'applyDate'}"
                                                                 :disabled-date="disabledApplyDate"
                                                                 v-model="popupData.renewObj.applyDate">
                                                    </date-picker>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="renew-info" v-show="popupData.renewObj.total > 0">
											<div class="list-box" v-show="popupData.renewObj.freightage > 0"><span>運費：</span> $ {{popupData.renewObj.freightage.toLocaleString()}}</div>
											<div class="list-box" v-show="popupData.renewObj.subTotal > 0"><span>租金合計：</span> $ {{popupData.renewObj.subTotal.toLocaleString()}}</div>
											<div class="list-box" v-show="popupData.renewObj.suppliesTotal > 0"><span>加租合計：</span> $ {{popupData.renewObj.suppliesTotal.toLocaleString()}}</div>
                                            <div class="list-box" v-show="popupData.renewObj.isRenew"><span>品項總計：</span><span class="red"> $ {{popupData.renewObj.total.toLocaleString()}}</span></div>
                                        </div>
                                    </div>
									<div class="clearfix"></div>

									<ul class="block">
										<li class="btn m-auto btn-r-arrow step" @click="renewStep(1);"><a>上一步</a></li>
										<li class="btn m-auto btn-r-arrow" v-if="popupData.renewObj.total > 0" @click="renewStep(3);"><a>下一步</a></li>
										<li class="btn m-auto btn-r-arrow x-hidden" v-else @click="sendRenewOrder()"><a>送出訂單</a></li>
									</ul>
								</div>
								<div v-show="popupData.step == 3">
									<div class="product" style="padding-top:10px">
										<div class="detail">
											<div class="renew" v-show="popupData.renewObj.isRecycle">
												<div class="list-box title">歸還</div>
												<div class="list-box radio-sty">
													<span>退租申請日：<span class="red">*</span></span>
													<nav>
														<div class="input-date">
															<date-picker value-type="YYYY-MM-DD"
																		 format="YYYY-MM-DD"
																		 placeholder="可收件日..."
																		 :default-value="new Date()"
																		 type="date"
																		 :input-attr="{name: 'applyDate', ref: 'applyDate'}"
																		 :disabled-date="disabledApplyDate"
																		 v-model="popupData.renewObj.applyDate">
															</date-picker>
														</div>
													</nav>
													(可收件日)
												</div>
											</div>
											<div class="renew" v-show="popupData.renewObj.total > 0">
												<div class="list-box title">付款資訊</div>
												<div class="list-box radio-sty">
													<span>付款方式：<span class="red">*</span></span>
													<nav>
														<span v-for="item in popupData.ltPayMethods" v-show="item.value < 500" :class="{'checked': popupData.renewObj.enPayMethod == item.value}">
															<input :id="'paymethod' + item.value" name="payMethod" type="radio" :value="item.value" @click="popupData.renewObj.enPayMethod = item.value" />
															<label class="radio-label" :for="'paymethod' + item.value">{{item.name}}</label>
														</span>
													</nav>
												</div>
												<div class="list-box radio-sty">
													<span>發票格式：<span class="red">*</span></span>
													<nav>
														<span v-for="item in popupData.ltInvoiceTypes" :class="{'checked': popupData.renewObj.invoice.enInvoiceType == item.value}">
															<input :id="'invoiceType' + item.value" name="invoiceType" type="radio" :value="item.value" @click="popupData.renewObj.invoice.enInvoiceType = item.value" />
															<label class="radio-label" :for="'invoiceType' + item.value">{{item.name}}</label>
														</span>
													</nav>
												</div>
												<div class="list-box" v-show="popupData.renewObj.invoice.enInvoiceType === 200">
													<span>統一編號：<span class="red">*</span></span>
													<div>
														<input type="tel" placeholder="請輸入..." v-model="popupData.renewObj.invoice.invoiceTaxNo" ref="invoicetaxno" maxlength="8" />
													</div>
												</div>
												<div class="list-box" v-show="popupData.renewObj.invoice.enInvoiceType === 200">
													<span>公司名稱：</span>
													<div>
														<input type="tel" placeholder="請輸入..." v-model="popupData.renewObj.invoice.invoiceTitle" />
													</div>
												</div>
												<div class="list-box radio-sty">
													<span>索取方式：<span class="red">*</span></span>
													<nav>
														<span v-for="item in popupData.ltBillTypes" :class="{'checked': popupData.renewObj.invoice.enBillType == item.value}">
															<input :id="'billType' + item.value" name="billType" type="radio" :value="item.value" v-model="popupData.renewObj.invoice.enBillType" @change="zipcode('invoice')" />
															<label class="radio-label" :for="'billType' + item.value">{{item.name}}</label>
														</span>
													</nav>
												</div>
												<div class="list-box" v-show="popupData.renewObj.invoice.enBillType === 100">
													<span>發票收件人姓名：<span class="red">*</span></span>
													<input type="tel" placeholder="請輸入..." v-model="popupData.renewObj.invoice.receiver" ref="invoicereceiver" />
												</div>
												<div class="list-box" v-show="popupData.renewObj.invoice.enBillType === 100">
													<span>發票收件人電話：<span class="red">*</span></span>
													<input type="tel" placeholder="請輸入...例:0212345678" v-model="popupData.renewObj.invoice.mobile" ref="invoicemobile" />
												</div>
												<div class="list-box select-sty" v-show="popupData.renewObj.invoice.enBillType === 100">
													<span>發票寄送地址：<span class="red">*</span></span>
													<div id="twzipcodeToBill" class="wrap-sty invoice">
														<div class="arrow-select pb-15">
															<select data-role="county" v-model="popupData.renewObj.invoice.county" ref="invoicecounty"></select>
														</div>
														<div class="arrow-select pb-15">
															<select data-role="district" v-model="popupData.renewObj.invoice.city" @change="changeCity('invoice')"></select>
															<input type="hidden" data-role="zipcode" />
														</div>
														<input class="address" type="text" placeholder="地址..." v-model="popupData.renewObj.invoice.address" ref="invoiceaddress" />
													</div>
												</div>
												<div class="list-box" v-show="popupData.renewObj.invoice.enBillType === 200">
													<span>手機條碼載具：<span class="red">*</span></span>
													<input type="tel" placeholder="請輸入...例:/123AAAA" v-model="popupData.renewObj.invoice.mobileBarcode" ref="mobilebarcode" maxlength="8" />
												</div>
												<div class="list-box">
													<span>備註：</span>
													<textarea class="memo" v-model="popupData.renewObj.remark"></textarea>
												</div>
												<div class="list-box mobile-none" v-show="popupData.renewObj.enPayMethod == 100">
													<span>回傳匯款單：<span class="red">*</span></span>
													<div class="block block-upload">
														<div class="btn btn-upload">
															<a @click="triggerUpload('#fuReceipt')">上傳匯款單或轉帳交易明細</a>
														</div>
													</div>
												</div>
											</div>
										</div>
										<div class="consideration" v-show="popupData.renewObj.total > 0">
											<div class="c-title">費用總計</div>
											<div class="price-list block">
												<div class="line text-bt" v-show="popupData.renewObj.freightage > 0">
													<span>運費：</span>
													<span>$ {{popupData.renewObj.freightage.toLocaleString()}}</span>
												</div>
												<div class="bottom-line" v-show="popupData.renewObj.freightage > 0"></div>
												<div class="line text-bt"><span>租金合計：</span><span>${{popupData.renewObj.subTotal.toLocaleString()}}</span></div>
												<div class="line text-bt" v-show="popupData.renewObj.suppliesTotal > 0"><span>加租合計：</span><span>$ {{popupData.renewObj.suppliesTotal.toLocaleString()}}</span></div>
												<div class="bottom-line"></div>
												<div class="line text-bt">品項總計：<span class="red">$ {{popupData.renewObj.total.toLocaleString()}}</span></div>
											</div>

											<div v-if="popupData.renewObj.enPayMethod == 100">
												<p>&nbsp;</p>
												<div class="c-title">匯款資訊</div>
												<div class="price-list block">
													<div class="line text-bt">銀行代號：006 合作金庫銀行</div>
													<div class="line text-bt">分行代號：民權分行</div>
													<div class="line text-bt">戶名：佳醫創照健康股份有限公司</div>
													<div class="line text-bt">匯款帳號：0770-717-255666</div>
													<div class="line text-bt">分行代號：民權分行</div>
												</div>
												<p>&nbsp;</p>
												<div class="c-title">已上傳匯款單或轉帳交易明細</div>
												<div class="price-list block">
													<div class="block-upload tab-pc-none">
														<div class="btn btn-upload">
															<a @click="triggerUpload('#fuReceipt')">上傳匯款單或轉帳交易明細</a>
															<input type="file" id="fuReceipt" accept=".gif, .jpg, .jpeg, .png, .webp" ref="fuReceipt" @change="onFileChange" />
														</div>
													</div>
													<div class="block-receipts">
														<ul class="renew-receipts" v-show="popupData.receipts != null && popupData.receipts.length > 0">
															<li v-for="(item, idx) in popupData.receipts" class="receipt">
																<a :href="item.imgSrc" target="_blank"><img class="py-10" :src="item.imgSrc" style="width: 90%;" /></a>
																<button class="btn btn-delete" @click="deleteReceipt(item, idx)">刪除</button>
															</li>
														</ul>
													</div>
												</div>
											</div>
										</div>
									</div>
									<ul class="block">
										<li class="btn m-auto btn-r-arrow step" @click="renewStep(2);"><a>上一步</a></li>
										<li class="btn m-auto btn-r-arrow x-hidden" @click="sendRenewOrder()"><a>送出訂單</a></li>
									</ul>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--popup-->
		<!--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 type="text/javascript" src="/assets/js/twzipcode.latest.js"></script>
	<script src="member.js" type="module"></script>
	<!--FinalScript E-->
</body>
</html>