|
|
|
<!DOCTYPE html>
|
|
|
|
<html lang="zh">
|
|
|
|
<head>
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
<title>退款</title>
|
|
|
|
{include file="public/head"}
|
|
|
|
<style>
|
|
|
|
li{
|
|
|
|
list-style-type: none;
|
|
|
|
}
|
|
|
|
ul{
|
|
|
|
margin: 0;
|
|
|
|
}
|
|
|
|
.clear{
|
|
|
|
clear: both;
|
|
|
|
}
|
|
|
|
/*菜单样式*/
|
|
|
|
.content{
|
|
|
|
width: 100%;
|
|
|
|
font-size: 0;
|
|
|
|
background:rgba(249,249,249,1);
|
|
|
|
}
|
|
|
|
.content .navBarBox{
|
|
|
|
width: 100%;
|
|
|
|
height: 50px;
|
|
|
|
background: rgba(0,159,142,1);
|
|
|
|
}
|
|
|
|
.content .navBarBox ul{
|
|
|
|
width: 1200px;
|
|
|
|
height: 100%;
|
|
|
|
margin: 0 auto;
|
|
|
|
padding: 0;
|
|
|
|
font-size: 16px;
|
|
|
|
font-family: PingFangSC-Semibold;
|
|
|
|
color:rgba(255,255,255,1);
|
|
|
|
}
|
|
|
|
.content .navBarBox ul li{
|
|
|
|
width: 144px;
|
|
|
|
height: 100%;
|
|
|
|
line-height: 50px;
|
|
|
|
list-style-type: none;
|
|
|
|
float: left;
|
|
|
|
}
|
|
|
|
.content .navBarBox ul li a{
|
|
|
|
color: rgba(255,255,255,1);
|
|
|
|
}
|
|
|
|
.content .titleImgContent{
|
|
|
|
width: 100%;
|
|
|
|
height: 146px;
|
|
|
|
}
|
|
|
|
.content .titleImgContent img{
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
}
|
|
|
|
/*主要内容*/
|
|
|
|
.contentBox{
|
|
|
|
width: 100%;
|
|
|
|
background-color: #FFFFFF;
|
|
|
|
margin-top: 12px;
|
|
|
|
}
|
|
|
|
.contentMain{
|
|
|
|
margin: auto;
|
|
|
|
width: 1200px;
|
|
|
|
}
|
|
|
|
.contentTop{
|
|
|
|
padding: 20px 0 28px;
|
|
|
|
}
|
|
|
|
.titleText{
|
|
|
|
padding-left: 17px;
|
|
|
|
height:22px;
|
|
|
|
line-height:22px;
|
|
|
|
font-size:16px;
|
|
|
|
font-family:PingFang SC;
|
|
|
|
font-weight:800;
|
|
|
|
color:rgba(0,159,142,1);
|
|
|
|
vertical-align: middle;
|
|
|
|
}
|
|
|
|
.titleLine{
|
|
|
|
line-height: 20px;
|
|
|
|
display: inline-block;
|
|
|
|
width: 6px;
|
|
|
|
height:20px;
|
|
|
|
background:rgba(0,159,142,1);
|
|
|
|
opacity:1;
|
|
|
|
border-radius:2px;
|
|
|
|
vertical-align: middle;
|
|
|
|
}
|
|
|
|
.contentList{
|
|
|
|
background:rgba(249,249,249,1);
|
|
|
|
border-radius:8px;
|
|
|
|
margin-bottom: 12px;
|
|
|
|
}
|
|
|
|
/*商品信息*/
|
|
|
|
.detailHeader {
|
|
|
|
padding: 0 30px;
|
|
|
|
height: 60px;
|
|
|
|
line-height: 60px;
|
|
|
|
border-bottom: 1px solid rgba(238,238,238,1);
|
|
|
|
font-size:14px;
|
|
|
|
font-family:PingFang SC;
|
|
|
|
font-weight:500;
|
|
|
|
color:rgba(61,68,77,1)
|
|
|
|
}
|
|
|
|
.detailHeader li{
|
|
|
|
float: left;
|
|
|
|
}
|
|
|
|
.storeName{
|
|
|
|
padding-right: 40px;
|
|
|
|
font-weight:500;
|
|
|
|
}
|
|
|
|
.orderNum{
|
|
|
|
width: 227px;
|
|
|
|
}
|
|
|
|
.orderTime{
|
|
|
|
width: 218px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.orderNumTime{
|
|
|
|
font-weight:400;
|
|
|
|
padding: 0 40px;
|
|
|
|
overflow: hidden;/*超出部分隐藏*/
|
|
|
|
text-overflow:ellipsis;/* 超出部分显示省略号 */
|
|
|
|
white-space: nowrap;/*规定段落中的文本不进行换行 */
|
|
|
|
}
|
|
|
|
.detailTitle{
|
|
|
|
font-size:16px;
|
|
|
|
font-family:PingFang SC;
|
|
|
|
font-weight:500;
|
|
|
|
color:rgba(61,68,77,1);
|
|
|
|
width: 162px;
|
|
|
|
text-align: center;
|
|
|
|
vertical-align: middle;
|
|
|
|
}
|
|
|
|
.detailContent li{
|
|
|
|
display: inline-block;
|
|
|
|
}
|
|
|
|
.detailContent{
|
|
|
|
padding: 0 30px;
|
|
|
|
}
|
|
|
|
.goodsDesc {
|
|
|
|
width: 652px;
|
|
|
|
padding: 24px 24px 24px 0;
|
|
|
|
}
|
|
|
|
.goodsPic{
|
|
|
|
width: 72px;
|
|
|
|
height: 72px;
|
|
|
|
}
|
|
|
|
.goodsName{
|
|
|
|
margin-left: 15px;
|
|
|
|
font-weight:500;
|
|
|
|
color:rgba(91,94,99,1);
|
|
|
|
vertical-align: middle;
|
|
|
|
font-size:14px;
|
|
|
|
font-family:PingFang SC;
|
|
|
|
display: inline-block;
|
|
|
|
width: 196px;
|
|
|
|
}
|
|
|
|
/*退款原因*/
|
|
|
|
.refundReason{
|
|
|
|
height: 183px;
|
|
|
|
padding: 25px 30px;
|
|
|
|
}
|
|
|
|
.refundReasonLabel{
|
|
|
|
font-size:14px;
|
|
|
|
font-family:PingFang SC;
|
|
|
|
font-weight:500;
|
|
|
|
color:rgba(61,68,77,1);
|
|
|
|
}
|
|
|
|
.refundReasonTextarea{
|
|
|
|
padding: 6px 0;
|
|
|
|
border: 0!important;
|
|
|
|
box-shadow: none!important;
|
|
|
|
background-color: transparent!important;
|
|
|
|
resize: none;
|
|
|
|
}
|
|
|
|
/*输入框中placeholer文字颜色*/
|
|
|
|
.refundReasonTextarea::-webkit-input-placeholder { /* WebKit browsers */
|
|
|
|
font-size:14px;
|
|
|
|
font-family:PingFang SC;
|
|
|
|
font-weight:500;
|
|
|
|
color:rgba(140,145,152,1)
|
|
|
|
}
|
|
|
|
.refundReasonTextarea:-moz-placeholder{ /* Mozilla Firefox 4 to 18 */
|
|
|
|
font-size:14px;
|
|
|
|
font-family:PingFang SC;
|
|
|
|
font-weight:500;
|
|
|
|
color:rgba(140,145,152,1)
|
|
|
|
}
|
|
|
|
.refundReasonTextarea::-moz-placeholder{ /* Mozilla Firefox 19+ */
|
|
|
|
font-size:14px;
|
|
|
|
font-family:PingFang SC;
|
|
|
|
font-weight:500;
|
|
|
|
color:rgba(140,145,152,1)
|
|
|
|
}
|
|
|
|
.refundReasonTextarea:-ms-input-placeholder { /* Internet Explorer 10+ */
|
|
|
|
font-size:14px;
|
|
|
|
font-family:PingFang SC;
|
|
|
|
font-weight:500;
|
|
|
|
color:rgba(140,145,152,1)
|
|
|
|
}
|
|
|
|
/*按钮样式*/
|
|
|
|
.refundBtn{
|
|
|
|
margin: 28px 0 98px;
|
|
|
|
background-color:rgba(0,159,142,1);
|
|
|
|
color: #fff;
|
|
|
|
width: 170px;
|
|
|
|
height: 52px;
|
|
|
|
font-size:16px;
|
|
|
|
font-family:PingFang SC;
|
|
|
|
font-weight:500;
|
|
|
|
color:rgba(255,255,255,1);
|
|
|
|
border: 0;
|
|
|
|
}
|
|
|
|
.refundBtn:hover,.refundBtn:visited,.refundBtn:focus{
|
|
|
|
color: #fff;
|
|
|
|
color:rgba(255,255,255,1);
|
|
|
|
border: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
</style>
|
|
|
|
<style>
|
|
|
|
.box {
|
|
|
|
display: flex;
|
|
|
|
}
|
|
|
|
.imgClick {
|
|
|
|
width: 150px!important;
|
|
|
|
height: 96px!important;
|
|
|
|
font-size: 0;
|
|
|
|
position: relative;
|
|
|
|
background: url(/assets/store/images/idCardBoxFileupload.png) no-repeat;
|
|
|
|
}
|
|
|
|
.imgClick input {
|
|
|
|
width: 150px;
|
|
|
|
height: 96px;
|
|
|
|
opacity: 0;
|
|
|
|
position: absolute;
|
|
|
|
top: 0;
|
|
|
|
left: 0;
|
|
|
|
}
|
|
|
|
.images{
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
flex-wrap: wrap;
|
|
|
|
padding-left:0!important;
|
|
|
|
padding-right: 0!important;
|
|
|
|
}
|
|
|
|
.imagesItem{
|
|
|
|
width:150px!important;
|
|
|
|
height:96px!important;
|
|
|
|
font-size: 0;
|
|
|
|
display:flex;
|
|
|
|
align-items: center;
|
|
|
|
position: relative;
|
|
|
|
padding: 0 10px 0 0!important;
|
|
|
|
}
|
|
|
|
.imagesItem img{
|
|
|
|
width:100%;
|
|
|
|
height:100%;
|
|
|
|
}
|
|
|
|
.closeImage{
|
|
|
|
position: absolute;
|
|
|
|
top: -5px;
|
|
|
|
right: 5px;
|
|
|
|
width: 18px!important;
|
|
|
|
height: 18px!important;
|
|
|
|
background: rgba(197, 197, 197, 1);
|
|
|
|
border-radius: 50%;
|
|
|
|
padding: 0!important;
|
|
|
|
font-size: 16px;
|
|
|
|
text-align: center;
|
|
|
|
line-height: 18px;
|
|
|
|
color: #efefef;
|
|
|
|
font-style: normal;
|
|
|
|
cursor: pointer;
|
|
|
|
z-index: 777;
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
{include file="public/header"}
|
|
|
|
<!--主要内容-->
|
|
|
|
<div class="content">
|
|
|
|
{include file="public/nav"}
|
|
|
|
<!--主要内容-->
|
|
|
|
<div class="contentBox">
|
|
|
|
<div class="contentMain">
|
|
|
|
<div class="contentTop">
|
|
|
|
<span class="titleLine"></span>
|
|
|
|
<span class="titleText">
|
|
|
|
退款申请
|
|
|
|
</span>
|
|
|
|
</div>
|
|
|
|
<!--商品信息-->
|
|
|
|
<div class="contentList">
|
|
|
|
<ul class="detailHeader">
|
|
|
|
<li class="storeName">
|
|
|
|
{$order.store_name}
|
|
|
|
</li>
|
|
|
|
<li class="orderNumTime orderNum">
|
|
|
|
订单号：{$order.num}
|
|
|
|
</li>
|
|
|
|
<li class="orderNumTime orderTime">
|
|
|
|
{$order.createtime}
|
|
|
|
</li>
|
|
|
|
<li class="detailTitle">
|
|
|
|
数量
|
|
|
|
</li>
|
|
|
|
<li class="detailTitle">
|
|
|
|
金额
|
|
|
|
</li>
|
|
|
|
<li class="detailTitle">
|
|
|
|
订单状态
|
|
|
|
</li>
|
|
|
|
<div class="clear">
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</ul>
|
|
|
|
{volist name="order.goods" id="vo"}
|
|
|
|
<ul class="detailContent">
|
|
|
|
<li class="goodsDesc">
|
|
|
|
<img class="goodsPic" src="{$vo.goods_image}" alt="">
|
|
|
|
<span class="goodsName">{$vo.goodsname}</span>
|
|
|
|
</li>
|
|
|
|
<li class="detailTitle">
|
|
|
|
×{$vo.number}
|
|
|
|
</li>
|
|
|
|
<li class="detailTitle">
|
|
|
|
¥{$vo.goods_price}
|
|
|
|
</li>
|
|
|
|
<li class="detailTitle">
|
|
|
|
{$order.status}
|
|
|
|
</li>
|
|
|
|
<div class="clear">
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</ul>
|
|
|
|
{/volist}
|
|
|
|
</div>
|
|
|
|
<!--退款原因-->
|
|
|
|
<div class="contentList refundReason">
|
|
|
|
<p class="refundReasonLabel">退款原因</p>
|
|
|
|
<textarea rows="5" class="form-control refundReasonTextarea" placeholder="请输入退款原因"></textarea>
|
|
|
|
</div>
|
|
|
|
<!--上传凭证-->
|
|
|
|
<div class="contentList">
|
|
|
|
<div class="detailHeader">
|
|
|
|
上传凭证
|
|
|
|
</div>
|
|
|
|
<div class="detailContent">
|
|
|
|
<div class="box">
|
|
|
|
<div class="images"></div>
|
|
|
|
<div class="imgClick">
|
|
|
|
<input type="file" name="file" multiple id="refundBox"/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<button type="button" class="btn refundBtn">提交申请</button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{include file="public/footer"}
|
|
|
|
<!--begin:提示弹层-->
|
|
|
|
<div class="toast">提示框</div>
|
|
|
|
<div class="bg"></div>
|
|
|
|
<script>
|
|
|
|
var img = [];
|
|
|
|
//上传手持身份证照片
|
|
|
|
$('body').on('change', '#refundBox', function () {
|
|
|
|
var self = $(this);
|
|
|
|
var filePath = self.val();
|
|
|
|
var fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase();
|
|
|
|
console.log(filePath);
|
|
|
|
// 检查是否是图片
|
|
|
|
if (filePath == '') {
|
|
|
|
toast('未选择任何图片');
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
if (!fileFormat.match(/.png|.jpg|.jpeg/)) {
|
|
|
|
toast('上传错误,文件格式必须为：png/jpg/jpeg');
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
var files = this.files;
|
|
|
|
upload(files,self);
|
|
|
|
});
|
|
|
|
//上传图片
|
|
|
|
function upload(files,self){
|
|
|
|
$(files).each(function (key, file) {
|
|
|
|
console.log(file);
|
|
|
|
var formdata = new FormData();
|
|
|
|
formdata.append("file", file);
|
|
|
|
$.ajax({
|
|
|
|
url: "{:url('api/common/upload')}",
|
|
|
|
type: "POST",
|
|
|
|
data: formdata,
|
|
|
|
cache: false,
|
|
|
|
processData: false, // 不处理发送的数据，因为data值是Formdata对象，不需要对数据做处理
|
|
|
|
contentType: false, // 不设置Content-type请求头
|
|
|
|
success: function (res) {
|
|
|
|
console.log(res);
|
|
|
|
if (res.code == 1) {
|
|
|
|
var html = '<div class="imagesItem">\n' +
|
|
|
|
' <img src="'+res.data.url+'" alt="">\n' +
|
|
|
|
' <div class="closeImage">×</div>\n' +
|
|
|
|
' </div>';
|
|
|
|
img.push(res.data.url);
|
|
|
|
self.parent().prev().append(html);
|
|
|
|
// idCardImgFileArr.push(res.data.url);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
error: function(res){
|
|
|
|
toast('与服务器断开连接');
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
//删除图片
|
|
|
|
$('.images').on('click', '.closeImage', function () {
|
|
|
|
$(this).parent().remove();
|
|
|
|
var src = $(this).prev().attr('src');
|
|
|
|
var pos = $.inArray(src,img);
|
|
|
|
img.splice(pos,1);
|
|
|
|
console.log(img);
|
|
|
|
});
|
|
|
|
// 提交退款申请
|
|
|
|
$('.refundBtn').click(function () {
|
|
|
|
var content = $('.refundReasonTextarea').val();
|
|
|
|
var images = img.join(',');
|
|
|
|
if(content.length == 0) {
|
|
|
|
toast('请填写退款原因');
|
|
|
|
}
|
|
|
|
if(img.length == 0) {
|
|
|
|
toast('请上传凭证');
|
|
|
|
}
|
|
|
|
var data = {
|
|
|
|
order_id: "{$order.id}",
|
|
|
|
content: content,
|
|
|
|
images: images
|
|
|
|
};
|
|
|
|
$.ajax({
|
|
|
|
type: "post",
|
|
|
|
url: "{:url('refund_submit')}",
|
|
|
|
data: data,
|
|
|
|
dataType: "json",
|
|
|
|
success: function (e) {
|
|
|
|
if(e.code == 1) {
|
|
|
|
toast(e.msg);
|
|
|
|
} else {
|
|
|
|
toast(e.msg);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
error: function (e) {
|
|
|
|
console.log(e);
|
|
|
|
toast('网络错误，请重试');
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
//提示弹层
|
|
|
|
function toast(msg='玩命加载中~',time=2000, location = 0){
|
|
|
|
$('.toast').text(msg);
|
|
|
|
$('.toast').fadeToggle();
|
|
|
|
$('.bg').show();
|
|
|
|
setTimeout(function(){
|
|
|
|
$('.toast').fadeToggle();
|
|
|
|
$('.bg').hide();
|
|
|
|
if(location == 1) {
|
|
|
|
history.back(-1);
|
|
|
|
}
|
|
|
|
},time);
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html> |
|
|
\ No newline at end of file |
...
|
...
|
|
