{{> layout/header}}
<div class="order-detail-page me-page yoho-page clearfix">
    {{# meOrderDetail}}
    {{> home/path}}

    {{> home/navigation}}

    <div class="me-main">
        <div class="order-detail block" data-id="{{orderNum}}">
            <h2 class="title"></h2>

            <div class="status">
                <p>
                    订单编号：
                    <em>{{orderNum}}</em>
                </p>
                <p class="cur-status">
                    当前状态：{{curStatus}}
                </p>
                {{#if complete}}
                <p class="complete-tip">订单已经完成，感谢你在YOHO商城购物，欢迎您对本次交易及所购商品进行评价。</p>
                {{/if}}

                {{#if operation.goPay}}
                <a class="go-pay oo-btn" href="{{operation.goPay}}">立即付款</a>
                {{/if}}
            </div>

            <div class="detail-info{{#if virtualGoods}} virtual-detail{{/unless}}">
                {{# progress}}
                <div class="order-progress">
                    <div class="progress-box">
                        <div class="outter-progress">
                            <div class="inner-progress" style="width: {{percent}};"></div>
                        </div>
                        <ul class="clearfix">
                            {{#each middleStatus}}
                            <li class="pg-{{@index}}{{#if cur}} cur{{/if}}">
                                {{name}}
                                {{#if date}}
                                <span class="date">{{date}}</span>
                                {{/if}}
                            </li>
                            {{/each}}
                        </ul>
                    </div>
                </div>
                {{/ progress}}

                {{# traceOrder}}
                <div class="trace-order">
                    <p class="sub-title">
                        <span class="icon"></span>
                        订单追踪
                    </p>
                    <div class="content">
                        <p>下单时间：{{orderDate}}</p>
                        {{#if logisticsCompany}}
                        <p>物流公司：{{logisticsCompany}}</p>
                        {{/if}}
                        {{#if courierNumbe}}
                        <p>快递单号：{{courierNumbe}}</p>
                        {{/if}}
                        <table>
                            <thead>
                            <th class="handle-time">处理时间</th>
                            <th class="recive-place">接收地点</th>
                            <th class="logistics-info">物流信息</th>
                            </thead>
                            <tbody>
                                {{# logistics}}
                                <tr>
                                    {{#each .}}
                                    <td>
                                        {{.}}
                                    </td>
                                    {{/each}}
                                </tr>
                                {{/ logistics}}
                            </tbody>
                        </table>
                    </div>
                </div>
                {{/ traceOrder}}

                {{# orderInfo}}
                <div class="order-info">
                    <p class="sub-title">
                        <span class="icon"></span>
                        订单信息
                    </p>
                    <div class="content">
                        <p>收货人：{{receiver}}</p>
                        <p>收货地址：{{address}}</p>
                        <p>联系电话：{{phone}}</p>
                    </div>
                </div>
                {{/ orderInfo}}

                <div class="order-remark">
                    <p class="sub-title">
                        <span class="icon"></span>
                        备注
                    </p>
                    <p class="content">
                        {{remark}}
                    </p>
                </div>

                {{# noramlPayMode}}
                <div class="pay-mode">
                    <p class="sub-title">
                        <span class="icon"></span>
                        支付及配送方式
                    </p>
                    <div class="content">
                        <p>支付类型：{{payMode}}</p>
                        {{#if payWay}}
                        <p>支付方式：{{payWay}}</p>
                        {{/if}}
                        <p>送货上门时间：{{deliverTime}}</p>
                    </div>
                </div>
                {{/ noramlPayMode}}

                {{# virtualPayMode}}
                <div class="pay-mode virtual-pay-mode">
                    <p class="sub-title">
                        <span class="icon"></span>
                        付款方式
                    </p>
                    <div class="content">
                        <span>付款方式：{{payMode}}</span>
                        <span>电话号码：{{phone}}</span>
                    </div>
                </div>
                {{/ virtualPayMode}}

                <div class="good-list">
                    <p class="sub-title">
                        <span class="icon"></span>
                        商品清单
                    </p>
                    <div class="content">
                        <table>
                            <thead>
                            <th class="product-info">商品信息</th>
                            <th class="good-price">单价（元）</th>
                            <th class="yoho-coin">
                                返YOHO币
                                <a target="_blank" href="{{yohoCoinUrl}}"></a>
                            </th>
                            <th class="num">数量</th>
                            <th class="sum">小计（元）</th>
                            </thead>
                            <tbody>
                                {{# goods}}
                                <tr>
                                    <td>
                                        <a class="thumb-link" href="{{url}}" target="_blank">
                                            <img class="thumb" src="{{img}}">
                                            {{> home/order-goods-tags}}
                                        </a>
                                        <p class="name-color-size">
                                            <a class="name" href="{{url}}" target="_blank">{{name}}</a>
                                            {{#if color}}
                                            颜色：{{color}}
                                            {{/if}}

                                            {{#if size}}
                                            尺码：{{size}}
                                            {{/if}}

                                            {{#if date}}
                                            日期：{{date}}
                                            {{/if}}
                                        </p>
                                    </td>
                                    <td>{{price}}</td>
                                    <td>{{coin}}</td>
                                    <td>{{num}}</td>
                                    <td>{{sum}}</td>
                                </tr>
                                {{/ goods}}
                            </tbody>
                        </table>
                        <div class="order-balance">
                            {{#each orderBalance}}
                            <p>
                                {{promotion}}:
                                {{#if @first}}
                                <em>{{account}}</em>
                                {{^}}
                                {{#if @last}}
                                <em class="payment">{{account}}</em>
                                {{^}}
                                {{account}}
                                {{/if}}
                                {{/if}}
                                元
                            </p>
                            {{/each}}
                        </div>
                    </div>
                </div>

                {{# operation}}
                <div class="order-operation clearfix">
                    {{#if paid}}
                    <p>
                        <span class="success-icon oo-icon"></span>
                        订单已支付
                    </p>
                    {{/if}}

                    {{#if goPay}}
                    <a class="go-pay oo-btn" href="{{goPay}}" target="_blank" >立即付款</a>
                    {{/if}}

                    {{#if cancelOrder}}
                    <span class="cancel-order oo-btn">取消订单</span>
                    {{/if}}

                    {{#if shipped}}
                    <span id="receive-confirm" class="confirm-received oo-btn">确认收货</span>
                    {{/if}}

                    {{#if cancel}}
                    <p>
                        <span class="cancel-icon oo-icon"></span>
                        订单已取消
                    </p>
                    {{/if}}

                    {{#if checkQrCode}}
                    <a class="check-qrcode oo-btn" href="{{checkQrCode}}" target="_blank">查看二维码</a>
                    {{/if}}
                </div>
                {{/ operation}}
            </div>
        </div>
    </div>
    {{/ meOrderDetail}}
    {{> home/order-cancel-tpl}}
</div>
{{> layout/footer}}