完成订单日志

src/assets/api.js

@@ -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)
+}
 
 
 //订单作废

src/assets/comm.css

@@ -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;

src/pages/home/home.js

@@ -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"
+        src={this.state.userInfo.head}/>:
+        <Avatar   size="large"
+        src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/default.svg"/>}
+                */}
+                 
+                 </div>
+                 <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>
-                 <Pop trigger="hover" position="bottom-right" content="点击退出本次登录">
+                 </div>}>
-                 <img className="exitIcon" onClick={()=>{this.exitFn()}}  src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/exit.svg" alt=""/>
+                 {/*  */}
+                 {this.state.userInfo.user_name}！&nbsp;<Icon type="down" className="exitIcon" />
                 </Pop>
               </div>   
               <aside className="mainbody" >

src/pages/home/home.less

@@ -5,12 +5,8 @@
   // overflow-y: scroll;
 }
 .exitIcon{
-  width: 28px;
+ font-size: 24px;
-  height: 28px;
-  margin-left:15px;
   cursor: pointer;
-  border-left: 1px solid #ccc;
-  padding-left: 10px;
 }
 .start .header{
   width: 100%;
@@ -69,3 +65,47 @@
   // 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;
+}

src/pages/order/more/more.js

@@ -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%'
+    width:'33.3%'
-  }, {
+  },{
-    title: '服务器编号',
-    prop:'no',
-    name: 'uv',
-    width:'25%',
-    type: "normal",
-  }, {
     title: '操作描述',
-    name: 'stock1',
+    name: 'message',
-    prop:'descript',
+    prop:'message',
     type: "normal",
-    width:'25%'
+    width:'33.3%'
   },
   {
     title: '详情',
-    name: 'stock2',
+    name: 'opearo',
-    type: "normal",
+    type: "slot",
-    prop:'more',
+    prop:'opearo',
-    width:'25%'
+    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,21 +203,42 @@ 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>
+             <Pop className="logOrder" trigger="hover" position="right-center" content={<div>
-          <span href="https://youzan.com" className="grid-link" onClick={(e)=>this.deleteFn(e,rowData)} >作废</span>
+               
+                <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>
           }
 

src/pages/order/more/more.less

@@ -28,3 +28,13 @@
     }
   }
 }
+.logOrder{
+  ul{
+    li{
+      padding: 8px 0;
+      font{
+        color: #313233;
+      }
+    }
+  }
+}