Skip to content

J
jinfa-platform
Commit 077f50cd authored by GuanHua's avatar GuanHua
Browse files
Options

feat:商品列表和详情接口对接

parent ebb9a85f
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 169 additions and 80 deletions
src/pages/lxMall/commodity/index.less
View file @ 077f50cd
......@@ -4,7 +4,9 @@
.commodity_container {
display: flex;
margin-top: 20px;
padding-top: 20px;
width: 1200px;
margin: 0 auto;
.commodity_main {
flex: 1;
......@@ -155,24 +157,32 @@
margin-top: 60px;
text-align: right;
.ant-pagination-item {
:global {
.ant-pagination-item {
&:hover,
&:active {
border-color: var(--mall_main_color);
&:hover,
&:active {
border-color: var(--mall_main_color);
&>a {
color: var(--mall_main_color);
&>a {
color: var(--mall_main_color);
}
}
}
}
.ant-pagination-item-active {
background-color: var(--mall_main_color);
border-color: var(--mall_main_color);
.ant-pagination-item-active {
background-color: var(--mall_main_color);
border-color: var(--mall_main_color);
&:hover {
&>a {
color: #ffffff;
}
}
&>a {
color: #ffffff;
&>a {
color: #ffffff;
}
}
}
}
......
src/pages/lxMall/commodity/index.tsx
View file @ 077f50cd
import React, { useState } from 'react'
import React, { useState, useEffect } from 'react'
import { CaretUpOutlined, CaretDownOutlined, UnorderedListOutlined, AppstoreOutlined, CloseOutlined } from '@ant-design/icons'
import Filter, { FilterType } from '../components/Filter'
import cx from 'classnames'
import { Pagination } from 'antd'
import CommodityList from './list'
import NoResult from './noResult'
import isEmpty from 'lodash/isEmpty'
import { PublicApi } from '@/services/api'
import { GetSearchCommodityShopGetCommodityListResponseDetail } from '@/services'
import bannerImg from '@/assets/imgs/banner_2.png'
import arrowDownIcon from '@/assets/imgs/arrow_down.png'
import arrowDownActiveIcon from '@/assets/imgs/arrow_down_active.png'
import './index.less'
import styles from './index.less'
interface filterValueType {
key: string;
......@@ -29,13 +32,57 @@ interface CommodityPropsType {
location: any
}
interface filterQuery {
current: number;
pageSize: number;
name?: string;
categoryId?: number;
customerCategoryId?: number;
provinceCode?: number;
cityCode?: number;
brandId?: number;
customerAttributeList?: any;
Min?: number;
Max?: number;
priceType?: number;
}
const Commodity: React.FC<CommodityPropsType> = (props) => {
const { query: { search = "" } } = props.location
const [showType, setShowType] = useState<number>(1) // 展示方式：1：矩阵排列； 2:列表排列
const [filterList, setFilterList] = useState([])
const [commodityList, setCommodityList] = useState<GetSearchCommodityShopGetCommodityListResponseDetail[]>([])
const [current, setCurrent] = useState<number>(1)
const [pageSize, setPageSize] = useState<number>(20)
const [totalCount, setTotalCount] = useState<number>(0)
const [filterParam, setFilterParam] = useState<filterQuery | {}>({})
const filterConfig = [FilterType.commonlyUsed, FilterType.category, FilterType.style, FilterType.brand, FilterType.price, FilterType.useArea, FilterType.commodityType]
useEffect(() => {
fetchCommodityList()
}, [filterParam, current])
const fetchCommodityList = () => {
let param = {
current,
pageSize
}
if (!isEmpty(filterParam)) {
param = Object.assign(param, filterParam)
}
//@ts-ignore
PublicApi.getSearchCommodityShopGetCommodityList(param).then(res => {
if (res.code === 1000) {
setCommodityList(res.data.data)
setTotalCount(res.data.totalCount)
}
})
}
const handleFilter = (filterValue: filterValueType) => {
let filteState = filterList.some(item => item.type === filterValue.type)
let tempFilterList = [...filterList]
......@@ -65,73 +112,74 @@ const Commodity: React.FC<CommodityPropsType> = (props) => {
setFilterList([])
}
const handlePageChange = (page) => {
setCurrent(page)
}
return (
<div className="commodity">
<div className="mall_container">
<div className="commodity_container">
<div className={styles.commodity}>
<div className={styles.mall_container}>
<div className={styles.commodity_container}>
<Filter onFilter={handleFilter} filterConfig={filterConfig} />
<div className="commodity_main">
<div className="banner">
<div className={styles.commodity_main}>
<div className={styles.banner}>
<img src={bannerImg} />
</div>
<div className="tool_bar">
<div className="tool_bar_left">
<div className="tool_bar_filter_item">
<div className={styles.tool_bar}>
<div className={styles.tool_bar_left}>
<div className={styles.tool_bar_filter_item}>
<span>销量</span>
<i className="icon">
<i className={styles.icon}>
<img src={arrowDownIcon} />
</i>
</div>
<div className="tool_bar_filter_item">
<div className={styles.tool_bar_filter_item}>
<span>信用</span>
<i className="icon">
<i className={styles.icon}>
<img src={arrowDownIcon} />
</i>
</div>
<div className="tool_bar_filter_item">
<div className={styles.tool_bar_filter_item}>
<span>价格</span>
<div className="price_filter_box">
<CaretUpOutlined className="icon" />
<CaretDownOutlined className="icon" />
<div className={styles.price_filter_box}>
<CaretUpOutlined className={styles.icon} />
<CaretDownOutlined className={styles.icon} />
</div>
</div>
</div>
<div className="tool_bar_right">
<div className="count">
<div className={styles.tool_bar_right}>
<div className={styles.count}>
<span>共</span>
<label>1,234</label>
<label>{totalCount}</label>
<span>个商品</span>
</div>
<AppstoreOutlined className={cx("icon", showType === 1 ? 'active' : '')} onClick={() => setShowType(1)} />
<UnorderedListOutlined className={cx("icon", showType === 2 ? 'active' : '')} onClick={() => setShowType(2)} />
<AppstoreOutlined className={cx(styles.icon, showType === 1 ? styles.active : '')} onClick={() => setShowType(1)} />
<UnorderedListOutlined className={cx(styles.icon, showType === 2 ? styles.active : '')} onClick={() => setShowType(2)} />
</div>
</div>
<div className="filter_bar">
<div className="filter_bar_left">
<div className="filter_bar_left_text">保存为常用筛选</div>
<div className="filter_bar_left_split"></div>
<div className="filter_bar_left_text" onClick={handleResetFilter}>重置</div>
<div className={styles.filter_bar}>
<div className={styles.filter_bar_left}>
<div className={styles.filter_bar_left_text}>保存为常用筛选</div>
<div className={styles.filter_bar_left_split}></div>
<div className={styles.filter_bar_left_text} onClick={handleResetFilter}>重置</div>
</div>
<div className="filter_bar_list">
<div className={styles.filter_bar_list}>
{
filterList.map(item => (
<div className="filter_bar_list_item" key={item.key}>
<span className="filter_bar_list_item_text">{item.title}</span>
<CloseOutlined className="filter_bar_list_item_icon" onClick={() => handleDeleteFilterItem(item.key)} />
<div className={styles.filter_bar_list_item} key={item.key}>
<span className={styles.filter_bar_list_item_text}>{item.title}</span>
<CloseOutlined className={styles.filter_bar_list_item_icon} onClick={() => handleDeleteFilterItem(item.key)} />
</div>
))
}
</div>
</div>
{
}
{
!!search ? <NoResult search={search} /> : (
<>
<CommodityList showType={showType} />
<div className="pagination_wrap">
<Pagination showQuickJumper showSizeChanger={false} defaultCurrent={1} total={100} />
<CommodityList showType={showType} commodityList={commodityList} />
<div className={styles.pagination_wrap}>
<Pagination showQuickJumper showSizeChanger={false} onChange={handlePageChange} current={current} pageSize={pageSize} total={totalCount} />
</div>
</>
)
......
src/pages/lxMall/commodity/list.tsx
View file @ 077f50cd
import React from 'react'
import cx from 'classnames'
import { GetSearchCommodityShopGetCommodityListResponseDetail } from '@/services'
import creditIcon from '@/assets/imgs/credit_icon.png'
import './list.less'
interface CommodityListPropsType {
showType: number
showType: number;
commodityList: GetSearchCommodityShopGetCommodityListResponseDetail[]
}
const CommodityList: React.FC<CommodityListPropsType> = (props) => {
const { showType } = props
const { showType, commodityList = [] } = props
const renderPrice = (commodityItem: GetSearchCommodityShopGetCommodityListResponseDetail) => {
switch (commodityItem.priceType) {
// 现货价格
case 1:
return (
<div className="goods_price">
<span>￥</span>
<label>{commodityItem.min}</label>
</div>
)
break
// 价格需要询价
case 2:
return (
<div className="goods_price">
<label>在线询价</label>
</div>
)
break
// 积分兑换商品
case 3:
break
default:
break
}
let dataList = []
for (let i = 0; i < 20; i++) {
dataList.push(i)
}
const renderItem = () => {
......@@ -20,23 +46,23 @@ const CommodityList: React.FC<CommodityListPropsType> = (props) => {
return (
<>
{
dataList.map((item, index) => (
<div key={item} className="commodity_list_item row">
<a href={`/shop/commodity/detail?id=asdjflewjfe&type=prompt`}>
commodityList.map((item, index) => (
<div key={item.id} className="commodity_list_item row">
<a href={`/shop/commodity/detail?id=${item.id}&type=${item.priceType}`} target="_blank">
<div className="goods_img">
<img src="https://img.alicdn.com/bao/uploaded/i1/691602756/O1CN013mdkHl1WEI92iLR75_!!691602756.jpg_400x400q60.jpg" />
<img src={item.commodityPic || "https://img.alicdn.com/bao/uploaded/i1/691602756/O1CN013mdkHl1WEI92iLR75_!!691602756.jpg_400x400q60.jpg"} />
</div>
<div className="info_box">
<div className="goods_price">
<span>￥</span>79.00
</div>
<div className="goods_name">0.8-1.0mm黑色手折纹胎水牛皮黄牛头层自然摔纹硬度适中偏软硬度适中偏软软…</div>
<div className="count">已售: 3,230</div>
{
renderPrice(item)
}
<div className="goods_name">{item.name}</div>
<div className="count">已售: {item.sold || 0}</div>
<div className="company_info">
<div className="goods_name">温州市龙昌皮业有限公司</div>
<div className="goods_name">{item.memberName}</div>
<div className="credit">
<img className="credit_icon" src={creditIcon} />
<span>1288</span>
<span>{item.creditScore || 0}</span>
</div>
</div>
</div>
......@@ -51,28 +77,30 @@ const CommodityList: React.FC<CommodityListPropsType> = (props) => {
return (
<>
{
dataList.map((item, index) => (
<div key={item} className="commodity_list_item column">
<a href={`/shop/commodity/detail?id=asdjflewjfe&type=prompt`}>
commodityList.map((item, index) => (
<div key={item.id} className="commodity_list_item column">
<a href={`/shop/commodity/detail?id=${item.id}&type=${item.priceType}`} target="_blank">
<div className="goods_img">
<img src="https://img.alicdn.com/bao/uploaded/i1/691602756/O1CN013mdkHl1WEI92iLR75_!!691602756.jpg_400x400q60.jpg" />
<img src={item.commodityPic || "https://img.alicdn.com/bao/uploaded/i1/691602756/O1CN013mdkHl1WEI92iLR75_!!691602756.jpg_400x400q60.jpg"} />
</div>
<div className="info_box">
<div className="info_box_content">
<div className="name">0.8-1.0mm黑色手折纹胎水牛皮</div>
<div className="price"><span>￥</span>79.00</div>
<div className="count">已售: 3,230</div>
<div className="name">{item.name}</div>
<div className="price"><span>￥</span>{item.min}</div>
<div className="count">已售: {item.sold || 0}</div>
</div>
<ul className="tags_list">
<li className="tags_list_item">黄牛头皮层自然摔纹</li>
<li className="tags_list_item">硬度适中偏软</li>
<li className="tags_list_item">手感舒适</li>
{
item.sellingPoint.map((pointItem, pointIndex) => (
<li className="tags_list_item" key={`tags_list_item_${pointIndex}`}>{pointItem}</li>
))
}
</ul>
<div className="credit">
<img className="credit_icon" src={creditIcon} />
<span>1288</span>
<span>{item.creditScore || 0}</span>
</div>
<div className="shopname">温州市龙昌皮业有限公司</div>
<div className="shopname">{item.memberName}</div>
</div>
</a>
</div>
......
src/pages/lxMall/commodityDetail/index.less
View file @ 077f50cd
......@@ -166,9 +166,12 @@
margin-right: 20px;
}
&>.attrName {
margin-left: 10px;
}
.imgbox {
overflow: hidden;
margin-right: 10px;
margin-left: 2px;
&>img {
......
src/pages/lxMall/commodityDetail/index.tsx
View file @ 077f50cd
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment