HandOver-liuwu
/
frontend
mirror of https://codeup.aliyun.com/lsxd/marketing/frontend.git
4
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

完成订单日志

This commit is contained in:
red-deng-deng 2021-11-26 19:43:14 +08:00
parent 48b9fd14fb
commit 33101a0b44
6 changed files with 181 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/assets/api.js
View File

@ -261,7 +261,10 @@ export const putOrderSuccess = (id) => {
return req('put', baseurl + "/order/success/"+id)
}
//订单日志
export const getOrderLog = (orderId,params) => {
return req('get', baseurl + "/order/"+orderId+"/log", params)
}
//订单作废

5
src/assets/comm.css
View File

@ -28,6 +28,11 @@
justify-content: center;
flex-direction: column;
}
.dflexacs{
display: flex;
justify-content: flex-start;
flex-direction: column;
}
.dflexa{
display: flex;
align-items: center;

28
src/pages/home/home.js
View File

@ -7,6 +7,7 @@ import {
HashRouter as Router,
Route,
Link,
Redirect
} from "react-router-dom";
import "./home.less"
@ -17,6 +18,7 @@ import {
Avatar,
Pop,
Sweetalert,
Icon,
Notify
} from 'zent';
import extension from '../extension/main/main';
@ -248,16 +250,32 @@ export default class App extends Component {
{/* 用户头像信息 */}
<div className="userImg dflexa">
{/* <Link to="https://youzan.com" target="_blank" className="mr15 helpcenter">帮助中心</Link> */}
欢迎你，{this.state.userInfo.user_name}！&emsp;
{!this.state.userInfo.head? <Avatar size="large"
{/* {!this.state.userInfo.head? <Avatar size="large"
src={this.state.userInfo.head}/>:
<Avatar size="large"
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/default.svg"/>}
*/}
</div>
<Pop trigger="hover" position="bottom-right" content="点击退出本次登录">
<img className="exitIcon" onClick={()=>{this.exitFn()}} src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/exit.svg" alt=""/>
<Pop className="exitPop" trigger="hover" position="bottom-right" content={<div>
<div className="exit-box">
<p className="exit-header dflexaj">
{!this.state.userInfo.head? <Avatar size="large"
src={this.state.userInfo.head}/>:
<Avatar size="large"
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/default.svg"/>}
<p className="exit-userInfo dflexacs">
<span> {this.state.userInfo.user_name}</span>
<span> 手机号:{this.state.userInfo.mobile}</span>
</p>
</p>
<p onClick={()=>{this.exitFn()}} className="exit-btn">退出</p>
</div>
</div>}>
{/* */}
{this.state.userInfo.user_name}！&nbsp;<Icon type="down" className="exitIcon" />
</Pop>
</div>
<aside className="mainbody" >

50
src/pages/home/home.less
View File

@ -5,12 +5,8 @@
// overflow-y: scroll;
}
.exitIcon{
width: 28px;
height: 28px;
margin-left:15px;
font-size: 24px;
cursor: pointer;
border-left: 1px solid #ccc;
padding-left: 10px;
}
.start .header{
width: 100%;
@ -68,4 +64,48 @@
width: 100%;
// height: 100%;
// overflow-y: scroll;
}
.exit-box{
width:100%;
background: #fff;
border-radius: 12px;
overflow: hidden;
}
.exit-header{
width: 200px;
display: flex;
padding: 15px;
background: #F7F9FC;
border-bottom: 1px solid #e0e0e0;
}
.exit-userInfo{
margin-left: 15px;
line-height: 1.5rem;
color: #333;
font-size: 14px;
}
.exit-btn{
display: flex;
align-items: center;
padding:10px;
justify-content: center;
font-size: 16px;
color: #939599;
cursor: pointer;
}
.userImg{
cursor: pointer;
}
.exitPop {
border-radius: 12px!important;
border: 1px solid #e0e0e0;
overflow: hidden!important;
z-index: 8888!important;
}
.exitPop .zent-pop-v2-inner{
padding: 0!important;
border-radius: 12px!important;
background: transparent!important;
}

130
src/pages/order/more/more.js
View File

@ -4,36 +4,30 @@ import { HashRouter as Router, Route, Link } from "react-router-dom";
import "../../../assets/comm.css"
import {getQueryString} from "../../../assets/comm.js"
import "./more.less"
import {Notify} from "zent"
import {Notify,Pop} from "zent"
import TabPage from "../../../components/tabPage/main.js"
import Grid from "../../../components/gird/main.js"
import {getOrderDetails,handelResponse} from "../../../assets/api.js"
import {getOrderDetails,handelResponse,getOrderLog} from "../../../assets/api.js"
const Column = [
{
title: '创建时间',
name: 'name',
name: 'time',
prop:'time',
type: "normal",
width:'25%'
}, {
title: '服务器编号',
prop:'no',
name: 'uv',
width:'25%',
type: "normal",
}, {
width:'33.3%'
},{
title: '操作描述',
name: 'stock1',
prop:'descript',
name: 'message',
prop:'message',
type: "normal",
width:'25%'
width:'33.3%'
},
{
title: '详情',
name: 'stock2',
type: "normal",
prop:'more',
width:'25%'
name: 'opearo',
type: "slot",
prop:'opearo',
width:'33.3%'
}
];
@ -41,10 +35,14 @@ export default class order extends React.Component{
constructor(props){
super(props)
this.state={
tabList:[{title:"详情"}],
tabList:[{title:"详情"},{title:"日志"}],
tabactive:0,
orderDetailLog_data:[],
orderDetail_data:{},
logsdata:[{time:'2021-11-09 16:49:36',no:12,descript:'这是商品描述',more:'this is more'},{time:'2021-11-09 16:49:36',no:12,descript:'这是商品描述',more:'this is more'},{time:'2021-11-09 16:49:36',no:12,descript:'这是商品描述',more:'this is more'},{time:'2021-11-09 16:49:36',no:12,descript:'这是商品描述',more:'this is more'} ]
page:1,
orderNo:'',
limit:10,
total:0,
}
}
tabFn(index){
@ -62,6 +60,7 @@ export default class order extends React.Component{
}
]}]
}else{
activerou=[{items:[
{
"path": "/order-list",
@ -74,9 +73,32 @@ export default class order extends React.Component{
]}]
}
sessionStorage.setItem('breaknav',JSON.stringify(activerou));
this.getOrderLogFn();
}
selection(){
}
//获取订单日志
getOrderLogFn(){
let _self=this;
let {page,limit,orderNo}=this.state;
let data={
page,
limit
}
getOrderLog(orderNo,data).then(res=>{
handelResponse(res,(response,msg)=>{
const orderDetailLog_data=response.data;
_self.setState({orderDetailLog_data,total:response.total});
Notify.clear();
Notify.success(msg);
},(err)=>{
})
}).catch(err=>{
});
}
//获取详情信息
getDetails(data){
@ -93,16 +115,38 @@ export default class order extends React.Component{
}).catch(err=>{
});
}
//page
pageChange(e){
this.setState({page:e});
setTimeout(() => {
this.getOrderLogFn();
}, 0);
}
//limit
countChange(e){
this.setState({page:1,limit:e});
setTimeout(() => {
this.getOrderLogFn();
}, 0);
}
componentWillMount(){
let href=window.location.href;
let strindex = href.lastIndexOf("\=");
let orderNo = href.substr(strindex + 1, href.length);
this.setState({orderNo});
this.getDetails(orderNo);
}
componentDidMount(){
}
// 监听组件内部状态的变化:
// componentDidUpdate(prevProps,prevState){
// // 参数分别为改变之前的数据状态对象
// if(this.state.tabactive==1){
// / this.getOrderLogFn();
// }
// }
// /
render(){
let orderDetail_data=this.state.orderDetail_data;
return(
@ -110,10 +154,6 @@ export default class order extends React.Component{
<TabPage tabs={this.state.tabList} tabChange={this.tabFn.bind(this)}>
{
this.state.tabactive==0?( <ul className="main-body">
<li className="num">
<span >分销商订单号</span>
<font>{orderDetail_data.order_number}</font>
</li>
<li>
<span>订单号</span>
<font>{orderDetail_data.order_number}</font>
@ -154,10 +194,7 @@ export default class order extends React.Component{
<span>充值账号</span>
<font>{orderDetail_data.account}</font>
</li>
<li className="num">
<span >流水号</span>
<font>{orderDetail_data.product_name}</font>
</li>
<li>
<span>状态</span>
<font>{orderDetail_data.status_text}</font>
@ -166,22 +203,43 @@ export default class order extends React.Component{
<div className="main-body">
<Grid
spliteColor={'#fff'}
tableData={this.state.logsdata}
tableData={this.state.orderDetailLog_data}
Column={Column}
isMultiple={false}
dataCount={this.state.total}
countChange={
(e)=>{
this.countChange(e)
}
}
countbarVisible={false}
isSwitch={false}
pageChange={(e)=>{
this.pageChange(e)
}}
}}
checkChange ={this.selection.bind(this)}
ComponentHandler={(com,rowData)=>{
if(com == "opearo")
{
return <div>
<span href="https://youzan.com" className="grid-link" onClick={(e)=>this.moreFn(e,rowData)}>详情</span>
<span href="https://youzan.com" className="grid-link" onClick={(e)=>this.deleteFn(e,rowData)} >作废</span>
</div>
<Pop className="logOrder" trigger="hover" position="right-center" content={<div>
<ul>
<li><span>账号:</span><font>{rowData.data.account}</font></li>
<li><span>合同价:</span><font>{rowData.data.contract_price}</font></li>
<li><span>成本价:</span><font>{rowData.data.cost_price}</font></li>
<li><span>官方价:</span><font>{rowData.data.official_price}</font></li>
<li><span>Key-批次ID:</span><font>{rowData.data.key_batch_id}</font></li>
<li><span>营销计划名:</span><font>{rowData.data.plan_title}</font></li>
<li><span>商品名称:</span><font>{rowData.data.product_name}</font></li>
<li><span>分销商名称:</span><font>{rowData.data.reseller_name}</font></li>
</ul>
</div>} >
<span className="grid-link">详情</span>
</Pop>
</div>
}
}}

10
src/pages/order/more/more.less
View File

@ -27,4 +27,14 @@
}
}
}
.logOrder{
ul{
li{
padding: 8px 0;
font{
color: #313233;
}
}
}
}