Skip to content

W
web
提交 350d1740 作者: 曹云
操作

添-作业服务-详情页面数据 

添-首页-模块跳转
上级 44017cef
正在显示 包含 1011 行增加 和 163 行删除
api/config.ts
...@@ -3,7 +3,7 @@ const dev = { ...@@ -3,7 +3,7 @@ const dev = {
} }
const prod = { const prod = {
baseUrl: 'https://iuav.mmcuav.cn' baseUrl: 'http://192.168.9.61:10001/'
} }
export default process.env.NODE_ENV === 'development' ? dev : prod; export default process.env.NODE_ENV === 'development' ? dev : prod;
\ No newline at end of file
components/filter/api/index.ts
...@@ -32,4 +32,16 @@ export default { ...@@ -32,4 +32,16 @@ export default {
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>>> => {
return request('/release/work/listAllIndustry');
},
appType: (): Promise<Response<Array<RegionResp>>> => {
return request('/release/work/listAllAppType');
},
deviceBrand: (): Promise<Response<Array<RegionResp>>> => {
return request('/pms/webDevice/deviceBrand');
},
deviceModel: (): Promise<Response<Array<RegionResp>>> => {
return request('/pms/webDevice/deviceModel');
},
} }
\ No newline at end of file
components/filter/compoents/appType/index.tsx 0 → 100644
import { Space, Button, Select, Collapse } from 'antd';
import styles from '../../index.module.scss';
import api, { FilterOptionResp } from "../../api";
import { useState, useEffect } from 'react';
type Props = {
onChange: (id: FilterOptionResp) => void;
};
export default function CategoryItem(props: Props) {
const [data, setData] = useState<FilterOptionResp[]>([]);
useEffect(() => {
api.appType().then((res) => {
setData(res?.result || []);
});
}, []);
const onClick = (item: FilterOptionResp) => {
props.onChange({
id: item.id,
name: "应用：" + item.name,
});
};
return (
<div className={styles.filterItem}>
<div className={styles.filterItemTitle}>应用：</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>
);
}
\ No newline at end of file
components/filter/compoents/deviceBrand/index.tsx 0 → 100644
import { Space, Button, Select, Collapse } from 'antd';
import styles from '../../index.module.scss';
import api, { FilterOptionResp } from "../../api";
import { useState, useEffect } from 'react';
type Props = {
onChange: (id: FilterOptionResp) => void;
};
export default function CategoryItem(props: Props) {
const [data, setData] = useState<FilterOptionResp[]>([]);
useEffect(() => {
api.deviceBrand().then((res) => {
setData(res?.result || []);
});
}, []);
const onClick = (item: FilterOptionResp) => {
props.onChange({
id: item.id,
name: "品牌：" + item.name,
});
};
return (
<div className={styles.filterItem}>
<div className={styles.filterItemTitle}>品牌：</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>
);
}
\ No newline at end of file
components/filter/compoents/deviceModel/index.tsx 0 → 100644
import { Space, Button, Select, Collapse } from 'antd';
import styles from '../../index.module.scss';
import api, { FilterOptionResp } from "../../api";
import { useState, useEffect } from 'react';
type Props = {
onChange: (id: FilterOptionResp) => void;
};
export default function CategoryItem(props: Props) {
const [data, setData] = useState<FilterOptionResp[]>([]);
useEffect(() => {
api.deviceModel().then((res) => {
setData(res?.result || []);
});
}, []);
const onClick = (item: FilterOptionResp) => {
props.onChange({
id: item.id,
name: "型号：" + item.name,
});
};
return (
<div className={styles.filterItem}>
<div className={styles.filterItemTitle}>型号：</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>
);
}
\ No newline at end of file
components/filter/compoents/industry/index.tsx 0 → 100644
import { Space, Button, Select, Collapse } from 'antd';
import styles from '../../index.module.scss';
import api, { FilterOptionResp } from "../../api";
import { useState, useEffect } from 'react';
type Props = {
onChange: (id: FilterOptionResp) => void;
};
export default function CategoryItem(props: Props) {
const [data, setData] = useState<FilterOptionResp[]>([]);
useEffect(() => {
api.industry().then((res) => {
setData(res?.result || []);
});
}, []);
const onClick = (item: FilterOptionResp) => {
props.onChange({
id: item.id,
name: "行业：" + item.name,
});
};
return (
<div className={styles.filterItem}>
<div className={styles.filterItemTitle}>行业：</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>
);
}
\ No newline at end of file
components/filter/index.tsx
...@@ -8,6 +8,11 @@ import BrandItem from "./compoents/brandItem"; ...@@ -8,6 +8,11 @@ import BrandItem from "./compoents/brandItem";
import ModelItem from "./compoents/modelItem"; import ModelItem from "./compoents/modelItem";
import PartItem from "./compoents/partItem"; import PartItem from "./compoents/partItem";
import QualityItem from "./compoents/qualityItem"; import QualityItem from "./compoents/qualityItem";
import Industry from "./compoents/industry";
import AppType from "./compoents/appType";
import DeviceBrand from './compoents/deviceBrand';
import DeviceModel from './compoents/deviceModel';
export type AdapterResult = { export type AdapterResult = {
brandId?: number; brandId?: number;
...@@ -27,7 +32,7 @@ export type FilterResult = { ...@@ -27,7 +32,7 @@ export type FilterResult = {
quality?: FilterOptionResp; quality?: FilterOptionResp;
}; };
type itemType = "类目" | "地域" | "品牌" | "部件" | "型号" | "成色"; type itemType = "类目" | "地域" | "品牌" | "部件" | "型号" | "成色" | "行业" | "应用" | "设备品牌" | "设备型号";
type Props = { type Props = {
types: itemType[]; //需要包含的筛选条件项 types: itemType[]; //需要包含的筛选条件项
...@@ -85,6 +90,11 @@ export default function Filter(props: Props) { ...@@ -85,6 +90,11 @@ export default function Filter(props: Props) {
onChange={(item: FilterOptionResp) => onChange(item, "brand")} onChange={(item: FilterOptionResp) => onChange(item, "brand")}
></BrandItem> ></BrandItem>
)} )}
{props.types.includes("设备品牌") && (
<DeviceBrand
onChange={(item: FilterOptionResp) => onChange(item, "quality")}
></DeviceBrand>
)}
{props.types.includes("类目") && ( {props.types.includes("类目") && (
<CategoryItem <CategoryItem
onChange={(item: FilterOptionResp) => onChange(item, "category")} onChange={(item: FilterOptionResp) => onChange(item, "category")}
...@@ -100,12 +110,27 @@ export default function Filter(props: Props) { ...@@ -100,12 +110,27 @@ export default function Filter(props: Props) {
onChange={(item: FilterOptionResp) => onChange(item, "model")} onChange={(item: FilterOptionResp) => onChange(item, "model")}
></ModelItem> ></ModelItem>
)} )}
{props.types.includes("设备型号") && (
<DeviceModel
onChange={(item: FilterOptionResp) => onChange(item, "quality")}
></DeviceModel>
)}
{props.types.includes("成色") && ( {props.types.includes("成色") && (
<QualityItem <QualityItem
onChange={(item: FilterOptionResp) => onChange(item, "quality")} onChange={(item: FilterOptionResp) => onChange(item, "quality")}
></QualityItem> ></QualityItem>
)} )}
{props.types.includes("行业") && (
<Industry
onChange={(item: FilterOptionResp) => onChange(item, "quality")}
></Industry>
)}
{props.types.includes("应用") && (
<AppType
onChange={(item: FilterOptionResp) => onChange(item, "quality")}
></AppType>
)}
{props.showResultItem && ( {props.showResultItem && (
<ResultItem data={result} onDel={onDel}></ResultItem> <ResultItem data={result} onDel={onDel}></ResultItem>
)} )}
......
components/footer/index.tsx
...@@ -3,19 +3,20 @@ import Image from 'next/image'; ...@@ -3,19 +3,20 @@ import Image from 'next/image';
const qrcodeList = [ const qrcodeList = [
{ {
img: '', img: require("./assets/mmc.png"),
title: '科比特官网', title: '科比特官网',
url:"http://www.mmcuav.cn/"
}, },
{ {
img: '', img: require("./assets/fuwuhao.png"),
title: '云享飞服务号', title: '云享飞服务号',
}, },
{ {
img: '', img: require("./assets/xiaochengxu.png"),
title: '云享飞小程序', title: '云享飞小程序',
}, },
{ {
img: '', img: require("./assets/shequn.png"),
title: '官方社群', title: '官方社群',
}, },
]; ];
...@@ -29,7 +30,7 @@ export default function Footer() { ...@@ -29,7 +30,7 @@ export default function Footer() {
qrcodeList.map((item, i) => { qrcodeList.map((item, i) => {
return ( return (
<div className={styles.qrcodeItem} key={i}> <div className={styles.qrcodeItem} key={i}>
<Image alt="" className={styles.qrcodeImg} src={item.img}></Image> <Image style={{cursor:item.title === "科比特官网" ? "pointer" : ''}} onClick={()=>{if(item.title === "科比特官网") window.location.href = item.url!}} alt="" className={styles.qrcodeImg} src={item.img}></Image>
<div className={styles.qrcodeTitle}>{item.title}</div> <div className={styles.qrcodeTitle}>{item.title}</div>
</div> </div>
); );
......
next.config.js
...@@ -23,7 +23,7 @@ const nextConfig = { ...@@ -23,7 +23,7 @@ const nextConfig = {
return [ return [
{ {
source: "/local/:path*", source: "/local/:path*",
destination: "https://iuav.mmcuav.cn/:path*", destination: "http://192.168.9.61:10001//:path*",
}, },
]; ];
}, },
......
pages/equipmentLeasing/api/index.tsx
...@@ -50,8 +50,8 @@ export interface ListPageDeviceInfoResp { ...@@ -50,8 +50,8 @@ export interface ListPageDeviceInfoResp {
export default { export default {
//web-设备租赁-分页 //web-设备租赁-分页
listPageDeviceInfo: (params: ListPageDeviceInfoParams): Promise<Response<ListPageDeviceInfoResp>> => { listPageDeviceInfo: (params: ListPageDeviceInfoParams,options = {}): Promise<Response<ListPageDeviceInfoResp>> => {
return request('/pms/webDevice/deviceList', 'post', params) return request('/pms/webDevice/deviceList', 'post', params, options)
}, },
//web-设备租赁-广告 //web-设备租赁-广告
listAdvertisementInfo: (): Promise<Response<Array<Advertisement>>> => { listAdvertisementInfo: (): Promise<Response<Array<Advertisement>>> => {
......
pages/equipmentLeasing/detail/[pid].page.tsx → pages/equipmentLeasing/detail/[id].page.tsx
import React from 'react' import React, { useEffect , useState } from 'react'
import {useRouter} from 'next/router';
import Layout from "~/components/layout"; import Layout from "~/components/layout";
import {Box} from './styled'; import {Box} from './styled';
import ImagePreview from './components/picture-preview'; import ImagePreview from './components/picture-preview';
import { Button , Image as AImage , Divider } from 'antd'; import { Button , Image as AImage , Divider } from 'antd';
import Image from 'next/image'; import Image from 'next/image';
import errImg from "~/assets/errImg"; import errImg from "~/assets/errImg";
import api,{GetWebDeviceDetailResult} from './api';
export default function EquipmentLeasingDetail() { export default function EquipmentLeasingDetail() {
const router = useRouter();
const [id, setId] = useState<number | null>(null);
const [detail,setDetail] = useState<GetWebDeviceDetailResult | null>()
useEffect(()=>{
setId(Number(router.query.id))
},[router])
useEffect(()=>{
if (id) {
api
.listDetailDeviceInfo({
id:id
})
.then((res) => {
setDetail(res.result || null);
});
}
},[id])
return ( return (
<Layout> <Layout>
<Box> <Box>
<div className='item'> <div className='item'>
<ImagePreview /> <ImagePreview imgList={detail?.wareImgs!}/>
<div className='item-right'> <div className='item-right'>
<div className='title'>入云龙1550</div> <div className='title'>{detail?.wareTitle}</div>
<div className='function'> {
<div className='function-item'>官方质检</div> detail?.tags?.length ?
<div className='function-item'>1天起租</div> (<div className='function'>
<div className='function-item'>极速发货</div> {detail?.tags?.map(item=>(<div key={item} className='function-item'>{item}</div>))}
<div className='function-item'>渠道商免押</div> </div>) : (<div className='function not'></div>)
</div> }
<div className='menoy'> <div className='menoy'>
<span className='menoy-left'>¥200</span> <span className='menoy-left'>¥{detail?.minRent}</span>
<span className='menoy-right'>/天起</span> <span className='menoy-right'>/天起</span>
</div> </div>
<div className='classification'></div> <div className='classification'></div>
...@@ -38,9 +62,10 @@ export default function EquipmentLeasingDetail() { ...@@ -38,9 +62,10 @@ export default function EquipmentLeasingDetail() {
更多租金规则请前往【云享飞】微信小程序查 更多租金规则请前往【云享飞】微信小程序查
</div> </div>
<Divider className='divider'>商品详情</Divider> <Divider className='divider'>商品详情</Divider>
<div style={{ textAlign: "center" }}> {
<AImage fallback={errImg} width={1080}></AImage> detail?.wareDetailContent ? <div style={{ textAlign: "center" }} dangerouslySetInnerHTML={{ __html: detail?.wareDetailContent}}>
</div> </div> : <div style={{ textAlign: "center" }} ></div>
}
</Box> </Box>
</Layout> </Layout>
) )
......
pages/equipmentLeasing/detail/api/index.tsx 0 → 100644
import request, { Response } from '~/api/request';
export interface GetWebDeviceDetailParams {
id:number
}
export interface WareImgsType {
id: number,
wareInfoId: number | null,
imgUrl: string,
imgType: number
}
export interface GetWebDeviceDetailResult {
id: number,
wareNo: string,
wareTitle: string,
wareTypeId: number,
wareStatus: number,
payStatus: number,
minDeposit: number,
maxDeposit: number,
minRent: number,
maxRent: number,
totalStock: number,
totalSale: number,
skuNum: number,
tags: [
string,
string
],
wareImgs: Array<WareImgsType>,
warePropDTO: number | null,
wareDetailContent: string | TrustedHTML
}
export default {
//web-设备租赁-详情
listDetailDeviceInfo: (params: GetWebDeviceDetailParams): Promise<Response<GetWebDeviceDetailResult>> => {
return request('/pms/webDevice/detail', 'get', params)
}
}
\ No newline at end of file
pages/equipmentLeasing/detail/components/picture-preview/index.tsx
import React , {useState,useRef} from 'react' import React , {useState,useRef} from 'react'
import {Box} from './styled'; import {Box} from './styled';
import { LeftOutlined , RightOutlined } from '@ant-design/icons'; import { LeftOutlined , RightOutlined } from '@ant-design/icons';
export default function PicturePreview() { import {WareImgsType} from '../../api';
interface ImagesType{
imgList: Array<WareImgsType>
}
export default function PicturePreview(props:ImagesType) {
const {imgList} = props
console.log(imgList);
const mask =useRef<HTMLDivElement>(null!) const mask =useRef<HTMLDivElement>(null!)
const moveBox =useRef<HTMLDivElement>(null!) const moveBox =useRef<HTMLDivElement>(null!)
const big =useRef<HTMLImageElement>(null!) const big =useRef<HTMLImageElement>(null!)
const [moveLeft,setMoveLeft] = useState(0) // 根据这个值设置图片列表向左偏移 const [moveLeft,setMoveLeft] = useState(0) // 根据这个值设置图片列表向左偏移
const imgList = [ // const imgList = [
'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg', // 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg', // 'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg', // 'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg', // 'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg', // 'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg', // 'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg' // 'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
] // ]
const [activeImgIndex,setActiveImgIndex] = useState(0) const [activeImgIndex,setActiveImgIndex] = useState(0)
...@@ -63,7 +70,7 @@ export default function PicturePreview() { ...@@ -63,7 +70,7 @@ export default function PicturePreview() {
ref={moveBox}> ref={moveBox}>
</div> </div>
{/* <!-- 主图 --> */} {/* <!-- 主图 --> */}
<img src={imgList[activeImgIndex]} <img src={imgList && imgList[activeImgIndex].imgUrl}
className="img_small" className="img_small"
alt=""/> alt=""/>
{/* <!-- 放大区域 --> */} {/* <!-- 放大区域 --> */}
...@@ -71,30 +78,30 @@ export default function PicturePreview() { ...@@ -71,30 +78,30 @@ export default function PicturePreview() {
ref={mask}></div> ref={mask}></div>
{/* <!-- 大图预览图 --> */} {/* <!-- 大图预览图 --> */}
<div className="img_big"> <div className="img_big">
<img src={imgList[activeImgIndex]} <img src={imgList && imgList[activeImgIndex].imgUrl}
ref={big} ref={big}
alt=""/> alt=""/>
</div> </div>
</div> </div>
{/* <!-- 缩略图列表 --> */} {/* <!-- 缩略图列表 --> */}
<div className="img_list_wrapper"> <div className="img_list_wrapper">
<LeftOutlined className="el-icon-arrow-left" onClick={()=>handleSlide('left')}/> {imgList?.length>4 && <LeftOutlined className="el-icon-arrow-left" onClick={()=>handleSlide('left')}/>}
<div className="img_list_content"> <div className="img_list_content">
<div className="img_list" <div className="img_list"
style={{marginLeft: - moveLeft * 25 + '%'}}> style={{marginLeft: - moveLeft * 25 + '%'}}>
{ {
imgList.map((item,index)=>( imgList?.map((item,index)=>(
<img <img
onMouseOver={()=>handleChangeImg(index)} onMouseOver={()=>handleChangeImg(index)}
key={index} key={index}
className={`${activeImgIndex === index ? 'activeImg' : ''}`} className={`${activeImgIndex === index ? 'activeImg' : ''}`}
src={item} src={item.imgUrl}
alt="" /> alt="" />
)) ))
} }
</div> </div>
</div> </div>
<RightOutlined className="el-icon-arrow-right" onClick={()=>handleSlide('right')}/> { imgList?.length>4 && <RightOutlined className="el-icon-arrow-right" onClick={()=>handleSlide('right')}/>}
</div> </div>
</div> </div>
</Box> </Box>
......
pages/equipmentLeasing/detail/styled.tsx
...@@ -11,7 +11,6 @@ export const Box = styled.div` ...@@ -11,7 +11,6 @@ export const Box = styled.div`
height: 300px; height: 300px;
margin-left: 30px; margin-left: 30px;
.title{ .title{
width: 283px;
height: 26px; height: 26px;
font-size: 28px; font-size: 28px;
margin-top: 5px; margin-top: 5px;
...@@ -28,6 +27,9 @@ export const Box = styled.div` ...@@ -28,6 +27,9 @@ export const Box = styled.div`
height: 45px; height: 45px;
margin-top: 17px; margin-top: 17px;
background: linear-gradient(90deg, #D7F7F5 0%, #EEFDE9 100%); background: linear-gradient(90deg, #D7F7F5 0%, #EEFDE9 100%);
&.not{
background: none;
}
&-item{ &-item{
} }
} }
......
pages/equipmentLeasing/index.page.tsx
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { Button, Select, Space, Tag } from "antd"; import { Pagination } from "antd";
import {Box} from './styled'; import {Box} from './styled';
import Layout from "~/components/layout"; import Layout from "~/components/layout";
import ContentBox from '~/components/contentBox'; import ContentBox from '~/components/contentBox';
import Filter, { FilterResult } from "~/components/filter"; import Filter, { FilterResult , AdapterResult} from "~/components/filter";
import Image from 'next/image'; import Image from 'next/image';
import { FilterOptionResp } from "~/components/filter/api";
import api,{Device,Advertisement} from './api'; import api,{Device,Advertisement} from './api';
// 此函数在构建时被调用 // 此函数在构建时被调用
export async function getStaticProps() { export async function getStaticProps() {
...@@ -21,17 +20,17 @@ type Props = { ...@@ -21,17 +20,17 @@ type Props = {
}; };
export default function EquipmentLeasing(props:Props) { export default function EquipmentLeasing(props:Props) {
const router = useRouter();
const [productList, setProductList] = useState(Array<{element:JSX.Element}>); const [productList, setProductList] = useState(Array<{element:JSX.Element}>);
const [rightProductList, setRightProductList] = useState(Array<{element:JSX.Element}>); const [rightProductList, setRightProductList] = useState(Array<{element:JSX.Element}>);
const router = useRouter();
const leftDom = (item:Device)=>{ const leftDom = (item:Device)=>{
return (<div key={item.id} className='item' onClick={() => router.push('/equipmentLeasing/detail/1')}> return (<div key={item.id} className='item' onClick={() => router.push(`/equipmentLeasing/detail/${item.id}`)}>
<div className="item-top"> <div className="item-top">
<div className="item-top-image"> <Image src={item.wareImgs[0].imgUrl} alt="error" width={116} height={116}/> </div> <div className="item-top-image"> <Image src={item.wareImgs[0].imgUrl} alt="error" width={116} height={116}/> </div>
</div> </div>
<div className="item-bottom"> <div className="item-bottom">
<div className="item-bottom-title">{item.wareTitle}</div> <div className="item-bottom-title" title={item.wareTitle}>{item.wareTitle}</div>
<div className="item-bottom-price"> <div className="item-bottom-price">
<span className="money">¥{item.minRent}</span> <span className="money">¥{item.minRent}</span>
<span className="unit">/天起</span> <span className="unit">/天起</span>
...@@ -48,38 +47,90 @@ export default function EquipmentLeasing(props:Props) { ...@@ -48,38 +47,90 @@ export default function EquipmentLeasing(props:Props) {
) )
} }
const onFilterChange = (filterResult: FilterResult) => { const [filterResult, setFilterResult] = useState<AdapterResult>({}); //筛选结果
console.log('filterResult', filterResult) const [count, setCount] = useState(0); //商品总数
} const [abort, setAbort] = useState<AbortController | null>(null); //请求中断
const [pageParams, setPageParams] = useState({
pageNo: 1,
pageSize: 16,
}); //分页器对象
const onPageChange = (page: number, pageSize: number) => {
setPageParams({
...pageParams,
pageNo: page,
});
};
useEffect(() => { useEffect(() => {
api //中断前一次列表请求
.listPageDeviceInfo({ abort?.abort();
pageNo: 1, setAbort(new AbortController());
pageSize: 10, }, [filterResult, pageParams]);
})
.then((res) => {
setProductList(res.result?.list.map(item=>{return { element:leftDom(item) }}) || [])
});
//端口列表请求
useEffect(() => {
api
.listPageDeviceInfo(
{
...filterResult,
...pageParams,
...router.query
},
{
signal: abort?.signal,
}
)
.then((res) => {
setProductList(res.result?.list.map(item=>{return { element:leftDom(item) }}) || []);
setCount(res.result?.totalCount || 0);
});
}, [abort]);
const onFilterChange = (
filterResult: FilterResult,
adapterFilterResult: AdapterResult
) => {
console.log("filterResult", filterResult, adapterFilterResult);
setFilterResult(adapterFilterResult);
};
useEffect(() => {
api api
.listAdvertisementInfo() .listAdvertisementInfo()
.then((res) => { .then((res) => {
setRightProductList(res.result?.map(item=>{return { element:rightDom(item) }}) || []) setRightProductList(res.result?.map(item=>{return { element:rightDom(item) }}) || [])
}); });
}, []); }, []);
useEffect(()=>{
if (router.query) {
setFilterResult({...router.query});
}
},[router])
return ( return (
<Layout> <Layout>
<Box> <Box>
<Filter <Filter
types={[ "地域", "类目", "品牌", "型号"]} types={[ "地域", "类目", "设备品牌", "设备型号"]}
showResultItem showResultItem
onChange={onFilterChange} onChange={onFilterChange}
></Filter> ></Filter>
<div style={{paddingTop:13}}> <div style={{paddingTop:13}}>
<ContentBox boxIndex={4} leftcontentstyle={{width:"916px",margin:{top:0,right:"12px",bottom:"12px",left:0}}} leftRenderDom={{columns:productList}} rightRenderDom={{columns:rightProductList}}/> <ContentBox boxIndex={4} leftcontentstyle={{width:"916px",margin:{top:0,right:"12px",bottom:"12px",left:0}}} leftRenderDom={{columns:productList}} rightRenderDom={{columns:rightProductList}}/>
<Pagination
current={pageParams.pageNo}
pageSize={pageParams.pageSize}
showSizeChanger={false}
showQuickJumper
total={count}
onChange={onPageChange}
hideOnSinglePage={true}
style={{ marginTop: 20 }}
/>
</div> </div>
</Box> </Box>
</Layout> </Layout>
......
pages/equipmentLeasing/styled.tsx
...@@ -34,6 +34,9 @@ export const Box = styled.div` ...@@ -34,6 +34,9 @@ export const Box = styled.div`
font-weight: bold; font-weight: bold;
color: #333333; color: #333333;
line-height: 24px; line-height: 24px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
} }
&-price{ &-price{
.money{ .money{
......
pages/flyingHandService/api/index.tsx
...@@ -27,9 +27,29 @@ export interface ListPageFlyingInfoResp { ...@@ -27,9 +27,29 @@ export interface ListPageFlyingInfoResp {
} }
export interface SkillsType {
type: string;
id: 1,
skillsName: string
}
export interface RegionResp {
"childInfo": RegionResp[] | null,
"id": number,
"level": number,
"name": string,
"pid": number
}
export default { export default {
//web-作业服务-分页 //web-作业服务-分页
listPageJobServicesInfo: (params: ListPageFlyingInfoParams): Promise<Response<ListPageFlyingInfoResp>> => { listPageJobServicesInfo: (params: ListPageFlyingInfoParams): Promise<Response<ListPageFlyingInfoResp>> => {
return request('/release/curriculum/queryCurriculumInfoList', 'post', params) return request('/release/curriculum/queryCurriculumInfoList', 'post', params)
} },
region: (): Promise<Response<Array<RegionResp>>> => {
return request('/pms/webDevice/getSecondDistrictInfo');
},
IndustryFlightSkills: (): Promise<Response<Array<SkillsType>>> => {
return request('/release/curriculum/getIndustryFlightSkills');
},
} }
\ No newline at end of file
pages/flyingHandService/index.page.tsx
import React , {useEffect,useState} from 'react'; import React , {useEffect,useState} from 'react';
import {Box} from './styled'; import {Box} from './styled';
import Image from 'next/image'; import Image from 'next/image';
import { Button, Select, Space } from "antd"; import { Button, Select, Space , Pagination , Cascader } from "antd";
import Layout from "~/components/layout"; import Layout from "~/components/layout";
import ContentBox from '~/components/contentBox'; import ContentBox from '~/components/contentBox';
import api , {Flying} from "./api"; import api , {Flying,SkillsType,RegionResp} from "./api";
import {useRouter} from 'next/router';
interface FilterInfoParams {
regionId?:number,
flightSkillsId?:number,
licenseId?:number
}
export default function FlyingHandService() { export default function FlyingHandService() {
const router = useRouter()
const [list,setList] = useState(["https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/925072db-5872-44dd-8b71-e408ad3adf41.jpg","https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/12d624b0-1250-44a6-9a3f-9025725a2adc.jpg"])
const [productList, setProductList] = useState(Array<{element:JSX.Element}>); const [productList, setProductList] = useState(Array<{element:JSX.Element}>);
const [list,setList] = useState(["https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/925072db-5872-44dd-8b71-e408ad3adf41.jpg","https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/12d624b0-1250-44a6-9a3f-9025725a2adc.jpg"]
)
const [rightDomList, setRightDomList] = useState(Array<{element:JSX.Element}>) const [rightDomList, setRightDomList] = useState(Array<{element:JSX.Element}>)
const [secondDistrictInfo, setSecondDistrictInfo] = useState(Array<RegionResp> )
const [flightSkillsList, setFlightSkillsList] = useState(Array<SkillsType> )
const leftDom = (item:Flying)=>{ const leftDom = (item:Flying)=>{
return (<div className='item' key={item.id}> return (<div className='item' key={item.id}>
<div className='item-top'> <div className='item-top'>
<Image src={`${item.videoUrl}?x-oss-process=video/snapshot,t_1000,m_fast`} alt='#' width={220} height={160}/> <Image src={`${item.videoUrl}?x-oss-process=video/snapshot,t_1000,m_fast`} alt='#' width={220} height={160}/>
{/* <img src={`${item.videoUrl}?x-oss-process=video/snapshot,t_1000,m_fast`} alt="" /> */}
</div> </div>
<div className='item-bottom'> <div className='item-bottom'>
<div className="bottom-title">{item.curriculumName}</div> <div className="bottom-title">{item.curriculumName}</div>
...@@ -41,55 +49,123 @@ export default function FlyingHandService() { ...@@ -41,55 +49,123 @@ export default function FlyingHandService() {
</div>) </div>)
} }
const onProvinceChange = (value: string) => { const [pageParams, setPageParams] = useState({
console.log("省", value); pageNo: 1,
pageSize: 12,
}); //分页器对象
const [filterParams,setFilterParams] = useState<FilterInfoParams>()
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());
}, [filterParams,pageParams]);
//端口列表请求
useEffect(() => {
api
.listPageJobServicesInfo(
{
...pageParams,
...filterParams,
...router.query
},
)
.then((res) => {
setProductList(res.result?.list.map(item=>{return { element:leftDom(item) }}) || []);
setCount(res.result?.totalCount || 0);
});
}, [abort]);
const onProvinceChange = (value: string, type:string) => {
if (type === '考证') {
setFilterParams((props)=>{
return {
...props,
licenseId:Number(value)
}
})
}else{
setFilterParams((props)=>{
return {
...props,
flightSkillsId:Number(value)
}
})
}
};
const onChange = (value: any) => {
console.log(value);
}; };
useEffect(() => { useEffect(() => {
api setRightDomList(list.map(item=>{return {element:rightDom(item)}}))
.listPageJobServicesInfo({ api
pageNo: 1, .region()
pageSize: 12,
})
.then((res) => { .then((res) => {
setProductList(res.result?.list.map(item=>{return { element:leftDom(item) }}) || []) setSecondDistrictInfo(res.result || [])
});
api
.IndustryFlightSkills()
.then((res) => {
setFlightSkillsList(res.result || [])
}); });
setRightDomList(list.map(item=>{return {element:rightDom(item)}}))
}, []); }, []);
useEffect(()=>{
if (Object.keys(router.query).length) {
setFilterParams((props)=>{
return {
...props,
...router.query
}
});
}
},[router])
return ( return (
<Layout> <Layout>
<Box> <Box>
<div className='flyingTop'> <div className='flyingTop'>
<div className='flyingTop-left'> <div className='flyingTop-left'>
<Space> <Space>
<Select {/* <Select
className='selectItem' className='selectItem'
bordered={false} bordered={false}
popupMatchSelectWidth={false} popupMatchSelectWidth={false}
placeholder="区域" placeholder="区域"
size="large" size="large"
onChange={onProvinceChange} onChange={onProvinceChange}
options={[ options={secondDistrictInfo}
{ value: "jack", label: "Jack" }, /> */}
{ value: "lucy", label: "Lucy" }, <Cascader clearIcon placeholder="地域" bordered={false} className='selectItem' size="large" fieldNames={{ label: "name", value: "id", children: "childInfo" }} options={secondDistrictInfo} onChange={onChange} changeOnSelect />
{ value: "Yiminghe", label: "yiminghe" },
{ value: "disabled", label: "Disabled", disabled: true },
]}
/>
<Select <Select
className='selectItem' className='selectItem'
bordered={false} bordered={false}
popupMatchSelectWidth={false} popupMatchSelectWidth={false}
placeholder="考证" placeholder="考证"
size="large" size="large"
onChange={onProvinceChange} onChange={(value)=>onProvinceChange(value,"考证")}
options={[ options={[
{ value: "jack", label: "Jack" }, { value: "1", label: "视距内驾驶员" },
{ value: "lucy", label: "Lucy" }, { value: "2", label: "视距外驾驶员" },
{ value: "Yiminghe", label: "yiminghe" }, { value: "3", label: "教员" },
{ value: "disabled", label: "Disabled", disabled: true },
]} ]}
clearIcon
/> />
<Select <Select
className='selectItem' className='selectItem'
...@@ -97,19 +173,26 @@ export default function FlyingHandService() { ...@@ -97,19 +173,26 @@ export default function FlyingHandService() {
popupMatchSelectWidth={false} popupMatchSelectWidth={false}
placeholder="技能" placeholder="技能"
size="large" size="large"
onChange={onProvinceChange} onChange={(value)=>onProvinceChange(value,"技能")}
options={[ options={flightSkillsList}
{ value: "jack", label: "Jack" }, fieldNames={{value:"id",label:"skillsName"}}
{ value: "lucy", label: "Lucy" }, clearIcon
{ value: "Yiminghe", label: "yiminghe" },
{ value: "disabled", label: "Disabled", disabled: true },
]}
/> />
</Space> </Space>
</div> </div>
<Button type="primary" className='btn'>报名学习课程</Button> <Button type="primary" className='btn'>报名学习课程</Button>
</div> </div>
<ContentBox boxIndex={4} leftcontentstyle={{width:"925px",margin:{top:0,right:"15px",bottom:"15px",left:0}}} leftRenderDom={{columns:productList}} rightRenderDom={{columns:rightDomList}}/> <ContentBox boxIndex={4} leftcontentstyle={{width:"925px",margin:{top:0,right:"15px",bottom:"15px",left:0}}} leftRenderDom={{columns:productList}} rightRenderDom={{columns:rightDomList}}/>
<Pagination
current={pageParams.pageNo}
pageSize={pageParams.pageSize}
showSizeChanger={false}
showQuickJumper
total={count}
onChange={onPageChange}
hideOnSinglePage={true}
style={{ marginTop: 20 }}
/>
</Box> </Box>
</Layout> </Layout>
); );
......
pages/home/waterfallFlowBody/api/index.ts
import request, { Response } from '~/api/request'; import request, { Response } from '~/api/request';
export interface AllType { export interface AllType {
type?: string;
id?: number, id?: number,
name?: string, name?: string,
appName?: string, appName?: string,
...@@ -27,6 +28,7 @@ export interface AllType { ...@@ -27,6 +28,7 @@ export interface AllType {
} }
export interface FilterOptionResp { export interface FilterOptionResp {
type: string;
id: number, id: number,
name: string name: string
} }
...@@ -54,7 +56,8 @@ export const equipmentLeasingApi = { ...@@ -54,7 +56,8 @@ export const equipmentLeasingApi = {
export interface AppType { export interface AppType {
id: number, id: number,
appName: string, appName: string,
createTime: string createTime: string,
type:string
} }
export interface IndustryType { export interface IndustryType {
...@@ -66,7 +69,8 @@ export interface IndustryType { ...@@ -66,7 +69,8 @@ export interface IndustryType {
propagate1: string, propagate1: string,
propagate2: string, propagate2: string,
image: string, image: string,
video: string video: string,
type:string
} }
export const jobServicesApi = { export const jobServicesApi = {
...@@ -91,6 +95,7 @@ export const mallApi = { ...@@ -91,6 +95,7 @@ export const mallApi = {
} }
export interface SkillsType { export interface SkillsType {
type: string;
id: 1, id: 1,
skillsName: string skillsName: string
} }
......
pages/home/waterfallFlowBody/components/map/api/index.tsx 0 → 100644
import request, { Response } from '~/api/request';
export interface PositioningInfoParams {
lat:number,
lon:number
}
export interface Entiy {
dizhi: string,
jd: number,
wd: number,
range: number
}
export interface ListPageJobInfoResp {
id: number,
adCode: string,
province: string,
locationList: Array<Entiy>
}
export default {
//web-作业服务-分页
listPositioningInfo: (params: PositioningInfoParams): Promise<Response<ListPageJobInfoResp>> => {
return request('/release/website/getWebsiteList', 'get', params )
},
}
\ No newline at end of file
pages/home/waterfallFlowBody/components/map/index.tsx
import React, { Component, useEffect } from 'react'; import React, { Component, useEffect, useState } from 'react';
import {Box} from './styled'; import {Box} from './styled';
import api from './api';
export default function MapComponent() { export default function MapComponent() {
let map const [mapItem,setMapItem] = useState(0)
const init =async ()=>{ let map:any
const init = async ()=>{
try { try {
const AMapLoader = await import(/* webpackChunkName: "amap" */ '@amap/amap-jsapi-loader'); const AMapLoader = await import(/* webpackChunkName: "amap" */ '@amap/amap-jsapi-loader');
AMapLoader.load({ AMapLoader.load({
...@@ -17,6 +21,7 @@ export default function MapComponent() { ...@@ -17,6 +21,7 @@ export default function MapComponent() {
zoom: 11, // 初始化地图级别 zoom: 11, // 初始化地图级别
center: [113.93029,22.53291], // 初始化地图中心点位置 center: [113.93029,22.53291], // 初始化地图中心点位置
}); });
mapEntiy(0,AMap)
}) })
.catch(e => { .catch(e => {
console.log(e); console.log(e);
...@@ -26,16 +31,63 @@ export default function MapComponent() { ...@@ -26,16 +31,63 @@ export default function MapComponent() {
} }
} }
useEffect(()=>{ useEffect(()=>{
init() (async()=>{
await init()
})()
},[]) },[])
const addEntiy = (AMap:any,lan:any,lon:any) => {
let lngLat = new AMap.LngLat(lan.trim(), lon.trim())
// 转高德坐标系
AMap.convertFrom(lngLat, 'gps', function (info, result) {
lngLat = result.locations[0]// 转换后的坐标位置
var marker = new AMap.Marker({
position: lngLat,
map
})
AMap.event.addListener(marker, 'click', (e) => {
map.AMapUI.loadUI(['overlay/SimpleInfoWindow'], function (SimpleInfoWindow) {
var infoWindow = new SimpleInfoWindow({
infoTitle: '<strong>这是标题</strong>',
infoBody: '<p>这是信息</p>',
offset: new AMap.Pixel(0, -20),
autoMove: true
})
infoWindow.open(map, e.target.getPosition())
// 最坑的就是这一步了，他的infowindow没有点击事件，所以infoWindow.get$Container()会返回这个infowindow（jquery）对象
let infoEle = infoWindow.get$Container()
//给infowindow添加点击事件，并在回调函数中处理业务或者跳转等
infoEle.on('click', (e) => {
// router.push({name: 'proinfo', params: pro})
})
})
})
})
}
const mapEntiy = (index:number,AMap?:any) => {
api.listPositioningInfo({
lat:113.944825,
lon:22.573664
}).then(res=>{
const list = res.result?.map(item=>item.locationList).flat().filter((item:{dizhi:string})=>item.dizhi.includes("广东省"))
console.log("ajksbhdkjasgdbjahks",list);
list.map(item=>{
addEntiy(AMap,item.jd,item.wd)
})
setMapItem(index)
})
}
return ( return (
<Box className='right-box-item'> <Box className='right-box-item'>
<div id="container" className="map" ></div> <div id="container" className="map" ></div>
<div className='map-dosome'> <div className='map-dosome'>
<div>服务网点</div> <div className={mapItem === 0 ? "active" : ''} onClick={()=>mapEntiy(0)}>服务网点</div>
<div>租赁网点</div> <div className={mapItem === 1 ? "active" : ''} onClick={()=>mapEntiy(1)}>租赁网点</div>
<div>培训网点</div> <div className={mapItem === 2 ? "active" : ''} onClick={()=>mapEntiy(2)}>培训网点</div>
<div>更多网点</div> <div className={mapItem === 3 ? "active" : ''} onClick={()=>mapEntiy(3)}>更多网点</div>
</div> </div>
</Box> </Box>
) )
......
pages/home/waterfallFlowBody/components/map/styled.tsx
...@@ -35,5 +35,9 @@ export const Box = styled.div` ...@@ -35,5 +35,9 @@ export const Box = styled.div`
height: 52px; height: 52px;
background: #ffffff; background: #ffffff;
border-radius: 0px 0px 6px 6px; border-radius: 0px 0px 6px 6px;
cursor: pointer;
.active{
color:#FF552D;
}
} }
`; `;
pages/home/waterfallFlowBody/index.tsx
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { Space, Select, Button } from "antd"; import { Space, Select, Button } from "antd";
import Image from "next/image"; import Image from "next/image";
import {useRouter} from 'next/router';
import { Box } from "./styled"; import { Box } from "./styled";
import ContentBox from "~/components/contentBox"; import ContentBox from "~/components/contentBox";
import RotationChart from "./components/rotationChart"; import RotationChart from "./components/rotationChart";
...@@ -20,8 +21,14 @@ import { FilterOptionResp, ...@@ -20,8 +21,14 @@ import { FilterOptionResp,
flightSkillsApi , flightSkillsApi ,
listNewsApi} from "./api"; listNewsApi} from "./api";
import { BaseOptionType , DefaultOptionType } from "antd/es/select"; import { BaseOptionType , DefaultOptionType } from "antd/es/select";
// const icon = "error";
interface ColumnsType {
title:string,
router:string
}
export default function WaterfallFlowBody() { export default function WaterfallFlowBody() {
const router = useRouter()
const onMoreChange = (value: string) => { const onMoreChange = (value: string) => {
console.log("更多", value); console.log("更多", value);
}; };
...@@ -31,19 +38,48 @@ export default function WaterfallFlowBody() { ...@@ -31,19 +38,48 @@ export default function WaterfallFlowBody() {
const [moreEqList,setMoreEqList] = useState<any>() const [moreEqList,setMoreEqList] = useState<any>()
const columns = ["无人机出租","无人机服务","无人机销售","无人机保险","无人机培训","无人机工具软件"]; const columns = [
{
title:"无人机出租",
router:"/equipmentLeasing"
},
{
title:"无人机服务",
router:"/jobServices"
},
{
title:"无人机销售",
router:"/mall"
},
{
title:"无人机保险",
router:""
},
{
title:"无人机培训",
router:"flyingHandService"
},
{
title:"无人机工具软件",
router:""
}
];
const [leftDomList,setLeftDomList] = useState(Array<{element:JSX.Element}>) const [leftDomList,setLeftDomList] = useState(Array<{element:JSX.Element}>)
const [rightTopDomList,setRightTopDomList] = useState<JSX.Element>() const [rightTopDomList,setRightTopDomList] = useState<JSX.Element>()
const [rightBottomDomList,setRightBottomDomList] = useState<JSX.Element>() const [rightBottomDomList,setRightBottomDomList] = useState<JSX.Element>()
const {deviceCategory,deviceBrand,deviceModel} = equipmentLeasingApi const {deviceCategory,deviceBrand,deviceModel} = equipmentLeasingApi
const eqApiTypeList = ["categoryId","brandId","modelId"]
const {listAllAppType,listAllIndustry} = jobServicesApi const {listAllAppType,listAllIndustry} = jobServicesApi
const jobApiTypeList = ["industryId","appTypeId"]
const {listAllCategory,listAllParts,listAllQuality} = mallApi const {listAllCategory,listAllParts,listAllQuality} = mallApi
const mallApiTypeList = ["brandId","productCategoryId","partsId","modelId","qualityId"]
const {IndustryFlightSkills} = flightSkillsApi const {IndustryFlightSkills} = flightSkillsApi
const flightApiTypeList = ["licenseId","flightSkillsId"]
...@@ -55,15 +91,37 @@ const {IndustryFlightSkills} = flightSkillsApi ...@@ -55,15 +91,37 @@ const {IndustryFlightSkills} = flightSkillsApi
// let res4 = await Promise.all([deviceCategory(),deviceBrand(),deviceModel()]) // let res4 = await Promise.all([deviceCategory(),deviceBrand(),deviceModel()])
let res5 = await Promise.all([IndustryFlightSkills()]) let res5 = await Promise.all([IndustryFlightSkills()])
// let res6 = await Promise.all([deviceCategory(),deviceBrand(),deviceModel()]) // let res6 = await Promise.all([deviceCategory(),deviceBrand(),deviceModel()])
const resValuelist1 = res1.map((item,index)=>{
return item.result?.map(it=>{it.type = jobApiTypeList[index];return it})
}).flat()
const resValuelist2 = res2.map((item,index)=>{
return item.result?.map(it=>{it.type = jobApiTypeList[index];return it})
}).flat()
const resValuelist3 = res3.map((item,index)=>{
return item.result?.map(it=>{it.type = jobApiTypeList[index];return it})
}).flat()
const resValuelist5 = res5.map((item,index)=>{
return item.result?.map(it=>{it.type = jobApiTypeList[index];return it})
}).flat()
// console.log("测试数据1");
// console.log("测试数据2",);
// console.log("测试数据3",res3.map((item,index)=>{
// return item.result?.map(it=>{it.type = mallApiTypeList[index];return it})
// }));
// console.log("测试数据5",res5.map((item,index)=>{
// return item.result?.map(it=>{it.type = flightApiTypeList[index];return it})
// }));
let res7 = await listNewsApi.listNewsPage({pageNo:1,pageSize:10}) let res7 = await listNewsApi.listNewsPage({pageNo:1,pageSize:10})
let res8 = await listNewsApi.listNewTenderInfo({pageNo:1,pageSize:10}) let res8 = await listNewsApi.listNewTenderInfo({pageNo:1,pageSize:10})
const listValue:any = [res1.map(item=>item.result).flat(),res2.map(item=>item.result).flat(),res3.map(item=>item.result).flat(),[],res5.map(item=>item.result).flat(),[]] const listValue:any = [resValuelist1,resValuelist2,resValuelist3,[],resValuelist5.flat(),[]]
console.log(res1.map(item=>item.result).flat());
setMoreEqList(res1.map(item=>item.result).flat()) setMoreEqList(res1.map(item=>item.result).flat())
setLeftDomList(columns.map((item,index)=>{return {element:leftDom(item,index,listValue)}})) setLeftDomList(columns.map((item,index)=>{return {element:leftDom(item,index,listValue)}}))
setRightTopDomList(rightDom(res7.result?.list!)) setRightTopDomList(rightDom(res7.result?.list!))
setRightBottomDomList(rightDom2(res8.result?.list!)) setRightBottomDomList(rightDom2(res8.result?.list!))
})() })()
...@@ -79,16 +137,23 @@ const {IndustryFlightSkills} = flightSkillsApi ...@@ -79,16 +137,23 @@ const {IndustryFlightSkills} = flightSkillsApi
// }) // })
},[]) },[])
const leftDom = (item:string,index:number,resultList: const routerPath = (item:AllType,index:number) => {
router.push({
pathname: columns[index].router,
query: { [item?.type!]: item?.id! },
})
}
const leftDom = (item:ColumnsType,index:number,resultList:
Array<Array<AllType>>) => { Array<Array<AllType>>) => {
return ( return (
<div key={item} className="item"> <div key={item.title} className="item">
<div className="item-title"> <div className="item-title">
<div className="item-left"> <div className="item-left">
<div className="item-left-icon"> <div className="item-left-icon">
<Image src={icon} alt="#" /> <Image src={icon} alt="#" />
</div> </div>
<div className="item-left-label">{item}</div> <div className="item-left-label">{item.title}</div>
</div> </div>
<div> <div>
<Select <Select
...@@ -105,8 +170,8 @@ const {IndustryFlightSkills} = flightSkillsApi ...@@ -105,8 +170,8 @@ const {IndustryFlightSkills} = flightSkillsApi
<Space size={[10, 8]} wrap> <Space size={[10, 8]} wrap>
{ {
index === 3 ? list.map(item=><div key={item} className="item-bubble">{item}</div>) : index === 5 ? list2.map(item=><div key={item} className="item-bubble">{item}</div>): index === 3 ? list.map(item=><div key={item} className="item-bubble">{item}</div>) : index === 5 ? list2.map(item=><div key={item} className="item-bubble">{item}</div>):
resultList[index].map((item,index)=>{ resultList[index].map((item)=>{
return <div className="item-bubble">{item.name || item.appName || item.skillsName}</div> return <div key={item?.name || item?.appName || item?.skillsName} className="item-bubble" onClick={()=>routerPath(item,index)}>{item?.name || item?.appName || item?.skillsName}</div>
}) })
} }
</Space> </Space>
...@@ -121,7 +186,7 @@ const {IndustryFlightSkills} = flightSkillsApi ...@@ -121,7 +186,7 @@ const {IndustryFlightSkills} = flightSkillsApi
<div className="title">行业新闻</div> <div className="title">行业新闻</div>
<div className="body"> <div className="body">
{ {
list.map(item=>(<div key={item.id} className="body-item"> list?.map(item=>(<div key={item.id} className="body-item">
<div className="item-label"> <div className="item-label">
{item.newsTitle} {item.newsTitle}
</div> </div>
...@@ -141,7 +206,7 @@ const {IndustryFlightSkills} = flightSkillsApi ...@@ -141,7 +206,7 @@ const {IndustryFlightSkills} = flightSkillsApi
<div className="title">招标快讯</div> <div className="title">招标快讯</div>
<div className="body"> <div className="body">
{ {
list.map(item=>(<div className="body-item"> list?.map(item=>(<div key={item.id} className="body-item">
<div className="item-label"> <div className="item-label">
<div className="label-top" title={item.tenderContent}> <div className="label-top" title={item.tenderContent}>
{item.tenderContent} {item.tenderContent}
...@@ -168,15 +233,15 @@ const {IndustryFlightSkills} = flightSkillsApi ...@@ -168,15 +233,15 @@ const {IndustryFlightSkills} = flightSkillsApi
boxIndex={2} boxIndex={2}
leftRenderDom={{ leftRenderDom={{
columns: [ columns: [
{ noFor: true, element: <RotationChart /> }, // { noFor: true, element: <RotationChart /> },
...leftDomList // ...leftDomList
], ],
}} }}
rightRenderDom={{ rightRenderDom={{
columns: [ columns: [
{ element: <Map /> }, { element: <Map /> },
{ element: rightTopDomList as JSX.Element}, // { element: rightTopDomList as JSX.Element},
{ element: rightBottomDomList as JSX.Element}, // { element: rightBottomDomList as JSX.Element},
], ],
}} }}
/> />
......
pages/home/waterfallFlowBody/styled.tsx
...@@ -12,7 +12,6 @@ export const Box = styled.div` ...@@ -12,7 +12,6 @@ export const Box = styled.div`
.item { .item {
height: 343px; height: 343px;
transition: all 0.5s; transition: all 0.5s;
cursor: pointer;
&-title { &-title {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
......
pages/jobServices/api/index.tsx
...@@ -28,7 +28,7 @@ export interface ListPageJobInfoResp { ...@@ -28,7 +28,7 @@ export interface ListPageJobInfoResp {
export default { export default {
//web-作业服务-分页 //web-作业服务-分页
listPageJobServicesInfo: (params: ListPageJobInfoParams): Promise<Response<ListPageJobInfoResp>> => { listPageJobServicesInfo: (params: ListPageJobInfoParams,option:{}): Promise<Response<ListPageJobInfoResp>> => {
return request('/release/work/queryTaskServiceList', 'post', params) return request('/release/work/queryTaskServiceList', 'post', params,option)
} },
} }
\ No newline at end of file
pages/jobServices/detail/[pid].page.tsx → pages/jobServices/detail/[id].page.tsx
import React from 'react' import React,{useEffect, useState} from 'react'
import Layout from "~/components/layout"; import Layout from "~/components/layout";
import {Box} from './styled'; import {Box} from './styled';
import { Tabs , Button } from 'antd'; import { Tabs , Button } from 'antd';
import type { TabsProps } from 'antd'; import type { TabsProps } from 'antd';
import Evaluate from './components/evaluate'; import Evaluate from './components/evaluate';
import { useRouter } from "next/router";
import api , {ListPageJobInfoResp} from './api';
import Image from 'next/image';
export default function JobServicesDetail() { export default function JobServicesDetail() {
const router = useRouter();
const [id, setId] = useState<number | null>(null);
const [detail,setDetail] = useState<ListPageJobInfoResp | null>()
const onChange = (key: string) => { const onChange = (key: string) => {
console.log(key); console.log(key);
}; };
...@@ -14,24 +22,41 @@ export default function JobServicesDetail() { ...@@ -14,24 +22,41 @@ export default function JobServicesDetail() {
{ {
key: '1', key: '1',
label: `团队介绍`, label: `团队介绍`,
children: `详情`, children: <Image width={1100} height={800} src={detail?.teamPoster ? detail?.teamPoster : ''} alt='error'/>,
}, },
{ {
key: '2', key: '2',
label: `团队评价`, label: `团队评价`,
children: <Evaluate />, children: <Evaluate evaluateInfo={detail?.evaluateInfo!}/>,
}, },
]; ];
useEffect(()=>{
setId(Number(router.query.id))
},[router])
useEffect(() => {
if (id) {
api
.listDetailJobServicesInfo({id})
.then((res) => {
setDetail(res.result || null);
});
}
console.log(id);
}, [id]);
return ( return (
<Layout> <Layout>
<Box> <Box>
<div className='top'> <div className='top'>
<div className="top-image"></div> <div className="top-image">
<Image width={300} height={300} src={detail?.pictureUrl ? detail?.pictureUrl : ''} alt='error'/>
</div>
<div className='top-right'> <div className='top-right'>
<div className='right-top'> <div className='right-top'>
<div className='title'> <div className='title'>
农田测绘 {detail?.serviceName}
</div> </div>
<div className='detail'> <div className='detail'>
<div className='tab'>专业飞手</div> <div className='tab'>专业飞手</div>
......
pages/jobServices/detail/api/index.tsx 0 → 100644
import request, { Response } from '~/api/request';
export interface ListPageJobInfoParams {
pageNo:number,
pageSize:number,
appTypeId?:number,
industryId?:number,
inspectionName?:string,
string?:number,
regionId?:number,
}
export interface JobDetail {
id?: number,
content?: string,
contentImgs?: string[] | null,
contentVideo?: string | null,
star?: number,
img?: string | null,
type?: number
}
export interface ListPageJobInfoResp {
id: number,
serviceName: string,
pictureUrl: string,
videoUrl: string,
teamPoster:string,
evaluateInfo:Array<JobDetail>,
item:number
}
export interface GetJobServicesDetailParams {
id: number
}
export default {
//web-作业服务-详情
listDetailJobServicesInfo: (params:GetJobServicesDetailParams): Promise<Response<ListPageJobInfoResp>> => {
return request('/release/work/selectInspection', 'get', params)
},
}
\ No newline at end of file
pages/jobServices/detail/components/evaluate/index.tsx
...@@ -2,33 +2,37 @@ import React from 'react' ...@@ -2,33 +2,37 @@ import React from 'react'
import {Box} from './styled'; import {Box} from './styled';
import { Rate } from 'antd'; import { Rate } from 'antd';
import Image from 'next/image'; import Image from 'next/image';
import {JobDetail} from '../../api';
export default function Evaluate() { interface EvaluateType {
evaluateInfo: Array<JobDetail>
}
const list = [{},{},{},{}] export default function Evaluate(props:EvaluateType) {
const list = [{},{},{},{}]
const { evaluateInfo } = props
console.log(evaluateInfo);
return ( return (
<Box> <Box>
{ {
list.map((item, i)=>( evaluateInfo?.map((item, i)=>(
<div className='item' key={i}> <div className='item' key={i}>
<div className='item-user'> <div className='item-user'>
<div className='item-user-image'> <div className='item-user-image'>
<Image className='image' height={42} width={42} src="" alt='#'/> <Image className='image' height={42} width={42} src={item.img ? item.img : ''} alt='#'/>
</div> </div>
<div className='item-user-info'> <div className='item-user-info'>
<div className="item-user-info-name">湖南139*****098</div> <div className="item-user-info-name">{item.star}</div>
<Rate style={{height:30}} disabled defaultValue={2} /> <Rate style={{height:30}} disabled defaultValue={item.star} />
</div> </div>
</div> </div>
<div className="item-content"> <div className="item-content">
<div className='item-content-label'>飞手很专业，不愧是经过专业培训的，及时高</div> <div className='item-content-label'>{item.content}</div>
<div className='item-content-image'> <div className='item-content-image'>
<div className='image-item'></div> {
<div className='image-item'></div> item.contentImgs?.map(item=><div className='image-item'><Image width={80} height={80} src={item} alt='error'/></div>)
<div className='image-item'></div> }
<div className='image-item'></div>
<div className='image-item'></div>
</div> </div>
<div className='item-content-time'> <div className='item-content-time'>
3月4日 3月4日
......
pages/jobServices/detail/components/evaluate/styled.tsx
...@@ -6,9 +6,10 @@ export default function Style() { ...@@ -6,9 +6,10 @@ export default function Style() {
export const Box = styled.div` export const Box = styled.div`
box-sizing: border-box; box-sizing: border-box;
overflow-y: auto;
height: 900px;
.item{ .item{
height: 180px; height: 180px;
margin-bottom: 30px;
&-user{ &-user{
display: flex; display: flex;
align-items: center; align-items: center;
......
pages/jobServices/detail/styled.tsx
...@@ -28,7 +28,6 @@ export const Box = styled.div` ...@@ -28,7 +28,6 @@ export const Box = styled.div`
height: 300px; height: 300px;
.right-top{ .right-top{
.title{ .title{
width: 283px;
height: 26px; height: 26px;
font-size: 28px; font-size: 28px;
font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI; font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
......
pages/jobServices/index.page.tsx
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import {Box} from './styled'; import {Box} from './styled';
import { Button, Select, Space, Tag } 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 } 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';
// 此函数在构建时被调用 // 此函数在构建时被调用
...@@ -19,12 +19,13 @@ interface ImageListType { ...@@ -19,12 +19,13 @@ interface ImageListType {
} }
export default function JobServices() { export default function JobServices() {
const router = useRouter(); const router = useRouter();
const [list,setList] = useState(["https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/90a52d3e-1ffa-4347-886e-a1c4535cf8b3.jpg","https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/665512fd-12e6-49a9-93c1-f9dcd0e82083.jpg"]) const [list,setList] = useState(["https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/90a52d3e-1ffa-4347-886e-a1c4535cf8b3.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 [rightDomList, setRightDomList] = useState(Array<{element:JSX.Element}>)
const leftDom = (item:Job) => { const leftDom = (item:Job) => {
return (<div key={item.id} className='item' onClick={() => router.push('/jobServices/detail/1')}> return (<div key={item.id} className='item' onClick={() => router.push(`/jobServices/detail/${item.id}`)}>
<div className="item-top"> <div className="item-top">
<div className="value"> <div className="value">
<div className="value-left"> <div className="value-left">
...@@ -47,30 +48,77 @@ export default function JobServices() { ...@@ -47,30 +48,77 @@ export default function JobServices() {
</div>) </div>)
} }
const [productList, setProductList] = useState(Array<{element:JSX.Element}>); const [filterResult, setFilterResult] = useState<AdapterResult>({}); //筛选结果
const [pageParams, setPageParams] = useState({
pageNo: 1,
pageSize: 16,
}); //分页器对象
const [count, setCount] = useState(0); //商品总数
const [abort, setAbort] = useState<AbortController | null>(null); //请求中断
const onPageChange = (page: number, pageSize: number) => {
setPageParams({
...pageParams,
pageNo: page,
});
};
useEffect(() => { useEffect(() => {
api //中断前一次列表请求
.listPageJobServicesInfo({ abort?.abort();
pageNo: 1, setAbort(new AbortController());
pageSize: 10, }, [filterResult, pageParams]);
})
.then((res) => {
setProductList(res.result?.list.map(item=>{return { element: leftDom(item) }}) || [])
});
//端口列表请求
useEffect(() => {
api
.listPageJobServicesInfo(
{
...filterResult,
...pageParams,
...router.query
},
{
signal: abort?.signal,
}
)
.then((res) => {
setProductList(res.result?.list.map(item=>{return { element:leftDom(item) }}) || []);
setCount(res.result?.totalCount || 0);
});
}, [abort]);
const onFilterChange = (
filterResult: FilterResult,
adapterFilterResult: AdapterResult
) => {
console.log("filterResult", filterResult, adapterFilterResult);
setFilterResult(adapterFilterResult);
};
const [query, setQuery] = useState<string | string[]>();
useEffect(() => {
console.log(router.query);
// if(router.query) setQuery(router.query)
setRightDomList(list.map(item=>{return {element:rightDom(item)}})) setRightDomList(list.map(item=>{return {element:rightDom(item)}}))
}, []); }, []);
const onFilterChange = (filterResult: FilterResult) => { useEffect(()=>{
console.log('filterResult', filterResult) if (router.query) {
} setFilterResult({...router.query});
}
},[router])
return ( return (
<Layout> <Layout>
<Box> <Box>
<Filter <Filter
types={[ "地域", "类目", "品牌"]} types={[ "地域", "行业", "应用"]}
showResultItem showResultItem
onChange={onFilterChange} onChange={onFilterChange}
></Filter> ></Filter>
...@@ -80,6 +128,16 @@ export default function JobServices() { ...@@ -80,6 +128,16 @@ export default function JobServices() {
rightRenderDom={{columns:rightDomList}} rightRenderDom={{columns:rightDomList}}
leftcontentstyle={{width:"924px",margin:{top:0,right:"16px",bottom:"16px",left:0}}} leftcontentstyle={{width:"924px",margin:{top:0,right:"16px",bottom:"16px",left:0}}}
/> />
<Pagination
current={pageParams.pageNo}
pageSize={pageParams.pageSize}
showSizeChanger={false}
showQuickJumper
total={count}
onChange={onPageChange}
hideOnSinglePage={true}
style={{ marginTop: 20 }}
/>
</div> </div>
</Box> </Box>
</Layout> </Layout>
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论