Skip to content

W
web
提交 6bb5e6b1 作者: 龚洪江
操作

修复：筛选二级下拉，四大模块部分优化

上级 8c2b2ace
正在显示 包含 331 行增加 和 222 行删除
components/filter/api/index.ts
......@@ -4,6 +4,7 @@ export interface FilterOptionResp {
id: number;
name?: string;
appName?: string;
children?: FilterOptionResp[];
}
export interface RegionResp {
......@@ -19,6 +20,7 @@ export interface InfoList {
directoryId: number;
name: string;
icon: string;
children: InfoList[];
}
export interface TypesResp {
directoryId: number;
......
components/filter/compoents/typeInfo/index.tsx
import { useState, useEffect } from 'react';
import { Space, Button, Collapse } from 'antd';
import Image from 'next/image';
import downArrowImg from '~/assets/images/down-arrow.png';
import { FilterOptionResp, InfoList } from '../../api';
import styles from '../../index.module.scss';
......@@ -9,6 +12,10 @@ type Props = {
onChange: (id: FilterOptionResp) => void;
typeName: string;
dataValue: InfoList[];
categoryMouseEnter: (item: FilterOptionResp) => void;
changeCurrentItemIndex: (index: number) => void;
currentItemIndex: number;
categoryMouseLeave: () => void;
};
export default function CategoryItem(props: Props) {
......@@ -24,6 +31,18 @@ export default function CategoryItem(props: Props) {
name: `${props.typeName}：${item.name}`,
});
};
const onMouseEnter = (item: FilterOptionResp, index: number) => {
if (item.children) {
props.changeCurrentItemIndex(index);
} else {
props.changeCurrentItemIndex(-1);
}
props.categoryMouseEnter({
id: item.id,
name: `${props.typeName}：${item.name}`,
children: item.children,
});
};
const showCount = 9; // 展示数量
......@@ -35,11 +54,31 @@ export default function CategoryItem(props: Props) {
<Collapse.Panel
header={
<Space size={[40, 0]}>
{data.slice(0, showCount).map((item) => {
{data.slice(0, showCount).map((item, index) => {
return (
<Button type='link' key={item.id} onClick={(e) => onClick(item)}>
{item.name}
</Button>
<div
key={item.id}
className={`${styles.filterItemContent} ${
props.currentItemIndex === index ? styles.filterItemContentHover : ''
}`}
onMouseEnter={() => onMouseEnter(item, index)}
onMouseLeave={props.categoryMouseLeave}
>
<Button type='link' onClick={(e) => onClick(item)}>
{item.name}
</Button>
{item.children ? (
<Image
src={downArrowImg}
className={styles.filterItemIcon}
width={14}
height={14}
alt='展开图标'
/>
) : (
''
)}
</div>
);
})}
</Space>
......
components/filter/index.module.scss
......@@ -2,6 +2,7 @@
padding: 0px 32px;
background: #ffffff;
border-radius: 6px;
position: relative;
* {
font-size: 12px !important;
......@@ -21,7 +22,6 @@
flex-shrink: 0;
width: 80px;
margin-right: 8px;
font-family: MicrosoftYaHei;
color: rgba(153, 153, 153, 1);
line-height: 26px;
height: auto;
......@@ -56,6 +56,22 @@
padding: 0;
}
}
.filterItemContent{
display: flex;
align-items: center;
cursor: pointer;
.filterItemIcon{
transform: rotateZ(180deg);
margin-left: 5px;
transition: transform 1s;
}
&:hover{
.filterItemIcon{
transform: rotateZ(0deg);
transition: transform 0.168s;
}
}
}
}
:global .ant-select-selector {
......@@ -64,7 +80,6 @@
.ant-select-selection-item,
.ant-select-selection-placeholder {
font-size: 16px;
font-family: MicrosoftYaHei;
color: #3e4149;
}
}
......@@ -75,7 +90,6 @@
:global .ant-btn-link {
font-size: 16px;
font-family: MicrosoftYaHei;
color: #3e4149;
padding: 0;
}
......@@ -84,3 +98,25 @@
padding: 4px 9px;
}
}
.filterCategorySecond{
position: absolute;
top: 26px;
left: 0;
width: 100%;
min-height: 60px;
background: #FFFFFF;
box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.08);
border: 1px solid #EBEBEB;
display: none;
z-index: 9999;
}
.filterCategorySecond:hover ~ .filterItem{
.filterItemContentHover{
.filterItemIcon{
transform: rotateZ(0deg) !important;
transition: transform 0.168s !important;
}
}
}
components/filter/index.tsx
import React, { useEffect, useState, forwardRef, useImperativeHandle, Ref } from 'react';
import React, { useEffect, useState, forwardRef, useImperativeHandle, Ref, useRef } from 'react';
import { Button } from 'antd';
import { useRouter } from 'next/router';
import api, { FilterOptionResp, TypesResp, InfoList } from './api';
......@@ -29,6 +30,7 @@ type Props = {
};
const Filter = (props: Props, ref: Ref<any>) => {
const categorySecondRef = useRef<any>();
const router = useRouter();
useImperativeHandle(ref, () => ({
clearRouter,
......@@ -68,8 +70,6 @@ const Filter = (props: Props, ref: Ref<any>) => {
};
const onDel = (key: string | number) => {
clearRouter();
// console.log(key);
if (Object.prototype.toString.call(key) === '[object String]') {
// @ts-ignore
delete result[key];
......@@ -88,6 +88,52 @@ const Filter = (props: Props, ref: Ref<any>) => {
};
const routerList = ['/jobServices', '/equipmentLeasing', '/flyingHandService', '/mall'];
const [typeInfo, setTypeInfo] = useState<Array<TypesResp> | null>();
const [currentItemIndex, setCurrentItemIndex] = useState<number>(-1); // 当前移入的下标
const [categoryObj, setCategoryObj] = useState<FilterOptionResp>();
// 分类移入
const categoryMouseEnter = (item: FilterOptionResp) => {
if (item.children) {
setCategoryObj(item);
categorySecondRef.current.style.display = 'block';
if (typeInfo) {
const index: number = typeInfo.findIndex((v) =>
v.categoriesInfoListDTO.some((i) => i.id === item.id),
);
categorySecondRef.current.style.top = `${(index + 1) * 26}px`;
}
} else {
categorySecondRef.current.style.display = 'none';
}
};
// 分类移出
const categoryMouseLeave = () => {
categorySecondRef.current.style.display = 'none';
};
// 二级菜单移入
const categorySecondMouseEnter = () => {
if (currentItemIndex !== -1) {
categorySecondRef.current.style.display = 'block';
}
};
// 二级菜单移出
const onMouseLeave = () => {
setCurrentItemIndex(-1);
categorySecondRef.current.style.display = 'none';
};
// 修改移入的下标
const changeCurrentItemIndex = (index: number) => {
setCurrentItemIndex(index);
};
// 二级分类选中
const categorySecondSelect = (v: FilterOptionResp) => {
const obj = JSON.parse(JSON.stringify(categoryObj));
if (obj?.children) {
obj.children = obj.children.filter((item: FilterOptionResp) => item.id === v.id);
obj.name += `/${v.name}`;
onChange(obj, 'categoryId');
}
};
useEffect(() => {
if (routerList.indexOf(router.pathname) > -1) {
(async () => {
......@@ -132,7 +178,20 @@ const Filter = (props: Props, ref: Ref<any>) => {
></RegionItem>
</div>
)}
<div className={styles.filterWrap}>
<div className={styles.filterWrap} onMouseLeave={onMouseLeave}>
<div
className={styles.filterCategorySecond}
ref={categorySecondRef}
onMouseLeave={onMouseLeave}
onMouseEnter={categorySecondMouseEnter}
>
{categoryObj?.children &&
categoryObj?.children.map((v) => (
<Button type='link' key={v.id} onClick={() => categorySecondSelect(v)}>
{v.name}
</Button>
))}
</div>
{typeInfo?.length &&
typeInfo?.map((item) => (
<TypeInfo
......@@ -140,6 +199,10 @@ const Filter = (props: Props, ref: Ref<any>) => {
typeName={item.name}
dataValue={item.categoriesInfoListDTO}
onChange={(e: FilterOptionResp) => onChange(e, 'categoryId')}
categoryMouseEnter={categoryMouseEnter}
changeCurrentItemIndex={changeCurrentItemIndex}
currentItemIndex={currentItemIndex}
categoryMouseLeave={categoryMouseLeave}
></TypeInfo>
))}
{props.showResultItem && <ResultItem data={result} onDel={onDel}></ResultItem>}
......
components/wxCodeModal/index.tsx
import { FC, useEffect, useState } from 'react';
import { FC } from 'react';
import { Modal, ModalProps, Image } from 'antd';
import api from '~/api';
import { Box } from './styled';
const WxCodeModal: FC<ModalProps> = ({ open, onCancel }) => {
const [wxCodeImg, setWxCodeImg] = useState<string>('');
const getWXCode = () => {
api.listBannerImg('WX_CODE').then(({ result }) => {
if (result) {
setWxCodeImg(result[0].bannerImg);
}
});
};
useEffect(() => {
getWXCode();
}, []);
interface SelfProps {
wxCodeImg: string;
}
const WxCodeModal: FC<ModalProps & SelfProps> = ({ open, onCancel, wxCodeImg }) => {
return (
<Modal open={open} onCancel={onCancel} width={400} footer={null}>
<Box>
......
pages/equipmentLeasing/index.page.tsx
......@@ -113,7 +113,9 @@ export default function EquipmentLeasing(props: Props) {
...pageParams,
pageNo: 1,
});
adapterFilterResult.categoryId = adapterFilterResult.categoryId?.map((item) => item.id);
adapterFilterResult.categoryId = adapterFilterResult.categoryId?.map((item) =>
item.children ? item.children[0].id : item.id,
);
setFilterResult(adapterFilterResult);
};
const getPropagandaCenter = () => {
......@@ -140,11 +142,7 @@ export default function EquipmentLeasing(props: Props) {
return (
<Layout>
<Box>
<Filter
types={['地域', '设备品牌', '设备型号']}
showResultItem
onChange={onFilterChange}
></Filter>
<Filter types={['设备品牌', '设备型号']} showResultItem onChange={onFilterChange}></Filter>
<div style={{ paddingTop: 13 }}>
<ContentBox
boxIndex={5}
......
pages/home/waterfallFlowBody/api/index.ts
......@@ -177,7 +177,7 @@ export const listNewsApi = {
};
export interface HomeCategoriesType {
type: 1 | 2 | 3 | 4;
type: 1 | 2 | 3 | 4 | 5 | 6;
}
export interface ResHomeCategoriesType {
id: number;
......
pages/home/waterfallFlowBody/index.tsx
......@@ -12,6 +12,7 @@ import api, { AllType, NewsPageType, NewsTenderType, listNewsApi } from './api';
import Map from './components/map';
import RotationChart from './components/rotationChart';
import { Box } from './styled';
import commonApi from '~/api';
interface ColumnsType {
title: string;
......@@ -21,47 +22,6 @@ interface ColumnsType {
export default function WaterfallFlowBody() {
const router = useRouter();
const [list] = useState([
'中国人寿',
'中国平安',
'中国人保',
'太平洋保险',
'新华保险',
'中国太平',
'泰康保险',
'华夏保险',
'阳光保险',
'富德生命人寿',
'中邮人寿',
'前海人寿',
'百年人寿',
'国华人寿',
'工银安盛人寿',
'恒大人寿',
'君康人寿',
'友邦保险',
'建信人寿',
'大家人寿',
'农银人寿',
'中信保城人寿',
'合众人寿',
]);
const [list2, setList2] = useState([
'天目将PAAS平台',
'天目将公安平台',
'天目将应急平台',
'天目将城管平台',
'天目将电力平台',
'天目将石油平台',
'SESP-U1无人机仿真软件',
'云享飞服务号',
'无人机商城',
'云飞手',
'云仓',
'云享飞',
'科比特智教',
]);
const columns = [
{
title: '无人机出租',
......@@ -73,7 +33,7 @@ export default function WaterfallFlowBody() {
},
{
title: '无人机保险',
router: '',
router: '/mall',
},
{
title: '无人机培训',
......@@ -85,7 +45,7 @@ export default function WaterfallFlowBody() {
},
{
title: '无人机工具软件',
router: '',
router: '/mall',
},
];
......@@ -94,6 +54,7 @@ export default function WaterfallFlowBody() {
const [rightTopDomList, setRightTopDomList] = useState<JSX.Element>();
const [rightBottomDomList, setRightBottomDomList] = useState<JSX.Element>();
const [wxCodeShow, setWXCodeShow] = useState<boolean>(false);
const [wxCodeImg, setWxCodeImg] = useState<string>('');
const onMoreChange = (value: { value: string; label: number }, index: number, option: []) => {
const [item] = option.filter((item: any) => item.name === value.value);
......@@ -106,22 +67,24 @@ export default function WaterfallFlowBody() {
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, categoryName: item, value: index };
});
const list2Option = JSON.parse(JSON.stringify(list2)).map((item: string, index: number) => {
return { id: index, categoryName: item, value: index };
});
const optionList = [
const res5 = await api.HomeCategories({ type: 5 }); // 无人机保险
const res6 = await api.HomeCategories({ type: 6 }); // 无人机软件
const optionList: any = [
res2.result,
res4.result,
res5.result,
res3.result,
res1.result,
res6.result,
];
const listValue: any = [
res2.result,
res4.result,
listOption,
res5.result,
res3.result,
res1.result,
list2Option,
res6.result,
];
const listValue: any = [res2.result, res4.result, [], res3.result, res1.result, []];
setLeftDomList(
columns.map((item, index) => {
if (index < 3) {
......@@ -144,10 +107,11 @@ export default function WaterfallFlowBody() {
setRightTopDomList(rightDom(res7.result?.list!));
setRightBottomDomList(rightDom2(res8.result?.list!));
})();
getWXCode();
}, []);
const routerPath = (index: number, item?: AllType) => {
if (item && (index === 0 || index === 1 || index === 3 || index === 4)) {
if (item) {
router.push({
pathname: columns[index].router,
query: {
......@@ -155,39 +119,11 @@ export default function WaterfallFlowBody() {
name: item.categoryName,
},
});
} else {
router.push({
pathname: columns[index].router,
});
}
};
const handleTenderApply = () => {
setWXCodeShow(true);
// if (item.apply) return;
// if (userInfo) {
// let res = await listNewsApi.tenderApply({
// tenderInfoId: item.id,
// tenderNewsId: item.tenderNewsId,
// userAccountId: userInfo.id,
// });
// try {
// if (res.code === '200') {
// message.success('申请成功');
// let res8 = await listNewsApi.listNewTenderInfo({
// pageNo: 1,
// pageSize: 6,
// });
// setRightBottomDomList(rightDom2(res8.result?.list!));
// } else {
// message.error(res.message);
// }
// } catch (e) {
// console.log(e);
// }
// } else {
// setNeedLogin(true);
// }
};
const wxCodeModalCancel = () => {
setWXCodeShow(false);
......@@ -225,41 +161,19 @@ export default function WaterfallFlowBody() {
</div>
<div className='item-body'>
<Space size={[15, 0]} wrap>
{index === 2
? list.map((item, index) => (
<div
key={item}
className={`item-bubble ${
index === 0 || index === 1 || index === 2 ? 'active' : ''
}`}
>
{item}
</div>
))
: index === 5
? list2.map((item, index) => (
<div
key={item}
className={`item-bubble ${
index === 0 || index === 1 || index === 2 ? 'active' : ''
}`}
>
{item}
</div>
))
: resultList[index]?.map((item, indexer) => {
return (
<div
key={item.categoryName}
className={`item-bubble ${
indexer === 0 || indexer === 1 || indexer === 2 ? 'active' : ''
}`}
onClick={() => routerPath(index, item)}
>
{item.categoryName}
</div>
);
})}
{resultList[index]?.map((item, indexer) => {
return (
<div
key={item.categoryName}
className={`item-bubble ${
indexer === 0 || indexer === 1 || indexer === 2 ? 'active' : ''
}`}
onClick={() => routerPath(index, item)}
>
{item.categoryName}
</div>
);
})}
</Space>
</div>
</div>
......@@ -330,7 +244,13 @@ export default function WaterfallFlowBody() {
</div>
);
};
const getWXCode = () => {
commonApi.listBannerImg('WX_CODE').then(({ result }) => {
if (result) {
setWxCodeImg(result[0].bannerImg);
}
});
};
return (
<Box>
<ContentBox
......@@ -350,7 +270,7 @@ export default function WaterfallFlowBody() {
],
}}
/>
<WxCodeModal open={wxCodeShow} onCancel={wxCodeModalCancel} />
<WxCodeModal open={wxCodeShow} onCancel={wxCodeModalCancel} wxCodeImg={wxCodeImg} />
</Box>
);
}
pages/jobServices/detail/[id].page.tsx
......@@ -7,8 +7,9 @@ import moment from 'moment';
import Image from 'next/image';
import { useRouter } from 'next/router';
import { RegionResp } from '~/components/filter/api';
import commonApi from '~/api';
import Layout from '~/components/layout';
import WxCodeModal from '~/components/wxCodeModal';
import { UserContext } from '~/lib/userProvider';
import api, { ListPageJobInfoResp } from './api';
......@@ -25,22 +26,12 @@ export default function JobServicesDetail() {
const [detail, setDetail] = useState<ListPageJobInfoResp | null>();
const [sale, setSale] = useState<string | null>();
const onChange = (key: string) => {
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"
/> */}
{detail?.serviceIntroduction ? (
<div dangerouslySetInnerHTML={{ __html: detail?.serviceIntroduction }}></div>
) : null}
......@@ -75,17 +66,13 @@ export default function JobServicesDetail() {
const [formDate] = Form.useForm();
const [isModalOpen, setIsModalOpen] = useState(false);
const [loading, setLoading] = useState(false);
const [provinceList, setProvinceList] = useState<RegionResp[]>([]);
const [isAddressMapShow, setIsAddressMapShow] = useState(false);
const [addressContent, setAddressContent] = useState<any>();
const [wxCodeImg, setWxCodeImg] = useState<string>('');
const [wxCodeModalShow, setWxCodeModalShow] = useState<boolean>(false);
useEffect(() => {
api.region().then((res) => {
console.log(res);
console.log(res?.result?.map((item) => item.childInfo).flat());
setProvinceList(res?.result || []);
});
getWXCode();
}, []);
const disabledDate: RangePickerProps['disabledDate'] = (current) => {
return current && current < moment().endOf('day');
......@@ -151,6 +138,20 @@ export default function JobServicesDetail() {
setIsModalOpen(false);
formDate.resetFields();
};
// 在线沟通-二维码
const showWxCodeModalClick = () => {
setWxCodeModalShow(true);
};
const getWXCode = () => {
commonApi.listBannerImg('WX_CODE').then(({ result }) => {
if (result) {
setWxCodeImg(result[1]?.bannerImg);
}
});
};
const wxCodeModalCancel = () => {
setWxCodeModalShow(false);
};
return (
<Layout>
......@@ -167,15 +168,20 @@ export default function JobServicesDetail() {
<span className='content'>飞手需通过认证培训才可作业</span>
</div>
<div className='more'>
<div className='tab filst'>测绘场景榜第1名</div>
{/* <div className='tab filst'>测绘场景榜第1名</div> */}
<div className='tab'>7x24小时服务</div>
<div className='tab'>{`月售${sale}`}</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
className='btn-left'
size='small'
type='primary'
onClick={showWxCodeModalClick}
>
在线沟通
</Button>
<Button onClick={appointmentNow} className='btn-right' size='small' type='primary'>
立即预约
......@@ -184,7 +190,7 @@ export default function JobServicesDetail() {
</div>
</div>
</div>
<Tabs className='tabs' defaultActiveKey='1' items={items} onChange={onChange} />
<Tabs className='tabs' defaultActiveKey='1' items={items} />
<Modal
wrapClassName='reservation'
......@@ -292,6 +298,11 @@ export default function JobServicesDetail() {
/>
</Modal>
) : null}
<WxCodeModal
wxCodeImg={wxCodeImg}
open={wxCodeModalShow}
onCancel={wxCodeModalCancel}
></WxCodeModal>
</Box>
</Layout>
);
......
pages/jobServices/index.page.tsx
......@@ -120,7 +120,9 @@ export default function JobServices() {
...pageParams,
pageNo: 1,
});
adapterFilterResult.categoryId = adapterFilterResult.categoryId?.map((item) => item.id);
adapterFilterResult.categoryId = adapterFilterResult.categoryId?.map((item) =>
item.children ? item.children[0].id : item.id,
);
setFilterResult(adapterFilterResult);
};
......@@ -138,7 +140,7 @@ export default function JobServices() {
return (
<Layout>
<Box>
<Filter types={['地域', '行业', '应用']} showResultItem onChange={onFilterChange}></Filter>
<Filter types={['行业', '应用']} showResultItem onChange={onFilterChange}></Filter>
<div style={{ marginTop: 10 }}>
<ContentBox
boxIndex={2}
......
pages/mall/api/index.ts
......@@ -13,6 +13,7 @@ export interface Goods {
goodsName: string;
images: string;
price?: any;
description: string;
}
export interface DeviceListResp {
......
pages/mall/detail/[id].page.tsx
......@@ -24,6 +24,9 @@ import { UserContext } from '~/lib/userProvider';
import api, { GetLeaseGoodsDetailResp } from './api';
import IntentionModal from './components/intentionModal';
import WxCodeModal from '~/components/wxCodeModal';
import wxCodeModal from '~/components/wxCodeModal';
import commonApi from '~/api';
export default function MallDetail() {
const { userInfo, setNeedLogin } = useContext(UserContext);
......@@ -33,7 +36,8 @@ export default function MallDetail() {
const [detail, setDetail] = useState<GetLeaseGoodsDetailResp | null>(null); // 详情数据
const [intentionModalOpen, setIntentionModalOpen] = useState(false); // 意向弹窗
const [productImg, setProductImg] = useState(''); // 展示的商品图
const [wxCodeModalShow, setWXCodeModalShow] = useState<boolean>(false);
const [wxCodeImg, setWxCodeImg] = useState<string>('');
// 打开意向modal
const openIntentionModal = () => {
if (userInfo) {
......@@ -72,6 +76,7 @@ export default function MallDetail() {
setWareSkuList(List);
}
});
getWXCode();
}
}, [id]);
......@@ -79,6 +84,22 @@ export default function MallDetail() {
const [isorderForGoods, setIsorderForGoods] = useState(false);
const [wareSkuList, setWareSkuList] = useState<any>();
const [mallDetail, setMallDetail] = useState<any>();
//商城-客服二维码
const showWxCodeClick = () => {
setWXCodeModalShow(true);
};
const getWXCode = () => {
commonApi.listBannerImg('WX_CODE').then(({ result }) => {
if (result) {
setWxCodeImg(result[2].bannerImg);
}
});
};
const wxCodeModalCancel = () => {
setWXCodeModalShow(false);
};
return (
<Layout>
{/* 意向弹窗 */}
......@@ -201,38 +222,41 @@ export default function MallDetail() {
</Row>
</Space>
<Space size={12} style={{ marginTop: 123 }}>
<Button className={styles.btn1} onClick={openIntentionModal}>
加入购物车
{/*<Button className={styles.btn1} onClick={openIntentionModal}>*/}
{/* 加入购物车*/}
{/*</Button>*/}
<Button className={styles.btn1} onClick={showWxCodeClick}>
在线沟通
</Button>
<Button className={styles.btn2} type='primary' onClick={openIntentionModal}>
提交意向
</Button>
<Space size={20} style={{ marginLeft: 19 }}>
<div style={{ textAlign: 'center', cursor: 'pointer' }}>
<Image
alt=''
src={require('./assets/phone.png')}
width={20}
height={20}
></Image>
<div className={styles.font5} style={{ marginTop: 5 }}>
电话
</div>
</div>
<div style={{ textAlign: 'center', cursor: 'pointer' }}>
<Badge count={55} size='small'>
<Image
alt=''
src={require('./assets/car.png')}
width={20}
height={20}
></Image>
</Badge>
<div className={styles.font5} style={{ marginTop: 5 }}>
购物车
</div>
</div>
</Space>
{/*<Space size={20} style={{ marginLeft: 19 }}>*/}
{/* <div style={{ textAlign: 'center', cursor: 'pointer' }}>*/}
{/* <Image*/}
{/* alt=''*/}
{/* src={require('./assets/phone.png')}*/}
{/* width={20}*/}
{/* height={20}*/}
{/* ></Image>*/}
{/* <div className={styles.font5} style={{ marginTop: 5 }}>*/}
{/* 电话*/}
{/* </div>*/}
{/* </div>*/}
{/* <div style={{ textAlign: 'center', cursor: 'pointer' }}>*/}
{/* <Badge count={55} size='small'>*/}
{/* <Image*/}
{/* alt=''*/}
{/* src={require('./assets/car.png')}*/}
{/* width={20}*/}
{/* height={20}*/}
{/* ></Image>*/}
{/* </Badge>*/}
{/* <div className={styles.font5} style={{ marginTop: 5 }}>*/}
{/* 购物车*/}
{/* </div>*/}
{/* </div>*/}
{/*</Space>*/}
</Space>
</Space>
</Space>
......@@ -253,6 +277,8 @@ export default function MallDetail() {
mallDetail={mallDetail}
/>
)}
{/*客服二维码弹窗*/}
<WxCodeModal wxCodeImg={wxCodeImg} open={wxCodeModalShow} onCancel={wxCodeModalCancel} />
</Layout>
);
}
pages/mall/index.module.scss
......@@ -56,20 +56,28 @@
}
.title {
padding: 0 18px;
margin-left: 14px;
font-size: 15px;
font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
font-weight: bold;
color: #333333;
@include ellipsis(1);
}
.sellCount {
.info{
display: flex;
align-items: center;
margin:0 14px;
font-size: 12px;
font-family: MicrosoftYaHei;
color: #ff552d;
padding-left: 20px;
font-weight: 400;
color: #8F8F8F;
.desc{
flex: 1;
margin-right: 10px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
}
}
}
}
pages/mall/index.page.tsx
......@@ -77,7 +77,9 @@ export default function Mall(props: Props) {
...pageParams,
pageNo: 1,
});
adapterFilterResult.categoryId = adapterFilterResult.categoryId?.map((item) => item.id);
adapterFilterResult.categoryId = adapterFilterResult.categoryId?.map((item) =>
item.children ? item.children[0].id : item.id,
);
setFilterResult(adapterFilterResult);
};
......@@ -90,7 +92,7 @@ export default function Mall(props: Props) {
return (
<Layout>
<div className='page' style={{ paddingTop: '18px' }}>
<Filter types={['地域']} showResultItem onChange={onFilterChange}></Filter>
<Filter types={[]} showResultItem onChange={onFilterChange}></Filter>
<div className={styles.productList}>
<div className={styles.main}>
......@@ -114,9 +116,12 @@ export default function Mall(props: Props) {
></Image>
</div>
<div className={styles.title}>{item.goodsName}</div>
<div className={styles.sellCount}>
半年售
{(Math.floor(Math.random() * 901) + 100).toFixed(0)}
<div className={styles.info}>
<div className={styles.desc}>{item.description}</div>
<div className={styles.sellCount}>
已售
{(Math.floor(Math.random() * 901) + 100).toFixed(0)}
</div>
</div>
</li>
);
......
pages/projectInfo/index.page.tsx
......@@ -51,6 +51,7 @@ export default function ProjectInfo() {
const [region, setRegion] = useState<Array<RegionResp>>([]);
const [params, setParams] = useState<Params | null>({});
const [wxCodeImg, setWxCodeImg] = useState<string>('');
const [wxCodeShow, setWXCodeShow] = useState<boolean>(false);
useEffect(() => {
......@@ -69,8 +70,15 @@ export default function ProjectInfo() {
}
setRegion(temp1);
});
getWXCode();
}, []);
const getWXCode = () => {
commonApi.listBannerImg('WX_CODE').then(({ result }) => {
if (result) {
setWxCodeImg(result[0].bannerImg);
}
});
};
const onRegionChange = (value: Array<string>, list: Array<RegionResp>) => {
console.log(value);
const params1: Params = {
......@@ -91,7 +99,6 @@ export default function ProjectInfo() {
};
const onDateChange: DatePickerProps['onChange'] = (date, dateString) => {
console.log(date, dateString);
setParams({
...params,
date: dateString || undefined,
......@@ -137,7 +144,7 @@ export default function ProjectInfo() {
/>
</div>
</div>
<WxCodeModal open={wxCodeShow} onCancel={wxCodeModalCancel} />
<WxCodeModal open={wxCodeShow} onCancel={wxCodeModalCancel} wxCodeImg={wxCodeImg} />
</Layout>
);
}
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论