diff --git a/public/static/index/css/order.css b/public/static/index/css/order.css index 48619d2..b967a74 100644 --- a/public/static/index/css/order.css +++ b/public/static/index/css/order.css @@ -31,7 +31,7 @@ body,html{ line-height: 0.2rem; } .people_place { - font-size: 0.26rem; + font-size: 0.26rem; color:#1A1A1A } .row{ @@ -181,8 +181,8 @@ body,html{ margin-top:0.47rem; } .pay_name{ - color:#1A1A1A; - font-size: 0.26rem; + color:#1A1A1A; + font-size: 0.26rem; } /*合计*/ .total{ @@ -204,7 +204,7 @@ body,html{ font-size: 0.26rem; } .totalmoney{ - color:#FF0000; + color:#FF0000; font-size: 0.26rem; } /*买家留言*/ @@ -220,7 +220,7 @@ body,html{ margin-bottom: 1.2rem; } .buysend{ - color:#26363A; + color:#26363A; font-size: 0.3rem; font-weight: bold; } @@ -274,7 +274,7 @@ body,html{ line-height:1rem ; } .icon-xuanzhong{ - color:#FF0000; + /*color:#FF0000;*/ } /*遮罩层*/ .wrapper{ @@ -318,7 +318,7 @@ body,html{ display:flex; justify-content:space-between; align-items: center; - padding: 0.36rem 0; + padding: 0.36rem 0; border-bottom: 1px solid #f5f5f5; } .buyorder{ @@ -344,7 +344,7 @@ body,html{ font-size: 0.28rem; } .surepay{ - color:#FF0000; + color:#FF0000; font-size: 0.32rem; margin-top: 0.38rem; } @@ -360,10 +360,10 @@ body,html{ border-right: 0; } .add{ - border-left: 0; + border-left: 0; } .reduce img,.add img{ - width:60%; + width:60%; height:60%; } @@ -405,12 +405,12 @@ body,html{ padding-bottom: 0.27rem; } .paypop p{ - font-size: 0.28rem; - color:#1A1A1A; - margin-top: 0.05rem; + font-size: 0.28rem; + color:#1A1A1A; + margin-top: 0.05rem; } .paycertain{ - font-size: 0.32rem; - color:#FF0000; + font-size: 0.32rem; + color:#FF0000; margin-top: 0.13rem; } diff --git a/public/themes/simpleboot3/cart/zj_cart/order_confirm.html b/public/themes/simpleboot3/cart/zj_cart/order_confirm.html index 33538eb..1366b20 100644 --- a/public/themes/simpleboot3/cart/zj_cart/order_confirm.html +++ b/public/themes/simpleboot3/cart/zj_cart/order_confirm.html @@ -13,6 +13,9 @@ <script src="http://res2.wx.qq.com/open/js/jweixin-1.4.0.js"></script> <title>确认订单</title> <style> + body, html { + background: RGBA(245, 246, 250, 1); + } .entermoney{ width:3rem; border:none; @@ -27,7 +30,7 @@ width: 100%; height: 100%; /*background-color: rgba(0,0,0,0.5);*/ - background: #fff; + background: RGBA(245, 246, 250, 1); position: fixed; top: 0; left: 0; @@ -35,6 +38,20 @@ z-index: 5; overflow: scroll; } + /*新增地址*/ + .addplacewrapper{ + width: 100%; + height: 100%; + /*background-color: rgba(0,0,0,0.5);*/ + background: #fff; + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 5; + overflow-y: hidden; + + } .addaddress{ display:flex; } @@ -50,10 +67,7 @@ padding: 0.38rem 0.23rem; border-bottom: 1px solid #f5f5f5; } - .addresspoup{ - - } .icon-xuanze-fangkuang{ color:#FF0800; } @@ -66,9 +80,636 @@ .address_place{ margin-top: 0.2rem; } + + .address_img{ + width:3.2rem; + height:2.52rem; + margin: 0 auto; + margin-top: 3.06rem; + } + .address_img img{ + width:100%; + } + .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;} + + /*选择地址*/ + .managerplace { + padding-bottom: 1.3rem; + } + .default_list { + background: #fff; + margin-top: 0.16rem; + } + .default_list:first-child { + margin-top: 0; + } + .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; + } + .icon-dizhi { + color: #999999; + font-size: 0.55rem; + } + .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; + } + .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; + } + .icon-bianji, .icon-shanchu { + height: 0.23rem; + line-height: 0.23rem; + } + .defauledi, .defaultdel { + color: #666666; + font-size: 0.24rem; + height: 0.23rem; + line-height: 0.23rem; + margin-left: 0.1rem; + } + .name { + color: #1A1A1A; + font-size: 0.28rem; + } + .telphone { + color: #1A1A1A; + font-size: 0.28rem; + margin-left: 0.59rem; + } + .default_place { + color: #333333; + font-size: 0.24rem; + height: 0.28rem; + line-height: 0.28rem; + margin-left: 0.11rem; + } + .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; + } + /*增加收货地址*/ + .addpositionwrapper{ + width: 100%; + height: 100%; + /*background-color: rgba(0,0,0,0.5);*/ + background: RGBA(245, 246, 250, 1); + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 5; + overflow: scroll; + } + .select { + background: #fff; + } + .select_address { + width: 6.86rem; + margin: 0 auto; + height: 1.01rem; + border-bottom: 1px solid #f5f5f5; + display: flex; + /* justify-content: space-between; */ + align-items: center; + position: relative; + padding: 0 0.33rem; + } + + .icon-xiaotuziCduan_ { + color: #999999; + font-size: 0.5rem; + position: absolute; + right: 0.3rem; + z-index: 5; + } + .detail_address { + width: 6.86rem; + margin: 0 auto; + height: 1.01rem; + border-bottom: 1px solid #f5f5f5; + display: flex; + /* justify-content: space-between; */ + align-items: center; + padding: 0 0.33rem; + } + .detailplace { + border: none; + outline: none; + /* margin-right: 0.6rem; */ + } + .detailplace { + color: #999999; + font-size: 0.3rem; + } + .selectadd { + width: 4.6rem; + position: relative; + border: none; + outline: none; + z-index: 8; + /* margin-left: 0.5rem; */ + } + + .select_address{ + width:6.86rem; + margin: 0 auto; + height:1.01rem; + border-bottom: 1px solid #f5f5f5; + display:flex; + /*justify-content: space-between;*/ + align-items: center; + position: relative; + padding: 0 0.33rem; + + } + .weui-cell{ + /*display:flex;*/ + /*justify-content: space-between;*/ + /*align-items: center;*/ + } + .detail_address{ + width:6.86rem; + margin: 0 auto; + height:1.01rem; + border-bottom: 1px solid #f5f5f5; + display:flex; + /*justify-content: space-between;*/ + align-items: center; + padding: 0 0.33rem; + } + .placeselect{ + width:1.5rem; + color:#1A1A1A; + font-size: 0.3rem; + } + .detailplace{ + color:#999999; + font-size: 0.3rem; + } + .province{ + color:#999999; + font-size: 0.3rem; + } + .weui-label { + width:1.3rem; + } + .detailplace{ + border:none; + outline: none; + /*margin-right:0.6rem;*/ + } + .select{ + background: #fff; + } + .save{ + width:6.86rem; + height:0.88rem; + background:#FE0A01; + color:#fff; + font-size:0.32rem ; + text-align: center; + line-height: 0.88rem; + border-radius: 0.44rem; + position:fixed; + bottom:0.55rem; + left:0; + right:0; + margin: 0 auto; + box-shadow:0px 15px 30px 0px rgba(254,10,1,0.24); + } + .icon-xiaotuziCduan_{ + color:#999999; + font-size: 0.5rem; + position:absolute; + right:0.3rem; + z-index: 5; + } + .selectadd{ + width:4.6rem; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + position:relative; + border:none; + outline:none; + z-index: 8; + /*margin-left: 0.5rem;*/ + } + /*删除地址*/ + .deletewrapper{ + width: 100%; + height: 100%; + background-color: rgba(0,0,0,0.5); + position:fixed; + top:0; + left:0; + right:0; + z-index: 99; + } + .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; + } + + + .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; + } </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="addplacewrapper" style="display:none"> + <div class="noplace" > + <div class="address_img"> + <img src="../img/searchaddress.png" alt=""> + </div> + <p class="add_address">您还没有添加地址</p> + <div class="addressplus">添加地址</div> + </div> +</div> +<!--添加地址--> +<div class="addpositionwrapper" style="display:none"> + <div class="select"> + <div class="select_address"> + <p class="placeselect">选择地区</p> + <div class="weui-cell" style="padding: 0"> + <!--<div class="weui-cell__hd"><label for="date" class="weui-label place">选择地区</label></div>--> + <div class="weui-cell__bd"> + <input class="weui-input selectadd" id="end" type="text" placeholder="请选择省市区" > + </div> + </div> + <p class="iconfont icon-xiaotuziCduan_" id="select"></p> + </div> + <div class="detail_address"> + <p class="placeselect">详细地址</p> + <input type="text" placeholder="请填写详细地址" class="detailplace"> + </div> + <div class="detail_address"> + <p class="placeselect">收货人</p> + <input type="text" placeholder="请填写收货人" class="detailplace"> + </div> + <div class="detail_address"> + <p class="placeselect">联系电话</p> + <input type="text" placeholder="请填写联系电话" class="detailplace"> + </div> + </div> + <div class="save">保存</div> + </div> +<!--选择地址--> +<div class="addresswrapper" style="display:none"> + <!--<div class="addresspoup">--> + <!--<volist name="address" id="vo">--> + <!--<div class="addaddress">--> + <!--<p class="iconfont icon-xuanzekuang xuan" data-id="{$vo.id}"></p>--> + <!--<p class="iconfont icon-xuanze-fangkuang" style="display:none"></p>--> + <!--<div class="addressinfo">--> + <!--<div class="address_text">--> + <!--<p class="address_name" id="name_{$vo.id}">{$vo.name}</p>--> + <!--<p class="address_num" id="num_{$vo.id}">{$vo.mobile}</p>--> + <!--</div>--> + <!--<p class="address_place" id="place_{$vo.id}">{$vo.province}{$vo.city}{$vo.county}{$vo.place}</p>--> + <!--</div>--> + <!--</div>--> + <!--</volist>--> + <!--</div>--> + + + <div class="haveplace" > + <div class="managerplace"> + <div class="default_list"> + <div class="manageraddress"> + <div class="addresshead"> + <p class="iconfont icon-dizhi"></p> + <p class="place">天津市和平区全境 天津路天津公寓10栋808号</p> + </div> + <div class="info"> + <p class="name">王小明</p> + <p class="telphone">18652151666</p> + </div> + </div> + <div class="default_body"> + + <div class="default"> + <p class="iconfont icon-xuanzekuang xuan" ></p> + <p class="iconfont icon-xuanze-fangkuang" style="display:none"></p> + <p class="default_place">默认地址</p> + </div> + <div class="default_type"> + <div class="edit"> + <p class="iconfont icon-bianji"></p> + <p class="defauledi">编辑</p> + </div> + <div class="delect"> + <p class="iconfont icon-shanchu"></p> + <p class="defaultdel">删除</p> + </div> + </div> + </div> + </div> + <div class="default_list"> + <div class="manageraddress"> + <div class="addresshead"> + <p class="iconfont icon-dizhi"></p> + <p class="place">天津市和平区全境 天津路天津公寓10栋808号</p> + </div> + <div class="info"> + <p class="name">王小明</p> + <p class="telphone">18652151666</p> + </div> + </div> + <div class="default_body"> + + <div class="default"> + <p class="iconfont icon-xuanzekuang xuan"></p> + <p class="iconfont icon-xuanze-fangkuang" style="display:none"></p> + <p class="default_place">默认地址</p> + </div> + <div class="default_type"> + <div class="edit"> + <p class="iconfont icon-bianji"></p> + <p class="defauledi">编辑</p> + </div> + <div class="delect"> + <p class="iconfont icon-shanchu"></p> + <p class="defaultdel">删除</p> + </div> + </div> + </div> + </div> + <div class="default_list"> + <div class="manageraddress"> + <div class="addresshead"> + <p class="iconfont icon-dizhi"></p> + <p class="place">天津市和平区全境 天津路天津公寓10栋808号</p> + </div> + <div class="info"> + <p class="name">王小明</p> + <p class="telphone">18652151666</p> + </div> + </div> + <div class="default_body"> + + <div class="default"> + <p class="iconfont icon-xuanzekuang xuan"></p> + <p class="iconfont icon-xuanze-fangkuang" style="display:none"></p> + <p class="default_place">默认地址</p> + </div> + <div class="default_type"> + <div class="edit"> + <p class="iconfont icon-bianji"></p> + <p class="defauledi">编辑</p> + </div> + <div class="delect"> + <p class="iconfont icon-shanchu"></p> + <p class="defaultdel">删除</p> + </div> + </div> + </div> + </div> + <div class="default_list"> + <div class="manageraddress"> + <div class="addresshead"> + <p class="iconfont icon-dizhi"></p> + <p class="place">天津市和平区全境 天津路天津公寓10栋808号</p> + </div> + <div class="info"> + <p class="name">王小明</p> + <p class="telphone">18652151666</p> + </div> + </div> + <div class="default_body"> + + <div class="default"> + <p class="iconfont icon-xuanzekuang xuan"></p> + <p class="iconfont icon-xuanze-fangkuang" style="display:none"></p> + <p class="default_place">默认地址</p> + </div> + <div class="default_type"> + <div class="edit"> + <p class="iconfont icon-bianji"></p> + <p class="defauledi">编辑</p> + </div> + <div class="delect"> + <p class="iconfont icon-shanchu"></p> + <p class="defaultdel">删除</p> + </div> + </div> + </div> + </div> + <div class="default_list"> + <div class="manageraddress"> + <div class="addresshead"> + <p class="iconfont icon-dizhi"></p> + <p class="place">天津市和平区全境 天津路天津公寓10栋808号</p> + </div> + <div class="info"> + <p class="name">王小明</p> + <p class="telphone">18652151666</p> + </div> + </div> + <div class="default_body"> + + <div class="default"> + <p class="iconfont icon-xuanzekuang xuan"></p> + <p class="iconfont icon-xuanze-fangkuang" style="display:none"></p> + <p class="default_place">默认地址</p> + </div> + <div class="default_type"> + <div class="edit"> + <p class="iconfont icon-bianji"></p> + <p class="defauledi">编辑</p> + </div> + <div class="delect"> + <p class="iconfont icon-shanchu"></p> + <p class="defaultdel">删除</p> + </div> + </div> + </div> + </div> + <div class="default_list"> + <div class="manageraddress"> + <div class="addresshead"> + <p class="iconfont icon-dizhi"></p> + <p class="place">天津市和平区全境 天津路天津公寓10栋808号</p> + </div> + <div class="info"> + <p class="name">王小明</p> + <p class="telphone">18652151666</p> + </div> + </div> + <div class="default_body"> + + <div class="default"> + <p class="iconfont icon-xuanzekuang xuan"></p> + <p class="iconfont icon-xuanze-fangkuang" style="display:none"></p> + <p class="default_place">默认地址</p> + </div> + <div class="default_type"> + <div class="edit"> + <p class="iconfont icon-bianji"></p> + <p class="defauledi">编辑</p> + </div> + <div class="delect"> + <p class="iconfont icon-shanchu"></p> + <p class="defaultdel">删除</p> + </div> + </div> + </div> + </div> + <div class="default_list"> + <div class="manageraddress"> + <div class="addresshead"> + <p class="iconfont icon-dizhi"></p> + <p class="place">天津市和平区全境 天津路天津公寓10栋808号</p> + </div> + <div class="info"> + <p class="name">王小明</p> + <p class="telphone">18652151666</p> + </div> + </div> + <div class="default_body"> + + <div class="default"> + <p class="iconfont icon-xuanzekuang xuan"></p> + <p class="iconfont icon-xuanze-fangkuang" style="display:none"></p> + <p class="default_place">默认地址</p> + </div> + <div class="default_type"> + <div class="edit"> + <p class="iconfont icon-bianji"></p> + <p class="defauledi">编辑</p> + </div> + <div class="delect"> + <p class="iconfont icon-shanchu"></p> + <p class="defaultdel">删除</p> + </div> + </div> + </div> + </div> + + </div> + + <div class="addplace">新增收货地址</div> + </div> +</div> <!--确认订单积分--> <div class="wrapper" style="display:none"> <div class="pop"> @@ -92,24 +733,6 @@ <div class="surepay">确认支付</div> </div> </div> -<!--选择地址--> -<div class="addresswrapper" style="display:none"> - <div class="addresspoup"> - <volist name="address" id="vo"> - <div class="addaddress"> - <p class="iconfont icon-xuanzekuang xuan" data-id="{$vo.id}"></p> - <p class="iconfont icon-xuanze-fangkuang" style="display:none"></p> - <div class="addressinfo"> - <div class="address_text"> - <p class="address_name" id="name_{$vo.id}">{$vo.name}</p> - <p class="address_num" id="num_{$vo.id}">{$vo.mobile}</p> - </div> - <p class="address_place" id="place_{$vo.id}">{$vo.province}{$vo.city}{$vo.county}{$vo.place}</p> - </div> - </div> - </volist> - </div> -</div> <!--确认支付--> <div class="paywrapper" style="display:none"> <div class="paypop"> @@ -277,11 +900,17 @@ }) var address_id = '{$default_address_id}'; $(".xuan").click(function(){ - $(".addresswrapper").css("display","none") + window.event.stopPropagation(); + $(".addresswrapper").hide() + // $(this).css("display","none"); + // $(this).siblings(".icon-xuanze-fangkuang").css("display","block"); + // $(this).parents(".addaddress").siblings(".addaddress").children(".xuan").css("display","block"); + // $(this).parents(".addaddress").siblings(".addaddress").children(".icon-xuanze-fangkuang").css("display","none") + $(this).css("display","none"); $(this).siblings(".icon-xuanze-fangkuang").css("display","block"); - $(this).parents(".addaddress").siblings(".addaddress").children(".xuan").css("display","block"); - $(this).parents(".addaddress").siblings(".addaddress").children(".icon-xuanze-fangkuang").css("display","none") + $(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") var id=$(this).attr('data-id'); $(".people_name").html($("#name_"+id).html()); $(".people_phone").html($("#num_"+id).html()); @@ -301,5 +930,43 @@ ] // 必填,需要使用的JS接口列表 }); + + //隐藏地址弹出层 + $(".addresswrapper").click(function(){ + $(this).css("display","none") + }) + //编辑地址 + $(".edit").click(function(){ + window.event.stopPropagation(); + $(".addresswrapper").css("display","none"); + $(".addpositionwrapper").css("display","block") + }) + //保存地址 + $(".save").click(function(){ + window.event.stopPropagation(); + $(".addpositionwrapper").css("display","none") + }) + //选择地址 + $(".people_info").click(function(){ + window.event.stopPropagation(); + $(".addresswrapper").css("display","block") + }) + //删除地址 + $(".delect").click(function(){ + window.event.stopPropagation(); + + $(".deletewrapper").show() + }) + + //删除确定 + $(".sure").click(function(){ + window.event.stopPropagation(); + $(".deletewrapper").css("display","none") + }) + $(".cancel").click(function(){ + window.event.stopPropagation(); + $(".addresswrapper").show() + $(".deletewrapper").css("display","none") + }) </script> </html>