address_manage.html 10.6 KB
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" href="__INDEX__/css/weui.css">
    <link rel="stylesheet" href="__INDEX__/css/jquery-weui.css">
    <link rel="stylesheet" href="__INDEX__/css/demos.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_834805_bx3vyrf79mj.css">
    <link rel="stylesheet" href="__INDEX__/css/base.css">
    <link rel="stylesheet" href="__INDEX__/css/swiper.min.css">
    <script type="text/javascript" src="__INDEX__/js/base.js"></script>
    <title>选择地址</title>
    <style>
        body,html{
            background: RGBA(245, 246, 250, 1);
        }
        .icon-dizhi{
            color:#999999;
            font-size: 0.55rem;
        }
        .manageraddress{
            border-bottom: 1px solid #f5f5f5;
            padding-bottom: 0.41rem;
            padding-top: 0.1rem;
        }
        .addresshead{
            display:flex;
            /*margin-top: 0.38rem;*/
            margin-left: 0.23rem;
        }
        .place{
            width:6rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color:#1A1A1A;
            font-size: 0.26rem;
            margin-left: 0.18rem;
            margin-top: 0.2rem;
        }
        .info{
            display:flex;
            margin-left: 0.96rem;
        }
        .name{
            color:#1A1A1A;
            font-size: 0.28rem;
        }
        .telphone{
            color:#1A1A1A;
            font-size: 0.28rem;
            margin-left: 0.59rem;
        }
        .icon-xuanzekuang{
            font-size: 0.28rem;
            color:#999999;
            width:0.32rem;
            text-align: center;
            height:0.28rem;
            line-height: 0.28rem;
        }
        .icon-xuanze-fangkuang{
            width:0.32rem;
            text-align: center;
            font-size: 0.28rem;
            height:0.28rem;
            line-height: 0.28rem;
            color:#FF0800;
        }
        .default_place{
            color:#333333;
            font-size: 0.24rem;
            height:0.28rem;
            line-height: 0.28rem;
            margin-left: 0.11rem;
        }
        .default_body{
            display:flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.26rem 0.32rem 0.26rem 0.8rem;
        }
        .default,.default_type,.edit,.delect{
            display:flex;
        }
        .delect{
            margin-left: 0.54rem;
        }
        .defauledi,.defaultdel{
            color:#666666;
            font-size: 0.24rem;
            height:0.23rem;
            line-height: 0.23rem;
            margin-left: 0.1rem;
        }
        .icon-bianji,.icon-shanchu{
            height:0.23rem;
            line-height: 0.23rem;
        }
        .default_list{
            background: #fff;
            margin-top: 0.16rem;

        }
        .default_list:first-child{
            margin-top: 0;
        }
        .addplace{
            width:7.5rem;
            height:1rem;
            background: RGBA(254, 10, 1, 1);
            color:#fff;
            font-size: 0.36rem;
            text-align: center;
            line-height: 1rem;
            position:fixed;
            bottom:0;
            left:0;
            right:0

        }
        .managerplace{
            padding-bottom:1.3rem;
        }



        .add_address{
            color:#999999;
            font-size: 0.36rem;
            margin: 0.32rem 2.31rem 0 2.31rem;
        }
        .addressplus{
            width:2.8rem;
            height:0.8rem;
            border:2px solid rgba(186,27,43,1);
            border-radius:0.05rem;
            color:#BA1B2B;
            font-size: 0.32rem;
            text-align: center;
            line-height: 0.8rem;
            margin: 0.28rem 2.34rem 0 2.34rem;
        }
        .deletewrapper{
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
            position:fixed;
            top:0;
            left:0;
            right:0;
            z-index: 5;
        }
        .deletepop{
            width:5.2rem;
            height:3rem;
            background: #ffffff;
            border-radius: 0.1rem;
            position: absolute;
            z-index: 6;
            /*left:0.4rem;*/
            /*top: 3rem;*/
            top:50%;
            left:50%;
            transform: translate(-50%,-50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            overflow: hidden;
            padding-top: 0.29rem;

        }
        .suredelete{
            color:#1A1A1A;
            font-size: 0.32rem;
        }
        .certainornot{
            font-size: 0.3rem;
            color:#666666;
            margin-top: 0.43rem;
        }
        .certain{
            display:flex;
            justify-content:space-between;
            align-items: center;
            border-top:1px solid #f5f5f5;
            margin-top: 0.4rem;

        }
        .cancel,.sure{
            width:2.6rem;
            height:0.88rem;
            line-height: 0.88rem;
            color:#666666;
            font-size: 0.3rem;
            text-align: center;
        }
        .sure{
            color:#FF0000;
        }
        .address_img{
            width:3.2rem;
            height:2.52rem;
            margin: 0 auto;
            margin-top: 3.06rem;
        }
        .address_img img{
            width:100%;
        }
    </style>
</head>
<body>
<div class="deletewrapper" style="display:none">
    <div class="deletepop">
        <p class="suredelete">确认删除</p>
        <p class="certainornot">确定删除该地址吗?</p>
        <div class="certain">
            <p class="cancel">取消</p>
            <p class="sure">确认</p>
        </div>
    </div>
</div>
<div class="container">
    <div class="noplace" style="display:none" >
        <div class="address_img">
            <img src="__INDEX__/img/searchaddress.png" alt="">
        </div>
        <p class="add_address">您还没有添加地址</p>
        <div class="addressplus">添加地址</div>
    </div>
    <div class="haveplace" >
        <div class="managerplace">
            <volist name="data" id="vo">
            <div class="default_list">
                <div class="manageraddress">
                    <div class="addresshead">
                        <p class="iconfont icon-dizhi"></p>
                        <p class="place">{$vo.province}{$vo.city}{$vo.county}{$vo.place}</p>
                    </div>
                    <div class="info">
                        <p class="name">{$vo.name}</p>
                        <p class="telphone">{$vo.mobile}</p>
                    </div>
                </div>
                <div class="default_body">
                    <div class="default">
                        <if condition="$vo['is_sta'] eq '1'">
                            <p data-id="{$vo.id}" data-var="2" class="iconfont icon-xuanzekuang xuan" style="display: block"></p>
                            <p data-id="{$vo.id}" data-var="1" class="iconfont icon-xuanze-fangkuang" style="display:none"></p>
                            <else/>
                            <p data-id="{$vo.id}" data-var="1" class="iconfont icon-xuanzekuang xuan" style="display: none"></p>
                            <p data-id="{$vo.id}" data-var="2" class="iconfont icon-xuanze-fangkuang"  style="display:block"></p>
                        </if>
                        <p class="default_place">默认地址</p>
                    </div>
                    <div class="default_type">
                        <div class="edit" data-url="{:url('user/center/editAddress',['id'=>$vo['id']])}">
                            <p class="iconfont icon-bianji"></p>
                            <p class="defauledi">编辑</p>
                        </div>
                        <div class="delect">
                            <p class="iconfont icon-shanchu"></p>
                            <p class="defaultdel" data-id="{$vo.id}">删除</p>
                        </div>
                    </div>
                </div>
            </div>
            </volist>
        </div>

        <div class="addplace">新增收货地址</div>
    </div>

</div>
<script src="__INDEX__/js/jquery.min.js"></script>
<script>
    var id='';
    //没有收获地址时候新增收获地址
    $(".addressplus").click(function(){
        window.location.href="{:url('user/Center/addAddress')}";
    })
    //有收获地址的时候新增收获地址
    $(".addplace").click(function(){
        window.location.href="{:url('user/Center/addAddress')}";
    })
    $(".edit").click(function(){
        window.location.href=$(this).attr('data-url');
    });
    //删除地址
    $(".defaultdel").click(function(){
        id = $(this).attr('data-id');
        $(".deletewrapper").show()
    })

    //删除确定
    $(".sure").click(function(){
        $(".deletewrapper").css("display","none")
        $.ajax({
            url:"{:url('user/Center/delAddress')}",
            data:{
                id:id,
            },
            type:"POST",
            dataType:"JSON",

            success: function (data) {
                window.location.href=data.url;
            }
        })
    })
    $(".cancel").click(function(){
        $(".deletewrapper").css("display","none")
    })


    //选择默认地址
    console.log($(".xuan"))
    $(".xuan").click(function(){
        $(this).css("display","none");
        $(this).siblings(".icon-xuanze-fangkuang").css("display","block");
        $(this).parents(".default_list").siblings(".default_list").children(".default_body").children(".default").children(".icon-xuanze-fangkuang").css("display","none")
        $(this).parents(".default_list").siblings(".default_list").children(".default_body").children(".default").children(".xuan").css("display","block")
        id=$(this).attr('data-id');
        $.ajax({
            url:"{:url('user/Center/setDefault')}",
            data:{
                id:id,
                is_sta:$(this).attr('data-var')
            },
            type:"POST",
            dataType:"JSON",
        })
    })
    $(".icon-xuanze-fangkuang").click(function(){
        $(this).css("display","none");
        $(this).siblings(".xuan").css("display","block")
        $.ajax({
            url:"{:url('user/Center/setDefault')}",
            data:{
                id:id,
                is_sta:$(this).attr('data-var')
            },
            type:"POST",
            dataType:"JSON",
        })
    })
</script>
</body>
</html>