|
|
<!DOCTYPE html>
|
|
|
<html lang="zh">
|
|
|
{include file="public/head"/}
|
|
|
<!--swiper引入-->
|
|
|
<link rel="stylesheet" href="__CDN__/assets/store/js/Swiper-3.4.2/css/swiper.min.css">
|
|
|
<script type="text/javascript" src="__CDN__/assets/store/js/Swiper-3.4.2/js/swiper.min.js"></script>
|
|
|
<style>
|
|
|
/*新增、修改收货人信息模态窗*/
|
|
|
.modal-dialog {
|
|
|
width: 423px;
|
|
|
height: 485px;
|
|
|
}
|
|
|
|
|
|
.modal-header {
|
|
|
height: 80px;
|
|
|
border: 0;
|
|
|
}
|
|
|
|
|
|
.modal-body {
|
|
|
padding: 10px 24px 20px 24px;
|
|
|
max-height: none;
|
|
|
}
|
|
|
|
|
|
.modal-title {
|
|
|
height: 50px;
|
|
|
line-height: 50px;
|
|
|
text-align: center;
|
|
|
font-size: 20px;
|
|
|
font-family: PingFang SC;
|
|
|
font-weight: 500;
|
|
|
color: rgba(6, 18, 30, 1);
|
|
|
}
|
|
|
|
|
|
form {
|
|
|
font-size: 14px;
|
|
|
font-family: PingFang SC;
|
|
|
font-weight: 500;
|
|
|
color: rgba(61, 68, 77, 1);
|
|
|
}
|
|
|
|
|
|
form .form-group {
|
|
|
width: 100%;
|
|
|
height: 54px;
|
|
|
margin: 0 0 20px 0;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
form .form-group .tipsInfo {
|
|
|
position: absolute;
|
|
|
width: 100%;
|
|
|
height: 20px;
|
|
|
font-size: 10px;
|
|
|
color: red;
|
|
|
top: 55px;
|
|
|
left: 0;
|
|
|
}
|
|
|
|
|
|
form .form-group .form-control {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
box-shadow: none;
|
|
|
}
|
|
|
|
|
|
form .form-group:nth-child(3), form .form-group:nth-child(5) {
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
form .form-group:nth-child(3) span {
|
|
|
display: inline-block;
|
|
|
position: absolute;
|
|
|
top: 15px;
|
|
|
right: 20px;
|
|
|
font-size: 16px;
|
|
|
font-family: PingFang SC;
|
|
|
font-weight: 400;
|
|
|
color: rgba(140, 145, 152, 1);
|
|
|
}
|
|
|
|
|
|
form .form-group:nth-child(5) span {
|
|
|
display: inline-block;
|
|
|
position: absolute;
|
|
|
top: 35px;
|
|
|
left: 12px;
|
|
|
font-size: 16px;
|
|
|
font-family: PingFang SC;
|
|
|
font-weight: 400;
|
|
|
line-height: 22px;
|
|
|
color: rgba(140, 145, 152, 1);
|
|
|
}
|
|
|
|
|
|
form p {
|
|
|
height: 22px;
|
|
|
padding-left: 9px;
|
|
|
font-size: 16px;
|
|
|
font-family: PingFang SC;
|
|
|
font-weight: 500;
|
|
|
line-height: 22px;
|
|
|
color: rgba(6, 18, 30, 1);
|
|
|
}
|
|
|
|
|
|
form button {
|
|
|
width: 100%;
|
|
|
height: 51px;
|
|
|
border: 0 !important;
|
|
|
background: rgba(0, 159, 142, 1) !important;
|
|
|
border-radius: 2px !important;
|
|
|
font-size: 18px !important;
|
|
|
font-family: PingFang SC;
|
|
|
font-weight: 400 !important;
|
|
|
color: rgba(255, 255, 255, 1) !important;
|
|
|
}
|
|
|
|
|
|
form .imgBox {
|
|
|
margin-bottom: 20px;
|
|
|
}
|
|
|
</style>
|
|
|
<style>
|
|
|
body {
|
|
|
background: rgba(249, 249, 249, 1);
|
|
|
}
|
|
|
|
|
|
.content {
|
|
|
width: 100%;
|
|
|
font-size: 0;
|
|
|
}
|
|
|
|
|
|
/*订单信息部分样式*/
|
|
|
.content .orderInfoBox {
|
|
|
width: 100%;
|
|
|
/*height: 905px;*/
|
|
|
background: rgba(249, 249, 249, 1);
|
|
|
}
|
|
|
|
|
|
.content .orderInfoBox .titleBox {
|
|
|
width: 1200px;
|
|
|
height: 60px;
|
|
|
line-height: 60px;
|
|
|
background: rgba(255, 255, 255, 1);
|
|
|
border-radius: 8px;
|
|
|
margin: 12px auto;
|
|
|
}
|
|
|
|
|
|
.content .orderInfoBox .titleBox span:first-child {
|
|
|
display: inline-block;
|
|
|
float: left;
|
|
|
width: 6px;
|
|
|
height: 20px;
|
|
|
margin-top: 21px;
|
|
|
background: rgba(0, 159, 142, 1);
|
|
|
border-radius: 2px;
|
|
|
}
|
|
|
|
|
|
.content .orderInfoBox .titleBox span:nth-child(2) {
|
|
|
height: 22px;
|
|
|
line-height: 22px;
|
|
|
float: left;
|
|
|
margin-top: 20px;
|
|
|
padding-left: 12px;
|
|
|
font-size: 16px;
|
|
|
font-family: PingFang SC;
|
|
|
font-weight: 500;
|
|
|
color: rgba(0, 159, 142, 1);
|
|
|
}
|
|
|
|
|
|
/*物流方式部分样式*/
|
|
|
.content .orderInfoBox .sendModeBox {
|
|
|
width: 1200px;
|
|
|
height: 108px;
|
|
|
background: rgba(255, 255, 255, 1);
|
|
|
border-radius: 8px;
|
|
|
margin: 0 auto 12px auto;
|
|
|
}
|
|
|
|
|
|
.content .orderInfoBox .title {
|
|
|
width: 100%;
|
|
|
height: 40px;
|
|
|
padding: 0 30px;
|
|
|
font-size: 14px;
|
|
|
font-family: PingFang SC;
|
|
|
font-weight: 500;
|
|
|
line-height: 40px;
|
|
|
color: rgba(61, 68, 77, 1);
|
|
|
border-bottom: 1px solid rgba(238, 238, 238, 1);
|
|
|
margin: 0;
|
|
|
}
|
|
|
|
|
|
.content .orderInfoBox .sendModeBox ul {
|
|
|
width: 100%;
|
|
|
height: 68px;
|
|
|
padding: 0 30px;
|
|
|
}
|
|
|
|
|
|
.content .orderInfoBox .sendModeBox ul li {
|
|
|
list-style-type: none;
|
|
|
float: left;
|
|
|
width: 95px;
|
|
|
height: 65px;
|
|
|
line-height: 65px;
|
|
|
margin-right: 30px;
|
|
|
font-size: 14px;
|
|
|
font-family: PingFang SC;
|
|
|
font-weight: 400;
|
|
|
color: rgba(6, 18, 30, 1);
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
|
|
|
.content .orderInfoBox .sendModeBox ul li img {
|
|
|
width: 16px;
|
|
|
height: 16px;
|
|
|
margin-right: 12px;
|
|
|
}
|
|
|
|
|
|
/*快递_收货人信息部分样式*/
|
|
|
.content .orderInfoBox .consigneeBox {
|
|
|
width: 1200px;
|
|
|
background: rgba(255, 255, 255, 1);
|
|
|
border-radius: 8px;
|
|
|
margin: 0 auto 12px auto;
|
|
|
}
|
|
|
|
|
|
.content .orderInfoBox .title {
|
|
|
display: inline-block;
|
|
|
}
|
|
|
|
|
|
.content .orderInfoBox .title span {
|
|
|
display: inline-block;
|
|
|
float: right;
|
|
|
width: 84px;
|
|
|
height: 40px;
|
|
|
font-size: 14px;
|
|
|
font-family: PingFang SC;
|
|
|
font-weight: 500;
|
|
|
line-height: 40px;
|
|
|
color: rgba(0, 159, 142, 1);
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
|
|
|
.content .orderInfoBox .consigneeBox ul {
|
|
|
width: 100%;
|
|
|
padding: 0;
|
|
|
}
|
|
|
|
|
|
.content .orderInfoBox .consigneeBox ul li {
|
|
|
list-style-type: none;
|
|
|
width: 100%;
|
|
|
height: 112px;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
|
|
|
.content .orderInfoBox .consigneeBox ul li .imgBox {
|
|
|
float: left;
|
|
|
width: 76px;
|
|
|
height: 100%;
|
|
|
text-align: center;
|
|
|
line-height: 112px;
|
|
|
}
|
|
|
|
|
|
.content .orderInfoBox .consigneeBox ul li .contentBox {
|
|
|
width: 1090px;
|
|
|
height: 100%;
|
|
|
margin-left: 77px;
|
|
|
overflow: hidden;
|
|
|
border-bottom: 1px solid rgba(238, 238, 238, 1);
|
|
|
}
|
|
|
|
|
|
.content .orderInfoBox .consigneeBox ul li .contentBox .box {
|
|
|
width: 100%;
|
|
|
height: 20px;
|
|
|
}
|
|
|
|
|
|
.content .orderInfoBox .consigneeBox ul li .contentBox .box:first-child {
|
|
|
margin: 30px 0 12px 0;
|
|
|
}
|
|
|
|
|
|
.content .orderInfoBox .consigneeBox ul li .contentBox .box {
|
|
|
margin: 0;
|
|
|
font-size: 14px;
|
|
|
font-family: PingFang SC;
|
|
|
font-weight: 500;
|
|
|
line-height: 20px;
|
|
|
color: rgba(91, 94, 99, 1);
|
|
|
}
|
|
|
|
|
|
.content .orderInfoBox .consigneeBox ul li .contentBox .box p {
|
|
|
margin: 0;
|
|
|
display: inline-block;
|
|
|
}
|
|
|
|
|
|
.content .orderInfoBox .consigneeBox ul li .contentBox .box p .phone {
|
|
|
display: inline-block;
|
|
|
margin-left: 10px;
|
|
|
font-size: 12px;
|
|
|
}
|
|
|
|
|
|
.content .orderInfoBox .consigneeBox ul li .contentBox .box .btnSpan {
|
|
|
display: inline-block;
|
|
|
width: 60px;
|
|
|
height: 17px;
|
|
|
float: right;
|
|
|
text-align: right;
|
|
|
}
|
|
|
.content .orderInfoBox .consigneeBox ul li .contentBox .box .btnSpan span {
|
|
|
display: inline-block;
|
|
|
vertical-align: middle;
|
|
|
}
|
|
|
.content .orderInfoBox .consigneeBox ul li .contentBox .box .btnSpan img{
|
|
|
margin-right: 6px;
|
|
|
}
|
|
|
|
|
|
/*跑腿_收货人信息*/
|
|
|
.content .orderInfoBox .errandsBox {
|
|
|
display: none;
|
|
|
width: 1200px;
|
|
|
background: rgba(255, 255, 255, 1);
|
|
|
border-radius: 8px;
|
|
|
margin: 0 auto 12px auto;
|
|
|
}
|
|
|
|
|
|
.content .orderInfoBox .errandsBox ul {
|
|
|
width: 100%;
|
|
|
/*padding: 0 30px;*/
|
|
|
}
|
|
|
|
|
|
.content .orderInfoBox .errandsBox ul li {
|
|
|
list-style-type: none;
|
|
|
width: 100%;
|
|
|
height: 116px;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
|
|
|
.content .orderInfoBox .errandsBox ul li .imgBox {
|
|
|
float: left;
|
|
|
width: 76px;
|
|
|
height: 100%;
|
|
|
text-align: center;
|
|
|
line-height: 112px;
|
|
|
}
|
|
|
|
|
|
.content .orderInfoBox .errandsBox ul li .contentBox {
|
|
|
width: 1064px;
|
|
|
height: 100%;
|
|
|
margin-left: 77px;
|
|
|
overflow: hidden;
|
|
|
border-bottom: 1px solid rgba(238, 238, 238, 1);
|
|
|
padding-top: 20px;
|
|
|
}
|
|
|
|
|
|
.content .orderInfoBox .errandsBox ul li .contentBox p {
|
|
|
font-size: 14px;
|
|
|
font-family: PingFang SC;
|
|
|
font-weight: 500;
|
|
|
line-height: 20px;
|
|
|
color: rgba(91, 94, 99, 1);
|
|
|
margin-bottom: 8px;
|
|
|
}
|
|
|
|
|
|
/*支付方式部分样式*/
|
|
|
.content .orderInfoBox .payModeBox {
|
|
|
width: 1200px;
|
|
|
height: 264px;
|
|
|
background: rgba(255, 255, 255, 1);
|
|
|
border-radius: 8px;
|
|
|
margin: 0 auto 12px auto;
|
|
|
}
|
|
|
|
|
|
.content .orderInfoBox .payModeBox ul {
|
|
|
width: 100%;
|
|
|
padding: 0 30px;
|
|
|
}
|
|
|
|
|
|
.content .orderInfoBox .payModeBox ul li {
|
|
|
list-style-type: none;
|
|
|
width: 100%;
|
|
|
height: 68px;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
|
|
|
.content .orderInfoBox .payModeBox ul li .imgBox {
|
|
|
float: left;
|
|
|
width: 76px;
|
|
|
height: 100%;
|
|
|
text-align: center;
|
|
|
line-height: 68px;
|
|
|
}
|
|
|
|
|
|
.content .orderInfoBox .payModeBox ul li .contentBox {
|
|
|
width: 1064px;
|
|
|
height: 100%;
|
|
|
margin-left: 77px;
|
|
|
overflow: hidden;
|
|
|
border-bottom: 1px solid rgba(238, 238, 238, 1);
|
|
|
padding-top: 20px;
|
|
|
font-size: 14px;
|
|
|
font-family: PingFang SC;
|
|
|
font-weight: 400;
|
|
|
line-height: 20px;
|
|
|
color: rgba(6, 18, 30, 1);
|
|
|
}
|
|
|
|
|
|
/*二维码部分样式*/
|
|
|
.content .orderInfoBox .downloadBox {
|
|
|
display: none;
|
|
|
width: 1200px;
|
|
|
height: 132px;
|
|
|
border-radius: 8px;
|
|
|
margin: 8px auto 0 auto;
|
|
|
padding: 0 30px;
|
|
|
}
|
|
|
|
|
|
.content .orderInfoBox .downloadBox div {
|
|
|
display: inline-block;
|
|
|
width: 100px;
|
|
|
}
|
|
|
|
|
|
.content .orderInfoBox .downloadBox div img {
|
|
|
width: 100px;
|
|
|
height: 100px;
|
|
|
margin-bottom: 12px;
|
|
|
}
|
|
|
|
|
|
.content .orderInfoBox .downloadBox div p {
|
|
|
margin: 0;
|
|
|
width: 100px;
|
|
|
height: 20px;
|
|
|
text-align: center;
|
|
|
font-size: 14px;
|
|
|
font-family: PingFang SC;
|
|
|
font-weight: 400;
|
|
|
line-height: 20px;
|
|
|
color: rgba(6, 18, 30, 1);
|
|
|
}
|
|
|
|
|
|
/*提交订单部分样式*/
|
|
|
.content .orderInfoBox .submitBox {
|
|
|
width: 1200px;
|
|
|
height: 52px;
|
|
|
background: rgba(255, 255, 255, 1);
|
|
|
border-radius: 8px;
|
|
|
margin: 60px auto 50px auto;
|
|
|
padding-left: 30px;
|
|
|
}
|
|
|
|
|
|
.content .orderInfoBox .submitBox p {
|
|
|
display: inline-block;
|
|
|
width: 160px;
|
|
|
height: 52px;
|
|
|
line-height: 52px;
|
|
|
font-size: 14px;
|
|
|
font-family: PingFang SC;
|
|
|
font-weight: 500;
|
|
|
color: rgba(140, 145, 152, 1);
|
|
|
margin: 0;
|
|
|
}
|
|
|
|
|
|
.content .orderInfoBox .submitBox p:nth-child(3) {
|
|
|
width: 680px;
|
|
|
text-align: right;
|
|
|
padding-right: 21px;
|
|
|
}
|
|
|
|
|
|
.content .orderInfoBox .submitBox p:nth-child(3) span {
|
|
|
font-size: 16px;
|
|
|
color: rgba(234, 50, 43, 1);
|
|
|
}
|
|
|
|
|
|
.content .orderInfoBox .submitBox .btn {
|
|
|
width: 170px;
|
|
|
height: 52px;
|
|
|
background: rgba(0, 159, 142, 1);
|
|
|
border: 0;
|
|
|
font-size: 16px;
|
|
|
font-family: PingFang SC;
|
|
|
font-weight: 500;
|
|
|
line-height: 22px;
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
border-radius: 0;
|
|
|
margin-top: -12px;
|
|
|
}
|
|
|
</style>
|
|
|
<body>
|
|
|
{include file="public/header"/}
|
|
|
<!--主要内容-->
|
|
|
<div class="content">
|
|
|
<div class="navBarBox">
|
|
|
<ul>
|
|
|
<li><a href="{:url('index/index')}">首页</a></li>
|
|
|
<li><a href="{:url('goods/index')}">采购中心</a></li>
|
|
|
<li><a href="">帮买服务</a></li>
|
|
|
<li><a href="">产品维修</a></li>
|
|
|
<li><a href="">关于我们</a></li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
|
|
|
<!--订单信息部分-->
|
|
|
<div class="orderInfoBox">
|
|
|
<!--标题部分-->
|
|
|
<div class="titleBox">
|
|
|
<span></span>
|
|
|
<span id="orderTitle">订单确认</span>
|
|
|
</div>
|
|
|
|
|
|
<!--物流方式-->
|
|
|
<div class="sendModeBox">
|
|
|
<p class="title">物流方式</p>
|
|
|
<ul>
|
|
|
<li onclick="changeSendMode('express')"><img id="expressImg" src="__CDN__/assets/store/images/checkbox_orange.png" alt="img">快递运输
|
|
|
</li>
|
|
|
<li onclick="changeSendMode('dada')"><img id="dadaImg" src="__CDN__/assets/store/images/radioUnSelect.png" alt="img">达达快递
|
|
|
</li>
|
|
|
<li onclick="changeSendMode('meiTuan')"><img id="meiTuanImg" src="__CDN__/assets/store/images/radioUnSelect.png" alt="img">美团跑腿
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
|
|
|
<!--快递_收货人信息-->
|
|
|
<div class="consigneeBox">
|
|
|
<p class="title">
|
|
|
收货人信息
|
|
|
<span onclick="addConsignee()">新增收货地址</span>
|
|
|
</p>
|
|
|
<ul class="address_box">
|
|
|
{foreach name="$address" item="a"}
|
|
|
<li onclick="changeConsignee(this)" data-address_id="{$a.id}">
|
|
|
<div class="imgBox">
|
|
|
<img class="checkImg" src="{if condition='$a.is_default eq 1'}__CDN__/assets/store/images/checkbox_orange.png{else /}__CDN__/assets/store/images/radioUnSelect.png{/if}" alt="img">
|
|
|
</div>
|
|
|
<div class="contentBox address-{$a.id}">
|
|
|
<div class="box">
|
|
|
<p>
|
|
|
<span class="name">{$a.name}</span>
|
|
|
<span class="phone">{$a.phone}</span>
|
|
|
</p>
|
|
|
<span class="btnSpan" onclick="edit(this)">
|
|
|
<img src="__CDN__/assets/store/images/icon_bianji.png" alt="img">
|
|
|
<span></span>编辑
|
|
|
</span>
|
|
|
</div>
|
|
|
<div class="box">
|
|
|
<p class="address">
|
|
|
<span data-province_id="{$a.province_id}">{$a.province_name}</span>
|
|
|
<span data-city_id="{$a.city_id}">{$a.city_name}</span>
|
|
|
<span data-county_id="{$a.county_id}">{$a.county_name}</span>
|
|
|
<span>{$a.address}</span>
|
|
|
</p>
|
|
|
<span class="btnSpan" onclick="del(this)"><img src="__CDN__/assets/store/images/icon_del.png" alt="">
|
|
|
<span>删除</span>
|
|
|
</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</li>
|
|
|
{/foreach}
|
|
|
</ul>
|
|
|
</div>
|
|
|
<!--跑腿_收货人信息-->
|
|
|
<div class="errandsBox">
|
|
|
<p class="title">
|
|
|
店铺信息
|
|
|
</p>
|
|
|
<ul>
|
|
|
{foreach name="$store" item="s"}
|
|
|
<li onclick="changeErrands(this)">
|
|
|
<div class="imgBox">
|
|
|
<img class="checkImg" src="__CDN__/assets/store/images/checkbox_orange.png" alt="img">
|
|
|
</div>
|
|
|
<div class="contentBox">
|
|
|
<p>联系人(店铺名称):<span class="shopName">{$s.name}</span></p>
|
|
|
<p>电话:<span class="phone">{$s.phone}</span></p>
|
|
|
<p>店铺地址:
|
|
|
<span class="address">
|
|
|
<span data-province_id="{$s.province_id}">{$s.province_name}</span>
|
|
|
<span data-city_id="{$s.city_id}">{$s.city_name}</span>
|
|
|
<span data-county_id="{$s.county_id}">{$s.county_name}</span>
|
|
|
<span>{$s.address}</span>
|
|
|
</span>
|
|
|
</p>
|
|
|
</div>
|
|
|
</li>
|
|
|
{/foreach}
|
|
|
</ul>
|
|
|
</div>
|
|
|
|
|
|
<!--支付方式-->
|
|
|
<div class="payModeBox">
|
|
|
<p class="title">支付方式</p>
|
|
|
<ul>
|
|
|
<li onclick="changePayMode(this,'weChat')">
|
|
|
<div class="imgBox">
|
|
|
<img class="checkImg" src="__CDN__/assets/store/images/checkbox_orange.png" alt="img">
|
|
|
</div>
|
|
|
<div class="contentBox">
|
|
|
<img src="__CDN__/assets/store/images/weixin.png" alt="img">
|
|
|
微信支付
|
|
|
</div>
|
|
|
</li>
|
|
|
<li onclick="changePayMode(this,'aliPay')">
|
|
|
<div class="imgBox">
|
|
|
<img class="checkImg" src="__CDN__/assets/store/images/radioUnSelect.png" alt="img">
|
|
|
</div>
|
|
|
<div class="contentBox">
|
|
|
<img src="__CDN__/assets/store/images/zhufubao.png" alt="img">
|
|
|
支付宝
|
|
|
</div>
|
|
|
</li>
|
|
|
<li onclick="changePayMode(this,'yunPay')">
|
|
|
<div class="imgBox">
|
|
|
<img class="checkImg" src="__CDN__/assets/store/images/radioUnSelect.png" alt="img">
|
|
|
</div>
|
|
|
<div class="contentBox">
|
|
|
<img src="__CDN__/assets/store/images/yunshanfu.png" alt="img">
|
|
|
云闪付
|
|
|
</div>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
|
|
|
<!--二维码部分-->
|
|
|
<div class="downloadBox">
|
|
|
<div>
|
|
|
<img src="__CDN__/assets/store/images/dadaCode.png" alt="img">
|
|
|
<p>下载达达</p>
|
|
|
</div>
|
|
|
<div>
|
|
|
<img src="__CDN__/assets/store/images/meiTuanCode.png" alt="img">
|
|
|
<p>下载美团</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!--提交订单部分-->
|
|
|
<div class="submitBox">
|
|
|
<p>商品金额:<span>¥150.00</span></p>
|
|
|
<p>物流费用:<span>¥0.00</span></p>
|
|
|
<p>应付总额:<span>¥198.00</span></p>
|
|
|
<button id="submitBtn" type="button" class="btn" onclick="submitOrder()">提交订单</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!--新增、修改收货人信息模态窗-->
|
|
|
<div class="modal fade" id="changeInfoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
|
|
|
aria-hidden="true">
|
|
|
<div class="modal-dialog">
|
|
|
<div class="modal-content">
|
|
|
<div class="modal-header">
|
|
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
|
|
|
<img src="__CDN__/assets/store/images/close_icon.png" alt="close">
|
|
|
</button>
|
|
|
<h4 class="modal-title" id="myModalLabel">
|
|
|
新增/修改收货人信息
|
|
|
</h4>
|
|
|
</div>
|
|
|
<div class="modal-body">
|
|
|
<form>
|
|
|
<div class="form-group">
|
|
|
<input type="text" class="form-control" id="userName" placeholder="姓名">
|
|
|
<span id="userNameTips" class="tipsInfo"></span>
|
|
|
</div>
|
|
|
<div class="form-group">
|
|
|
<input type="text" class="form-control" id="phoneNum" placeholder="手机号">
|
|
|
<span id="phoneNumTips" class="tipsInfo"></span>
|
|
|
</div>
|
|
|
<div style="display: flex;">
|
|
|
<div class="form-group">
|
|
|
<select id="province" class="form-control" placeholder="请选择省份">
|
|
|
<option value="">请选择</option>
|
|
|
{foreach name="$province" item="p"}
|
|
|
<option value="{$p.id}">{$p.name}</option>
|
|
|
{/foreach}
|
|
|
</select>
|
|
|
</div>
|
|
|
<div class="form-group">
|
|
|
<select id="city" class="form-control" placeholder="请选择城市">
|
|
|
<option value="">请选择</option>
|
|
|
<!--{foreach name="$city" item="c"}
|
|
|
<option value="{$c.id}">{$c.name}</option>
|
|
|
{/foreach}-->
|
|
|
</select>
|
|
|
</div>
|
|
|
<div class="form-group">
|
|
|
<select id="county" class="form-control" placeholder="请选择省份">
|
|
|
<option value="">请选择</option>
|
|
|
<!--{foreach name="$county" item="c"}
|
|
|
<option value="{$c.id}">{$c.name}</option>
|
|
|
{/foreach}-->
|
|
|
</select>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="form-group">
|
|
|
<input type="text" class="form-control" id="addressDetail" placeholder="详细地址">
|
|
|
<span id="addressDetailTips" class="tipsInfo"></span>
|
|
|
</div>
|
|
|
<input type="hidden" id="address_id" value=""/>
|
|
|
<button type="button" class="btn btn-submit" onclick="sendInfo()">确定</button>
|
|
|
</form>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
{include file="public/footer"/}
|
|
|
{include file="public/js"/}
|
|
|
<script>
|
|
|
var sendMode = 'express';
|
|
|
var payMode = 'weChat';
|
|
|
$(function () {
|
|
|
var source = window.location.href.split('source=')[1];
|
|
|
if (source){
|
|
|
$('#orderTitle').html('订单详情');
|
|
|
$('#submitBtn').hide();
|
|
|
}
|
|
|
});
|
|
|
|
|
|
//更换运输方式
|
|
|
function changeSendMode(type) {
|
|
|
$('.sendModeBox ul li img').attr('src', '__CDN__/assets/store/images/radioUnSelect.png');
|
|
|
sendMode = type;
|
|
|
if (type == 'express') {
|
|
|
//快递
|
|
|
$('.errandsBox,.downloadBox').hide();
|
|
|
$('.consigneeBox').show();
|
|
|
$('#expressImg').attr('src', '__CDN__/assets/store/images/checkbox_orange.png');
|
|
|
} else if (type == 'dada') {
|
|
|
//达达
|
|
|
$('.consigneeBox').hide();
|
|
|
$('.errandsBox,.downloadBox').show();
|
|
|
$('#dadaImg').attr('src', '__CDN__/assets/store/images/checkbox_orange.png');
|
|
|
} else {
|
|
|
//美团
|
|
|
$('.consigneeBox').hide();
|
|
|
$('.errandsBox,.downloadBox').show();
|
|
|
$('#meiTuanImg').attr('src', '__CDN__/assets/store/images/checkbox_orange.png');
|
|
|
}
|
|
|
}
|
|
|
|
|
|
//新增收货信息
|
|
|
function addConsignee() {
|
|
|
$('#userName').val('');
|
|
|
$('#phoneNum').val('');
|
|
|
$('#addressDetail').val('');
|
|
|
$('#address_id').val('');
|
|
|
getProvince();
|
|
|
getCity();
|
|
|
getCounty();
|
|
|
$('#changeInfoModal').modal();
|
|
|
}
|
|
|
|
|
|
//发送收货人信息
|
|
|
function sendInfo() {
|
|
|
var name = $('#userName').val();
|
|
|
var phone = $('#phoneNum').val();
|
|
|
var reg = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/;
|
|
|
var province_id = $('#province').val();
|
|
|
var city_id = $('#city').val();
|
|
|
var county_id = $('#county').val();
|
|
|
var address = $('#addressDetail').val();
|
|
|
var address_id = $('#address_id').val();
|
|
|
if(name == ''){
|
|
|
toast('请输入姓名');
|
|
|
return false;
|
|
|
}else if(phone == ''){
|
|
|
toast('请输入电话');
|
|
|
return false;
|
|
|
}else if(!reg.test(phone)){
|
|
|
toast('请输入正确的手机号');
|
|
|
return false;
|
|
|
}else if(province_id == ''){
|
|
|
toast('请选择省份');
|
|
|
return false;
|
|
|
}else if(city_id == ''){
|
|
|
toast('请选择城市');
|
|
|
return false;
|
|
|
}else if(county_id == ''){
|
|
|
toast('请选择区/县');
|
|
|
return false;
|
|
|
}else if(address == ''){
|
|
|
toast('请输入详细地址');
|
|
|
return false;
|
|
|
}
|
|
|
$.ajax({
|
|
|
url:"{:url('index/address/update')}",
|
|
|
type:"POST",
|
|
|
data:{'name':name,'phone':phone,'province_id':province_id,'city_id':city_id,'county_id':county_id,'address':address,'address_id':address_id},
|
|
|
success:function (res) {
|
|
|
if(res.code == 1){
|
|
|
var data = res.data;
|
|
|
if(address_id != ''){
|
|
|
//编辑
|
|
|
var html = "<div class=\"box\">\n" +
|
|
|
" <p>\n" +
|
|
|
" <span class=\"name\">"+data.name+"</span>\n" +
|
|
|
" <span class=\"phone\">"+data.phone+"</span>\n" +
|
|
|
" </p>\n" +
|
|
|
" <span class=\"btnSpan\" onclick=\"edit(this)\">\n" +
|
|
|
" <img src=\"__CDN__/assets/store/images/icon_bianji.png\" alt=\"img\">\n" +
|
|
|
" <span></span>编辑\n" +
|
|
|
" </span>\n" +
|
|
|
" </div>\n" +
|
|
|
" <div class=\"box\">\n" +
|
|
|
" <p class=\"address\">\n" +
|
|
|
" <span data-province_id=\""+data.province_id+"\">"+data.province_name+"</span>\n" +
|
|
|
" <span data-city_id=\""+data.city_id+"\">"+data.city_name+"</span>\n" +
|
|
|
" <span data-county_id=\""+data.county_id+"\">"+data.county_name+"</span>\n" +
|
|
|
" <span>"+data.address+"</span>\n" +
|
|
|
" </p>\n" +
|
|
|
" <span class=\"btnSpan\" onclick=\"del(this)\"><img src=\"__CDN__/assets/store/images/icon_del.png\" alt=\"\">\n" +
|
|
|
" <span>删除</span>\n" +
|
|
|
" </span>\n" +
|
|
|
" </div>";
|
|
|
$(".address-"+data.id+"").html(html);
|
|
|
}else{
|
|
|
//新增
|
|
|
var html = "<li onclick=\"changeConsignee(this)\" data-address_id=\""+data.id+"\">\n" +
|
|
|
" <div class=\"imgBox\">\n" +
|
|
|
" <img class=\"checkImg\" src=\"__CDN__/assets/store/images/checkbox_orange.png\" alt=\"img\">\n" +
|
|
|
" </div>\n" +
|
|
|
" <div class=\"contentBox address-"+data.id+"\">\n" +
|
|
|
" <div class=\"box\">\n" +
|
|
|
" <p>\n" +
|
|
|
" <span class=\"name\">"+data.name+"</span>\n" +
|
|
|
" <span class=\"phone\">"+data.phone+"</span>\n" +
|
|
|
" </p>\n" +
|
|
|
" <span class=\"btnSpan\" onclick=\"edit(this)\">\n" +
|
|
|
" <img src=\"__CDN__/assets/store/images/icon_bianji.png\" alt=\"img\">\n" +
|
|
|
" <span></span>编辑\n" +
|
|
|
" </span>\n" +
|
|
|
" </div>\n" +
|
|
|
" <div class=\"box\">\n" +
|
|
|
" <p class=\"address\">\n" +
|
|
|
" <span data-province_id=\""+data.province_id+"\">"+data.province_name+"</span>\n" +
|
|
|
" <span data-city_id=\""+data.city_id+"\">"+data.city_name+"</span>\n" +
|
|
|
" <span data-county_id=\""+data.county_id+"\">"+data.county_name+"</span>\n" +
|
|
|
" <span>"+data.address+"</span>\n" +
|
|
|
" </p>\n" +
|
|
|
" <span class=\"btnSpan\" onclick=\"del(this)\"><img src=\"__CDN__/assets/store/images/icon_del.png\" alt=\"\">\n" +
|
|
|
" <span>删除</span>\n" +
|
|
|
" </span>\n" +
|
|
|
" </div>\n" +
|
|
|
" </div>\n" +
|
|
|
" </li>";
|
|
|
//将所有收货地址变为未选中状态
|
|
|
$('.imgBox').find('img').attr('src',"__CDN__/assets/store/images/radioUnSelect.png");
|
|
|
$('.address_box').prepend(html);
|
|
|
}
|
|
|
$('#changeInfoModal').modal('hide');
|
|
|
toast('操作成功');
|
|
|
}
|
|
|
},
|
|
|
error:function (res) {
|
|
|
toast('与服务器断开连接');
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
|
|
|
//更改收货人
|
|
|
function changeConsignee(obj) {
|
|
|
$('.content .orderInfoBox .consigneeBox ul li .checkImg').attr('src', '__CDN__/assets/store/images/radioUnSelect.png');
|
|
|
$(obj).find('.checkImg').attr('src', '__CDN__/assets/store/images/checkbox_orange.png');
|
|
|
var name = $(obj).find('.name').html();
|
|
|
var phone = $(obj).find('.phone').html();
|
|
|
var address = $(obj).find('.address').html();
|
|
|
}
|
|
|
|
|
|
//更改跑腿收货人
|
|
|
function changeErrands(obj) {
|
|
|
$('.content .orderInfoBox .errandsBox ul li .checkImg').attr('src', '__CDN__/assets/store/images/radioUnSelect.png');
|
|
|
$(obj).find('.checkImg').attr('src', '__CDN__/assets/store/images/checkbox_orange.png');
|
|
|
var name = $(obj).find('.shopName').html().split('<span')[0];
|
|
|
var phone = $(obj).find('.phone').html();
|
|
|
var address = $(obj).find('.address').html();
|
|
|
}
|
|
|
|
|
|
//修改收件信息
|
|
|
function edit(obj) {
|
|
|
/*console.log($(obj).parent().next('.address').html());
|
|
|
var name = $(obj).parent().find('.name').html().split('<span')[0];
|
|
|
var phone = $(obj).parent().find('.phone').html();
|
|
|
$('#userName').val(name);
|
|
|
$('#phoneNum').val(phone);
|
|
|
var province_id2 = $(obj).parents().find('.address').find('span').eq(0).attr('data-province_id');
|
|
|
console.log(province_id2);
|
|
|
getProvince(0,province_id2);
|
|
|
var city_id2 = $(obj).parents().find('.address').find('span').eq(1).attr('data-city_id');
|
|
|
console.log(city_id2);
|
|
|
getCity(province_id2,city_id2);
|
|
|
var county_id2 = $(obj).parents().find('.address').find('span').eq(2).attr('data-county_id');
|
|
|
console.log(county_id2);
|
|
|
getCounty(city_id2,county_id2);
|
|
|
$('#addressDetail').val();
|
|
|
$('#changeInfoModal').modal();*/
|
|
|
var address_id = $(obj).parent().parent().parent().attr('data-address_id');
|
|
|
var name = $(obj).prev().find('span').eq(0).html();
|
|
|
var phone = $(obj).prev().find('span').eq(1).html();
|
|
|
var province_id2 = $(obj).parent().next().find('.address span').eq(0).attr('data-province_id');
|
|
|
var city_id2 = $(obj).parent().next().find('.address span').eq(1).attr('data-city_id');
|
|
|
var county_id2 = $(obj).parent().next().find('.address span').eq(2).attr('data-county_id');
|
|
|
var address = $(obj).parent().next().find('.address span').eq(3).html();
|
|
|
$('#userName').val(name);
|
|
|
$('#phoneNum').val(phone);
|
|
|
getProvince(0,province_id2);
|
|
|
getCity(province_id2,city_id2);
|
|
|
getCounty(city_id2,county_id2);
|
|
|
$('#addressDetail').val(address);
|
|
|
$('#address_id').val(address_id);
|
|
|
$('#changeInfoModal').modal();
|
|
|
}
|
|
|
|
|
|
//删除收件信息
|
|
|
function del(obj) {
|
|
|
$(obj).parent().parent().parent('li').remove();
|
|
|
}
|
|
|
|
|
|
//修改支付方式
|
|
|
function changePayMode(obj, type) {
|
|
|
$('.content .orderInfoBox .payModeBox ul li .checkImg').attr('src', '__CDN__/assets/store/images/radioUnSelect.png');
|
|
|
$(obj).find('.checkImg').attr('src', '__CDN__/assets/store/images/checkbox_orange.png');
|
|
|
if (type == 'weChat') {
|
|
|
//微信支付
|
|
|
payMode = 'weChat';
|
|
|
} else if (type == 'aliPay') {
|
|
|
//支付宝支付
|
|
|
payMode = 'aliPay';
|
|
|
} else {
|
|
|
//云闪付
|
|
|
payMode = 'yunPay';
|
|
|
}
|
|
|
}
|
|
|
|
|
|
//提交订单
|
|
|
function submitOrder() {
|
|
|
|
|
|
}
|
|
|
|
|
|
//更换省份
|
|
|
$("#province").on("change",function(){
|
|
|
var province_id2 = $(this).val();
|
|
|
getCity(province_id2);
|
|
|
getCounty();
|
|
|
});
|
|
|
|
|
|
//更换城市
|
|
|
$("#city").on("change",function(){
|
|
|
var city_id2 = $(this).val();
|
|
|
getCounty(city_id2);
|
|
|
});
|
|
|
|
|
|
//获取省份
|
|
|
function getProvince(pid = 0,select_id = 0){
|
|
|
$.ajax({
|
|
|
url:"{:url('index/sundry/get_area')}",
|
|
|
type:"POST",
|
|
|
data:{"pid":pid,'level':1},
|
|
|
success:function (res) {
|
|
|
console.log(res);
|
|
|
var html = "<option value=\"\">请选择</option>";
|
|
|
if(res.code == 1){
|
|
|
$(res.data).each(function (key1, vo) {
|
|
|
var is_select = "";
|
|
|
if(select_id == vo.id){
|
|
|
is_select = "selected";
|
|
|
}
|
|
|
html += "<option value=\""+vo.id+"\" "+is_select+">"+vo.name+"</option>";
|
|
|
});
|
|
|
}
|
|
|
console.log(html);
|
|
|
$('#province').html(html);
|
|
|
},
|
|
|
error:function (res) {
|
|
|
toast('与服务器断开连接')
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
|
|
|
//获取城市
|
|
|
function getCity(province_id2, select_id = 0){
|
|
|
$.ajax({
|
|
|
url:"{:url('index/sundry/get_area')}",
|
|
|
type:"POST",
|
|
|
data:{"pid":province_id2,'level':2},
|
|
|
success:function (res) {
|
|
|
console.log(res);
|
|
|
var html = "<option value=\"\">请选择</option>";
|
|
|
if(res.code == 1){
|
|
|
$(res.data).each(function (key1, vo) {
|
|
|
var is_select = "";
|
|
|
if(select_id == vo.id){
|
|
|
is_select = "selected";
|
|
|
}
|
|
|
html += "<option value=\""+vo.id+"\" "+is_select+">"+vo.name+"</option>";
|
|
|
});
|
|
|
}
|
|
|
console.log(html);
|
|
|
$('#city').html(html);
|
|
|
},
|
|
|
error:function (res) {
|
|
|
toast('与服务器断开连接')
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
|
|
|
//获取区/县
|
|
|
function getCounty(city_id2, select_id = 0){
|
|
|
$.ajax({
|
|
|
url:"{:url('index/sundry/get_area')}",
|
|
|
type:"POST",
|
|
|
data:{"pid":city_id2,'level':3},
|
|
|
success:function (res) {
|
|
|
console.log(res);
|
|
|
var html = "<option value=\"\">请选择</option>";
|
|
|
if(res.code == 1){
|
|
|
$(res.data).each(function (key1, vo) {
|
|
|
var is_select = "";
|
|
|
if(select_id == vo.id){
|
|
|
is_select = "selected";
|
|
|
}
|
|
|
html += "<option value=\""+vo.id+"\" "+is_select+">"+vo.name+"</option>";
|
|
|
});
|
|
|
}
|
|
|
$('#county').html(html);
|
|
|
},
|
|
|
error:function (res) {
|
|
|
toast('与服务器断开连接')
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
</script>
|
|
|
</body>
|
|
|
</html> |
|
|
\ No newline at end of file |
...
|
...
|
|