<!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/base/form.css(v=${version})}" rel="stylesheet" type="text/css">
    <link th:href="@{/css/shopping/shopping.css(v=${version})}" rel="stylesheet" type="text/css">
</head>
<body>
<!-- 引用头部 -->
<template th:replace="components/header"></template>

<!-- 核对订单 -->
<div id="shoppingConfirm" v-cloak>
    <!--列表-->
    <div class="wrap">
        <div class="pageTitle">
            <div class="step">
                <span class="prev">我的购物车</span>
                <span class="on">核对订单信息</span>
                <span>成功提交订单</span>
            </div>
            <h1>确认订单<span>(填写并核对订单信息)</span></h1>
        </div>
        <h2 v-if="isPC" class="title">收货人信息</h2>
        <div class="addressWrap clear">
            <div v-show="!isShowAddressForm">
                <div class="info">
                    <template v-if="addressList.length>0">
                        <p><span class="label">收货人:</span>{{address.name}}</p>
                        <p><span class="label">联系方式:</span>{{address.mobile}}</p>
                        <p><span class="label">收货地址:</span>{{address.province}}{{address.city}}{{address.town}}{{address.desc}}</p>
                    </template>
                    <template v-else>
                        <p class="none">暂无收货地址信息,请先添加地址</p>
                    </template>
                    <div class="btnBox mfbt">
                        <span class="default"><i class="icon mIcon" v-if="address.default"></i><span v-if="address.default">默认地址</span><a v-if="addressList.length>0" href="javascript:void(0)" @click="updateAddress()">修改</a></span>
                        <div class="group">
                            <a class="btn"  v-if="addressList.length>0" href="javascript:void(0)" @click="showAddressBox()">选择地址</a>
                            <a class="btn con" :class="addressList.length>0 ? '' : 'none'"  href="javascript:void(0)" @click="createAddress()">新建地址</a>
                        </div>
                    </div>
                </div>
                <div v-if="!isPC" class="gradient mf"><i class="mfi" v-for="i in 12"></i></div>
            </div>
            <div class="formWrap" v-show="isShowAddressForm">
                <div class="form">
                    <div class="formLine">
                        <p class="label"><em>*</em>收货人：</p>
                        <input type="text" v-model.trim="addressForm.name" placeholder="请输入收货人姓名" :rule="rule.name" maxlength="10" @blur="blurHandle($event)" needverify>
                        <i class="checked icon mIcon"></i>
                        <span class="errTips icon mIcon" tips="请输入正确的联系人姓名"></span>
                    </div>
                    <div class="formLine">
                        <p class="label"><em>*</em>联系方式：</p>
                        <input type="text" v-model.trim="addressForm.mobile" placeholder="请输入您的常用手机号" :rule="rule.mobile" maxlength="11" @blur="blurHandle($event)" needverify>
                        <i class="checked icon mIcon"></i>
                        <span class="errTips icon mIcon" tips="请输入有效电话号码"></span>
                    </div>
                    <div class="formLine">
                        <p class="label"><em>*</em>联系地址：</p>
                        <select name="province" v-model="addressForm.provinceId" @change="getCityOptions(addressForm.provinceId)">
                            <option value="" >请选择</option>
                            <option v-for="(item ,index) in provinceOptions" :key="index" :value='item.provinceID'>{{item.name}}</option>
                        </select>
                        <select name="city" v-model="addressForm.cityId" @change="getTownOptions(addressForm.cityId)">
                            <option value="" >请选择</option>
                            <option v-for="(item ,index) in cityOptions" :key="index" :value="item.cityID">{{item.name}}</option>
                        </select>
                        <select name="town" v-model="addressForm.townId">
                            <option value="" >请选择</option>
                            <option v-for="(item ,index) in townOptions" :key="index" :value="item.townID">{{item.name}}</option>
                        </select>
                        <textarea v-model.trim="addressForm.desc" placeholder="建议您如实填写详细地址，例如：街道名称，门牌号码，楼层和房间号等信息"  @blur="blurHandle($event)" needverify></textarea>
                        <span class="errTips icon mIcon" tips="请输入正确的联系地址"></span>
                    </div>
                    <div class="btnBox">
                        <div class="group">
                            <p>
                                <label class="check"><input v-model="addressForm.default" name="default" type="checkbox">设为默认地址</label>
                            </p>
                            <p>
                                <a class="btn save"  href="javascript:void(0)" @click="saveAddressForm()" :class="saveLoading ? 'disable':''">保存并使用</a>
                                <a class="btn con"  href="javascript:void(0)" @click="hideAddressForm()">取消</a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <h2 class="title">进货清单</h2>
        <div class="listWrap">
            <div v-if="isPC" class="cartTit clear">
                <div class="c1">&nbsp;</div>
                <div class="c2">商品信息</div>
                <div class="c4">单价（元）</div>
                <div class="c5">数量</div>
                <div class="c6">小计（元）</div>
            </div>
            <div class="supplierItem" v-for="supplier,index in listData">
                <div class="supplierTit">
                    <a href="javascript:void(0);">
                        <img class="img" :src="supplier.logo">
                        <span class="name" v-text="supplier.name"></span>
                    </a>
                    <!--店铺促销-->
                    <div class="price">
                        <div v-if="supplier.promotions" class="priceTag">
                            <i @click="toggleThisLadder($event)" class="tag icon mIcon" v-text="supplier.promotions.name"></i>
                            <div class="promotion mFixed">
                                <div>
                                    <p class="t">
                                        <em v-if="supplier.promotions.mode==2">{{supplier.promotions.name+'，满 ¥'+toFloat(supplier.promotions.touchPrice)+' 减 ¥'+toFloat(supplier.promotions.reducedPrice)}}</em>
                                        <em v-if="supplier.promotions.mode==3">{{supplier.promotions.name+'，满 ¥'+toFloat(supplier.promotions.touchPrice)+' 赠送商品'}}</em>
                                    </p>
                                    <p>促销时间：<em v-if="supplier.promotions.status==1">不限时</em><em v-else>{{supplier.promotions.beginTime.substr(0,10)+' ~ '+supplier.promotions.endTime.substr(0,10)}}</em></p>
                                    <template v-if="supplier.promotions.mode==3">
                                        <p>赠品：</p>
                                        <p>
                                            <span v-for="g in supplier.promotions.giftList" class="p">
                                                <img :src="g.image">
                                                <span v-text="g.name"></span>
                                                <span v-text="'× '+g.number"></span>
                                            </span>
                                        </p>
                                    </template>
                                    <p class="c"><a class="close" @click="hideThisLadder($event)" href="JavaScript:void(0);">了解</a></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="cartItem clear"  v-for="cart in supplier.cartList" >
                    <div class="c1"><a :href="'/product-'+cart.productId+'.html'" target="_blank">
                        <img class="image" :src="cart.image">
                        <span v-if="cart.productType==2" class="tip">赠品</span>
                    </a></div>
                    <div class="c2">
                        <a class="name" :href="'/product-'+cart.productId+'.html'" target="_blank">
                            <span v-text="cart.name"></span>
                        </a>
                    </div>
                    <div class="c4">
                        <div class="price">
                            <template v-if="cart.actStatus==1 && cart.promotions && cart.promotions.type==1 && cart.promotions.mode==1">
                                <del v-text="'¥'+toFloat(cart.originalPrice)"></del>
                            </template>
                            <template v-else>
                                <em v-text="'¥'+toFloat(cart.price)"></em>
                            </template>
                            <!-- 促销活动 -->
                            <div v-if="cart.actStatus==1 && cart.promotions" class="priceTag">
                                <i v-if="cart.promotions.type==1 && cart.promotions.mode==1" @click="toggleThisLadder($event)" class="tag icon mIcon" v-text="cart.promotions.name+'：¥'+toFloat(cart.promotions.touchPrice)"></i>
                                <i v-else class="tag icon mIcon" @click="toggleThisLadder($event)" v-text="cart.promotions?cart.promotions.name:''"></i>
                                <div class="promotion mFixed">
                                    <div>
                                        <p class="t">
                                            <em v-if="cart.promotions.type==1 && cart.promotions.mode==1">{{cart.promotions.name+'：¥'+toFloat(cart.promotions.touchPrice)}}</em>
                                            <em v-if="cart.promotions.mode==2">{{cart.promotions.name+'，满 ¥'+toFloat(cart.promotions.touchPrice)+' 减 ¥'+toFloat(cart.promotions.reducedPrice)}}</em>
                                            <em v-if="cart.promotions.mode==3">{{cart.promotions.name+'，满 ¥'+toFloat(cart.promotions.touchPrice)+' 赠送商品'}}</em>
                                        </p>
                                        <p>促销时间：<em v-if="cart.promotions.status==1">不限时</em><em v-else>{{cart.promotions.beginTime.substr(0,10)+' ~ '+cart.promotions.endTime.substr(0,10)}}</em></p>
                                        <p v-if="cart.promotions.type==2" class="r"><a class="more" :href="'/product/promotions.html?id='+cart.promotions.id">更多凑单商品>>></a></p>
                                        <template v-if="cart.promotions.mode==3">
                                            <p>赠品：</p>
                                            <p>
                                                <span v-for="g in cart.promotions.giftList" class="p">
                                                    <img :src="g.image">
                                                    <span v-text="g.name"></span>
                                                    <span v-text="'× '+g.number"></span>
                                                </span>
                                            </p>
                                        </template>
                                        <p class="c"><a class="close" @click="hideThisLadder($event)" href="JavaScript:void(0);">了解</a></p>
                                    </div>
                                </div>
                            </div>
                            <!-- 阶梯价 -->
                            <div v-else-if="cart.ladderFlag" class="priceTag">
                                <i class="tag icon mIcon" @click="toggleThisLadder($event)">阶梯价格</i>
                                <div class="ladder mFixed">
                                    <span>
                                        <em class="t"><i>价格</i><i>起订量</i></em>
                                        <em v-for="l in cart.ladderPrices">
                                            <i class="p">¥{{toFloat(l.buyPrice)}}</i>
                                            <i>{{l.numRange}}</i>
                                        </em>
                                        <em @click="hideThisLadder($event)" class="close">了解</em>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="c5">{{cart.number}}</div>
                    <div v-if="isPC" class="c6"><span v-text="'¥'+toFloat(cart.price*cart.number)"></span></div>
                </div>
                <div class="supplierBtn">
                    <span :class="supplier.reducedPrice>0?'priceTotal':'item'">合计：<em v-text="'¥'+toFloat(supplier.totalPrice)"></em>
                        <span v-if="supplier.reducedPrice>0" class="dl"><del v-text="'¥'+toFloat(supplier.originalPrice)"></del><em>减{{'¥'+toFloat(supplier.reducedPrice)}}</em></span>
                    </span>
                    <div class="note">留言：<input type="text" v-model="supplier.note" placeholder="告诉卖家您的特殊要求"></div>
                </div>
            </div>
        </div>

        <h2 class="title">发票信息</h2>
        <div class="invoiceWrap">
            <div class="formLine">
                <label class="diyBox"><input type="radio" name="invoice" v-model="invoice.type" value="0" checked><i class="icon mIcon">不要发票</i></label>
                <label class="diyBox"><input type="radio" name="invoice" v-model="invoice.type" value="2"><i class="icon mIcon">要发票</i></label>
            </div>
            <div class="invoiceForm" v-show="invoice.type==1"><!--普通发票-->
                <div class="formLine">
                    <p class="label"><em>*</em>发票内容：</p>
                    <input type="text" disabled value="商品明细">
                    <span class="errTips icon mIcon"></span>
                </div>
                <div class="formLine">
                    <p class="label"><em>*</em>发票类型：</p>
                    <label class="diyBox"><input type="radio" name="invoiceTit" v-model="invoice.invoiceTitleType" value="0"><i class="icon mIcon">个人</i></label>
                    <label class="diyBox"><input type="radio" name="invoiceTit" v-model="invoice.invoiceTitleType" value="1"><i class="icon mIcon">公司</i></label>
                    <span class="errTips icon mIcon"></span>
                </div>
                <div class="formLine">
                    <p class="label"><em>*</em>发票抬头：</p>
                    <input type="text" v-model.trim="invoice.invoiceTitle" :placeholder="'请输入'+(invoice.invoiceTitleType==1?'公司':'个人')+'抬头'" maxlength="20" @blur="blurHandle($event)" needverify>
                    <i class="checked icon mIcon"></i>
                    <span class="errTips icon mIcon" tips="请输入正确的发票抬头"></span>
                </div>
                <div class="formLine" v-show="invoice.invoiceTitleType==1">
                    <p class="label"><em>*</em>纳税人识别号：</p>
                    <input type="text" v-model.trim="invoice.corporationTaxNum" placeholder="请输入纳税人识别号" maxlength="20" @blur="blurHandle($event)" needverify>
                    <i class="checked icon mIcon"></i>
                    <span class="errTips icon mIcon" tips="请输入正确的纳税人识别号"></span>
                </div>
            </div>
            <div class="invoiceForm" v-show="invoice.type==2"><!--增值税发票-->
                <div class="formLine">
                    <p class="label"><em>*</em>单位名称：</p>
                    <input type="text" v-model.trim="invoice.invoiceTitle" placeholder="请输入单位名称" maxlength="20" @blur="blurHandle($event)" needverify>
                    <i class="checked icon mIcon"></i>
                    <span class="errTips icon mIcon" tips="请输入正确的单位名称"></span>
                </div>
                <div class="formLine">
                    <p class="label"><em>*</em>纳税人识别号：</p>
                    <input type="text" v-model.trim="invoice.corporationTaxNum" placeholder="请输入纳税人识别号" maxlength="20" @blur="blurHandle($event)" needverify>
                    <i class="checked icon mIcon"></i>
                    <span class="errTips icon mIcon" tips="请输入正确的纳税人识别号"></span>
                </div>
                <div class="formLine">
                    <p class="label"><em>*</em>注册地址：</p>
                    <input type="text" v-model.trim="invoice.registeredAddress" placeholder="请输入注册地址" maxlength="40" @blur="blurHandle($event)" needverify>
                    <i class="checked icon mIcon"></i>
                    <span class="errTips icon mIcon" tips="请输入正确的注册地址"></span>
                </div>
                <div class="formLine">
                    <p class="label"><em>*</em>注册电话：</p>
                    <input type="text" v-model.trim="invoice.registeredPhone" placeholder="请输入注册电话" maxlength="15" @blur="blurHandle($event)" needverify>
                    <i class="checked icon mIcon"></i>
                    <span class="errTips icon mIcon" tips="请输入正确的注册电话"></span>
                </div>
                <div class="formLine">
                    <p class="label"><em>*</em>开户银行：</p>
                    <input type="text" v-model.trim="invoice.openBank" placeholder="请输入开户银行" maxlength="10" @blur="blurHandle($event)" needverify>
                    <i class="checked icon mIcon"></i>
                    <span class="errTips icon mIcon" tips="请输入正确的开户银行"></span>
                </div>
                <div class="formLine">
                    <p class="label"><em>*</em>银行账号：</p>
                    <input type="text" v-model.trim="invoice.bankAccountNo" placeholder="请输入银行账号" maxlength="19" @blur="blurHandle($event)" needverify>
                    <i class="checked icon mIcon"></i>
                    <span class="errTips icon mIcon" tips="请输入正确的银行账号"></span>
                </div>
            </div>
        </div>
        <h2 class="title">使用余额</h2>
        <div class="balanceWrap">
            <label class="check">
                <input v-if="balance.userMoney>0" v-model="balance.flag" name="useBalance" type="checkbox" @change="useUserMoney()">
                <input v-else v-model="balance.flag" name="useBalance" type="checkbox" disabled>
                <span class="text">当前余额:<span class="red">¥{{balance.userMoney | NumFormat}}</span></span>
                <span class="text">已使用:<span class="red">¥{{balance.deductMoney | NumFormat}}</span></span>
                <span class="text">剩余:<span class="red">¥{{balance.surplusMoney | NumFormat}}</span></span>
            </label>
        </div>
        <div class="totalPriceWrap">
            <p>商品种类: <span>{{kindCount}}种</span></p>
            <p>数量总计: <span>{{totalCount}}件</span></p>
            <p>运费:
                <span v-if="payInfo.freePostFlag==-1">到付</span>
                <span v-if="payInfo.freePostFlag==0">包邮</span>
                <span v-if="payInfo.freePostFlag==1"><em>¥{{payInfo.freight | NumFormat}}</em></span>
            </p>
            <p v-if="reducedPrice>0">促销满减: <span><em>- ¥{{reducedPrice | NumFormat}}</em></span></p>
            <p v-if="balance.deductMoney>0">抵扣账户余额: <span><em>- ¥{{balance.deductMoney | NumFormat}}</em></span></p>
            <p>总价: <span><em>¥{{payInfo.orderShouldPayFee | NumFormat}}</em></span></p>
        </div>
    </div>

    <div class="summaryWrap">
        <div class="summary">
            <div v-if="isPC" class="left">
                <div class="item">
                    <a href="/shopping/cart.html" class="back"><i class="icon mIcon"></i>返回购物车</a>
                </div>
            </div>
            <div class="right mfbt">
                <div class="item">总价：<em>¥{{payInfo.orderShouldPayFee | NumFormat}}</em></div>
                <a :class="submitLoading?'submit dis':'submit'" href="javascript:void(0);" @click="submitOrder()">提交订单</a>
            </div>
        </div>
    </div>

    <!--选择地址弹窗-->
    <div class="model-address-content" v-show="isShowAddressList">
        <div class="model-content">
            <div v-if="isPC" class="title"><p>选择地址</p><i class="icon mIcon" @click="closeAddressBox()"></i></div>
            <div class="content">
                <div class="list" v-for="(item, index) in addressList" @click="chooseAddress(item.addressID)" :class="address.selectedId==item.addressID ? 'checked' : ''">
                    <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 mfbt">
                        <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>
                            <a href="javascript:void(0)" @click.stop="setDefaultAddress(item.addressID)">设为默认地址</a>
                        </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="confirmAddress()">确定</a>
                <a class="btn btn-cancel" href="javascript:void(0)" @click="closeAddressBox()">取消</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>