Skip to content

W
web
提交 77a83081 作者: 曹云
操作

改-首页-地图-全国维修接口（机构网点），服务网点接口对接

上级 0f44fa60
正在显示 包含 430 行增加 和 170 行删除
pages/home/waterfallFlowBody/components/map/api/index.tsx
import request, { Response } from "~/api/request"; import request, { Response } from '~/api/request'
export interface PositioningInfoParams { export interface PositioningInfoParams {
lat?: number; lat: number
lon?: number; lon: number
pageNo?:number, pageNo: number
pageSize?:number pageSize: number
} }
export interface Entiy { export interface Entiy {
dizhi: string; dizhi: string
jd: number; jd: number
wd: number; wd: number
range: number; range: number
} }
export interface ListPageJobInfoResp { export interface ListPageJobInfoType {
id: number; address: string
adCode: string; name: string
province: string; lon: number
locationList: Array<Entiy>; lat: number
distance: number
} }
export interface FlyerBitmapEntiy { export interface FlyerBitmapEntiy {
flyerName: string, flyerName: string
phoneNum: string, phoneNum: string
lon: number, lon: number
lat: number, lat: number
distance: number distance: number
} }
export interface UavBitmapEntiy { export interface UavBitmapEntiy {
uavName: string, uavName: string
online: number, online: number
lon: number, lon: number
lat: number, lat: number
distance: number, distance: number
id: string id: string
} }
export interface BitmapInfo<T> { export interface BitmapInfo<T> {
pageNo: number, pageNo: number
pageSize: number, pageSize: number
list: T[], list: T[]
totalCount: number, totalCount: number
totalPage: number totalPage: number
} }
...@@ -48,19 +49,25 @@ export default { ...@@ -48,19 +49,25 @@ export default {
//web-首页-地图-全国点位 //web-首页-地图-全国点位
listPositioningInfo: ( listPositioningInfo: (
params: PositioningInfoParams params: PositioningInfoParams
): Promise<Response<ListPageJobInfoResp[]>> => { ): Promise<Response<BitmapInfo<ListPageJobInfoType>>> => {
return request("/release/website/getWebsiteList", "get", params); return request('/release/website/getWebsiteList', 'get', params)
}, },
//web-首页-地图-全国飞手 //web-首页-地图-全国飞手
listFlyerBitmap: ( listFlyerBitmap: (
params: PositioningInfoParams params: PositioningInfoParams
): Promise<Response<BitmapInfo<FlyerBitmapEntiy>>> => { ): Promise<Response<BitmapInfo<FlyerBitmapEntiy>>> => {
return request("/release/website/flyer/bitmap", "get", params); return request('/release/website/flyer/bitmap', 'get', params)
}, },
//web-首页-地图-全国无人机 //web-首页-地图-全国无人机
listUavBitmap: ( listUavBitmap: (
params: PositioningInfoParams params: PositioningInfoParams
): Promise<Response<BitmapInfo<UavBitmapEntiy>>> => { ): Promise<Response<BitmapInfo<UavBitmapEntiy>>> => {
return request("/release/website/uav/bitmap", "get", params); return request('/release/website/uav/bitmap', 'get', params)
}, },
}; //web-首页-地图-全国维修-海点数据
listMaintainBitmap: (
params: PositioningInfoParams
): Promise<Response<BitmapInfo<ListPageJobInfoType>>> => {
return request('/release/website/maintain/bitmap', 'get', params)
},
}
pages/home/waterfallFlowBody/components/map/moreServicePoints/index.page.tsx
...@@ -22,19 +22,21 @@ export default function MoreServicePoints() { ...@@ -22,19 +22,21 @@ export default function MoreServicePoints() {
//初始化地图 //初始化地图
const init = async () => { 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'
)
await AMapLoader.load({ await AMapLoader.load({
key: '87b424e68754efc3ba9d11ae07475091', // 申请好的Web端开发者Key，首次调用 load 时必填 key: '87b424e68754efc3ba9d11ae07475091', // 申请好的Web端开发者Key，首次调用 load 时必填
version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15 version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: [''] // 需要使用的的插件列表，如比例尺'AMap.Scale'等 plugins: [''], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
}) })
.then(async AMap => { .then(async (AMap) => {
Amap = AMap Amap = AMap
MAP = new AMap.Map('container', { MAP = new AMap.Map('container', {
// 设置地图容器id // 设置地图容器id
viewMode: '3D', // 是否为3D地图模式 viewMode: '3D', // 是否为3D地图模式
zoom: 9, // 初始化地图级别 zoom: 9, // 初始化地图级别
center: [113.93029, 22.53291] // 初始化地图中心点位置 center: [113.93029, 22.53291], // 初始化地图中心点位置
}) })
//用户定位 //用户定位
AMap.plugin('AMap.Geolocation', function () { AMap.plugin('AMap.Geolocation', function () {
...@@ -43,10 +45,13 @@ export default function MoreServicePoints() { ...@@ -43,10 +45,13 @@ export default function MoreServicePoints() {
timeout: 10000, //超过10秒后停止定位，默认：5s timeout: 10000, //超过10秒后停止定位，默认：5s
position: 'RB', //定位按钮的停靠位置 position: 'RB', //定位按钮的停靠位置
offset: [10, 20], //定位按钮与设置的停靠位置的偏移量，默认：[10, 20] offset: [10, 20], //定位按钮与设置的停靠位置的偏移量，默认：[10, 20]
zoomToAccuracy: true //定位成功后是否自动调整地图视野到定位点 zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点
}) })
MAP.addControl(geolocation) MAP.addControl(geolocation)
geolocation.getCurrentPosition(function (status: string, result: any) { geolocation.getCurrentPosition(function (
status: string,
result: any
) {
console.log(result) console.log(result)
if (status == 'complete') { if (status == 'complete') {
...@@ -71,7 +76,7 @@ export default function MoreServicePoints() { ...@@ -71,7 +76,7 @@ export default function MoreServicePoints() {
} }
await mapEntiy(0) await mapEntiy(0)
}) })
.catch(e => { .catch((e) => {
console.log(e) console.log(e)
}) })
} catch (error) { } catch (error) {
...@@ -81,16 +86,15 @@ export default function MoreServicePoints() { ...@@ -81,16 +86,15 @@ export default function MoreServicePoints() {
const showPositioningInfo = async (index: number, data?: UserInfoType) => { const showPositioningInfo = async (index: number, data?: UserInfoType) => {
const res = await api.listPositioningInfo({ const res = await api.listPositioningInfo({
lon: userPositioning?.lon || data?.lon || 113.93029, lon: userPositioning?.lon || data?.lon || 113.93029,
lat: userPositioning?.lat || data?.lat || 22.53291 lat: userPositioning?.lat || data?.lat || 22.53291,
pageNo: 1,
pageSize: 10,
}) })
const list = res.result const list = res.result?.list
?.map(item => item.locationList)
.flat()
.filter((item: { dizhi: string }) => item.dizhi.includes('省'))
const markerList: any = [] const markerList: any = []
if (list?.length) { if (list?.length) {
list?.map(item => { list?.map((item) => {
const EntiyValue = addEntiy(item.jd, item.wd, item.dizhi) const EntiyValue = addEntiy(item.lon, item.lat, item.address)
markerList.push(EntiyValue) markerList.push(EntiyValue)
}) })
setServicePoints(list) setServicePoints(list)
...@@ -100,17 +104,21 @@ export default function MoreServicePoints() { ...@@ -100,17 +104,21 @@ export default function MoreServicePoints() {
//自适应显示多个点位 //自适应显示多个点位
MAP?.setFitView() MAP?.setFitView()
} }
const showFlyerBitmap = async (index: number, data?: UserInfoType, pageSize?: number) => { const showFlyerBitmap = async (
index: number,
data?: UserInfoType,
pageSize?: number
) => {
const res = await api.listFlyerBitmap({ const res = await api.listFlyerBitmap({
lon: userPositioning?.lon || data?.lon || 113.93029, lon: userPositioning?.lon || data?.lon || 113.93029,
lat: userPositioning?.lat || data?.lat || 22.53291, lat: userPositioning?.lat || data?.lat || 22.53291,
pageNo: 1, pageNo: 1,
pageSize: pageSize || 40 pageSize: pageSize || 40,
}) })
const list = res.result?.list const list = res.result?.list
const markerList: any = [] const markerList: any = []
if (list?.length) { if (list?.length) {
list?.map(item => { list?.map((item) => {
const EntiyValue = addEntiy(item.lon, item.lat, item.flyerName) const EntiyValue = addEntiy(item.lon, item.lat, item.flyerName)
markerList.push(EntiyValue) markerList.push(EntiyValue)
}) })
...@@ -121,17 +129,42 @@ export default function MoreServicePoints() { ...@@ -121,17 +129,42 @@ export default function MoreServicePoints() {
//自适应显示多个点位 //自适应显示多个点位
MAP?.setFitView() MAP?.setFitView()
} }
const showMaintainBitmap = async (
index: number,
data?: UserInfoType,
pageSize?: number
) => {
const res = await api.listMaintainBitmap({
lon: userPositioning?.lon || data?.lon || 113.93029,
lat: userPositioning?.lat || data?.lat || 22.53291,
pageNo: 1,
pageSize: pageSize || 40,
})
const list = res.result?.list
const markerList: any = []
if (list?.length) {
list?.map((item) => {
const EntiyValue = addEntiy(item.lon, item.lat, item.address)
markerList.push(EntiyValue)
})
setServicePoints(list)
if (markerList.length) MAP?.add(markerList)
setMarkerCol(markerList)
}
//自适应显示多个点位
MAP?.setFitView()
}
const showUavBitmap = async (index: number, data?: UserInfoType) => { const showUavBitmap = async (index: number, data?: UserInfoType) => {
const res = await api.listUavBitmap({ const res = await api.listUavBitmap({
lon: userPositioning?.lon || data?.lon || 113.93029, lon: userPositioning?.lon || data?.lon || 113.93029,
lat: userPositioning?.lat || data?.lat || 22.53291, lat: userPositioning?.lat || data?.lat || 22.53291,
pageNo: 1, pageNo: 1,
pageSize: 40 pageSize: 40,
}) })
const list = res.result?.list const list = res.result?.list
const markerList: any = [] const markerList: any = []
if (list?.length) { if (list?.length) {
list?.map(item => { list?.map((item) => {
const EntiyValue = addEntiy(item.lon, item.lat, item.uavName) const EntiyValue = addEntiy(item.lon, item.lat, item.uavName)
markerList.push(EntiyValue) markerList.push(EntiyValue)
}) })
...@@ -155,7 +188,7 @@ export default function MoreServicePoints() { ...@@ -155,7 +188,7 @@ export default function MoreServicePoints() {
} else if (index === 2) { } else if (index === 2) {
showUavBitmap(index, data) showUavBitmap(index, data)
} else { } else {
showFlyerBitmap(index, data, 30) showMaintainBitmap(index, data, 30)
} }
setMapItem(index) setMapItem(index)
} }
...@@ -165,14 +198,14 @@ export default function MoreServicePoints() { ...@@ -165,14 +198,14 @@ export default function MoreServicePoints() {
const icons = new Amap.Icon({ const icons = new Amap.Icon({
size: new Amap.Size(60, 60), // 图标尺寸 size: new Amap.Size(60, 60), // 图标尺寸
image: icon.src, // Icon的图像 image: icon.src, // Icon的图像
imageSize: new Amap.Size(60, 60) // 根据所设置的大小拉伸或压缩图片 imageSize: new Amap.Size(60, 60), // 根据所设置的大小拉伸或压缩图片
}) })
const marker = new Amap.Marker({ const marker = new Amap.Marker({
position: new Amap.LngLat(lon, lat), position: new Amap.LngLat(lon, lat),
offset: new Amap.Pixel(-10, -10), offset: new Amap.Pixel(-10, -10),
icon: icons, // 添加 Icon 实例 icon: icons, // 添加 Icon 实例
title: name, title: name,
zoom: 13 zoom: 13,
}) })
return marker return marker
} }
...@@ -182,12 +215,12 @@ export default function MoreServicePoints() { ...@@ -182,12 +215,12 @@ export default function MoreServicePoints() {
var infoWindow = new Amap.InfoWindow({ var infoWindow = new Amap.InfoWindow({
position: p, position: p,
offset: new Amap.Pixel(20, -10), offset: new Amap.Pixel(20, -10),
content: item.dizhi || item.flyerName || item.uavName content: item.dizhi || item.flyerName || item.uavName || item.address,
}) })
infoWindow.open(MAP) infoWindow.open(MAP)
if (item.dizhi) { if (item.dizhi) {
return MAP?.setCenter([item.jd, item.wd]) return MAP?.setCenter([item.jd, item.wd])
} else if (item.flyerName || item.uavName) { } else if (item.flyerName || item.uavName || item.address) {
return MAP?.setCenter([item.lon, item.lat]) return MAP?.setCenter([item.lon, item.lat])
} }
return message.warning('暂无位置信息') return message.warning('暂无位置信息')
...@@ -204,26 +237,48 @@ export default function MoreServicePoints() { ...@@ -204,26 +237,48 @@ export default function MoreServicePoints() {
<Layout> <Layout>
<Box> <Box>
<div className="title"> <div className="title">
<div onClick={() => mapEntiy(0)} className={`item ${mapItem === 0 ? 'active' : ''}`}> <div
onClick={() => mapEntiy(0)}
className={`item ${mapItem === 0 ? 'active' : ''}`}
>
服务网点 服务网点
</div> </div>
<div onClick={() => mapEntiy(1)} className={`item ${mapItem === 1 ? 'active' : ''}`}> <div
onClick={() => mapEntiy(1)}
className={`item ${mapItem === 1 ? 'active' : ''}`}
>
培训网点 培训网点
</div> </div>
<div onClick={() => mapEntiy(2)} className={`item ${mapItem === 2 ? 'active' : ''}`}> <div
onClick={() => mapEntiy(2)}
className={`item ${mapItem === 2 ? 'active' : ''}`}
>
租赁网点 租赁网点
</div> </div>
<div onClick={() => mapEntiy(3)} className={`item ${mapItem === 3 ? 'active' : ''}`}> <div
onClick={() => mapEntiy(3)}
className={`item ${mapItem === 3 ? 'active' : ''}`}
>
机构网点 机构网点
</div> </div>
</div> </div>
<div className="content"> <div className="content">
<div className="left"> <div className="left">
<div className="left-title">服务网点</div> {mapItem === 0 && <div className="left-title">服务网点</div>}
{mapItem === 1 && <div className="left-title">培训网点</div>}
{mapItem === 2 && <div className="left-title">租赁网点</div>}
{mapItem === 3 && <div className="left-title">机构网点</div>}
<div className="left-content"> <div className="left-content">
{servicePoints.map((item: any, index: number) => ( {servicePoints.map((item: any, index: number) => (
<div key={item.id} onClick={() => moveTo(item, index)} className="left-content-item" title={item.dizhi || item.flyerName || item.uavName}> <div
{item.dizhi || item.flyerName || item.uavName} key={item.id}
onClick={() => moveTo(item, index)}
className="left-content-item"
title={
item.dizhi || item.flyerName || item.uavName || item.address
}
>
{item.dizhi || item.flyerName || item.uavName || item.address}
</div> </div>
))} ))}
</div> </div>
......
pages/jobServices/detail/[id].page.tsx
import React,{useEffect, useState} from 'react' import React, { useEffect, useState } from 'react'
import Layout from "~/components/layout"; import Layout from '~/components/layout'
import {Box} from './styled'; import { Box } from './styled'
import { Tabs , Button } from 'antd'; import moment from 'moment'
import type { TabsProps } from 'antd'; import {
import Evaluate from './components/evaluate'; Tabs,
import { useRouter } from "next/router"; Modal,
import api , {ListPageJobInfoResp} from './api'; Button,
import Image from 'next/image'; Form,
message,
DatePicker,
Image as AImage,
Input,
} from 'antd'
import { RangePickerProps } from 'antd/es/date-picker'
import type { TabsProps } from 'antd'
import Evaluate from './components/evaluate'
import { useRouter } from 'next/router'
import api, { ListPageJobInfoResp } from './api'
import Image from 'next/image'
const { RangePicker } = DatePicker
const { TextArea } = Input
export default function JobServicesDetail() { export default function JobServicesDetail() {
const router = useRouter(); const router = useRouter()
const [id, setId] = useState<number | null>(null); const [id, setId] = useState<number | null>(null)
const [detail,setDetail] = useState<ListPageJobInfoResp | null>() const [detail, setDetail] = useState<ListPageJobInfoResp | null>()
const [sale,setSale] = useState<string | null>() const [sale, setSale] = useState<string | null>()
const onChange = (key: string) => { const onChange = (key: string) => {
console.log(key); console.log(key)
}; }
const items: TabsProps['items'] = [ const items: TabsProps['items'] = [
{ {
key: '1', key: '1',
label: `团队介绍`, label: `团队介绍`,
children: <div className='teamIntroduction'> children: (
<div className="teamIntroduction">
{/* <Image width={1100} height={800} src={detail?.teamPoster ? detail?.teamPoster : ''} alt='error'/> */} {/* <Image width={1100} height={800} src={detail?.teamPoster ? detail?.teamPoster : ''} alt='error'/> */}
<img style={{width:"100%"}} src={detail?.teamPoster ? detail?.teamPoster : ''} alt="error" /> <img
</div>, style={{ width: '100%' }}
src={detail?.teamPoster ? detail?.teamPoster : ''}
alt="error"
/>
</div>
),
}, },
{ {
key: '2', key: '2',
label: `团队评价`, label: `团队评价`,
children: <Evaluate evaluateInfo={detail?.evaluateInfo || []}/>, children: <Evaluate evaluateInfo={detail?.evaluateInfo || []} />,
}, },
]; ]
useEffect(()=>{ useEffect(() => {
setId(Number(router.query.id)) setId(Number(router.query.id))
},[router]) }, [router])
useEffect(() => { useEffect(() => {
if (id) { if (id) {
api api.listDetailJobServicesInfo({ id }).then((res) => {
.listDetailJobServicesInfo({id}) setDetail(res.result || null)
.then((res) => { })
setDetail(res.result || null);
});
} }
}, [id]); }, [id])
useEffect(()=>{ useEffect(() => {
setSale((Math.floor(Math.random() * 901) + 100).toFixed(0)) setSale((Math.floor(Math.random() * 901) + 100).toFixed(0))
},[]) }, [])
//预约弹框
const [visible, setVisible] = useState(false)
const [formDate] = Form.useForm()
const [isModalOpen, setIsModalOpen] = useState(false)
const [loading, setLoading] = useState(false)
const [areaValue, setAreaValue] = useState<string>()
const disabledDate: RangePickerProps['disabledDate'] = (current) => {
return current && current < moment().endOf('day')
}
const handleOk = () => {
setLoading(true)
formDate
.validateFields()
.then(async (values) => {
console.log(values)
const res = await api.insertOrderTask({
startTime: moment(new Date(values.dateDetail[0])).format(
'YYYY-MM-DD'
),
endTime: moment(new Date(values.dateDetail[1])).format('YYYY-MM-DD'),
})
console.log(res)
// formDate.resetFields()
// setLoading(false)
// setIsModalOpen(false)
})
.catch((err) => {
message
.warning({
content: err.errorFields[0].errors[0],
})
.then()
setLoading(false)
})
}
const handleCancel = () => {
setIsModalOpen(false)
formDate.resetFields()
}
const onchanges = (values: any) => {
if (values) {
const day = new Date(values[1]).getTime() - new Date(values[0]).getTime()
const totalDays = Math.floor(day / (1000 * 3600 * 24))
// setDays(totalDays)
} else {
// setDays(undefined)
}
}
return ( return (
<Layout> <Layout>
<Box> <Box>
<div className='top'> <div className="top">
<div className="top-image"> <div className="top-image">
<Image fill src={detail?.pictureUrl ? detail?.pictureUrl : ''} alt='error'/> <Image
fill
src={detail?.pictureUrl ? detail?.pictureUrl : ''}
alt="error"
/>
</div> </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>
{detail?.serviceName} <div className="detail">
<div className="tab">专业飞手</div>
<span className="content">飞手需通过认证培训才可作业</span>
</div> </div>
<div className='detail'> <div className="more">
<div className='tab'>专业飞手</div> <div className="tab filst">测绘场景榜第1名</div>
<span className='content'>飞手需通过认证培训才可作业</span> <div className="tab">7x24小时服务</div>
<div className="tab">{`月售${sale}`}</div>
</div> </div>
<div className='more'>
<div className='tab filst'>测绘场景榜第1名</div>
<div className='tab'>7x24小时服务</div>
<div className='tab'>{`月售${sale}`}</div>
</div> </div>
<div className="right-bottom">
<div className="bottom-btn">
<Button className="btn-left" size="small" type="primary">
电话沟通
</Button>
<Button
onClick={() => setIsModalOpen(true)}
className="btn-right"
size="small"
type="primary"
>
立即预约
</Button>
</div> </div>
<div className='right-bottom'>
<div className='bottom-btn'>
<Button className='btn-left' size='small' type="primary">电话沟通</Button>
<Button className='btn-right' size='small' type="primary">立即预约</Button>
</div> </div>
</div> </div>
</div> </div>
<Tabs
className="tabs"
defaultActiveKey="1"
items={items}
onChange={onChange}
/>
<Modal
wrapClassName="reservation"
open={isModalOpen}
onOk={handleOk}
onCancel={handleCancel}
getContainer={false}
maskClosable={false}
width={420}
footer={[
<Button
style={{ width: '100%', height: 44 }}
key="submit"
type="primary"
loading={loading}
onClick={handleOk}
>
立即预约
</Button>,
]}
>
<div className="title">
<div className="left">
<AImage
preview={{ visible: false }}
src={detail?.pictureUrl ? detail?.pictureUrl : ''}
onClick={() => setVisible(true)}
style={{ width: 58, height: 58 }}
/>
<div style={{ display: 'none' }}>
<AImage.PreviewGroup
preview={{
visible,
onVisibleChange: (vis) => setVisible(vis),
}}
>
<AImage src={detail?.pictureUrl ? detail?.pictureUrl : ''} />
</AImage.PreviewGroup>
</div>
</div>
<div className="right">{detail?.serviceName}</div>
</div>
<Form
form={formDate}
layout="vertical"
name="reservationForm"
initialValues={{ modifier: 'public' }}
className="form-data"
>
<Form.Item
style={{ flex: 1, marginRight: 16 }}
name="dateDetail"
rules={[{ required: true, message: '请选择日期' }]}
>
<RangePicker
style={{ width: 376, marginTop: 10 }}
disabledDate={disabledDate}
onChange={onchanges}
/>
</Form.Item>
<div>
任务描述(选填) 项目号、 业务负责人、
客户名称、演示设备(注明飞机、挂载、地面站)、现场联系人及电话
</div> </div>
<Tabs className='tabs' defaultActiveKey="1" items={items} onChange={onChange} /> <Form.Item
style={{ flex: 1, marginRight: 16 }}
name="taskDescription"
>
<TextArea
value={areaValue}
onChange={(e) => setAreaValue(e.target.value)}
placeholder="补充描述有助于方案沟通更高效哦~"
autoSize={{ minRows: 3, maxRows: 5 }}
style={{ width: 385, height: 72 }}
/>
</Form.Item>
</Form>
</Modal>
</Box> </Box>
</Layout> </Layout>
) )
......
pages/jobServices/detail/api/index.tsx
import request, { Response } from '~/api/request'; import request, { Response } from '~/api/request'
export interface ListPageJobInfoParams { export interface ListPageJobInfoParams {
pageNo:number, pageNo: number
pageSize:number, pageSize: number
appTypeId?:number, appTypeId?: number
industryId?:number, industryId?: number
inspectionName?:string, inspectionName?: string
string?:number, string?: number
regionId?:number, regionId?: number
} }
export interface JobDetail { export interface JobDetail {
id?: number, id?: number
content?: string, content?: string
contentImgs?: string[] | null, contentImgs?: string[] | null
contentVideo?: string | null, contentVideo?: string | null
star?: number, star?: number
img?: string | null, img?: string | null
type?: number, type?: number
name?:string, name?: string
time?:number | string time?: number | string
} }
export interface ListPageJobInfoResp { export interface ListPageJobInfoResp {
id: number, id: number
serviceName: string, serviceName: string
pictureUrl: string, pictureUrl: string
videoUrl: string, videoUrl: string
teamPoster:string, teamPoster: string
evaluateInfo:Array<JobDetail>, evaluateInfo: Array<JobDetail>
item:number item: number
} }
export interface GetJobServicesDetailParams { export interface GetJobServicesDetailParams {
id: number id: number
} }
export interface GetOrderTaskParams {
address?: string
city?: string
endTime: string
images?: []
inspectionId?: number
lat?: number
lon?: number
province?: string
startTime: string
taskDescription?: string
}
export default { export default {
//web-作业服务-详情 //web-作业服务-详情
listDetailJobServicesInfo: (params:GetJobServicesDetailParams): Promise<Response<ListPageJobInfoResp>> => { listDetailJobServicesInfo: (
params: GetJobServicesDetailParams
): Promise<Response<ListPageJobInfoResp>> => {
return request('/release/work/selectInspection', 'get', params) return request('/release/work/selectInspection', 'get', params)
}, },
//web-作业服务-详情-立即预约
insertOrderTask: (params: GetOrderTaskParams): Promise<Response<null>> => {
return request('/oms/serviceOrderTask/insertOrderTask', 'post', params)
},
} }
pages/jobServices/detail/styled.tsx
import styled from "styled-components" import styled from 'styled-components'
export default function Style() { export default function Style() {
return <></>; return <></>
} }
export const Box = styled.div` export const Box = styled.div`
...@@ -9,26 +9,26 @@ export const Box = styled.div` ...@@ -9,26 +9,26 @@ export const Box = styled.div`
width: 1200px; width: 1200px;
height: 1338px; height: 1338px;
margin-top: 18px; margin-top: 18px;
background-color: #FFFFFF; background-color: #ffffff;
.top{ .top {
display: flex; display: flex;
height: 300px; height: 300px;
padding: 24px 0 0 24px; padding: 24px 0 0 24px;
&-image{ &-image {
width: 300px; width: 300px;
height: 300px; height: 300px;
background-color: #F4F5F7; background-color: #f4f5f7;
border-radius: 6px; border-radius: 6px;
margin-right: 32px; margin-right: 32px;
position: relative; position: relative;
} }
&-right{ &-right {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
height: 300px; height: 300px;
.right-top{ .right-top {
.title{ .title {
height: 26px; height: 26px;
font-size: 28px; font-size: 28px;
font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI; font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
...@@ -36,23 +36,23 @@ export const Box = styled.div` ...@@ -36,23 +36,23 @@ export const Box = styled.div`
color: #090909; color: #090909;
line-height: 26px; line-height: 26px;
} }
.detail{ .detail {
display: flex; display: flex;
margin-top: 27px; margin-top: 27px;
.tab{ .tab {
width: 64px; width: 64px;
height: 18px; height: 18px;
line-height: 18px; line-height: 18px;
text-align: center; text-align: center;
background: linear-gradient(270deg, #3E62E5 0%, #3588F7 100%); background: linear-gradient(270deg, #3e62e5 0%, #3588f7 100%);
border-radius: 9px; border-radius: 9px;
font-size: 12px; font-size: 12px;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
color: #F6FDFE; color: #f6fdfe;
margin-right: 5px; margin-right: 5px;
} }
.content{ .content {
font-size: 14px; font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
...@@ -60,55 +60,73 @@ export const Box = styled.div` ...@@ -60,55 +60,73 @@ export const Box = styled.div`
line-height: 20px; line-height: 20px;
} }
} }
.more{ .more {
display: flex; display: flex;
margin-top: 25px; margin-top: 25px;
.tab{ .tab {
width: 131px; width: 131px;
height: 23px; height: 23px;
line-height: 23px; line-height: 23px;
text-align: center; text-align: center;
border-radius: 3px; border-radius: 3px;
font-family: MicrosoftYaHei; font-family: MicrosoftYaHei;
background-color: #F4F4F4; background-color: #f4f4f4;
color: #333333; color: #333333;
margin-right: 8px; margin-right: 8px;
&.filst{ &.filst {
color: #6E411E; color: #6e411e;
background-color: #F9E3D1; background-color: #f9e3d1;
} }
} }
} }
} }
.right-bottom{ .right-bottom {
.bottom-btn{ .bottom-btn {
.btn-left{ .btn-left {
width: 207px; width: 207px;
height: 40px; height: 40px;
background-color: #FFE4D1; background-color: #ffe4d1;
border: 1px solid #EBBAAF; border: 1px solid #ebbaaf;
font-family: MicrosoftYaHei; font-family: MicrosoftYaHei;
color: #FF552D; color: #ff552d;
letter-spacing: 1px; letter-spacing: 1px;
margin-right: 12px; margin-right: 12px;
} }
.btn-right{ .btn-right {
width: 207px; width: 207px;
height: 40px; height: 40px;
background: #FF552D; background: #ff552d;
font-family: MicrosoftYaHei; font-family: MicrosoftYaHei;
color: #FFFFFF; color: #ffffff;
letter-spacing: 1px; letter-spacing: 1px;
} }
} }
} }
} }
} }
.tabs{ .tabs {
padding: 0 24px; padding: 0 24px;
margin-top: 69px; margin-top: 69px;
.teamIntroduction{ .teamIntroduction {
width: 100%; width: 100%;
} }
} }
.reservation {
.title {
display: flex;
align-items: center;
padding-bottom: 25px;
.left {
width: 58px;
height: 58px;
background: #d8d8d8;
border-radius: 2px;
}
.right {
margin-left: 10px;
font-weight: 700;
font-size: 16px;
}
}
}
` `
pages/jobServices/index.page.tsx
...@@ -42,8 +42,9 @@ export default function JobServices() { ...@@ -42,8 +42,9 @@ export default function JobServices() {
{/* <div className="com">{item.teamName}</div> */} {/* <div className="com">{item.teamName}</div> */}
</div> </div>
<div className="value-right"> <div className="value-right">
<span className="money">¥{item.price}</span>{' '} {/* <span className="money">¥{item.price}</span> */}
<span className="unit">/平</span> {/* <span className="unit">/平</span> */}
<span className="money">获取报价</span>
</div> </div>
</div> </div>
</div> </div>
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论