改-设备租赁-样式调整

pages/equipmentLeasing/detail/[id].page.tsx

@@ -3,10 +3,10 @@ import {useRouter} from 'next/router';
 import Layout from "~/components/layout";
 import {Box} from './styled';
 import ImagePreview from './components/picture-preview';
-import { Button , Image as AImage , Divider } from 'antd';
+import { Button , Image as AImage , Divider , Select} from 'antd';
 import Image from 'next/image';
 import errImg from "~/assets/errImg";
-import api,{GetWebDeviceDetailResult} from './api';
+import api,{GetWebDeviceDetailResult,GetWebDeviceWareSkuById} from './api';
 
 export default function EquipmentLeasingDetail() {
   const router = useRouter();
@@ -14,6 +14,7 @@ export default function EquipmentLeasingDetail() {
   const [id, setId] = useState<number | null>(null);
   
   const [detail,setDetail] = useState<GetWebDeviceDetailResult | null>()
+  const [wareSkuList,setWareSkuList] = useState<GetWebDeviceWareSkuById[] | undefined>()
 
   useEffect(()=>{
     setId(Number(router.query.id))
@@ -28,6 +29,16 @@ export default function EquipmentLeasingDetail() {
         .then((res) => {
           setDetail(res.result || null);
         });
+      api
+        .listWareSkuById({
+          id:id
+        })
+        .then((res) => {
+          res.result?.map(item=>{
+            return item
+          })
+          setWareSkuList(res.result || undefined);
+        });
     }
   },[id])
 
@@ -48,7 +59,28 @@ export default function EquipmentLeasingDetail() {
               <span className='menoy-left'>¥{detail?.minRent}</span>
               <span className='menoy-right'>/天起</span>
             </div>
-            <div className='classification'></div>
+            <div className='classification'>
+              <div className='top'>
+                <div className='left'>
+                  <span className='label'>选择</span>
+                  <span className='value'>商品分类</span>
+                </div>
+                <div className='right'>
+                <Select
+                    defaultActiveFirstOption
+                    defaultValue={wareSkuList}
+                    style={{ width: 120 }}
+                    bordered={false}
+                    options={wareSkuList}
+                    fieldNames={{label:"skuTitle",value:"id"}}
+                  />
+                </div>
+              </div>
+              <div className='bottom'>
+              <span className='label'>发货</span>
+                  <span className='value'>顺丰到付</span>
+              </div>
+            </div>
             <div className='botton-btn'>
                   <Button className='btn-left' size='small' type="primary">成为渠道商</Button>
                   <Button className='btn-right' size='small' type="primary">立即租赁</Button>

pages/equipmentLeasing/detail/api/index.tsx

@@ -34,9 +34,36 @@ export interface GetWebDeviceDetailResult {
       wareDetailContent: string | TrustedHTML
 }
 
+
+export interface PriceList {
+  id: number,
+  wareInfoId: number,
+  skuInfoId: number,
+  rentPrice: number,
+  minDay: number,
+  maxDay: number,
+  createTime: null
+} 
+export interface GetWebDeviceWareSkuById {
+  id: number,
+  wareInfoId: number,
+  skuTitle: string,
+  rentPrice: number | null,
+  rentDeposit: number,
+  stockNum: number,
+  saleNum: number,
+  createTime: string,
+  updateTime: null,
+  skuPriceDTOList: Array<PriceList>,
+}
+
 export default {
   //web-设备租赁-详情
   listDetailDeviceInfo: (params: GetWebDeviceDetailParams): Promise<Response<GetWebDeviceDetailResult>> => {
     return request('/pms/webDevice/detail', 'get', params)
+  },
+  //web-设备租赁-商品
+  listWareSkuById: (params: GetWebDeviceDetailParams): Promise<Response<GetWebDeviceWareSkuById[]>> => {
+    return request('/pms/appDevice/listWareSkuById', 'get', params)
   }
 }
\ No newline at end of file

pages/equipmentLeasing/detail/styled.tsx

@@ -58,7 +58,33 @@ export const Box = styled.div`
                 margin-top: 28px;
                 width: 300px;
                 height: 50px;
-                background-color: pink;
+                .label{
+                    height: 21px;
+                    font-size: 16px;
+                    font-family: MicrosoftYaHei;
+                    color: #9A9A9A;
+                    line-height: 21px;
+                    margin-right: 36px;
+                }
+                .value{
+                    height: 21px;
+                    font-size: 16px;
+                    font-family: MicrosoftYaHei;
+                    color: #151515;
+                    line-height: 21px;
+                }
+                .top{
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    .left{
+                    }
+                    .right{
+                    }
+                }
+                .bottom{
+                    margin-top: 5px;
+                }
             }
             .botton-btn{
                 margin-top: 30px;

pages/equipmentLeasing/index.page.tsx

@@ -69,7 +69,7 @@ export default function EquipmentLeasing(props: Props) {
   const [abort, setAbort] = useState<AbortController | null>(null); //请求中断
   const [pageParams, setPageParams] = useState({
     pageNo: 1,
-    pageSize: 16,
+    pageSize: 15,
   }); //分页器对象
 
   const onPageChange = (page: number, pageSize: number) => {
@@ -141,7 +141,7 @@ export default function EquipmentLeasing(props: Props) {
         ></Filter>
         <div style={{ paddingTop: 13 }}>
           <ContentBox
-            boxIndex={4}
+            boxIndex={5}
             leftcontentstyle={{
               width: "916px",
               margin: { top: 0, right: "12px", bottom: "12px", left: 0 },

pages/equipmentLeasing/styled.tsx

@@ -16,10 +16,12 @@ export const Box = styled.div`
     cursor: pointer;
     transition: all 0.5s;
     &-top {
+      display: flex;
+      justify-content: center;
+      align-items: center;
       height: 145px;
       background: #ffffff;
       border-radius: 6px 6px 0px 0px;
-      padding: 19px 52px 10px 52px;
       &-image {
         width: 116px;
         height: 116px;
@@ -29,7 +31,6 @@ export const Box = styled.div`
     &-bottom {
       padding: 10px 13px 14px 18px;
       &-title {
-        width: 189px;
         height: 24px;
         font-size: 14px;
         font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
@@ -73,5 +74,6 @@ export const Box = styled.div`
   }
   .pagination-page {
     text-align: right;
+    margin-top: 150px;
   }
 `;