Skip to content

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

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

parent ebb9a85f
Show whitespace changes
Inline Side-by-side
Showing with 375 additions and 187 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,6 +157,7 @@
margin-top: 60px;
text-align: right;
:global {
.ant-pagination-item {
&:hover,
......@@ -171,10 +174,17 @@
background-color: var(--mall_main_color);
border-color: var(--mall_main_color);
&:hover {
&>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
import React, { useState } from 'react'
import React, { useState, useEffect } from 'react'
import { QuestionCircleOutlined } from '@ant-design/icons'
import { Tooltip } from 'antd'
import cx from 'classnames'
......@@ -11,23 +11,27 @@ import Interested from './components/Interested'
import ShopInfo from './components/ShopInfo'
import ProductDescription from './components/ProductDescription'
import InputNumber from '@/components/InputNumber'
import { PublicApi } from '@/services/api'
import { GetSearchCommodityShopGetCommodityDetailResponse } from '@/services'
import jinhuodanIcon from '@/assets/imgs/jinhuodan.png'
import './index.less'
import styles from './index.less'
const CommodityDetail = (props) => {
// type : prompt:现货商品；inquiry：询价商品；integral：积分商品
const { query: { id, type = "prompt" } } = props.location
const [addSuccessVisible, setAddSuccessVisible] = useState<boolean>(false)
const COMMODITY_TYPE = {
prompt: 'prompt',
inquiry: 'inquiry',
integral: 'integral'
}
const [buyCount, setBuyCount] = useState<number>(1)
enum COMMODITY_TYPE {
/**
* 现货商品
*/
prompt = 1,
/**
*询价商品
*/
inquiry = 2,
/**
* 积分商品
*/
integral = 3
}
const colorList = [
const colorList = [
{
name: '红色',
url: "https://woodmartcdn-cec2.kxcdn.com/wp-content/uploads/2016/09/product-furniture-1.jpg"
......@@ -40,9 +44,9 @@ const CommodityDetail = (props) => {
name: '白色',
url: "https://woodmartcdn-cec2.kxcdn.com/wp-content/uploads/2016/09/product-furniture-1-3.jpg"
},
]
]
const typeList = [
const typeList = [
{
id: 1,
name: 'XL'
......@@ -55,79 +59,176 @@ const CommodityDetail = (props) => {
id: 3,
name: 'XXXL'
}
]
]
const CommodityDetail = (props) => {
const { query: { id } } = props.location
const [addSuccessVisible, setAddSuccessVisible] = useState<boolean>(false)
const [commodityDetail, setCommodityDetail] = useState<GetSearchCommodityShopGetCommodityDetailResponse>()
const [buyCount, setBuyCount] = useState<number>(1)
useEffect(() => {
fetchDetail()
}, [])
const fetchDetail = () => {
PublicApi.getSearchCommodityShopGetCommodityDetail({ commodityId: id }).then(res => {
if (res.code === 1000) {
setCommodityDetail(res.data)
initAttributeAndValueList(res.data.unitPriceAndPicList)
}
})
}
const renderBtn = () => {
switch (type) {
case 'prompt':
switch (commodityDetail?.priceType) {
case COMMODITY_TYPE.prompt:
return (
<>
<div className="product_info_btn_item buy" onClick={() => history.push('/order')}>立即订购</div>
<div className="product_info_btn_item add" onClick={() => setAddSuccessVisible(true)} ><img className="btn_icon" src={jinhuodanIcon} />加入进货单</div>
<div className={cx(styles.product_info_btn_item, styles.buy)} onClick={() => history.push('/order')}>立即订购</div>
<div className={cx(styles.product_info_btn_item, styles.add)} onClick={() => setAddSuccessVisible(true)} >
<img className={styles.btn_icon} src={jinhuodanIcon} />
<span>加入进货单</span>
</div>
</>
)
case 'inquiry':
return <div className="product_info_btn_item buy">立即询价</div>
case 'integral':
return <div className="product_info_btn_item buy">立即兑换</div>
case COMMODITY_TYPE.inquiry:
return <div className={cx(styles.product_info_btn_item, styles.buy)}>立即询价</div>
case COMMODITY_TYPE.integral:
return <div className={cx(styles.product_info_btn_item, styles.buy)}>立即兑换</div>
}
}
const renderAttribute = () => {
}
const initAttributeAndValueList = (unitPriceAndPicList: any) => {
for (let item of unitPriceAndPicList) {
for (let attrListItem of item.attributeAndValueList) {
let temp: any = {}
temp.attrName = attrListItem.customerAttribute.name
temp.attrValue = attrListItem.customerAttributeValue.value
}
}
}
let attributeList = [
{
name: '颜色',
id: 51,
attributeList: [
{
id: 52,
name: '白色'
},
{
id: 53,
name: '黑色'
}
]
},
{
name: '尺寸',
id: 50,
attributeList: [
{
id: 50,
name: 'XL'
},
{
id: 51,
name: 'XXL'
}
]
}
]
return (
<div className="commodity_detail">
<div className="commodity_detail_container">
<div className="commodity_detail_info">
<div className={styles.commodity_detail}>
<div className={styles.commodity_detail_container}>
<div className={styles.commodity_detail_info}>
<Exhibition />
<div className="product_info_container">
<div className="product_info">
<div className="product_info_name">0.8-1.0mm黑色手折纹胎水牛皮</div>
<div className="product_info_tags">
<div className="product_info_tags_item">黄牛头皮层自然摔纹</div>
<div className="product_info_tags_item">硬度适中偏软</div>
<div className="product_info_tags_item">手感舒适</div>
<div className={styles.product_info_container}>
<div className={styles.product_info}>
<div className={styles.product_info_name}>{commodityDetail?.name}</div>
<div className={styles.product_info_tags}>
{
commodityDetail?.sellingPoint.map((item, index) => (
<div className={styles.product_info_tags_item} key={`product_info_tags_item_${index}`}>{item}</div>
))
}
</div>
{
type === COMMODITY_TYPE.prompt && (
<div className="prompt_goods_price">
<div className="prompt_goods_price_item">
<div className="label price">价格(CNY)</div>
<div className="label mprice">会员价格(CNY)</div>
<div className="label count">数量(平方英尺)</div>
</div>
<div className="prompt_goods_price_list">
<div className="prompt_goods_price_list_item active">
<div className="price">20.00</div>
<div className="member_price">19.00</div>
<div className="count">1-20</div>
</div>
<div className="prompt_goods_price_list_item">
<div className="price">19.00</div>
<div className="member_price">19.00</div>
<div className="count">21-49</div>
</div>
<div className="prompt_goods_price_list_item">
<div className="price">18.00</div>
<div className="member_price">19.00</div>
<div className="count">50-99</div>
</div>
<div className="prompt_goods_price_list_item">
<div className="price">15.00</div>
<div className="member_price">19.00</div>
<div className="count">≥100</div>
commodityDetail?.priceType === COMMODITY_TYPE.prompt && (
<div className={styles.prompt_goods_price}>
<div className={styles.prompt_goods_price_item}>
<div className={cx(styles.label, styles.price)}>价格(CNY)</div>
<div className={cx(styles.label, styles.mprice)}>会员价格(CNY)</div>
<div className={cx(styles.label, styles.count)}>数量(平方英尺)</div>
</div>
<div className={styles.prompt_goods_price_list}>
<div className={cx(styles.prompt_goods_price_list_item, styles.active)}>
<div className={styles.price}>20.00</div>
<div className={styles.member_price}>19.00</div>
<div className={styles.count}>1-20</div>
</div>
<div className={styles.prompt_goods_price_list_item}>
<div className={styles.price}>19.00</div>
<div className={styles.member_price}>19.00</div>
<div className={styles.count}>21-49</div>
</div>
<div className={styles.prompt_goods_price_list_item}>
<div className={styles.price}>18.00</div>
<div className={styles.member_price}>19.00</div>
<div className={styles.count}>50-99</div>
</div>
<div className={styles.prompt_goods_price_list_item}>
<div className={styles.price}>15.00</div>
<div className={styles.member_price}>19.00</div>
<div className={styles.count}>≥100</div>
</div>
</div>
</div>
)
}
<div className="product_info_line">
<div className="product_info_line_label">颜色</div>
<div className="product_info_line_brief">
<div className="product_info_line_list">
{
commodityDetail?.commodityAttributeList.map(item => (
<div className={styles.product_info_line} key={`product_info_line_${item.id}`}>
<div className={styles.product_info_line_label}>{item.customerAttribute.name}</div>
<div className={styles.product_info_line_brief}>
<div className={styles.product_info_line_list}>
{
item.customerAttributeValueList.map((item, index) => (
<div key={`product_info_line_list_item_${item.id}`} className={styles.product_info_line_list_item}>
{/* <div className={styles.imgbox}>
<img src={item.url} />
</div> */}
<span className={styles.attrName}>{item.value}</span>
</div>
))
}
</div>
</div>
</div>
))
}
{/* <div className={styles.product_info_line}>
<div className={styles.product_info_line_label}>颜色</div>
<div className={styles.product_info_line_brief}>
<div className={styles.product_info_line_list}>
{
colorList.map((item, index) => (
<div key={`product_info_line_list_item_${index}`} className="product_info_line_list_item">
<div className="imgbox">
<div key={`product_info_line_list_item_${index}`} className={styles.product_info_line_list_item}>
<div className={styles.imgbox}>
<img src={item.url} />
</div>
<span>{item.name}</span>
......@@ -138,13 +239,13 @@ const CommodityDetail = (props) => {
</div>
</div>
</div>
<div className="product_info_line">
<div className="product_info_line_label">尺码</div>
<div className="product_info_line_brief">
<div className="product_info_line_list">
<div className={styles.product_info_line}>
<div className={styles.product_info_line_label}>尺码</div>
<div className={styles.product_info_line_brief}>
<div className={styles.product_info_line_list}>
{
typeList.map((item, index) => (
<div key={`product_info_line_list_item_type_${index}`} className={cx("product_info_line_list_item center", index === 0 ? 'active' : '')}>
<div key={`product_info_line_list_item_type_${index}`} className={cx(styles.product_info_line_list_item, styles.center, index === 0 ? styles.active : '')}>
<span>{item.name}</span>
</div>
))
......@@ -152,80 +253,78 @@ const CommodityDetail = (props) => {
</div>
</div>
</div>
</div> */}
{
type === COMMODITY_TYPE.integral && (
<div className="product_info_line">
<div className="product_info_line_label">所需积分</div>
<div className="product_info_line_brief">
<span className="text">20000分</span>
commodityDetail?.priceType === COMMODITY_TYPE.integral && (
<div className={styles.product_info_line}>
<div className={styles.product_info_line_label}>所需积分</div>
<div className={styles.product_info_line_brief}>
<span className={styles.text}>20000分</span>
<Tooltip placement="top" title="可使用平台通用积分或商户积分进行兑换">
<QuestionCircleOutlined />
</Tooltip>
</div>
</div>
)
}
{
type === COMMODITY_TYPE.inquiry ? (
<div className="product_info_line">
<div className="product_info_line_label">库存数量</div>
<div className="product_info_line_brief">
<span className="text">20,000平方英尺</span>
commodityDetail?.priceType === COMMODITY_TYPE.inquiry ? (
<div className={styles.product_info_line}>
<div className={styles.product_info_line_label}>库存数量</div>
<div className={styles.product_info_line_brief}>
<span className={styles.text}>20,000平方英尺</span>
</div>
</div>
) : (
<div className="product_info_line">
<div className="product_info_line_label">{type === COMMODITY_TYPE.prompt ? '购买数量' : '兑换数量'}</div>
<div className="product_info_line_brief row">
<div className={styles.product_info_line}>
<div className={styles.product_info_line_label}>{commodityDetail?.priceType === COMMODITY_TYPE.prompt ? '购买数量' : '兑换数量'}</div>
<div className={cx(styles.product_info_line_brief, styles.row)}>
<InputNumber value={buyCount} onChange={(value) => setBuyCount(value)} />
<span className="text mar_left_10">平方英尺</span>
<span className="text mar_left_10">(库存20,000平方英尺)</span>
<span className={cx(styles.text, styles.mar_left_10)}>平方英尺</span>
<span className={cx(styles.text, styles.mar_left_10)}>(库存20,000平方英尺)</span>
</div>
</div>
)
}
{
type === 'prompt' && (
<div className="product_info_price">
<div className="product_info_price_text">3<span>平方英尺</span></div>
<div className="product_info_price_split"></div>
<div className="product_info_price_text">69.70<span>元</span></div>
commodityDetail?.priceType === COMMODITY_TYPE.prompt && (
<div className={styles.product_info_price}>
<div className={styles.product_info_price_text}>3<span>平方英尺</span></div>
<div className={styles.product_info_price_split}></div>
<div className={styles.product_info_price_text}>69.70<span>元</span></div>
</div>
)
}
<div className="product_info_btn_group">
<div className={styles.product_info_btn_group}>
{
renderBtn()
}
</div>
<div className="product_info_line">
<div className="product_info_line_label">支付方式</div>
<div className="product_info_line_brief">
<span className="text">线上支付</span>
<span className="text">线下支付</span>
<span className="text">授信支付</span>
<span className="text">货到付款</span>
<div className={styles.product_info_line}>
<div className={styles.product_info_line_label}>支付方式</div>
<div className={styles.product_info_line_brief}>
<span className={styles.text}>线上支付</span>
<span className={styles.text}>线下支付</span>
<span className={styles.text}>授信支付</span>
<span className={styles.text}>货到付款</span>
</div>
</div>
<div className="product_info_line mar_top_10">
<div className="product_info_line_label">配送方式</div>
<div className="product_info_line_brief">
<span className="text">物流</span>
<div className={cx(styles.product_info_line, styles.mar_top_10)}>
<div className={styles.product_info_line_label}>配送方式</div>
<div className={styles.product_info_line_brief}>
<span className={styles.text}>物流</span>
</div>
</div>
</div>
</div>
<BrowseRecords />
</div>
<div className="commodity_detail_body">
<div className="commodity_detail_body_left">
<div className={styles.commodity_detail_body}>
<div className={styles.commodity_detail_body_left}>
<ShopInfo />
<Interested />
</div>
<div className="commodity_detail_body_right">
<div className={styles.commodity_detail_body_right}>
<ProductDescription />
</div>
</div>
......@@ -235,20 +334,20 @@ const CommodityDetail = (props) => {
visible={addSuccessVisible}
onCancel={() => setAddSuccessVisible(false)}
>
<div className="add_success">
<div className="add_success_info">
<div className="add_success_info_title">
<i className="add_success_info_icon"></i>
<div className={styles.add_success}>
<div className={styles.add_success_info}>
<div className={styles.add_success_info_title}>
<i className={styles.add_success_info_icon}></i>
<span>货品已添加到进货单！</span>
</div>
<div className="add_success_info_text">
<div className={styles.add_success_info_text}>
<span>当前进货单共</span>
<b>3</b>
<span>种商品</span>
</div>
</div>
<div className="add_success_btn primary">去结算</div>
<div className="add_success_btn">继续购物</div>
<div className={cx(styles.add_success_btn, styles.primary)}>去结算</div>
<div className={styles.add_success_btn}>继续购物</div>
</div>
<InterestedCommodity />
</DialogModal>
......
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