Skip to content

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

改-首页-无人机保险，无人机工具软件筛选修改显示字段 

改-首页-地图-网点显示字段
添-作业服务-详情-立即预约-地图选点功能
改-筛选组件filter更改选择数量,【作业服务、设备租赁、产品商城】筛选的数据超过一行时需要自动收缩后面未显示的数据，现在未显示完整
改-【首页】无人机出租和无人机服务接口数据对调
改-【设备租赁】选择租期提交意向失败
改-【飞手培训】课程视频查看详情页面需要判断是否授权登录，未授权登录是弹出二维码扫码登录
上级 4c94e718
正在显示 包含 294 行增加 和 75 行删除
components/filter/compoents/typeInfo/index.tsx
......@@ -23,7 +23,7 @@ export default function CategoryItem(props: Props) {
})
}
const showCount = 14; //展示数量
const showCount = 12 //展示数量
return (
<div className={styles.filterItem}>
......@@ -37,7 +37,7 @@ export default function CategoryItem(props: Props) {
ghost
collapsible="icon"
expandIconPosition="end"
style={{ width: "100%" }}
style={{ width: '100%' }}
>
<Collapse.Panel
header={
......@@ -51,7 +51,7 @@ export default function CategoryItem(props: Props) {
>
{item.name}
</Button>
);
)
})}
</Space>
}
......@@ -67,12 +67,12 @@ export default function CategoryItem(props: Props) {
>
{item.name}
</Button>
);
)
})}
</Space>
</Collapse.Panel>
</Collapse>
</div>
</div>
);
)
}
pages/equipmentLeasing/detail/components/orderForGoods/index.tsx
......@@ -47,25 +47,25 @@ export default function OrderForGoods(props: PropsBox) {
if (detailData && shopDetail && list && wareSkuList) {
const pushList = {
actualPay:
discount?.specPrice[0].price! * shopDetail?.num! * days! || 0,
discount?.specPrice[0]?.price! * shopDetail?.num! * days! || 0,
deposit: 0,
endDate: moment(new Date(shopDetail.dateDetail[1])).format(
'YYYY-MM-DD'
),
orderReceipt: {
detailAddress: list[value].takeAddress,
detailAddress: list[value]?.takeAddress,
receiptMethod: 0,
region: list[value].takeRegion,
takeName: list[value].takeName,
takePhone: Number(list[value].takePhone),
},
rentPrice:
discount?.specPrice[0].price! * shopDetail?.num! * days! || 0,
discount?.specPrice[0]?.price! * shopDetail?.num! * days! || 0,
returnDate: moment(
new Date(shopDetail.dateDetail[1]).getTime() + 864e5
).format('YYYY-MM-DD'),
shouldPay:
discount?.specPrice[0].price! * shopDetail?.num! * days! || 0,
discount?.specPrice[0]?.price! * shopDetail?.num! * days! || 0,
specsId: wareSkuList[0].productSpec,
startDate: moment(new Date(shopDetail.dateDetail[0]!)).format(
'YYYY-MM-DD'
......@@ -228,7 +228,7 @@ export default function OrderForGoods(props: PropsBox) {
</div>
</div>
<div className="body-item" style={{ width: 130 }}>
{discount?.specPrice[0].price || 0}
{discount?.specPrice[0]?.price || 0}
</div>
<div className="body-item" style={{ width: 130 }}>
{shopDetail?.num || 1}
......@@ -243,7 +243,7 @@ export default function OrderForGoods(props: PropsBox) {
)}
</div>
<div className="body-item total-price" style={{ width: 135 }}>
{discount?.specPrice[0].price! * shopDetail?.num! * days! || 0}
{discount?.specPrice[0]?.price! * shopDetail?.num! * days! || 0}
</div>
</div>
</div>
......@@ -282,13 +282,14 @@ export default function OrderForGoods(props: PropsBox) {
<div className="top">
<div className="label">实付款</div>
<div className="price">
¥{discount?.specPrice[0].price! * shopDetail?.num! * days! || 0}
¥
{discount?.specPrice[0]?.price! * shopDetail?.num! * days! || 0}
</div>
</div>
<div className="bottom">
<div className="value">寄送至</div>
{list ? (
<div className="value-content">{list![value].takeAddress}</div>
<div className="value-content">{list![value]?.takeAddress}</div>
) : null}
</div>
</div>
......@@ -321,7 +322,7 @@ export default function OrderForGoods(props: PropsBox) {
]}
>
<div className="title">
￥{discount?.specPrice[0].price! * shopDetail?.num! * days! || 0}
￥{discount?.specPrice[0]?.price! * shopDetail?.num! * days! || 0}
</div>
<div>云享飞账号： {userInfo?.uid}</div>
<div>付款方式： 可用(￥{paymentDetail?.balance})</div>
......
pages/home/waterfallFlowBody/components/map/index.tsx
......@@ -92,7 +92,7 @@ export default function MapComponent() {
const markerList: any = []
if (list?.length) {
list?.map((item) => {
const EntiyValue = addEntiy(item.lon, item.lat, item.address)
const EntiyValue = addEntiy(item.lon, item.lat, item.name)
markerList.push(EntiyValue)
})
if (markerList.length) MAP?.add(markerList)
......
pages/home/waterfallFlowBody/components/map/moreServicePoints/index.page.tsx
......@@ -94,7 +94,7 @@ export default function MoreServicePoints() {
const markerList: any = []
if (list?.length) {
list?.map((item) => {
const EntiyValue = addEntiy(item.lon, item.lat, item.address)
const EntiyValue = addEntiy(item.lon, item.lat, item.name)
markerList.push(EntiyValue)
})
setServicePoints(list)
......@@ -144,7 +144,7 @@ export default function MoreServicePoints() {
const markerList: any = []
if (list?.length) {
list?.map((item) => {
const EntiyValue = addEntiy(item.lon, item.lat, item.address)
const EntiyValue = addEntiy(item.lon, item.lat, item.name)
markerList.push(EntiyValue)
})
setServicePoints(list)
......@@ -215,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 || item.address,
content: item.dizhi || item.flyerName || item.uavName || item.name,
})
infoWindow.open(MAP)
if (item.dizhi) {
return MAP?.setCenter([item.jd, item.wd])
} else if (item.flyerName || item.uavName || item.address) {
} else if (item.flyerName || item.uavName || item.name) {
return MAP?.setCenter([item.lon, item.lat])
}
return message.warning('暂无位置信息')
......@@ -259,7 +259,7 @@ export default function MoreServicePoints() {
onClick={() => mapEntiy(3)}
className={`item ${mapItem === 3 ? 'active' : ''}`}
>
机构网点
维修网点
</div>
</div>
<div className="content">
......@@ -267,7 +267,7 @@ export default function MoreServicePoints() {
{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>}
{mapItem === 3 && <div className="left-title">维修网点</div>}
<div className="left-content">
{servicePoints.map((item: any, index: number) => (
<div
......@@ -275,10 +275,10 @@ export default function MoreServicePoints() {
onClick={() => moveTo(item, index)}
className="left-content-item"
title={
item.dizhi || item.flyerName || item.uavName || item.address
item.dizhi || item.flyerName || item.uavName || item.name
}
>
{item.dizhi || item.flyerName || item.uavName || item.address}
{item.dizhi || item.flyerName || item.uavName || item.name}
</div>
))}
</div>
......
pages/home/waterfallFlowBody/components/map/styled.tsx
import styled from "styled-components";
import styled from 'styled-components'
export default function Style() {
return <></>;
return <></>
}
export const Box = styled.div`
......@@ -12,7 +12,7 @@ export const Box = styled.div`
position: relative;
padding: 0px;
margin: 0px;
width: 384px;
width: 100%;
height: 220px;
}
......@@ -46,9 +46,4 @@ export const Box = styled.div`
color: #ff552d;
}
}
#container {
padding: 0px;
margin: 0px;
width: 100%;
}
`;
`
pages/home/waterfallFlowBody/index.tsx
......@@ -102,28 +102,28 @@ export default function WaterfallFlowBody() {
const [rightTopDomList, setRightTopDomList] = useState<JSX.Element>()
const [rightBottomDomList, setRightBottomDomList] = useState<JSX.Element>()
const { deviceBrand, deviceModel } = equipmentLeasingApi
const eqApiTypeList = ['brandId', 'categoryId', 'modelId']
// const { deviceBrand, deviceModel } = equipmentLeasingApi
// const eqApiTypeList = ['brandId', 'categoryId', 'modelId']
const {
listAllModel,
listAllBrand,
listAllCategory,
listAllParts,
listAllQuality,
} = mallApi
const mallApiTypeList = [
'brandId',
'productCategoryId',
'partsId',
'modelId',
'qualityId',
]
const { IndustryFlightSkills, InDronePilotLicense } = flightSkillsApi
const flightApiTypeList = ['licenseId', 'flightSkillsId']
// const {
// listAllModel,
// listAllBrand,
// listAllCategory,
// listAllParts,
// listAllQuality,
// } = mallApi
// const mallApiTypeList = [
// 'brandId',
// 'productCategoryId',
// 'partsId',
// 'modelId',
// 'qualityId',
// ]
// const { IndustryFlightSkills, InDronePilotLicense } = flightSkillsApi
// const flightApiTypeList = ['licenseId', 'flightSkillsId']
const { listAllIndustry, listAllAppType } = jobServicesApi
const jobApiTypeList = ['industryId', 'appTypeId']
// const { listAllIndustry, listAllAppType } = jobServicesApi
// const jobApiTypeList = ['industryId', 'appTypeId']
const onMoreChange = (
value: { value: string; label: number },
......@@ -228,35 +228,35 @@ export default function WaterfallFlowBody() {
useEffect(() => {
;(async () => {
const res1 = await api.HomeCategories({ type: 1 }) //无人机出租
const res4 = await api.HomeCategories({ type: 4 }) //无人机销售
const res2 = await api.HomeCategories({ type: 2 }) //无人机培训
const res4 = await api.HomeCategories({ type: 4 }) //无人机销售
const res1 = await api.HomeCategories({ type: 1 }) //无人机出租
const res3 = await api.HomeCategories({ type: 3 }) //无人机服务
console.log(res1, res2, res3, res4)
const listOption = JSON.parse(JSON.stringify(list)).map(
(item: string, index: number) => {
return { id: index, name: item, value: index }
return { id: index, categoryName: item, value: index }
}
)
const list2Option = JSON.parse(JSON.stringify(list2)).map(
(item: string, index: number) => {
return { id: index, name: item, value: index }
return { id: index, categoryName: item, value: index }
}
)
const optionList = [
res1.result,
res2.result,
res4.result,
listOption,
res3.result,
res2.result,
res1.result,
list2Option,
]
const listValue: any = [
res1.result,
res2.result,
res4.result,
[],
res3.result,
res2.result,
res1.result,
[],
]
setLeftDomList(
......
pages/jobServices/detail/[id].page.tsx
......@@ -20,6 +20,7 @@ import { useRouter } from 'next/router'
import api, { ListPageJobInfoResp } from './api'
import Image from 'next/image'
import { RegionResp } from '~/components/filter/api'
import AddressMap from './components/map'
const { RangePicker } = DatePicker
const { TextArea } = Input
export default function JobServicesDetail() {
......@@ -79,6 +80,9 @@ export default function JobServicesDetail() {
const [loading, setLoading] = useState(false)
const [areaValue, setAreaValue] = useState<string>()
const [provinceList, setProvinceList] = useState<RegionResp[]>([])
const [isAddressMapShow, setIsAddressMapShow] = useState(false)
const [addressContent, setAddressContent] = useState<any>()
useEffect(() => {
api.region().then((res) => {
console.log(res)
......@@ -90,19 +94,27 @@ export default function JobServicesDetail() {
const disabledDate: RangePickerProps['disabledDate'] = (current) => {
return current && current < moment().endOf('day')
}
useEffect(() => {
//选择地点后重新验证
formDate.setFieldValue('latitudeAndLongitude', addressContent)
formDate.validateFields()
}, [addressContent])
const handleOk = () => {
setLoading(true)
formDate
.validateFields()
.then(async (values) => {
console.log(values)
if (!addressContent) {
return message.warning('请选择地点')
}
const res = await api.insertOrderTask({
address: values.address,
city: values.province[1],
city: addressContent.city,
inspectionId: detail?.id || 1,
lat: Number(values.lat),
lon: Number(values.lon),
province: values.province[0],
lat: addressContent.lat,
lon: addressContent.lon,
province: addressContent.province,
startTime: moment(new Date(values.dateDetail[0])).format(
'YYYY-MM-DD HH:MM:SS'
),
......@@ -114,6 +126,7 @@ export default function JobServicesDetail() {
if (res.code === '200') {
message.success('提交成功')
formDate.resetFields()
setAddressContent(undefined)
setLoading(false)
setIsModalOpen(false)
} else {
......@@ -134,15 +147,6 @@ export default function JobServicesDetail() {
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>
......@@ -249,11 +253,10 @@ export default function JobServicesDetail() {
<RangePicker
style={{ width: 376, marginTop: 10 }}
disabledDate={disabledDate}
onChange={onchanges}
showTime
/>
</Form.Item>
<Form.Item
{/* <Form.Item
label="经度"
style={{ flex: 1, marginRight: 16 }}
name="lon"
......@@ -288,6 +291,22 @@ export default function JobServicesDetail() {
options={provinceList}
changeOnSelect
/>
</Form.Item> */}
<Form.Item
label="选择地点"
style={{ flex: 1, marginRight: 16 }}
name="latitudeAndLongitude"
rules={[{ required: true, message: '请选择地点' }]}
>
{addressContent ? (
<div>
已选择：{addressContent.province + addressContent.city}
</div>
) : (
<Button onClick={() => setIsAddressMapShow(true)} type="text">
点击从地图选择地点
</Button>
)}
</Form.Item>
<Form.Item
label="详细地址"
......@@ -321,6 +340,26 @@ export default function JobServicesDetail() {
</Form.Item>
</Form>
</Modal>
{isAddressMapShow ? (
<Modal
wrapClassName="reservation"
open={isAddressMapShow}
onCancel={() => setIsAddressMapShow(false)}
getContainer={false}
maskClosable={false}
width={850}
footer={false}
>
<div style={{ textAlign: 'center', fontWeight: '700' }}>
选择地点
</div>
<AddressMap
setAddressContent={setAddressContent}
setIsAddressMapShow={setIsAddressMapShow}
/>
</Modal>
) : null}
</Box>
</Layout>
)
......
pages/jobServices/detail/components/map/index.tsx 0 → 100644
import React, {
Component,
Dispatch,
SetStateAction,
useEffect,
useState,
} from 'react'
import { message } from 'antd'
import { Box } from './styled'
import { useRouter } from 'next/router'
let MAP: any
let Amap: any
interface UserInfoType {
lat: number
lon: number
pageNo?: number
pageSize?: number
}
interface BoxProps {
setAddressContent: Dispatch<SetStateAction<any>>
setIsAddressMapShow: Dispatch<SetStateAction<boolean>>
}
export default function MapComponent(props: BoxProps) {
const { setAddressContent, setIsAddressMapShow } = props
const router = useRouter()
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'等
})
.then(async (AMap) => {
Amap = AMap
MAP = new AMap.Map('container', {
// 设置地图容器id
viewMode: '3D', // 是否为3D地图模式
zoom: 9, // 初始化地图级别
center: [113.93029, 22.53291], // 初始化地图中心点位置
})
//用户定位
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('定位成功')
setUserPositioning(data.position)
// return await mapEntiy(0,data.position);
}
//解析定位错误信息
async function onError(data: any) {
// message.error(`定位失败
// 失败原因排查信息：${data.message}
// 浏览器返回信息：${data.originMessage}
// `)
}
await mapEntiy(0)
})
.catch((e) => {
console.log(e)
})
} catch (error) {
console.log(error)
}
}
//选择点位
const mapEntiy = async (index: number, data?: UserInfoType) => {
MAP.on('click', mapGet)
setMapItem(index)
}
const mapGet = (e: any) => {
console.log(e)
// 在这里获取点位信息
const lnglat = e.lnglat
console.log(lnglat)
const geocoder = new Amap.Geocoder({
radius: 1000,
extensions: 'all',
})
geocoder.getAddress(lnglat, function (status: any, result: any) {
if (status === 'complete' && result.regeocode) {
const address = result.regeocode.addressComponent
console.log(address.province)
console.log(address.city)
setAddressContent({
province: address.province,
city: address.city,
lon: lnglat.lng,
lat: lnglat.lat,
})
setIsAddressMapShow(false)
// console.log(address.province + address.city + address.district) // 打印省市区信息
}
})
// MAP.off('click', mapGet); // 移除click事件
}
const addEntiy = (lon: any, lat: any, name: string) => {
if (!Amap) return
const icons = new Amap.Icon({
size: 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,
})
return marker
}
useEffect(() => {
;(async () => {
await init()
})()
return MAP && MAP.destroy()
}, [])
return (
<Box className="right-box-item">
<div id="container" className="map"></div>
</Box>
)
}
pages/jobServices/detail/components/map/styled.tsx 0 → 100644
import styled from 'styled-components'
export default function Style() {
return <></>
}
export const Box = styled.div`
box-sizing: border-box;
width: 800px;
height: 800px;
#container {
position: relative;
padding: 0px;
margin: 0px;
width: 100%;
height: 800px;
}
.amap-logo {
//去除高德地图水印
display: none !important;
visibility: hidden !important;
}
.amap-copyright {
//去除高德地图水印
display: none !important;
visibility: hidden !important;
}
`
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论