Skip to content

W
web-ci-test
提交 881406e1 作者: 曹云
操作

改-筛选组件filter功能 

改-作业服务,设备租赁，产品商城-列表跳转自动选中,筛选功能修改
上级 17a1dfdd
正在显示 包含 727 行增加 和 473 行删除
components/filter/api/index.ts
import request, { Response } from "~/api/request";
import request, { Response } from '~/api/request'
export interface FilterOptionResp {
id: number;
name?: string;
appName?: string;
id: number
name?: string
appName?: string
}
export interface RegionResp {
childInfo: RegionResp[] | null;
id: number;
level: number;
name: string;
pid: number;
childInfo: RegionResp[] | null
id: number
level: number
name: string
pid: number
}
export interface InfoList {
id: number
directoryId: number
name: string
icon: string
}
export interface TypesResp {
directoryId: number
name: string
categoriesInfoListDTO: InfoList[]
}
export default {
category: (): Promise<Response<Array<FilterOptionResp>>> => {
return request("/pms/webProductMall/category");
return request('/pms/webProductMall/category')
},
categoryId: (): Promise<Response<Array<FilterOptionResp>>> => {
return request("/pms/webDevice/category");
return request('/pms/webDevice/category')
},
brand: (): Promise<Response<Array<FilterOptionResp>>> => {
return request("/pms/webDevice/brand");
return request('/pms/webDevice/brand')
},
model: (): Promise<Response<Array<FilterOptionResp>>> => {
return request("/pms/webDevice/model");
return request('/pms/webDevice/model')
},
part: (): Promise<Response<Array<FilterOptionResp>>> => {
return request("/pms/webProductMall/parts");
return request('/pms/webProductMall/parts')
},
quality: (): Promise<Response<Array<FilterOptionResp>>> => {
return request("/pms/webProductMall/quality");
return request('/pms/webProductMall/quality')
},
region: (): Promise<Response<Array<RegionResp>>> => {
return request("/pms/webDevice/getSecondDistrictInfo");
return request('/pms/webDevice/getSecondDistrictInfo')
},
industry: (): Promise<Response<Array<RegionResp>>> => {
return request("/release/work/listAllIndustry");
return request('/release/work/listAllIndustry')
},
appType: (): Promise<Response<Array<RegionResp>>> => {
return request("/release/work/listAllAppType");
return request('/release/work/listAllAppType')
},
deviceBrand: (): Promise<Response<Array<RegionResp>>> => {
return request("/pms/webDevice/deviceBrand");
return request('/pms/webDevice/deviceBrand')
},
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)
},
}
components/filter/compoents/regionItem/index.tsx
import { Space, Select } from "antd";
import { useEffect, useState } from "react";
import styles from "../../index.module.scss";
import api, { RegionResp } from "../../api";
import { Space, Select } from 'antd'
import { useEffect, useState } from 'react'
import styles from '../../index.module.scss'
import api, { RegionResp } from '../../api'
type Props = {
onChange: (item: RegionResp) => void;
};
onChange: (item: RegionResp) => void
}
export default function RegionItem(props: Props) {
const [provinceList, setProvinceList] = useState<RegionResp[]>([]);
const [cityList, setCityList] = useState<RegionResp[]>([]);
const [provinceList, setProvinceList] = useState<RegionResp[]>([])
const [cityList, setCityList] = useState<RegionResp[]>([])
const [selectCity, setSelectCity] = useState<number>()
useEffect(() => {
api.region().then((res) => {
setProvinceList(res?.result || []);
});
}, []);
setProvinceList(res?.result || [])
})
}, [])
const onProvinceChange = (value: number, item: any) => {
console.log("省", value, item);
setCityList(item.childInfo || []);
setSelectCity(undefined);
props.onChange(item);
};
console.log('省', value, item)
setCityList(item.childInfo || [])
setSelectCity(undefined)
props.onChange(item)
}
const onCityChange = (value: number, item: any) => {
console.log("市", value);
setSelectCity(value);
props.onChange(item);
};
console.log('市', value)
setSelectCity(value)
props.onChange(item)
}
return (
<div className={styles.filterItem}>
<div className={styles.filterItemTitle}>地域：</div>
......@@ -44,7 +44,7 @@ export default function RegionItem(props: Props) {
...item,
value: item.id,
label: item.name,
};
}
})}
/>
{/* <Select
......@@ -64,5 +64,5 @@ export default function RegionItem(props: Props) {
</Space>
</div>
</div>
);
)
}
components/filter/compoents/resultItem/index.tsx
import { Space, Tag } from "antd";
import { FilterResult } from "../..";
import styles from "../../index.module.scss";
import { Space, Tag } from 'antd'
import { FilterResult } from '../..'
import styles from '../../index.module.scss'
import { InfoList } from '../../api'
type Props = {
data: FilterResult;
onDel: (key: string) => void;
};
export default function ResultItem({data, onDel}: Props) {
data: FilterResult
onDel: (key: string | number) => void
}
export default function ResultItem({ data, onDel }: Props) {
return (
<div className={styles.filterItem}>
<div className={styles.filterItemTitle}>已选：</div>
<div className={styles.filterItemMain}>
<Space size={10}>
{data &&
Object.keys(data).map((key) => {
//@ts-ignore
let item = data[key];
{data.provinceId && (
// Object.keys(data).map((key) => {
// //@ts-ignore
// 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 (
<Tag
closable
onClose={(e: React.MouseEvent<HTMLElement, MouseEvent>) => {
onDel(key);
onDel(item.id)
}}
key={key}
key={item.name}
>
{item?.name}
</Tag>
);
)
})}
</Space>
</div>
</div>
);
)
}
components/filter/compoents/typeInfo/index.tsx 0 → 100644
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>
)
}
pages/equipmentLeasing/detail/[id].page.tsx
......@@ -52,12 +52,10 @@ export default function EquipmentLeasingDetail() {
api
.listDetailDeviceInfo({
goodsId: id,
type: 1,
})
.then((res) => {
setDetail(res.result || null)
console.log(
res.result?.goodsSpec.map((item) => item.productSpecList).flat()
)
const wareList = res.result?.goodsSpec.map(
(item) => item.productSpecList
)
......@@ -70,6 +68,7 @@ export default function EquipmentLeasingDetail() {
}, [id])
//租赁弹框
const [visible, setVisible] = useState(false)
const [isModalOpen, setIsModalOpen] = useState(false)
const [isModalDateOpen, setIsModalDateOpen] = useState(false)
const [loading, setLoading] = useState(false)
......@@ -77,7 +76,7 @@ export default function EquipmentLeasingDetail() {
const [form] = Form.useForm()
const [formDate] = Form.useForm()
const tagsData = [
{ label: '3-7天', disable: false },
{ label: '1-7天', disable: false },
{ label: '8-15天', disable: false },
{ label: '16-30天', disable: false },
{ label: '30天以上', disable: false },
......@@ -92,7 +91,7 @@ export default function EquipmentLeasingDetail() {
if (wareSkuList?.length) {
setSelectedTags(wareSkuList[0].id)
form.setFieldValue('id', wareSkuList[0].id)
setSelectedTagsData('3-7天')
setSelectedTagsData('1-7天')
form.setFieldValue('date', '3-7天')
}
} else {
......@@ -152,7 +151,6 @@ export default function EquipmentLeasingDetail() {
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)
}
......@@ -167,7 +165,6 @@ export default function EquipmentLeasingDetail() {
const nextSelectedTags = checked
? tag
: tagsData.filter((t) => t.label !== tag)[0].label
console.log('You are interested in: ', nextSelectedTags)
setSelectedTagsData(nextSelectedTags)
form.setFieldValue('date', tag)
}
......@@ -274,6 +271,7 @@ export default function EquipmentLeasingDetail() {
onOk={handleOk}
onCancel={handleCancel}
getContainer={false}
maskClosable={false}
footer={[
<Button
style={{ width: '100%', height: 44 }}
......@@ -287,11 +285,29 @@ export default function EquipmentLeasingDetail() {
]}
>
<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="top">
<span className="tag">¥</span>
<span className="money">{detail?.price}</span>
<span className="money">{detail?.price || 0}</span>
<span className="unit">/天</span>
</div>
<div className="bottom">渠道免押金</div>
......@@ -301,7 +317,7 @@ export default function EquipmentLeasingDetail() {
form={form}
layout="vertical"
name="application"
initialValues={{ modifier: 'public' }}
initialValues={{ num: 1 }}
className="form-data"
>
<Form.Item
......@@ -349,16 +365,10 @@ export default function EquipmentLeasingDetail() {
<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}
/>
<InputNumber min={1} max={10} onChange={onChangeNum} />
</Form.Item>
</div>
</div>
......@@ -371,6 +381,7 @@ export default function EquipmentLeasingDetail() {
onOk={handleOkDate}
onCancel={handleCancel}
getContainer={false}
maskClosable={false}
width={420}
footer={[
<Button
......@@ -412,8 +423,8 @@ export default function EquipmentLeasingDetail() {
<div className="bottom-item">
<div className="label">租金合计</div>
<div className="price">
<div className="left">¥700</div>
<div className="right">(日均175)</div>
<div className="left">¥{detail?.price! * days! || 0}</div>
{/* <div className="right">(日均175)</div> */}
</div>
</div>
</Modal>
......@@ -424,6 +435,9 @@ export default function EquipmentLeasingDetail() {
shopDetail={shopDetail}
days={days}
detailData={detail}
wareSkuList={wareSkuList?.filter(
(item) => item.id === form.getFieldValue('id')
)}
/>
)}
</Layout>
......
pages/equipmentLeasing/detail/api/index.tsx
......@@ -2,6 +2,11 @@ import request, { Response } from '~/api/request'
export interface GetWebDeviceDetailParams {
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 {
......@@ -9,7 +14,20 @@ export interface WareImgsType {
imgUrl: string
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 {
id: number
images: {
......@@ -85,4 +103,10 @@ export default {
): Promise<Response<number>> => {
return request('/pms/appDevice/update', 'post', params)
},
//web-设备租赁-详情-获取设备商品规格价格详情
GoodsPriceDetail: (
params: GetLeaseGoodsParams
): Promise<Response<GetLeaseGoodsResult>> => {
return request('/pms/product/mall/getLeaseGoodsPriceDetail', 'get', params)
},
}
pages/equipmentLeasing/detail/components/orderForGoods/api/index.tsx
......@@ -40,9 +40,10 @@ export interface UserAddress {
type: number
}
export interface GetWebDeviceWareSkuById {
export interface GetOrderForGoods {
balance: number
nickName: string
orderNo: string
}
export default {
......@@ -53,7 +54,13 @@ export default {
//web-设备租赁-下单
FeignAddLease: (
params: GetWebDeviceDetailParams
): Promise<Response<GetWebDeviceWareSkuById[]>> => {
return request('/pms/appDevice/listWareSkuById', 'post', params)
): Promise<Response<GetOrderForGoods>> => {
return request('/oms/RentalOrders/feignAddLease', 'post', params)
},
//web-设备租赁-订单支付
OrderPayment: (params: {
orderNo: string
}): Promise<Response<GetOrderForGoods>> => {
return request(`/payment/repocash/orderPayment`, 'get', params)
},
}
pages/equipmentLeasing/detail/components/orderForGoods/index.tsx
import React, { useEffect, useState } from 'react'
import React, { useContext, 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 { Button, Radio, Space, Input, message, Modal, Image } from 'antd'
import api, { UserAddress, GetOrderForGoods } from './api'
import moment from 'moment'
import { ShopDetail } from '../../[id].page'
import { GetWebDeviceDetailResult } from '../../api'
import { GetWebDeviceDetailResult, GetWebDeviceWareSkuById } from '../../api'
import { UserContext } from '~/lib/userProvider'
const { TextArea } = Input
interface PropsBox {
......@@ -13,14 +14,17 @@ interface PropsBox {
detailData?: GetWebDeviceDetailResult | null
days?: number
shopDetail?: ShopDetail
wareSkuList?: GetWebDeviceWareSkuById[]
}
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 [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)
......@@ -29,20 +33,10 @@ export default function OrderForGoods(props: PropsBox) {
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) {
if (detailData && shopDetail && list && wareSkuList) {
const pushList = {
actualPay: shopDetail.num * detailData.price!,
// actualPay: shopDetail.num * detailData.price!,
actualPay: 100,
deposit: 0,
endDate: moment(new Date(shopDetail.dateDetail[1])).format(
'YYYY-MM-DD'
......@@ -54,12 +48,14 @@ export default function OrderForGoods(props: PropsBox) {
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,
// rentPrice: shopDetail.num * detailData.price!,
rentPrice: 100,
returnDate: moment(
new Date(shopDetail.dateDetail[1]).getTime() + 864e5
).format('YYYY-MM-DD'),
// shouldPay: shopDetail.num * detailData.price!,
shouldPay: 100,
specsId: wareSkuList[0].productSpec,
startDate: moment(new Date(shopDetail.dateDetail[0]!)).format(
'YYYY-MM-DD'
),
......@@ -73,10 +69,15 @@ export default function OrderForGoods(props: PropsBox) {
}
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(() => {
......@@ -100,6 +101,39 @@ export default function OrderForGoods(props: PropsBox) {
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 (
<OrderForGoodsBox>
<div className="address">
......@@ -162,21 +196,33 @@ export default function OrderForGoods(props: PropsBox) {
</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 className="image">
<Image
preview={{ visible: false }}
src={wareSkuList![0].specImage}
onClick={() => setVisible(true)}
/>
<div style={{ display: 'none' }}>
<Image.PreviewGroup
preview={{
visible,
onVisibleChange: (vis) => setVisible(vis),
}}
>
<Image src={wareSkuList![0].specImage} />
</Image.PreviewGroup>
</div>
</div>
<div className="right">
<div className="top">{wareSkuList![0].specName}</div>
<div className="bottom">{wareSkuList![0].versionDesc}</div>
</div>
</div>
<div className="body-item" style={{ width: 130 }}>
800.00/天
{detailData?.price || 0}
</div>
<div className="body-item" style={{ width: 130 }}>
1
{shopDetail?.num || 1}
</div>
<div className="body-item lease-term" style={{ width: 300 }}>
{moment(new Date(shopDetail?.dateDetail[0]!)).format(
......@@ -188,7 +234,7 @@ export default function OrderForGoods(props: PropsBox) {
)}
</div>
<div className="body-item total-price" style={{ width: 135 }}>
800.00
{detailData?.price! * shopDetail?.num! || 0}
</div>
</div>
</div>
......@@ -210,14 +256,14 @@ export default function OrderForGoods(props: PropsBox) {
<div className="label">运费：</div>
<div className="value">邮寄到付,由客户自己承担</div>
</div>
<div className="price">200.00</div>
<div className="price">0.00</div>
</div>
<div className="bottom">
<div className="font">
<div className="label">押金：</div>
<div className="value">渠道商可免押金</div>
</div>
<div className="price">1000.00</div>
<div className="price">0.00</div>
</div>
</div>
</div>
......@@ -230,9 +276,9 @@ export default function OrderForGoods(props: PropsBox) {
</div>
<div className="bottom">
<div className="value">寄送至</div>
<div className="value-content">
广东省深圳市南山区国际创谷6栋国际创谷6
</div>
{list ? (
<div className="value-content">{list![value].takeAddress}</div>
) : null}
</div>
</div>
<div className="detail-sumbit">
......@@ -242,6 +288,31 @@ export default function OrderForGoods(props: PropsBox) {
</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>
)
}
pages/equipmentLeasing/detail/components/orderForGoods/styled.tsx
......@@ -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;
}
}
`
pages/equipmentLeasing/detail/styled.tsx
......@@ -234,12 +234,6 @@ export const Box = styled.div`
color: #121212;
margin-right: 5px;
}
.inventory {
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #acacac;
}
}
}
}
......
pages/equipmentLeasing/index.page.tsx
......@@ -19,7 +19,6 @@ type Props = {}
export default function EquipmentLeasing(props: Props) {
const router = useRouter()
const filter = useRef<any>()
const [productList, setProductList] = useState(
Array<{ element: JSX.Element }>
)
......@@ -85,12 +84,9 @@ export default function EquipmentLeasing(props: Props) {
//端口列表请求
useEffect(() => {
let queryVal = JSON.parse(JSON.stringify(router.query))
const idArr = filter.current.idArr
let rs
for (const key in queryVal) {
if (idArr.includes(key)) {
rs = { [key]: router.query[key] }
}
if (Object.keys(queryVal).length) {
rs = { categoryId: [Number(queryVal['categoryId'])] }
}
api
.listPageDeviceInfo(
......@@ -118,6 +114,9 @@ export default function EquipmentLeasing(props: Props) {
adapterFilterResult: AdapterResult
) => {
console.log('filterResult', filterResult, adapterFilterResult)
adapterFilterResult.categoryId = adapterFilterResult.categoryId?.map(
(item) => item.id
)
setFilterResult(adapterFilterResult)
}
......@@ -133,13 +132,8 @@ export default function EquipmentLeasing(props: Props) {
useEffect(() => {
let queryVal = JSON.parse(JSON.stringify(router.query))
if (router.query) {
const idArr = filter.current.idArr
for (const key in queryVal) {
if (idArr.includes(key)) {
setFilterResult({ [key]: router.query[key] })
}
}
if (Object.keys(router.query).length) {
setFilterResult({ categoryId: [Number(queryVal['categoryId'])] })
}
}, [router])
......@@ -150,7 +144,6 @@ export default function EquipmentLeasing(props: Props) {
types={['地域', '设备品牌', '设备型号']}
showResultItem
onChange={onFilterChange}
ref={filter}
></Filter>
<div style={{ paddingTop: 13 }}>
<ContentBox
......
pages/flyingHandService/api/index.tsx
import request, { Response } from '~/api/request';
import request, { Response } from '~/api/request'
import { TypesResp } from '~/components/filter/api'
export interface ListPageFlyingInfoParams {
pageNo: number,
pageSize: number,
flightSkillsId?:number,
licenseId?:number,
regionId?:number
pageNo: number
pageSize: number
flightSkillsId?: number
licenseId?: number
regionId?: number
}
export interface Flying {
id: number,
price: number,
supplierName: string,
curriculumName: string,
free: 0 | 1,
curriculumDesc: string,
id: number
price: number
supplierName: string
curriculumName: string
free: 0 | 1
curriculumDesc: string
videoUrl: string
}
export interface ListPageFlyingInfoResp {
pageNo: 1,
pageSize: 10,
list: Array<Flying>,
totalCount: 0,
pageNo: 1
pageSize: 10
list: Array<Flying>
totalCount: 0
totalPage: 0
}
export interface SkillsType {
type: string;
id: number,
skillsName: string,
label:string | number,
value:string | number
type: string
id: number
skillsName: string
label: string | number
value: string | number
}
export interface RegionResp {
childInfo: RegionResp[] | null,
id: number,
level: number,
name: string,
childInfo: RegionResp[] | null
id: number
level: number
name: string
pid: number
}
export interface PilotRegistrationParams {
city?: number,
drivingLicense?: number,
industryAppAuth?: Array<number>,
province?: number,
remark?: string,
telephone?: string,
uavLicenseLevelOne?: number,
city?: number
drivingLicense?: number
industryAppAuth?: Array<number>
province?: number
remark?: string
telephone?: string
uavLicenseLevelOne?: number
uavLicenseLevelTwo?: number
}
export default {
//web-作业服务-分页
listPageJobServicesInfo: (params: ListPageFlyingInfoParams): Promise<Response<ListPageFlyingInfoResp>> => {
return request('/release/curriculum/queryCurriculumInfoList', 'post', params)
//web-飞手培训-分页
listPageJobServicesInfo: (
params: ListPageFlyingInfoParams
): Promise<Response<ListPageFlyingInfoResp>> => {
return request(
'/release/curriculum/queryCurriculumInfoList',
'post',
params
)
},
region: (): Promise<Response<Array<RegionResp>>> => {
return request('/pms/webDevice/getSecondDistrictInfo');
return request('/pms/webDevice/getSecondDistrictInfo')
},
PilotLicense: (): Promise<Response<Array<RegionResp>>> => {
return request('/release/curriculum/getDronePilotLicense');
return request('/release/curriculum/getDronePilotLicense')
},
IndustryFlightSkills: (): Promise<Response<Array<SkillsType>>> => {
return request('/release/curriculum/getIndustryFlightSkills');
return request('/release/curriculum/getIndustryFlightSkills')
},
PilotRegistrations: (params:PilotRegistrationParams): Promise<Response<Array<SkillsType>>> => {
return request('/release/curriculum/pilotRegistration',"post",params);
PilotRegistrations: (
params: PilotRegistrationParams
): Promise<Response<Array<SkillsType>>> => {
return request('/release/curriculum/pilotRegistration', 'post', params)
},
}
\ No newline at end of file
FlightSkills: (params: { type: 3 }): Promise<Response<Array<TypesResp>>> => {
return request('/pms/classify/queryCategoryInfoByType', 'get', params)
},
}
pages/flyingHandService/index.page.tsx
......@@ -20,10 +20,10 @@ import { UserContext } from '~/lib/userProvider'
import { phoneNumber } from '~/lib/validateUtils'
import api, { Flying, RegionResp, SkillsType } from './api'
import { Box } from './styled'
import { TypesResp } from '~/components/filter/api'
interface FilterInfoParams {
regionId?: number
flightSkillsId?: number
licenseId?: number
provinceId?: number
categoryId?: any[]
}
export default function FlyingHandService() {
......@@ -45,8 +45,10 @@ export default function FlyingHandService() {
)
const [skills, setSkills] = useState(Array<RegionResp>)
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 [selectOption, setSelectOption] = useState<Array<TypesResp> | null>()
const [selectDefault, setSelectDefault] = useState<number | null>()
const leftDom = (item: Flying) => {
return (
<div
......@@ -153,36 +155,59 @@ export default function FlyingHandService() {
}
}
const onProvinceChange = (value: number) => {
const onSelectChange = (value: number, item: TypesResp) => {
clearRouter()
console.log(value)
if (value) {
setFlightDefault(value)
setSelectDefault(value)
} else {
setFlightDefault(null)
setSelectDefault(undefined)
}
setFilterParams((props) => {
if (props?.categoryId && value) {
return {
...props,
categoryId: [...props.categoryId, Number(value)],
}
}
return {
...props,
licenseId: Number(value),
categoryId: value ? [Number(value)] : undefined,
}
})
}
const onChange = (value: any) => {
const onProvinceChange = (value: number) => {
clearRouter()
if (value) {
setSkillsDefault([value])
setFlightDefault(value)
} else {
setSkillsDefault([])
setFlightDefault(undefined)
}
setFilterParams((props) => {
return {
...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) => {
clearRouter()
// setFilterParams((props) => {
......@@ -194,7 +219,7 @@ export default function FlyingHandService() {
setFilterParams((props) => {
return {
...props,
regionId: value || undefined,
provinceId: value || undefined,
}
})
}
......@@ -208,16 +233,21 @@ export default function FlyingHandService() {
api.region().then((res) => {
setSecondDistrictInfo(res.result || [])
})
api.PilotLicense().then((res) => {
setSkills(res.result || [])
})
api.IndustryFlightSkills().then((res) => {
const list = res.result?.map((item) => {
item.label = item.skillsName
item.value = item.id
return item
})
setFlightSkillsList(list || [])
// api.PilotLicense().then((res) => {
// setSkills(res.result || [])
// })
// api.IndustryFlightSkills().then((res) => {
// const list = res.result?.map((item) => {
// item.label = item.skillsName
// item.value = item.id
// return item
// })
// setFlightSkillsList(list || [])
// })
api.FlightSkills({ type: 3 }).then((res) => {
console.log(res)
setSelectOption(res.result)
})
}, [])
......@@ -324,7 +354,7 @@ export default function FlyingHandService() {
fieldNames={{ value: 'id', label: 'name' }}
allowClear
/>
<Cascader
{/* <Cascader
allowClear
placeholder="考证"
bordered={false}
......@@ -339,19 +369,21 @@ export default function FlyingHandService() {
onChange={(value) => onChange(value)}
changeOnSelect
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}
/>
/> */}
{selectOption?.map((item) => (
<Select
key={item.directoryId}
className="selectItem"
bordered={false}
popupMatchSelectWidth={false}
placeholder={item.name}
size="large"
onChange={(value) => onSelectChange(value, item)}
options={item.categoriesInfoListDTO}
fieldNames={{ value: 'id', label: 'name' }}
allowClear
/>
))}
</Space>
</div>
<Button
......
pages/home/waterfallFlowBody/api/index.ts
import request, { Response } from "~/api/request";
import request, { Response } from '~/api/request'
export interface AllType {
type?: string;
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;
categoryName: string
id: number
}
export interface FilterOptionResp {
type: string;
id: number;
name: string;
type: string
id: number
name: string
}
export interface RegionResp {
childInfo: RegionResp[] | null;
id: number;
level: number;
name: string;
pid: number;
childInfo: RegionResp[] | null
id: number
level: number
name: string
pid: number
}
export const equipmentLeasingApi = {
deviceBrand: (): Promise<Response<Array<FilterOptionResp>>> => {
return request("/pms/webDevice/deviceBrand");
return request('/pms/webDevice/deviceBrand')
},
// deviceCategory: (): Promise<Response<Array<FilterOptionResp>>> => {
// return request("/pms/webDevice/category");
// },
deviceModel: (): Promise<Response<Array<FilterOptionResp>>> => {
return request("/pms/webDevice/deviceModel");
return request('/pms/webDevice/deviceModel')
},
};
}
export interface AppType {
id: number;
name: string;
appName: string;
createTime: string;
type: string;
id: number
name: string
appName: string
createTime: string
type: string
}
export interface IndustryType {
id: number;
industryIcon: string;
name: string;
shortName: string;
industryType: string;
propagate1: string;
propagate2: string;
image: string;
video: string;
type: string;
appName: string;
id: number
industryIcon: string
name: string
shortName: string
industryType: string
propagate1: string
propagate2: string
image: string
video: string
type: string
appName: string
}
export const jobServicesApi = {
listAllAppType: (): Promise<Response<Array<AppType>>> => {
return request("/release/work/listAllAppType");
return request('/release/work/listAllAppType')
},
listAllIndustry: (): Promise<Response<Array<IndustryType>>> => {
return request("/release/work/listAllIndustry");
return request('/release/work/listAllIndustry')
},
};
}
export const mallApi = {
listAllBrand: (): Promise<Response<Array<FilterOptionResp>>> => {
return request("/pms/webDevice/brand");
return request('/pms/webDevice/brand')
},
listAllCategory: (): Promise<Response<Array<FilterOptionResp>>> => {
return request("/pms/webProductMall/category");
return request('/pms/webProductMall/category')
},
listAllParts: (): Promise<Response<Array<FilterOptionResp>>> => {
return request("/pms/webProductMall/parts");
return request('/pms/webProductMall/parts')
},
listAllModel: (): Promise<Response<Array<FilterOptionResp>>> => {
return request("/pms/webDevice/model");
return request('/pms/webDevice/model')
},
listAllQuality: (): Promise<Response<Array<FilterOptionResp>>> => {
return request("/pms/webProductMall/quality");
return request('/pms/webProductMall/quality')
},
};
}
export interface SkillsType {
name: string;
type: string;
id: number;
skillsName: string;
licenseType:string
name: string
type: string
id: number
skillsName: string
licenseType: string
}
export const flightSkillsApi = {
IndustryFlightSkills: (): Promise<Response<Array<SkillsType>>> => {
return request("/release/curriculum/getIndustryFlightSkills");
return request('/release/curriculum/getIndustryFlightSkills')
},
InDronePilotLicense: (): Promise<Response<Array<SkillsType>>> => {
return request("/release/curriculum/getDronePilotLicense");
return request('/release/curriculum/getDronePilotLicense')
},
};
}
export interface NewsPageType {
id: number;
newsTitle: string;
newsAuthor: string;
userAccountId: number;
surfaceImg: string;
newsContents: string;
createTime: string;
updateTime: string | null;
id: number
newsTitle: string
newsAuthor: string
userAccountId: number
surfaceImg: string
newsContents: string
createTime: string
updateTime: string | null
}
export interface NewsTenderType {
id: number;
tenderNewsId: number;
tenderInfoNo: string;
tenderContent: string;
tenderPrice: number;
createTime: string;
apply: number;
id: number
tenderNewsId: number
tenderInfoNo: string
tenderContent: string
tenderPrice: number
createTime: string
apply: number
}
export interface ListPageNewsInfoResp {
pageNo: number;
pageSize: number;
list: Array<NewsPageType>;
totalCount: number;
totalPage: number;
pageNo: number
pageSize: number
list: Array<NewsPageType>
totalCount: number
totalPage: number
}
export interface ListTenderNewsInfoResp {
pageNo: number;
pageSize: number;
list: Array<NewsTenderType>;
totalCount: number;
totalPage: number;
pageNo: number
pageSize: number
list: Array<NewsTenderType>
totalCount: number
totalPage: number
}
interface ListPageNewsInfoParams {
pageNo: number;
pageSize: number;
cityCode?: number;
date?: string;
districtCode?: number;
provinceCode?: number;
pageNo: number
pageSize: number
cityCode?: number
date?: string
districtCode?: number
provinceCode?: number
}
interface ListTenderNewsInfoParams {
pageNo: number;
pageSize: number;
cityCode?: number;
date?: string;
districtCode?: number;
provinceCode?: number;
pageNo: number
pageSize: number
cityCode?: number
date?: string
districtCode?: number
provinceCode?: number
}
export interface TenderApplyType{
tenderInfoId: number,
tenderNewsId: number,
export interface TenderApplyType {
tenderInfoId: number
tenderNewsId: number
userAccountId: number
}
......@@ -185,16 +163,33 @@ export const listNewsApi = {
listNewsPage: (
params: ListPageNewsInfoParams
): Promise<Response<ListPageNewsInfoResp>> => {
return request("/release/industry-news/listNewsPage", "post", params);
return request('/release/industry-news/listNewsPage', 'post', params)
},
//招标列表
listNewTenderInfo: (
params: ListTenderNewsInfoParams
): Promise<Response<ListTenderNewsInfoResp>> => {
return request("/release/tender/listNewTenderInfo", "post", params);
return request('/release/tender/listNewTenderInfo', 'post', params)
},
//web-招标-合作申请提交
tenderApply: (params: TenderApplyType): Promise<Response<number>> => {
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)
},
}
pages/jobServices/index.page.tsx
import React, { useEffect, useState , useRef } from "react";
import { Box } from "./styled";
import { Pagination } from "antd";
import Layout from "~/components/layout";
import ContentBox from "~/components/contentBox";
import { useRouter } from "next/router";
import Filter, { FilterResult, AdapterResult } from "~/components/filter";
import api, { Job } from "./api";
import Image from "next/image";
import React, { useEffect, useState, useRef } from 'react'
import { Box } from './styled'
import { Pagination } from 'antd'
import Layout from '~/components/layout'
import ContentBox from '~/components/contentBox'
import { useRouter } from 'next/router'
import Filter, { FilterResult, AdapterResult } from '~/components/filter'
import api, { Job } from './api'
import Image from 'next/image'
// 此函数在构建时被调用
export async function getServerSideProps() {
return {
props: {},
};
}
}
interface ImageListType {}
export default function JobServices() {
const router = useRouter();
const filter = useRef<any>()
const router = useRouter()
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",
]);
])
const [productList, setProductList] = useState(
Array<{ element: JSX.Element }>
);
)
const [rightDomList, setRightDomList] = useState(
Array<{ element: JSX.Element }>
);
)
const leftDom = (item: Job) => {
return (
<div
......@@ -43,7 +42,7 @@ export default function JobServices() {
{/* <div className="com">{item.teamName}</div> */}
</div>
<div className="value-right">
<span className="money">¥{item.price}</span>{" "}
<span className="money">¥{item.price}</span>{' '}
<span className="unit">/平</span>
</div>
</div>
......@@ -56,49 +55,46 @@ export default function JobServices() {
<div className="com">{item.teamName}</div>
</div>
</div>
);
};
)
}
const rightDom = (item: string) => {
return (
<div className="right-box-item advertisement" key={item}>
<Image src={item} alt="error" width={260} height={420} />
</div>
);
};
)
}
const [filterResult, setFilterResult] = useState<AdapterResult>({}); //筛选结果
const [filterResult, setFilterResult] = useState<AdapterResult>({}) //筛选结果
const [pageParams, setPageParams] = useState({
pageNo: 1,
pageSize: 14,
}); //分页器对象
}) //分页器对象
const [count, setCount] = useState(0); //商品总数
const [abort, setAbort] = useState<AbortController | null>(null); //请求中断
const [count, setCount] = useState(0) //商品总数
const [abort, setAbort] = useState<AbortController | null>(null) //请求中断
const onPageChange = (page: number, pageSize: number) => {
setPageParams({
...pageParams,
pageNo: page,
});
};
})
}
useEffect(() => {
//中断前一次列表请求
abort?.abort();
setAbort(new AbortController());
}, [filterResult, pageParams]);
abort?.abort()
setAbort(new AbortController())
}, [filterResult, pageParams])
//端口列表请求
useEffect(() => {
let queryVal = JSON.parse(JSON.stringify(router.query));
const idArr = filter.current.idArr
let queryVal = JSON.parse(JSON.stringify(router.query))
let rs
for (const key in queryVal) {
if (idArr.includes(key)) {
rs = {[key]:router.query[key]}
}
if (Object.keys(queryVal).length) {
rs = { categoryId: [Number(queryVal['categoryId'])] }
}
api
.listPageJobServicesInfo(
......@@ -114,49 +110,46 @@ export default function JobServices() {
.then((res) => {
setProductList(
res.result?.list?.map((item) => {
return { element: leftDom(item) };
return { element: leftDom(item) }
}) || []
);
setCount(res.result?.totalCount || 0);
});
}, [abort]);
)
setCount(res.result?.totalCount || 0)
})
}, [abort])
const onFilterChange = (
filterResult: FilterResult,
adapterFilterResult: AdapterResult
) => {
console.log("filterResult", filterResult, adapterFilterResult);
setFilterResult(adapterFilterResult);
};
console.log('filterResult', filterResult, adapterFilterResult)
adapterFilterResult.categoryId = adapterFilterResult.categoryId?.map(
(item) => item.id
)
setFilterResult(adapterFilterResult)
}
useEffect(() => {
setRightDomList(
list.map((item) => {
return { element: rightDom(item) };
return { element: rightDom(item) }
})
);
}, []);
)
}, [])
useEffect(() => {
let queryVal = JSON.parse(JSON.stringify(router.query));
if (router.query) {
const idArr = filter.current.idArr
for (const key in queryVal) {
if (idArr.includes(key)) {
setFilterResult({ [key]:router.query[key] });
}
}
let queryVal = JSON.parse(JSON.stringify(router.query))
if (Object.keys(router.query).length) {
setFilterResult({ categoryId: [Number(queryVal['categoryId'])] })
}
}, [router]);
}, [router])
return (
<Layout>
<Box>
<Filter
types={["地域", "行业", "应用"]}
types={['地域', '行业', '应用']}
showResultItem
onChange={onFilterChange}
ref={filter}
></Filter>
<div style={{ marginTop: 10 }}>
<ContentBox
......@@ -179,12 +172,12 @@ export default function JobServices() {
}}
rightRenderDom={{ columns: rightDomList }}
leftcontentstyle={{
width: "924px",
margin: { top: 0, right: "10px", bottom: "10px", left: 0 },
width: '924px',
margin: { top: 0, right: '10px', bottom: '10px', left: 0 },
}}
/>
</div>
</Box>
</Layout>
);
)
}
pages/mall/api/index.ts
import request, { Response } from '~/api/request';
import request, { Response } from '~/api/request'
export interface ListPageGoodsInfoParams {
"brandId"?: number,
"districtId"?: number,
"modelId"?: number,
"pageNo": number,
"pageSize": number,
"partsId"?: number,
"productCategoryId"?: number,
"qualityId"?: number
pageNo: number
pageSize: number
categoryId?: any[]
provinceId?: number
type: 0
}
export interface Goods {
"createTime": string,
"directoryId": number,
"directoryName": string,
"goodsName": string,
"goodsOneLevelTypeName": string,
"goodsTwoLevelTypeName": string,
"id": number,
"imgUrl": string,
"isCoupons": number,
"status": number
goodsName: string
id: number
images: string
price: number | null
}
export interface ListPageGoodsInfoResp {
"pageNo": 1,
"pageSize": 10,
"list": Array<Goods>,
"totalCount": 0,
"totalPage": 0
pageNo: 1
pageSize: 10
list: Array<Goods>
totalCount: 0
totalPage: 0
}
export interface Ad {
id: number;
imageUrl: string;
id: number
imageUrl: string
}
export default {
//web-商品信息-分页
listPageGoodsInfo: (params: ListPageGoodsInfoParams, options = {}): Promise<Response<ListPageGoodsInfoResp>> => {
return request('/pms/webProductMall/listPageGoodsInfo', 'post', params, options)
listPageGoodsInfo: (
params: ListPageGoodsInfoParams,
options = {}
): Promise<Response<ListPageGoodsInfoResp>> => {
return request('/pms/product/mall/deviceList', 'post', params, options)
},
//产品商城广告位
ad: (): Promise<Response<Array<Ad>>> => {
return request('/pms/webProductMall/ad')
}
}
\ No newline at end of file
},
}
pages/mall/index.page.tsx
import React, { useEffect, useState } from "react";
import { Empty, Pagination, Image, Spin } from "antd";
import Layout from "~/components/layout";
import styles from "./index.module.scss";
import { useRouter } from "next/router";
import Filter, { AdapterResult, FilterResult } from "~/components/filter";
import api, { Ad, Goods, ListPageGoodsInfoParams } from "./api";
import errImg from "~/assets/errImg";
import React, { useEffect, useState } from 'react'
import { Empty, Pagination, Image, Spin } from 'antd'
import Layout from '~/components/layout'
import styles from './index.module.scss'
import { useRouter } from 'next/router'
import Filter, { AdapterResult, FilterResult } from '~/components/filter'
import api, { Ad, Goods, ListPageGoodsInfoParams } from './api'
import errImg from '~/assets/errImg'
// 此函数在构建时被调用
export async function getServerSideProps() {
return {
props: {},
};
}
}
type Props = {};
type Props = {}
export default function Mall(props: Props) {
const router = useRouter();
const [productList, setProductList] = useState<Array<Goods>>([]); //商品列表
const [filterResult, setFilterResult] = useState<AdapterResult>({}); //筛选结果
const [pageParams, setPageParams] = useState({
const router = useRouter()
const [productList, setProductList] = useState<Array<Goods>>([]) //商品列表
const [filterResult, setFilterResult] = useState<AdapterResult>({}) //筛选结果
const [pageParams, setPageParams] = useState<{
pageNo: number
pageSize: number
type: 0
}>({
pageNo: 1,
pageSize: 15,
}); //分页器对象
const [count, setCount] = useState(0); //商品总数
const [abort, setAbort] = useState<AbortController | null>(null); //请求中断对你
const [adList, setAdList] = useState<Array<Ad>>([]); //广告列表
const [loading, setLoading] = useState(false);
type: 0,
}) //分页器对象
const [count, setCount] = useState(0) //商品总数
const [abort, setAbort] = useState<AbortController | null>(null) //请求中断对你
const [adList, setAdList] = useState<Array<Ad>>([]) //广告列表
const [loading, setLoading] = useState(false)
useEffect(() => {
//中断前一次列表请求
abort?.abort();
setAbort(new AbortController());
}, [filterResult, pageParams]);
abort?.abort()
setAbort(new AbortController())
}, [filterResult, pageParams])
//端口列表请求
useEffect(() => {
if (!abort) {
return;
return
}
setLoading(true);
setLoading(true)
api
.listPageGoodsInfo(
{
......@@ -52,38 +57,41 @@ export default function Mall(props: Props) {
}
)
.then((res) => {
setProductList(res.result?.list || []);
setCount(res.result?.totalCount || 0);
setLoading(false);
});
}, [abort]);
setProductList(res.result?.list || [])
setCount(res.result?.totalCount || 0)
setLoading(false)
})
}, [abort])
//广告请求
useEffect(() => {
api.ad().then((res) => {
setAdList(res.result || []);
});
}, []);
setAdList(res.result || [])
})
}, [])
const onFilterChange = (
filterResult: FilterResult,
adapterFilterResult: AdapterResult
) => {
console.log("filterResult", filterResult, adapterFilterResult);
setFilterResult(adapterFilterResult);
};
console.log('filterResult', filterResult, adapterFilterResult)
adapterFilterResult.categoryId = adapterFilterResult.categoryId?.map(
(item) => item.id
)
setFilterResult(adapterFilterResult)
}
const onPageChange = (page: number, pageSize: number) => {
setPageParams({
...pageParams,
pageNo: page,
});
};
})
}
return (
<Layout>
<div className="page" style={{ paddingTop: "18px" }}>
<div className="page" style={{ paddingTop: '18px' }}>
<Filter
types={["类目", "地域", "品牌", "部件",/* "型号", "成色" */]}
types={['类目', '地域', '品牌', '部件' /* "型号", "成色" */]}
showResultItem
onChange={onFilterChange}
></Filter>
......@@ -97,12 +105,12 @@ export default function Mall(props: Props) {
<li
key={i}
className={styles.item}
onClick={() => router.push("/mall/detail/" + item.id)}
onClick={() => router.push('/mall/detail/' + item.id)}
>
<div className={styles.imgBox}>
<Image
alt=""
src={item.imgUrl}
src={item.images}
className={styles.img}
width={116}
height={116}
......@@ -115,14 +123,14 @@ export default function Mall(props: Props) {
{(Math.floor(Math.random() * 901) + 100).toFixed(0)}
</div>
</li>
);
)
})}
{productList.length === 0 && (
<Empty
style={{
paddingTop: 20,
width: "100%",
textAlign: "center",
width: '100%',
textAlign: 'center',
}}
></Empty>
)}
......@@ -153,12 +161,12 @@ export default function Mall(props: Props) {
preview={false}
fallback={errImg}
></Image>
);
)
})}
</div>
</div>
</div>
</div>
</Layout>
);
)
}
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论