Skip to content

semour / semour_web

Go to a project
Commit b4824bf6 by 肖康
Options

售后单 页面 订单详情 交互

parent 77b24690
Expand all
Inline Side-by-side
Showing with 413 additions and 14 deletions
public/assets/css/user/orderdetail.less
...@@ -119,7 +119,7 @@ ...@@ -119,7 +119,7 @@
margin-bottom: 20px; margin-bottom: 20px;
} }
.list-table { .list-table1 {
width : 974px; width : 974px;
margin : 0 auto; margin : 0 auto;
border-radius: 0px 0px 8px 8px; border-radius: 0px 0px 8px 8px;
...@@ -251,6 +251,170 @@ ...@@ -251,6 +251,170 @@
} }
.salebox{ .salebox{
padding:20px;
.sale-head{
font-size: 16px;
color:#222;
height:36px;
line-height: 36px;
span{font-weight: bold;}
.icarrow{
color:#174D9A;
margin-right: 398px;
position: relative;
top:-2px;
cursor: pointer;
}
}
.h4{
font-size: 16px;
color:#333;
font-weight: bold;
margin-top: 15px;
}
.list-table {
margin : 0 auto;
border-radius: 0px 0px 8px 8px;
margin-top : 20px;
.w43 {
width: 43px;
}
.w100 {
width: 100px
}
.w80 {
width: 80px
}
.w90 {
width: 90px
}
.w110 {
width: 110px
}
.w120 {
width: 120px
}
.w130 {
width: 130px
}
.thead {
height : 38px;
background : #DFEAFA;
line-height : 38px;
border-radius: 8px 8px 0px 0px;
.th {
font-size : 14px;
color : #333;
font-weight : bold;
box-sizing : border-box;
padding:0 3px;
text-align: center;
}
}
.tbody {
font-size : 14px;
color : #555;
border-radius: 0px 0px 8px 8px;
background : #F7FAFF;
overflow : hidden;
.tr {
line-height : 20px;
border-bottom: 1px solid #DFEAFA;
padding : 10px 0px;
box-sizing : border-box;
.td {
word-break : break-all;
box-sizing : border-box;
padding:0 3px;
text-align: center;
}
&:last-child {
border: 0px;
}
}
}
}
.sale-total{
font-size: 14px;
color:#222;
font-weight: bold;
text-align: right;
margin-top: 20px;
span{font-weight: bold;}
}
.address-group {
padding : 0 15px;
font-size : 14px;
color : #555;
position : relative;
.info {
margin-top: 22px;
.name {
min-width : 159px;
margin-right: 70px;
}
.email {
margin-left : 70px;
margin-right: 70px;
}
}
.addre {
height : 32px;
line-height: 32px;
margin-top : 23px;
}
.edit-shipping-btn{
width: 74px;
height: 32px;
background: #164D9A;
border-radius: 8px;
line-height: 32px;
color:#fff;
text-align: center;
color:#fff;
cursor: pointer;
position: absolute;
top:-10px;
right:50px;
}
}
}
}
.getCountryBox{
position: relative;
.conps{
display: none;
position: absolute;
top:33px;
left:0px;
width:320px;
height:200px;
overflow-y: auto;
background: #fff;
box-shadow: 0px 0px 10px #ccc;
padding:15px 0;
.citem{
height:28px;
line-height: 28px;
padding:0 20px;
color:#164D9A;
cursor: pointer;
&:hover{background: #DFEAFA;}
}
} }
} }
\ No newline at end of file
public/assets/js/auth/reg.js
...@@ -106,18 +106,23 @@ define('reg', ['form', 'liexin_pop', 'tool'], function (require, exports, module ...@@ -106,18 +106,23 @@ define('reg', ['form', 'liexin_pop', 'tool'], function (require, exports, module
}) })
//国家操作 //国家操作
$("body").on("input", '.getCountry', tool.debounce(function (e) { $("body").on("input", '.getCountry', tool.debounce(function (e) {
var str_=$(this).val(); var str_ = $(this).val();
$(this).attr("guid","") $(this).attr("guid", "")
if(str_){ var count_=0;
if (str_) {
$(".countryconent").show(); $(".countryconent").show();
$(".countryconent .citem").each(function(){ $(".countryconent .citem").each(function () {
if(($(this).text().toLocaleLowerCase()).indexOf((str_.toLocaleLowerCase()))!=-1){ if (($(this).text().toLocaleLowerCase()).indexOf((str_.toLocaleLowerCase())) != -1) {
$(this).show() $(this).show()
}else{ count_++;
} else {
$(this).hide() $(this).hide()
} }
}) })
}else{ if(count_==0){
$(".countryconent").hide();
}
} else {
$(".countryconent").hide(); $(".countryconent").hide();
} }
}, 300)) }, 300))
......
public/assets/js/user/orderdetail.js 0 → 100644
define('orderDetail', ['liexin_pop','tool'], function (require, exports, module) {
var liexin_pop = require("liexin_pop");
var tool = require("tool");
var orderDetail = {
init: function () {
orderDetail.handle();
},
handle: function () {
$(".detailbox .sale").click(function(){
$(".user-right ").hide();
$(".salebox").show();
})
$(".salebox .icarrow").click(function(){
$(".user-right ").hide();
$(".detailbox").show();
})
//切换属性
$("body").on("click", ".check-group", function () {
$(".verifyBox").find(".check-group").removeClass("act")
$(this).addClass("act");
})
//国家操作
$("body").on("input", '.getCountry', tool.debounce(function (e) {
var str_ = $(this).val();
$(this).attr("guid", "")
var count_=0;
if (str_) {
$(".countryconent").show();
$(".countryconent .citem").each(function () {
if (($(this).text().toLocaleLowerCase()).indexOf((str_.toLocaleLowerCase())) != -1) {
$(this).show()
count_++;
} else {
$(this).hide()
}
})
if(count_==0){
$(".countryconent").hide();
}
} else {
$(".countryconent").hide();
}
}, 300))
$("body").on("click", ".citem", function () {
$(".getCountry").val($(this).text()).attr("guid", $(this).attr("guid"))
$(".countryconent").hide();
})
//获取国家
orderDetail.getCountry()
//新增编辑
$("body").on("click", ".edit-shipping-btn", function () {
liexin_pop.Open({
title: "Change Shipping Information",
width: 766,
height: 595,
class: "addressOpen",
ele: ".addressPop",
success: function () {
}
})
})
},
//获取国家
getCountry: function () {
$.liexin_ajax('/api/country/list', 'GET', {}, function (res) {
if (res.code === 0) {
var html_ = "";
for (var i = 0; i < res.data.length; i++) {
html_ += '<div class="citem" guid="' + res.data[i].id + '">' + res.data[i].name + '</div>'
}
$(".countryconent").html(html_)
} else {
}
}, 1)
},
}
module.exports = orderDetail.init();
})
seajs.use(['orderDetail'])
\ No newline at end of file
resources/views/user/orderDetail.blade.php
...@@ -25,11 +25,11 @@ ...@@ -25,11 +25,11 @@
<a class="li " href="/user/inquiry">My RFQ</a> <a class="li " href="/user/inquiry">My RFQ</a>
<a class="li " href="/user/account">My Account</a> <a class="li " href="/user/account">My Account</a>
</div> </div>
<div class="user-right boxsiz detailbox" style="display:none;"> <div class="user-right boxsiz detailbox" >
<div class="head row bothSide"> <div class="head row bothSide">
<div class="row"> <div class="row">
<span class="ordersn">Order No#：1234567890</span> <span class="ordersn">Order No#：1234567890</span>
<a href="" class="sale">After-sales Record</a> <a href="javascript:void(0)" class="sale">After-sales Record</a>
</div> </div>
<div class="row"> <div class="row">
<a class="down"> <a class="down">
...@@ -54,7 +54,7 @@ ...@@ -54,7 +54,7 @@
</div> </div>
</div> </div>
<div class="h3">Items</div> <div class="h3">Items</div>
<div class="list-table"> <div class="list-table1">
<div class="thead row boxsiz"> <div class="thead row boxsiz">
<div class="th w47"> <div class="th w47">
NO. NO.
...@@ -143,15 +143,157 @@ ...@@ -143,15 +143,157 @@
</div> </div>
</div> </div>
</div> </div>
<div class="user-right boxsiz salebox"> <div class="user-right boxsiz salebox" style="display:none;">
售后服务 <div class="sale-head row">
<span class="icarrow"><i class="icon iconfont icon-fanhui"></i></span>
<span>After-sales Record</span>
</div>
<div class="h4">Product Details</div>
<div class="list-table">
<div class="thead row boxsiz">
<div class="th w43">NO.</div>
<div class="th w110">Part NO.</div>
<div class="th w110">Part NO.</div>
<div class="th w100">Manufacturer</div>
<div class="th w100">Price per Unit</div>
<div class="th w80">Quantity</div>
<div class="th w90">Subtotal</div>
<div class="th w130">Type</div>
<div class="th w130">After-sale quantity</div>
<div class="th w90">Amount</div>
</div>
<div class="tbody boxsiz">
<div class="tr row">
<div class="td w43">1</div>
<div class="td w110">STTH1L06A</div>
<div class="td w110">STTH1L06A</div>
<div class="td w100">STTH1L06A</div>
<div class="td w100">$0.011100</div>
<div class="td w80">1000</div>
<div class="td w90">$11.10</div>
<div class="td w130">Return and Refund</div>
<div class="td w130">100</div>
<div class="td w90">$1.10</div>
</div>
<div class="tr row">
<div class="td w43">1</div>
<div class="td w110">STTH1L06A</div>
<div class="td w110">STTH1L06A</div>
<div class="td w100">STTH1L06A</div>
<div class="td w100">$0.011100</div>
<div class="td w80">1000</div>
<div class="td w90">$11.10</div>
<div class="td w130">Return and Refund</div>
<div class="td w130">100</div>
<div class="td w90">$1.10</div>
</div>
</div>
</div>
<div class="sale-total">Total Refund Amount：$<span>5.50</span></div>
<div class="h4">Shipping Information</div>
<div class="address-group ship">
<div class="info row">
<span class="name">Michael Jordan</span>
<span class="app">Apple inc</span>
<span class="email">123456789@qq.com</span>
<span>000-000-000-XXXX</span>
</div>
<div class="addre row">
<span>79, 105 Center Street, Queens, New York City</span>
<span class="defaults">Default address</span>
</div>
<div class="edit-shipping-btn">Edit</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@include('common.mallFooter') @include('common.mallFooter')
</div> </div>
@endsection @endsection
<!--修改地址弹窗-->
<div class="addressPop" style="display:none;">
<div class="inputboxp verifyBox">
<div class="checkbox row">
<div class="check-group row act">
<p class="row verCenter rowCenter">
<font></font>
</p>
<span>Company</span>
</div>
<div class="check-group row ">
<p class="row verCenter rowCenter">
<font></font>
</p>
<span>Personal</span>
</div>
</div>
<div class="input-con">
<div class="row">
<div class="input-group-auth">
<p class="labelp"><span>*</span>EMAIL</p>
<input type="text">
</div>
<div class="input-group-auth ml30">
<p class="labelp"><span>*</span>TELEPHONE</p>
<input type="text">
</div>
</div>
<div class="row">
<div class="input-group-auth sm ">
<p class="labelp"><span>*</span>FIRST NAME</p>
<input type="text">
</div>
<div class="input-group-auth sm ml30">
<p class="labelp"><span>*</span>LAST NAME</p>
<input type="text">
</div>
<div class="input-group-auth ml30">
<p class="labelp"><span>*</span>COMPANY NAME</p>
<input type="text">
</div>
</div>
<div class="row">
<div class="input-group-auth">
<p class="labelp"><span>*</span>ADDRESS</p>
<textarea name=""></textarea>
</div>
</div>
<div class="row">
<div class="input-group-auth">
<p class="labelp"><span>*</span>COUNTRY/REGIONL</p>
<div class="getCountryBox">
<input type="text" class="getCountry country3 verify" verifyTip='{"type":"null","text":"COUNTRY/REGION"}'>
<div class="conps scrollbar boxsiz countryconent">
<div class="citem">ddd</div>
<div class="citem">ttt</div>
</div>
</div>
</div>
<div class="input-group-auth ml30">
<p class="labelp">PROVINCE</p>
<input type="text">
</div>
</div>
<div class="row">
<div class="input-group-auth">
<p class="labelp"><span>*</span>CITY</p>
<input type="text">
</div>
<div class="input-group-auth ml30">
<p class="labelp"><span>*</span>POST CODE</p>
<input type="text">
</div>
</div>
<div class="tips">Wrong Email Address</div>
<div class="but gobtn gonext">SAVE</div>
</div>
</div>
</div>
@section('js') @section('js')
<script src="{{$public}}/assets/js/user/orderdetail.js?v={{time()}}"></script> <script src="{{$public}}/assets/js/user/orderdetail.js?v={{time()}}"></script>
@endsection @endsection
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment