platform-b2c/src/main/webapp/resources/view/sso/ssoAddress.html

<style>
    #account_manager a {
        text-decoration: none;
    }

    #account_manager a:hover {
        text-decoration: none;
    }
    li .fi {
        float: left;
    }
    li .fr {
        width: 89%;
        color: #666;
    }
    .rt_menu{
        border-bottom: #e8e8e8 1px solid;
        background: #ecf2fd;
    }
    .rt_menu span{
        margin-left: 30px;
        color: #323232;
        font-size: 14px;
    }
    .rt_menu span.last-login {
        font-size: 12px;
        margin: 0 22px 0 0;
        font-weight: normal;
    }
    .rt_menu span.last-login span {
        font-size: 12px;
        font-weight: normal;
        margin: 0;
    }
    .count01 .count-content{
        width: 100%;
        background: #fff;
        padding-bottom:70px;
    }
    .count01 .count-content ul{
        width: 94%;
    }
    .count01 .count-content ul li{
        border-bottom: none;
    }
    .count-content ul li div.fl{
        width: 90px;
    }
    .rt_menu span.fr button{
        width: 40px;
        line-height: 40px;
        color: #5078cb;
        text-align: center;
        display: inline-block;
        margin-right: 10px;
        border: none;
        background: none;
        font-size: 14px;
    }
    .count-content .col-sm-10 .form-control{
        border-radius: inherit;
        margin-top: 12px;
    }
    .count01 ul li span h5 img {
        margin-top: 20px;
        margin-left: 0;
    }
    .count01 ul li span h5 img.ok-icon {
        margin-top: 25px;
    }
    .count01 ul li span>span {
        color: #666;
        margin-left: 0;
    }
    .count01 ul li >a {
        background: #fff;
        color: #5078cb;
        text-align: center;
        height: 30px;
        line-height: 30px;
        padding: 0 7px;
        margin-top: 16px;
        margin-right: 7px;
    }
    .count01 ul li >a.mall-btn-default {
        background: #5078cb;
        color: #fff;
    }
    .count01 ul li.safe-level>span >span {
        display: inline-block;
        height: 14px;
        line-height: 14px;
        background: rgb(255, 90, 0);
        color: #fff;
        margin-right: 1px;
        width: 64px;
        margin-left: 0px;
        font-size: 12px;
        text-align: center;
        position: relative;
        bottom: 1px;
    }
    .count01 ul li.safe-level>span >span:nth-child(3) {
        background: rgb(255,171,44);
    }
    .count01 ul li.safe-level>span>i {
        margin-left: 13px;
        color: #666;
    }
    .count01 ul li.safe-level .last-login {
        float: right;
        font-size: 12px;
        color: #666;
        margin-right: 7px;
    }
    .count01 ul li.safe-level .safe-remind {
        float: right;
        margin-right: 87px;
    }
    .count01 ul li.safe-level .safe-remind a {
        color: #ff0000;
        float: none !important;
    }
    .count01 ul li.active-safe-box {
        background: #fef2f2;
        border: 1px solid #faaebe;
    }
    .count01 ul li span font {
        font-size: 14px;
        color: #333;
        letter-spacing: 0;
        margin-right: 0;
    }
    .count01 ul li span h5 {
        width: 30px;
    }
    /**/
    .empty{
        width:100%;
        overflow: hidden;
        height:100px;
        margin: 0!important;
        display:inline-flex;
        justify-content: center;
        align-items: center;
    }
    .empty-info{
        line-height: 28px;
        padding-top:10px;
        margin-left:10px;
        text-align: left;
    }
    .empty-info .grey{
        color: #999;
        font-size: 14px;
    }
    .empty .empty-info>a{
        font-size: 14px;
        color: #5078cb;
    }
    .empty .empty-info i{
        margin-right:5px;
    }
    .oder01 ul li{
        margin-left: 0px;
        position: relative;
    }
    .oder01 ul li.active a{
        border-bottom: #fff;
        background: #5078cb;
        color: #fff;
    }
    .oder01 ul li::after{
        background: url('static/img/vendor/images/downicon.png');
        width: 11px;
        height: 6px;
        position: absolute;
        bottom: 0px;
        left: 50%;
        content: ' ';
        margin-left: -5px;
        display: none;
    }
    .oder01 ul li.active:after{
        display: block
    }
</style>

<style>
    .count01 .business_scope{
        padding-bottom:10px;
    }
    .count01 .business_scope ul{
        width:100%;
        margin:0;
        margin-left:-10px;
        line-height: 35px;
        padding-top: 18px;
    }
    .count01 .business_scope ul li{
        position:relative;
        width:auto;
        height:auto;
        padding:0 10px;
        margin:0 10px;
        float:none;
        background: #5078cb;
        border-radius:5px;
        text-align: center;
        line-height: 25px;
    }
    .count01 .business_scope ul li span{
        color:#fff;
        margin:0;
    }
    .count01 .business_scope ul li i{
        position:absolute;
        right:-10px;
        top:-10px;
        cursor:pointer;
        display:inline-block;
        width:20px;
        height:20px;
        line-height: 20px;
        font-size: 16px;
        text-align: center;
        color:red;
        border-radius:50%;
        background: #eee;
    }
    .logistic-content .log-tab{
        width:98%;
    }
    .logistic-content .menu-title{
        font-size: 14px;
        margin-left:30px;
    }
    .logistic-content .log-tab .table tbody tr td{
        white-space: normal;
        overflow:unset;
    }
</style>
<!--右侧主体部分-->
<div class="user_right fr" id="account_manager">
    <!--收货地址-->
    <div class="rt_menu"><span>收货地址</span></div>
    <div class="logistic-content">
        <div class="menu-title row">现有收货地址<span>&nbsp;已保存<em>{{total}}</em>条，还能新增<em>{{canAddTotal-total}}</em>条地址</span></div>
        <div class="add-log row" ng-if="total < canAddTotal && addressList && addressList.length > 0"><button ng-click="modifyAddress()"><i class="fa fa-plus-square"></i>新增收货地址</button></div>
        <div class="log-tab" ng-if="addressList && addressList.length > 0">
            <table class="table" style="table-layout: auto">
                <thead>
                <tr>
                    <th class="text-left" width="200">联系人</th>
                    <th class="text-left" width="400">地址</th>
                    <th width="110" class="text-left" >联系电话</th>
                    <th width="80">操作</th>
                    <th width="100"></th>
                </tr>
                </thead>
                <tbody>
                <tr ng-repeat="address in addressList">
                    <td class="text-left">{{address.name}}</td>
                    <td class="text-left">
                        <div>{{address.province}}&nbsp;{{address.city}}&nbsp;{{address.district}}</div>
                        <div>{{address.detailAddress}}</div>
                    </td>
                    <td class="text-left" >{{address.tel}}</td>
                    <td><a ng-click="modifyAddress(address)">修改</a>|<a ng-click="deleteAddress(address)">删除</a></td>
                    <td>
                        <button ng-if="address.num == 1">默认地址</button>
                        <button class="default" ng-if="address.num != 1" ng-click="setDefaultAddress(address.id)">设为默认</button>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="new-address" ng-if="addressList.length <= 0 || !addressList">
            <div class="edit-rec-addr">
                <div class="row">
                    <div class="col-sm-12">
                        <form name="myForm" class="form-horizontal" role="form" ng-submit="save(newAddr)">
                            <div class="form-group">
                                <label for="userName" class="col-sm-3 control-label"><strong class="text-inverse">* </strong>
                                    <span>收货人姓名：</span>
                                </label>
                                <div class="col-sm-5">
                                    <input required ng-model="newAddr.name" type="text" class="form-control" id="userName" name="userName"
                                           placeholder="请输入你的姓名" autocomplete="off" ng-change="checkForm(1)">
                                </div>
                                <div class="col-sm-4">
                                    <span class="text-inverse error" ng-show="newAddr.name && userError">请勿超过10个字</span>
                                    <span class="text-inverse heigth30" ng-show="myForm.userName.$touched && myForm.userName.$invalid">请输入收件人姓名</span>
                                    <span ng-show="!myForm.userName.$invalid && !userError" class="text-success heigth30">填写正确</span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="tel" class="col-sm-3 control-label"><strong class="text-inverse">* </strong>联系电话：</label>
                                <div class="col-sm-5">
                                    <input required ng-model="newAddr.tel" type="text" autocomplete="off" class="form-control" ng-change="checkForm(2)" id="tel" name="tel"
                                           placeholder="请输入您的联系电话">
                                </div>
                                <div class="col-sm-4" >
                                    <span class="text-inverse error" ng-show="newAddr.tel && (telError || telPatternError)">请输入正确的号码</span>
                                    <span class="text-inverse heigth30" ng-show="myForm.tel.$touched && myForm.tel.$invalid">请输入联系电话</span>
                                    <span ng-show="!myForm.tel.$invalid && !telError && !telPatternError" class="text-success heigth30">填写正确</span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="email" class="col-sm-3 control-label">邮箱：</label>
                                <div class="col-sm-5">
                                    <input name="email" ng-model="newAddr.email" type="text" class="form-control" id="email"
                                           placeholder="请填写正确的邮箱，可用于接收订单提醒" maxlength="50" ng-change="checkForm(4)">
                                </div>
                                <div class="col-sm-4">
                                    <span ng-show="newAddr.email && emailPatternError" class="text-inverse heigth30">请输入正确的邮箱</span>
                                </div>
                            </div>
                            <div class="form-group ">
                                <label class="col-sm-3 control-label"><strong
                                        class="text-inverse">* </strong>所在地区：</label>
                                <div class="mar-rt0 row checkbox">
                                    <div class="col-sm-3">
                                        <select required="" class="select-adder form-control"
                                                ng-model="newAddr.province"
                                                ng-options="key as key for (key,value) in division"
                                                ng-change="newAddr.city='';newAddr.district='';"
                                                style="opacity: 1;">
                                            <option value="">省级行政区</option>
                                        </select>
                                    </div>
                                    <div class="col-sm-3 ">
                                        <select class="select-adder form-control" ng-model="newAddr.city"
                                                ng-options="key as key for (key,value) in division[newAddr.province]"
                                                ng-change="newAddr.district='';"
                                                style="opacity: 1;">
                                            <option value="">市</option>
                                        </select>
                                    </div>
                                    <div class="col-sm-3">
                                        <select class="select-adder form-control" ng-model="newAddr.district" style="opacity: 1;"
                                                ng-options="value as value for value in division[newAddr.province][newAddr.city]" required>
                                            <option value="">区</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group" style="margin-bottom: 0;">
                                <label class="col-sm-3 control-label"><strong class="text-inverse">* </strong>详细地址：</label>
                                <div class="col-sm-8" style="width: 530px; padding-right: 0;">
                                    <input required ng-model="newAddr.detailAddress" type="text" class="form-control" name="addr" id="addr"
                                           placeholder="建议你填写详细地址，例如街道名、门牌号，楼层和房间号等信息" autocomplete="off" ng-change="checkForm(3)">
                                </div>
                                <div class="col-sm-2" style="padding: 0; width: 100px; padding-left: 10px;line-height: 34px;">
                                    <span class="text-inverse error" ng-show="newAddr.detailAddress && addrError">请勿超过30个字</span>
                                    <span ng-show="!myForm.addr.$invalid && !addrError" class="text-success heigth30">填写正确</span>
                                    <span class="text-inverse error" ng-show="myForm.addr.$touched && myForm.addr.$invalid">请输入详细地址</span>
                                </div>
                            </div>
                            <div class="form-group" style="margin-bottom:20px;margin-top:10px;">
                                <div class="col-sm-4" style="margin-left: 120px;">
                                    <div class="checkbox">
                                        <label class="check-active">
                                            <input ng-model="isSetTop" type="checkbox" id="check-act">
                                            <label for="check-act"></label>
                                            <span>设置为默认收货地址</span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="edit-btn">
                <button class="btn btn-success" ng-click="save()" type="button">保存</button>
            </div>
        </div>
    </div>
</div>
<style type="text/css">
    .new-address {
        padding-top:20px;
    }
    .new-address label{
        margin-right: -15px;
        font-size: 14px;
        font-weight: inherit;
        line-height: 34px;
    }
    .heigth30 {
        height: 30px;
        line-height: 30px;
    }
    .edit-rec-addr .form-control {
        color: black;
    }
    .edit-rec-addr strong {
        color: red;
    }
    .edit-rec-addr .format-correct {
        color: #008000;
        height: 30px;
        line-height: 30px;
    }
    .edit-rec-addr .format-error {
        color: red;
        height: 30px;
        line-height: 30px;
    }
    .select-adder{
        background:url("static/img/user/images/xiala.png") right no-repeat ;
        background-position-x: 180px;
    }
    .form-control{
        border-radius: 3px;
    }
    .new-address .edit-btn{
        text-align: center;
    }
    .new-address.edit-btn button{
        width: 70px;
        height: 32px;
        border-radius: 0;
    }
    .new-address.edit-btn button.btn-default{
        background: #c8c6c6 !important;
        color: #fff !important;
        border: none !important;
    }
    .form-horizontal .control-label{
        width: 120px;
        padding-right: 5px;
    }
    .checkbox .col-sm-3{
        width: 177px;
    }
</style>
<style>
    .com-del-box{
        position: fixed;
        z-index: 2;
        height: 152px;
        opacity: 1;
        background-color: white;
        width: 310px;
        -webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);
        box-shadow: 0 5px 15px rgba(0,0,0,.5);
        margin: -155px 0 0 -75px;
        top: 55%;
        left: 50%;
    }
    .com-del-box .title{
        height: 30px;
        background-color: #5078cb;
        text-align: right;
        padding-right: 15px;
        line-height: 30px;
    }
    .com-del-box .title a{
        color: white;
        font-size: 16px;
    }
    .com-del-box .content{
        width: 100%;
        text-align: center;
        margin: 0 auto;
    }
    .com-del-box .content p{
        line-height: 50px;
        font-size: 14px;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .com-del-box .content p i{
        color: #5078cb;
        font-size: 16px;
        margin-right: 10px;
    }
    .com-del-box .content div{
        width: 100%;
        text-align: center;
        margin: 0 auto;
    }
    .com-del-box .content div a{
        width: 55px;
        height: 26px;
        line-height: 26px;
        display: inline-block;
        text-align: center;
        font-size: 14px;
    }
    .com-del-box .content div a:first-child{
        background: #b4b5b9;
        color: #333;
        margin-right: 10px;
    }
    .com-del-box .content div a:last-child{
        background: #5078cb;
        color: #fff;
    }
    .com-del-box .content div a:hover{
        background: #3f7ae3;
        color: #fff;
    }
</style>
<div class="com-del-box" ng-if="showDeleteFrame">
    <div class="title">
        <a ng-click="cancelDelete()"><i class="fa fa-close fa-lg"></i></a>
    </div>
    <div class="content">
        <p><i class="fa fa-exclamation-circle"></i>是否删除此地址</p>
        <div><a ng-click="cancelDelete()">取消</a><a ng-click="ensureDelete(deleteObject.id)">确认</a></div>
    </div>
</div>