Skip to content

W
web-ci-test
提交 e898a067 作者: 翁进城
操作

Merge remote-tracking branch 'origin/caoyun'

上级 edc44502 17a1dfdd
正在显示 包含 1885 行增加 和 740 行删除
next.config.js
/** @type {import('next').NextConfig} */ /** @type {import('next').NextConfig} */
let distDir = ".dev"; //默认输出目录 let distDir = '.dev' //默认输出目录
if (process.env.NODE_ENV === "production") { if (process.env.NODE_ENV === 'production') {
//生产环境用另一个目录构建，防止与dev冲突 //生产环境用另一个目录构建，防止与dev冲突
distDir = ".next"; distDir = '.next'
} }
const nextConfig = { const nextConfig = {
distDir, distDir,
reactStrictMode: true, reactStrictMode: true,
transpilePackages: ["antd"], transpilePackages: ['antd'],
output: "standalone", output: 'standalone',
compiler: { compiler: {
styledComponents: true, styledComponents: true,
}, },
redirects() { redirects() {
return [ return [
{ {
source: "/", source: '/',
destination: "/home", destination: '/home',
permanent: true, permanent: true,
}, },
]; ]
}, },
async rewrites() { async rewrites() {
return [ return [
{ {
source: "/local/:path*", source: '/local/:path*',
//destination: "https://iuav.mmcuav.cn/:path*", //destination: "https://iuav.mmcuav.cn/:path*",
destination: "https://test.iuav.shop/:path*", destination: 'https://test.iuav.shop/:path*',
}, },
]; ]
}, },
images: { images: {
remotePatterns: [ remotePatterns: [
{ {
protocol: "http", protocol: 'http',
hostname: "**", hostname: '**',
}, },
{ {
protocol: "https", protocol: 'https',
hostname: "**", hostname: '**',
}, },
], ],
}, },
pageExtensions: ["page.tsx", "page.ts", "page.jsx", "page.js"], pageExtensions: ['page.tsx', 'page.ts', 'page.jsx', 'page.js'],
}; }
module.exports = nextConfig; module.exports = nextConfig
pages/equipmentLeasing/api/index.tsx
import request, { Response } from '~/api/request'; import request, { Response } from '~/api/request'
export interface ListPageDeviceInfoParams { export interface ListPageDeviceInfoParams {
"brandId"?: number, brandId?: number
"districtId"?: number, districtId?: number
"modelId"?: number, modelId?: number
"pageNo": number, pageNo: number
"pageSize": number, pageSize: number
"partsId"?: number, partsId?: number
"productCategoryId"?: number, productCategoryId?: number
"qualityId"?: number qualityId?: number
} }
export interface Device { export interface Device {
id: number, id: number
wareNo: string, goodsName: string
wareTitle: string, images: string
wareTypeId: number, price: number | null
wareStatus: number,
minDeposit: number,
minRent: number,
totalStock: number,
totalSale: number,
propInfoId: null,
createTime: string,
wareImgs: [
{
id: number,
wareInfoId: number,
imgUrl: string,
imgType: number
}
],
tags: string[]
} }
export interface Advertisement { export interface Advertisement {
id:number, id: number
imageUrl:string imageUrl: string
} }
export interface ListPageDeviceInfoResp { export interface ListPageDeviceInfoResp {
"pageNo": 1, pageNo: 1
"pageSize": 10, pageSize: 10
"list": Array<Device>, list: Array<Device>
"totalCount": 0, totalCount: 0
"totalPage": 0 totalPage: 0
} }
export default { export default {
//web-设备租赁-分页 //web-设备租赁-分页
listPageDeviceInfo: (params: ListPageDeviceInfoParams,options = {}): Promise<Response<ListPageDeviceInfoResp>> => { listPageDeviceInfo: (
return request('/pms/webDevice/deviceList', 'post', params, options) params: ListPageDeviceInfoParams,
options = {}
): Promise<Response<ListPageDeviceInfoResp>> => {
return request('/pms/product/mall/deviceList', 'post', params, options)
}, },
//web-设备租赁-广告 //web-设备租赁-广告
listAdvertisementInfo: (): Promise<Response<Array<Advertisement>>> => { listAdvertisementInfo: (): Promise<Response<Array<Advertisement>>> => {
return request('/pms/webDevice/ad', 'get') return request('/pms/webDevice/ad', 'get')
} },
} }
\ No newline at end of file
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 interface ShopDetail {
dateDetail: Array<Date>
num: number
id: number
}
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 [wareSkuList,setWareSkuList] = useState<GetWebDeviceWareSkuById[] | undefined>()
useEffect(()=>{ const [detail, setDetail] = useState<GetWebDeviceDetailResult | null>()
const [wareSkuList, setWareSkuList] = useState<
GetWebDeviceWareSkuById[] | undefined
>()
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 goodsId: id,
}) })
.then((res) => { .then((res) => {
setDetail(res.result || null); setDetail(res.result || null)
}); console.log(
api res.result?.goodsSpec.map((item) => item.productSpecList).flat()
.listWareSkuById({ )
id:id const wareList = res.result?.goodsSpec.map(
(item) => item.productSpecList
)
if (wareList) {
const wareSkuList: GetWebDeviceWareSkuById[] = wareList.flat()
setWareSkuList(wareSkuList)
}
}) })
.then((res) => {
res.result?.map(item=>{
return item
})
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: false },
{ label: '30天以上', disable: false },
]
const [selectedTags, setSelectedTags] = useState<number>()
const [selectedTagsData, setSelectedTagsData] = useState<string>()
const [shopDetail, setShopDetail] = useState<ShopDetail>()
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); })
// try{ .catch((err) => {
// const res = await api.listWareSkuUpdate(values) message
// if (res.code === "200") { .warning({
// setLoading(false); content: err.errorFields[0].errors[0],
// setIsModalOpen(false); })
// form.resetFields() .then()
// message.success('租赁成功') setLoading(false)
// }else{ })
// setLoading(false); }
// message.error(res.message)
// } const [days, setDays] = useState<number>()
// }catch(e:any){ const handleOkDate = async () => {
// message.error(e.message) setLoading(true)
// } try {
}).catch((err) => { const result = await Promise.all([
message form.validateFields(),
.warning({ formDate.validateFields(),
content: err.errorFields[0].errors[0], ])
}) if (result) {
.then(); setLoading(false)
setLoading(false); setIsModalOpen(false)
}); setIsModalDateOpen(false)
setIsorderForGoods(true)
}; setShopDetail({ ...result[0], ...result[1] })
}
} catch (error) {
setLoading(false)
}
}
const handleCancel = () => { const handleCancel = () => {
setIsModalOpen(false); setIsModalOpen(false)
}; setIsModalDateOpen(false)
form.resetFields()
const handleChange = (tag: number, checked: boolean) => { formDate.resetFields()
if (checked) { }
const nextWareSkuList = checked
? tag
: wareSkuList?.filter((t) => t.id !== tag)[0].id;
console.log('You are interested in: ', nextWareSkuList);
setSelectedTags(nextWareSkuList);
form.setFieldValue("id",tag)
}
};
const handleChangeDate = (tag: string, checked: boolean) => { const handleChange = (tag: number, checked: boolean) => {
if (checked) { if (checked) {
const nextWareSkuList = checked
? tag
: wareSkuList?.filter((t) => t.id !== tag)[0].id
console.log('You are interested in: ', nextWareSkuList)
setSelectedTags(nextWareSkuList)
form.setFieldValue('id', tag)
}
}
const handleChangeDate = (
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>
<Box> {!isorderForGoods ? (
<div className='item'> <Box>
<ImagePreview imgList={detail?.wareImgs!}/> <div className="item">
<div className='item-right'> <ImagePreview imgList={detail?.images!} />
<div className='title'>{detail?.wareTitle}</div> <div className="item-right">
{ <div className="title">{detail?.goodsName}</div>
detail?.tags?.length ? {detail?.otherService?.length ? (
(<div className='function'> <div className="function">
{detail?.tags?.map(item=>(<div key={item} className='function-item'>{item}</div>))} {detail?.otherService?.map((item) => (
</div>) : (<div className='function not'></div>) <div key={item.id} className="function-item">
} {item.serviceName}
<div className='menoy'> </div>
<span className='menoy-left'>{`¥${detail?.minRent}`}</span> ))}
<span className='menoy-right'>/天起</span>
</div>
<div className='classification'>
<div className='top'>
<div className='left'>
<span className='label'>选择</span>
<span className='value'>商品分类</span>
</div> </div>
<div className='right'> ) : (
<Select <div className="function not"></div>
className="selectItem" )}
defaultActiveFirstOption <div className="menoy">
defaultValue={wareSkuList} <span className="menoy-left">{`¥${detail?.price! | 0}`}</span>
style={{ width: 120 }} <span className="menoy-right">/天起</span>
bordered={false} </div>
options={wareSkuList} <div className="classification">
fieldNames={{label:"skuTitle",value:"id"}} <div className="top">
placeholder="选择商品" <div className="left">
/> <span className="label">选择</span>
<span className="value">商品分类</span>
</div>
<div className="right">
<Select
className="selectItem"
defaultActiveFirstOption
defaultValue={wareSkuList}
style={{ width: 120 }}
bordered={false}
options={wareSkuList}
fieldNames={{ label: 'specName', value: 'id' }}
placeholder="选择商品"
/>
</div>
</div>
<div className="bottom">
<span className="label">发货</span>
<span className="value">顺丰到付</span>
</div> </div>
</div> </div>
<div className='bottom'> <div className="botton-btn">
<span className='label'>发货</span> {/* <Button className='btn-left' size='small' type="primary">成为渠道商</Button> */}
<span className='value'>顺丰到付</span> <Button
className="btn-right"
size="small"
type="primary"
onClick={showModal}
>
立即租赁
</Button>
</div> </div>
</div> </div>
<div className='botton-btn'>
{/* <Button className='btn-left' size='small' type="primary">成为渠道商</Button> */}
<Button className='btn-right' size='small' type="primary" onClick={showModal}>立即租赁</Button>
</div>
</div> </div>
</div> <div className="flow-path">
<div className='flow-path'> <Image className="image" fill src={flowPat.src} alt="" />
<Image className='image' fill src={flowPat.src} alt="" />
</div>
<div className='prompt'>
更多租金规则请前往【云享飞】微信小程序查
</div>
<Divider className='divider'>商品详情</Divider>
{
detail?.wareDetailContent ? <div style={{ textAlign: "center" }} dangerouslySetInnerHTML={{ __html: detail?.wareDetailContent}}>
</div> : <div style={{ textAlign: "center" }} ></div>
}
{/* 立即租赁 */}
<Modal
wrapClassName='application'
open={isModalOpen}
onOk={handleOk}
onCancel={handleCancel}
getContainer={false}
footer={[
<Button
style={{ width: "100%" ,height: 44 }}
key="submit"
type="primary"
loading={loading}
onClick={handleOk}
>
立即租赁
</Button>,
]}
>
<div className='title'>
<div className="left"></div>
<div className="right">
<div className="top">
<span className='tag'>¥</span>
<span className='money'>{detail?.minRent}</span>
<span className='unit'>/天</span>
</div>
<div className="bottom">渠道免押金</div>
</div> </div>
</div> <div className="prompt">更多租金规则请前往【云享飞】微信小程序查</div>
<Form <Divider className="divider">商品详情</Divider>
form={form} {detail?.goodsDetail.content ? (
layout="vertical" <div
name="application" style={{ textAlign: 'center' }}
initialValues={{ modifier: 'public' }} dangerouslySetInnerHTML={{ __html: detail?.goodsDetail.content }}
> ></div>
<Form.Item style={{flex:1,marginRight:16}} name="id" label="选择商品"> ) : (
<Space size={[0, 8]} wrap> <div style={{ textAlign: 'center' }}></div>
{wareSkuList?.map((tag) => ( )}
<CheckableTag {/* 立即租赁 */}
style={{height:28,lineHeight:"28px"}} <Modal
key={tag.id} wrapClassName="application"
checked={wareSkuList?.some(item=>tag.id === selectedTags)} open={isModalOpen}
onChange={(checked) => handleChange(tag.id, checked)} onOk={handleOk}
> onCancel={handleCancel}
{tag.skuTitle} getContainer={false}
</CheckableTag> footer={[
))} <Button
</Space> style={{ width: '100%', height: 44 }}
</Form.Item> key="submit"
<Form.Item style={{flex:1,marginRight:16}} name="date" label="租期天数（拿到和归还当天不算入租期）"> type="primary"
<Space size={[0, 8]} wrap> loading={loading}
{tagsData.map((tag) => ( onClick={handleOk}
<CheckableTag >
key={tag} 立即租赁
checked={tag === selectedTagsData} </Button>,
onChange={(checked) => handleChangeDate(tag, checked)} ]}
>
<div className="title">
<div className="left"></div>
<div className="right">
<div className="top">
<span className="tag">¥</span>
<span className="money">{detail?.price}</span>
<span className="unit">/天</span>
</div>
<div className="bottom">渠道免押金</div>
</div>
</div>
<Form
form={form}
layout="vertical"
name="application"
initialValues={{ modifier: 'public' }}
className="form-data"
>
<Form.Item
style={{ flex: 1, marginRight: 16 }}
name="id"
label="选择商品"
>
<Space size={[0, 8]} wrap>
{wareSkuList?.map((tag) => (
<CheckableTag
style={{ height: 28, lineHeight: '28px' }}
key={tag.id}
checked={wareSkuList?.some(
(item) => tag.id === selectedTags
)}
onChange={(checked) => handleChange(tag.id, checked)}
>
{tag.specName}
</CheckableTag>
))}
</Space>
</Form.Item>
<Form.Item
style={{ flex: 1, marginRight: 16 }}
name="date"
label="租期天数（拿到和归还当天不算入租期）"
>
<Space size={[0, 8]} wrap>
{tagsData.map((tag) => (
<CheckableTag
key={tag.label}
checked={tag.label === selectedTagsData}
onChange={(checked) =>
handleChangeDate(tag.label, checked, tag.disable)
}
className={`tagsData ${
tag.disable ? 'disable tagsDisable' : ''
}`}
>
{tag.label}
</CheckableTag>
))}
</Space>
</Form.Item>
<div className="num-box">
<div className="num-left">
<div className="label">租赁数量</div>
<div className="inventory">库存9件</div>
</div>
<div className="num-right">
<Form.Item style={{ flex: 1, marginRight: 16 }} name="num">
<InputNumber
min={1}
max={10}
defaultValue={1}
onChange={onChangeNum}
/>
</Form.Item>
</div>
</div>
</Form>
</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>,
]}
> >
{tag} <div className="title">
</CheckableTag> <div className="left" onClick={goBack}>
))} {'<'}
</Space> </div>
</Form.Item> <div className="right">选择租期</div>
</Form> </div>
</Modal> <Form
</Box> form={formDate}
layout="vertical"
name="applicationDate"
initialValues={{ modifier: 'public' }}
className="form-data"
>
<Form.Item
style={{ flex: 1, marginRight: 16 }}
name="dateDetail"
rules={[{ required: true, message: '请选择日期' }]}
>
<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>
) : (
<OrderForGoods
setIsorderForGoods={setIsorderForGoods}
shopDetail={shopDetail}
days={days}
detailData={detail}
/>
)}
</Layout> </Layout>
) )
} }
pages/equipmentLeasing/detail/api/index.tsx
import request, { Response } from '~/api/request'; import request, { Response } from '~/api/request'
export interface GetWebDeviceDetailParams { export interface GetWebDeviceDetailParams {
id:number goodsId: number
} }
export interface WareImgsType { export interface WareImgsType {
id: number, id: number
wareInfoId: number | null, imgUrl: string
imgUrl: string,
imgType: number imgType: number
} }
export interface GetWebDeviceDetailResult { export interface GetWebDeviceDetailResult {
id: number, id: number
wareNo: string, images: {
wareTitle: string, id: number
wareTypeId: number, imgUrl: string
wareStatus: number, imgType: number
payStatus: number, }[]
minDeposit: number, goodsVideo: string
maxDeposit: number, goodsVideoId: number
minRent: number, goodsName: string
maxRent: number, goodsDetail: {
totalStock: number, id: number
totalSale: number, goodsDesc: string
skuNum: number, content: string | null
tags: [ remark: string | null
string, }
string directoryId: number
], categoryByOne: number
wareImgs: Array<WareImgsType>, categoryByTwo: null
warePropDTO: number | null, tag: null
wareDetailContent: string | TrustedHTML shelfStatus: number
goodsSpec: {
productSpecList: GetWebDeviceWareSkuById[]
}[]
otherService?: {
id: number
saleServiceId: string
serviceName: string
}[]
price: number | null
goodsNo: string
} }
export interface PriceList { export interface PriceList {
id: number, id: number
wareInfoId: number, wareInfoId: number
skuInfoId: number, skuInfoId: number
rentPrice: number, rentPrice: number
minDay: number, minDay: number
maxDay: number, maxDay: number
createTime: null createTime: null
} }
export interface GetWebDeviceWareSkuById { export interface GetWebDeviceWareSkuById {
id: number, id: number
wareInfoId: number, productSpec: number
skuTitle: string, productSkuId: number
rentPrice: number | null, specName: string
rentDeposit: number, specImage: string
stockNum: number, partNo: string
saleNum: number, versionDesc: string
createTime: string, createTime: string | null
updateTime: null, productSpecCPQVO: string | null
skuPriceDTOList: Array<PriceList>,
} }
export interface WebDeviceUpdateParams { export interface WebDeviceUpdateParams {
id?:number, id?: number
inventoryId?:number, inventoryId?: number
inventoryUsage?:string, inventoryUsage?: string
startDay?:string startDay?: string
endDay?:string, endDay?: string
} }
export default { export default {
//web-设备租赁-详情 //web-设备租赁-详情
listDetailDeviceInfo: (params: GetWebDeviceDetailParams): Promise<Response<GetWebDeviceDetailResult>> => { listDetailDeviceInfo: (
return request('/pms/webDevice/detail', 'get', params) params: GetWebDeviceDetailParams
}, ): Promise<Response<GetWebDeviceDetailResult>> => {
//web-设备租赁-商品 return request('/pms/product/mall/getLeaseGoodsDetail', 'get', params)
listWareSkuById: (params: GetWebDeviceDetailParams): Promise<Response<GetWebDeviceWareSkuById[]>> => {
return request('/pms/appDevice/listWareSkuById', 'get', params)
}, },
//web-设备租赁-立即租赁 //web-设备租赁-立即租赁
listWareSkuUpdate: (params: WebDeviceUpdateParams): Promise<Response<number>> => { listWareSkuUpdate: (
params: WebDeviceUpdateParams
): Promise<Response<number>> => {
return request('/pms/appDevice/update', 'post', params) return request('/pms/appDevice/update', 'post', params)
} },
} }
\ No newline at end of file
pages/equipmentLeasing/detail/components/orderForGoods/api/index.tsx 0 → 100644
import request, { Response } from '~/api/request'
export interface GetWebDeviceDetailParams {
actualPay: number
deposit: number
endDate: string
orderReceipt: {
detailAddress: string
receiptMethod: number
region: string
takeName: string
takePhone: number
}
rentPrice: number
returnDate: string
shouldPay: number
specsId: number
startDate: string
wareDescription: string
wareImg: string
wareInfoId: number
wareNo: string
wareNum: number
wareTitle: string
remark?: string
}
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 GetWebDeviceWareSkuById {
balance: number
nickName: string
}
export default {
//web-地址管理-查询用户地址列表-条件查询
listUserAddress: (params: {}): Promise<Response<UserAddress[]>> => {
return request('/oms/user-address/selectList', 'POST', params)
},
//web-设备租赁-下单
FeignAddLease: (
params: GetWebDeviceDetailParams
): Promise<Response<GetWebDeviceWareSkuById[]>> => {
return request('/pms/appDevice/listWareSkuById', 'post', params)
},
}
pages/equipmentLeasing/detail/components/orderForGoods/index.tsx 0 → 100644
import React, { useEffect, useState } from 'react'
import { OrderForGoodsBox } from './styled'
import type { FormInstance, RadioChangeEvent } from 'antd'
import { Button, Radio, Space, Input, message } from 'antd'
import api, { UserAddress } from './api'
import moment from 'moment'
import { ShopDetail } from '../../[id].page'
import { GetWebDeviceDetailResult } from '../../api'
const { TextArea } = Input
interface PropsBox {
setIsorderForGoods: (boolean: boolean) => void
detailData?: GetWebDeviceDetailResult | null
days?: number
shopDetail?: ShopDetail
}
export default function OrderForGoods(props: PropsBox) {
const { setIsorderForGoods, shopDetail, days, detailData } = props
const [value, setValue] = useState(1)
const [areaValue, setAreaValue] = useState<string>()
const [list, setList] = useState<Array<UserAddress> | null>()
const [detail, setDetail] = useState<ShopDetail>()
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('提交成功')
console.log(shopDetail)
console.log(list![value])
console.log(areaValue)
console.log(detailData)
console.log(list![value].takeAddress)
console.log(list![value].takeRegion)
console.log(list![value].takeName)
console.log(Number(list![value].takePhone))
if (detailData && shopDetail && list) {
const pushList = {
actualPay: shopDetail.num * detailData.price!,
deposit: 0,
endDate: moment(new Date(shopDetail.dateDetail[1])).format(
'YYYY-MM-DD'
),
orderReceipt: {
detailAddress: list[value].takeAddress,
receiptMethod: 0,
region: list[value].takeRegion,
takeName: list[value].takeName,
takePhone: Number(list[value].takePhone),
},
rentPrice: shopDetail.num * detailData.price!,
returnDate: moment(new Date(shopDetail.dateDetail[1])).format(
'YYYY-MM-DD'
),
shouldPay: shopDetail.num * detailData.price!,
specsId: shopDetail.id,
startDate: moment(new Date(shopDetail.dateDetail[0]!)).format(
'YYYY-MM-DD'
),
wareDescription: detailData.goodsName,
wareImg: detailData.images[0].imgUrl,
wareInfoId: shopDetail.id,
wareNo: detailData.goodsNo,
wareNum: shopDetail.num,
wareTitle: detailData.goodsName,
remark: areaValue,
}
api.FeignAddLease(pushList).then((res) => {
console.log(res)
})
}
// setIsorderForGoods(false)
}
useEffect(() => {
console.log(days)
api
.listUserAddress({})
.then((res) => {
console.log(res)
setList(res.result)
res.result?.map((item, index) => {
if (item.type === 0) {
setValue(index)
}
})
})
.catch((err) => {
console.log(err)
})
if (shopDetail) {
setDetail(shopDetail)
}
}, [])
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 === 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}>{item.takeAddress}</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 }}>
{moment(new Date(shopDetail?.dateDetail[0]!)).format(
'YYYY/MM/DD'
)}
<div className="num">{days}天</div>
{moment(new Date(shopDetail?.dateDetail[1]!)).format(
'YYYY/MM/DD'
)}
</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/components/picture-preview/index.tsx
import React , {useState,useRef} from 'react' import React, { useState, useRef } from 'react'
import {Box} from './styled'; import { Box } from './styled'
import { LeftOutlined , RightOutlined } from '@ant-design/icons'; import { LeftOutlined, RightOutlined } from '@ant-design/icons'
import {WareImgsType} from '../../api'; import { WareImgsType } from '../../api'
interface ImagesType{ interface ImagesType {
imgList: Array<WareImgsType> imgList: Array<WareImgsType>
} }
export default function PicturePreview(props:ImagesType) { export default function PicturePreview(props: ImagesType) {
const {imgList} = props const { imgList } = props
console.log(imgList);
const mask =useRef<HTMLDivElement>(null!)
const moveBox =useRef<HTMLDivElement>(null!)
const big =useRef<HTMLImageElement>(null!)
const [moveLeft,setMoveLeft] = useState(0) // 根据这个值设置图片列表向左偏移
// const imgList = [
// 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
// 'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
// 'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
// 'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
// 'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
// 'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
// 'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
// ]
const [activeImgIndex,setActiveImgIndex] = useState(0) const mask = useRef<HTMLDivElement>(null!)
const moveBox = useRef<HTMLDivElement>(null!)
const big = useRef<HTMLImageElement>(null!)
const [moveLeft, setMoveLeft] = useState(0) // 根据这个值设置图片列表向左偏移
// const imgList = [
// 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
// 'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
// 'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
// 'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
// 'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
// 'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
// 'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
// ]
// 改变预览图 const [activeImgIndex, setActiveImgIndex] = useState(0)
const handleChangeImg = (index:number) => {
if (index <= moveLeft + 3) setActiveImgIndex(index) // 改变预览图
} const handleChangeImg = (index: number) => {
// 移动缩略图 if (index <= moveLeft + 3) setActiveImgIndex(index)
const handleSlide = (direction:string) => { }
//左侧按钮 // 移动缩略图
if (direction == 'left') { const handleSlide = (direction: string) => {
moveLeft == 0 ? setMoveLeft(0) : setMoveLeft((props)=>props - 1) //左侧按钮
} else { // 右侧按钮 if (direction == 'left') {
if (imgList.length > 4) { moveLeft == 0 ? setMoveLeft(0) : setMoveLeft((props) => props - 1)
moveLeft >= imgList.length - 4 ? setMoveLeft(imgList.length - 4) : setMoveLeft((props)=>props + 1) } else {
} // 右侧按钮
} if (imgList.length > 4) {
} moveLeft >= imgList.length - 4
// 图片放大镜 ? setMoveLeft(imgList.length - 4)
const handleMouseMove = (event:React.MouseEvent<HTMLDivElement, MouseEvent>) => { : setMoveLeft((props) => props + 1)
let left = event.nativeEvent.offsetX - mask.current.offsetWidth / 2;
let top = event.nativeEvent.offsetY - mask.current.offsetHeight / 2;
// 最右侧和最下侧的临界值
const maxLeft = moveBox.current.offsetWidth - mask.current.offsetWidth
const maxTop = moveBox.current.offsetHeight - mask.current.offsetHeight
//约束范围
if (left <= 0) left = 0;
if (left >= maxLeft) left = maxLeft
if (top <= 0) top = 0;
if (top >= maxTop) top = maxTop
// 设置放大范围遮罩层位置
mask.current.style.left = left + "px";
mask.current.style.top = top + "px";
// 设置大图图片位置，可以用background代替这个方案，有兴趣可以尝试
big.current.style.left = -3 * left + "px"; // 3这个值是 大图除以小图算出来的比例 这里大图是900px 小图是300px
big.current.style.top = -3 * top + "px";
} }
}
}
// 图片放大镜
const handleMouseMove = (
event: React.MouseEvent<HTMLDivElement, MouseEvent>
) => {
let left = event.nativeEvent.offsetX - mask.current.offsetWidth / 2
let top = event.nativeEvent.offsetY - mask.current.offsetHeight / 2
// 最右侧和最下侧的临界值
const maxLeft = moveBox.current.offsetWidth - mask.current.offsetWidth
const maxTop = moveBox.current.offsetHeight - mask.current.offsetHeight
//约束范围
if (left <= 0) left = 0
if (left >= maxLeft) left = maxLeft
if (top <= 0) top = 0
if (top >= maxTop) top = maxTop
// 设置放大范围遮罩层位置
mask.current.style.left = left + 'px'
mask.current.style.top = top + 'px'
// 设置大图图片位置，可以用background代替这个方案，有兴趣可以尝试
big.current.style.left = -3 * left + 'px' // 3这个值是 大图除以小图算出来的比例 这里大图是900px 小图是300px
big.current.style.top = -3 * top + 'px'
}
return ( return (
<Box> <Box>
<div className="img_wrapper"> <div className="img_wrapper">
<div className="img_content"> <div className="img_content">
{/* <!-- 蒙层，绑定鼠标事件 --> */} {/* <!-- 蒙层，绑定鼠标事件 --> */}
<div className="movebox" <div
onMouseMove={(e)=>handleMouseMove(e)} className="movebox"
ref={moveBox}> onMouseMove={(e) => handleMouseMove(e)}
</div> ref={moveBox}
{/* <!-- 主图 --> */} ></div>
<img src={imgList && imgList[activeImgIndex].imgUrl} {/* <!-- 主图 --> */}
<img
src={imgList && imgList[activeImgIndex].imgUrl}
className="img_small" className="img_small"
alt=""/> alt=""
{/* <!-- 放大区域 --> */} />
<div className="mask" {/* <!-- 放大区域 --> */}
ref={mask}></div> <div className="mask" ref={mask}></div>
{/* <!-- 大图预览图 --> */} {/* <!-- 大图预览图 --> */}
<div className="img_big"> <div className="img_big">
<img src={imgList && imgList[activeImgIndex].imgUrl} <img
ref={big} src={imgList && imgList[activeImgIndex].imgUrl}
alt=""/> ref={big}
</div> alt=""
/>
</div>
</div> </div>
{/* <!-- 缩略图列表 --> */} {/* <!-- 缩略图列表 --> */}
<div className="img_list_wrapper"> <div className="img_list_wrapper">
{imgList?.length>4 && <LeftOutlined className="el-icon-arrow-left" onClick={()=>handleSlide('left')}/>} {imgList?.length > 4 && (
<div className="img_list_content"> <LeftOutlined
<div className="img_list" className="el-icon-arrow-left"
style={{marginLeft: - moveLeft * 25 + '%'}}> onClick={() => handleSlide('left')}
{ />
imgList?.map((item,index)=>( )}
<img <div className="img_list_content">
onMouseOver={()=>handleChangeImg(index)} <div
key={index} className="img_list"
className={`${activeImgIndex === index ? 'activeImg' : ''}`} style={{ marginLeft: -moveLeft * 25 + '%' }}
src={item.imgUrl} >
alt="" /> {imgList?.map((item, index) => (
)) <img
} onMouseOver={() => handleChangeImg(index)}
</div> key={index}
</div> className={`${activeImgIndex === index ? 'activeImg' : ''}`}
{ imgList?.length>4 && <RightOutlined className="el-icon-arrow-right" onClick={()=>handleSlide('right')}/>} src={item.imgUrl}
</div> alt=""
</div> />
))}
</div>
</div>
{imgList?.length > 4 && (
<RightOutlined
className="el-icon-arrow-right"
onClick={() => handleSlide('right')}
/>
)}
</div>
</div>
</Box> </Box>
) )
} }
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;
&-right {
height: 300px;
margin-left: 30px;
.title {
height: 26px;
font-size: 28px;
margin-top: 5px;
font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
font-weight: bold;
color: #090909;
line-height: 26px;
}
.function {
display: flex; display: flex;
&-right{ align-items: center;
height: 300px; justify-content: space-evenly;
margin-left: 30px; width: 375px;
.title{ height: 45px;
height: 26px; margin-top: 17px;
font-size: 28px; background: linear-gradient(90deg, #d7f7f5 0%, #eefde9 100%);
margin-top: 5px; &.not {
font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI; background: none;
font-weight: bold; }
color: #090909; &-item {
line-height: 26px; }
} }
.function{ .menoy {
display: flex; margin-top: 17px;
align-items: center; &-left {
justify-content: space-evenly; width: 79px;
width: 375px; height: 41px;
height: 45px; font-size: 32px;
margin-top: 17px; font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
background: linear-gradient(90deg, #D7F7F5 0%, #EEFDE9 100%); font-weight: bold;
&.not{ color: #ef2e00;
background: none; line-height: 41px;
} }
&-item{ &-right {
} width: 40px;
} height: 20px;
.menoy{ font-size: 16px;
margin-top: 17px; font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
&-left{ font-weight: bold;
width: 79px; color: #ef2e00;
height: 41px; line-height: 20px;
font-size: 32px; }
font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI; }
font-weight: bold; .classification {
color: #EF2E00; margin-top: 28px;
line-height: 41px; width: 375px;
} height: 50px;
&-right{ .label {
width: 40px; height: 21px;
height: 20px; font-size: 16px;
font-size: 16px; font-family: MicrosoftYaHei;
font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI; color: #9a9a9a;
font-weight: bold; line-height: 21px;
color: #EF2E00; margin-right: 36px;
line-height: 20px; }
} .value {
} height: 21px;
.classification{ font-size: 16px;
margin-top: 28px; font-family: MicrosoftYaHei;
width: 375px; color: #151515;
height: 50px; line-height: 21px;
.label{ }
height: 21px; .top {
font-size: 16px; display: flex;
font-family: MicrosoftYaHei; justify-content: space-between;
color: #9A9A9A; align-items: center;
line-height: 21px; .left {
margin-right: 36px; }
} .right {
.value{ .selectItem {
height: 21px; .ant-select-selection-placeholder {
font-size: 16px; color: #000;
font-family: MicrosoftYaHei; }
color: #151515;
line-height: 21px;
}
.top{
display: flex;
justify-content: space-between;
align-items: center;
.left{
}
.right{
.selectItem{
.ant-select-selection-placeholder {
color: #000;
}
}
}
}
.bottom{
margin-top: 5px;
}
}
.botton-btn{
margin-top: 30px;
.btn-left{
width: 207px;
height: 40px;
background-color: #FFE4D1;
border: 1px solid #EBBAAF;
font-family: MicrosoftYaHei;
color: #FF552D;
letter-spacing: 1px;
margin-right: 12px;
}
.btn-right{
width: 207px;
height: 40px;
background: #FF552D;
font-family: MicrosoftYaHei;
color: #FFFFFF;
letter-spacing: 1px;
}
} }
}
}
.bottom {
margin-top: 5px;
}
}
.botton-btn {
margin-top: 30px;
.btn-left {
width: 207px;
height: 40px;
background-color: #ffe4d1;
border: 1px solid #ebbaaf;
font-family: MicrosoftYaHei;
color: #ff552d;
letter-spacing: 1px;
margin-right: 12px;
} }
.btn-right {
width: 207px;
height: 40px;
background: #ff552d;
font-family: MicrosoftYaHei;
color: #ffffff;
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{ }
width: 420px; .prompt {
height: 25px; width: 420px;
font-size: 20px; height: 25px;
font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI; font-size: 20px;
font-weight: bold; font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
color: #2B2B2B; font-weight: bold;
line-height: 25px; color: #2b2b2b;
margin: 30px auto 58px auto; line-height: 25px;
margin: 30px auto 58px auto;
}
.divider {
display: flex;
justify-content: center;
margin: 46px 0 30px !important;
&::before {
width: 65px !important;
} }
.divider {
display: flex;
justify-content: center;
margin: 46px 0 30px !important;
&::before { &::after {
width: 65px !important; width: 65px !important;
} }
&::after { .ant-divider-inner-text {
width: 65px !important; font-size: 16px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #989898;
}
}
.application {
.title {
display: flex;
align-items: center;
padding-bottom: 25px;
.left {
width: 58px;
height: 58px;
background: #d8d8d8;
border-radius: 2px;
}
.right {
margin-left: 15px;
.top {
.tag {
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #ff0f0f;
}
.money {
font-size: 22px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #ff0f0f;
}
.unit {
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #ff0f0f;
}
} }
.bottom {
.ant-divider-inner-text { width: 65px;
font-size: 16px; height: 18px;
font-size: 13px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #121212;
line-height: 18px;
}
}
}
.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-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #989898; color: #121212;
margin-right: 5px;
}
.inventory {
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #acacac;
}
} }
}
} }
.application{ }
.title{ .applicationDate {
display: flex; .title {
align-items: center; display: flex;
padding-bottom: 25px; align-items: center;
.left{ .left {
width: 58px; width: 10px;
height: 58px; cursor: pointer;
background: #D8D8D8; }
border-radius: 2px; .right {
} flex: 1;
.right{ text-align: center;
margin-left: 15px; }
.top{ }
.tag{ .bottom-item {
font-size: 14px; display: flex;
font-family: PingFangSC-Regular, PingFang SC; justify-content: space-between;
font-weight: 400; align-items: center;
color: #FF0F0F; height: 50px;
} line-height: 50px;
.money{ border-bottom: 1px solid #d9d9d9;
font-size: 22px; .label {
font-family: PingFangSC-Medium, PingFang SC; font-size: 14px;
font-weight: 500; font-family: ArialMT;
color: #FF0F0F; color: #2f2f2f;
} }
.unit{ .price {
font-size: 12px; display: flex;
font-family: PingFangSC-Regular, PingFang SC; .left {
font-weight: 400; font-size: 14px;
color: #FF0F0F; font-family: Arial-BoldMT, Arial;
} font-weight: normal;
} color: #ff552d;
.bottom{ margin-right: 4px;
width: 65px; }
height: 18px; .right {
font-size: 13px; font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; color: #959595;
color: #121212;
line-height: 18px;
}
}
} }
}
} }
` }
\ No newline at end of file `
pages/equipmentLeasing/index.page.tsx
...@@ -11,7 +11,7 @@ import { Box } from './styled' ...@@ -11,7 +11,7 @@ import { Box } from './styled'
export async function getStaticProps() { export async function getStaticProps() {
//获取筛选数据，进行静态渲染 //获取筛选数据，进行静态渲染
return { return {
props: {} props: {},
} }
} }
...@@ -20,23 +20,31 @@ type Props = {} ...@@ -20,23 +20,31 @@ type Props = {}
export default function EquipmentLeasing(props: Props) { export default function EquipmentLeasing(props: Props) {
const router = useRouter() const router = useRouter()
const filter = useRef<any>() const filter = useRef<any>()
const [productList, setProductList] = useState(Array<{ element: JSX.Element }>) const [productList, setProductList] = useState(
const [rightProductList, setRightProductList] = useState(Array<{ element: JSX.Element }>) Array<{ element: JSX.Element }>
)
const [rightProductList, setRightProductList] = useState(
Array<{ element: JSX.Element }>
)
const leftDom = (item: Device) => { const leftDom = (item: Device) => {
return ( return (
<div key={item.id} className="item" onClick={() => router.push(`/equipmentLeasing/detail/${item.id}`)}> <div
key={item.id}
className="item"
onClick={() => router.push(`/equipmentLeasing/detail/${item.id}`)}
>
<div className="item-top"> <div className="item-top">
<div className="item-top-image"> <div className="item-top-image">
<Image src={item.wareImgs[0].imgUrl} alt="error" fill /> <Image src={item.images} alt="error" fill />
</div> </div>
</div> </div>
<div className="item-bottom"> <div className="item-bottom">
<div className="item-bottom-title" title={item.wareTitle}> <div className="item-bottom-title" title={item.goodsName}>
{item.wareTitle} {item.goodsName}
</div> </div>
<div className="item-bottom-price"> <div className="item-bottom-price">
<span className="money">¥{item.minRent}</span> <span className="money">¥{item.price}</span>
<span className="unit">/天起</span> <span className="unit">/天起</span>
</div> </div>
</div> </div>
...@@ -56,14 +64,15 @@ export default function EquipmentLeasing(props: Props) { ...@@ -56,14 +64,15 @@ export default function EquipmentLeasing(props: Props) {
const [count, setCount] = useState(0) //商品总数 const [count, setCount] = useState(0) //商品总数
const [abort, setAbort] = useState<AbortController | null>(null) //请求中断 const [abort, setAbort] = useState<AbortController | null>(null) //请求中断
const [pageParams, setPageParams] = useState({ const [pageParams, setPageParams] = useState({
type: 1,
pageNo: 1, pageNo: 1,
pageSize: 15 pageSize: 15,
}) //分页器对象 }) //分页器对象
const onPageChange = (page: number, pageSize: number) => { const onPageChange = (page: number, pageSize: number) => {
setPageParams({ setPageParams({
...pageParams, ...pageParams,
pageNo: page pageNo: page,
}) })
} }
...@@ -88,15 +97,15 @@ export default function EquipmentLeasing(props: Props) { ...@@ -88,15 +97,15 @@ export default function EquipmentLeasing(props: Props) {
{ {
...filterResult, ...filterResult,
...pageParams, ...pageParams,
...rs ...rs,
}, },
{ {
signal: abort?.signal signal: abort?.signal,
} }
) )
.then(res => { .then((res) => {
setProductList( setProductList(
res.result?.list?.map(item => { res.result?.list?.map((item) => {
return { element: leftDom(item) } return { element: leftDom(item) }
}) || [] }) || []
) )
...@@ -104,15 +113,18 @@ export default function EquipmentLeasing(props: Props) { ...@@ -104,15 +113,18 @@ export default function EquipmentLeasing(props: Props) {
}) })
}, [abort]) }, [abort])
const onFilterChange = (filterResult: FilterResult, adapterFilterResult: AdapterResult) => { const onFilterChange = (
filterResult: FilterResult,
adapterFilterResult: AdapterResult
) => {
console.log('filterResult', filterResult, adapterFilterResult) console.log('filterResult', filterResult, adapterFilterResult)
setFilterResult(adapterFilterResult) setFilterResult(adapterFilterResult)
} }
useEffect(() => { useEffect(() => {
api.listAdvertisementInfo().then(res => { api.listAdvertisementInfo().then((res) => {
setRightProductList( setRightProductList(
res.result?.map(item => { res.result?.map((item) => {
return { element: rightDom(item) } return { element: rightDom(item) }
}) || [] }) || []
) )
...@@ -134,21 +146,35 @@ export default function EquipmentLeasing(props: Props) { ...@@ -134,21 +146,35 @@ export default function EquipmentLeasing(props: Props) {
return ( return (
<Layout> <Layout>
<Box> <Box>
<Filter types={['地域', '设备品牌', '设备型号']} showResultItem onChange={onFilterChange} ref={filter}></Filter> <Filter
types={['地域', '设备品牌', '设备型号']}
showResultItem
onChange={onFilterChange}
ref={filter}
></Filter>
<div style={{ paddingTop: 13 }}> <div style={{ paddingTop: 13 }}>
<ContentBox <ContentBox
boxIndex={5} boxIndex={5}
leftcontentstyle={{ leftcontentstyle={{
width: '1010px', width: '1010px',
margin: { top: 0, right: '12px', bottom: '12px', left: 0 } margin: { top: 0, right: '12px', bottom: '12px', left: 0 },
}} }}
leftRenderDom={{ leftRenderDom={{
columns: productList, columns: productList,
pagination: ( pagination: (
<div className="pagination-page"> <div className="pagination-page">
<Pagination current={pageParams.pageNo} pageSize={pageParams.pageSize} showSizeChanger={false} showQuickJumper total={count} onChange={onPageChange} hideOnSinglePage={true} style={{ marginTop: 20 }} /> <Pagination
current={pageParams.pageNo}
pageSize={pageParams.pageSize}
showSizeChanger={false}
showQuickJumper
total={count}
onChange={onPageChange}
hideOnSinglePage={true}
style={{ marginTop: 20 }}
/>
</div> </div>
) ),
}} }}
rightRenderDom={{ columns: rightProductList }} rightRenderDom={{ columns: rightProductList }}
/> />
......
pages/flyingHandService/detail/[id].page.tsx
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from 'react'
import Layout from "~/components/layout"; import Layout from '~/components/layout'
import { Box } from "./styled"; import { Box } from './styled'
import { Button } from "antd"; import { Button, Tabs } from 'antd'
import { useRouter } from "next/router"; import { useRouter } from 'next/router'
import { ParsedUrlQuery } from "querystring"; import { ParsedUrlQuery } from 'querystring'
import type { TabsProps } from 'antd'
import api, { ListPageFlyingInfoResp } from './api'
interface RouterDetail { const contentStyle: React.CSSProperties = {
videoUrl:string | '', width: '100%',
curriculumName:string
} }
export default function FlyingDetail() { export default function FlyingDetail() {
const router = useRouter()
const router = useRouter(); const [detail, setDetail] = useState<ListPageFlyingInfoResp | null>()
const [detail,setDetail] =useState<ParsedUrlQuery | RouterDetail>() const onChange = (key: string) => {
useEffect(()=>{ console.log(key)
setDetail(router.query) }
},[router])
const items: TabsProps['items'] = [
{
key: '1',
label: `介绍`,
children: (
<div className="body">
<div className="top">
<div className="title">课程简介</div>
<div className="content">{detail?.curriculumDesc}</div>
</div>
{/* <div className="bottom">详情</div> */}
</div>
),
},
]
useEffect(() => {
if (Object.keys(router.query).length) {
api
.listPageJobServicesInfo({ id: Number(router.query.id) })
.then((res) => {
console.log(res)
setDetail(res.result)
})
}
}, [router])
return ( return (
<Layout> <Layout contentStyle={contentStyle}>
<Box> <Box>
<div className="box-top"> <div className="box">
<div className="left">{detail?.curriculumName}</div> <div className="box-body">
<div className="right"> <video
{/* <Button className="body-video"
controls
src={detail?.videoUrl as string}
/>
</div>
<div className="box-bottom">
<div className="left">
<div className="top">{detail?.curriculumName}</div>
<div className="bottom">免费</div>
</div>
<div className="right">
{/* <Button
type="primary" type="primary"
className="btn" className="btn"
onClick={() => onClick={() =>
...@@ -32,12 +70,18 @@ export default function FlyingDetail() { ...@@ -32,12 +70,18 @@ export default function FlyingDetail() {
> >
去考试 去考试
</Button> */} </Button> */}
</div>
</div> </div>
</div> </div>
<div className="box-body"> <div className="detail">
<video className="body-video" controls src={detail?.videoUrl as string} /> <Tabs
className="tabs"
defaultActiveKey="1"
items={items}
onChange={onChange}
/>
</div> </div>
</Box> </Box>
</Layout> </Layout>
); )
} }
pages/flyingHandService/detail/api/index.tsx 0 → 100644
import request, { Response } from '~/api/request'
export interface ListPageFlyingInfoParams {
id: number
}
export interface Flying {
id: number
price: number
supplierName: string
curriculumName: string
free: 0 | 1
curriculumDesc: string
videoUrl: string
}
export interface ListPageFlyingInfoResp {
id: number
price: number | null
supplierName: string
curriculumName: string
free: number
flightSkills: number
flightSkillsName1: string
flightSkillsName2: string
curriculumDesc: string
surfaceUrl: string | null
videoUrl: string
detailContent: null
}
export default {
//web-飞手培训-详情
listPageJobServicesInfo: (
params: ListPageFlyingInfoParams
): Promise<Response<ListPageFlyingInfoResp>> => {
return request('/release/curriculum/curriculumDetails', 'get', params)
},
}
pages/flyingHandService/detail/styled.tsx
import styled from "styled-components"; import styled from 'styled-components'
export default function Style() { export default function Style() {
return <></>; return <></>
} }
export const Box = styled.div` export const Box = styled.div`
box-sizing: border-box; box-sizing: border-box;
.box-top { .box {
display: flex; background-color: #fff;
justify-content: space-between; height: 586px;
align-items: center; padding-top: 20px;
padding: 10px 0; .box-body {
.left { margin: 0 auto;
height: 25px; display: flex;
font-size: 20px; width: 1200px;
font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI; height: 470px;
font-weight: bold; /* background: #111111; */
color: #000000; .body-video {
line-height: 25px; width: 1200px;
height: 470px;
}
/* .right-box {
width: 362px;
height: 470px;
background: #1b2128;
.tabs {
color: #fff;
}
} */
} }
.right { .box-bottom {
.btn { margin: 0 auto;
width: 180px; width: 1200px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 0 38px 0;
.left {
height: 50px; height: 50px;
background: linear-gradient(135deg, #278eff 0%, #0052da 100%); .top {
border-radius: 6px; font-size: 24px;
font-size: 20px; font-family: PingFangSC-Medium, PingFang SC;
font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI; font-weight: 500;
font-weight: bold; color: #000000;
color: #ffffff; margin-bottom: 10px;
&:hover { }
opacity: 0.8; .bottom {
font-size: 18px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #ff552d;
}
}
.right {
.btn {
width: 180px;
height: 50px;
background: linear-gradient(135deg, #278eff 0%, #0052da 100%);
border-radius: 6px;
font-size: 20px;
font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
font-weight: bold;
color: #ffffff;
&:hover {
opacity: 0.8;
}
} }
} }
} }
} }
.box-body { .detail {
margin-top: 20px; margin: 0 auto;
width: 1200px; width: 1200px;
height: 675px; height: 420px;
background: #111111; background: #ffffff;
.body-video { box-shadow: 0px 2px 6px 0px rgba(183, 188, 197, 0.1);
width: 1200px; border-radius: 12px;
height: 675px; margin-top: 16px;
padding: 20px;
.tabs {
.body {
.top {
.title {
font-size: 18px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #000000;
}
.content {
font-size: 18px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #27323f;
margin-top: 10px;
}
}
.bottom {
font-size: 18px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #000000;
margin-top: 29px;
}
}
} }
} }
`; `
pages/flyingHandService/index.page.tsx
import { Button, Cascader, Checkbox, Form, Input, Modal, Pagination, Select, Space, message } from 'antd' import {
Button,
Cascader,
Checkbox,
Form,
Input,
Modal,
Pagination,
Select,
Space,
message,
} from 'antd'
import type { CheckboxValueType } from 'antd/es/checkbox/Group' import type { CheckboxValueType } from 'antd/es/checkbox/Group'
import Image from 'next/image' import Image from 'next/image'
import { useRouter } from 'next/router' import { useRouter } from 'next/router'
...@@ -19,10 +30,19 @@ export default function FlyingHandService() { ...@@ -19,10 +30,19 @@ export default function FlyingHandService() {
const { Option } = Select const { Option } = Select
const router = useRouter() const router = useRouter()
const { userInfo, setNeedLogin } = useContext(UserContext) const { userInfo, setNeedLogin } = useContext(UserContext)
const [list, setList] = useState(['https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/540X844-1(1).jpg', 'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/540X844(1).jpg']) const [list, setList] = useState([
const [productList, setProductList] = useState(Array<{ element: JSX.Element }>) 'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/540X844-1(1).jpg',
const [rightDomList, setRightDomList] = useState(Array<{ element: JSX.Element }>) 'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/540X844(1).jpg',
const [secondDistrictInfo, setSecondDistrictInfo] = useState(Array<RegionResp>) ])
const [productList, setProductList] = useState(
Array<{ element: JSX.Element }>
)
const [rightDomList, setRightDomList] = useState(
Array<{ element: JSX.Element }>
)
const [secondDistrictInfo, setSecondDistrictInfo] = useState(
Array<RegionResp>
)
const [skills, setSkills] = useState(Array<RegionResp>) const [skills, setSkills] = useState(Array<RegionResp>)
const [skillsDefault, setSkillsDefault] = useState<Array<number>>() const [skillsDefault, setSkillsDefault] = useState<Array<number>>()
const [flightSkillsList, setFlightSkillsList] = useState(Array<SkillsType>) const [flightSkillsList, setFlightSkillsList] = useState(Array<SkillsType>)
...@@ -36,15 +56,16 @@ export default function FlyingHandService() { ...@@ -36,15 +56,16 @@ export default function FlyingHandService() {
userInfo userInfo
? router.push({ ? router.push({
pathname: `/flyingHandService/detail/${item.id}`, pathname: `/flyingHandService/detail/${item.id}`,
query: {
videoUrl: item.videoUrl,
curriculumName: item.curriculumName
}
}) })
: setNeedLogin(true) : setNeedLogin(true)
}}> }}
>
<div className="item-top"> <div className="item-top">
<Image src={`${item.videoUrl}?x-oss-process=video/snapshot,t_1000,m_fast`} alt="#" fill /> <Image
src={`${item.videoUrl}?x-oss-process=video/snapshot,t_1000,m_fast`}
alt="#"
fill
/>
</div> </div>
<div className="item-bottom"> <div className="item-bottom">
<div className="bottom-title">{item.curriculumName}</div> <div className="bottom-title">{item.curriculumName}</div>
...@@ -79,7 +100,7 @@ export default function FlyingHandService() { ...@@ -79,7 +100,7 @@ export default function FlyingHandService() {
const [pageParams, setPageParams] = useState({ const [pageParams, setPageParams] = useState({
pageNo: 1, pageNo: 1,
pageSize: 12 pageSize: 12,
}) //分页器对象 }) //分页器对象
const [filterParams, setFilterParams] = useState<FilterInfoParams>() const [filterParams, setFilterParams] = useState<FilterInfoParams>()
...@@ -90,7 +111,7 @@ export default function FlyingHandService() { ...@@ -90,7 +111,7 @@ export default function FlyingHandService() {
const onPageChange = (page: number, pageSize: number) => { const onPageChange = (page: number, pageSize: number) => {
setPageParams({ setPageParams({
...pageParams, ...pageParams,
pageNo: page pageNo: page,
}) })
} }
...@@ -112,11 +133,11 @@ export default function FlyingHandService() { ...@@ -112,11 +133,11 @@ export default function FlyingHandService() {
.listPageJobServicesInfo({ .listPageJobServicesInfo({
...pageParams, ...pageParams,
...filterParams, ...filterParams,
...queryVal ...queryVal,
}) })
.then(res => { .then((res) => {
setProductList( setProductList(
res.result?.list?.map(item => { res.result?.list?.map((item) => {
return { element: leftDom(item) } return { element: leftDom(item) }
}) || [] }) || []
) )
...@@ -139,10 +160,10 @@ export default function FlyingHandService() { ...@@ -139,10 +160,10 @@ export default function FlyingHandService() {
} else { } else {
setFlightDefault(null) setFlightDefault(null)
} }
setFilterParams(props => { setFilterParams((props) => {
return { return {
...props, ...props,
licenseId: Number(value) licenseId: Number(value),
} }
}) })
} }
...@@ -154,10 +175,10 @@ export default function FlyingHandService() { ...@@ -154,10 +175,10 @@ export default function FlyingHandService() {
} else { } else {
setSkillsDefault([]) setSkillsDefault([])
} }
setFilterParams(props => { setFilterParams((props) => {
return { return {
...props, ...props,
flightSkillsId: (value && value[value.length - 1]) || undefined flightSkillsId: (value && value[value.length - 1]) || undefined,
} }
}) })
} }
...@@ -170,10 +191,10 @@ export default function FlyingHandService() { ...@@ -170,10 +191,10 @@ export default function FlyingHandService() {
// regionId: (value && value[value.length - 1]) || undefined, // regionId: (value && value[value.length - 1]) || undefined,
// }; // };
// }); // });
setFilterParams(props => { setFilterParams((props) => {
return { return {
...props, ...props,
regionId: value || undefined regionId: value || undefined,
} }
}) })
} }
...@@ -184,14 +205,14 @@ export default function FlyingHandService() { ...@@ -184,14 +205,14 @@ export default function FlyingHandService() {
return { element: rightDom(item) } return { element: rightDom(item) }
}) })
) )
api.region().then(res => { api.region().then((res) => {
setSecondDistrictInfo(res.result || []) setSecondDistrictInfo(res.result || [])
}) })
api.PilotLicense().then(res => { api.PilotLicense().then((res) => {
setSkills(res.result || []) setSkills(res.result || [])
}) })
api.IndustryFlightSkills().then(res => { api.IndustryFlightSkills().then((res) => {
const list = res.result?.map(item => { const list = res.result?.map((item) => {
item.label = item.skillsName item.label = item.skillsName
item.value = item.id item.value = item.id
return item return item
...@@ -211,10 +232,10 @@ export default function FlyingHandService() { ...@@ -211,10 +232,10 @@ export default function FlyingHandService() {
} else { } else {
setFlightDefault(queryVal.licenseId) setFlightDefault(queryVal.licenseId)
} }
setFilterParams(props => { setFilterParams((props) => {
return { return {
...props, ...props,
...queryVal ...queryVal,
} }
}) })
} }
...@@ -226,16 +247,19 @@ export default function FlyingHandService() { ...@@ -226,16 +247,19 @@ export default function FlyingHandService() {
const handleOk = async (values: any) => { const handleOk = async (values: any) => {
form form
.validateFields() .validateFields()
.then(async values => { .then(async (values) => {
setLoading(true) setLoading(true)
try { try {
const res = await api.PilotRegistrations({ const res = await api.PilotRegistrations({
...values, ...values,
city: values.city[values.city.length - 1] || undefined, city: values.city[values.city.length - 1] || undefined,
province: values.city[0] || undefined, province: values.city[0] || undefined,
uavLicenseLevelOne: values.uavLicenseLevelOne && values.uavLicenseLevelOne[0], uavLicenseLevelOne:
uavLicenseLevelTow: values.uavLicenseLevelOne && values.uavLicenseLevelOne[1], values.uavLicenseLevelOne && values.uavLicenseLevelOne[0],
uavLicenseLevelThree: values.uavLicenseLevelOne && values.uavLicenseLevelOne[2] uavLicenseLevelTow:
values.uavLicenseLevelOne && values.uavLicenseLevelOne[1],
uavLicenseLevelThree:
values.uavLicenseLevelOne && values.uavLicenseLevelOne[2],
}) })
if (res.code === '200') { if (res.code === '200') {
setLoading(false) setLoading(false)
...@@ -250,10 +274,10 @@ export default function FlyingHandService() { ...@@ -250,10 +274,10 @@ export default function FlyingHandService() {
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()
}) })
...@@ -289,7 +313,17 @@ export default function FlyingHandService() { ...@@ -289,7 +313,17 @@ export default function FlyingHandService() {
onChange={onChangeRegion} onChange={onChangeRegion}
changeOnSelect changeOnSelect
/> */} /> */}
<Select className="selectItem" bordered={false} popupMatchSelectWidth={false} placeholder="省份" size="large" onChange={onChangeRegion} options={secondDistrictInfo} fieldNames={{ value: 'id', label: 'name' }} allowClear /> <Select
className="selectItem"
bordered={false}
popupMatchSelectWidth={false}
placeholder="省份"
size="large"
onChange={onChangeRegion}
options={secondDistrictInfo}
fieldNames={{ value: 'id', label: 'name' }}
allowClear
/>
<Cascader <Cascader
allowClear allowClear
placeholder="考证" placeholder="考证"
...@@ -299,17 +333,34 @@ export default function FlyingHandService() { ...@@ -299,17 +333,34 @@ export default function FlyingHandService() {
fieldNames={{ fieldNames={{
label: 'licenseType', label: 'licenseType',
value: 'id', value: 'id',
children: 'childLicenses' children: 'childLicenses',
}} }}
options={skills} options={skills}
onChange={value => onChange(value)} onChange={(value) => onChange(value)}
changeOnSelect changeOnSelect
value={skillsDefault} value={skillsDefault}
/> />
<Select className="selectItem" bordered={false} popupMatchSelectWidth={false} placeholder="技能" size="large" onChange={value => onProvinceChange(value)} options={flightSkillsList} fieldNames={{ value: 'id', label: 'skillsName' }} allowClear value={flightDefault} /> <Select
className="selectItem"
bordered={false}
popupMatchSelectWidth={false}
placeholder="技能"
size="large"
onChange={(value) => onProvinceChange(value)}
options={flightSkillsList}
fieldNames={{ value: 'id', label: 'skillsName' }}
allowClear
value={flightDefault}
/>
</Space> </Space>
</div> </div>
<Button type="primary" className="btn" onClick={() => (userInfo ? setIsModalOpen(true) : setNeedLogin(true))}> <Button
type="primary"
className="btn"
onClick={() =>
userInfo ? setIsModalOpen(true) : setNeedLogin(true)
}
>
报名学习课程 报名学习课程
</Button> </Button>
</div> </div>
...@@ -320,20 +371,52 @@ export default function FlyingHandService() { ...@@ -320,20 +371,52 @@ export default function FlyingHandService() {
onCancel={handleCancel} onCancel={handleCancel}
getContainer={false} getContainer={false}
footer={[ footer={[
<Button style={{ width: '100%', background: 'linear-gradient(135deg, #278EFF 0%, #0052DA 100%)', height: 40 }} key="submit" type="primary" loading={loading} onClick={handleOk}> <Button
style={{
width: '100%',
background: 'linear-gradient(135deg, #278EFF 0%, #0052DA 100%)',
height: 40,
}}
key="submit"
type="primary"
loading={loading}
onClick={handleOk}
>
立即报名 立即报名
</Button> </Button>,
]}> ]}
<Form form={form} layout="vertical" name="application" initialValues={{ modifier: 'public' }}> >
<Form
form={form}
layout="vertical"
name="application"
initialValues={{ modifier: 'public' }}
>
<div style={{ display: 'flex', justifyContent: 'space-between' }}> <div style={{ display: 'flex', justifyContent: 'space-between' }}>
<Form.Item style={{ flex: 1, marginRight: 16 }} name="name" rules={[{ required: true, message: '请输入姓名!' }]}> <Form.Item
style={{ flex: 1, marginRight: 16 }}
name="name"
rules={[{ required: true, message: '请输入姓名!' }]}
>
<Input placeholder="姓名" /> <Input placeholder="姓名" />
</Form.Item> </Form.Item>
<Form.Item style={{ flex: 1 }} name="telephone" rules={[{ required: true, message: '请输入手机号!' }]}> <Form.Item
<Input onInput={phoneNumber} allowClear maxLength={11} placeholder="手机号" /> style={{ flex: 1 }}
name="telephone"
rules={[{ required: true, message: '请输入手机号!' }]}
>
<Input
onInput={phoneNumber}
allowClear
maxLength={11}
placeholder="手机号"
/>
</Form.Item> </Form.Item>
</div> </div>
<Form.Item name="city" rules={[{ required: true, message: '请选择城市!' }]}> <Form.Item
name="city"
rules={[{ required: true, message: '请选择城市!' }]}
>
<Cascader <Cascader
allowClear allowClear
placeholder="城市" placeholder="城市"
...@@ -341,7 +424,7 @@ export default function FlyingHandService() { ...@@ -341,7 +424,7 @@ export default function FlyingHandService() {
fieldNames={{ fieldNames={{
label: 'name', label: 'name',
value: 'id', value: 'id',
children: 'childInfo' children: 'childInfo',
}} }}
options={secondDistrictInfo} options={secondDistrictInfo}
changeOnSelect changeOnSelect
...@@ -362,14 +445,21 @@ export default function FlyingHandService() { ...@@ -362,14 +445,21 @@ export default function FlyingHandService() {
fieldNames={{ fieldNames={{
label: 'licenseType', label: 'licenseType',
value: 'id', value: 'id',
children: 'childLicenses' children: 'childLicenses',
}} }}
options={skills} options={skills}
changeOnSelect changeOnSelect
/> />
</Form.Item> </Form.Item>
<Form.Item name="industryAppAuth" label="行业应用认证（多选）" className="collection-create-form_last-form-item"> <Form.Item
<Checkbox.Group options={flightSkillsList} onChange={onChangeCheck} /> name="industryAppAuth"
label="行业应用认证（多选）"
className="collection-create-form_last-form-item"
>
<Checkbox.Group
options={flightSkillsList}
onChange={onChangeCheck}
/>
</Form.Item> </Form.Item>
<Form.Item name="remark"> <Form.Item name="remark">
<Input placeholder="备注" /> <Input placeholder="备注" />
...@@ -381,15 +471,24 @@ export default function FlyingHandService() { ...@@ -381,15 +471,24 @@ export default function FlyingHandService() {
boxIndex={4} boxIndex={4}
leftcontentstyle={{ leftcontentstyle={{
width: '925px', width: '925px',
margin: { top: 0, right: '10px', bottom: '10px', left: 0 } margin: { top: 0, right: '10px', bottom: '10px', left: 0 },
}} }}
leftRenderDom={{ leftRenderDom={{
columns: productList, columns: productList,
pagination: ( pagination: (
<div className="pagination-page"> <div className="pagination-page">
<Pagination current={pageParams.pageNo} pageSize={pageParams.pageSize} showSizeChanger={false} showQuickJumper total={count} onChange={onPageChange} hideOnSinglePage={true} style={{ marginTop: 20 }} /> <Pagination
current={pageParams.pageNo}
pageSize={pageParams.pageSize}
showSizeChanger={false}
showQuickJumper
total={count}
onChange={onPageChange}
hideOnSinglePage={true}
style={{ marginTop: 20 }}
/>
</div> </div>
) ),
}} }}
rightRenderDom={{ columns: rightDomList }} rightRenderDom={{ columns: rightDomList }}
/> />
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论