添-设备租赁-订单按照1-7天，8-15天，16-30天，30天以上进行钱款计算，商品规格价格接口

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

@@ -20,7 +20,11 @@ import {
 } from 'antd'
 import Image from 'next/image'
 import errImg from '~/assets/errImg'
-import api, { GetWebDeviceDetailResult, GetWebDeviceWareSkuById } from './api'
+import api, {
+  GetWebDeviceDetailResult,
+  GetWebDeviceWareSkuById,
+  GetLeaseGoodsResult,
+} from './api'
 import { UserContext } from '~/lib/userProvider'
 import flowPat from './assets/flow-path.png'
 import { RangePickerProps } from 'antd/es/date-picker'
@@ -76,13 +80,15 @@ export default function EquipmentLeasingDetail() {
   const [form] = Form.useForm()
   const [formDate] = Form.useForm()
   const tagsData = [
-    { label: '1-7天', disable: false },
-    { label: '8-15天', disable: false },
-    { label: '16-30天', disable: false },
-    { label: '30天以上', disable: false },
+    { id: 0, label: '1-7天', disable: false },
+    { id: 1, label: '8-15天', disable: false },
+    { id: 2, label: '16-30天', disable: false },
+    { id: 3, label: '30天以上', disable: false },
   ]
+
+  const [discount, setDiscount] = useState<GetLeaseGoodsResult | null>()
   const [selectedTags, setSelectedTags] = useState<number>()
-  const [selectedTagsData, setSelectedTagsData] = useState<string>()
+  const [selectedTagsData, setSelectedTagsData] = useState<number>()
   const [shopDetail, setShopDetail] = useState<ShopDetail>()
 
   const showModal = () => {
@@ -91,8 +97,9 @@ export default function EquipmentLeasingDetail() {
       if (wareSkuList?.length) {
         setSelectedTags(wareSkuList[0].id)
         form.setFieldValue('id', wareSkuList[0].id)
-        setSelectedTagsData('1-7天')
-        form.setFieldValue('date', '3-7天')
+        setSelectedTagsData(0)
+        form.setFieldValue('date', 0)
+        getPrice(0)
       }
     } else {
       setNeedLogin(true)
@@ -157,16 +164,30 @@ export default function EquipmentLeasingDetail() {
   }
 
   const handleChangeDate = (
-    tag: string,
+    tag: number,
     checked: boolean,
     disable: boolean
   ) => {
     if (checked && !disable) {
       const nextSelectedTags = checked
         ? tag
-        : tagsData.filter((t) => t.label !== tag)[0].label
+        : tagsData.filter((t) => t.id !== tag)[0].id
       setSelectedTagsData(nextSelectedTags)
       form.setFieldValue('date', tag)
+      getPrice(tag)
+    }
+  }
+
+  const getPrice = (tag: number) => {
+    const Id = wareSkuList?.filter(
+      (item) => item.id === form.getFieldValue('id')
+    )[0].productSpec
+    if (Id) {
+      api
+        .GoodsPriceDetail({ leaseTerm: tag, productSpecId: Id })
+        .then((res) => {
+          setDiscount(res.result)
+        })
     }
   }
 
@@ -307,7 +328,9 @@ export default function EquipmentLeasingDetail() {
               <div className="right">
                 <div className="top">
                   <span className="tag">¥</span>
-                  <span className="money">{detail?.price || 0}</span>
+                  <span className="money">
+                    {discount?.specPrice[0]?.price || 0}
+                  </span>
                   <span className="unit">/天</span>
                 </div>
                 <div className="bottom">渠道免押金</div>
@@ -348,10 +371,10 @@ export default function EquipmentLeasingDetail() {
                 <Space size={[0, 8]} wrap>
                   {tagsData.map((tag) => (
                     <CheckableTag
-                      key={tag.label}
-                      checked={tag.label === selectedTagsData}
+                      key={tag.id}
+                      checked={tag.id === selectedTagsData}
                       onChange={(checked) =>
-                        handleChangeDate(tag.label, checked, tag.disable)
+                        handleChangeDate(tag.id, checked, tag.disable)
                       }
                       className={`tagsData ${
                         tag.disable ? 'disable tagsDisable' : ''
@@ -423,7 +446,12 @@ export default function EquipmentLeasingDetail() {
             <div className="bottom-item">
               <div className="label">租金合计</div>
               <div className="price">
-                <div className="left">¥{detail?.price! * days! || 0}</div>
+                <div className="left">
+                  ¥
+                  {discount?.specPrice[0]?.price! *
+                    days! *
+                    form.getFieldValue('num') || 0}
+                </div>
                 {/* <div className="right">(日均175)</div> */}
               </div>
             </div>
@@ -435,6 +463,7 @@ export default function EquipmentLeasingDetail() {
           shopDetail={shopDetail}
           days={days}
           detailData={detail}
+          discount={discount}
           wareSkuList={wareSkuList?.filter(
             (item) => item.id === form.getFieldValue('id')
           )}

pages/equipmentLeasing/detail/api/index.tsx

@@ -26,7 +26,7 @@ export interface GetLeaseGoodsResult {
   productSpecId: number
   type: number | null
   leaseTerm: number
-  specPrice: PriceType
+  specPrice: PriceType[]
 }
 export interface GetWebDeviceDetailResult {
   id: number

pages/equipmentLeasing/detail/components/orderForGoods/index.tsx

@@ -5,7 +5,11 @@ import { Button, Radio, Space, Input, message, Modal, Image } from 'antd'
 import api, { UserAddress, GetOrderForGoods } from './api'
 import moment from 'moment'
 import { ShopDetail } from '../../[id].page'
-import { GetWebDeviceDetailResult, GetWebDeviceWareSkuById } from '../../api'
+import {
+  GetWebDeviceDetailResult,
+  GetWebDeviceWareSkuById,
+  GetLeaseGoodsResult,
+} from '../../api'
 import { UserContext } from '~/lib/userProvider'
 const { TextArea } = Input
 
@@ -15,11 +19,18 @@ interface PropsBox {
   days?: number
   shopDetail?: ShopDetail
   wareSkuList?: GetWebDeviceWareSkuById[]
+  discount?: GetLeaseGoodsResult | null
 }
 
 export default function OrderForGoods(props: PropsBox) {
-  const { setIsorderForGoods, shopDetail, days, detailData, wareSkuList } =
-    props
+  const {
+    setIsorderForGoods,
+    shopDetail,
+    days,
+    detailData,
+    wareSkuList,
+    discount,
+  } = props
   const [value, setValue] = useState(1)
   const [areaValue, setAreaValue] = useState<string>()
   const [list, setList] = useState<Array<UserAddress> | null>()
@@ -35,8 +46,8 @@ export default function OrderForGoods(props: PropsBox) {
   const detailSumbit = () => {
     if (detailData && shopDetail && list && wareSkuList) {
       const pushList = {
-        // actualPay: shopDetail.num * detailData.price!,
-        actualPay: 100,
+        actualPay:
+          discount?.specPrice[0].price! * shopDetail?.num! * days! || 0,
         deposit: 0,
         endDate: moment(new Date(shopDetail.dateDetail[1])).format(
           'YYYY-MM-DD'
@@ -48,13 +59,13 @@ export default function OrderForGoods(props: PropsBox) {
           takeName: list[value].takeName,
           takePhone: Number(list[value].takePhone),
         },
-        // rentPrice: shopDetail.num * detailData.price!,
-        rentPrice: 100,
+        rentPrice:
+          discount?.specPrice[0].price! * shopDetail?.num! * days! || 0,
         returnDate: moment(
           new Date(shopDetail.dateDetail[1]).getTime() + 864e5
         ).format('YYYY-MM-DD'),
-        // shouldPay: shopDetail.num * detailData.price!,
-        shouldPay: 100,
+        shouldPay:
+          discount?.specPrice[0].price! * shopDetail?.num! * days! || 0,
         specsId: wareSkuList[0].productSpec,
         startDate: moment(new Date(shopDetail.dateDetail[0]!)).format(
           'YYYY-MM-DD'
@@ -81,8 +92,6 @@ export default function OrderForGoods(props: PropsBox) {
   }
 
   useEffect(() => {
-    console.log(days)
-
     api
       .listUserAddress({})
       .then((res) => {
@@ -219,7 +228,7 @@ export default function OrderForGoods(props: PropsBox) {
               </div>
             </div>
             <div className="body-item" style={{ width: 130 }}>
-              {detailData?.price || 0}
+              {discount?.specPrice[0].price || 0}
             </div>
             <div className="body-item" style={{ width: 130 }}>
               {shopDetail?.num || 1}
@@ -234,7 +243,7 @@ export default function OrderForGoods(props: PropsBox) {
               )}
             </div>
             <div className="body-item total-price" style={{ width: 135 }}>
-              {detailData?.price! * shopDetail?.num! || 0}
+              {discount?.specPrice[0].price! * shopDetail?.num! * days! || 0}
             </div>
           </div>
         </div>
@@ -272,7 +281,9 @@ export default function OrderForGoods(props: PropsBox) {
           <div className="detail">
             <div className="top">
               <div className="label">实付款</div>
-              <div className="price">¥20000.00</div>
+              <div className="price">
+                ¥{discount?.specPrice[0].price! * shopDetail?.num! * days! || 0}
+              </div>
             </div>
             <div className="bottom">
               <div className="value">寄送至</div>
@@ -309,7 +320,9 @@ export default function OrderForGoods(props: PropsBox) {
           </Button>,
         ]}
       >
-        <div className="title">￥{detailData?.price! * days!}</div>
+        <div className="title">
+          ￥{discount?.specPrice[0].price! * shopDetail?.num! * days! || 0}
+        </div>
         <div>云享飞账号： {userInfo?.uid}</div>
         <div>付款方式： 可用(￥{paymentDetail?.balance})</div>
       </Modal>