Skip to content

J
jinfa-platform
Commit 82c84dfa authored by GuanHua's avatar GuanHua
Browse files
Options

style: 商城样式修改

parent 5c948062
Hide whitespace changes
Inline Side-by-side
Showing with 411 additions and 137 deletions
src/pages/lxMall/commodity/index.less
View file @ 82c84dfa
......@@ -24,8 +24,9 @@
.tool_bar {
display: flex;
height: 48px;
height: 40px;
width: 100%;
border: 1px solid #EBECF0;
.tool_bar_left {
......@@ -34,12 +35,25 @@
.tool_bar_filter_item {
display: flex;
height: 40px;
align-items: center;
color: #606266;
margin-right: 30px;
width: 88px;
justify-content: center;
font-size: 12px;
border-right: 1px solid #EBECF0;
cursor: pointer;
.arrowIcon {
color: #C0C4CC;
font-size: 12px;
margin-left: 4px;
}
.active {
color: var(--mall_main_color);
}
&>.icon {
width: 20px;
height: 20px;
......@@ -62,7 +76,7 @@
color: #C0C4CC;
&.active {
color: #303133;
color: var(--mall_main_color);
}
&:last-child {
......@@ -79,9 +93,52 @@
align-items: center;
font-size: 12px;
.showTypeBox {
width: 40px;
height: 40px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
border-left: 1px solid #EBECF0;
&>.icon {
color: #E4E6EB;
font-size: 22px;
cursor: pointer;
&.active {
color: #303133;
}
}
}
.pageBox {
display: flex;
border-left: 1px solid #EBECF0;
padding: 0 8px;
font-size: 12px;
height: 40px;
line-height: 40px;
align-items: center;
&_main {
margin: 0 8px;
}
&>.pageBoxIcon {
color: #303133;
cursor: pointer;
&.disabled {
color: #909399;
}
}
}
.count {
color: #909399;
margin-right: 14px;
&>label {
color: #333300;
......@@ -89,21 +146,12 @@
}
}
&>.icon {
color: #C0C4CC;
margin-left: 25px;
font-size: 22px;
cursor: pointer;
&.active {
color: #303133;
}
}
}
}
.filter_bar {
margin-top: 7px;
margin: 16px 0;
display: flex;
align-items: center;
......@@ -118,6 +166,10 @@
font-size: 12px;
padding-left: 10px;
&_text1 {
color: #909399;
}
&_text {
color: #3A3A3A;
cursor: pointer;
......@@ -134,20 +186,31 @@
.filter_bar_list {
display: flex;
margin-left: 30px;
align-items: center;
.filter_bar_list_item {
height: 20px;
line-height: 20px;
padding: 0 5px;
display: flex;
height: 24px;
line-height: 24px;
background-color: #F4F5F7;
font-size: 12px;
color: #303133;
border-radius: 4px;
margin-right: 15px;
margin-right: 20px;
// margin-bottom: 8px;
.filter_bar_close_box {
width: 24px;
background-color: #F7F8FA;
border-left: 1px solid #EBECF0;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
&_text {
flex: 1;
padding: 0 5px;
&>b {
margin-left: 5px;
color: #D32F2F;
......@@ -234,4 +297,4 @@
}
}
}
}
\ No newline at end of file
}
src/pages/lxMall/commodity/index.tsx
View file @ 82c84dfa
import React, { useState, useEffect } from 'react'
import { CaretUpOutlined, CaretDownOutlined, UnorderedListOutlined, AppstoreOutlined, CloseOutlined } from '@ant-design/icons'
import { CaretUpOutlined, CaretDownOutlined, UnorderedListOutlined, AppstoreOutlined, CloseOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons'
import Filter from '../components/Filter'
import { FILTER_TYPE } from '@/constants'
import cx from 'classnames'
......@@ -315,23 +315,15 @@ const Commodity: React.FC<CommodityPropsType> = (props) => {
<div className={styles.tool_bar}>
<div className={styles.tool_bar_left}>
<div className={styles.tool_bar_filter_item} onClick={() => handleSort(FILTER_TYPE.soldSort)}>
<span>销量</span>
<i className={styles.icon}>
{
filterList.some(item => item.key === FILTER_TYPE.soldSort) ? <img src={arrowDownActiveIcon} /> : <img src={arrowDownIcon} />
}
</i>
<span className={cx(filterList.some(item => item.key === FILTER_TYPE.soldSort) ? styles.active : '')}>销量</span>
<CaretDownOutlined className={cx(styles.arrowIcon, filterList.some(item => item.key === FILTER_TYPE.soldSort) ? styles.active : '')} />
</div>
<div className={styles.tool_bar_filter_item} onClick={() => handleSort(FILTER_TYPE.creditSort)}>
<span>信用</span>
<i className={styles.icon}>
{
filterList.some(item => item.key === FILTER_TYPE.creditSort) ? <img src={arrowDownActiveIcon} /> : <img src={arrowDownIcon} />
}
</i>
<span className={cx(filterList.some(item => item.key === FILTER_TYPE.creditSort) ? styles.active : '')}>信用</span>
<CaretDownOutlined className={cx(styles.arrowIcon, filterList.some(item => item.key === FILTER_TYPE.creditSort) ? styles.active : '')} />
</div>
<div className={styles.tool_bar_filter_item} onClick={() => handleSort(FILTER_TYPE.priceSort)}>
<span>价格</span>
<span className={cx(filterList.some(item => item.key === FILTER_TYPE.priceSortLowToHigh || item.key === FILTER_TYPE.priceSortHighToLow) ? styles.active : '')}>价格</span>
<div className={styles.price_filter_box}>
<CaretUpOutlined className={cx(styles.icon, filterList.some(item => item.key === FILTER_TYPE.priceSortLowToHigh) ? styles.active : '')} />
<CaretDownOutlined className={cx(styles.icon, filterList.some(item => item.key === FILTER_TYPE.priceSortHighToLow) ? styles.active : '')} />
......@@ -344,11 +336,50 @@ const Commodity: React.FC<CommodityPropsType> = (props) => {
<label>{totalCount}</label>
<span>个商品</span>
</div>
<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 className={styles.showTypeBox}>
<AppstoreOutlined className={cx(styles.icon, showType === 1 ? styles.active : '')} onClick={() => setShowType(1)} />
</div>
<div className={styles.showTypeBox}>
<UnorderedListOutlined className={cx(styles.icon, showType === 2 ? styles.active : '')} onClick={() => setShowType(2)} />
</div>
<div className={styles.pageBox}>
<LeftOutlined
className={cx(styles.pageBoxIcon, current === 1 ? styles.disabled : '')}
onClick={() => {
if(current > 1) {
handlePageChange(current - 1)
}
}}
/>
<div className={styles.pageBox_main}>
<span>{current}</span>
<span>/</span>
<span>{Math.ceil(totalCount / pageSize) || 1}</span>
</div>
<RightOutlined
className={cx(styles.pageBoxIcon, current >= Math.ceil(totalCount / pageSize) ? styles.disabled : '')}
onClick={() => {
if(current < Math.ceil(totalCount / pageSize)) {
handlePageChange(current + 1)
}
}}
/>
</div>
</div>
</div>
<div className={styles.filter_bar}>
<div className={styles.filter_bar_list}>
{
filterList.map((item, index) => item.title && (
<div className={styles.filter_bar_list_item} key={`filter_bar_list_item_${index}`}>
<span className={styles.filter_bar_list_item_text}>{item.title}</span>
<div className={styles.filter_bar_close_box}>
<CloseOutlined className={styles.filter_bar_list_item_icon} onClick={() => handleDeleteFilterItem(item)} />
</div>
</div>
))
}
</div>
{
filterList.length > 0 && (
<div className={styles.filter_bar_left}>
......@@ -364,16 +395,6 @@ const Commodity: React.FC<CommodityPropsType> = (props) => {
</div>
)
}
<div className={styles.filter_bar_list}>
{
filterList.map((item, index) => item.title && (
<div className={styles.filter_bar_list_item} key={`filter_bar_list_item_${index}`}>
<span className={styles.filter_bar_list_item_text}>{item.title}</span>
<CloseOutlined className={styles.filter_bar_list_item_icon} onClick={() => handleDeleteFilterItem(item)} />
</div>
))
}
</div>
</div>
{
(commodityList.length === 0 || !commodityList) ? !loading && <SearchNoResult search="" /> : (
......
src/pages/lxMall/commodity/list.less
View file @ 82c84dfa
.commodity_list {
display: flex;
flex-wrap: wrap;
margin-top: 10px;
margin: 8px -10px 0 -10px;
&.column {
flex-direction: column;
margin-top: 20px;
margin: 8px 0 0 0;
}
&.row {
......@@ -19,19 +20,135 @@
&.column {
width: 100%;
padding: 0;
margin-bottom: 15px;
margin-bottom: 16px;
display: flex;
flex-direction: row;
.goods_img {
display: inline-block;
width: 120px;
height: 120px;
width: 88px;
height: 88px;
margin: 0;
}
.info_box {
display: inline-block;
margin-left: 20px;
display: flex;
margin-left: 16px;
vertical-align: top;
padding-top: 0;
padding: 0;
flex: 1;
.commodity_info {
color: #303133;
display: flex;
flex-direction: column;
width: 300px;
&_name {
a {
display: block;
color: #303133;
font-size: 14px;
font-weight: bold;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
word-wrap: break-word;
word-break: break-all;
}
}
&_slogan {
margin-top: 8px;
font-size: 12px;
color: #909399;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
word-wrap: break-word;
word-break: break-all;
}
&_sellingPoint {
margin-top: auto;
&_item {
border-radius: 2px;
display: inline-block;
height: 20px;
line-height: 20px;
background: rgba(214, 155, 93, 0.08);
color: #D69B5D;
font-size: 12px;
padding: 0 4px;
margin-right: 8px;
}
}
}
.shop_info {
width: 200px;
margin-left: 50px;
.company_info {
margin-top: 0;
height: auto;
}
.star {
font-size: 15px;
line-height: 15px;
margin-left: 4px;
color: #FCA110 !important;
:global {
.ant-rate-star {
&:not(:last-child) {
margin-right: 1px;
}
}
}
}
}
.price_info {
margin-left: 24px;
.price_info_wrap {
margin-bottom: 6px;
& > span {
font-size: 18px;
color: #D32F2F;
font-weight: bold;
}
.price_info_unit {
font-size: 12px;
color: #909399;
font-weight: normal;
margin-left: 4px;
}
}
}
.commodity_detail_btn {
margin-left: auto;
width: 96px;
height: 40px;
text-align: center;
line-height: 40px;
border: 1px solid #EEF0F3;
font-size: 14px;
color: #303133;
a {
display: block;
color: #303133;
}
&:hover {
opacity: .8;
cursor: pointer;
}
}
.info_box_content {
display: flex;
......@@ -96,12 +213,6 @@
border: 1px solid var(--mall_main_color);
}
&:hover {
.info_box .company_info {
display: block;
}
}
}
&.empty {
......@@ -110,6 +221,8 @@
a {
outline: none;
display: flex;
flex-direction: column;
}
.info_box {
......@@ -117,21 +230,22 @@
padding: 15px 10px 0 10px;
.company_info {
position: absolute;
display: none;
top: 0;
left: 0;
width: 100%;
padding: 0 10px;
display: flex;
height: 100%;
margin-top: 8px;
background-color: #ffffff;
.credit_icon {
width: 16px;
height: 16px;
margin-right: 4px;
}
}
}
.goods_img {
width: 220px;
height: 220px;
width: 216px;
height: 216px;
overflow: hidden;
margin: 0 auto;
......@@ -142,17 +256,27 @@
}
}
.shop_name {
font-size: 12px;
color: #909399;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
word-wrap: break-word;
word-break: break-all;
}
.goods_name {
margin-top: 10px;
font-size: 12px;
color: #303133;
text-align: left;
margin-top: 12px;
white-space: nowrap;
// display: -webkit-box;
// -webkit-box-orient: vertical;
// -webkit-line-clamp: 2;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
// -webkit-box-orient: vertical;
word-wrap: break-word;
word-break: break-all;
......@@ -165,14 +289,15 @@
}
.credit {
color: #909399;
font-size: 14px;
margin-top: 15px;
line-height: 20px;
color: #303133;
font-size: 12px;
margin-top: 8px;
display: flex;
align-items: center;
&_icon {
width: 20px;
height: 20px;
width: 16px;
height: 16px;
margin-right: 5px;
}
}
......
src/pages/lxMall/commodity/list.tsx
View file @ 82c84dfa
import React from 'react'
import cx from 'classnames'
import { Skeleton } from 'antd'
import { Skeleton, Rate } from 'antd'
import { LAYOUT_TYPE } from '@/constants'
import { PostSearchShopEnterpriseGetCommodityListResponseDetail } from '@/services/SearchApi'
import { priceFormat, numFormat } from '@/utils/numberFomat'
import shopDefaultIcon from '@/assets/icons/shop_default_icon.png'
import creditIcon from '@/assets/imgs/credit_icon.png'
import { GlobalConfig } from '@/global/config'
import styles from './list.less'
......@@ -75,13 +76,10 @@ const CommodityList: React.FC<CommodityListPropsType> = (props) => {
renderPrice(item)
}
<div className={styles.goods_name}>{item.name}</div>
<div className={styles.count}>已售: {numFormat(item.sold) || 0} {item.unitName}</div>
<div className={styles.count}>成交{numFormat(item.sold) || 0}{item.unitName}</div>
<div className={styles.company_info}>
<div className={styles.goods_name}>{item.memberName}</div>
<div className={styles.credit}>
<img className={styles.credit_icon} src={creditIcon} />
<span>{item.creditScore || 0}</span>
</div>
<img className={styles.credit_icon} src={shopDefaultIcon} />
<div className={styles.shop_name}>{item.memberName}</div>
</div>
</div>
</a>
......@@ -97,44 +95,92 @@ const CommodityList: React.FC<CommodityListPropsType> = (props) => {
{
commodityList.map((item, index) => (
<div key={`commodity_list_item_column_${index}`} className={cx(styles.commodity_list_item, styles.column)}>
<a href={getCommodityDetailLink(item)} target="_blank" rel="noreferrer">
<div className={styles.goods_img}>
{
item.mainPic ? <img src={item.mainPic} /> : <Skeleton.Image style={{ width: 120, height: 120 }} />
}
</div>
<div className={styles.info_box}>
<div className={styles.info_box_content}>
<div className={styles.name}>{item.name}</div>
<div className={styles.price}>
{
item.priceType === 1 ? (
<>
<span>￥</span>{priceFormat(item.min)}
</>
) : (
<div className={styles.inquiry_price}>
<label>在线询价</label>
</div>
)
}
</div>
<div className={styles.count}>已售: {numFormat(item.sold) || 0} {item.unitName}</div>
<div className={styles.goods_img}>
{
item.mainPic ? <img src={item.mainPic} /> : <Skeleton.Image style={{ width: 120, height: 120 }} />
}
</div>
<div className={styles.info_box}>
<div className={styles.commodity_info}>
<div className={styles.commodity_info_name}>
<a href={getCommodityDetailLink(item)} target="_blank" rel="noreferrer">
{item.name}
</a>
</div>
<ul className={styles.tags_list}>
<div className={styles.commodity_info_slogan}>{item.slogan}</div>
<div className={styles.commodity_info_sellingPoint}>
{
item.sellingPoint && item.sellingPoint.map((pointItem, pointIndex) => (
<li className={styles.tags_list_item} key={`tags_list_item_${pointIndex}`}>{pointItem}</li>
item.sellingPoint && item.sellingPoint.map((sellItem) => (
<div className={styles.commodity_info_sellingPoint_item} key={sellItem}>{sellItem}</div>
))
}
</ul>
</div>
</div>
<div className={styles.shop_info}>
<div className={styles.company_info}>
<img className={styles.credit_icon} src={shopDefaultIcon} />
<div className={styles.shop_name}>{item.memberName}</div>
</div>
{/* <Rate className={styles.star} count={5} disabled defaultValue={5} /> */}
<div className={styles.credit}>
<img className={styles.credit_icon} src={creditIcon} />
<span>{item.creditScore || 0}</span>
</div>
<div className={styles.shopname}>{item.memberName}</div>
</div>
</a>
<div className={styles.price_info}>
{
item.priceType === 1 ? (
<>
<div className={styles.price_info_wrap}>
<span>￥</span>
<span>{priceFormat(item.min)}</span>
<span className={styles.price_info_unit}>/{item.unitName}</span>
</div>
<div className={styles.count}>已成交{numFormat(item.sold) || 0}</div>
</>
) : (
<div className={styles.inquiry_price}>
<label>在线询价</label>
</div>
)
}
</div>
<div className={styles.commodity_detail_btn}>
<a href={getCommodityDetailLink(item)} target="_blank" rel="noreferrer">
查看详情
</a>
</div>
{/* <div className={styles.info_box_content}>
<div className={styles.name}>{item.name}</div>
<div className={styles.price}>
{
item.priceType === 1 ? (
<>
<span>￥</span>{priceFormat(item.min)}
</>
) : (
<div className={styles.inquiry_price}>
<label>在线询价</label>
</div>
)
}
</div>
<div className={styles.count}>已售: {numFormat(item.sold) || 0} {item.unitName}</div>
</div>
<ul className={styles.tags_list}>
{
item.sellingPoint && item.sellingPoint.map((pointItem, pointIndex) => (
<li className={styles.tags_list_item} key={`tags_list_item_${pointIndex}`}>{pointItem}</li>
))
}
</ul>
<div className={styles.credit}>
<img className={styles.credit_icon} src={creditIcon} />
<span>{item.creditScore || 0}</span>
</div>
<div className={styles.shopname}>{item.memberName}</div> */}
</div>
</div>
))
......
src/pages/lxMall/commodity/search.tsx
View file @ 82c84dfa
import React, { useState, useEffect } from 'react'
import { CaretUpOutlined, CaretDownOutlined, UnorderedListOutlined, AppstoreOutlined, CloseOutlined } from '@ant-design/icons'
import { CaretUpOutlined, CaretDownOutlined, UnorderedListOutlined, AppstoreOutlined, CloseOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons'
import Filter from '../components/Filter'
import { FILTER_TYPE } from '@/constants'
import cx from 'classnames'
......@@ -14,8 +14,6 @@ import { PublicApi } from '@/services/api'
import { LAYOUT_TYPE } from '@/constants'
import { useLocalStore, observer } from 'mobx-react'
import { PostSearchShopEnterpriseGetCommodityListResponseDetail } from '@/services/SearchApi'
import arrowDownIcon from '@/assets/imgs/arrow_down.png'
import arrowDownActiveIcon from '@/assets/imgs/arrow_down_active.png'
import { GlobalConfig } from '@/global/config'
import styles from './index.less'
......@@ -253,26 +251,18 @@ const CommoditySearch: React.FC<CommodityPropsType> = (props) => {
<div className={styles.commodity_container}>
<Filter filterConfig={filterConfig} {...props} />
<div className={styles.commodity_main}>
<div className={styles.tool_bar}>
<div className={styles.tool_bar}>
<div className={styles.tool_bar_left}>
<div className={styles.tool_bar_filter_item} onClick={() => handleSort(FILTER_TYPE.soldSort)}>
<span>销量</span>
<i className={styles.icon}>
{
filterList.some(item => item.key === FILTER_TYPE.soldSort) ? <img src={arrowDownActiveIcon} /> : <img src={arrowDownIcon} />
}
</i>
<span className={cx(filterList.some(item => item.key === FILTER_TYPE.soldSort) ? styles.active : '')}>销量</span>
<CaretDownOutlined className={cx(styles.arrowIcon, filterList.some(item => item.key === FILTER_TYPE.soldSort) ? styles.active : '')} />
</div>
<div className={styles.tool_bar_filter_item} onClick={() => handleSort(FILTER_TYPE.creditSort)}>
<span>信用</span>
<i className={styles.icon}>
{
filterList.some(item => item.key === FILTER_TYPE.creditSort) ? <img src={arrowDownActiveIcon} /> : <img src={arrowDownIcon} />
}
</i>
<span className={cx(filterList.some(item => item.key === FILTER_TYPE.creditSort) ? styles.active : '')}>信用</span>
<CaretDownOutlined className={cx(styles.arrowIcon, filterList.some(item => item.key === FILTER_TYPE.creditSort) ? styles.active : '')} />
</div>
<div className={styles.tool_bar_filter_item} onClick={() => handleSort(FILTER_TYPE.priceSort)}>
<span>价格</span>
<span className={cx(filterList.some(item => item.key === FILTER_TYPE.priceSortLowToHigh || item.key === FILTER_TYPE.priceSortHighToLow) ? styles.active : '')}>价格</span>
<div className={styles.price_filter_box}>
<CaretUpOutlined className={cx(styles.icon, filterList.some(item => item.key === FILTER_TYPE.priceSortLowToHigh) ? styles.active : '')} />
<CaretDownOutlined className={cx(styles.icon, filterList.some(item => item.key === FILTER_TYPE.priceSortHighToLow) ? styles.active : '')} />
......@@ -285,8 +275,35 @@ const CommoditySearch: React.FC<CommodityPropsType> = (props) => {
<label>{totalCount}</label>
<span>个商品</span>
</div>
<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 className={styles.showTypeBox}>
<AppstoreOutlined className={cx(styles.icon, showType === 1 ? styles.active : '')} onClick={() => setShowType(1)} />
</div>
<div className={styles.showTypeBox}>
<UnorderedListOutlined className={cx(styles.icon, showType === 2 ? styles.active : '')} onClick={() => setShowType(2)} />
</div>
<div className={styles.pageBox}>
<LeftOutlined
className={cx(styles.pageBoxIcon, current === 1 ? styles.disabled : '')}
onClick={() => {
if(current > 1) {
handlePageChange(current - 1)
}
}}
/>
<div className={styles.pageBox_main}>
<span>{current}</span>
<span>/</span>
<span>{Math.ceil(totalCount / pageSize) || 1}</span>
</div>
<RightOutlined
className={cx(styles.pageBoxIcon, current >= Math.ceil(totalCount / pageSize) ? styles.disabled : '')}
onClick={() => {
if(current < Math.ceil(totalCount / pageSize)) {
handlePageChange(current + 1)
}
}}
/>
</div>
</div>
</div>
<div className={styles.filter_bar}>
......@@ -298,7 +315,9 @@ const CommoditySearch: React.FC<CommodityPropsType> = (props) => {
search && (
<div className={styles.filter_bar_list_item}>
<span className={styles.filter_bar_list_item_text}>{search}</span>
<CloseOutlined className={styles.filter_bar_list_item_icon} onClick={() => handleClearSearch()} />
<div className={styles.filter_bar_close_box}>
<CloseOutlined className={styles.filter_bar_list_item_icon} onClick={() => handleClearSearch()} />
</div>
</div>
)
}
......@@ -306,7 +325,9 @@ const CommoditySearch: React.FC<CommodityPropsType> = (props) => {
filterList.map(item => item.title && (
<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)} />
<div className={styles.filter_bar_close_box}>
<CloseOutlined className={styles.filter_bar_list_item_icon} onClick={() => handleDeleteFilterItem(item)} />
</div>
</div>
))
}
......
src/pages/lxMall/components/Filter/index.less
View file @ 82c84dfa
.filter {
width: 240px;
margin-right: 20px;
margin-right: 24px;
.filter_box {
......@@ -38,4 +38,4 @@
}
}
\ No newline at end of file
}
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