Skip to content

W
web-ci-test
提交 3a9094c2 作者: 曹云
操作

添-设备租赁-详情-立即租赁弹框，确认租期弹框，确认订单页面

上级 3b3eac38
正在显示 包含 896 行增加 和 161 行删除
pages/equipmentLeasing/detail/[id].page.tsx
import React, { useEffect , useState , useContext } from 'react' import React, { useEffect, useState, useContext } from 'react'
import {useRouter} from 'next/router'; import { useRouter } from 'next/router'
import Layout from "~/components/layout"; import Layout from '~/components/layout'
import {Box} from './styled'; import { Box } from './styled'
import ImagePreview from './components/picture-preview'; import ImagePreview from './components/picture-preview'
import { Button , Image as AImage , Divider , Select,Modal ,Tag,Space,Form,message} from 'antd'; import OrderForGoods from './components/orderForGoods'
import Image from 'next/image'; import moment from 'moment'
import errImg from "~/assets/errImg"; import {
import api,{GetWebDeviceDetailResult,GetWebDeviceWareSkuById} from './api'; Button,
import { UserContext } from "~/lib/userProvider"; Image as AImage,
Divider,
Select,
Modal,
Tag,
Space,
Form,
message,
InputNumber,
DatePicker,
} from 'antd'
import Image from 'next/image'
import errImg from '~/assets/errImg'
import api, { GetWebDeviceDetailResult, GetWebDeviceWareSkuById } from './api'
import { UserContext } from '~/lib/userProvider'
import flowPat from './assets/flow-path.png' import flowPat from './assets/flow-path.png'
import { RangePickerProps } from 'antd/es/date-picker'
const { RangePicker } = DatePicker
const { CheckableTag } = Tag const { CheckableTag } = Tag
export default function EquipmentLeasingDetail() { export default function EquipmentLeasingDetail() {
const router = useRouter(); const router = useRouter()
const { userInfo, setNeedLogin } = useContext(UserContext); const { userInfo, setNeedLogin } = useContext(UserContext)
const [id, setId] = useState<number | null>(null); const [id, setId] = useState<number | null>(null)
const [detail,setDetail] = useState<GetWebDeviceDetailResult | null>() const [detail, setDetail] = useState<GetWebDeviceDetailResult | null>()
const [wareSkuList,setWareSkuList] = useState<GetWebDeviceWareSkuById[] | undefined>() const [wareSkuList, setWareSkuList] = useState<
GetWebDeviceWareSkuById[] | undefined
>()
useEffect(()=>{ useEffect(() => {
setId(Number(router.query.id)) setId(Number(router.query.id))
},[router]) }, [router])
useEffect(()=>{ useEffect(() => {
if (id) { if (id) {
api api
.listDetailDeviceInfo({ .listDetailDeviceInfo({
id:id id: id,
}) })
.then((res) => { .then((res) => {
setDetail(res.result || null); setDetail(res.result || null)
}); })
api api
.listWareSkuById({ .listWareSkuById({
id:id id: id,
}) })
.then((res) => { .then((res) => {
res.result?.map(item=>{ res.result?.map((item) => {
return item return item
}) })
setWareSkuList(res.result || undefined); setWareSkuList(res.result || undefined)
}); })
} }
},[id]) }, [id])
//租赁弹框 //租赁弹框
const [isModalOpen, setIsModalOpen] = useState(false); const [isModalOpen, setIsModalOpen] = useState(false)
const [loading, setLoading] = useState(false); const [isModalDateOpen, setIsModalDateOpen] = useState(false)
const [form] = Form.useForm(); const [loading, setLoading] = useState(false)
const tagsData = ['3-7天', '8-15天', '16-30天', '30天以上']; const [isorderForGoods, setIsorderForGoods] = useState(false)
const [selectedTags, setSelectedTags] = useState<number>(); const [form] = Form.useForm()
const [selectedTagsData, setSelectedTagsData] = useState<string>(); const [formDate] = Form.useForm()
const tagsData = [
{ label: '3-7天', disable: false },
{ label: '8-15天', disable: false },
{ label: '16-30天', disable: true },
{ label: '30天以上', disable: false },
]
const [selectedTags, setSelectedTags] = useState<number>()
const [selectedTagsData, setSelectedTagsData] = useState<string>()
const showModal = () => { const showModal = () => {
if (userInfo) { if (userInfo) {
setIsModalOpen(true); setIsModalOpen(true)
if (wareSkuList?.length) { if (wareSkuList?.length) {
setSelectedTags(wareSkuList[0].id); setSelectedTags(wareSkuList[0].id)
form.setFieldValue("id",wareSkuList[0].id) form.setFieldValue('id', wareSkuList[0].id)
setSelectedTagsData("3-7天") setSelectedTagsData('3-7天')
form.setFieldValue("date","3-7天") form.setFieldValue('date', '3-7天')
} }
}else{ } else {
setNeedLogin(true) setNeedLogin(true)
} }
}; }
const handleOk = () => { const handleOk = () => {
setLoading(true); setLoading(true)
form form
.validateFields() .validateFields()
.then(async (values) => { .then(async (values) => {
form.resetFields() setLoading(false)
message.success("租赁成功") setIsModalOpen(false)
setLoading(false); setIsModalDateOpen(true)
setIsModalOpen(false); })
.catch((err) => {
message
.warning({
content: err.errorFields[0].errors[0],
})
.then()
setLoading(false)
})
}
const [days, setDays] = useState<number>()
const handleOkDate = async () => {
setLoading(true)
const result = await Promise.all([
form.validateFields(),
formDate.validateFields(),
])
console.log(result)
if (result) {
}
form
.validateFields()
.then(async (values) => {
setLoading(false)
setIsModalOpen(false)
setIsModalDateOpen(false)
setIsorderForGoods(true)
// try{ // try{
// const res = await api.listWareSkuUpdate(values) // const res = await api.listWareSkuUpdate(values)
// if (res.code === "200") { // if (res.code === "200") {
...@@ -92,67 +145,101 @@ export default function EquipmentLeasingDetail() { ...@@ -92,67 +145,101 @@ export default function EquipmentLeasingDetail() {
// }catch(e:any){ // }catch(e:any){
// message.error(e.message) // message.error(e.message)
// } // }
}).catch((err) => { })
.catch((err) => {
message message
.warning({ .warning({
content: err.errorFields[0].errors[0], content: err.errorFields[0].errors[0],
}) })
.then(); .then()
setLoading(false); setLoading(false)
}); })
}
};
const handleCancel = () => { const handleCancel = () => {
setIsModalOpen(false); setIsModalOpen(false)
}; setIsModalDateOpen(false)
form.resetFields()
formDate.resetFields()
}
const handleChange = (tag: number, checked: boolean) => { const handleChange = (tag: number, checked: boolean) => {
if (checked) { if (checked) {
const nextWareSkuList = checked const nextWareSkuList = checked
? tag ? tag
: wareSkuList?.filter((t) => t.id !== tag)[0].id; : wareSkuList?.filter((t) => t.id !== tag)[0].id
console.log('You are interested in: ', nextWareSkuList); console.log('You are interested in: ', nextWareSkuList)
setSelectedTags(nextWareSkuList); setSelectedTags(nextWareSkuList)
form.setFieldValue("id",tag) form.setFieldValue('id', tag)
}
} }
};
const handleChangeDate = (tag: string, checked: boolean) => { const handleChangeDate = (
if (checked) { tag: string,
checked: boolean,
disable: boolean
) => {
if (checked && !disable) {
const nextSelectedTags = checked const nextSelectedTags = checked
? tag ? tag
: tagsData.filter((t) => t !== tag)[0]; : tagsData.filter((t) => t.label !== tag)[0].label
console.log('You are interested in: ', nextSelectedTags); console.log('You are interested in: ', nextSelectedTags)
setSelectedTagsData(nextSelectedTags); setSelectedTagsData(nextSelectedTags)
form.setFieldValue("date",tag) form.setFieldValue('date', tag)
}
}
const onChangeNum = (value: number | string | null) => {
console.log('changed', value)
}
const goBack = () => {
setIsModalDateOpen(false)
setIsModalOpen(true)
}
const onchanges = (values: any) => {
if (values) {
const day = new Date(values[1]).getTime() - new Date(values[0]).getTime()
const totalDays = Math.floor(day / (1000 * 3600 * 24))
setDays(totalDays)
} else {
setDays(undefined)
}
}
const disabledDate: RangePickerProps['disabledDate'] = (current) => {
return current && current < moment().endOf('day')
} }
};
return ( return (
<Layout> <Layout>
{!isorderForGoods ? (
<Box> <Box>
<div className='item'> <div className="item">
<ImagePreview imgList={detail?.wareImgs!}/> <ImagePreview imgList={detail?.wareImgs!} />
<div className='item-right'> <div className="item-right">
<div className='title'>{detail?.wareTitle}</div> <div className="title">{detail?.wareTitle}</div>
{ {detail?.tags?.length ? (
detail?.tags?.length ? <div className="function">
(<div className='function'> {detail?.tags?.map((item) => (
{detail?.tags?.map(item=>(<div key={item} className='function-item'>{item}</div>))} <div key={item} className="function-item">
</div>) : (<div className='function not'></div>) {item}
}
<div className='menoy'>
<span className='menoy-left'>{`¥${detail?.minRent}`}</span>
<span className='menoy-right'>/天起</span>
</div> </div>
<div className='classification'> ))}
<div className='top'> </div>
<div className='left'> ) : (
<span className='label'>选择</span> <div className="function not"></div>
<span className='value'>商品分类</span> )}
<div className="menoy">
<span className="menoy-left">{`¥${detail?.minRent}`}</span>
<span className="menoy-right">/天起</span>
</div> </div>
<div className='right'> <div className="classification">
<div className="top">
<div className="left">
<span className="label">选择</span>
<span className="value">商品分类</span>
</div>
<div className="right">
<Select <Select
className="selectItem" className="selectItem"
defaultActiveFirstOption defaultActiveFirstOption
...@@ -160,43 +247,52 @@ export default function EquipmentLeasingDetail() { ...@@ -160,43 +247,52 @@ export default function EquipmentLeasingDetail() {
style={{ width: 120 }} style={{ width: 120 }}
bordered={false} bordered={false}
options={wareSkuList} options={wareSkuList}
fieldNames={{label:"skuTitle",value:"id"}} fieldNames={{ label: 'skuTitle', value: 'id' }}
placeholder="选择商品" placeholder="选择商品"
/> />
</div> </div>
</div> </div>
<div className='bottom'> <div className="bottom">
<span className='label'>发货</span> <span className="label">发货</span>
<span className='value'>顺丰到付</span> <span className="value">顺丰到付</span>
</div> </div>
</div> </div>
<div className='botton-btn'> <div className="botton-btn">
{/* <Button className='btn-left' size='small' type="primary">成为渠道商</Button> */} {/* <Button className='btn-left' size='small' type="primary">成为渠道商</Button> */}
<Button className='btn-right' size='small' type="primary" onClick={showModal}>立即租赁</Button> <Button
</div> className="btn-right"
size="small"
type="primary"
onClick={showModal}
>
立即租赁
</Button>
</div> </div>
</div> </div>
<div className='flow-path'>
<Image className='image' fill src={flowPat.src} alt="" />
</div> </div>
<div className='prompt'> <div className="flow-path">
更多租金规则请前往【云享飞】微信小程序查 <Image className="image" fill src={flowPat.src} alt="" />
</div> </div>
<Divider className='divider'>商品详情</Divider> <div className="prompt">更多租金规则请前往【云享飞】微信小程序查</div>
{ <Divider className="divider">商品详情</Divider>
detail?.wareDetailContent ? <div style={{ textAlign: "center" }} dangerouslySetInnerHTML={{ __html: detail?.wareDetailContent}}> {detail?.wareDetailContent ? (
</div> : <div style={{ textAlign: "center" }} ></div> <div
} style={{ textAlign: 'center' }}
dangerouslySetInnerHTML={{ __html: detail?.wareDetailContent }}
></div>
) : (
<div style={{ textAlign: 'center' }}></div>
)}
{/* 立即租赁 */} {/* 立即租赁 */}
<Modal <Modal
wrapClassName='application' wrapClassName="application"
open={isModalOpen} open={isModalOpen}
onOk={handleOk} onOk={handleOk}
onCancel={handleCancel} onCancel={handleCancel}
getContainer={false} getContainer={false}
footer={[ footer={[
<Button <Button
style={{ width: "100%" ,height: 44 }} style={{ width: '100%', height: 44 }}
key="submit" key="submit"
type="primary" type="primary"
loading={loading} loading={loading}
...@@ -206,13 +302,13 @@ export default function EquipmentLeasingDetail() { ...@@ -206,13 +302,13 @@ export default function EquipmentLeasingDetail() {
</Button>, </Button>,
]} ]}
> >
<div className='title'> <div className="title">
<div className="left"></div> <div className="left"></div>
<div className="right"> <div className="right">
<div className="top"> <div className="top">
<span className='tag'>¥</span> <span className="tag">¥</span>
<span className='money'>{detail?.minRent}</span> <span className="money">{detail?.minRent}</span>
<span className='unit'>/天</span> <span className="unit">/天</span>
</div> </div>
<div className="bottom">渠道免押金</div> <div className="bottom">渠道免押金</div>
</div> </div>
...@@ -222,14 +318,21 @@ export default function EquipmentLeasingDetail() { ...@@ -222,14 +318,21 @@ export default function EquipmentLeasingDetail() {
layout="vertical" layout="vertical"
name="application" name="application"
initialValues={{ modifier: 'public' }} initialValues={{ modifier: 'public' }}
className="form-data"
>
<Form.Item
style={{ flex: 1, marginRight: 16 }}
name="id"
label="选择商品"
> >
<Form.Item style={{flex:1,marginRight:16}} name="id" label="选择商品">
<Space size={[0, 8]} wrap> <Space size={[0, 8]} wrap>
{wareSkuList?.map((tag) => ( {wareSkuList?.map((tag) => (
<CheckableTag <CheckableTag
style={{height:28,lineHeight:"28px"}} style={{ height: 28, lineHeight: '28px' }}
key={tag.id} key={tag.id}
checked={wareSkuList?.some(item=>tag.id === selectedTags)} checked={wareSkuList?.some(
(item) => tag.id === selectedTags
)}
onChange={(checked) => handleChange(tag.id, checked)} onChange={(checked) => handleChange(tag.id, checked)}
> >
{tag.skuTitle} {tag.skuTitle}
...@@ -237,22 +340,99 @@ export default function EquipmentLeasingDetail() { ...@@ -237,22 +340,99 @@ export default function EquipmentLeasingDetail() {
))} ))}
</Space> </Space>
</Form.Item> </Form.Item>
<Form.Item style={{flex:1,marginRight:16}} name="date" label="租期天数（拿到和归还当天不算入租期）"> <Form.Item
style={{ flex: 1, marginRight: 16 }}
name="date"
label="租期天数（拿到和归还当天不算入租期）"
>
<Space size={[0, 8]} wrap> <Space size={[0, 8]} wrap>
{tagsData.map((tag) => ( {tagsData.map((tag) => (
<CheckableTag <CheckableTag
key={tag} key={tag.label}
checked={tag === selectedTagsData} checked={tag.label === selectedTagsData}
onChange={(checked) => handleChangeDate(tag, checked)} onChange={(checked) =>
handleChangeDate(tag.label, checked, tag.disable)
}
className={`tagsData ${
tag.disable ? 'disable tagsDisable' : ''
}`}
> >
{tag} {tag.label}
</CheckableTag> </CheckableTag>
))} ))}
</Space> </Space>
</Form.Item> </Form.Item>
<Form.Item style={{ flex: 1, marginRight: 16 }} name="num">
<div className="num-box">
<div className="num-left">
<div className="label">租赁数量</div>
<div className="inventory">库存9件</div>
</div>
<div className="num-right">
<InputNumber
min={1}
max={10}
defaultValue={3}
onChange={onChangeNum}
/>
</div>
</div>
</Form.Item>
</Form> </Form>
</Modal> </Modal>
<Modal
wrapClassName="applicationDate"
open={isModalDateOpen}
onOk={handleOkDate}
onCancel={handleCancel}
getContainer={false}
width={420}
footer={[
<Button
style={{ width: '100%', height: 44 }}
key="submit"
type="primary"
loading={loading}
onClick={handleOkDate}
>
确认租期{days ? `${days}天` : null}
</Button>,
]}
>
<div className="title">
<div className="left" onClick={goBack}>
{'<'}
</div>
<div className="right">选择租期</div>
</div>
<Form
form={formDate}
layout="vertical"
name="applicationDate"
initialValues={{ modifier: 'public' }}
className="form-data"
>
<Form.Item style={{ flex: 1, marginRight: 16 }} name="dateDetail">
<RangePicker
style={{ width: 376, marginTop: 10 }}
disabledDate={disabledDate}
onChange={onchanges}
/>
</Form.Item>
</Form>
<div className="bottom-item">
<div className="label">租金合计</div>
<div className="price">
<div className="left">¥700</div>
<div className="right">(日均175)</div>
</div>
</div>
</Modal>
</Box> </Box>
) : (
<OrderForGoods setIsorderForGoods={setIsorderForGoods} />
)}
</Layout> </Layout>
) )
} }
pages/equipmentLeasing/detail/components/orderForGoods/index.tsx 0 → 100644
import React, { useState } from 'react'
import { OrderForGoodsBox } from './styled'
import type { RadioChangeEvent } from 'antd'
import { Button, Radio, Space, Input, message } from 'antd'
const { TextArea } = Input
interface PropsBox {
setIsorderForGoods: (boolean: boolean) => void
}
export default function OrderForGoods(props: PropsBox) {
const { setIsorderForGoods } = props
const [value, setValue] = useState(1)
const [areaValue, setAreaValue] = useState<string>()
const [list, setList] = useState([{}, {}, {}, {}])
const onChange = (e: RadioChangeEvent) => {
console.log('radio checked', e.target.value)
setValue(e.target.value)
}
const onChangeValue = (index: number) => {
setValue(index)
}
const detailSumbit = () => {
message.success('提交成功')
setIsorderForGoods(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
className={`item ${value === index ? 'active' : ''}`}
onClick={() => onChangeValue(index)}
>
<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={index}>
广东省深圳市南山区国际创谷6栋（黄晓敏收）
</Radio>
</Space>
</Radio.Group>
</div>
{value === index ? (
<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: 300 }}>
租期
</div>
<div className="table-item" style={{ width: 135 }}>
合计
</div>
</div>
<div className="table-body">
<div className="body-item article" style={{ width: 290 }}>
<div className="image"></div>
<div className="right">
<div className="top">
智多星航电版智多星航电版智多星航电版智多
</div>
<div className="bottom">
商品简介商品简介商品简介商品简介商品简介
</div>
</div>
</div>
<div className="body-item" style={{ width: 130 }}>
800.00/天
</div>
<div className="body-item" style={{ width: 130 }}>
1
</div>
<div className="body-item lease-term" style={{ width: 300 }}>
2023/05/10 <div className="num">4天</div> 2023/05/13
</div>
<div className="body-item total-price" style={{ width: 135 }}>
800.00
</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">200.00</div>
</div>
<div className="bottom">
<div className="font">
<div className="label">押金：</div>
<div className="value">渠道商可免押金</div>
</div>
<div className="price">1000.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">¥20000.00</div>
</div>
<div className="bottom">
<div className="value">寄送至</div>
<div className="value-content">
广东省深圳市南山区国际创谷6栋国际创谷6
</div>
</div>
</div>
<div className="detail-sumbit">
<Button className="btn" onClick={detailSumbit}>
提交订单
</Button>
</div>
</div>
</div>
</OrderForGoodsBox>
)
}
pages/equipmentLeasing/detail/components/orderForGoods/styled.tsx 0 → 100644
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;
}
}
}
&.lease-term {
display: flex;
align-items: center;
justify-content: center;
.num {
width: 62px;
height: 24px;
background: #ff552d;
border-radius: 2px;
position: relative;
margin: 0 15px;
line-height: 24px;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #ffffff;
&::before {
content: '';
width: 10px;
height: 1px;
background-color: #ff552d;
position: absolute;
left: -10px;
top: 50%;
transform: translateY(-50%);
}
&::after {
content: '';
width: 10px;
height: 1px;
background-color: #ff552d;
position: absolute;
right: -10px;
top: 50%;
transform: translateY(-50%);
}
}
}
&.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;
}
}
}
}
`
pages/equipmentLeasing/detail/styled.tsx
import styled from "styled-components" import styled from 'styled-components'
export const Box = styled.div` export const Box = styled.div`
box-sizing: border-box; box-sizing: border-box;
width: 1200px; width: 1200px;
background-color: #fff; background-color: #fff;
padding: 42px 0 24px 24px; padding: 42px 0 24px 24px;
.item{ .item {
display: flex; display: flex;
&-right{ &-right {
height: 300px; height: 300px;
margin-left: 30px; margin-left: 30px;
.title{ .title {
height: 26px; height: 26px;
font-size: 28px; font-size: 28px;
margin-top: 5px; margin-top: 5px;
...@@ -19,119 +19,119 @@ export const Box = styled.div` ...@@ -19,119 +19,119 @@ export const Box = styled.div`
color: #090909; color: #090909;
line-height: 26px; line-height: 26px;
} }
.function{ .function {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-evenly; justify-content: space-evenly;
width: 375px; width: 375px;
height: 45px; height: 45px;
margin-top: 17px; margin-top: 17px;
background: linear-gradient(90deg, #D7F7F5 0%, #EEFDE9 100%); background: linear-gradient(90deg, #d7f7f5 0%, #eefde9 100%);
&.not{ &.not {
background: none; background: none;
} }
&-item{ &-item {
} }
} }
.menoy{ .menoy {
margin-top: 17px; margin-top: 17px;
&-left{ &-left {
width: 79px; width: 79px;
height: 41px; height: 41px;
font-size: 32px; font-size: 32px;
font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI; font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
font-weight: bold; font-weight: bold;
color: #EF2E00; color: #ef2e00;
line-height: 41px; line-height: 41px;
} }
&-right{ &-right {
width: 40px; width: 40px;
height: 20px; height: 20px;
font-size: 16px; font-size: 16px;
font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI; font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
font-weight: bold; font-weight: bold;
color: #EF2E00; color: #ef2e00;
line-height: 20px; line-height: 20px;
} }
} }
.classification{ .classification {
margin-top: 28px; margin-top: 28px;
width: 375px; width: 375px;
height: 50px; height: 50px;
.label{ .label {
height: 21px; height: 21px;
font-size: 16px; font-size: 16px;
font-family: MicrosoftYaHei; font-family: MicrosoftYaHei;
color: #9A9A9A; color: #9a9a9a;
line-height: 21px; line-height: 21px;
margin-right: 36px; margin-right: 36px;
} }
.value{ .value {
height: 21px; height: 21px;
font-size: 16px; font-size: 16px;
font-family: MicrosoftYaHei; font-family: MicrosoftYaHei;
color: #151515; color: #151515;
line-height: 21px; line-height: 21px;
} }
.top{ .top {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
.left{ .left {
} }
.right{ .right {
.selectItem{ .selectItem {
.ant-select-selection-placeholder { .ant-select-selection-placeholder {
color: #000; color: #000;
} }
} }
} }
} }
.bottom{ .bottom {
margin-top: 5px; margin-top: 5px;
} }
} }
.botton-btn{ .botton-btn {
margin-top: 30px; margin-top: 30px;
.btn-left{ .btn-left {
width: 207px; width: 207px;
height: 40px; height: 40px;
background-color: #FFE4D1; background-color: #ffe4d1;
border: 1px solid #EBBAAF; border: 1px solid #ebbaaf;
font-family: MicrosoftYaHei; font-family: MicrosoftYaHei;
color: #FF552D; color: #ff552d;
letter-spacing: 1px; letter-spacing: 1px;
margin-right: 12px; margin-right: 12px;
} }
.btn-right{ .btn-right {
width: 207px; width: 207px;
height: 40px; height: 40px;
background: #FF552D; background: #ff552d;
font-family: MicrosoftYaHei; font-family: MicrosoftYaHei;
color: #FFFFFF; color: #ffffff;
letter-spacing: 1px; letter-spacing: 1px;
} }
} }
} }
} }
.flow-path{ .flow-path {
width: 100%; width: 100%;
height: 192px; height: 192px;
text-align: center; text-align: center;
margin-top: 72px; margin-top: 72px;
position: relative; position: relative;
.image{ .image {
margin: 0 auto; margin: 0 auto;
} }
} }
.prompt{ .prompt {
width: 420px; width: 420px;
height: 25px; height: 25px;
font-size: 20px; font-size: 20px;
font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI; font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
font-weight: bold; font-weight: bold;
color: #2B2B2B; color: #2b2b2b;
line-height: 25px; line-height: 25px;
margin: 30px auto 58px auto; margin: 30px auto 58px auto;
} }
...@@ -155,40 +155,40 @@ export const Box = styled.div` ...@@ -155,40 +155,40 @@ export const Box = styled.div`
color: #989898; color: #989898;
} }
} }
.application{ .application {
.title{ .title {
display: flex; display: flex;
align-items: center; align-items: center;
padding-bottom: 25px; padding-bottom: 25px;
.left{ .left {
width: 58px; width: 58px;
height: 58px; height: 58px;
background: #D8D8D8; background: #d8d8d8;
border-radius: 2px; border-radius: 2px;
} }
.right{ .right {
margin-left: 15px; margin-left: 15px;
.top{ .top {
.tag{ .tag {
font-size: 14px; font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #FF0F0F; color: #ff0f0f;
} }
.money{ .money {
font-size: 22px; font-size: 22px;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
color: #FF0F0F; color: #ff0f0f;
} }
.unit{ .unit {
font-size: 12px; font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #FF0F0F; color: #ff0f0f;
} }
} }
.bottom{ .bottom {
width: 65px; width: 65px;
height: 18px; height: 18px;
font-size: 13px; font-size: 13px;
...@@ -199,5 +199,91 @@ export const Box = styled.div` ...@@ -199,5 +199,91 @@ export const Box = styled.div`
} }
} }
} }
.form-data {
.tagsData {
position: relative;
&.disable {
cursor: no-drop;
}
&.tagsDisable::after {
content: '缺货';
position: absolute;
top: -10px;
right: -10px;
border-radius: 5px 0;
width: 37px;
height: 14px;
line-height: 14px;
text-align: center;
background-color: #ccc;
font-size: 12px;
color: rgb(248, 248, 248);
}
}
.num-box {
display: flex;
justify-content: space-between;
align-items: center;
.num-left {
display: flex;
align-items: center;
.label {
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #121212;
margin-right: 5px;
}
.inventory {
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #acacac;
}
}
}
}
}
.applicationDate {
.title {
display: flex;
align-items: center;
.left {
width: 10px;
cursor: pointer;
}
.right {
flex: 1;
text-align: center;
}
}
.bottom-item {
display: flex;
justify-content: space-between;
align-items: center;
height: 50px;
line-height: 50px;
border-bottom: 1px solid #d9d9d9;
.label {
font-size: 14px;
font-family: ArialMT;
color: #2f2f2f;
}
.price {
display: flex;
.left {
font-size: 14px;
font-family: Arial-BoldMT, Arial;
font-weight: normal;
color: #ff552d;
margin-right: 4px;
}
.right {
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
color: #959595;
}
}
}
} }
` `
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论