提交 5b4c06f4 作者: 翁进城

Merge remote-tracking branch 'origin/caoyun'

import request, { Response } from "~/api/request"; import request, { Response } from '~/api/request'
export interface FilterOptionResp { export interface FilterOptionResp {
id: number; id: number
name?: string; name?: string
appName?: string; appName?: string
} }
export interface RegionResp { export interface RegionResp {
childInfo: RegionResp[] | null; childInfo: RegionResp[] | null
id: number; id: number
level: number; level: number
name: string; name: string
pid: number; pid: number
}
export interface InfoList {
id: number
directoryId: number
name: string
icon: string
}
export interface TypesResp {
directoryId: number
name: string
categoriesInfoListDTO: InfoList[]
} }
export default { export default {
category: (): Promise<Response<Array<FilterOptionResp>>> => { category: (): Promise<Response<Array<FilterOptionResp>>> => {
return request("/pms/webProductMall/category"); return request('/pms/webProductMall/category')
}, },
categoryId: (): Promise<Response<Array<FilterOptionResp>>> => { categoryId: (): Promise<Response<Array<FilterOptionResp>>> => {
return request("/pms/webDevice/category"); return request('/pms/webDevice/category')
}, },
brand: (): Promise<Response<Array<FilterOptionResp>>> => { brand: (): Promise<Response<Array<FilterOptionResp>>> => {
return request("/pms/webDevice/brand"); return request('/pms/webDevice/brand')
}, },
model: (): Promise<Response<Array<FilterOptionResp>>> => { model: (): Promise<Response<Array<FilterOptionResp>>> => {
return request("/pms/webDevice/model"); return request('/pms/webDevice/model')
}, },
part: (): Promise<Response<Array<FilterOptionResp>>> => { part: (): Promise<Response<Array<FilterOptionResp>>> => {
return request("/pms/webProductMall/parts"); return request('/pms/webProductMall/parts')
}, },
quality: (): Promise<Response<Array<FilterOptionResp>>> => { quality: (): Promise<Response<Array<FilterOptionResp>>> => {
return request("/pms/webProductMall/quality"); return request('/pms/webProductMall/quality')
}, },
region: (): Promise<Response<Array<RegionResp>>> => { region: (): Promise<Response<Array<RegionResp>>> => {
return request("/pms/webDevice/getSecondDistrictInfo"); return request('/pms/webDevice/getSecondDistrictInfo')
}, },
industry: (): Promise<Response<Array<RegionResp>>> => { industry: (): Promise<Response<Array<RegionResp>>> => {
return request("/release/work/listAllIndustry"); return request('/release/work/listAllIndustry')
}, },
appType: (): Promise<Response<Array<RegionResp>>> => { appType: (): Promise<Response<Array<RegionResp>>> => {
return request("/release/work/listAllAppType"); return request('/release/work/listAllAppType')
}, },
deviceBrand: (): Promise<Response<Array<RegionResp>>> => { deviceBrand: (): Promise<Response<Array<RegionResp>>> => {
return request("/pms/webDevice/deviceBrand"); return request('/pms/webDevice/deviceBrand')
}, },
deviceModel: (): Promise<Response<Array<RegionResp>>> => { deviceModel: (): Promise<Response<Array<RegionResp>>> => {
return request("/pms/webDevice/deviceModel"); return request('/pms/webDevice/deviceModel')
}, },
}; infoByType: (params: {
type: number
}): Promise<Response<Array<TypesResp>>> => {
return request('/pms/classify/queryCategoryInfoByType', 'get', params)
},
}
import { Space, Select } from "antd"; import { Space, Select } from 'antd'
import { useEffect, useState } from "react"; import { useEffect, useState } from 'react'
import styles from "../../index.module.scss"; import styles from '../../index.module.scss'
import api, { RegionResp } from "../../api"; import api, { RegionResp } from '../../api'
type Props = { type Props = {
onChange: (item: RegionResp) => void; onChange: (item: RegionResp) => void
}; }
export default function RegionItem(props: Props) { export default function RegionItem(props: Props) {
const [provinceList, setProvinceList] = useState<RegionResp[]>([]); const [provinceList, setProvinceList] = useState<RegionResp[]>([])
const [cityList, setCityList] = useState<RegionResp[]>([]); const [cityList, setCityList] = useState<RegionResp[]>([])
const [selectCity, setSelectCity] = useState<number>() const [selectCity, setSelectCity] = useState<number>()
useEffect(() => { useEffect(() => {
api.region().then((res) => { api.region().then((res) => {
setProvinceList(res?.result || []); setProvinceList(res?.result || [])
}); })
}, []); }, [])
const onProvinceChange = (value: number, item: any) => { const onProvinceChange = (value: number, item: any) => {
console.log("省", value, item); console.log('省', value, item)
setCityList(item.childInfo || []); setCityList(item.childInfo || [])
setSelectCity(undefined); setSelectCity(undefined)
props.onChange(item); props.onChange(item)
}; }
const onCityChange = (value: number, item: any) => { const onCityChange = (value: number, item: any) => {
console.log("市", value); console.log('市', value)
setSelectCity(value); setSelectCity(value)
props.onChange(item); props.onChange(item)
}; }
return ( return (
<div className={styles.filterItem}> <div className={styles.filterItem}>
<div className={styles.filterItemTitle}>地域:</div> <div className={styles.filterItemTitle}>地域:</div>
...@@ -44,7 +44,7 @@ export default function RegionItem(props: Props) { ...@@ -44,7 +44,7 @@ export default function RegionItem(props: Props) {
...item, ...item,
value: item.id, value: item.id,
label: item.name, label: item.name,
}; }
})} })}
/> />
{/* <Select {/* <Select
...@@ -64,5 +64,5 @@ export default function RegionItem(props: Props) { ...@@ -64,5 +64,5 @@ export default function RegionItem(props: Props) {
</Space> </Space>
</div> </div>
</div> </div>
); )
} }
import { Space, Tag } from "antd"; import { Space, Tag } from 'antd'
import { FilterResult } from "../.."; import { FilterResult } from '../..'
import styles from "../../index.module.scss"; import styles from '../../index.module.scss'
import { InfoList } from '../../api'
type Props = { type Props = {
data: FilterResult; data: FilterResult
onDel: (key: string) => void; onDel: (key: string | number) => void
}; }
export default function ResultItem({data, onDel}: Props) { export default function ResultItem({ data, onDel }: Props) {
return ( return (
<div className={styles.filterItem}> <div className={styles.filterItem}>
<div className={styles.filterItemTitle}>已选:</div> <div className={styles.filterItemTitle}>已选:</div>
<div className={styles.filterItemMain}> <div className={styles.filterItemMain}>
<Space size={10}> <Space size={10}>
{data && {data.provinceId && (
Object.keys(data).map((key) => { // Object.keys(data).map((key) => {
//@ts-ignore // //@ts-ignore
let item = data[key]; // let item = data[key]
// return (
// <Tag
// closable
// onClose={(e: React.MouseEvent<HTMLElement, MouseEvent>) => {
// onDel(key)
// }}
// key={key}
// >
// {item?.name}
// </Tag>
// )
// })
<Tag
closable
onClose={(e: React.MouseEvent<HTMLElement, MouseEvent>) => {
onDel('provinceId')
}}
key={data.provinceId.id}
>
{data.provinceId.name}
</Tag>
)}
{data.categoryId &&
data.categoryId.map((item: InfoList, index) => {
return ( return (
<Tag <Tag
closable closable
onClose={(e: React.MouseEvent<HTMLElement, MouseEvent>) => { onClose={(e: React.MouseEvent<HTMLElement, MouseEvent>) => {
onDel(key); onDel(item.id)
}} }}
key={key} key={item.name}
> >
{item?.name} {item?.name}
</Tag> </Tag>
); )
})} })}
</Space> </Space>
</div> </div>
</div> </div>
); )
} }
import { Space, Button, Select, Collapse } from 'antd'
import styles from '../../index.module.scss'
import api, { FilterOptionResp, InfoList } from '../../api'
import { useState, useEffect } from 'react'
type Props = {
onChange: (id: FilterOptionResp) => void
typeName: string
dataValue: InfoList[]
}
export default function CategoryItem(props: Props) {
const [data, setData] = useState<FilterOptionResp[]>([])
useEffect(() => {
setData(props.dataValue || [])
}, [])
const onClick = (item: FilterOptionResp) => {
props.onChange({
id: item.id,
name: `${props.typeName}:` + item.name,
})
}
return (
<div className={styles.filterItem}>
<div className={styles.filterItemTitle}>{props.typeName}</div>
<div
className={`${styles.filterItemMain} ${
data.length <= 10 && styles.disabled
}`}
>
<Collapse ghost collapsible="icon" expandIconPosition="end">
<Collapse.Panel
header={
<Space size={40}>
{data.slice(0, 10).map((item) => {
return (
<Button
type="link"
key={item.id}
onClick={(e) => onClick(item)}
>
{item.name}
</Button>
)
})}
</Space>
}
key="1"
>
<Space size={40}>
{data.slice(10).map((item) => {
return (
<Button
type="link"
key={item.id}
onClick={(e) => onClick(item)}
>
{item.name}
</Button>
)
})}
</Space>
</Collapse.Panel>
</Collapse>
</div>
</div>
)
}
...@@ -52,12 +52,10 @@ export default function EquipmentLeasingDetail() { ...@@ -52,12 +52,10 @@ export default function EquipmentLeasingDetail() {
api api
.listDetailDeviceInfo({ .listDetailDeviceInfo({
goodsId: id, goodsId: id,
type: 1,
}) })
.then((res) => { .then((res) => {
setDetail(res.result || null) setDetail(res.result || null)
console.log(
res.result?.goodsSpec.map((item) => item.productSpecList).flat()
)
const wareList = res.result?.goodsSpec.map( const wareList = res.result?.goodsSpec.map(
(item) => item.productSpecList (item) => item.productSpecList
) )
...@@ -70,6 +68,7 @@ export default function EquipmentLeasingDetail() { ...@@ -70,6 +68,7 @@ export default function EquipmentLeasingDetail() {
}, [id]) }, [id])
//租赁弹框 //租赁弹框
const [visible, setVisible] = useState(false)
const [isModalOpen, setIsModalOpen] = useState(false) const [isModalOpen, setIsModalOpen] = useState(false)
const [isModalDateOpen, setIsModalDateOpen] = useState(false) const [isModalDateOpen, setIsModalDateOpen] = useState(false)
const [loading, setLoading] = useState(false) const [loading, setLoading] = useState(false)
...@@ -77,7 +76,7 @@ export default function EquipmentLeasingDetail() { ...@@ -77,7 +76,7 @@ export default function EquipmentLeasingDetail() {
const [form] = Form.useForm() const [form] = Form.useForm()
const [formDate] = Form.useForm() const [formDate] = Form.useForm()
const tagsData = [ const tagsData = [
{ label: '3-7天', disable: false }, { label: '1-7天', disable: false },
{ label: '8-15天', disable: false }, { label: '8-15天', disable: false },
{ label: '16-30天', disable: false }, { label: '16-30天', disable: false },
{ label: '30天以上', disable: false }, { label: '30天以上', disable: false },
...@@ -92,7 +91,7 @@ export default function EquipmentLeasingDetail() { ...@@ -92,7 +91,7 @@ export default function EquipmentLeasingDetail() {
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('1-7天')
form.setFieldValue('date', '3-7天') form.setFieldValue('date', '3-7天')
} }
} else { } else {
...@@ -152,7 +151,6 @@ export default function EquipmentLeasingDetail() { ...@@ -152,7 +151,6 @@ export default function EquipmentLeasingDetail() {
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)
setSelectedTags(nextWareSkuList) setSelectedTags(nextWareSkuList)
form.setFieldValue('id', tag) form.setFieldValue('id', tag)
} }
...@@ -167,7 +165,6 @@ export default function EquipmentLeasingDetail() { ...@@ -167,7 +165,6 @@ export default function EquipmentLeasingDetail() {
const nextSelectedTags = checked const nextSelectedTags = checked
? tag ? tag
: tagsData.filter((t) => t.label !== tag)[0].label : tagsData.filter((t) => t.label !== tag)[0].label
console.log('You are interested in: ', nextSelectedTags)
setSelectedTagsData(nextSelectedTags) setSelectedTagsData(nextSelectedTags)
form.setFieldValue('date', tag) form.setFieldValue('date', tag)
} }
...@@ -274,6 +271,7 @@ export default function EquipmentLeasingDetail() { ...@@ -274,6 +271,7 @@ export default function EquipmentLeasingDetail() {
onOk={handleOk} onOk={handleOk}
onCancel={handleCancel} onCancel={handleCancel}
getContainer={false} getContainer={false}
maskClosable={false}
footer={[ footer={[
<Button <Button
style={{ width: '100%', height: 44 }} style={{ width: '100%', height: 44 }}
...@@ -287,11 +285,29 @@ export default function EquipmentLeasingDetail() { ...@@ -287,11 +285,29 @@ export default function EquipmentLeasingDetail() {
]} ]}
> >
<div className="title"> <div className="title">
<div className="left"></div> <div className="left">
<AImage
preview={{ visible: false }}
src={detail?.images[0].imgUrl}
onClick={() => setVisible(true)}
/>
<div style={{ display: 'none' }}>
<AImage.PreviewGroup
preview={{
visible,
onVisibleChange: (vis) => setVisible(vis),
}}
>
{detail?.images.map((item) => (
<AImage src={item.imgUrl} />
))}
</AImage.PreviewGroup>
</div>
</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?.price}</span> <span className="money">{detail?.price || 0}</span>
<span className="unit">/天</span> <span className="unit">/天</span>
</div> </div>
<div className="bottom">渠道免押金</div> <div className="bottom">渠道免押金</div>
...@@ -301,7 +317,7 @@ export default function EquipmentLeasingDetail() { ...@@ -301,7 +317,7 @@ export default function EquipmentLeasingDetail() {
form={form} form={form}
layout="vertical" layout="vertical"
name="application" name="application"
initialValues={{ modifier: 'public' }} initialValues={{ num: 1 }}
className="form-data" className="form-data"
> >
<Form.Item <Form.Item
...@@ -349,16 +365,10 @@ export default function EquipmentLeasingDetail() { ...@@ -349,16 +365,10 @@ export default function EquipmentLeasingDetail() {
<div className="num-box"> <div className="num-box">
<div className="num-left"> <div className="num-left">
<div className="label">租赁数量</div> <div className="label">租赁数量</div>
<div className="inventory">库存9件</div>
</div> </div>
<div className="num-right"> <div className="num-right">
<Form.Item style={{ flex: 1, marginRight: 16 }} name="num"> <Form.Item style={{ flex: 1, marginRight: 16 }} name="num">
<InputNumber <InputNumber min={1} max={10} onChange={onChangeNum} />
min={1}
max={10}
defaultValue={1}
onChange={onChangeNum}
/>
</Form.Item> </Form.Item>
</div> </div>
</div> </div>
...@@ -371,6 +381,7 @@ export default function EquipmentLeasingDetail() { ...@@ -371,6 +381,7 @@ export default function EquipmentLeasingDetail() {
onOk={handleOkDate} onOk={handleOkDate}
onCancel={handleCancel} onCancel={handleCancel}
getContainer={false} getContainer={false}
maskClosable={false}
width={420} width={420}
footer={[ footer={[
<Button <Button
...@@ -412,8 +423,8 @@ export default function EquipmentLeasingDetail() { ...@@ -412,8 +423,8 @@ export default function EquipmentLeasingDetail() {
<div className="bottom-item"> <div className="bottom-item">
<div className="label">租金合计</div> <div className="label">租金合计</div>
<div className="price"> <div className="price">
<div className="left">¥700</div> <div className="left">¥{detail?.price! * days! || 0}</div>
<div className="right">(日均175)</div> {/* <div className="right">(日均175)</div> */}
</div> </div>
</div> </div>
</Modal> </Modal>
...@@ -424,6 +435,9 @@ export default function EquipmentLeasingDetail() { ...@@ -424,6 +435,9 @@ export default function EquipmentLeasingDetail() {
shopDetail={shopDetail} shopDetail={shopDetail}
days={days} days={days}
detailData={detail} detailData={detail}
wareSkuList={wareSkuList?.filter(
(item) => item.id === form.getFieldValue('id')
)}
/> />
)} )}
</Layout> </Layout>
......
...@@ -2,6 +2,11 @@ import request, { Response } from '~/api/request' ...@@ -2,6 +2,11 @@ import request, { Response } from '~/api/request'
export interface GetWebDeviceDetailParams { export interface GetWebDeviceDetailParams {
goodsId: number goodsId: number
type: 1
}
export interface GetLeaseGoodsParams {
leaseTerm: number //租赁时限:(输入0:1-7天、输入1:8-15天、输入2:16-30天、输入3:30天以上)
productSpecId: number
} }
export interface WareImgsType { export interface WareImgsType {
...@@ -9,7 +14,20 @@ export interface WareImgsType { ...@@ -9,7 +14,20 @@ export interface WareImgsType {
imgUrl: string imgUrl: string
imgType: number imgType: number
} }
export interface PriceType {
id: number
cooperationTag: number
price: number
productSpecId: number
leaseTerm: number
}
export interface GetLeaseGoodsResult {
productSpecId: number
type: number | null
leaseTerm: number
specPrice: PriceType
}
export interface GetWebDeviceDetailResult { export interface GetWebDeviceDetailResult {
id: number id: number
images: { images: {
...@@ -85,4 +103,10 @@ export default { ...@@ -85,4 +103,10 @@ export default {
): Promise<Response<number>> => { ): Promise<Response<number>> => {
return request('/pms/appDevice/update', 'post', params) return request('/pms/appDevice/update', 'post', params)
}, },
//web-设备租赁-详情-获取设备商品规格价格详情
GoodsPriceDetail: (
params: GetLeaseGoodsParams
): Promise<Response<GetLeaseGoodsResult>> => {
return request('/pms/product/mall/getLeaseGoodsPriceDetail', 'get', params)
},
} }
...@@ -40,9 +40,10 @@ export interface UserAddress { ...@@ -40,9 +40,10 @@ export interface UserAddress {
type: number type: number
} }
export interface GetWebDeviceWareSkuById { export interface GetOrderForGoods {
balance: number balance: number
nickName: string nickName: string
orderNo: string
} }
export default { export default {
...@@ -53,7 +54,13 @@ export default { ...@@ -53,7 +54,13 @@ export default {
//web-设备租赁-下单 //web-设备租赁-下单
FeignAddLease: ( FeignAddLease: (
params: GetWebDeviceDetailParams params: GetWebDeviceDetailParams
): Promise<Response<GetWebDeviceWareSkuById[]>> => { ): Promise<Response<GetOrderForGoods>> => {
return request('/pms/appDevice/listWareSkuById', 'post', params) return request('/oms/RentalOrders/feignAddLease', 'post', params)
},
//web-设备租赁-订单支付
OrderPayment: (params: {
orderNo: string
}): Promise<Response<GetOrderForGoods>> => {
return request(`/payment/repocash/orderPayment`, 'get', params)
}, },
} }
import React, { useEffect, useState } from 'react' import React, { useContext, useEffect, useState } from 'react'
import { OrderForGoodsBox } from './styled' import { OrderForGoodsBox } from './styled'
import type { FormInstance, RadioChangeEvent } from 'antd' import type { FormInstance, RadioChangeEvent } from 'antd'
import { Button, Radio, Space, Input, message } from 'antd' import { Button, Radio, Space, Input, message, Modal, Image } from 'antd'
import api, { UserAddress } from './api' import api, { UserAddress, GetOrderForGoods } from './api'
import moment from 'moment' import moment from 'moment'
import { ShopDetail } from '../../[id].page' import { ShopDetail } from '../../[id].page'
import { GetWebDeviceDetailResult } from '../../api' import { GetWebDeviceDetailResult, GetWebDeviceWareSkuById } from '../../api'
import { UserContext } from '~/lib/userProvider'
const { TextArea } = Input const { TextArea } = Input
interface PropsBox { interface PropsBox {
...@@ -13,14 +14,17 @@ interface PropsBox { ...@@ -13,14 +14,17 @@ interface PropsBox {
detailData?: GetWebDeviceDetailResult | null detailData?: GetWebDeviceDetailResult | null
days?: number days?: number
shopDetail?: ShopDetail shopDetail?: ShopDetail
wareSkuList?: GetWebDeviceWareSkuById[]
} }
export default function OrderForGoods(props: PropsBox) { export default function OrderForGoods(props: PropsBox) {
const { setIsorderForGoods, shopDetail, days, detailData } = props const { setIsorderForGoods, shopDetail, days, detailData, wareSkuList } =
props
const [value, setValue] = useState(1) const [value, setValue] = useState(1)
const [areaValue, setAreaValue] = useState<string>() const [areaValue, setAreaValue] = useState<string>()
const [list, setList] = useState<Array<UserAddress> | null>() const [list, setList] = useState<Array<UserAddress> | null>()
const [detail, setDetail] = useState<ShopDetail>() const [detail, setDetail] = useState<ShopDetail>()
const onChange = (e: RadioChangeEvent) => { const onChange = (e: RadioChangeEvent) => {
console.log('radio checked', e.target.value) console.log('radio checked', e.target.value)
setValue(e.target.value) setValue(e.target.value)
...@@ -29,20 +33,10 @@ export default function OrderForGoods(props: PropsBox) { ...@@ -29,20 +33,10 @@ export default function OrderForGoods(props: PropsBox) {
setValue(index) setValue(index)
} }
const detailSumbit = () => { const detailSumbit = () => {
message.success('提交成功') if (detailData && shopDetail && list && wareSkuList) {
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 = { const pushList = {
actualPay: shopDetail.num * detailData.price!, // actualPay: shopDetail.num * detailData.price!,
actualPay: 100,
deposit: 0, deposit: 0,
endDate: moment(new Date(shopDetail.dateDetail[1])).format( endDate: moment(new Date(shopDetail.dateDetail[1])).format(
'YYYY-MM-DD' 'YYYY-MM-DD'
...@@ -54,12 +48,14 @@ export default function OrderForGoods(props: PropsBox) { ...@@ -54,12 +48,14 @@ export default function OrderForGoods(props: PropsBox) {
takeName: list[value].takeName, takeName: list[value].takeName,
takePhone: Number(list[value].takePhone), takePhone: Number(list[value].takePhone),
}, },
rentPrice: shopDetail.num * detailData.price!, // rentPrice: shopDetail.num * detailData.price!,
returnDate: moment(new Date(shopDetail.dateDetail[1])).format( rentPrice: 100,
'YYYY-MM-DD' returnDate: moment(
), new Date(shopDetail.dateDetail[1]).getTime() + 864e5
shouldPay: shopDetail.num * detailData.price!, ).format('YYYY-MM-DD'),
specsId: shopDetail.id, // shouldPay: shopDetail.num * detailData.price!,
shouldPay: 100,
specsId: wareSkuList[0].productSpec,
startDate: moment(new Date(shopDetail.dateDetail[0]!)).format( startDate: moment(new Date(shopDetail.dateDetail[0]!)).format(
'YYYY-MM-DD' 'YYYY-MM-DD'
), ),
...@@ -73,10 +69,15 @@ export default function OrderForGoods(props: PropsBox) { ...@@ -73,10 +69,15 @@ export default function OrderForGoods(props: PropsBox) {
} }
api.FeignAddLease(pushList).then((res) => { api.FeignAddLease(pushList).then((res) => {
console.log(res) if (res.code === '200') {
message.success('提交成功')
setPaymentDetail(res.result)
setIsPaymentOpen(true)
} else {
message.error(res.message)
}
}) })
} }
// setIsorderForGoods(false)
} }
useEffect(() => { useEffect(() => {
...@@ -100,6 +101,39 @@ export default function OrderForGoods(props: PropsBox) { ...@@ -100,6 +101,39 @@ export default function OrderForGoods(props: PropsBox) {
setDetail(shopDetail) setDetail(shopDetail)
} }
}, []) }, [])
//图片预览
const [visible, setVisible] = useState(false)
//付款
const { userInfo } = useContext(UserContext)
const [loading, setLoading] = useState(false)
const [isPaymentOpen, setIsPaymentOpen] = useState(false)
const [paymentDetail, setPaymentDetail] = useState<GetOrderForGoods | null>()
const handleCancel = () => {
setIsPaymentOpen(false)
}
const handleOkPayment = () => {
setLoading(true)
if (paymentDetail?.orderNo) {
const date = new FormData()
api.OrderPayment({ orderNo: paymentDetail?.orderNo }).then((res) => {
if (res.code === '200') {
message.success('付款成功')
setLoading(false)
setIsorderForGoods(false)
handleCancel()
} else {
message.error(res.message)
setLoading(false)
}
})
} else {
message.error('出错了')
setLoading(false)
}
}
return ( return (
<OrderForGoodsBox> <OrderForGoodsBox>
<div className="address"> <div className="address">
...@@ -162,21 +196,33 @@ export default function OrderForGoods(props: PropsBox) { ...@@ -162,21 +196,33 @@ export default function OrderForGoods(props: PropsBox) {
</div> </div>
<div className="table-body"> <div className="table-body">
<div className="body-item article" style={{ width: 290 }}> <div className="body-item article" style={{ width: 290 }}>
<div className="image"></div> <div className="image">
<div className="right"> <Image
<div className="top"> preview={{ visible: false }}
智多星航电版智多星航电版智多星航电版智多 src={wareSkuList![0].specImage}
</div> onClick={() => setVisible(true)}
<div className="bottom"> />
商品简介商品简介商品简介商品简介商品简介 <div style={{ display: 'none' }}>
<Image.PreviewGroup
preview={{
visible,
onVisibleChange: (vis) => setVisible(vis),
}}
>
<Image src={wareSkuList![0].specImage} />
</Image.PreviewGroup>
</div> </div>
</div> </div>
<div className="right">
<div className="top">{wareSkuList![0].specName}</div>
<div className="bottom">{wareSkuList![0].versionDesc}</div>
</div>
</div> </div>
<div className="body-item" style={{ width: 130 }}> <div className="body-item" style={{ width: 130 }}>
800.00/天 {detailData?.price || 0}
</div> </div>
<div className="body-item" style={{ width: 130 }}> <div className="body-item" style={{ width: 130 }}>
1 {shopDetail?.num || 1}
</div> </div>
<div className="body-item lease-term" style={{ width: 300 }}> <div className="body-item lease-term" style={{ width: 300 }}>
{moment(new Date(shopDetail?.dateDetail[0]!)).format( {moment(new Date(shopDetail?.dateDetail[0]!)).format(
...@@ -188,7 +234,7 @@ export default function OrderForGoods(props: PropsBox) { ...@@ -188,7 +234,7 @@ export default function OrderForGoods(props: PropsBox) {
)} )}
</div> </div>
<div className="body-item total-price" style={{ width: 135 }}> <div className="body-item total-price" style={{ width: 135 }}>
800.00 {detailData?.price! * shopDetail?.num! || 0}
</div> </div>
</div> </div>
</div> </div>
...@@ -210,14 +256,14 @@ export default function OrderForGoods(props: PropsBox) { ...@@ -210,14 +256,14 @@ export default function OrderForGoods(props: PropsBox) {
<div className="label">运费:</div> <div className="label">运费:</div>
<div className="value">邮寄到付,由客户自己承担</div> <div className="value">邮寄到付,由客户自己承担</div>
</div> </div>
<div className="price">200.00</div> <div className="price">0.00</div>
</div> </div>
<div className="bottom"> <div className="bottom">
<div className="font"> <div className="font">
<div className="label">押金:</div> <div className="label">押金:</div>
<div className="value">渠道商可免押金</div> <div className="value">渠道商可免押金</div>
</div> </div>
<div className="price">1000.00</div> <div className="price">0.00</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -230,9 +276,9 @@ export default function OrderForGoods(props: PropsBox) { ...@@ -230,9 +276,9 @@ export default function OrderForGoods(props: PropsBox) {
</div> </div>
<div className="bottom"> <div className="bottom">
<div className="value">寄送至</div> <div className="value">寄送至</div>
<div className="value-content"> {list ? (
广东省深圳市南山区国际创谷6栋国际创谷6 <div className="value-content">{list![value].takeAddress}</div>
</div> ) : null}
</div> </div>
</div> </div>
<div className="detail-sumbit"> <div className="detail-sumbit">
...@@ -242,6 +288,31 @@ export default function OrderForGoods(props: PropsBox) { ...@@ -242,6 +288,31 @@ export default function OrderForGoods(props: PropsBox) {
</div> </div>
</div> </div>
</div> </div>
<Modal
wrapClassName="Payment"
open={isPaymentOpen}
onOk={handleOkPayment}
onCancel={handleCancel}
getContainer={false}
maskClosable={false}
width={420}
footer={[
<Button
style={{ width: '100%', height: 44 }}
key="submit"
type="primary"
loading={loading}
onClick={handleOkPayment}
>
立即付款
</Button>,
]}
>
<div className="title">{detailData?.price! * days!}</div>
<div>云享飞账号: {userInfo?.uid}</div>
<div>付款方式: 可用(¥{paymentDetail?.balance})</div>
</Modal>
</OrderForGoodsBox> </OrderForGoodsBox>
) )
} }
...@@ -300,4 +300,13 @@ export const OrderForGoodsBox = styled.div` ...@@ -300,4 +300,13 @@ export const OrderForGoodsBox = styled.div`
} }
} }
} }
.Payment {
.title {
text-align: center;
font-size: 26px;
font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
font-weight: bold;
color: #ff552d;
}
}
` `
...@@ -234,12 +234,6 @@ export const Box = styled.div` ...@@ -234,12 +234,6 @@ export const Box = styled.div`
color: #121212; color: #121212;
margin-right: 5px; margin-right: 5px;
} }
.inventory {
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #acacac;
}
} }
} }
} }
......
...@@ -19,7 +19,6 @@ type Props = {} ...@@ -19,7 +19,6 @@ 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 [productList, setProductList] = useState( const [productList, setProductList] = useState(
Array<{ element: JSX.Element }> Array<{ element: JSX.Element }>
) )
...@@ -85,12 +84,9 @@ export default function EquipmentLeasing(props: Props) { ...@@ -85,12 +84,9 @@ export default function EquipmentLeasing(props: Props) {
//端口列表请求 //端口列表请求
useEffect(() => { useEffect(() => {
let queryVal = JSON.parse(JSON.stringify(router.query)) let queryVal = JSON.parse(JSON.stringify(router.query))
const idArr = filter.current.idArr
let rs let rs
for (const key in queryVal) { if (Object.keys(queryVal).length) {
if (idArr.includes(key)) { rs = { categoryId: [Number(queryVal['categoryId'])] }
rs = { [key]: router.query[key] }
}
} }
api api
.listPageDeviceInfo( .listPageDeviceInfo(
...@@ -118,6 +114,9 @@ export default function EquipmentLeasing(props: Props) { ...@@ -118,6 +114,9 @@ export default function EquipmentLeasing(props: Props) {
adapterFilterResult: AdapterResult adapterFilterResult: AdapterResult
) => { ) => {
console.log('filterResult', filterResult, adapterFilterResult) console.log('filterResult', filterResult, adapterFilterResult)
adapterFilterResult.categoryId = adapterFilterResult.categoryId?.map(
(item) => item.id
)
setFilterResult(adapterFilterResult) setFilterResult(adapterFilterResult)
} }
...@@ -133,13 +132,8 @@ export default function EquipmentLeasing(props: Props) { ...@@ -133,13 +132,8 @@ export default function EquipmentLeasing(props: Props) {
useEffect(() => { useEffect(() => {
let queryVal = JSON.parse(JSON.stringify(router.query)) let queryVal = JSON.parse(JSON.stringify(router.query))
if (router.query) { if (Object.keys(router.query).length) {
const idArr = filter.current.idArr setFilterResult({ categoryId: [Number(queryVal['categoryId'])] })
for (const key in queryVal) {
if (idArr.includes(key)) {
setFilterResult({ [key]: router.query[key] })
}
}
} }
}, [router]) }, [router])
...@@ -150,7 +144,6 @@ export default function EquipmentLeasing(props: Props) { ...@@ -150,7 +144,6 @@ export default function EquipmentLeasing(props: Props) {
types={['地域', '设备品牌', '设备型号']} types={['地域', '设备品牌', '设备型号']}
showResultItem showResultItem
onChange={onFilterChange} onChange={onFilterChange}
ref={filter}
></Filter> ></Filter>
<div style={{ paddingTop: 13 }}> <div style={{ paddingTop: 13 }}>
<ContentBox <ContentBox
......
import request, { Response } from '~/api/request'; import request, { Response } from '~/api/request'
import { TypesResp } from '~/components/filter/api'
export interface ListPageFlyingInfoParams { export interface ListPageFlyingInfoParams {
pageNo: number, pageNo: number
pageSize: number, pageSize: number
flightSkillsId?:number, flightSkillsId?: number
licenseId?:number, licenseId?: number
regionId?:number regionId?: number
} }
export interface Flying { export interface Flying {
id: number, id: number
price: number, price: number
supplierName: string, supplierName: string
curriculumName: string, curriculumName: string
free: 0 | 1, free: 0 | 1
curriculumDesc: string, curriculumDesc: string
videoUrl: string videoUrl: string
} }
export interface ListPageFlyingInfoResp { export interface ListPageFlyingInfoResp {
pageNo: 1, pageNo: 1
pageSize: 10, pageSize: 10
list: Array<Flying>, list: Array<Flying>
totalCount: 0, totalCount: 0
totalPage: 0 totalPage: 0
} }
export interface SkillsType { export interface SkillsType {
type: string; type: string
id: number, id: number
skillsName: string, skillsName: string
label:string | number, label: string | number
value:string | number value: string | number
} }
export interface RegionResp { export interface RegionResp {
childInfo: RegionResp[] | null, childInfo: RegionResp[] | null
id: number, id: number
level: number, level: number
name: string, name: string
pid: number pid: number
} }
export interface PilotRegistrationParams { export interface PilotRegistrationParams {
city?: number, city?: number
drivingLicense?: number, drivingLicense?: number
industryAppAuth?: Array<number>, industryAppAuth?: Array<number>
province?: number, province?: number
remark?: string, remark?: string
telephone?: string, telephone?: string
uavLicenseLevelOne?: number, uavLicenseLevelOne?: number
uavLicenseLevelTwo?: number uavLicenseLevelTwo?: number
} }
export default { export default {
//web-作业服务-分页 //web-飞手培训-分页
listPageJobServicesInfo: (params: ListPageFlyingInfoParams): Promise<Response<ListPageFlyingInfoResp>> => { listPageJobServicesInfo: (
return request('/release/curriculum/queryCurriculumInfoList', 'post', params) params: ListPageFlyingInfoParams
): Promise<Response<ListPageFlyingInfoResp>> => {
return request(
'/release/curriculum/queryCurriculumInfoList',
'post',
params
)
}, },
region: (): Promise<Response<Array<RegionResp>>> => { region: (): Promise<Response<Array<RegionResp>>> => {
return request('/pms/webDevice/getSecondDistrictInfo'); return request('/pms/webDevice/getSecondDistrictInfo')
}, },
PilotLicense: (): Promise<Response<Array<RegionResp>>> => { PilotLicense: (): Promise<Response<Array<RegionResp>>> => {
return request('/release/curriculum/getDronePilotLicense'); return request('/release/curriculum/getDronePilotLicense')
}, },
IndustryFlightSkills: (): Promise<Response<Array<SkillsType>>> => { IndustryFlightSkills: (): Promise<Response<Array<SkillsType>>> => {
return request('/release/curriculum/getIndustryFlightSkills'); return request('/release/curriculum/getIndustryFlightSkills')
}, },
PilotRegistrations: (params:PilotRegistrationParams): Promise<Response<Array<SkillsType>>> => { PilotRegistrations: (
return request('/release/curriculum/pilotRegistration',"post",params); params: PilotRegistrationParams
): Promise<Response<Array<SkillsType>>> => {
return request('/release/curriculum/pilotRegistration', 'post', params)
}, },
} FlightSkills: (params: { type: 3 }): Promise<Response<Array<TypesResp>>> => {
\ No newline at end of file return request('/pms/classify/queryCategoryInfoByType', 'get', params)
},
}
...@@ -20,10 +20,10 @@ import { UserContext } from '~/lib/userProvider' ...@@ -20,10 +20,10 @@ import { UserContext } from '~/lib/userProvider'
import { phoneNumber } from '~/lib/validateUtils' import { phoneNumber } from '~/lib/validateUtils'
import api, { Flying, RegionResp, SkillsType } from './api' import api, { Flying, RegionResp, SkillsType } from './api'
import { Box } from './styled' import { Box } from './styled'
import { TypesResp } from '~/components/filter/api'
interface FilterInfoParams { interface FilterInfoParams {
regionId?: number provinceId?: number
flightSkillsId?: number categoryId?: any[]
licenseId?: number
} }
export default function FlyingHandService() { export default function FlyingHandService() {
...@@ -45,8 +45,10 @@ export default function FlyingHandService() { ...@@ -45,8 +45,10 @@ export default function FlyingHandService() {
) )
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>>()
const [flightDefault, setFlightDefault] = useState<number | null>() const [flightDefault, setFlightDefault] = useState<number | null>()
const [selectOption, setSelectOption] = useState<Array<TypesResp> | null>()
const [selectDefault, setSelectDefault] = useState<number | null>()
const leftDom = (item: Flying) => { const leftDom = (item: Flying) => {
return ( return (
<div <div
...@@ -153,36 +155,59 @@ export default function FlyingHandService() { ...@@ -153,36 +155,59 @@ export default function FlyingHandService() {
} }
} }
const onProvinceChange = (value: number) => { const onSelectChange = (value: number, item: TypesResp) => {
clearRouter() clearRouter()
console.log(value)
if (value) { if (value) {
setFlightDefault(value) setSelectDefault(value)
} else { } else {
setFlightDefault(null) setSelectDefault(undefined)
} }
setFilterParams((props) => { setFilterParams((props) => {
if (props?.categoryId && value) {
return {
...props,
categoryId: [...props.categoryId, Number(value)],
}
}
return { return {
...props, ...props,
licenseId: Number(value), categoryId: value ? [Number(value)] : undefined,
} }
}) })
} }
const onChange = (value: any) => { const onProvinceChange = (value: number) => {
clearRouter() clearRouter()
if (value) { if (value) {
setSkillsDefault([value]) setFlightDefault(value)
} else { } else {
setSkillsDefault([]) setFlightDefault(undefined)
} }
setFilterParams((props) => { setFilterParams((props) => {
return { return {
...props, ...props,
flightSkillsId: (value && value[value.length - 1]) || undefined, licenseId: Number(value),
} }
}) })
} }
// const onChange = (value: any) => {
// clearRouter()
// if (value) {
// setSkillsDefault([value])
// } else {
// setSkillsDefault([])
// }
// setFilterParams((props) => {
// return {
// ...props,
// flightSkillsId: (value && value[value.length - 1]) || undefined,
// }
// })
// }
const onChangeRegion = (value: any) => { const onChangeRegion = (value: any) => {
clearRouter() clearRouter()
// setFilterParams((props) => { // setFilterParams((props) => {
...@@ -194,7 +219,7 @@ export default function FlyingHandService() { ...@@ -194,7 +219,7 @@ export default function FlyingHandService() {
setFilterParams((props) => { setFilterParams((props) => {
return { return {
...props, ...props,
regionId: value || undefined, provinceId: value || undefined,
} }
}) })
} }
...@@ -208,16 +233,21 @@ export default function FlyingHandService() { ...@@ -208,16 +233,21 @@ export default function FlyingHandService() {
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
}) // })
setFlightSkillsList(list || []) // setFlightSkillsList(list || [])
// })
api.FlightSkills({ type: 3 }).then((res) => {
console.log(res)
setSelectOption(res.result)
}) })
}, []) }, [])
...@@ -324,7 +354,7 @@ export default function FlyingHandService() { ...@@ -324,7 +354,7 @@ export default function FlyingHandService() {
fieldNames={{ value: 'id', label: 'name' }} fieldNames={{ value: 'id', label: 'name' }}
allowClear allowClear
/> />
<Cascader {/* <Cascader
allowClear allowClear
placeholder="考证" placeholder="考证"
bordered={false} bordered={false}
...@@ -339,19 +369,21 @@ export default function FlyingHandService() { ...@@ -339,19 +369,21 @@ export default function FlyingHandService() {
onChange={(value) => onChange(value)} onChange={(value) => onChange(value)}
changeOnSelect changeOnSelect
value={skillsDefault} value={skillsDefault}
/> /> */}
<Select {selectOption?.map((item) => (
className="selectItem" <Select
bordered={false} key={item.directoryId}
popupMatchSelectWidth={false} className="selectItem"
placeholder="技能" bordered={false}
size="large" popupMatchSelectWidth={false}
onChange={(value) => onProvinceChange(value)} placeholder={item.name}
options={flightSkillsList} size="large"
fieldNames={{ value: 'id', label: 'skillsName' }} onChange={(value) => onSelectChange(value, item)}
allowClear options={item.categoriesInfoListDTO}
value={flightDefault} fieldNames={{ value: 'id', label: 'name' }}
/> allowClear
/>
))}
</Space> </Space>
</div> </div>
<Button <Button
......
import request, { Response } from "~/api/request"; import request, { Response } from '~/api/request'
export interface AllType { export interface AllType {
type?: string; categoryName: string
id?: number; id: number
name?: string;
appName?: string;
createTime?: string;
industryIcon?: string;
shortName?: null;
industryType?: null;
propagate1?: string;
propagate2?: string;
image?: string;
video?: string;
newsTitle?: string;
newsAuthor?: string;
userAccountId?: number;
surfaceImg?: string;
newsContents?: string;
updateTime?: string | null;
tenderNewsId?: number;
tenderInfoNo?: string;
tenderContent?: string;
tenderPrice?: number;
apply?: number;
skillsName?: string;
} }
export interface FilterOptionResp { export interface FilterOptionResp {
type: string; type: string
id: number; id: number
name: string; name: string
} }
export interface RegionResp { export interface RegionResp {
childInfo: RegionResp[] | null; childInfo: RegionResp[] | null
id: number; id: number
level: number; level: number
name: string; name: string
pid: number; pid: number
} }
export const equipmentLeasingApi = { export const equipmentLeasingApi = {
deviceBrand: (): Promise<Response<Array<FilterOptionResp>>> => { deviceBrand: (): Promise<Response<Array<FilterOptionResp>>> => {
return request("/pms/webDevice/deviceBrand"); return request('/pms/webDevice/deviceBrand')
}, },
// deviceCategory: (): Promise<Response<Array<FilterOptionResp>>> => { // deviceCategory: (): Promise<Response<Array<FilterOptionResp>>> => {
// return request("/pms/webDevice/category"); // return request("/pms/webDevice/category");
// }, // },
deviceModel: (): Promise<Response<Array<FilterOptionResp>>> => { deviceModel: (): Promise<Response<Array<FilterOptionResp>>> => {
return request("/pms/webDevice/deviceModel"); return request('/pms/webDevice/deviceModel')
}, },
}; }
export interface AppType { export interface AppType {
id: number; id: number
name: string; name: string
appName: string; appName: string
createTime: string; createTime: string
type: string; type: string
} }
export interface IndustryType { export interface IndustryType {
id: number; id: number
industryIcon: string; industryIcon: string
name: string; name: string
shortName: string; shortName: string
industryType: string; industryType: string
propagate1: string; propagate1: string
propagate2: string; propagate2: string
image: string; image: string
video: string; video: string
type: string; type: string
appName: string; appName: string
} }
export const jobServicesApi = { export const jobServicesApi = {
listAllAppType: (): Promise<Response<Array<AppType>>> => { listAllAppType: (): Promise<Response<Array<AppType>>> => {
return request("/release/work/listAllAppType"); return request('/release/work/listAllAppType')
}, },
listAllIndustry: (): Promise<Response<Array<IndustryType>>> => { listAllIndustry: (): Promise<Response<Array<IndustryType>>> => {
return request("/release/work/listAllIndustry"); return request('/release/work/listAllIndustry')
}, },
}; }
export const mallApi = { export const mallApi = {
listAllBrand: (): Promise<Response<Array<FilterOptionResp>>> => { listAllBrand: (): Promise<Response<Array<FilterOptionResp>>> => {
return request("/pms/webDevice/brand"); return request('/pms/webDevice/brand')
}, },
listAllCategory: (): Promise<Response<Array<FilterOptionResp>>> => { listAllCategory: (): Promise<Response<Array<FilterOptionResp>>> => {
return request("/pms/webProductMall/category"); return request('/pms/webProductMall/category')
}, },
listAllParts: (): Promise<Response<Array<FilterOptionResp>>> => { listAllParts: (): Promise<Response<Array<FilterOptionResp>>> => {
return request("/pms/webProductMall/parts"); return request('/pms/webProductMall/parts')
}, },
listAllModel: (): Promise<Response<Array<FilterOptionResp>>> => { listAllModel: (): Promise<Response<Array<FilterOptionResp>>> => {
return request("/pms/webDevice/model"); return request('/pms/webDevice/model')
}, },
listAllQuality: (): Promise<Response<Array<FilterOptionResp>>> => { listAllQuality: (): Promise<Response<Array<FilterOptionResp>>> => {
return request("/pms/webProductMall/quality"); return request('/pms/webProductMall/quality')
}, },
}; }
export interface SkillsType { export interface SkillsType {
name: string; name: string
type: string; type: string
id: number; id: number
skillsName: string; skillsName: string
licenseType:string licenseType: string
} }
export const flightSkillsApi = { export const flightSkillsApi = {
IndustryFlightSkills: (): Promise<Response<Array<SkillsType>>> => { IndustryFlightSkills: (): Promise<Response<Array<SkillsType>>> => {
return request("/release/curriculum/getIndustryFlightSkills"); return request('/release/curriculum/getIndustryFlightSkills')
}, },
InDronePilotLicense: (): Promise<Response<Array<SkillsType>>> => { InDronePilotLicense: (): Promise<Response<Array<SkillsType>>> => {
return request("/release/curriculum/getDronePilotLicense"); return request('/release/curriculum/getDronePilotLicense')
}, },
}; }
export interface NewsPageType { export interface NewsPageType {
id: number; id: number
newsTitle: string; newsTitle: string
newsAuthor: string; newsAuthor: string
userAccountId: number; userAccountId: number
surfaceImg: string; surfaceImg: string
newsContents: string; newsContents: string
createTime: string; createTime: string
updateTime: string | null; updateTime: string | null
} }
export interface NewsTenderType { export interface NewsTenderType {
id: number; id: number
tenderNewsId: number; tenderNewsId: number
tenderInfoNo: string; tenderInfoNo: string
tenderContent: string; tenderContent: string
tenderPrice: number; tenderPrice: number
createTime: string; createTime: string
apply: number; apply: number
} }
export interface ListPageNewsInfoResp { export interface ListPageNewsInfoResp {
pageNo: number; pageNo: number
pageSize: number; pageSize: number
list: Array<NewsPageType>; list: Array<NewsPageType>
totalCount: number; totalCount: number
totalPage: number; totalPage: number
} }
export interface ListTenderNewsInfoResp { export interface ListTenderNewsInfoResp {
pageNo: number; pageNo: number
pageSize: number; pageSize: number
list: Array<NewsTenderType>; list: Array<NewsTenderType>
totalCount: number; totalCount: number
totalPage: number; totalPage: number
} }
interface ListPageNewsInfoParams { interface ListPageNewsInfoParams {
pageNo: number; pageNo: number
pageSize: number; pageSize: number
cityCode?: number; cityCode?: number
date?: string; date?: string
districtCode?: number; districtCode?: number
provinceCode?: number; provinceCode?: number
} }
interface ListTenderNewsInfoParams { interface ListTenderNewsInfoParams {
pageNo: number; pageNo: number
pageSize: number; pageSize: number
cityCode?: number; cityCode?: number
date?: string; date?: string
districtCode?: number; districtCode?: number
provinceCode?: number; provinceCode?: number
} }
export interface TenderApplyType{ export interface TenderApplyType {
tenderInfoId: number, tenderInfoId: number
tenderNewsId: number, tenderNewsId: number
userAccountId: number userAccountId: number
} }
...@@ -185,16 +163,33 @@ export const listNewsApi = { ...@@ -185,16 +163,33 @@ export const listNewsApi = {
listNewsPage: ( listNewsPage: (
params: ListPageNewsInfoParams params: ListPageNewsInfoParams
): Promise<Response<ListPageNewsInfoResp>> => { ): Promise<Response<ListPageNewsInfoResp>> => {
return request("/release/industry-news/listNewsPage", "post", params); return request('/release/industry-news/listNewsPage', 'post', params)
}, },
//招标列表 //招标列表
listNewTenderInfo: ( listNewTenderInfo: (
params: ListTenderNewsInfoParams params: ListTenderNewsInfoParams
): Promise<Response<ListTenderNewsInfoResp>> => { ): Promise<Response<ListTenderNewsInfoResp>> => {
return request("/release/tender/listNewTenderInfo", "post", params); return request('/release/tender/listNewTenderInfo', 'post', params)
}, },
//web-招标-合作申请提交 //web-招标-合作申请提交
tenderApply: (params: TenderApplyType): Promise<Response<number>> => { tenderApply: (params: TenderApplyType): Promise<Response<number>> => {
return request('/release/tender/apply', 'post', params) return request('/release/tender/apply', 'post', params)
} },
}
export interface HomeCategoriesType {
type: 1 | 2 | 3 | 4
}
export interface ResHomeCategoriesType {
id: number
categoryName: string
}
export default {
//新闻列表
HomeCategories: (
params: HomeCategoriesType
): Promise<Response<ResHomeCategoriesType>> => {
return request('/pms/product/mall/getPageHomeCategories', 'get', params)
},
} }
import React, { useEffect, useState , useRef } from "react"; import React, { useEffect, useState, useRef } from 'react'
import { Box } from "./styled"; import { Box } from './styled'
import { Pagination } from "antd"; import { Pagination } from 'antd'
import Layout from "~/components/layout"; import Layout from '~/components/layout'
import ContentBox from "~/components/contentBox"; import ContentBox from '~/components/contentBox'
import { useRouter } from "next/router"; import { useRouter } from 'next/router'
import Filter, { FilterResult, AdapterResult } from "~/components/filter"; import Filter, { FilterResult, AdapterResult } from '~/components/filter'
import api, { Job } from "./api"; import api, { Job } from './api'
import Image from "next/image"; import Image from 'next/image'
// 此函数在构建时被调用 // 此函数在构建时被调用
export async function getServerSideProps() { export async function getServerSideProps() {
return { return {
props: {}, props: {},
}; }
} }
interface ImageListType {} interface ImageListType {}
export default function JobServices() { export default function JobServices() {
const router = useRouter(); const router = useRouter()
const filter = useRef<any>()
const [list, setList] = useState([ const [list, setList] = useState([
"https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/540X844-2(1).jpg", 'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/540X844-2(1).jpg',
// "https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/665512fd-12e6-49a9-93c1-f9dcd0e82083.jpg", // "https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/665512fd-12e6-49a9-93c1-f9dcd0e82083.jpg",
]); ])
const [productList, setProductList] = useState( const [productList, setProductList] = useState(
Array<{ element: JSX.Element }> Array<{ element: JSX.Element }>
); )
const [rightDomList, setRightDomList] = useState( const [rightDomList, setRightDomList] = useState(
Array<{ element: JSX.Element }> Array<{ element: JSX.Element }>
); )
const leftDom = (item: Job) => { const leftDom = (item: Job) => {
return ( return (
<div <div
...@@ -43,7 +42,7 @@ export default function JobServices() { ...@@ -43,7 +42,7 @@ export default function JobServices() {
{/* <div className="com">{item.teamName}</div> */} {/* <div className="com">{item.teamName}</div> */}
</div> </div>
<div className="value-right"> <div className="value-right">
<span className="money">¥{item.price}</span>{" "} <span className="money">¥{item.price}</span>{' '}
<span className="unit">/平</span> <span className="unit">/平</span>
</div> </div>
</div> </div>
...@@ -56,49 +55,46 @@ export default function JobServices() { ...@@ -56,49 +55,46 @@ export default function JobServices() {
<div className="com">{item.teamName}</div> <div className="com">{item.teamName}</div>
</div> </div>
</div> </div>
); )
}; }
const rightDom = (item: string) => { const rightDom = (item: string) => {
return ( return (
<div className="right-box-item advertisement" key={item}> <div className="right-box-item advertisement" key={item}>
<Image src={item} alt="error" width={260} height={420} /> <Image src={item} alt="error" width={260} height={420} />
</div> </div>
); )
}; }
const [filterResult, setFilterResult] = useState<AdapterResult>({}); //筛选结果 const [filterResult, setFilterResult] = useState<AdapterResult>({}) //筛选结果
const [pageParams, setPageParams] = useState({ const [pageParams, setPageParams] = useState({
pageNo: 1, pageNo: 1,
pageSize: 14, pageSize: 14,
}); //分页器对象 }) //分页器对象
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 onPageChange = (page: number, pageSize: number) => { const onPageChange = (page: number, pageSize: number) => {
setPageParams({ setPageParams({
...pageParams, ...pageParams,
pageNo: page, pageNo: page,
}); })
}; }
useEffect(() => { useEffect(() => {
//中断前一次列表请求 //中断前一次列表请求
abort?.abort(); abort?.abort()
setAbort(new AbortController()); setAbort(new AbortController())
}, [filterResult, pageParams]); }, [filterResult, pageParams])
//端口列表请求 //端口列表请求
useEffect(() => { useEffect(() => {
let queryVal = JSON.parse(JSON.stringify(router.query)); let queryVal = JSON.parse(JSON.stringify(router.query))
const idArr = filter.current.idArr
let rs let rs
for (const key in queryVal) { if (Object.keys(queryVal).length) {
if (idArr.includes(key)) { rs = { categoryId: [Number(queryVal['categoryId'])] }
rs = {[key]:router.query[key]}
}
} }
api api
.listPageJobServicesInfo( .listPageJobServicesInfo(
...@@ -114,49 +110,46 @@ export default function JobServices() { ...@@ -114,49 +110,46 @@ export default function JobServices() {
.then((res) => { .then((res) => {
setProductList( setProductList(
res.result?.list?.map((item) => { res.result?.list?.map((item) => {
return { element: leftDom(item) }; return { element: leftDom(item) }
}) || [] }) || []
); )
setCount(res.result?.totalCount || 0); setCount(res.result?.totalCount || 0)
}); })
}, [abort]); }, [abort])
const onFilterChange = ( const onFilterChange = (
filterResult: FilterResult, filterResult: FilterResult,
adapterFilterResult: AdapterResult adapterFilterResult: AdapterResult
) => { ) => {
console.log("filterResult", filterResult, adapterFilterResult); console.log('filterResult', filterResult, adapterFilterResult)
setFilterResult(adapterFilterResult); adapterFilterResult.categoryId = adapterFilterResult.categoryId?.map(
}; (item) => item.id
)
setFilterResult(adapterFilterResult)
}
useEffect(() => { useEffect(() => {
setRightDomList( setRightDomList(
list.map((item) => { list.map((item) => {
return { element: rightDom(item) }; return { element: rightDom(item) }
}) })
); )
}, []); }, [])
useEffect(() => { useEffect(() => {
let queryVal = JSON.parse(JSON.stringify(router.query)); let queryVal = JSON.parse(JSON.stringify(router.query))
if (router.query) { if (Object.keys(router.query).length) {
const idArr = filter.current.idArr setFilterResult({ categoryId: [Number(queryVal['categoryId'])] })
for (const key in queryVal) {
if (idArr.includes(key)) {
setFilterResult({ [key]:router.query[key] });
}
}
} }
}, [router]); }, [router])
return ( return (
<Layout> <Layout>
<Box> <Box>
<Filter <Filter
types={["地域", "行业", "应用"]} types={['地域', '行业', '应用']}
showResultItem showResultItem
onChange={onFilterChange} onChange={onFilterChange}
ref={filter}
></Filter> ></Filter>
<div style={{ marginTop: 10 }}> <div style={{ marginTop: 10 }}>
<ContentBox <ContentBox
...@@ -179,12 +172,12 @@ export default function JobServices() { ...@@ -179,12 +172,12 @@ export default function JobServices() {
}} }}
rightRenderDom={{ columns: rightDomList }} rightRenderDom={{ columns: rightDomList }}
leftcontentstyle={{ leftcontentstyle={{
width: "924px", width: '924px',
margin: { top: 0, right: "10px", bottom: "10px", left: 0 }, margin: { top: 0, right: '10px', bottom: '10px', left: 0 },
}} }}
/> />
</div> </div>
</Box> </Box>
</Layout> </Layout>
); )
} }
import request, { Response } from '~/api/request'; import request, { Response } from '~/api/request'
export interface DeviceListParams { export interface DeviceListParams {
categoryId?: any[]; categoryId?: any[];
...@@ -24,8 +24,8 @@ export interface DeviceListResp { ...@@ -24,8 +24,8 @@ export interface DeviceListResp {
} }
export interface Ad { export interface Ad {
id: number; id: number
imageUrl: string; imageUrl: string
} }
export default { export default {
...@@ -36,5 +36,5 @@ export default { ...@@ -36,5 +36,5 @@ export default {
//产品商城广告位 //产品商城广告位
ad: (): Promise<Response<Array<Ad>>> => { ad: (): Promise<Response<Array<Ad>>> => {
return request('/pms/webProductMall/ad') return request('/pms/webProductMall/ad')
} },
} }
\ No newline at end of file
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from 'react'
import { Empty, Pagination, Image, Spin } from "antd"; import { Empty, Pagination, Image, Spin } from 'antd'
import Layout from "~/components/layout"; import Layout from '~/components/layout'
import styles from "./index.module.scss"; import styles from './index.module.scss'
import { useRouter } from "next/router"; import { useRouter } from 'next/router'
import Filter, { AdapterResult, FilterResult } from "~/components/filter"; import Filter, { AdapterResult, FilterResult } from '~/components/filter'
import api, { Ad, Goods } from "./api"; import api, { Ad, Goods } from './api'
import errImg from "~/assets/errImg"; import errImg from '~/assets/errImg'
// 此函数在构建时被调用 // 此函数在构建时被调用
export async function getServerSideProps() { export async function getServerSideProps() {
return { return {
props: {}, props: {},
}; }
} }
type Props = {}; type Props = {}
export default function Mall(props: Props) { export default function Mall(props: Props) {
const router = useRouter(); const router = useRouter()
const [productList, setProductList] = useState<Array<Goods>>([]); //商品列表 const [productList, setProductList] = useState<Array<Goods>>([]) //商品列表
const [filterResult, setFilterResult] = useState<AdapterResult>({}); //筛选结果 const [filterResult, setFilterResult] = useState<AdapterResult>({}) //筛选结果
const [pageParams, setPageParams] = useState({ const [pageParams, setPageParams] = useState<{
pageNo: number
pageSize: number
}>({
pageNo: 1, pageNo: 1,
pageSize: 15, pageSize: 15,
}); //分页器对象 }) //分页器对象
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 [adList, setAdList] = useState<Array<Ad>>([]); //广告列表 const [adList, setAdList] = useState<Array<Ad>>([]) //广告列表
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false)
useEffect(() => { useEffect(() => {
//中断前一次列表请求 //中断前一次列表请求
abort?.abort(); abort?.abort()
setAbort(new AbortController()); setAbort(new AbortController())
}, [filterResult, pageParams]); }, [filterResult, pageParams])
//商品列表请求 //商品列表请求
useEffect(() => { useEffect(() => {
if (!abort) { if (!abort) {
return; return
} }
setLoading(true); setLoading(true)
api api
.deviceList( .deviceList(
{ {
provinceId: filterResult.districtId,
type: 0, type: 0,
...pageParams, ...pageParams,
...filterResult,
}, },
{ {
signal: abort?.signal, signal: abort?.signal,
...@@ -57,34 +60,37 @@ export default function Mall(props: Props) { ...@@ -57,34 +60,37 @@ export default function Mall(props: Props) {
setCount(res.result?.totalCount || 0); setCount(res.result?.totalCount || 0);
setLoading(false); setLoading(false);
}); });
}, [abort]); }, [abort])
//广告请求 //广告请求
useEffect(() => { useEffect(() => {
api.ad().then((res) => { api.ad().then((res) => {
setAdList(res.result || []); setAdList(res.result || [])
}); })
}, []); }, [])
const onFilterChange = ( const onFilterChange = (
filterResult: FilterResult, filterResult: FilterResult,
adapterFilterResult: AdapterResult adapterFilterResult: AdapterResult
) => { ) => {
console.log("filterResult", filterResult, adapterFilterResult); console.log('filterResult', filterResult, adapterFilterResult)
setFilterResult(adapterFilterResult); adapterFilterResult.categoryId = adapterFilterResult.categoryId?.map(
}; (item) => item.id
)
setFilterResult(adapterFilterResult)
}
const onPageChange = (page: number, pageSize: number) => { const onPageChange = (page: number, pageSize: number) => {
setPageParams({ setPageParams({
...pageParams, ...pageParams,
pageNo: page, pageNo: page,
}); })
}; }
return ( return (
<Layout> <Layout>
<div className="page" style={{ paddingTop: "18px" }}> <div className="page" style={{ paddingTop: '18px' }}>
<Filter <Filter
types={["类目", "地域", "品牌", "部件" /* "型号", "成色" */]} types={['类目', '地域', '品牌', '部件' /* "型号", "成色" */]}
showResultItem showResultItem
onChange={onFilterChange} onChange={onFilterChange}
></Filter> ></Filter>
...@@ -157,12 +163,12 @@ export default function Mall(props: Props) { ...@@ -157,12 +163,12 @@ export default function Mall(props: Props) {
preview={false} preview={false}
fallback={errImg} fallback={errImg}
></Image> ></Image>
); )
})} })}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</Layout> </Layout>
); )
} }
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论