Skip to content

W
web
提交 9442ee5e 作者: 18928357778
操作

添-飞手培训-详情-去考试页面 

添-作业服务-详情-月售数量
添-首页-地图-更多网点页面
改-首页-底部固定定位
上级 1c0dbaf0
正在显示 包含 635 行增加 和 21 行删除
components/footer/index.tsx
...@@ -37,7 +37,7 @@ export default function Footer() { ...@@ -37,7 +37,7 @@ export default function Footer() {
onClick={() => { onClick={() => {
if (item.title === "科比特官网") if (item.title === "科比特官网")
window.location.href = item.url!; window.location.href = item.url!;
}} }}
alt="" alt=""
className={styles.qrcodeImg} className={styles.qrcodeImg}
src={item.img} src={item.img}
......
components/layout/index.tsx
...@@ -24,12 +24,14 @@ const contentStyle: React.CSSProperties = { ...@@ -24,12 +24,14 @@ const contentStyle: React.CSSProperties = {
}; };
const footerStyle: React.CSSProperties = { const footerStyle: React.CSSProperties = {
width:"100%",
color: "", color: "",
backgroundColor: "", backgroundColor: "",
lineHeight: "1", lineHeight: "1",
padding: 0, padding: 0,
position: "relative", position: "fixed",
marginTop: 60, bottom:0,
// marginTop: 60,
}; };
type Props = { type Props = {
......
pages/flyingHandService/examination/[id].page.tsx
import React from "react"; import React from "react";
import Layout from "~/components/layout"; import Layout from "~/components/layout";
import { Box } from "./styled"; import { Box } from "./styled";
import BrushQuestionZone from './components/brushQuestionZone'
import MockExam from './components/mockExam'
import { Tabs } from "antd"; import { Tabs } from "antd";
import type { TabsProps } from "antd"; import type { TabsProps } from "antd";
...@@ -12,19 +14,24 @@ export default function ExaminationDateil() { ...@@ -12,19 +14,24 @@ export default function ExaminationDateil() {
const items: TabsProps["items"] = [ const items: TabsProps["items"] = [
{ {
key: "1", key: "1",
label: `Tab 1`, label: `刷题专区`,
children: `Content of Tab Pane 1`, children: <BrushQuestionZone />,
}, },
{ {
key: "2", key: "2",
label: `Tab 2`, label: `模拟考试`,
children: `Content of Tab Pane 2`, children: <MockExam />,
}, },
]; ];
return ( return (
<Layout> <Layout>
<Box> <Box>
<Tabs defaultActiveKey="1" items={items} onChange={onChange} /> <Tabs
defaultActiveKey="1"
items={items} onChange={onChange}
centered
size="large"
/>
</Box> </Box>
</Layout> </Layout>
); );
......
pages/flyingHandService/examination/components/brushQuestionZone/index.tsx 0 → 100644
import React,{ useEffect ,useState} from 'react'
import {Box} from './styled'
import {Cascader,Select} from 'antd'
import api, { Flying, SkillsType, RegionResp } from "../../../api";
interface BrushQuestionZoneType {
}
export default function index() {
const [secondDistrictInfo, setSecondDistrictInfo] = useState(
Array<RegionResp>
);
const [skills, setSkills] = useState(
Array<RegionResp>
);
const [flightSkillsList, setFlightSkillsList] = useState(Array<SkillsType>);
const [list,setList] = useState<Array<BrushQuestionZoneType>>()
const handleChange = (value: string) => {
console.log(`selected ${value}`);
};
useEffect(() => {
setList([{},{},{},{},{},{}])
api.region().then((res) => {
setSecondDistrictInfo(res.result || []);
});
api.PilotLicense().then((res) => {
setSkills(res.result || []);
});
api.IndustryFlightSkills().then((res) => {
const list = res.result?.map((item)=>{
item.label = item.skillsName
item.value = item.id
return item
})
setFlightSkillsList(list || []);
});
}, []);
return (
<Box>
<div className="title">
<Cascader
allowClear
placeholder="地域"
className="selectItem"
size="large"
fieldNames={{
label: "name",
value: "id",
children: "childInfo",
}}
options={secondDistrictInfo}
// onChange={onChange}
changeOnSelect
/>
<Cascader
allowClear
placeholder="考证"
className="selectItem"
size="large"
fieldNames={{
label: "licenseType",
value: "id",
children: "childLicenses",
}}
options={skills}
// onChange={onChange}
changeOnSelect
/>
<Select
className="selectItem"
popupMatchSelectWidth={false}
placeholder="技能"
size="large"
// onChange={(value) => onProvinceChange(value, "技能")}
options={flightSkillsList}
fieldNames={{ value: "id", label: "skillsName" }}
allowClear
/>
<Cascader
allowClear
placeholder="选择课程"
className="selectItem"
style={{width:200}}
size="large"
fieldNames={{
label: "name",
value: "id",
children: "childInfo",
}}
options={secondDistrictInfo}
// onChange={onChange}
changeOnSelect
/>
</div>
<div className="content">
{
list?.map(item=>(
<div className='item'>
<div className='img-box'></div>
<div className='item-content'>
第一章 第1节 习题练习习题练习习题练习
</div>
</div>
))
}
</div>
</Box>
)
}
pages/flyingHandService/examination/components/brushQuestionZone/styled.tsx 0 → 100644
import styled from "styled-components";
export default function Style() {
return <></>;
}
export const Box = styled.div`
box-sizing: border-box;
width: 1200px;
height: 859px;
background: #FFFFFF;
border-radius: 6px;
padding: 32px 26px 32px 24px;
.title{
display: flex;
align-items: center;
height: 60px;
.selectItem {
width: 120px;
height: 60px;
background-color: #fff;
border-radius: 5px;
color: red;
margin-right: 8px;
.ant-select-selection-placeholder {
color: #000;
line-height: 60px;
text-align: center;
}
.ant-select-selection-item{
line-height: 60px;
text-align: center;
}
.ant-select-selector{
height: 60px;
}
}
}
.content{
display: flex;
flex-wrap: wrap;
margin-top: 32px;
.item {
display: flex;
width: 360px;
height: 100px;
background: #FFFFFF;
border: 1px solid #F0F0F0;
margin: 0 16px 20px 0;
&:nth-child(3n){
margin-right: 0;
}
.img-box{
width: 120px;
height: 100px;
background: #E6E6E6;
}
.item-content{
display: flex;
align-items: center;
flex: 1;
padding: 12px 14px 11px 16px;
}
}
}
`
\ No newline at end of file
pages/flyingHandService/examination/components/mockExam/index.tsx 0 → 100644
import React , {useEffect,useState} from 'react'
import {Box} from './styled'
interface MockExamType {
}
export default function index() {
const [list,setList] = useState<Array<MockExamType>>()
useEffect(()=>{
setList([{},{},{},{},{},{}])
},[])
return (
<Box>
<div className="content">
{
list?.map(item=>(
<div className='item'>
<div className='img-box'></div>
<div className='item-content'>
<div className="top">云飞手行业认证考核</div>
<div className="bottom">
<div className="user-img"></div>
<div className="application">77人报名</div>
</div>
</div>
</div>
))
}
</div>
</Box>
)
}
pages/flyingHandService/examination/components/mockExam/styled.tsx 0 → 100644
import styled from "styled-components";
export default function Style() {
return <></>;
}
export const Box = styled.div`
box-sizing: border-box;
padding: 46px 64px 46px 24px;
background-color: #fff;
min-height: 845px;
border-radius: 6px;
.content{
display: flex;
flex-wrap: wrap;
.item {
display: flex;
width: 360px;
height: 100px;
background: #FFFFFF;
border: 1px solid #F0F0F0;
margin: 0 16px 20px 0;
&:nth-child(3n){
margin-right: 0;
}
.img-box{
width: 120px;
height: 100px;
background: #E6E6E6;
}
.item-content{
display: flex;
flex-direction: column;
justify-content: space-between;
flex: 1;
padding: 12px 14px 11px 16px;
.top{
width: 200px;
height: 20px;
font-size: 16px;
font-family: MicrosoftYaHei;
color: #34383F;
line-height: 20px;
letter-spacing: 1px;
-webkit-background-clip: text;
}
.bottom{
display: flex;
align-items: center;
.user-img{
width: 20px;
height: 20px;
border-radius: 50%;
background-color: pink;
}
.application{
margin-left: 6px;
height: 16px;
font-size: 11px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FE6000;
line-height: 16px;
}
}
}
}
}
`;
pages/flyingHandService/index.page.tsx
...@@ -160,6 +160,17 @@ export default function FlyingHandService() { ...@@ -160,6 +160,17 @@ export default function FlyingHandService() {
}); });
}; };
const onChangeRegion = (value: any) => {
setFilterParams((props) => {
return {
...props,
regionId: (value && value[value.length - 1]) || undefined,
};
});
};
useEffect(() => { useEffect(() => {
setRightDomList( setRightDomList(
list.map((item: string) => { list.map((item: string) => {
...@@ -258,7 +269,7 @@ export default function FlyingHandService() { ...@@ -258,7 +269,7 @@ export default function FlyingHandService() {
children: "childInfo", children: "childInfo",
}} }}
options={secondDistrictInfo} options={secondDistrictInfo}
onChange={onChange} onChange={onChangeRegion}
changeOnSelect changeOnSelect
/> />
<Cascader <Cascader
...@@ -350,7 +361,6 @@ export default function FlyingHandService() { ...@@ -350,7 +361,6 @@ export default function FlyingHandService() {
allowClear allowClear
placeholder="城市" placeholder="城市"
className="selectItem" className="selectItem"
size="large"
fieldNames={{ fieldNames={{
label: "name", label: "name",
value: "id", value: "id",
...@@ -376,7 +386,6 @@ export default function FlyingHandService() { ...@@ -376,7 +386,6 @@ export default function FlyingHandService() {
allowClear allowClear
placeholder="是否有无人机执照" placeholder="是否有无人机执照"
className="selectItem" className="selectItem"
size="large"
fieldNames={{ fieldNames={{
label: "licenseType", label: "licenseType",
value: "id", value: "id",
......
pages/home/waterfallFlowBody/components/map/index.tsx
...@@ -3,6 +3,7 @@ import { message } from 'antd'; ...@@ -3,6 +3,7 @@ import { message } from 'antd';
import { Box } from "./styled"; import { Box } from "./styled";
import api from "./api"; import api from "./api";
import icon from './assets/img.png' import icon from './assets/img.png'
import {useRouter} from 'next/router'
let MAP :any ; let MAP :any ;
let Amap:any; let Amap:any;
...@@ -14,6 +15,7 @@ interface UserInfoType { ...@@ -14,6 +15,7 @@ interface UserInfoType {
} }
export default function MapComponent() { export default function MapComponent() {
const router = useRouter()
const [mapItem, setMapItem] = useState(0); const [mapItem, setMapItem] = useState(0);
const [userPositioning, setUserPositioning] = useState<UserInfoType>(); const [userPositioning, setUserPositioning] = useState<UserInfoType>();
const [markerCol, setMarkerCol] = useState<any>([]); const [markerCol, setMarkerCol] = useState<any>([]);
...@@ -44,7 +46,6 @@ export default function MapComponent() { ...@@ -44,7 +46,6 @@ export default function MapComponent() {
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){
...@@ -132,7 +133,7 @@ export default function MapComponent() { ...@@ -132,7 +133,7 @@ export default function MapComponent() {
} }
//添加点位 //添加点位
const mapEntiy = async (index: number,data?:UserInfoType) => { const mapEntiy = async (index: number,data?:UserInfoType) => {
MAP.remove(markerCol); MAP?.remove(markerCol);
if (index === 0) { if (index === 0) {
showPositioningInfo(index,data) showPositioningInfo(index,data)
...@@ -141,7 +142,7 @@ export default function MapComponent() { ...@@ -141,7 +142,7 @@ export default function MapComponent() {
} else if(index === 2) { } else if(index === 2) {
showUavBitmap(index,data) showUavBitmap(index,data)
}else{ }else{
showFlyerBitmap(index,data,30) router.push('/home/waterfallFlowBody/components/map/moreServicePoints')
} }
setMapItem(index); setMapItem(index);
}; };
......
pages/home/waterfallFlowBody/components/map/moreServicePoints/index.page.tsx 0 → 100644
import React,{useState,useEffect} from 'react'
import Layout from "~/components/layout";
import {Box} from './styled'
import api from "../api";
import icon from '../assets/img.png'
import { message } from 'antd';
let MAP :any ;
let Amap:any;
interface UserInfoType {
lat: number;
lon: number;
pageNo?:number,
pageSize?:number
}
export default function index() {
const [mapItem, setMapItem] = useState(0);
const [userPositioning, setUserPositioning] = useState<UserInfoType>();
const [markerCol, setMarkerCol] = useState<any>([]);
const [servicePoints, setServicePoints] = 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){
console.log(result);
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 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 = [];
if (list?.length) {
list?.map((item) => {
const EntiyValue = addEntiy(item.jd, item.wd, item.dizhi);
markerList.push(EntiyValue);
});
setServicePoints(list)
if(markerList.length) MAP?.add(markerList);setMarkerCol([...markerList]);
}
}
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
});
const list = res.result?.list
const markerList: any = [];
if (list?.length) {
list?.map((item) => {
const EntiyValue = addEntiy(item.lon, item.lat, item.flyerName);
markerList.push(EntiyValue);
});
setServicePoints(list)
if(markerList.length) MAP?.add(markerList);setMarkerCol(markerList)
}
}
const showUavBitmap = async (index:number,data?:UserInfoType) => {
console.log(MAP.panTo);
const res = await api.listUavBitmap({
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 = [];
if (list?.length) {
list?.map((item) => {
const EntiyValue = addEntiy(item.lon, item.lat, item.uavName);
markerList.push(EntiyValue);
});
setServicePoints(list)
if(markerList.length) MAP?.add(markerList);setMarkerCol(markerList)
}
}
//添加点位
const mapEntiy = async (index: number,data?:UserInfoType) => {
MAP?.remove(markerCol);
if (userPositioning) {
MAP?.setCenter([userPositioning.lon, userPositioning.lat]);
}
if (index === 0) {
showPositioningInfo(index,data)
}else if (index === 1) {
showFlyerBitmap(index,data,30)
} else if(index === 2) {
showUavBitmap(index,data)
}else{
showFlyerBitmap(index,data,30)
}
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;
};
const moveTo = (item:any) => {
console.log(markerCol);
if (item.dizhi) {
return MAP?.setCenter([item.jd, item.wd]);
}else if (item.flyerName || item.uavName) {
return MAP?.setCenter([item.lon, item.lat]);
}
return message.warning("暂无位置信息")
}
useEffect(() => {
(async () => {
await init();
})();
return MAP && MAP.destroy();
}, []);
return (
<Layout>
<Box>
<div className='title'>
<div onClick={() => mapEntiy(0)} className={`item ${mapItem === 0 ? "active" : ""}`}>服务网点</div>
<div onClick={() => mapEntiy(1)} className={`item ${mapItem === 1 ? "active" : ""}`}>租赁网点</div>
<div onClick={() => mapEntiy(2)} className={`item ${mapItem === 2 ? "active" : ""}`}>培训网点</div>
<div onClick={() => mapEntiy(3)} className={`item ${mapItem === 3 ? "active" : ""}`}>机构网点</div>
</div>
<div className='content'>
<div className="left">
<div className="left-title">服务网点</div>
<div className="left-content">
{
servicePoints.map((item:any)=>(
<div onClick={()=>moveTo(item)} className="left-content-item" title={item.dizhi || item.flyerName || item.uavName}>
{item.dizhi || item.flyerName || item.uavName}
</div>
))
}
</div>
</div>
<div className="right">
<div id="container"></div>
</div>
</div>
</Box>
</Layout>
)
}
pages/home/waterfallFlowBody/components/map/moreServicePoints/styled.tsx 0 → 100644
import styled from "styled-components";
export default function Style() {
return <></>;
}
export const Box = styled.div`
box-sizing: border-box;
.title{
display: flex;
align-items: center;
padding-left: 41px;
height: 42px;
background: #3D3D3D;
margin-top: 20px;
.item{
width: 64px;
height: 20px;
font-size: 16px;
font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
font-weight: bold;
color: #FFFFFF;
line-height: 20px;
cursor: pointer;
margin-right: 85px;
&.active{
color: #FC7237;
}
}
}
.content{
display: flex;
height: 800px;
background-color: #fff;
.left{
width: 270px;
padding: 23px 0 23px 21px;
&-title{
width: 56px;
height: 18px;
font-size: 14px;
font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
font-weight: bold;
color: #3D3D3D;
line-height: 18px;
}
&-content{
height: 731px;
overflow-y: auto;
margin-top: 9px;
&-item{
width: 182px;
height: 19px;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #666666;
line-height: 19px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
cursor: pointer;
&:hover{
color: #FC7237;
}
}
}
}
.right{
flex: 1;
}
}
#container {
position: relative;
padding: 0px;
margin: 0px;
width: 100%;
height: 100%;
}
.amap-logo {
//去除高德地图水印
display: none !important;
visibility: hidden !important;
}
.amap-copyright {
//去除高德地图水印
display: none !important;
visibility: hidden !important;
}
`
\ No newline at end of file
pages/home/waterfallFlowBody/index.tsx
...@@ -254,15 +254,11 @@ export default function WaterfallFlowBody() { ...@@ -254,15 +254,11 @@ export default function WaterfallFlowBody() {
}, []); }, []);
const routerPath = (index: number, item?: AllType) => { const routerPath = (index: number, item?: AllType) => {
if (item) { if (index === 0 || index === 1 || index === 3 || index === 4 ) {
router.push({ router.push({
pathname: columns[index].router, pathname: columns[index].router,
query: { [item?.type!]: item?.id! }, query: { [item?.type!]: item?.id! },
}); });
} else {
router.push({
pathname: columns[index].router,
});
} }
}; };
......
pages/jobServices/detail/[id].page.tsx
...@@ -14,6 +14,7 @@ export default function JobServicesDetail() { ...@@ -14,6 +14,7 @@ export default function JobServicesDetail() {
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 onChange = (key: string) => { const onChange = (key: string) => {
console.log(key); console.log(key);
}; };
...@@ -43,9 +44,11 @@ export default function JobServicesDetail() { ...@@ -43,9 +44,11 @@ export default function JobServicesDetail() {
setDetail(res.result || null); setDetail(res.result || null);
}); });
} }
console.log(id);
}, [id]); }, [id]);
useEffect(()=>{
setSale((Math.floor(Math.random() * 901) + 100).toFixed(0))
},[])
return ( return (
<Layout> <Layout>
<Box> <Box>
...@@ -65,6 +68,7 @@ export default function JobServicesDetail() { ...@@ -65,6 +68,7 @@ export default function JobServicesDetail() {
<div className='more'> <div className='more'>
<div className='tab filst'>测绘场景榜第1名</div> <div className='tab filst'>测绘场景榜第1名</div>
<div className='tab'>7x24小时服务</div> <div className='tab'>7x24小时服务</div>
<div className='tab'>{`月售${sale}`}</div>
</div> </div>
</div> </div>
<div className='right-bottom'> <div className='right-bottom'>
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论