<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="https://www.thymeleaf.org ">
<head>
    <title>采美365网-核对订单信息</title>
    <template th:replace="components/head-link"></template>
    <link th:href="@{/css/shopping/confirm.css(v=${version})}" rel="stylesheet" type="text/css">
</head>
<body>
<!-- 引用头部 -->
<template th:replace="components/header"></template>

<!-- 确认订单 -->
<div id="shoppingConfirm">
    <!--列表-->
    <div class="wrap">
        <div class="pageTitle">
            <div class="step">
                <span class="on">我的购物车</span>
                <label class="line on"></label>
                <span class="on">核对订单信息</span>
                <label class="line"></label>
                <span>成功提交订单</span>
            </div>
            <h1>确认订单<span>(填写并核对订单信息)</span></h1>
        </div>
    </div>
    <div class="container clear" :class="isRequest ? 'active' : ''" v-show="isRequest">
        <div class="content" :style="{height:isShwoAddModel ? '318px' : 'auto'}">
            <div class="title">收货人信息</div>
            <div class="section address"  v-if="addressList.length == 0">
                <div class="address-info">
                    <p class="info-p">暂无收货地址信息，请新建地址</p>
                </div>
                <div class="address-sub add">
                    <a class="btn btn-confirm"  href="javascript:void(0)" @click="ShowAddAddressFn">新建地址</a>
                </div>
            </div>
            <div class="section address" v-else>
                <div class="address-info">
                    <div class="info-left">
                        <p><span class="label">收货人:</span>{{addressData.shouHuoRen}}</p>
                        <p><span class="label">联系方式:</span>{{addressData.mobile}}</p>
                        <p><span class="label">收货地址:</span>{{addressData.province}}{{addressData.city}}{{addressData.town}}{{addressData.address}}</p>
                    </div>
                    <div class="info-right">
                        <div class="info-top">
                            <div class="defau" v-if="addressData.defaultFlag == 1">
                                <i class="icon mIcon"></i>
                                <span class="span-s">默认地址</span>
                            </div>
                            <a href="javascript:void(0)" @click="editAddress">修改</a>
                        </div>
                    </div>
                </div>
                <div class="address-sub">
                    <a class="btn btn-none"  href="javascript:void(0)" @click="ShowCheckedAddressFn">选择地址</a>
                    <a class="btn btn-confirm"  href="javascript:void(0)" @click="ShowAddAddressFn">新建地址</a>
                </div>
            </div>
            <div class="section address-none" v-if="isShwoAddModel">
                <div class="address-main clear">
                    <div class="formLine">
                        <div class="label"><p><em>*</em>联系地址：</p></div>
                        <div class="form-input">
                            <select name="provinceID" id="cProvince" @change="ChangeProvince">
                                <option value="" >请选择</option>
                                <option v-for="(item ,index) in ProvinceList" :key="index" :value='item.provinceID' >{{item.name}}</option>
                            </select>
                            <select name="cityID" id="cCity" @change="ChangeGetcity($event)" >
                                <option value="" >请选择</option>
                                <option v-for="(item ,index) in cityArray" :key="index" :value="item.cityID" >{{item.name}}</option>
                            </select>
                            <select name="townID" id="cTown" @change="ChangeGetcTown($event)">
                                <option value="" >请选择</option>
                                <option v-for="(item ,index) in townArray" :key="index" :value="item.townID"  >{{item.name}}</option>
                            </select>
                        </div>
                    </div>
                    <div class="formLine">
                        <div class="label tex"></div>
                        <div class="form-input">
                            <textarea placeholder="建议您如实填写详细地址，例如：街道名称，门牌号码，楼层和房间号等信息"  v-model="addAddressData.address"></textarea>
                        </div>
                    </div>
                    <div class="formLine">
                        <div class="label"><p><em>*</em>收货人：</p></div>
                        <div class="form-input">
                            <input type="text" v-model.trim="addAddressData.shouHuoRen" placeholder="请输入收货人姓名" maxlength="10" >
                        </div>
                    </div>
                    <div class="formLine">
                        <div class="label"><p><em>*</em>联系方式：</p></div>
                        <div class="form-input">
                            <input type="text" v-model.trim="addAddressData.mobile" placeholder="请输入联系方式" maxlength="11" >
                        </div>
                    </div>
                </div>
                <div class="address-sub">
                    <div class="checked" @click="settingDefaultFlag">
                        <i class="icon mIcon" :class="isDefaultFlag?'icon-gouxuan':'icon-weigouxuan'"></i>
                        <span>设为默认地址</span>
                    </div>
                    <div class="button">
                        <a href="javascript:void(0);" class="btn btn-confirm" @click="ConfirmAddressFn">保存并使用</a>
                        <a href="javascript:void(0);" class="btn btn-cancel" @click="CancelAddressFn">取消</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="content">
            <div class="title">进货清单</div>
            <div class="section product">
                <div class="title">
                    <div class="tr tr-info">商品</div>
                    <div class="tr tr-amount">数量</div>
                    <div class="tr tr-price">单价(元)</div>
                    <div class="tr tr-sum">小计(元)</div>
                </div>
                <div class="good_content">
                    <div class="good_main clearfix" v-for="(item, index) in goodsList" :key="index">
                        <div class="main_title">{{item.name}}</div>
                        <div class="main_content ">
                            <div class="main_content_ul" v-for="(pros, prosIndex) in item.cartList" :key="prosIndex">
                                <div class="th th-info">
                                    <div class="th-inner">
                                        <div class="th-image"><img :src="pros.image" alt=""></div>
                                        <div class="th-name">{{pros.name}}</div>
                                    </div>
                                </div>
                                <div class="th th-amount"><div class="th-inner"><p>{{pros.number}}</p></div></div>
                                <div class="th th-price"><div class="th-inner"><p>￥{{pros.price | NumFormat}}</p></div></div>
                                <div class="th th-sum"><div class="th-inner"><p>￥{{(pros.price*pros.number) | NumFormat}}</p></div></div>
                            </div>
                            <div class="main_content_bt">合计: <span>￥{{item.totalPrice | NumFormat}}</span></div>
                        </div>
                        <div class="main_footer">
                            <span>留言:</span>
                            <input type="text" class="main_input" placeholder="告诉卖家您的特殊要求" v-model="goodRemark[index]" @change="changeHandle(index)">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="content">
            <div class="title">发票信息</div>
            <div class="section invoice">
                <div class="invoice-tabs">
                    <span>发票类型:</span>
                    <div class="tab-radio">
                        <label class="diyBox" v-for="(item, index) in invoiceTypeList" :key="index" @click="radioChange">
                            <input type="radio" name="invoiceType" v-model="invoiceType" :value="item.value" checked><i class="icon mIcon">{{item.name}}</i>
                        </label>
                    </div>
                </div>
                <div class="invoice-content clearfix" v-if="invoiceType == '2'">
                    <div class="main_content">
                        <span>发票内容:</span>
                        <div class="main_item">商品明细</div>
                    </div>
                    <div class="main_content">
                        <span>发票类型:</span>
                        <div class="tab-radio">
                            <label class="diyBox" v-for="(item, index) in invoiceTitleList" :key="index" @click="radioChangeTitle">
                                <input type="radio" name="invoiceTitle" v-model="invoiceTitle" :value="item.value" checked><i class="icon mIcon">{{item.name}}</i>
                            </label>
                        </div>
                    </div>
                    <div class="main_content">
                        <div class="main_item_conten">
                            <div class="group-from" v-if="peopleInvoiceData.invoiceTitleType == '0'">
                                <input class="label-input" type="text" v-model="peopleInvoiceData.invoiceTitle"   placeholder="请填写个人抬头" maxlength="20">
                            </div>
                            <div class="group-from" v-if="peopleInvoiceData.invoiceTitleType == '1'">
                                <input class="label-input" type="text" v-model="peopleInvoiceData.invoiceTitle"   placeholder="请填写公司抬头" maxlength="20">
                            </div>
                            <div class="group-from" v-if="peopleInvoiceData.invoiceTitleType == '1'">
                                <input class="label-input" type="text" v-model="peopleInvoiceData.corporationTaxNum"   placeholder="请填写纳税人识别号" maxlength="20">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="invoice-main clearfix" v-if="invoiceType == '3'">
                    <div class="invoice-from">
                        <span class="label">单位名称:</span>
                        <input class="label-input" type="text" v-model="invoiceData.invoiceTitle" placeholder="请填写单位信息(必填)" maxlength="20">
                    </div>
                    <div class="invoice-from">
                        <span class="label">纳税人识别号:</span>
                        <input class="label-input" type="text" v-model="invoiceData.corporationTaxNum" placeholder="请填写纳税人识别号(必填)" maxlength="20">
                    </div>
                    <div class="invoice-from">
                        <span class="label">注册地址:</span>
                        <input class="label-input" type="text" v-model="invoiceData.registeredAddress" placeholder="请填写单位注册地址(必填)" maxlength="40">
                    </div>
                    <div class="invoice-from">
                        <span class="label">注册电话:</span>
                        <input class="label-input" type="text" v-model="invoiceData.registeredPhone" placeholder="请填写注册电话(必填)" maxlength="15">
                    </div>
                    <div class="invoice-from">
                        <span class="label">开户银行:</span>
                        <input class="label-input" type="text" v-model="invoiceData.openBank"   placeholder="请填写开户银行(必填)" maxlength="10">
                    </div>
                    <div class="invoice-from">
                        <span class="label">银行账号:</span>
                        <input class="label-input" type="text" v-model="invoiceData.bankAccountNo" placeholder="请填写银行账号(必填)" maxlength="19">
                    </div>
                </div>
            </div>
        </div>
        <div class="content">
            <div class="title">使用余额</div>
            <div class="section userMoney">
                <i class="icon mIcon" @click="checkedBalabce" :class="isCheckedBalabce ? 'icon-gouxuan' : 'icon-weigouxuan'" v-if="userMoney > 0"></i>
                <span class="text">当前余额:<span class="red">￥{{userMoney | NumFormat}}</span></span>
                <span class="text">已使用:<span class="red">￥{{deductMoney | NumFormat}}</span></span>
                <span class="text">剩余:<span class="red">￥{{surplusMoney | NumFormat}}</span></span>
            </div>
        </div>
        <!-- 结算信息 -->
        <div class="content">
            <div class="section footer">
                <div class="footer_content">
                    <div class="footer_left fl">
                        <p>商品种类:</p>
                        <p>数量总计:</p>
                        <p v-show="addressList.length>0">运费<span v-if="freightData.freePostFlag == 1">(运费可选择到付哟~)</span>:</p>
                        <p>抵扣账户余额:</p>
                        <p>总价:</p>
                    </div>
                    <div class="footer_right fr">
                        <p>{{productKind}}种</p>
                        <p>{{allCount}}件</p>
                        <div v-show="addressList.length>0">
                            <div class="select" v-if="freightData.freePostFlag == 1 ">
                                <select v-model="selectedFreight"  @change='getValueFreight'>
                                            <option v-for="x in optionList" :value="x">{{x}}</option>
                                        </select>
                            </div>
                            <p v-else><span>{{freightText}}</span></p>
                        </div>
                        <p class="red">￥{{deductMoney | NumFormat}}</p>
                        <p class="red">￥{{payAllPrice | NumFormat}}</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer_button" :class="isFiexdClass">
            <div class="footer_inner">
                <div class="button_back fl"><a href="/cart.html" class="back"><i class="icon mIcon"></i>返回购物车</a></div>
                <div class="button_confim fr">
                    <P>总价:<span>￥{{payAllPrice | NumFormat}}</span></P>
                    <a href="javascript:void(0);" class="confimBtn"  @click="ConfirmOrderFn" :class="isSubDisabled ?'active':''">提交订单</a>
                </div>
            </div>
        </div>
    </div>
    <!--选择地址弹窗-->
    <div class="model-address-content" v-if="isShowAddress" v-cloak>
        <div class="model-content">
            <div class="title"><p>选择地址</p><i class="icon mIcon" @click="HideCheckedAddressFn"></i></div>
            <div class="content">
                <div class="list" v-for="(item, index) in addressList" :class="checkedAddressItemIndex == index ? 'checked' : ''" @click.stop="checkedAddressItemFn(index,item)">
                    <div class="list-left">
                        <p><span class="label">收货人:</span>{{item.shouHuoRen}}</p>
                        <p><span class="label">联系方式:</span>{{item.mobile}}</p>
                        <p><span class="label">收货地址:</span>{{item.province}}{{item.city}}{{item.town}}{{item.address}}</p>
                    </div>
                    <div class="list-right">
                        <div class="list-defalut" v-if="item.defaultFlag == 1">
                            <i class="icon mIcon"></i>
                            <span class="span-s">默认地址</span>
                        </div>
                        <div class="list-defalut" v-else>
                            <span class="span-s" @click.stop="defaultAddressFn(item.addressID)">设为默认地址</span>
                        </div>
                        <a class="list-btn" href="javascript:void(0)" @click.stop="deleteAddress(item.addressID)">删除</a>
                    </div>
                    <div class="seclet"><i class="icon mIcon"></i></div>
                </div>
            </div>
            <div class="button">
                <a class="btn btn-confirm" href="javascript:void(0)"@click="ConfirmCheckedAddressFn">确定</a>
                <a class="btn btn-cancel" href="javascript:void(0)" @click="HideCheckedAddressFn">取消</a>
            </div>
        </div>
    </div>
</div>
<!-- 引入底部 -->
<template th:replace="components/footer"></template>
<template th:replace="components/foot-link"></template>
<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/order.service.js(v=${version})}"></script>
<script charset="utf-8" type="text/javascript" th:src="@{/js/shopping/confirm.js(v=${version})}"></script>
</body>
</html>
