Skip to content

J
jinfa-platform
Commit 288f5871 authored by GuanHua's avatar GuanHua
Browse files
Options

fix: 收藏管理页面修改

parents 5eb8d5da 5b42d131
Show whitespace changes
Inline Side-by-side
Showing with 239 additions and 143 deletions
src/components/ShopCredit/index.less 0 → 100644
View file @ 288f5871
.shopCredit {
position: relative;
display: inherit;
.shopCreditIcon {
position: absolute;
bottom: 0;
left: 0;
width: 18px;
height: 16px;
}
.pointWrap {
background-color: #FFE6C8;
border-radius: 1px;
height: 16px;
line-height: 16px;
font-size: 12px;
color: #773100;
padding-right: 4px;
padding-left: 12px;
margin-left: 9px;
}
}
.yearbox {
height: 16px;
display: flex;
align-items: center;
border-radius: 1px;
border: 1px solid #6A8DDA;
padding: 0 4px;
font-size: 12px;
color: #6A8DDA;
}
src/components/ShopCredit/index.tsx 0 → 100644
View file @ 288f5871
import React from 'react'
import creditIcon from './credit.png'
import styles from './index.less'
interface ShopCreditType {
creditPoint: number,
}
const ShopCredit: React.FC<ShopCreditType> = (props) => {
const { creditPoint } = props
return (
<div className={styles.shopCredit}>
<img className={styles.shopCreditIcon} src={creditIcon} />
<div className={styles.pointWrap}>
<span>{creditPoint}</span>
</div>
</div>
)
}
export default ShopCredit
src/components/ShopCredit/year.tsx 0 → 100644
View file @ 288f5871
import React from 'react'
import styles from './index.less'
interface YearBoxProps {
year: number;
style?: React.CSSProperties
}
const YearBox: React.FC<YearBoxProps> = (props) => {
const { year, style } = props
return (
<div className={styles.yearbox} style={style ? style : {} }>
<span>入驻{year}年</span>
</div>
)
}
export default YearBox
src/components/StarRate/index.less 0 → 100644
View file @ 288f5871
.star_rate {
background-color: #F4F5F7;
border-radius: 8px;
height: 16px;
display: flex;
width: 89px;
line-height: 16px;
align-items: center;
justify-content: center;
.star_rate_value {
color: #303133;
font-size: 12px;
line-height: 12px;
}
.star {
font-size: 12px;
line-height: 12px;
margin-left: 4px;
color: #FCA110 !important;
:global {
.ant-rate-star {
&:not(:last-child) {
margin-right: 1px;
}
}
}
}
}
src/components/StarRate/index.tsx 0 → 100644
View file @ 288f5871
import React from 'react'
import { Rate } from 'antd'
import styles from './index.less'
interface StarRatePropsType {
value: number,
showValue?: boolean
}
const StarRate: React.FC<StarRatePropsType> = (props) => {
const { value, showValue } = props
return (
<label className={styles.star_rate}>
{
showValue && <span className={styles.star_rate_value}>{value}</span>
}
<Rate className={styles.star} count={5} disabled defaultValue={value} />
</label>
)
}
StarRate.defaultProps = {
showValue: true
}
export default StarRate
src/constants/index.ts
View file @ 288f5871
......@@ -61,6 +61,7 @@ export const LOGISTICS_CENTER_URL = `${REQUEST_HEADER}logistics.${TOP_DOMAIN}`
*/
export const MANUFACTURE_CENTER_URL = `${REQUEST_HEADER}manufacture.${TOP_DOMAIN}`
export const MALL_TYPE = {
1: '企业商城',
2: '积分商城',
......
src/pages/systemSetting/collection/commodity.tsx
View file @ 288f5871
......@@ -2,13 +2,14 @@ import React, { useEffect, useState } from 'react'
import cx from 'classnames'
import { Button, message, Modal } from 'antd'
import { StarFilled } from '@ant-design/icons'
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import credit_icon from '@/assets/imgs/credit_icon.png'
import styles from './index.less'
import ShopCredit from '@/components/ShopCredit'
import { PublicApi } from '@/services/api'
import { numFormat } from '@/utils/numberFomat'
import moment from 'moment'
import { COMMODITY_TYPE, CHANNEL_CENTER_URL, ICHANNEL_CENTER_URL, ENTERPRISE_CENTER_URL } from '@/constants'
import { GlobalConfig } from '@/global/config'
import { COMMODITY_TYPE, CHANNEL_CENTER_URL, ENTERPRISE_CENTER_URL } from '@/constants'
import styles from './index.less'
const Commodity: React.FC = () => {
const [list, setList] = useState([])
......@@ -41,7 +42,7 @@ const Commodity: React.FC = () => {
// })
}
const getShopCommodityCollectList = (): Promise<any[]> => {
const getShopCommodityCollectList = (): Promise<any> => {
return new Promise((resolve) => {
PublicApi.getSearchShopCommodityCollectGetCommodityCollectList().then((res) => {
if (res.code === 1000) {
......@@ -55,10 +56,11 @@ const Commodity: React.FC = () => {
})
}
const getChannelCommodityCollectList = (): Promise<any[]> => {
const getChannelCommodityCollectList = (): Promise<any> => {
return new Promise((resolve) => {
PublicApi.getSearchShopCommodityCollectChannelGetCommodityCollectList().then((res) => {
PublicApi.getSearchShopCommodityCollectChannelGetCommodityCollectList().then((res: any) => {
if (res.code === 1000) {
if (!res.data) return
const result = res.data.map((item) => {
return {
...item,
......@@ -110,50 +112,16 @@ const Commodity: React.FC = () => {
message.destroy()
message.info("该商品已下架")
}
// setBuyLoading(true)
// PublicApi.getSearchShopCommonGetCommodityIsPublish(param).then(res => {
// setBuyLoading(false)
// if(res.code === 1000) {
// if(res.data) {
// const el = document.createElement('a')
// switch (detail.type) {
// case 1:
// case 2:
// el.href = `${ENTERPRISE_CENTER_URL}/shop/commodity/detail/${detail.commodity.id}`;
// break
// case 3:
// el.href = `${CHANNEL_CENTER_URL}/m${detail.channelMemberId}/commodity/detail/${detail.commodity.id}`;
// break
// case 4:
// el.href = `${ICHANNEL_CENTER_URL}/m${detail.channelMemberId}/commodity/detail/${detail.commodity.id}&type=${detail.commodity.priceType}`;
// break
// case 5:
// el.href = `${CHANNEL_CENTER_URL}/m${detail.channelMemberId}/integral/detail/${detail.commodity.id}`;
// break
// }
// el.target = '_blank';
// el.id = detail.commodity.id
// // 防止反复添加
// if(!document.getElementById(detail.commodity.id)) {
// document.body.appendChild(el);
// }
// el.click()
// } else {
// message.destroy()
// message.info("该商品已下架")
// }
// }
// })
}
const renderBtn = (priceType, commodity) => {
switch (priceType) {
case COMMODITY_TYPE.prompt:
return <Button loading={buyLoading} className={styles.collection_state_wrap_btn} type="primary" onClick={() => linkToDetail(commodity)}>再次购买</Button>
return <Button loading={buyLoading} className={styles.collection_state_wrap_btn} type='link' onClick={() => linkToDetail(commodity)}>再次购买</Button>
case COMMODITY_TYPE.integral:
return <Button loading={buyLoading} className={styles.collection_state_wrap_btn} type="primary" onClick={() => linkToDetail(commodity)}>立即兑换</Button>
return <Button loading={buyLoading} className={styles.collection_state_wrap_btn} type='link' onClick={() => linkToDetail(commodity)}>立即兑换</Button>
case COMMODITY_TYPE.inquiry:
return <Button loading={buyLoading} className={styles.collection_state_wrap_btn} type="primary" onClick={() => linkToDetail(commodity)}>立即询价</Button>
return <Button loading={buyLoading} className={styles.collection_state_wrap_btn} type='link' onClick={() => linkToDetail(commodity)}>立即询价</Button>
}
}
......@@ -212,7 +180,7 @@ const Commodity: React.FC = () => {
}
return (
<>
<PageHeaderWrapper>
<div className={styles.commodity_list}>
{
list && list.map((item, index) => (
......@@ -235,10 +203,7 @@ const Commodity: React.FC = () => {
</div>
</div>
<div className={cx(styles.commodity_list_item_item)}>
<div className={styles.shop_header_info_content_about_item}>
<i className={styles.icon}><img src={credit_icon} /></i>
<span>{item.commodity.creditScore || 0}</span>
</div>
<ShopCredit creditPoint={item.commodity.creditScore || 0} />
<div className={styles.commodity_shopname}>{item.commodity.memberName}</div>
</div>
<div className={cx(styles.commodity_list_item_item)}>
......@@ -247,13 +212,13 @@ const Commodity: React.FC = () => {
<div className={cx(styles.commodity_list_item_item)}>
<span className={styles.date}>{moment(item.createTime).format("YYYY-MM-DD HH:mm")}</span>
</div>
<div className={cx(styles.commodity_list_item_item)}>
<div className={cx(styles.commodity_list_item_item, styles.float_right)}>
<div className={styles.collection_state_wrap}>
{renderBtn(item.commodity.priceType, item)}
<div className={cx(styles.collection_state)} onClick={() => handleCancelCollect(item)}>
<StarFilled />
<label>收藏</label>
</div>
{renderBtn(item.commodity.priceType, item)}
</div>
</div>
</div>
......@@ -261,13 +226,13 @@ const Commodity: React.FC = () => {
}
</div>
{/* {
totalCount > 0 && (
totalCount > pageSize && (
<div className={styles.pagination_wrap}>
<Pagination showSizeChanger={false} current={current} total={totalCount} pageSize={pageSize} onChange={handleChange} />
</div>
)
} */}
</>
</PageHeaderWrapper>
)
}
......
src/pages/systemSetting/collection/index.less
View file @ 288f5871
......@@ -26,7 +26,10 @@
&_item {
position: relative;
display: flex;
margin-bottom: 16px;
margin-bottom: 8px;
border-radius: 8px;
background-color: #ffffff;
padding: 16px;
&_item {
flex: 1;
......@@ -34,6 +37,10 @@
justify-content: center;
flex-direction: column;
&.float_right {
align-items: flex-end;
}
&.morehalf {
flex: 1.5;
}
......@@ -45,13 +52,13 @@
&_logo {
border-radius: 4px;
overflow: hidden;
width: 72px;
height: 72px;
margin-right: 16px;
width: 40px;
height: 40px;
margin-right: 12px;
&>img {
width: 72px;
height: 72px;
width: 40px;
height: 40px;
}
}
......@@ -68,7 +75,7 @@
&_about {
display: flex;
margin-top: 10px;
margin-top: 8px;
&_item {
// flex: 1;
......@@ -116,48 +123,41 @@
font-size: 12px;
}
.collection_state {
font-size: 12px;
color: #00B37A;
cursor: pointer;
&>label {
margin-left: 4px;
cursor: pointer;
}
}
.rate_wrap {
font-size: 12px;
:global {
.ant-rate {
display: flex;
font-size: 12px;
}
}
}
}
.level_icon {
width: 54px;
height: 16px;
margin-bottom: 4px;
display: block;
background-size: 100% 100%;
background-repeat: no-repeat;
.collection_state {
height: 32px;
display: flex;
justify-content: center;
align-items: center;
width: 92px;
background-color: #DAF3EE;
font-size: 12px;
color: #00A98F;
cursor: pointer;
&.level3 {
background-image: url(/static/imgs/level2@2x.png);
}
}
}
&>label {
margin-left: 4px;
cursor: pointer;
}
}
.commodity_list {
&_item {
position: relative;
display: flex;
margin-bottom: 16px;
margin-bottom: 8px;
border-radius: 8px;
background-color: #ffffff;
padding: 16px;
&_item {
flex: 1;
......@@ -165,6 +165,10 @@
justify-content: center;
flex-direction: column;
&.float_right {
align-items: flex-end;
}
.commodity_shopname {
color: #909399;
font-size: 12px;
......@@ -201,13 +205,13 @@
&_logo {
border-radius: 4px;
overflow: hidden;
width: 72px;
height: 72px;
margin-right: 16px;
width: 40px;
height: 40px;
margin-right: 12px;
&>img {
width: 72px;
height: 72px;
width: 40px;
height: 40px;
}
}
......@@ -306,16 +310,6 @@
}
}
.collection_state {
font-size: 12px;
color: #00B37A;
cursor: pointer;
&>label {
margin-left: 4px;
cursor: pointer;
}
}
.rate_wrap {
font-size: 12px;
......@@ -347,7 +341,10 @@
&_item {
position: relative;
display: flex;
margin-bottom: 16px;
margin-bottom: 8px;
border-radius: 8px;
background-color: #ffffff;
padding: 16px;
&_item {
flex: 1;
......@@ -355,8 +352,12 @@
justify-content: center;
flex-direction: column;
&.float_right {
align-items: flex-end;
}
&.morehalf {
flex: 4;
flex: 2;
}
.information_header_info {
......@@ -366,13 +367,13 @@
&_logo {
border-radius: 4px;
overflow: hidden;
width: 108px;
height: 72px;
margin-right: 16px;
width: 60px;
height: 40px;
margin-right: 12px;
&>img {
width: 108px;
height: 72px;
width: 60px;
height: 40px;
}
}
......@@ -430,18 +431,6 @@
color: #909399;
font-size: 12px;
}
.collection_state {
font-size: 12px;
color: #00B37A;
cursor: pointer;
&>label {
margin-left: 4px;
cursor: pointer;
}
}
}
}
}
src/pages/systemSetting/collection/information.tsx
View file @ 288f5871
import React, { useEffect, useState } from 'react'
import cx from 'classnames'
import { Pagination, message, Modal } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { StarFilled, EyeOutlined, ClockCircleOutlined } from '@ant-design/icons'
import { PublicApi } from '@/services/api'
import { numFormat } from '@/utils/numberFomat'
......@@ -83,7 +84,7 @@ const Information: React.FC = () => {
}
return (
<>
<PageHeaderWrapper>
<div className={styles.information_list}>
{
list && list.map((item, index) => (
......@@ -114,7 +115,7 @@ const Information: React.FC = () => {
<div className={cx(styles.information_list_item_item)}>
<span className={styles.date}>{moment(item.collectTime).format("YYYY-MM-DD HH:mm")}</span>
</div>
<div className={cx(styles.information_list_item_item)} onClick={() => handleCancelCollect(item)}>
<div className={cx(styles.information_list_item_item, styles.float_right)} onClick={() => handleCancelCollect(item)}>
<div className={cx(styles.collection_state)}>
<StarFilled />
<label>收藏</label>
......@@ -132,7 +133,7 @@ const Information: React.FC = () => {
</div>
)
}
</>
</PageHeaderWrapper>
)
}
......
src/pages/systemSetting/collection/logistics.tsx
View file @ 288f5871
import React, { useEffect, useState } from 'react'
import cx from 'classnames'
import { Pagination, message, Modal } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { StarFilled } from '@ant-design/icons'
import { PublicApi } from '@/services/api'
import { LOGISTICS_CENTER_URL } from '@/constants'
......@@ -82,7 +83,7 @@ const Logistics: React.FC = () => {
}
return (
<>
<PageHeaderWrapper>
<div className={styles.information_list}>
{
list && list.map((item, index) => (
......@@ -102,7 +103,7 @@ const Logistics: React.FC = () => {
<div className={cx(styles.information_list_item_item)}>
<span className={styles.date}>{moment(item.createTime).format("YYYY-MM-DD HH:mm")}</span>
</div>
<div className={cx(styles.information_list_item_item)} onClick={() => handleCancelCollect(item)}>
<div className={cx(styles.information_list_item_item, styles.float_right)} onClick={() => handleCancelCollect(item)}>
<div className={cx(styles.collection_state)}>
<StarFilled />
<label>收藏</label>
......@@ -120,7 +121,7 @@ const Logistics: React.FC = () => {
</div>
)
}
</>
</PageHeaderWrapper>
)
}
......
src/pages/systemSetting/collection/process.tsx
View file @ 288f5871
......@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react'
import cx from 'classnames'
import { Pagination, message, Modal } from 'antd'
import { StarFilled } from '@ant-design/icons'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import { PublicApi } from '@/services/api'
import { MANUFACTURE_CENTER_URL } from '@/constants'
import moment from 'moment'
......@@ -82,7 +83,7 @@ const Process: React.FC = () => {
}
return (
<>
<PageHeaderWrapper>
<div className={styles.information_list}>
{
list && list.map((item, index) => (
......@@ -102,7 +103,7 @@ const Process: React.FC = () => {
<div className={cx(styles.information_list_item_item)}>
<span className={styles.date}>{moment(item.createTime).format("YYYY-MM-DD HH:mm")}</span>
</div>
<div className={cx(styles.information_list_item_item)} onClick={() => handleCancelCollect(item)}>
<div className={cx(styles.information_list_item_item, styles.float_right)} onClick={() => handleCancelCollect(item)}>
<div className={cx(styles.collection_state)}>
<StarFilled />
<label>收藏</label>
......@@ -120,7 +121,7 @@ const Process: React.FC = () => {
</div>
)
}
</>
</PageHeaderWrapper>
)
}
......
src/pages/systemSetting/collection/purchase.tsx
View file @ 288f5871
......@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react'
import cx from 'classnames'
import { Pagination, message, Modal } from 'antd'
import { StarFilled } from '@ant-design/icons'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import { PublicApi } from '@/services/api'
import { SRM_CENTER_URL } from '@/constants'
import moment from 'moment'
......@@ -82,7 +83,7 @@ const Purchase: React.FC = () => {
}
return (
<>
<PageHeaderWrapper>
<div className={styles.information_list}>
{
list && list.map((item, index) => (
......@@ -102,7 +103,7 @@ const Purchase: React.FC = () => {
<div className={cx(styles.information_list_item_item)}>
<span className={styles.date}>{moment(item.createTime).format("YYYY-MM-DD HH:mm")}</span>
</div>
<div className={cx(styles.information_list_item_item)} onClick={() => handleCancelCollect(item)}>
<div className={cx(styles.information_list_item_item, styles.float_right)} onClick={() => handleCancelCollect(item)}>
<div className={cx(styles.collection_state)}>
<StarFilled />
<label>收藏</label>
......@@ -120,7 +121,7 @@ const Purchase: React.FC = () => {
</div>
)
}
</>
</PageHeaderWrapper>
)
}
......
src/pages/systemSetting/collection/shops.tsx
View file @ 288f5871
......@@ -2,8 +2,9 @@ import React, { useEffect, useState } from 'react'
import cx from 'classnames'
import { Rate, Pagination, Modal, message } from 'antd'
import { StarFilled } from '@ant-design/icons'
import shop_icon from '@/assets/imgs/shop_icon.png'
import credit_icon from '@/assets/imgs/credit_icon.png'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import ShopCredit from '@/components/ShopCredit'
import StarRate from '@/components/StarRate'
import { PublicApi } from '@/services/api'
import { ENTERPRISE_CENTER_URL } from '@/constants'
import moment from 'moment'
......@@ -84,12 +85,12 @@ const Shops: React.FC = () => {
}
return (
<>
<PageHeaderWrapper>
<div className={styles.shops_list}>
{
list && list.map((item, index) => (
<div className={styles.shops_list_item} key={`shops_list_item_${index}`}>
<div className={cx(styles.shops_list_item_item, styles.morehalf)}>
<div className={cx(styles.shops_list_item_item)}>
<div className={styles.shop_header_info}>
<div className={styles.shop_header_info_logo}>
<img src={item.logo} />
......@@ -99,7 +100,8 @@ const Shops: React.FC = () => {
<span>{item.memberName}</span>
</div>
<div className={styles.shop_header_info_content_about}>
<div className={styles.shop_header_info_content_about_item}>
<ShopCredit creditPoint={item.creditPoint || 0} />
{/* <div className={styles.shop_header_info_content_about_item}>
<i className={styles.icon}><img src={shop_icon} /></i>
<span className={styles.red}>{item.registerYears || 0}</span>
<span>年</span>
......@@ -107,7 +109,7 @@ const Shops: React.FC = () => {
<div className={styles.shop_header_info_content_about_item}>
<i className={styles.icon}><img src={credit_icon} /></i>
<span>{item.creditPoint || 0}</span>
</div>
</div> */}
</div>
</div>
......@@ -117,13 +119,14 @@ const Shops: React.FC = () => {
{/* <i className={cx(styles.level_icon, styles.level3)}></i> */}
<div className={styles.rate_wrap}>
<span>满意度：</span>
<Rate disabled defaultValue={item.avgTradeCommentStar || 0} />
<StarRate value={item.avgTradeCommentStar || 0} />
{/* <Rate disabled defaultValue={item.avgTradeCommentStar || 0} /> */}
</div>
</div>
<div className={cx(styles.shops_list_item_item)}>
<span className={styles.date}>{moment(item.createTime).format("YYYY-MM-DD HH:mm")}</span>
</div>
<div className={cx(styles.shops_list_item_item)}>
<div className={cx(styles.shops_list_item_item, styles.float_right)}>
<div className={cx(styles.collection_state)} onClick={() => handleCancelCollect(item)}>
<StarFilled />
<label>收藏</label>
......@@ -135,13 +138,13 @@ const Shops: React.FC = () => {
</div>
{
totalCount > 0 && (
totalCount > pageSize && (
<div className={styles.pagination_wrap}>
<Pagination showSizeChanger={false} current={current} total={totalCount} pageSize={pageSize} onChange={handleChange} />
</div>
)
}
</>
</PageHeaderWrapper>
)
}
......
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