Skip to content

W
web-ci-test
提交 cef88e10 作者: 翁进城
操作

Merge remote-tracking branch 'origin/caoyun'

上级 c0c325ce e24a6d20
正在显示 包含 459 行增加 和 157 行删除
components/NavHeader/index.tsx
......@@ -21,7 +21,7 @@ const items: TabsProps["items"] = [
},
{
key: "/flyingHandService",
label: `飞手服务`,
label: `飞手培训`,
},
{
key: "/mall",
......
components/filter/compoents/regionItem/index.tsx
......@@ -33,7 +33,7 @@ export default function RegionItem(props: Props) {
<Space size={40}>
<Select
bordered={false}
dropdownMatchSelectWidth={false}
popupMatchSelectWidth={false}
placeholder="选择省"
onChange={onProvinceChange}
options={provinceList.map((item) => {
......@@ -46,7 +46,7 @@ export default function RegionItem(props: Props) {
/>
<Select
bordered={false}
dropdownMatchSelectWidth={false}
popupMatchSelectWidth={false}
placeholder="选择市"
onChange={onCityChange}
options={cityList.map((item) => {
......
package.json
......@@ -32,6 +32,7 @@
"@amap/amap-jsapi-loader": "^1.0.1",
"@ant-design/icons": "^5.0.1",
"@hapi/iron": "^7.0.1",
"@types/styled-components": "^5.1.26",
"babel-plugin-styled-components": "^2.1.1",
"cookie": "^0.5.0",
"next-connect": "^1.0.0",
......
pages/_document.page.tsx
......@@ -5,14 +5,18 @@ import Document, {
NextScript,
DocumentContext,
} from 'next/document';
import { ServerStyleSheet } from 'styled-components';
export default class MyDocument extends Document {
static async getInitialProps(ctx: DocumentContext) {
const sheet = new ServerStyleSheet();
const initialProps = await Document.getInitialProps(ctx);
return {
...initialProps,
styles: (
<>
{initialProps.styles}
{sheet.getStyleElement()}
</>
),
};
......
pages/equipmentLeasing/detail/[pid].page.tsx 0 → 100644
import React from 'react'
import Layout from "~/components/layout";
import {Box} from './styled';
import ImagePreview from './components/picture-preview';
import { Button , Image as AImage , Divider } from 'antd';
import Image from 'next/image';
import errImg from "~/assets/errImg";
export default function EquipmentLeasingDetail() {
return (
<Layout>
<Box>
<div className='item'>
<ImagePreview />
<div className='item-right'>
<div className='title'>入云龙1550</div>
<div className='function'>
<div className='function-item'>官方质检</div>
<div className='function-item'>1天起租</div>
<div className='function-item'>极速发货</div>
<div className='function-item'>渠道商免押</div>
</div>
<div className='menoy'>
<span className='menoy-left'>¥200</span>
<span className='menoy-right'>/天起</span>
</div>
<div className='classification'></div>
<div className='botton-btn'>
<Button className='btn-left' size='small' type="primary">成为渠道商</Button>
<Button className='btn-right' size='small' type="primary">立即租赁</Button>
</div>
</div>
</div>
<div className='flow-path'>
<Image className='image' src={require("./assets/flow-path.png")} alt="" />
</div>
<div className='prompt'>
更多租金规则请前往【云享飞】微信小程序查
</div>
<Divider className='divider'>商品详情</Divider>
<div style={{ textAlign: "center" }}>
<AImage fallback={errImg} width={1080}></AImage>
</div>
</Box>
</Layout>
)
}
pages/equipmentLeasing/detail/components/picture-preview/index.tsx 0 → 100644
import React , {useState,useRef} from 'react'
import {Box} from './styled';
import { LeftOutlined , RightOutlined } from '@ant-design/icons';
export default function index() {
const mask =useRef<HTMLDivElement>(null!)
const moveBox =useRef<HTMLDivElement>(null!)
const big =useRef<HTMLImageElement>(null!)
const [moveLeft,setMoveLeft] = useState(0) // 根据这个值设置图片列表向左偏移
const imgList = [
'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
]
const [activeImgIndex,setActiveImgIndex] = useState(0)
// 改变预览图
const handleChangeImg = (index:number) => {
if (index <= moveLeft + 3) setActiveImgIndex(index)
}
// 移动缩略图
const handleSlide = (direction:string) => {
//左侧按钮
if (direction == 'left') {
moveLeft == 0 ? setMoveLeft(0) : setMoveLeft((props)=>props - 1)
} else { // 右侧按钮
if (imgList.length > 4) {
moveLeft >= imgList.length - 4 ? setMoveLeft(imgList.length - 4) : setMoveLeft((props)=>props + 1)
}
}
}
// 图片放大镜
const handleMouseMove = (event:React.MouseEvent<HTMLDivElement, MouseEvent>) => {
let left = event.nativeEvent.offsetX - mask.current.offsetWidth / 2;
let top = event.nativeEvent.offsetY - mask.current.offsetHeight / 2;
// 最右侧和最下侧的临界值
const maxLeft = moveBox.current.offsetWidth - mask.current.offsetWidth
const maxTop = moveBox.current.offsetHeight - mask.current.offsetHeight
//约束范围
if (left <= 0) left = 0;
if (left >= maxLeft) left = maxLeft
if (top <= 0) top = 0;
if (top >= maxTop) top = maxTop
// 设置放大范围遮罩层位置
mask.current.style.left = left + "px";
mask.current.style.top = top + "px";
// 设置大图图片位置，可以用background代替这个方案，有兴趣可以尝试
big.current.style.left = -3 * left + "px"; // 3这个值是 大图除以小图算出来的比例 这里大图是900px 小图是300px
big.current.style.top = -3 * top + "px";
}
return (
<Box>
<div className="img_wrapper">
<div className="img_content">
{/* <!-- 蒙层，绑定鼠标事件 --> */}
<div className="movebox"
onMouseMove={(e)=>handleMouseMove(e)}
ref={moveBox}>
</div>
{/* <!-- 主图 --> */}
<img src={imgList[activeImgIndex]}
className="img_small"
alt=""/>
{/* <!-- 放大区域 --> */}
<div className="mask"
ref={mask}></div>
{/* <!-- 大图预览图 --> */}
<div className="img_big">
<img src={imgList[activeImgIndex]}
ref={big}
alt=""/>
</div>
</div>
{/* <!-- 缩略图列表 --> */}
<div className="img_list_wrapper">
<LeftOutlined className="el-icon-arrow-left" onClick={()=>handleSlide('left')}/>
<div className="img_list_content">
<div className="img_list"
style={{marginLeft: - moveLeft * 25 + '%'}}>
{
imgList.map((item,index)=>(
<img
onMouseOver={()=>handleChangeImg(index)}
key={index}
className={`${activeImgIndex === index ? 'activeImg' : ''}`}
src={item}
alt="" />
))
}
</div>
</div>
<RightOutlined className="el-icon-arrow-right" onClick={()=>handleSlide('right')}/>
</div>
</div>
</Box>
)
}
pages/equipmentLeasing/detail/components/picture-preview/styled.tsx 0 → 100644
import styled from "styled-components"
export const Box = styled.div`
box-sizing: border-box;
.img_wrapper {
width: 300px;
.img_content {
position: relative;
border: 1px solid #f2f2f2;
box-sizing: border-box;
width: 300px;
height: 300px;
&:hover{
cursor: move;
}
.movebox {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 1;
&:hover ~ .img_big {
display: block;
}
}
.mask {
width: 50%;
height: 50%;
position: absolute;
left: 0;
top: 0;
display: none;
background-color: #fedef4;
box-sizing: border-box;
opacity: 0.5;
border: 1px solid #aaa;
cursor: move;
}
.img_small {
width: 100%;
height: 100%;
//object-fit: contain;
}
&:hover .mask {
display: block;
}
.img_big {
background-color: #fff;
z-index: 10;
display: none;
position: absolute;
top: 0;
left: 349px;
box-sizing: border-box;
border: 1px solid #f2f2f2;
width: 450px;
height: 450px;
overflow: hidden;
img {
width: 200%;
height: 200%;
position: absolute;
left: 0;
top: 0;
}
}
}
.img_list_wrapper {
padding-top: 20px;
width: 300px;
display: flex;
align-items: center;
justify-content: space-between;
.img_list_content {
width: 240px;
overflow: hidden;
.img_list {
display: flex;
flex-wrap: nowrap;
transition: all 0.3s linear;
img {
cursor: pointer;
border: 1px solid #fff;
box-sizing: border-box;
width: 60px;
height: 60px;
}
.activeImg {
border: 1px solid rgb(214, 70, 70);
}
}
}
&::v-deep .el-icon-arrow-left {
cursor: pointer;
font-size: 30px;
width: 30px;
height: 70px;
line-height: 70px;
}
&::v-deep .el-icon-arrow-right {
cursor: pointer;
font-size: 30px;
width: 30px;
height: 70px;
line-height: 70px;
}
}
}
`
\ No newline at end of file
pages/equipmentLeasing/detail/styled.tsx 0 → 100644
import styled from "styled-components"
export const Box = styled.div`
box-sizing: border-box;
width: 1200px;
background-color: #fff;
padding: 42px 0 24px 24px;
.item{
display: flex;
&-right{
height: 300px;
margin-left: 30px;
.title{
width: 283px;
height: 26px;
font-size: 28px;
margin-top: 5px;
font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
font-weight: bold;
color: #090909;
line-height: 26px;
}
.function{
display: flex;
align-items: center;
justify-content: space-evenly;
width: 375px;
height: 45px;
margin-top: 17px;
background: linear-gradient(90deg, #D7F7F5 0%, #EEFDE9 100%);
&-item{
}
}
.menoy{
margin-top: 17px;
&-left{
width: 79px;
height: 41px;
font-size: 32px;
font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
font-weight: bold;
color: #EF2E00;
line-height: 41px;
}
&-right{
width: 40px;
height: 20px;
font-size: 16px;
font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
font-weight: bold;
color: #EF2E00;
line-height: 20px;
}
}
.classification{
margin-top: 28px;
width: 300px;
height: 50px;
background-color: pink;
}
.botton-btn{
margin-top: 30px;
.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;
}
}
}
}
.flow-path{
width: 100%;
height: 192px;
text-align: center;
margin-top: 72px;
.image{
margin: 0 auto;
}
}
.prompt{
width: 420px;
height: 25px;
font-size: 20px;
font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
font-weight: bold;
color: #2B2B2B;
line-height: 25px;
margin: 30px auto 58px auto;
}
.divider {
display: flex;
justify-content: center;
margin: 46px 0 30px !important;
&::before {
width: 65px !important;
}
&::after {
width: 65px !important;
}
.ant-divider-inner-text {
font-size: 16px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #989898;
}
}
`
\ No newline at end of file
pages/equipmentLeasing/index.page.tsx
import React, { useEffect, useState } from "react";
import {Box} from './styled';
import { useRouter } from "next/router";
import { Button, Select, Space, Tag } from "antd";
import {Box} from './styled';
import Layout from "~/components/layout";
import ContentBox from '~/components/contentBox';
import Filter, { FilterResult } from "~/components/filter";
import { FilterOptionResp } from "~/components/filter/api";
// 此函数在构建时被调用
export async function getStaticProps() {
//获取筛选数据，进行静态渲染
const brand = Filter.mallApi.brand();
const category = Filter.mallApi.category();
const model = Filter.mallApi.model();
const part = Filter.mallApi.part();
const quality = Filter.mallApi.quality();
const res = await Promise.all([brand, category, part, model, quality]);
return {
props: {
brandData: res[0].result || [],
categoryData: res[1].result || [],
partData: res[2].result || [],
modelData: res[3].result || [],
qualityData: res[4].result || [],
},
};
}
type Props = {
brandData: Array<FilterOptionResp>;
categoryData: Array<FilterOptionResp>;
partData: Array<FilterOptionResp>;
modelData: Array<FilterOptionResp>;
qualityData: Array<FilterOptionResp>;
};
export default function EquipmentLeasing(props:Props) {
const router = useRouter();
export default function EquipmentLeasing() {
const leftDom = <div className='item'>
const leftDom = <div className='item' onClick={() => router.push('/equipmentLeasing/detail/1')}>
<div className="item-top">
<div className="item-top-image"></div>
</div>
<div className="item-bottom">
<div className="item-bottom-title">asdasd</div>
<div className="item-bottom-title">入云龙ll 1550入云龙ll入</div>
<div className="item-bottom-price">
<span className="money">¥23</span>
<span className="unit">/天起</span>
......@@ -22,149 +57,26 @@ export default function EquipmentLeasing() {
</div>
const [productList, setProductList] = useState(Array<{}>);
useEffect(() => {
setProductList([{}, {}, {}, {}, {}, {}]);
}, []);
const onProvinceChange = (value: string) => {
console.log("省", value);
};
const onCityChange = (value: string) => {
console.log("市", value);
};
const onMoreChange = (value: string) => {
console.log("更多", value);
};
const onCloseTag = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
console.log("删除", e);
};
const onFilterChange = (filterResult: FilterResult) => {
console.log('filterResult', filterResult)
}
return (
<Layout>
<Box>
<div className="filter-wrap" style={{ marginBottom: "11px" }}>
<div className="filter-item">
<div className="filter-item__title">地域：</div>
<div className="filter-item-main">
<Space size={40}>
<Select
bordered={false}
dropdownMatchSelectWidth={false}
placeholder="选择省"
onChange={onProvinceChange}
options={[
{ value: "jack", label: "Jack" },
{ value: "lucy", label: "Lucy" },
{ value: "Yiminghe", label: "yiminghe" },
{ value: "disabled", label: "Disabled", disabled: true },
]}
/>
<Select
bordered={false}
dropdownMatchSelectWidth={false}
placeholder="选择市"
onChange={onCityChange}
options={[
{ value: "jack", label: "Jack" },
{ value: "lucy", label: "Lucy" },
{ value: "Yiminghe", label: "yiminghe" },
{ value: "disabled", label: "Disabled", disabled: true },
]}
/>
</Space>
</div>
</div>
</div>
<div className="filter-wrap" style={{marginBottom:24}}>
<div className="filter-item">
<div className="filter-item__title">类目：</div>
<div className="filter-item-main">
<Space size={40}>
<Button type="link">不限</Button>
<Button type="link">无人机</Button>
<Button type="link">挂载</Button>
<Button type="link">地面站</Button>
</Space>
<Select
placeholder="更多"
onChange={onMoreChange}
bordered={false}
dropdownMatchSelectWidth={false}
options={[
{ value: "jack", label: "Jack" },
{ value: "lucy", label: "Lucy" },
{ value: "Yiminghe", label: "yiminghe" },
{ value: "disabled", label: "Disabled", disabled: true },
]}
/>
</div>
</div>
<div className="filter-item">
<div className="filter-item__title">品牌：</div>
<div className="filter-item-main">
<Space size={40}>
<Button type="link">不限</Button>
<Button type="link">无人机</Button>
<Button type="link">挂载</Button>
<Button type="link">地面站</Button>
</Space>
<Select
placeholder="更多"
onChange={onMoreChange}
bordered={false}
dropdownMatchSelectWidth={false}
options={[
{ value: "jack", label: "Jack" },
{ value: "lucy", label: "Lucy" },
{ value: "Yiminghe", label: "yiminghe" },
{ value: "disabled", label: "Disabled", disabled: true },
]}
/>
</div>
</div>
<div className="filter-item">
<div className="filter-item__title">型号：</div>
<div className="filter-item-main">
<Space size={40}>
<Button type="link">不限</Button>
<Button type="link">无人机</Button>
<Button type="link">挂载</Button>
<Button type="link">地面站</Button>
</Space>
<Select
placeholder="更多"
onChange={onMoreChange}
bordered={false}
dropdownMatchSelectWidth={false}
options={[
{ value: "jack", label: "Jack" },
{ value: "lucy", label: "Lucy" },
{ value: "Yiminghe", label: "yiminghe" },
{ value: "disabled", label: "Disabled", disabled: true },
]}
/>
</div>
</div>
<div className="filter-item">
<div className="filter-item__title">已选：</div>
<div className="filter-item-main">
<Space size={10}>
<Tag closable onClose={onCloseTag}>
无人机
</Tag>
<Tag closable onClose={onCloseTag}>
无人机
</Tag>
</Space>
</div>
</div>
</div>
<Filter
types={["类目", "地域", "品牌", "部件", "型号", "成色"]}
showResultItem
brandData={props.brandData}
categoryData={props.categoryData}
partData={props.partData}
modelData={props.modelData}
qualityData={props.qualityData}
onChange={onFilterChange}
></Filter>
<div style={{paddingTop:13}}>
<ContentBox boxIndex={4} leftContentStyle={{width:"916px",margin:{top:0,right:"12px",bottom:"12px",left:0}}} leftRenderDom={{columns:[{element:leftDom},{element:leftDom},{element:leftDom},{element:leftDom},{element:leftDom},{element:leftDom},{element:leftDom}]}} rightRenderDom={{columns:[{element:rightDom},{element:rightDom}]}}/>
</div>
</Box>
</Layout>
)
......
pages/flyingHandService/index.page.tsx
......@@ -39,7 +39,7 @@ export default function FlyingHandService() {
<Select
className='selectItem'
bordered={false}
dropdownMatchSelectWidth={false}
popupMatchSelectWidth={false}
placeholder="区域"
size="large"
onChange={onProvinceChange}
......@@ -53,7 +53,7 @@ export default function FlyingHandService() {
<Select
className='selectItem'
bordered={false}
dropdownMatchSelectWidth={false}
popupMatchSelectWidth={false}
placeholder="考证"
size="large"
onChange={onProvinceChange}
......@@ -67,7 +67,7 @@ export default function FlyingHandService() {
<Select
className='selectItem'
bordered={false}
dropdownMatchSelectWidth={false}
popupMatchSelectWidth={false}
placeholder="技能"
size="large"
onChange={onProvinceChange}
......
pages/home/waterfallFlowBody/index.tsx
......@@ -5,7 +5,7 @@ import { Box } from "./styled";
import ContentBox from "~/components/contentBox";
import RotationChart from "./components/rotationChart";
import Map from "./components/map";
import icon from './assets/icon.png';
import icon from "./assets/icon.png";
// const icon = "error";
export default function WaterfallFlowBody() {
const onMoreChange = (value: string) => {
......
pages/jobServices/detail/[pid].page.tsx
......@@ -5,7 +5,7 @@ import { Tabs , Button } from 'antd';
import type { TabsProps } from 'antd';
import Evaluate from './components/evaluate';
export default function index() {
export default function JobServicesDetail() {
const onChange = (key: string) => {
console.log(key);
};
......
pages/jobServices/detail/components/evaluate/index.tsx
......@@ -3,8 +3,8 @@ import {Box} from './styled';
import { Rate } from 'antd';
import Image from 'next/image';
export default function index() {
export default function Evaluate() {
const list = [{},{},{},{}]
return (
......
pages/jobServices/index.page.tsx
......@@ -60,7 +60,7 @@ export default function JobServices() {
<Space size={40}>
<Select
bordered={false}
dropdownMatchSelectWidth={false}
popupMatchSelectWidth={false}
placeholder="选择省"
onChange={onProvinceChange}
options={[
......@@ -72,7 +72,7 @@ export default function JobServices() {
/>
<Select
bordered={false}
dropdownMatchSelectWidth={false}
popupMatchSelectWidth={false}
placeholder="选择市"
onChange={onCityChange}
options={[
......@@ -100,7 +100,7 @@ export default function JobServices() {
placeholder="更多"
onChange={onMoreChange}
bordered={false}
dropdownMatchSelectWidth={false}
popupMatchSelectWidth={false}
options={[
{ value: "jack", label: "Jack" },
{ value: "lucy", label: "Lucy" },
......@@ -123,7 +123,7 @@ export default function JobServices() {
placeholder="更多"
onChange={onMoreChange}
bordered={false}
dropdownMatchSelectWidth={false}
popupMatchSelectWidth={false}
options={[
{ value: "jack", label: "Jack" },
{ value: "lucy", label: "Lucy" },
......@@ -146,7 +146,7 @@ export default function JobServices() {
placeholder="更多"
onChange={onMoreChange}
bordered={false}
dropdownMatchSelectWidth={false}
popupMatchSelectWidth={false}
options={[
{ value: "jack", label: "Jack" },
{ value: "lucy", label: "Lucy" },
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论