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