Merge branch 'master' into feature/chuck

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

@@ -64,8 +64,8 @@ export default function EquipmentLeasingDetail() {
             (item) => item.productSpecList
           )
           if (wareList) {
-            const wareSkuList: GetWebDeviceWareSkuById[] = wareList.flat()
-            setWareSkuList(wareSkuList)
+            const List: GetWebDeviceWareSkuById[] = wareList.flat()
+            setWareSkuList(List)
           }
         })
     }
@@ -391,7 +391,7 @@ export default function EquipmentLeasingDetail() {
                 </div>
                 <div className="num-right">
                   <Form.Item style={{ flex: 1, marginRight: 16 }} name="num">
-                    <InputNumber min={1} max={10} onChange={onChangeNum} />
+                    <InputNumber min={1} max={100} onChange={onChangeNum} />
                   </Form.Item>
                 </div>
               </div>

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

@@ -125,7 +125,6 @@ export default function OrderForGoods(props: PropsBox) {
   const handleOkPayment = () => {
     setLoading(true)
     if (paymentDetail?.orderNo) {
-      const date = new FormData()
       api.OrderPayment({ orderNo: paymentDetail?.orderNo }).then((res) => {
         if (res.code === '200') {
           message.success('付款成功')
@@ -208,7 +207,7 @@ export default function OrderForGoods(props: PropsBox) {
               <div className="image">
                 <Image
                   preview={{ visible: false }}
-                  src={wareSkuList![0].specImage}
+                  src={(wareSkuList && wareSkuList![0].specImage) || ''}
                   onClick={() => setVisible(true)}
                 />
                 <div style={{ display: 'none' }}>
@@ -218,13 +217,19 @@ export default function OrderForGoods(props: PropsBox) {
                       onVisibleChange: (vis) => setVisible(vis),
                     }}
                   >
-                    <Image src={wareSkuList![0].specImage} />
+                    <Image
+                      src={(wareSkuList && wareSkuList![0].specImage) || ''}
+                    />
                   </Image.PreviewGroup>
                 </div>
               </div>
               <div className="right">
-                <div className="top">{wareSkuList![0].specName}</div>
-                <div className="bottom">{wareSkuList![0].versionDesc}</div>
+                <div className="top">
+                  {(wareSkuList && wareSkuList![0].specName) || ''}
+                </div>
+                <div className="bottom">
+                  {(wareSkuList && wareSkuList![0].versionDesc) || ''}
+                </div>
               </div>
             </div>
             <div className="body-item" style={{ width: 130 }}>

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

@@ -78,7 +78,6 @@ export default function JobServicesDetail() {
   const [formDate] = Form.useForm()
   const [isModalOpen, setIsModalOpen] = useState(false)
   const [loading, setLoading] = useState(false)
-  const [areaValue, setAreaValue] = useState<string>()
   const [provinceList, setProvinceList] = useState<RegionResp[]>([])
   const [isAddressMapShow, setIsAddressMapShow] = useState(false)
   const [addressContent, setAddressContent] = useState<any>()
@@ -109,7 +108,8 @@ export default function JobServicesDetail() {
           return message.warning('请选择地点')
         }
         const res = await api.insertOrderTask({
-          address: values.address,
+          address: addressContent.addressDteail,
+          taskDescription: values.taskDescription,
           city: addressContent.city,
           inspectionId: detail?.id || 1,
           lat: addressContent.lat,
@@ -144,6 +144,7 @@ export default function JobServicesDetail() {
       })
   }
   const handleCancel = () => {
+    setAddressContent(undefined)
     setIsModalOpen(false)
     formDate.resetFields()
   }
@@ -256,42 +257,6 @@ export default function JobServicesDetail() {
                 showTime
               />
             </Form.Item>
-            {/* <Form.Item
-              label="经度"
-              style={{ flex: 1, marginRight: 16 }}
-              name="lon"
-              rules={[{ required: true, message: '请输入经度' }]}
-            >
-              <Input placeholder="请输入经度" />
-            </Form.Item>
-            <Form.Item
-              label="纬度"
-              style={{ flex: 1, marginRight: 16 }}
-              name="lat"
-              rules={[{ required: true, message: '请输入纬度' }]}
-            >
-              <Input placeholder="请输入纬度" />
-            </Form.Item>
-            <Form.Item
-              label="选择省市"
-              style={{ flex: 1, marginRight: 16 }}
-              name="province"
-              rules={[{ required: true, message: '请选择省市' }]}
-            >
-              <Cascader
-                allowClear
-                placeholder="选择省市"
-                className="selectItem"
-                size="large"
-                fieldNames={{
-                  label: 'name',
-                  value: 'name',
-                  children: 'childInfo',
-                }}
-                options={provinceList}
-                changeOnSelect
-              />
-            </Form.Item> */}
             <Form.Item
               label="选择地点"
               style={{ flex: 1, marginRight: 16 }}
@@ -299,8 +264,16 @@ export default function JobServicesDetail() {
               rules={[{ required: true, message: '请选择地点' }]}
             >
               {addressContent ? (
-                <div>
-                  已选择：{addressContent.province + addressContent.city}
+                <div className="address-map">
+                  <div className="value">
+                    已选择：{addressContent.addressDteail}
+                  </div>
+                  <Button
+                    onClick={() => setIsAddressMapShow(true)}
+                    type="primary"
+                  >
+                    修改位置
+                  </Button>
                 </div>
               ) : (
                 <Button onClick={() => setIsAddressMapShow(true)} type="text">
@@ -308,20 +281,6 @@ export default function JobServicesDetail() {
                 </Button>
               )}
             </Form.Item>
-            <Form.Item
-              label="详细地址"
-              style={{ flex: 1, marginRight: 16 }}
-              name="address"
-              rules={[{ required: true, message: '请输入详情地址' }]}
-            >
-              <TextArea
-                value={areaValue}
-                onChange={(e) => setAreaValue(e.target.value)}
-                placeholder="请输入详情地址"
-                autoSize={{ minRows: 3, maxRows: 5 }}
-                style={{ width: 385, height: 72 }}
-              />
-            </Form.Item>
             <div>
               任务描述(选填) 项目号、 业务负责人、
               客户名称、演示设备(注明飞机、挂载、地面站)、现场联系人及电话
@@ -331,8 +290,6 @@ export default function JobServicesDetail() {
               name="taskDescription"
             >
               <TextArea
-                value={areaValue}
-                onChange={(e) => setAreaValue(e.target.value)}
                 placeholder="补充描述有助于方案沟通更高效哦~"
                 autoSize={{ minRows: 3, maxRows: 5 }}
                 style={{ width: 385, height: 72 }}

pages/jobServices/detail/components/map/index.tsx

@@ -109,16 +109,29 @@ export default function MapComponent(props: BoxProps) {
     geocoder.getAddress(lnglat, function (status: any, result: any) {
       if (status === 'complete' && result.regeocode) {
         const address = result.regeocode.addressComponent
-        console.log(address.province)
-        console.log(address.city)
+        const addressDteail =
+          address.province +
+          address.city +
+          address.district +
+          address.township +
+          address.street +
+          address.streetNumber
         setAddressContent({
           province: address.province,
           city: address.city,
           lon: lnglat.lng,
           lat: lnglat.lat,
+          addressDteail,
         })
         setIsAddressMapShow(false)
-        // console.log(address.province + address.city + address.district) // 打印省市区信息
+        // console.log(
+        //   address.province +
+        //     address.city +
+        //     address.district +
+        //     address.township +
+        //     address.street +
+        //     address.streetNumber
+        // ) // 打印省市区信息
       }
     })
     // MAP.off('click', mapGet); // 移除click事件

pages/jobServices/detail/styled.tsx

@@ -129,4 +129,13 @@ export const Box = styled.div`
       }
     }
   }
+  .form-data {
+    .address-map {
+      display: flex;
+      align-items: center;
+      .value {
+        margin-right: 20px;
+      }
+    }
+  }
 `

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

@@ -25,22 +25,21 @@ export default function MallDetail() {
   const [detail, setDetail] = useState<GetLeaseGoodsDetailResp | null>(null); //详情数据
   const [intentionModalOpen, setIntentionModalOpen] = useState(false); //意向弹窗
   const [productImg, setProductImg] = useState(""); //展示的商品图
-  const [previewIndex, setPreviewIndex] = useState(0);  //预览开始索引
+  const [previewIndex, setPreviewIndex] = useState(0); //预览开始索引
   const [checkItems, setCheckItems] = useState<ProductSpecList[]>([]); //选中的规格
   const [specCount, setSpecCount] = useState(0); //规格数量
 
-
   useEffect(() => {
-    if(detail){
+    if (detail) {
       let count = 0;
-      detail.goodsSpec?.forEach(good => {
-        good.productSpecList?.forEach(product => {
+      detail.goodsSpec?.forEach((good) => {
+        good.productSpecList?.forEach((product) => {
           count++;
-        })
-      })
+        });
+      });
       setSpecCount(count);
     }
-  }, [detail])
+  }, [detail]);
 
   //打开意向modal
   const openIntentionModal = () => {
@@ -91,7 +90,11 @@ export default function MallDetail() {
       <div className="page" style={{ marginTop: 20, backgroundColor: "#fff" }}>
         <div style={{ display: "none" }}>
           <AImage.PreviewGroup
-            preview={{ visible, onVisibleChange: (vis) => setVisible(vis), current: previewIndex }}
+            preview={{
+              visible,
+              onVisibleChange: (vis) => setVisible(vis),
+              current: previewIndex,
+            }}
           >
             {detail?.images?.map((item) => {
               return <AImage key={item.id} src={item.imgUrl} />;
@@ -132,7 +135,9 @@ export default function MallDetail() {
                       src={item.imgUrl}
                       fallback={errImg}
                       style={{ cursor: "pointer" }}
-                      onClick={() => {setProductImg(item.imgUrl), setPreviewIndex(i)}}
+                      onClick={() => {
+                        setProductImg(item.imgUrl), setPreviewIndex(i);
+                      }}
                     />
                   </SwiperSlide>
                 );

pages/mall/detail/components/intentionModal/api/index.ts

-import request from "~/api/request"
+import request from '~/api/request'
 
 interface CommitMallOrderParams {
-  buyNum: number;
-  directoryId: number;
-  goodsInfoId: number;
-  mallSpecIds: any[];
-  remark?: string;
-  userAddressId: number;
+  buyNum: number
+  directoryId: number
+  goodsInfoId: number
+  mallSpecIds: any[]
+  remark?: string
+  userAddressId: number
 }
 
 export default {
   //提交订单V1.0.0
   commitMallOrder(params: CommitMallOrderParams) {
-    return request("/oms/app-order/commitMallOrder", 'post', params);
-  }
-}
\ No newline at end of file
+    return request('/oms/app-order/confirmMallOrder', 'post', params)
+  },
+}

pages/mall/detail/components/intentionModal/index.module.scss

@@ -59,6 +59,23 @@
   padding: 0 39px 0 38px;
   height: 364px;
   overflow-y: auto;
-
+  .numBox {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 10px;
+    .numLeft {
+      display: flex;
+      align-items: center;
+      .label {
+        font-size: 14px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #121212;
+        margin-right: 5px;
+      }
+    }
+  }
   @include scrollbar();
+  
 }

pages/mall/detail/components/intentionModal/index.tsx

@@ -16,7 +16,7 @@ type Props = {
 export default function IntentionModal(props: Props) {
   const [checkedMap, setCheckedMap] = useState<{ string?: boolean }>({}); //通过索引记录选中的产品规格 例: {'1,1': true|false} props.detail?.goodsSpec[1].productSpecList[1]
   const [checkItems, setCheckItems] = useState<ProductSpecList[]>([]); //选中的规格
-  const [loading, setLoading] = useState(false);  //下单中
+  const [loading, setLoading] = useState(false); //下单中
 
   useEffect(() => {
     let list: ProductSpecList[] = [];
@@ -83,15 +83,14 @@ export default function IntentionModal(props: Props) {
 
             //重置为未选中
             let temp = {
-              ...checkedMap
+              ...checkedMap,
             };
             Object.keys(temp).forEach((key) => {
               temp[key as keyof typeof temp] = false;
             });
             setCheckedMap(temp);
             props.onCancel();
-          }else{
-            
+          } else {
           }
           setLoading(false);
         })

pages/mall/detail/components/orderForGoods/api/index.tsx

+import request, { Response } from '~/api/request'
+
+export interface GetWebDeviceDetailParams {
+  buyNum: number
+  directoryId: number
+  goodsInfoId: number
+  mallSpecIds: number[]
+  remark?: string
+  userAddressId: number
+}
+
+export interface WareImgsType {
+  id: number
+  imgUrl: string
+  imgType: number
+}
+
+export interface UserAddress {
+  id: number
+  takeName: string
+  takePhone: string
+  takeRegion: string
+  takeAddress: string
+  type: number
+}
+
+export interface GetOrderForGoods {
+  realityAmount: number
+  orderNo: string
+}
+
+export default {
+  //web-地址管理-查询用户地址列表-条件查询
+  listUserAddress: (params: {}): Promise<Response<UserAddress[]>> => {
+    return request('/oms/user-address/selectList', 'POST', params)
+  },
+  //web-产品商城-下单
+  FeignAddLease: (
+    params: GetWebDeviceDetailParams
+  ): Promise<Response<GetOrderForGoods>> => {
+    return request('/oms/app-order/commitMallOrder', 'post', params)
+  },
+  //web-产品商城-订单支付
+  OrderPayment: (params: {
+    orderNo: string
+  }): Promise<Response<GetOrderForGoods>> => {
+    return request(`/payment/repocash/orderPayment`, 'get', params)
+  },
+}

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

+import React, { useContext, useEffect, useState } from 'react'
+import { OrderForGoodsBox } from './styled'
+import type { FormInstance, RadioChangeEvent } from 'antd'
+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,
+//   GetLeaseGoodsResult,
+// } from '../../api'
+import { UserContext } from '~/lib/userProvider'
+const { TextArea } = Input
+
+interface PropsBox {
+  setIsorderForGoods: (boolean: boolean) => void
+  mallDetail?: any
+  detailData?: any
+  shopDetail?: any
+  wareSkuList?: any
+  discount?: any
+}
+
+export default function OrderForGoods(props: PropsBox) {
+  const {
+    setIsorderForGoods,
+    shopDetail,
+    detailData,
+    wareSkuList,
+    discount,
+    mallDetail,
+  } = props
+  const [value, setValue] = useState(1)
+  const [areaValue, setAreaValue] = useState<string>()
+  const [list, setList] = useState<Array<UserAddress> | null>()
+
+  const onChange = (e: RadioChangeEvent) => {
+    console.log('radio checked', e.target.value)
+    setValue(e.target.value)
+  }
+  const onChangeValue = (index: number) => {
+    setValue(index)
+  }
+  const detailSumbit = () => {
+    if (!list?.length && !value) return message.warning('暂无地址信息')
+    if (list?.length && !value) return message.warning('请选择地址')
+    if (detailData && list && mallDetail) {
+      const pushList = {
+        buyNum: mallDetail.buyNum,
+        directoryId: mallDetail.directoryId,
+        goodsInfoId: mallDetail.goodsInfoId,
+        mallSpecIds: mallDetail.mallSpecIds,
+        userAddressId: value,
+        remark: areaValue,
+      }
+
+      api.FeignAddLease(pushList).then((res) => {
+        if (res.code === '200') {
+          message.success('提交成功')
+          setIsorderForGoods(false)
+        } else {
+          message.error(res.message)
+        }
+      })
+    }
+  }
+
+  useEffect(() => {
+    api
+      .listUserAddress({})
+      .then((res) => {
+        console.log(res)
+        setList(res.result)
+        res.result?.map((item, index) => {
+          if (item.type === 0) {
+            setValue(item.id)
+          }
+        })
+      })
+      .catch((err) => {
+        console.log(err)
+      })
+  }, [])
+
+  //图片预览
+  const [visible, setVisible] = useState(false)
+
+  return (
+    <OrderForGoodsBox>
+      <div className="address">
+        <div className="top">
+          <div className="left">确认收货地址</div>
+          <div className="right">
+            <Button type="link" style={{ color: '#007aff' }}>
+              管理收货地址
+            </Button>
+          </div>
+        </div>
+        <div className="bottom">
+          {list?.map((item, index) => (
+            <div
+              key={item.id}
+              className={`item ${value === item.id ? 'active' : ''}`}
+              onClick={() => onChangeValue(item.id)}
+            >
+              <div className="left">
+                <div className="active">
+                  <div className="icon"></div>
+                  <div className="label">寄送至</div>
+                </div>
+                <Radio.Group onChange={onChange} value={value}>
+                  <Space direction="vertical">
+                    <Radio value={item.id}>{item.takeAddress}</Radio>
+                  </Space>
+                </Radio.Group>
+              </div>
+              {value === item.id ? (
+                <div className="right">
+                  <Button type="link" style={{ color: '#007aff' }}>
+                    修改地址
+                  </Button>
+                </div>
+              ) : null}
+            </div>
+          ))}
+        </div>
+      </div>
+      <div className="info">
+        <div className="title">确认订单信息</div>
+        <div className="table">
+          <div className="table-title">
+            <div className="table-item" style={{ width: 290 }}>
+              宝贝
+            </div>
+            <div className="table-item" style={{ width: 130 }}>
+              单价
+            </div>
+            <div className="table-item" style={{ width: 130 }}>
+              数量
+            </div>
+            <div className="table-item" style={{ width: 435 }}>
+              合计
+            </div>
+          </div>
+          {mallDetail.orderGoodsProdDetailDTOS.map((item: any) => (
+            <div className="table-body" key={item.id}>
+              <div className="body-item article" style={{ width: 290 }}>
+                <div className="image">
+                  <Image
+                    preview={{ visible: false }}
+                    src={item.prodSkuSpecImage || ''}
+                    onClick={() => setVisible(true)}
+                  />
+                  <div style={{ display: 'none' }}>
+                    <Image.PreviewGroup
+                      preview={{
+                        visible,
+                        onVisibleChange: (vis) => setVisible(vis),
+                      }}
+                    >
+                      <Image src={item.prodSkuSpecImage || ''} />
+                    </Image.PreviewGroup>
+                  </div>
+                </div>
+                <div className="right">
+                  <div className="top">
+                    {`【${item.productName}】${item.specName}` || ''}
+                  </div>
+                  <div className="bottom">版本：{item.versionDesc || ''}</div>
+                  <div className="bottom">料号：{item.partNo || ''}</div>
+                </div>
+              </div>
+              <div className="body-item" style={{ width: 130 }}>
+                {item.unitPrice || 0}
+              </div>
+              <div className="body-item" style={{ width: 130 }}>
+                {item.buyNum || 1}
+              </div>
+              <div className="body-item total-price" style={{ width: 435 }}>
+                {item.skuSpecAmount}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+      <div className="notes">
+        <div className="left">
+          <div className="label">备注：</div>
+          <TextArea
+            value={areaValue}
+            onChange={(e) => setAreaValue(e.target.value)}
+            placeholder="请输入备注"
+            autoSize={{ minRows: 3, maxRows: 5 }}
+            style={{ width: 385, height: 72 }}
+          />
+        </div>
+        <div className="right">
+          <div className="top">
+            <div className="font">
+              <div className="label">运费：</div>
+              <div className="value">邮寄到付,由客户自己承担</div>
+            </div>
+            <div className="price">0.00</div>
+          </div>
+          <div className="bottom">
+            <div className="font">
+              <div className="label">押金：</div>
+              <div className="value">渠道商可免押金</div>
+            </div>
+            <div className="price">0.00</div>
+          </div>
+        </div>
+      </div>
+      <div className="detail-box">
+        <div className="right-box">
+          <div className="detail">
+            <div className="top">
+              <div className="label">实付款</div>
+              <div className="price">¥{mallDetail.orderAmount}</div>
+            </div>
+            <div className="bottom">
+              <div className="value">寄送至</div>
+              {list ? (
+                <div className="value-content">{list![value]?.takeAddress}</div>
+              ) : null}
+            </div>
+          </div>
+          <div className="detail-sumbit">
+            <Button className="btn" onClick={detailSumbit}>
+              提交订单
+            </Button>
+          </div>
+        </div>
+      </div>
+    </OrderForGoodsBox>
+  )
+}

pages/mall/detail/components/orderForGoods/styled.tsx

+import styled from 'styled-components'
+
+export const OrderForGoodsBox = styled.div`
+  box-sizing: border-box;
+  width: 1000px;
+  .address {
+    .top {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      border-bottom: 1px solid #e6e6e6;
+      height: 30px;
+      line-height: 30px;
+      margin-top: 30px;
+      .left {
+        font-size: 14px;
+        font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
+        font-weight: bold;
+        color: #333333;
+        line-height: 18px;
+      }
+      .right {
+        .btn {
+          font-size: 14px;
+          font-family: MicrosoftYaHei;
+          color: #007aff;
+          line-height: 19px;
+        }
+      }
+    }
+    .bottom {
+      .item {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        width: 1000px;
+        height: 48px;
+        border: 1px solid transparent;
+        margin-top: 8px;
+        &.active {
+          background: #fff1e8;
+          border-radius: 6px;
+          border: 1px solid #ff552d;
+        }
+        .left {
+          display: flex;
+          align-items: center;
+          justify-content: space-around;
+          .active {
+            margin-right: 18px;
+            display: flex;
+            .icon {
+              width: 15px;
+              height: 22px;
+              background: #ff552d;
+              margin-left: 17px;
+            }
+            .label {
+              font-size: 14px;
+              font-family: MicrosoftYaHei;
+              color: #000000;
+              line-height: 19px;
+              margin-left: 18px;
+            }
+          }
+        }
+        .right {
+          margin-right: 22px;
+        }
+      }
+    }
+  }
+  .info {
+    margin-top: 30px;
+    .title {
+      font-size: 14px;
+      font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
+      font-weight: bold;
+      color: #333333;
+      line-height: 18px;
+    }
+    .table {
+      .table-title {
+        display: flex;
+        align-items: center;
+        width: 1000px;
+        border-bottom: 1px solid #e6e6e6;
+        padding: 10px 0;
+        margin-top: 20px;
+        .table-item {
+          text-align: center;
+          font-size: 14px;
+          font-family: MicrosoftYaHei;
+          color: #000000;
+          line-height: 19px;
+        }
+      }
+      .table-body {
+        display: flex;
+        align-items: center;
+        height: 100px;
+        margin-top: 10px;
+        .body-item {
+          text-align: center;
+          &.article {
+            display: flex;
+            justify-content: space-between;
+            .image {
+              width: 80px;
+              height: 80px;
+              background-color: pink;
+              margin-right: 10px;
+            }
+            .right {
+              .top {
+                width: 171px;
+                font-size: 14px;
+                font-family: PingFangSC-Regular, PingFang SC;
+                font-weight: 400;
+                color: #141414;
+                line-height: 20px;
+              }
+              .bottom {
+                width: 171px;
+                font-size: 12px;
+                font-family: PingFangSC-Regular, PingFang SC;
+                font-weight: 400;
+                color: #929295;
+                line-height: 17px;
+              }
+            }
+          }
+          &.total-price {
+            font-size: 14px;
+            font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
+            font-weight: bold;
+            color: #ff3100;
+            line-height: 18px;
+          }
+        }
+      }
+    }
+  }
+  .notes {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 1000px;
+    height: 110px;
+    background: #e1efff;
+    border: 1px solid #d0eaf5;
+    padding: 0 22px 0 16px;
+    .left {
+      display: flex;
+      align-items: top;
+      .label {
+        font-size: 14px;
+        font-family: MicrosoftYaHei;
+        color: #000000;
+        margin-top: 4px;
+      }
+    }
+    .right {
+      width: 430px;
+      .top {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+      .font {
+        display: flex;
+      }
+      .bottom {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-top: 18px;
+      }
+      .label {
+        font-size: 14px;
+        font-family: MicrosoftYaHei;
+        color: #000000;
+        line-height: 19px;
+        margin-right: 12px;
+      }
+      .value {
+        font-size: 14px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #2b2b2b;
+        line-height: 20px;
+      }
+      .price {
+        font-size: 14px;
+        font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
+        font-weight: bold;
+        color: #ff3100;
+        line-height: 18px;
+      }
+    }
+  }
+  .detail-box {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 26px;
+    .right-box {
+      .detail {
+        width: 477px;
+        height: 110px;
+        border: 1px solid #ff5001;
+        padding: 16px 19px 19px 19px;
+        .top {
+          display: flex;
+          justify-content: flex-end;
+          align-items: center;
+          .label {
+            font-size: 14px;
+            font-family: MicrosoftYaHei;
+            color: #474747;
+            line-height: 19px;
+            margin-right: 10px;
+          }
+          .price {
+            font-size: 26px;
+            font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
+            font-weight: bold;
+            color: #ff552d;
+            line-height: 33px;
+          }
+        }
+        .bottom {
+          display: flex;
+          justify-content: flex-end;
+          align-items: center;
+          margin-top: 15px;
+          .value {
+            font-size: 12px;
+            font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
+            font-weight: bold;
+            color: #000000;
+            line-height: 15px;
+            margin-right: 10px;
+          }
+          .value-content {
+            font-size: 12px;
+            font-family: MicrosoftYaHei;
+            color: #333333;
+            line-height: 16px;
+          }
+        }
+      }
+      .detail-sumbit {
+        display: flex;
+        justify-content: flex-end;
+        .btn {
+          width: 182px;
+          height: 39px;
+          background: #ff552d;
+          border: 1px solid #ff5001;
+          border-radius: 0;
+          color: #ffffff;
+        }
+      }
+    }
+  }
+  .Payment {
+    .title {
+      text-align: center;
+      font-size: 26px;
+      font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
+      font-weight: bold;
+      color: #ff552d;
+    }
+  }
+`

pages/personalCenter/leasingOrders/index.page.tsx

@@ -20,6 +20,7 @@ import api, { LeasingList, ListTranStatusResp } from "./api";
 import moment from "moment";
 import PayModal from "./components/payModal";
 import RefundModal from "./components/refundModal";
+import Moment from 'moment';
 
 const items: TabsProps["items"] = [
   {
@@ -221,7 +222,15 @@ export default function LeasingOrders() {
                         background: "#EBF8FF",
                       }}
                     >
-                      <div className={styles.font2}>2021-10-21 12:21:10</div>
+                      <div className={styles.font2}>
+                        <Space size={10}>
+                          <div>
+                            {Moment(item.startDate).format("YYYY-MM-DD")} 至{" "}
+                            {Moment(item.endDate).format("YYYY-MM-DD")}
+                          </div>
+                          <div>订单编号: {item.orderNo}</div>
+                        </Space>{" "}
+                      </div>
                       <div className={styles.font3}>
                         {
                           tranStatusMap.find(

pages/personalCenter/mallOrders/index.page.tsx

@@ -141,8 +141,19 @@ export default function LeasingOrder() {
                         background: "#EBF8FF",
                       }}
                     >
-                      <div className={styles.font2}>{item.createTime}</div>
-                      <div className={styles.font3}>{tranStatusMap.find(status => status.code === item.statusCode)?.status}</div>
+                      <div className={styles.font2}>
+                        <Space size={10}>
+                          <div>{item.createTime}</div>
+                          <div>订单编号: {item.orderNo}</div>
+                        </Space>
+                      </div>
+                      <div className={styles.font3}>
+                        {
+                          tranStatusMap.find(
+                            (status) => status.code === item.statusCode
+                          )?.status
+                        }
+                      </div>
                     </Row>
                     <Row
                       style={{ minHeight: 100, border: "1px solid #D0EAF5" }}

pages/personalCenter/servicesOrders/index.page.tsx

@@ -18,7 +18,7 @@ import LayoutView from "~/components/layout";
 import Sider from "../components/sider";
 import api, { OrderList, GetServiceOrderStatusResp } from "./api";
 import styles from "./index.module.scss";
-import Moment from 'moment';
+import Moment from "moment";
 
 const items: TabsProps["items"] = [
   {
@@ -55,7 +55,9 @@ export default function ServicesOrder() {
   const [orderList, setOrderList] = useState<OrderList[]>([]);
   const [loading, setLoading] = useState(false);
   const [orderNo, setOrderNo] = useState<string | undefined>();
-  const [tranStatusMap, setTranStatusMap] = useState<GetServiceOrderStatusResp[]>([]); //订单状态字典
+  const [tranStatusMap, setTranStatusMap] = useState<
+    GetServiceOrderStatusResp[]
+  >([]); //订单状态字典
 
   //获取订单状态字典
   useEffect(() => {
@@ -143,8 +145,13 @@ export default function ServicesOrder() {
                       }}
                     >
                       <div className={styles.font2}>
-                        {Moment(item.startTime).format("YYYY/MM/DD")} -{" "}
-                        {Moment(item.endTime).format("YYYY/MM/DD")}
+                        <Space size={10}>
+                          <div>
+                            {Moment(item.startTime).format("YYYY-MM-DD")} 至{" "}
+                            {Moment(item.endTime).format("YYYY-MM-DD")}
+                          </div>
+                          <div>订单编号: {item.orderNo}</div>
+                        </Space>
                       </div>
                       <div className={styles.font3}>
                         {