Skip to content

W
web
提交 b148e1e0 作者: 曹云
操作

添-首页-页面数据

上级 5239364a
正在显示 包含 304 行增加 和 65 行删除
components/contentBox/left/index.tsx
import React from 'react';
import {Empty} from 'antd';
import { Box } from './styled';
import {leftBoxProps} from '../interface';
export default function Left(props:leftBoxProps) {
const { boxIndex , leftRenderDom , leftcontentstyle} = props
......@@ -26,6 +28,9 @@ export default function Left(props:leftBoxProps) {
}
</Box>
}
{
!leftRenderDom.columns.length ? <Empty description={"暂无数据"}/> : null
}
</div>
)
}
pages/equipmentLeasing/api/index.tsx
import request, { Response } from '~/api/request';
export interface ListPageGoodsInfoParams {
export interface ListPageDeviceInfoParams {
"brandId"?: number,
"districtId"?: number,
"modelId"?: number,
......@@ -11,23 +11,38 @@ export interface ListPageGoodsInfoParams {
"qualityId"?: number
}
export interface Goods {
"createTime": string,
"directoryId": number,
"directoryName": string,
"goodsName": string,
"goodsOneLevelTypeName": string,
"goodsTwoLevelTypeName": string,
"id": number,
"imgUrl": string,
"isCoupons": number,
"status": number
export interface Device {
id: number,
wareNo: string,
wareTitle: string,
wareTypeId: number,
wareStatus: number,
minDeposit: number,
minRent: number,
totalStock: number,
totalSale: number,
propInfoId: null,
createTime: string,
wareImgs: [
{
id: number,
wareInfoId: number,
imgUrl: string,
imgType: number
}
],
tags: string[]
}
export interface ListPageGoodsInfoResp {
export interface Advertisement {
id:number,
imageUrl:string
}
export interface ListPageDeviceInfoResp {
"pageNo": 1,
"pageSize": 10,
"list": Array<Goods>,
"list": Array<Device>,
"totalCount": 0,
"totalPage": 0
}
......@@ -35,7 +50,11 @@ export interface ListPageGoodsInfoResp {
export default {
//web-设备租赁-分页
listPageGoodsInfo: (params: ListPageGoodsInfoParams): Promise<Response<ListPageGoodsInfoResp>> => {
return request('/pms/webProductMall/listPageGoodsInfo', 'post', params)
listPageDeviceInfo: (params: ListPageDeviceInfoParams): Promise<Response<ListPageDeviceInfoResp>> => {
return request('/pms/webDevice/deviceList', 'post', params)
},
//web-设备租赁-广告
listAdvertisementInfo: (): Promise<Response<Array<Advertisement>>> => {
return request('/pms/webDevice/ad', 'get')
}
}
\ No newline at end of file
pages/equipmentLeasing/index.page.tsx
......@@ -5,8 +5,9 @@ import {Box} from './styled';
import Layout from "~/components/layout";
import ContentBox from '~/components/contentBox';
import Filter, { FilterResult } from "~/components/filter";
import Image from 'next/image';
import { FilterOptionResp } from "~/components/filter/api";
import api,{Device,Advertisement} from './api';
// 此函数在构建时被调用
export async function getStaticProps() {
//获取筛选数据，进行静态渲染
......@@ -20,29 +21,55 @@ type Props = {
};
export default function EquipmentLeasing(props:Props) {
const [productList, setProductList] = useState(Array<{element:JSX.Element}>);
const [rightProductList, setRightProductList] = useState(Array<{element:JSX.Element}>);
const router = useRouter();
const leftDom = <div className='item' onClick={() => router.push('/equipmentLeasing/detail/1')}>
const leftDom = (item:Device)=>{
return (<div key={item.id} className='item' onClick={() => router.push('/equipmentLeasing/detail/1')}>
<div className="item-top">
<div className="item-top-image"></div>
<div className="item-top-image"> <Image src={item.wareImgs[0].imgUrl} alt="error" width={116} height={116}/> </div>
</div>
<div className="item-bottom">
<div className="item-bottom-title">入云龙ll 1550入云龙ll入</div>
<div className="item-bottom-title">{item.wareTitle}</div>
<div className="item-bottom-price">
<span className="money">¥23</span>
<span className="money">¥{item.minRent}</span>
<span className="unit">/天起</span>
</div>
</div>
</div>
const rightDom = <div className="right-box-item right-item">
</div>)
}
</div>
const rightDom = (item:Advertisement) => {
return (
<div key={item.id} className="right-box-item right-item">
<Image src={item.imageUrl} alt="error" width={270} height={422}/>
</div>
)
}
const onFilterChange = (filterResult: FilterResult) => {
console.log('filterResult', filterResult)
}
useEffect(() => {
api
.listPageDeviceInfo({
pageNo: 1,
pageSize: 10,
})
.then((res) => {
setProductList(res.result?.list.map(item=>{return { element:leftDom(item) }}) || [])
});
api
.listAdvertisementInfo()
.then((res) => {
setRightProductList(res.result?.map(item=>{return { element:rightDom(item) }}) || [])
});
}, []);
return (
<Layout>
<Box>
......@@ -52,7 +79,7 @@ export default function EquipmentLeasing(props:Props) {
onChange={onFilterChange}
></Filter>
<div style={{paddingTop:13}}>
<ContentBox boxIndex={4} leftcontentstyle={{width:"916px",margin:{top:0,right:"12px",bottom:"12px",left:0}}} leftRenderDom={{columns:[{element:leftDom},{element:leftDom},{element:leftDom},{element:leftDom},{element:leftDom},{element:leftDom},{element:leftDom}]}} rightRenderDom={{columns:[{element:rightDom},{element:rightDom}]}}/>
<ContentBox boxIndex={4} leftcontentstyle={{width:"916px",margin:{top:0,right:"12px",bottom:"12px",left:0}}} leftRenderDom={{columns:productList}} rightRenderDom={{columns:rightProductList}}/>
</div>
</Box>
</Layout>
......
pages/flyingHandService/api/index.tsx
......@@ -9,12 +9,13 @@ export interface ListPageFlyingInfoParams {
}
export interface Flying {
curriculumName:string,
curriculumDesc:string,
supplierName:string,
id: number,
price: number,
supplierName: string,
curriculumName: string,
free: 0 | 1,
price:number,
id:number,
curriculumDesc: string,
videoUrl: string
}
export interface ListPageFlyingInfoResp {
......
pages/flyingHandService/index.page.tsx
import React , {useEffect,useState} from 'react';
import {Box} from './styled';
// import Image from 'next/image';
import Image from 'next/image';
import { Button, Select, Space } from "antd";
import Layout from "~/components/layout";
import ContentBox from '~/components/contentBox';
......@@ -8,11 +8,14 @@ import api , {Flying} from "./api";
export default function FlyingHandService() {
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 leftDom = (item:Flying)=>{
return (<div className='item' key={item.id}>
<div className='item-top'>
{/* <Image src={require("./assets/icon.png")} alt='#'/> */}
<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 className='item-bottom'>
<div className="bottom-title">{item.curriculumName}</div>
......@@ -23,7 +26,7 @@ export default function FlyingHandService() {
{
item.free ? <div className='price-right-label'>{item.price}</div> : <div>
<span className='price-right-label'>限免</span>
<span className='price-right-money'>{`¥${item.price}`}</span>
{/* <span className='price-right-money'>{`¥${item.price}`}</span> */}
</div>
}
</div>
......@@ -32,8 +35,11 @@ export default function FlyingHandService() {
</div>)
}
const rightDom = <div className='right-item' key={1}>
</div>
const rightDom = (item:string) => {
return ( <div className='right-box-item right-item' key={item}>
<Image src={item} alt="error" width={260} height={420}/>
</div>)
}
const onProvinceChange = (value: string) => {
console.log("省", value);
......@@ -43,12 +49,12 @@ export default function FlyingHandService() {
api
.listPageJobServicesInfo({
pageNo: 1,
pageSize: 10,
pageSize: 12,
})
.then((res) => {
setProductList(res.result?.list.map(item=>{return { element:leftDom(item) }}) || [])
});
setRightDomList(list.map(item=>{return {element:rightDom(item)}}))
}, []);
return (
......@@ -103,7 +109,7 @@ export default function FlyingHandService() {
</div>
<Button type="primary" className='btn'>报名学习课程</Button>
</div>
<ContentBox boxIndex={4} leftcontentstyle={{width:"925px",margin:{top:0,right:"15px",bottom:"15px",left:0}}} leftRenderDom={{columns:productList}} rightRenderDom={{columns:[{element:rightDom}]}}/>
<ContentBox boxIndex={4} leftcontentstyle={{width:"925px",margin:{top:0,right:"15px",bottom:"15px",left:0}}} leftRenderDom={{columns:productList}} rightRenderDom={{columns:rightDomList}}/>
</Box>
</Layout>
);
......
pages/home/waterfallFlowBody/api/index.ts 0 → 100644
import request, { Response } from '~/api/request';
export interface AllType {
id?: number,
name?: string,
appName?: string,
createTime?: string,
industryIcon?: string,
shortName?: null,
industryType?: null,
propagate1?: string,
propagate2?: string,
image?: string,
video?: string,
newsTitle?: string,
newsAuthor?: string,
userAccountId?: number,
surfaceImg?:string,
newsContents?: string,
updateTime?: string | null
tenderNewsId?: number,
tenderInfoNo?: string,
tenderContent?: string,
tenderPrice?: number,
apply?: number,
skillsName?: string
}
export interface FilterOptionResp {
id: number,
name: string
}
export interface RegionResp {
childInfo: RegionResp[] | null,
id: number,
level: number,
name: string,
pid: number
}
export const equipmentLeasingApi = {
deviceCategory: (): Promise<Response<Array<FilterOptionResp>>> => {
return request('/pms/webDevice/category');
},
deviceBrand: (): Promise<Response<Array<FilterOptionResp>>> => {
return request('/pms/webDevice/deviceBrand');
},
deviceModel: (): Promise<Response<Array<FilterOptionResp>>> => {
return request('/pms/webDevice/deviceModel');
},
}
export interface AppType {
id: number,
appName: string,
createTime: string
}
export interface IndustryType {
id: number,
industryIcon: string,
name: string,
shortName: null,
industryType: null,
propagate1: string,
propagate2: string,
image: string,
video: string
}
export const jobServicesApi = {
listAllAppType: (): Promise<Response<Array<AppType>>> => {
return request('/release/work/listAllAppType');
},
listAllIndustry: (): Promise<Response<Array<IndustryType>>> => {
return request('/release/work/listAllIndustry');
},
}
export const mallApi = {
listAllCategory: (): Promise<Response<Array<FilterOptionResp>>> => {
return request('/pms/webProductMall/category');
},
listAllParts: (): Promise<Response<Array<FilterOptionResp>>> => {
return request('/pms/webProductMall/parts');
},
listAllQuality: (): Promise<Response<Array<FilterOptionResp>>> => {
return request('/pms/webProductMall/quality');
},
}
export interface SkillsType {
id: 1,
skillsName: string
}
export const flightSkillsApi = {
IndustryFlightSkills: (): Promise<Response<Array<SkillsType>>> => {
return request('/release/curriculum/getIndustryFlightSkills');
},
}
export interface NewsPageType {
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
}
export interface ListPageNewsInfoResp {
pageNo: 1,
pageSize: 10,
list: Array<NewsPageType>,
totalCount: 0,
totalPage: 0
}
export interface ListTenderNewsInfoResp {
pageNo: 1,
pageSize: 10,
list: Array<NewsTenderType>,
totalCount: 0,
totalPage: 0
}
interface ListPageNewsInfoParams {
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
}
export const listNewsApi = {
listNewsPage: (params:ListPageNewsInfoParams): Promise<Response<ListPageNewsInfoResp>> => {
return request('/release/industry-news/listNewsPage',"post",params);
},
listNewTenderInfo: (params:ListTenderNewsInfoParams): Promise<Response<ListTenderNewsInfoResp>> => {
return request('/release/tender/listNewTenderInfo','post',params);
},
}
\ No newline at end of file
pages/home/waterfallFlowBody/components/rotationChart/index.tsx
import React from 'react';
import { Carousel } from 'antd';
import { Box } from "./styled"
import Image from 'next/image';
export default function RotationChart() {
const list = ["https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/pc%E7%AB%AF%E8%BD%AE%E6%92%AD%E5%9B%BE1.png","https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/ebf4fd5d-f8da-45b7-b0b3-282a31e43929.png","https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/6b62ee5b-d929-4dee-b441-258c81c14403.png","https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/0dd9e0f6-c1cd-485a-bdf4-8aeb84b1c67a.png","https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/bcdabab5-f2f8-4c6d-85c6-4d304d8bfe4c.png"]
return (
<Box>
<Carousel className='rotationChart' autoplay dots={{className:"botsBotton"}}>
<div>
<h3 className="contentStyle">1</h3>
</div>
<div>
<h3 className="contentStyle">2</h3>
</div>
<div>
<h3 className="contentStyle">3</h3>
</div>
<div>
<h3 className="contentStyle">4</h3>
</div>
{
list.map(item=>(<div key={item}>
<h3 className="contentStyle">
<Image src={item} alt="error" width={790} height={200}/>
</h3>
</div>))
}
</Carousel>
</Box>
)
......
pages/home/waterfallFlowBody/styled.tsx
......@@ -26,13 +26,11 @@ export const Box = styled.div`
display: flex;
justify-content: space-around;
align-items: center;
width: 150px;
&-icon {
width: 40px;
height: 40px;
}
&-label {
width: 100px;
height: 32px;
font-size: 20px;
font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
......@@ -74,7 +72,6 @@ export const Box = styled.div`
align-items: center;
padding: 0 25px;
height: 60px;
width: 80px;
font-size: 20px;
font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
font-weight: bold;
......@@ -116,7 +113,6 @@ export const Box = styled.div`
align-items: center;
padding: 0 25px;
height: 62px;
width: 80px;
font-size: 20px;
font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
font-weight: bold;
......@@ -141,6 +137,13 @@ export const Box = styled.div`
line-height: 21px;
word-wrap: break-word;
.label-top {
text-overflow: -o-ellipsis-lastline;
overflow: hidden; //溢出内容隐藏
text-overflow: ellipsis; //文本溢出部分用省略号表示
display: -webkit-box; //特别显示模式
-webkit-line-clamp: 2; //行数
line-clamp: 2;
-webkit-box-orient: vertical; //盒子中内容竖直排列
}
.label-bottom {
font-size: 15px;
......
pages/jobServices/index.page.tsx
......@@ -6,6 +6,7 @@ import ContentBox from '~/components/contentBox';
import { useRouter } from "next/router";
import Filter, { FilterResult } from "~/components/filter";
import api , {Job} from "./api";
import Image from 'next/image';
// 此函数在构建时被调用
export async function getServerSideProps() {
return {
......@@ -13,8 +14,14 @@ export async function getServerSideProps() {
};
}
interface ImageListType {
}
export default function JobServices() {
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 [rightDomList, setRightDomList] = useState(Array<{element:JSX.Element}>)
const leftDom = (item:Job) => {
return (<div key={item.id} className='item' onClick={() => router.push('/jobServices/detail/1')}>
......@@ -34,9 +41,11 @@ export default function JobServices() {
</div>)
}
const rightDom = <div className="advertisement" key={1}>
112312312312
</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 [productList, setProductList] = useState(Array<{element:JSX.Element}>);
......@@ -47,11 +56,10 @@ export default function JobServices() {
pageSize: 10,
})
.then((res) => {
// setProductList(res.result?.list || []);
setProductList(res.result?.list.map(item=>{return { element: leftDom(item) }}))
setProductList(res.result?.list.map(item=>{return { element: leftDom(item) }}) || [])
});
setRightDomList(list.map(item=>{return {element:rightDom(item)}}))
}, []);
const onFilterChange = (filterResult: FilterResult) => {
......@@ -62,14 +70,14 @@ export default function JobServices() {
<Layout>
<Box>
<Filter
types={[ "地域", "类目", "品牌", "型号"]}
types={[ "地域", "类目", "品牌"]}
showResultItem
onChange={onFilterChange}
></Filter>
<div style={{marginTop:18}}>
<ContentBox boxIndex={2}
leftRenderDom={{columns:productList}}
rightRenderDom={{columns:[{element:rightDom}]}}
rightRenderDom={{columns:rightDomList}}
leftcontentstyle={{width:"924px",margin:{top:0,right:"16px",bottom:"16px",left:0}}}
/>
</div>
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论