Skip to content

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

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

上级 0f44fa60
正在显示 包含 650 行增加 和 385 行删除
pages/home/waterfallFlowBody/components/map/api/index.tsx
import request, { Response } from "~/api/request";
import request, { Response } from '~/api/request'
export interface PositioningInfoParams {
lat?: number;
lon?: number;
pageNo?:number,
pageSize?:number
lat: number
lon: number
pageNo: number
pageSize: number
}
export interface Entiy {
dizhi: string;
jd: number;
wd: number;
range: number;
dizhi: string
jd: number
wd: number
range: number
}
export interface ListPageJobInfoResp {
id: number;
adCode: string;
province: string;
locationList: Array<Entiy>;
export interface ListPageJobInfoType {
address: string
name: string
lon: number
lat: number
distance: number
}
export interface FlyerBitmapEntiy {
flyerName: string,
phoneNum: string,
lon: number,
lat: number,
flyerName: string
phoneNum: string
lon: number
lat: number
distance: number
}
export interface UavBitmapEntiy {
uavName: string,
online: number,
lon: number,
lat: number,
distance: number,
uavName: string
online: number
lon: number
lat: number
distance: number
id: string
}
export interface BitmapInfo<T> {
pageNo: number,
pageSize: number,
list: T[],
totalCount: number,
pageNo: number
pageSize: number
list: T[]
totalCount: number
totalPage: number
}
......@@ -48,19 +49,25 @@ export default {
//web-首页-地图-全国点位
listPositioningInfo: (
params: PositioningInfoParams
): Promise<Response<ListPageJobInfoResp[]>> => {
return request("/release/website/getWebsiteList", "get", params);
): Promise<Response<BitmapInfo<ListPageJobInfoType>>> => {
return request('/release/website/getWebsiteList', 'get', params)
},
//web-首页-地图-全国飞手
listFlyerBitmap: (
params: PositioningInfoParams
): Promise<Response<BitmapInfo<FlyerBitmapEntiy>>> => {
return request("/release/website/flyer/bitmap", "get", params);
return request('/release/website/flyer/bitmap', 'get', params)
},
//web-首页-地图-全国无人机
listUavBitmap: (
params: PositioningInfoParams
): 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/index.tsx
import React, { Component, useEffect, useState } from "react";
import { message } from 'antd';
import { Box } from "./styled";
import api from "./api";
import React, { Component, useEffect, useState } from 'react'
import { message } from 'antd'
import { Box } from './styled'
import api from './api'
import icon from './assets/img.png'
import {useRouter} from 'next/router'
let MAP :any ;
let Amap:any;
import { useRouter } from 'next/router'
let MAP: any
let Amap: any
interface UserInfoType {
lat: number;
lon: number;
pageNo?:number,
pageSize?:number
}
lat: number
lon: number
pageNo?: number
pageSize?: number
}
export default function MapComponent() {
const router = useRouter()
const [mapItem, setMapItem] = useState(0);
const [userPositioning, setUserPositioning] = useState<UserInfoType>();
const [markerCol, setMarkerCol] = useState<any>([]);
const [mapItem, setMapItem] = useState(0)
const [userPositioning, setUserPositioning] = useState<UserInfoType>()
const [markerCol, setMarkerCol] = useState<any>([])
//初始化地图
const init = async () => {
try {
const AMapLoader = await import(
/* webpackChunkName: "amap" */ "@amap/amap-jsapi-loader"
);
await AMapLoader.load({
key: "87b424e68754efc3ba9d11ae07475091", // 申请好的Web端开发者Key，首次调用 load 时必填
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: [""], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
/* webpackChunkName: "amap" */ '@amap/amap-jsapi-loader'
)
await AMapLoader.load({
key: '87b424e68754efc3ba9d11ae07475091', // 申请好的Web端开发者Key，首次调用 load 时必填
version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: [''], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
})
.then(async (AMap) => {
Amap = AMap
MAP = new AMap.Map("container", {
MAP = new AMap.Map('container', {
// 设置地图容器id
viewMode: "3D", // 是否为3D地图模式
viewMode: '3D', // 是否为3D地图模式
zoom: 9, // 初始化地图级别
center: [113.93029, 22.53291], // 初始化地图中心点位置
});
})
//用户定位
AMap.plugin('AMap.Geolocation', function() {
AMap.plugin('AMap.Geolocation', function () {
const geolocation = new AMap.Geolocation({
enableHighAccuracy: true,//是否使用高精度定位，默认:true
timeout: 10000, //超过10秒后停止定位，默认：5s
position:'RB', //定位按钮的停靠位置
offset: [10, 20], //定位按钮与设置的停靠位置的偏移量，默认：[10, 20]
zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点
});
MAP.addControl(geolocation);
geolocation.getCurrentPosition(function(status:string,result:any){
if(status=='complete'){
onComplete(result)
}else{
onError(result)
}
});
});
//解析定位结果
async function onComplete(data:any) {
console.log('定位成功');
enableHighAccuracy: true, //是否使用高精度定位，默认:true
timeout: 10000, //超过10秒后停止定位，默认：5s
position: 'RB', //定位按钮的停靠位置
offset: [10, 20], //定位按钮与设置的停靠位置的偏移量，默认：[10, 20]
zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点
})
MAP.addControl(geolocation)
geolocation.getCurrentPosition(function (
status: string,
result: any
) {
if (status == 'complete') {
onComplete(result)
} else {
onError(result)
}
})
})
//解析定位结果
async function onComplete(data: any) {
console.log('定位成功')
setUserPositioning(data.position)
// return await mapEntiy(0,data.position);
}
//解析定位错误信息
async function onError(data:any) {
}
//解析定位错误信息
async function onError(data: any) {
// message.error(`定位失败
// 失败原因排查信息：${data.message}
// 浏览器返回信息：${data.originMessage}
// `)
}
}
await mapEntiy(0)
})
.catch((e) => {
console.log(e);
});
console.log(e)
})
} catch (error) {
console.log(error);
console.log(error)
}
};
const showPositioningInfo = async (index:number,data?:UserInfoType) => {
}
const showPositioningInfo = async (index: number, data?: UserInfoType) => {
const res = await api.listPositioningInfo({
lon: userPositioning?.lon || data?.lon || 113.93029,
lat: userPositioning?.lat || data?.lat || 22.53291,
});
const list = res.result
?.map((item) => item.locationList)
.flat()
.filter((item: { dizhi: string }) => item.dizhi.includes("省"));
const markerList: any = [];
pageNo: 1,
pageSize: 10,
})
const list = res.result?.list
const markerList: any = []
if (list?.length) {
list?.map((item) => {
const EntiyValue = addEntiy(item.jd, item.wd, item.dizhi);
markerList.push(EntiyValue);
});
if(markerList.length) MAP?.add(markerList);setMarkerCol([...markerList]);
const EntiyValue = addEntiy(item.lon, item.lat, item.address)
markerList.push(EntiyValue)
})
if (markerList.length) MAP?.add(markerList)
setMarkerCol([...markerList])
}
//自适应显示多个点位
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({
lon: userPositioning?.lon || data?.lon || 113.93029,
lat: userPositioning?.lat || data?.lat || 22.53291,
pageNo:1,
pageSize: pageSize || 40
});
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 = [];
const markerList: any = []
if (list?.length) {
list?.map((item) => {
const EntiyValue = addEntiy(item.lon, item.lat, item.flyerName);
markerList.push(EntiyValue);
});
if(markerList.length) MAP?.add(markerList);setMarkerCol(markerList)
const EntiyValue = addEntiy(item.lon, item.lat, item.flyerName)
markerList.push(EntiyValue)
})
if (markerList.length) MAP?.add(markerList)
setMarkerCol(markerList)
}
//自适应显示多个点位
MAP?.setFitView();
//自适应显示多个点位
MAP?.setFitView()
}
const showUavBitmap = async (index:number,data?:UserInfoType) => {
const showUavBitmap = async (index: number, data?: UserInfoType) => {
const res = await api.listUavBitmap({
lon: userPositioning?.lon || data?.lon || 113.93029,
lat: userPositioning?.lat || data?.lat || 22.53291,
pageNo:1,
pageSize: 40
});
lon: userPositioning?.lon || data?.lon || 113.93029,
lat: userPositioning?.lat || data?.lat || 22.53291,
pageNo: 1,
pageSize: 40,
})
const list = res.result?.list
const markerList: any = [];
const markerList: any = []
if (list?.length) {
list?.map((item) => {
const EntiyValue = addEntiy(item.lon, item.lat, item.uavName);
markerList.push(EntiyValue);
});
if(markerList.length) MAP?.add(markerList);setMarkerCol(markerList)
const EntiyValue = addEntiy(item.lon, item.lat, item.uavName)
markerList.push(EntiyValue)
})
if (markerList.length) MAP?.add(markerList)
setMarkerCol(markerList)
}
//自适应显示多个点位
MAP?.setFitView();
MAP?.setFitView()
}
//添加点位
const mapEntiy = async (index: number, data?: UserInfoType) => {
MAP?.remove(markerCol)
if (index === 0) {
showPositioningInfo(index, data)
} else if (index === 1) {
showFlyerBitmap(index, data, 30)
} else if (index === 2) {
showUavBitmap(index, data)
} else {
router.push('/home/waterfallFlowBody/components/map/moreServicePoints')
}
setMapItem(index)
}
//添加点位
const mapEntiy = async (index: number,data?:UserInfoType) => {
MAP?.remove(markerCol);
if (index === 0) {
showPositioningInfo(index,data)
}else if (index === 1) {
showFlyerBitmap(index,data,30)
} else if(index === 2) {
showUavBitmap(index,data)
}else{
router.push('/home/waterfallFlowBody/components/map/moreServicePoints')
}
setMapItem(index);
};
const addEntiy = ( lon: any, lat: any, name: string) => {
if (!Amap) return;
const icons = new Amap.Icon({
size: new Amap.Size(60, 60), // 图标尺寸
image: icon.src, // Icon的图像
imageSize: new Amap.Size(60, 60) // 根据所设置的大小拉伸或压缩图片
});
const marker = new Amap.Marker({
position: new Amap.LngLat(lon, lat),
offset: new Amap.Pixel(-10, -10),
icon: icons, // 添加 Icon 实例
title: name,
zoom: 13
});
return marker;
};
useEffect(() => {
(async () => {
await init();
})();
return MAP && MAP.destroy();
}, []);
const addEntiy = (lon: any, lat: any, name: string) => {
if (!Amap) return
const icons = new Amap.Icon({
size: new Amap.Size(60, 60), // 图标尺寸
image: icon.src, // Icon的图像
imageSize: new Amap.Size(60, 60), // 根据所设置的大小拉伸或压缩图片
})
const marker = new Amap.Marker({
position: new Amap.LngLat(lon, lat),
offset: new Amap.Pixel(-10, -10),
icon: icons, // 添加 Icon 实例
title: name,
zoom: 13,
})
return marker
}
useEffect(() => {
;(async () => {
await init()
})()
return MAP && MAP.destroy()
}, [])
return (
<Box className="right-box-item">
<div id="container" className="map"></div>
<div className="map-dosome">
<div
className={`itemBox ${mapItem === 0 ? "active" : ""}`}
className={`itemBox ${mapItem === 0 ? 'active' : ''}`}
onClick={() => mapEntiy(0)}
>
服务网点
</div>
<div
className={`itemBox ${mapItem === 1 ? "active" : ""}`}
className={`itemBox ${mapItem === 1 ? 'active' : ''}`}
onClick={() => mapEntiy(1)}
>
租赁网点
</div>
<div
className={`itemBox ${mapItem === 2 ? "active" : ""}`}
className={`itemBox ${mapItem === 2 ? 'active' : ''}`}
onClick={() => mapEntiy(2)}
>
培训网点
</div>
<div
className={`${mapItem === 3 ? "active" : ""}`}
className={`${mapItem === 3 ? 'active' : ''}`}
onClick={() => mapEntiy(3)}
>
更多网点
</div>
</div>
</Box>
);
)
}
pages/home/waterfallFlowBody/components/map/moreServicePoints/index.page.tsx
......@@ -22,19 +22,21 @@ export default function MoreServicePoints() {
//初始化地图
const init = async () => {
try {
const AMapLoader = await import(/* webpackChunkName: "amap" */ '@amap/amap-jsapi-loader')
const AMapLoader = await import(
/* webpackChunkName: "amap" */ '@amap/amap-jsapi-loader'
)
await AMapLoader.load({
key: '87b424e68754efc3ba9d11ae07475091', // 申请好的Web端开发者Key，首次调用 load 时必填
version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: [''] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
plugins: [''], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
})
.then(async AMap => {
.then(async (AMap) => {
Amap = AMap
MAP = new AMap.Map('container', {
// 设置地图容器id
viewMode: '3D', // 是否为3D地图模式
zoom: 9, // 初始化地图级别
center: [113.93029, 22.53291] // 初始化地图中心点位置
center: [113.93029, 22.53291], // 初始化地图中心点位置
})
//用户定位
AMap.plugin('AMap.Geolocation', function () {
......@@ -43,10 +45,13 @@ export default function MoreServicePoints() {
timeout: 10000, //超过10秒后停止定位，默认：5s
position: 'RB', //定位按钮的停靠位置
offset: [10, 20], //定位按钮与设置的停靠位置的偏移量，默认：[10, 20]
zoomToAccuracy: true //定位成功后是否自动调整地图视野到定位点
zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点
})
MAP.addControl(geolocation)
geolocation.getCurrentPosition(function (status: string, result: any) {
geolocation.getCurrentPosition(function (
status: string,
result: any
) {
console.log(result)
if (status == 'complete') {
......@@ -71,7 +76,7 @@ export default function MoreServicePoints() {
}
await mapEntiy(0)
})
.catch(e => {
.catch((e) => {
console.log(e)
})
} catch (error) {
......@@ -81,16 +86,15 @@ export default function MoreServicePoints() {
const showPositioningInfo = async (index: number, data?: UserInfoType) => {
const res = await api.listPositioningInfo({
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
?.map(item => item.locationList)
.flat()
.filter((item: { dizhi: string }) => item.dizhi.includes('省'))
const list = res.result?.list
const markerList: any = []
if (list?.length) {
list?.map(item => {
const EntiyValue = addEntiy(item.jd, item.wd, item.dizhi)
list?.map((item) => {
const EntiyValue = addEntiy(item.lon, item.lat, item.address)
markerList.push(EntiyValue)
})
setServicePoints(list)
......@@ -100,17 +104,21 @@ export default function MoreServicePoints() {
//自适应显示多个点位
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({
lon: userPositioning?.lon || data?.lon || 113.93029,
lat: userPositioning?.lat || data?.lat || 22.53291,
pageNo: 1,
pageSize: pageSize || 40
pageSize: pageSize || 40,
})
const list = res.result?.list
const markerList: any = []
if (list?.length) {
list?.map(item => {
list?.map((item) => {
const EntiyValue = addEntiy(item.lon, item.lat, item.flyerName)
markerList.push(EntiyValue)
})
......@@ -121,17 +129,42 @@ export default function MoreServicePoints() {
//自适应显示多个点位
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 res = await api.listUavBitmap({
lon: userPositioning?.lon || data?.lon || 113.93029,
lat: userPositioning?.lat || data?.lat || 22.53291,
pageNo: 1,
pageSize: 40
pageSize: 40,
})
const list = res.result?.list
const markerList: any = []
if (list?.length) {
list?.map(item => {
list?.map((item) => {
const EntiyValue = addEntiy(item.lon, item.lat, item.uavName)
markerList.push(EntiyValue)
})
......@@ -155,7 +188,7 @@ export default function MoreServicePoints() {
} else if (index === 2) {
showUavBitmap(index, data)
} else {
showFlyerBitmap(index, data, 30)
showMaintainBitmap(index, data, 30)
}
setMapItem(index)
}
......@@ -165,14 +198,14 @@ export default function MoreServicePoints() {
const icons = new Amap.Icon({
size: new Amap.Size(60, 60), // 图标尺寸
image: icon.src, // Icon的图像
imageSize: new Amap.Size(60, 60) // 根据所设置的大小拉伸或压缩图片
imageSize: new Amap.Size(60, 60), // 根据所设置的大小拉伸或压缩图片
})
const marker = new Amap.Marker({
position: new Amap.LngLat(lon, lat),
offset: new Amap.Pixel(-10, -10),
icon: icons, // 添加 Icon 实例
title: name,
zoom: 13
zoom: 13,
})
return marker
}
......@@ -182,12 +215,12 @@ export default function MoreServicePoints() {
var infoWindow = new Amap.InfoWindow({
position: p,
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)
if (item.dizhi) {
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 message.warning('暂无位置信息')
......@@ -204,26 +237,48 @@ export default function MoreServicePoints() {
<Layout>
<Box>
<div className="title">
<div onClick={() => mapEntiy(0)} className={`item ${mapItem === 0 ? 'active' : ''}`}>
<div
onClick={() => mapEntiy(0)}
className={`item ${mapItem === 0 ? 'active' : ''}`}
>
服务网点
</div>
<div onClick={() => mapEntiy(1)} className={`item ${mapItem === 1 ? 'active' : ''}`}>
<div
onClick={() => mapEntiy(1)}
className={`item ${mapItem === 1 ? 'active' : ''}`}
>
培训网点
</div>
<div onClick={() => mapEntiy(2)} className={`item ${mapItem === 2 ? 'active' : ''}`}>
<div
onClick={() => mapEntiy(2)}
className={`item ${mapItem === 2 ? 'active' : ''}`}
>
租赁网点
</div>
<div onClick={() => mapEntiy(3)} className={`item ${mapItem === 3 ? 'active' : ''}`}>
<div
onClick={() => mapEntiy(3)}
className={`item ${mapItem === 3 ? 'active' : ''}`}
>
机构网点
</div>
</div>
<div className="content">
<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">
{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}>
{item.dizhi || item.flyerName || item.uavName}
<div
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>
......
pages/jobServices/detail/[id].page.tsx
import React,{useEffect, useState} from 'react'
import Layout from "~/components/layout";
import {Box} from './styled';
import { Tabs , Button } from 'antd';
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';
import React, { useEffect, useState } from 'react'
import Layout from '~/components/layout'
import { Box } from './styled'
import moment from 'moment'
import {
Tabs,
Modal,
Button,
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() {
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 [sale,setSale] = useState<string | null>()
const [detail, setDetail] = useState<ListPageJobInfoResp | null>()
const [sale, setSale] = useState<string | null>()
const onChange = (key: string) => {
console.log(key);
};
console.log(key)
}
const items: TabsProps['items'] = [
{
key: '1',
label: `团队介绍`,
children: <div className='teamIntroduction'>
{/* <Image width={1100} height={800} src={detail?.teamPoster ? detail?.teamPoster : ''} alt='error'/> */}
<img style={{width:"100%"}} src={detail?.teamPoster ? detail?.teamPoster : ''} alt="error" />
</div>,
children: (
<div className="teamIntroduction">
{/* <Image width={1100} height={800} src={detail?.teamPoster ? detail?.teamPoster : ''} alt='error'/> */}
<img
style={{ width: '100%' }}
src={detail?.teamPoster ? detail?.teamPoster : ''}
alt="error"
/>
</div>
),
},
{
key: '2',
label: `团队评价`,
children: <Evaluate evaluateInfo={detail?.evaluateInfo || []}/>,
children: <Evaluate evaluateInfo={detail?.evaluateInfo || []} />,
},
];
useEffect(()=>{
]
useEffect(() => {
setId(Number(router.query.id))
},[router])
}, [router])
useEffect(() => {
if (id) {
api
.listDetailJobServicesInfo({id})
.then((res) => {
setDetail(res.result || null);
});
api.listDetailJobServicesInfo({ id }).then((res) => {
setDetail(res.result || null)
})
}
}, [id]);
}, [id])
useEffect(()=>{
useEffect(() => {
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 (
<Layout>
<Box>
<div className='top'>
<div className="top">
<div className="top-image">
<Image fill src={detail?.pictureUrl ? detail?.pictureUrl : ''} alt='error'/>
<Image
fill
src={detail?.pictureUrl ? detail?.pictureUrl : ''}
alt="error"
/>
</div>
<div className='top-right'>
<div className='right-top'>
<div className='title'>
{detail?.serviceName}
</div>
<div className='detail'>
<div className='tab'>专业飞手</div>
<span className='content'>飞手需通过认证培训才可作业</span>
</div>
<div className='more'>
<div className='tab filst'>测绘场景榜第1名</div>
<div className='tab'>7x24小时服务</div>
<div className='tab'>{`月售${sale}`}</div>
</div>
<div className="top-right">
<div className="right-top">
<div className="title">{detail?.serviceName}</div>
<div className="detail">
<div className="tab">专业飞手</div>
<span className="content">飞手需通过认证培训才可作业</span>
</div>
<div className="more">
<div className="tab filst">测绘场景榜第1名</div>
<div className="tab">7x24小时服务</div>
<div className="tab">{`月售${sale}`}</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 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>
</div>
<Tabs className='tabs' defaultActiveKey="1" items={items} onChange={onChange} />
<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>
<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>
</Layout>
)
......
pages/jobServices/detail/api/index.tsx
import request, { Response } from '~/api/request';
import request, { Response } from '~/api/request'
export interface ListPageJobInfoParams {
pageNo:number,
pageSize:number,
appTypeId?:number,
industryId?:number,
inspectionName?:string,
string?:number,
regionId?:number,
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,
name?:string,
time?:number | string
id?: number
content?: string
contentImgs?: string[] | null
contentVideo?: string | null
star?: number
img?: string | null
type?: number
name?: string
time?: number | string
}
export interface ListPageJobInfoResp {
id: number,
serviceName: string,
pictureUrl: string,
videoUrl: string,
teamPoster:string,
evaluateInfo:Array<JobDetail>,
item:number
id: number
serviceName: string
pictureUrl: string
videoUrl: string
teamPoster: string
evaluateInfo: Array<JobDetail>
item: number
}
export interface GetJobServicesDetailParams {
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 {
//web-作业服务-详情
listDetailJobServicesInfo: (params:GetJobServicesDetailParams): Promise<Response<ListPageJobInfoResp>> => {
listDetailJobServicesInfo: (
params: GetJobServicesDetailParams
): Promise<Response<ListPageJobInfoResp>> => {
return request('/release/work/selectInspection', 'get', params)
},
}
\ No newline at end of file
//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() {
return <></>;
return <></>
}
export const Box = styled.div`
box-sizing: border-box;
width: 1200px;
height: 1338px;
margin-top: 18px;
background-color: #FFFFFF;
.top{
display: flex;
height: 300px;
padding: 24px 0 0 24px;
&-image{
width: 300px;
height: 300px;
background-color: #F4F5F7;
border-radius: 6px;
margin-right: 32px;
position: relative;
box-sizing: border-box;
width: 1200px;
height: 1338px;
margin-top: 18px;
background-color: #ffffff;
.top {
display: flex;
height: 300px;
padding: 24px 0 0 24px;
&-image {
width: 300px;
height: 300px;
background-color: #f4f5f7;
border-radius: 6px;
margin-right: 32px;
position: relative;
}
&-right {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 300px;
.right-top {
.title {
height: 26px;
font-size: 28px;
font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
font-weight: bold;
color: #090909;
line-height: 26px;
}
&-right{
display: flex;
flex-direction: column;
justify-content: space-between;
height: 300px;
.right-top{
.title{
height: 26px;
font-size: 28px;
font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
font-weight: bold;
color: #090909;
line-height: 26px;
}
.detail{
display: flex;
margin-top: 27px;
.tab{
width: 64px;
height: 18px;
line-height: 18px;
text-align: center;
background: linear-gradient(270deg, #3E62E5 0%, #3588F7 100%);
border-radius: 9px;
font-size: 12px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #F6FDFE;
margin-right: 5px;
}
.content{
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
line-height: 20px;
}
}
.more{
display: flex;
margin-top: 25px;
.tab{
width: 131px;
height: 23px;
line-height: 23px;
text-align: center;
border-radius: 3px;
font-family: MicrosoftYaHei;
background-color: #F4F4F4;
color: #333333;
margin-right: 8px;
&.filst{
color: #6E411E;
background-color: #F9E3D1;
}
}
}
}
.right-bottom{
.bottom-btn{
.btn-left{
width: 207px;
height: 40px;
background-color: #FFE4D1;
border: 1px solid #EBBAAF;
font-family: MicrosoftYaHei;
color: #FF552D;
letter-spacing: 1px;
margin-right: 12px;
}
.btn-right{
width: 207px;
height: 40px;
background: #FF552D;
font-family: MicrosoftYaHei;
color: #FFFFFF;
letter-spacing: 1px;
}
}
.detail {
display: flex;
margin-top: 27px;
.tab {
width: 64px;
height: 18px;
line-height: 18px;
text-align: center;
background: linear-gradient(270deg, #3e62e5 0%, #3588f7 100%);
border-radius: 9px;
font-size: 12px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #f6fdfe;
margin-right: 5px;
}
.content {
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
line-height: 20px;
}
}
.more {
display: flex;
margin-top: 25px;
.tab {
width: 131px;
height: 23px;
line-height: 23px;
text-align: center;
border-radius: 3px;
font-family: MicrosoftYaHei;
background-color: #f4f4f4;
color: #333333;
margin-right: 8px;
&.filst {
color: #6e411e;
background-color: #f9e3d1;
}
}
}
}
.tabs{
padding: 0 24px;
margin-top: 69px;
.teamIntroduction{
width: 100%;
}
.right-bottom {
.bottom-btn {
.btn-left {
width: 207px;
height: 40px;
background-color: #ffe4d1;
border: 1px solid #ebbaaf;
font-family: MicrosoftYaHei;
color: #ff552d;
letter-spacing: 1px;
margin-right: 12px;
}
.btn-right {
width: 207px;
height: 40px;
background: #ff552d;
font-family: MicrosoftYaHei;
color: #ffffff;
letter-spacing: 1px;
}
}
}
}
}
.tabs {
padding: 0 24px;
margin-top: 69px;
.teamIntroduction {
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;
}
}
`
\ No newline at end of file
}
`
pages/jobServices/index.page.tsx
......@@ -42,8 +42,9 @@ export default function JobServices() {
{/* <div className="com">{item.teamName}</div> */}
</div>
<div className="value-right">
<span className="money">¥{item.price}</span>{' '}
<span className="unit">/平</span>
{/* <span className="money">¥{item.price}</span> */}
{/* <span className="unit">/平</span> */}
<span className="money">获取报价</span>
</div>
</div>
</div>
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论