parent
							
								
									0671058b76
								
							
						
					
					
						commit
						eb615986f6
					
				
				 7 changed files with 402 additions and 2 deletions
			
			
		| @ -0,0 +1,138 @@ | |||||||
|  | 
 | ||||||
|  | 
 | ||||||
|  | 
 | ||||||
|  | .order{ | ||||||
|  |   width: 100%; | ||||||
|  |   margin-top: 70px; | ||||||
|  |   padding: 0 5px; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | /* .order-line{ | ||||||
|  |   width: 100%; | ||||||
|  |   height: 1px; | ||||||
|  |   background-color: rgb(201, 199, 199); | ||||||
|  |   margin-top: 10px; | ||||||
|  | } */ | ||||||
|  | 
 | ||||||
|  | .order-title{ | ||||||
|  |   width: 100%; | ||||||
|  |   direction: rtl; | ||||||
|  |   font-size: 25px; | ||||||
|  |   font-weight: bold; | ||||||
|  |   color: #5DC964; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .order-data-container{ | ||||||
|  |   width: 100%; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .order-data-container-item{ | ||||||
|  |   width: 100%; | ||||||
|  |   padding-bottom: 10px; | ||||||
|  |   border-bottom: 1px solid rgb(201, 199, 199); | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .order-data-container-item-row1{ | ||||||
|  |   width: 100%; | ||||||
|  |   display: flex; | ||||||
|  |   align-items: center; | ||||||
|  |   justify-content: space-between; | ||||||
|  |   direction: rtl; | ||||||
|  |   margin-top: 10px; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .order-data-container-item-row1-order-id, | ||||||
|  | .order-data-container-item-row2-order-date, | ||||||
|  | .order-data-container-item-row3-order-price, | ||||||
|  | .order-data-container-item-row2-transactionId, | ||||||
|  | .order-data-container-item-row3-order-offcodeprice{ | ||||||
|  |   font-size: 16px; | ||||||
|  |   color: #555; | ||||||
|  |   direction: rtl; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .order-data-container-item-row1-order-id span, | ||||||
|  | .order-data-container-item-row2-order-date span, | ||||||
|  | .order-data-container-item-row3-order-price span, | ||||||
|  | .order-data-container-item-row3-order-offcodeprice span{ | ||||||
|  |   font-size: 16px; | ||||||
|  |   color: #333; | ||||||
|  |   margin-right: 5px; | ||||||
|  |   direction: ltr !important; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .order-data-container-item-row1-order-status{ | ||||||
|  |   display: flex; | ||||||
|  |   align-items: center; | ||||||
|  |   direction: rtl; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .order-data-container-item-row1-order-status-circle{ | ||||||
|  |   width: 12px; | ||||||
|  |   height: 12px; | ||||||
|  |   border-radius: 50%; | ||||||
|  |   background-color: black; | ||||||
|  |   margin-left: 3px; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .order-data-container-item-row1-order-status-text{ | ||||||
|  |   font-size: 13px; | ||||||
|  |   width: 100px; | ||||||
|  |   text-align: center; | ||||||
|  |   padding: 2px 0; | ||||||
|  |   background-color: #999; | ||||||
|  |   border-radius: 5px; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .order-data-container-item-row2{ | ||||||
|  |   width: 100%; | ||||||
|  |   display: flex; | ||||||
|  |   align-items: center; | ||||||
|  |   justify-content: space-between; | ||||||
|  |   margin-top: 10px; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .odcir2op-unit,.odcir2oo-unit{ | ||||||
|  |   font-size: 12px !important; | ||||||
|  |   margin-right: 3px !important; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .order-data-container-item-row3{ | ||||||
|  |   width: 100%; | ||||||
|  |   margin-top: 10px; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .order-data-container-item-row3-order-offcodeprice{ | ||||||
|  |   margin-top: 10px; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | 
 | ||||||
|  | .order-data-container-item-row4{ | ||||||
|  |   width: 100%; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .order-data-container-item-row4-imgs{ | ||||||
|  |   width: 100%; | ||||||
|  |   display: flex; | ||||||
|  |   align-items: center; | ||||||
|  |   direction: ltr; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .order-data-container-item-row4-imgs-container{ | ||||||
|  |   width:18%; | ||||||
|  |   aspect-ratio: 1/1; | ||||||
|  |   border-radius: 5px; | ||||||
|  |   overflow: hidden; | ||||||
|  |   background-color: brown; | ||||||
|  |   margin-right: 5px; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .order-data-container-item-row4-imgs-img{ | ||||||
|  |   width: 100%; | ||||||
|  |   height: 100%; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .order-message{ | ||||||
|  |   width: 100%; | ||||||
|  |   font-size: 20px; | ||||||
|  | } | ||||||
| @ -0,0 +1,197 @@ | |||||||
|  | import { useState } from "react"; | ||||||
|  | import { userFactor } from "../../Redux/actions"; | ||||||
|  | import { connect } from "react-redux"; | ||||||
|  | import Navbar from "../Home/Navbar"; | ||||||
|  | 
 | ||||||
|  | 
 | ||||||
|  | import './index.css'; | ||||||
|  | 
 | ||||||
|  | const Orders=(props)=>{ | ||||||
|  |   // const [data, set_data] = useState([
 | ||||||
|  |   //   {
 | ||||||
|  |   //     id: "12345",
 | ||||||
|  |   //     transactionId: "43448y35",
 | ||||||
|  |   //     payedAt: "1400/06/24",
 | ||||||
|  |   //     condition: 1,
 | ||||||
|  |   //     payPrice: 2500000,
 | ||||||
|  |   //     offPrice: 10000,
 | ||||||
|  |   //     description: "",
 | ||||||
|  |   //     products: [
 | ||||||
|  |   //       {
 | ||||||
|  |   //         id: 1,
 | ||||||
|  |   //         ARId: "",
 | ||||||
|  |   //         book: {
 | ||||||
|  |   //           name: "",
 | ||||||
|  |   //           fileId: "",
 | ||||||
|  |   //         },
 | ||||||
|  |   //       },
 | ||||||
|  |   //       {
 | ||||||
|  |   //         id: 2,
 | ||||||
|  |   //         ARId: "",
 | ||||||
|  |   //         book: {
 | ||||||
|  |   //           name: "",
 | ||||||
|  |   //           fileId: "",
 | ||||||
|  |   //         },
 | ||||||
|  |   //       },
 | ||||||
|  |   //     ],
 | ||||||
|  |   //   },
 | ||||||
|  |   //   {
 | ||||||
|  |   //     id: "45679f",
 | ||||||
|  |   //     transactionId: "43448y35",
 | ||||||
|  |   //     payedAt: "1400/06/24",
 | ||||||
|  |   //     condition: 2,
 | ||||||
|  |   //     payPrice: 2500000,
 | ||||||
|  |   //     offPrice: 0,
 | ||||||
|  |   //     description: "",
 | ||||||
|  |   //     products: [
 | ||||||
|  |   //       {
 | ||||||
|  |   //         id: '1',
 | ||||||
|  |   //         ARId: "",
 | ||||||
|  |   //         book: {
 | ||||||
|  |   //           name: "",
 | ||||||
|  |   //           fileId: "",
 | ||||||
|  |   //         },
 | ||||||
|  |   //       },
 | ||||||
|  |   //       {
 | ||||||
|  |   //         id: 2,
 | ||||||
|  |   //         ARId: "",
 | ||||||
|  |   //         book: {
 | ||||||
|  |   //           name: "",
 | ||||||
|  |   //           fileId: "",
 | ||||||
|  |   //         },
 | ||||||
|  |   //       },
 | ||||||
|  |   //     ],
 | ||||||
|  |   //   },
 | ||||||
|  |   //   {
 | ||||||
|  |   //     id: "509685f",
 | ||||||
|  |   //     transactionId: "43448y35",
 | ||||||
|  |   //     payedAt: "1400/06/24",
 | ||||||
|  |   //     condition: 3,
 | ||||||
|  |   //     payPrice: 2500000,
 | ||||||
|  |   //     offPrice: 10000,
 | ||||||
|  |   //     description: "",
 | ||||||
|  |   //     products: [
 | ||||||
|  |   //       {
 | ||||||
|  |   //         id: 1,
 | ||||||
|  |   //         ARId: "",
 | ||||||
|  |   //         book: {
 | ||||||
|  |   //           name: "",
 | ||||||
|  |   //           fileId: "",
 | ||||||
|  |   //         },
 | ||||||
|  |   //       },
 | ||||||
|  |   //       {
 | ||||||
|  |   //         id: 2,
 | ||||||
|  |   //         ARId: "",
 | ||||||
|  |   //         book: {
 | ||||||
|  |   //           name: "",
 | ||||||
|  |   //           fileId: "",
 | ||||||
|  |   //         },
 | ||||||
|  |   //       },
 | ||||||
|  |   //     ],
 | ||||||
|  |   //   },
 | ||||||
|  |   // ]);
 | ||||||
|  |   props.getList(); | ||||||
|  |   let data = props.list; | ||||||
|  |   return ( | ||||||
|  |     <div className="order"> | ||||||
|  |       <Navbar /> | ||||||
|  |       <div className="order-title">سفارشات من</div> | ||||||
|  |       <div className="order-data-container"> | ||||||
|  |         {data != null && | ||||||
|  |           data.map((item) => ( | ||||||
|  |             <div className="order-data-container-item"> | ||||||
|  |               <div className="order-data-container-item-row1"> | ||||||
|  |                 <div className="order-data-container-item-row1-order-id"> | ||||||
|  |                   شناسه سفارش: <span>{item.id}</span> | ||||||
|  |                 </div> | ||||||
|  |                 <div className="order-data-container-item-row1-order-status"> | ||||||
|  |                   <div | ||||||
|  |                     style={ | ||||||
|  |                       item.condition == 1 | ||||||
|  |                         ? { backgroundColor: "#11FA2F" } | ||||||
|  |                         : item.condition == 2 | ||||||
|  |                         ? { backgroundColor: "#11FADB" } | ||||||
|  |                         : item.condition == 3 | ||||||
|  |                         ? { backgroundColor: "#FA3011" } | ||||||
|  |                         : null | ||||||
|  |                     } | ||||||
|  |                     className="order-data-container-item-row1-order-status-circle" | ||||||
|  |                   ></div> | ||||||
|  |                   <div | ||||||
|  |                     style={ | ||||||
|  |                       item.condition == 1 | ||||||
|  |                         ? { backgroundColor: "#B0F8B5", color: "#0F9420" } | ||||||
|  |                         : item.condition == 2 | ||||||
|  |                         ? { backgroundColor: "#B5FFFD", color: "#30C2BD" } | ||||||
|  |                         : item.condition == 3 | ||||||
|  |                         ? { backgroundColor: "#FDC9B6", color: "#FA4C0D" } | ||||||
|  |                         : null | ||||||
|  |                     } | ||||||
|  |                     className="order-data-container-item-row1-order-status-text" | ||||||
|  |                   > | ||||||
|  |                     {item.condition == 1 && "در حال پردازش"} | ||||||
|  |                     {item.condition == 2 && "ارسال شد"} | ||||||
|  |                     {item.condition == 3 && "لغو شد"} | ||||||
|  |                   </div> | ||||||
|  |                 </div> | ||||||
|  |               </div> | ||||||
|  |               <div className="order-data-container-item-row2"> | ||||||
|  |                 <div className="order-data-container-item-row2-transactionId"> | ||||||
|  |                   شناسه پرداخت : <span>{item.transactionId}</span> | ||||||
|  |                 </div> | ||||||
|  |                 <div className="order-data-container-item-row2-order-date"> | ||||||
|  |                   تاریخ سفارش : <span>{item.payedAt}</span> | ||||||
|  |                 </div> | ||||||
|  |               </div> | ||||||
|  |               <div className="order-data-container-item-row3"> | ||||||
|  |                 <div className="order-data-container-item-row3-order-price"> | ||||||
|  |                   مبلغ : <span>{item.payPrice}</span>{" "} | ||||||
|  |                   <span className="odcir2op-unit">تومان</span> | ||||||
|  |                 </div> | ||||||
|  |                 {item.offCodePrice != 0 && ( | ||||||
|  |                   <div className="order-data-container-item-row3-order-offcodeprice"> | ||||||
|  |                     میزان تخفیف : <span>{item.offPrice}</span>{" "} | ||||||
|  |                     <span className="odcir2oo-unit">تومان</span> | ||||||
|  |                   </div> | ||||||
|  |                 )} | ||||||
|  |               </div> | ||||||
|  |               <div className="order-data-container-item-row4"> | ||||||
|  |                 <div className="order-data-container-item-row4-imgs"> | ||||||
|  |                   {item.products.map((item) => ( | ||||||
|  |                     <div className="order-data-container-item-row4-imgs-container"> | ||||||
|  |                       <img | ||||||
|  |                         className="order-data-container-item-row4-imgs-img" | ||||||
|  |                         src={`https://dnvn.ir/api/v1/file/${item.book.fileIds.split(",")[0]}`} | ||||||
|  |                         alt="order-img" | ||||||
|  |                       /> | ||||||
|  |                     </div> | ||||||
|  |                   ))} | ||||||
|  |                 </div> | ||||||
|  |               </div> | ||||||
|  |             </div> | ||||||
|  |           ))} | ||||||
|  |         {data == null && ( | ||||||
|  |           <div className="order-message">سفارشی برای نماش وجود ندارد</div> | ||||||
|  |         )} | ||||||
|  |       </div> | ||||||
|  |     </div> | ||||||
|  |   ); | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | 
 | ||||||
|  | const mapStateToPropS = state =>{ | ||||||
|  |   return{ | ||||||
|  |     list:state.list | ||||||
|  |   } | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | const mapDispatchToProps = dispatch =>{ | ||||||
|  |   return{ | ||||||
|  |     getList:()=> dispatch(userFactor.list()) | ||||||
|  |   } | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | export default connect(mapStateToPropS, mapDispatchToProps)(Orders); | ||||||
|  | 
 | ||||||
|  | 
 | ||||||
|  | 
 | ||||||
					Loading…
					
					
				
		Reference in new issue