Skip to content

J
jinfa-platform
Commit 32b8b307 authored by GuanHua's avatar GuanHua
Browse files
Options

fix: 修改商品详情样式, 和在线结算合同相关接口地址

parent 77848eed
Hide whitespace changes
Inline Side-by-side
Showing with 152 additions and 90 deletions
config/mallRoutes/index.ts
View file @ 32b8b307
......@@ -6,7 +6,7 @@ import { checkUrl } from '../utils'
const shopInfo = BASE_CONFIG.web.shopInfo
// let webMallInfo = shopInfo.filter(item => item.environment === 1 && item.type === 1)[0] // 企业商城
let webPointMallInfo = shopInfo.filter(item => item.environment === 1 && item.type === 2)[0] // 积分商城
const webPointMallInfo = shopInfo.filter(item => item.environment === 1 && item.type === 2)[0] // 积分商城
const defaultPointMallRoute = '/pointsMall' // 积分商城默认路径
const pointMallRoute = process.env.USE_ROUTE_CONFIG === 'true' ? checkUrl(webPointMallInfo.url, defaultPointMallRoute) : defaultPointMallRoute
......
src/pages/lxMall/commodityDetail/components/Exhibition/index.less
View file @ 32b8b307
......@@ -97,6 +97,7 @@
.collection_state {
position: relative;
display: inline-block;
cursor: pointer;
color: #909399;
font-size: 12px;
......@@ -111,4 +112,4 @@
cursor: pointer;
}
}
}
\ No newline at end of file
}
src/pages/lxMall/commodityDetail/components/ProductDescription/index.less
View file @ 32b8b307
......@@ -9,7 +9,7 @@
.buy_now_btn {
position: relative;
background-color: #D32F2F;
background-color: var(--mall_main_color);
color: #FFFFFF;
margin-left: auto;
margin-right: 20px;
......@@ -43,28 +43,28 @@
&.active {
background-color: #FFFFFF;
border-top: 2px solid #D32F2F;
border-top: 2px solid var(--mall_main_color);
a {
color: #D32F2F;
color: var(--mall_main_color);
}
}
&.ant-anchor-link-active {
background-color: #FFFFFF;
border-top: 2px solid #D32F2F;
border-top: 2px solid var(--mall_main_color);
a {
color: #D32F2F;
color: var(--mall_main_color);
}
}
&:hover {
background-color: #FFFFFF;
border-top: 2px solid #D32F2F;
border-top: 2px solid var(--mall_main_color);
a {
color: #D32F2F;
color: var(--mall_main_color);
}
}
}
......
src/pages/lxMall/commodityDetail/components/ShopInfo/index.less
View file @ 32b8b307
.shop_info {
position: relative;
width: 190px;
padding: 0 10px;
padding-bottom: 15px;
margin-bottom: 20px;
border: 1px solid rgba(245, 245, 245, 1);
background: linear-gradient(180deg, rgba(255, 245, 203, 1) 0%, rgba(255, 253, 244, 1) 100%);
background: #FFF8E6;
&_body {
padding: 0 10px;
}
.shop_info_title {
display: flex;
align-items: center;
justify-content: center;
height: 47px;
background: linear-gradient(180deg, #FAE4AC 0%, #FFF8E6 100%);
&_split {
width: 40px;
......@@ -35,6 +39,27 @@
.shop_about {
display: flex;
&_year {
height: 16px;
align-items: center;
color: #D32F2F;
font-size: 12px;
display: flex;
&_count {
width: 16px;
background-color: #D32F2F;
border: 1px solid #D32F2F;
color: #FFD012;
text-align: center;
}
&_text {
border: 1px solid #D32F2F;
padding: 0 4px;
}
}
&_item {
flex: 1;
display: flex;
......@@ -92,11 +117,20 @@
.star {
font-size: 15px;
line-height: 15px;
margin-left: 4px;
color: #FCA110 !important;
:global {
.ant-rate-star {
&:not(:last-child) {
margin-right: 1px;
}
}
}
}
.certified {
color: #00B37A;
color: #3877FF;
}
}
......@@ -148,7 +182,7 @@
margin-top: 15px;
width: 100%;
height: 32px;
background-color: #D32F2F;
background-color: #DB9040;
color: #FFF;
border: none;
outline: none;
......@@ -160,4 +194,4 @@
opacity: .9;
}
}
}
\ No newline at end of file
}
src/pages/lxMall/commodityDetail/components/ShopInfo/index.tsx
View file @ 32b8b307
......@@ -60,6 +60,13 @@ const ShopInfo: React.FC<ShopInfoPropsType> = (props) => {
})
}
const showDate = (dateString): string => {
if(dateString && typeof dateString === "string") {
return `${dateString.split('日')[0]}日`
}
return ""
}
return (
<div className={styles.shop_info}>
<div className={styles.shop_info_title}>
......@@ -67,42 +74,49 @@ const ShopInfo: React.FC<ShopInfoPropsType> = (props) => {
<div className={styles.shop_info_title_text}>会员认证</div>
<div className={styles.shop_info_title_split}></div>
</div>
<div className={styles.shop_name}>{shopInfo?.company}</div>
<div className={styles.shop_about}>
<div className={styles.shop_about_item}>
<i className={styles.icon}><img src={shop_icon} /></i>
<span className={styles.red}>{shopInfo?.registerYears}</span>
<span>年</span>
<div className={styles.shop_info_body}>
<div className={styles.shop_name}>{shopInfo?.memberName}</div>
<div className={styles.shop_about}>
<div className={styles.shop_about_year}>
<div className={styles.shop_about_year_count}>{shopInfo?.registerYears || 0}</div>
<div className={styles.shop_about_year_text}>平台{shopInfo?.registerYears || 0}年店</div>
</div>
</div>
<div className={styles.shop_about_item}>
<i className={styles.icon}><img src={credit_icon} /></i>
<span>{shopInfo?.creditPoint}</span>
<div className={styles.dashed_split}></div>
<div className={styles.shop_info_list}>
<div className={styles.shop_info_list_item}>
<div className={styles.label}>信用积分：</div>
<div className={styles.breif}></div>
</div>
<div className={styles.shop_info_list_item}>
<div className={styles.label}>注册资本：</div>
<div className={styles.breif}>{shopInfo?.registeredCapital || ""}</div>
</div>
<div className={styles.shop_info_list_item}>
<div className={styles.label}>成立日期：</div>
<div className={styles.breif}>{showDate(shopInfo?.establishmentDate)}</div>
</div>
<div className={styles.shop_info_list_item}>
<div className={styles.label}>营业执照：</div>
<div className={styles.breif}><span className={styles.certified}>{shopInfo?.businessLicence ? '[已认证]' : '[未认证]'}</span></div>
</div>
</div>
</div>
<div className={styles.shop_info_list}>
<div className={styles.dashed_split}></div>
<div className={styles.shop_info_list_item}>
<div className={styles.label}>满意度：</div>
<div className={styles.breif}><Rate className={styles.star} count={4} disabled defaultValue={shopInfo?.avgTradeCommentStar || 0} /></div>
<div className={styles.breif}>
<span>{shopInfo?.avgTradeCommentStar || 0}</span>
<Rate className={styles.star} count={5} disabled defaultValue={shopInfo?.avgTradeCommentStar || 0} />
</div>
</div>
<div className={styles.shop_info_list_item}>
<div className={styles.label}>注册资本：</div>
<div className={styles.breif}>{shopInfo?.registeredCapital || ""}</div>
</div>
<div className={styles.shop_info_list_item}>
<div className={styles.label}>成立日期：</div>
<div className={styles.breif}>{shopInfo?.establishmentDate || ""}</div>
</div>
<div className={styles.shop_info_list_item}>
<div className={styles.label}>营业执照：</div>
<div className={styles.breif}><span className={styles.certified}>{shopInfo?.businessLicence ? '[已认证]' : '[未认证]'}</span></div>
<div className={styles.dashed_split}></div>
<div className={styles.shop_info_btn_group}>
<div className={styles.shop_info_btn}><Link to={`/shop?shopId=${shopUrlParam}`}>进入店铺</Link></div>
<div className={cx(styles.shop_info_btn, collectState ? styles.active : '')} onClick={() => handleCollect()}>{collectState ? '已收藏本店' : '收藏本店'}</div>
</div>
<Button loading={applyLoading} className={styles.apply_member_btn} onClick={() => applyFroVip()}>申请成为本店会员</Button>
</div>
<div className={styles.dashed_split}></div>
<div className={styles.shop_info_btn_group}>
<div className={styles.shop_info_btn}><Link to={`/shop?shopId=${shopUrlParam}`}>进入店铺</Link></div>
<div className={cx(styles.shop_info_btn, collectState ? styles.active : '')} onClick={() => handleCollect()}>{collectState ? '已收藏本店' : '收藏本店'}</div>
</div>
<Button loading={applyLoading} className={styles.apply_member_btn} onClick={() => applyFroVip()}>申请成为本店会员</Button>
</div>
)
}
......
src/pages/lxMall/commodityDetail/index.less
View file @ 32b8b307
......@@ -35,6 +35,20 @@
}
}
.product_info_sellpoints {
display: flex;
&_item {
height: 20px;
line-height: 20px;
padding: 0 4px;
background: rgba(214, 155, 93, 0.08);
color: #D69B5D;
font-size: 12px;
margin-right: 8px;
}
}
.prompt_goods_price {
display: flex;
margin-top: 12px;
......@@ -161,15 +175,15 @@
}
&.active {
border: 1px solid #D32F2F;
color: #D32F2F;
border: 1px solid var(--mall_main_color);
color: var(--mall_main_color);
&::after {
content: '';
position: absolute;
width: 0;
height: 0;
border-bottom: 12px solid #D32F2F;
border-bottom: 12px solid var(--mall_main_color);
border-left: 12px solid transparent;
bottom: 0;
right: 0;
......@@ -236,13 +250,12 @@
margin-right: 20px;
width: 160px;
height: 40px;
background: rgba(211, 47, 47, 0.05);
border: 1px solid rgba(211, 47, 47, 0.2);
border: 1px solid var(--mall_main_color);
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;
color: #D32F2F;
color: var(--mall_main_color);
border-radius: 0;
cursor: pointer;
......@@ -251,9 +264,9 @@
}
&.buy {
background-color: #D32F2F;
background-color: var(--mall_main_color);
color: #FFF;
border: 1px solid #D32F2F;
border: 1px solid var(--mall_main_color);
&[disabled] {
color: rgba(0, 0, 0, 0.25);
......@@ -341,12 +354,11 @@
&_btn {
width: 100px;
height: 30px;
background: rgba(211, 47, 47, 0.05);
border: 1px solid rgba(211, 47, 47, 0.2);
border: 1px solid var(--mall_main_color);
font-size: 12px;
line-height: 28px;
text-align: center;
color: #D32F2F;
color: var(--mall_main_color);
cursor: pointer;
&:not(:last-child) {
......@@ -358,7 +370,7 @@
}
&.primary {
background: rgba(211, 47, 47, 1);
background: var(--mall_main_color);
color: #FFF;
}
}
......@@ -416,4 +428,4 @@
}
}
}
}
\ No newline at end of file
}
src/pages/lxMall/commodityDetail/index.tsx
View file @ 32b8b307
......@@ -14,6 +14,7 @@ import { store } from '@/store'
import ProductDescription from './components/ProductDescription'
import InputNumber from '@/components/InputNumber'
import { PublicApi } from '@/services/api'
import IconFont from '@/utils/iconfont'
import { GetSearchShopStoreGetCommodityDetailResponse, GetSearchShopChannelGetCommodityDetailResponse } from '@/services/SearchApi'
import { getAuth } from '@/utils/auth'
import { numFormat, priceFormat } from '@/utils/numberFomat'
......@@ -641,7 +642,7 @@ const CommodityDetail = (props) => {
<>
<Button disabled={stockCount <= 0} className={cx(styles.product_info_btn_item, styles.buy)} onClick={() => handleToBuy()}>立即订购</Button>
<Button disabled={stockCount <= 0} className={cx(styles.product_info_btn_item, styles.add)} onClick={() => handleAddToPurchase()} >
<img className={styles.btn_icon} src={jinhuodanIcon} />
<IconFont type="icon-order" />
<span>加入进货单</span>
</Button>
</>
......@@ -995,21 +996,17 @@ const CommodityDetail = (props) => {
<div className={styles.product_info}>
<div className={styles.product_info_name}>
<span>{commodityDetail?.name}</span>
{
commodityDetail?.sellingPoint && commodityDetail?.sellingPoint.length > 0 && (
<>
【{
commodityDetail?.sellingPoint.map((item, index) => (
<span key={`product_info_tags_item_${index}`}>{item}{index !== commodityDetail?.sellingPoint.length - 1 ? ' ' : ''}</span>
))
}】
</>
)
}
</div>
<div className={styles.product_info_tags}>
<div className={styles.product_info_tags_item} >{commodityDetail?.slogan}</div>
</div>
<div className={styles.product_info_sellpoints}>
{
commodityDetail?.sellingPoint && commodityDetail?.sellingPoint.length > 0 && commodityDetail?.sellingPoint.map((item, index) => (
<div className={styles.product_info_sellpoints_item} key={`product_info_tags_item_${index}`}>{item}{index !== commodityDetail?.sellingPoint.length - 1 ? ' ' : ''}</div>
))
}
</div>
{
commodityDetail?.priceType === COMMODITY_TYPE.prompt && (
<div className={styles.prompt_goods_price}>
......
src/pages/lxMall/components/MainNav/index.less
View file @ 32b8b307
......@@ -51,6 +51,8 @@
.main_nav_container>.nav .nav_item {
&.active {
background-color: var(--nav_active_bg);
a {
color: #FFF;
}
......
src/pages/lxMall/components/SideNav/index.tsx
View file @ 32b8b307
import React, { useState } from 'react'
import { history } from 'umi'
import { createFromIconfontCN } from '@ant-design/icons'
import { LAYOUT_TYPE } from '@/constants'
import FootPrint from './footprint'
import { GlobalConfig } from '@/global/config'
import IconFont from '@/utils/iconfont'
import './index.less'
const MyIcon = createFromIconfontCN({
scriptUrl: '//at.alicdn.com/t/font_1971099_3ydes2fjmnm.js', // 在 iconfont.cn 上生成
});
interface SideNavPropsType {
type: LAYOUT_TYPE,
shopUrlParam?: string
......@@ -48,19 +44,19 @@ const SideNav: React.FC<SideNavPropsType> = (props) => {
<div className="side_nav_container">
<div className="side_nav_list">
<div className="side_nav_list_item" onClick={() => linkToCollected('shops')}>
<MyIcon type="icon-guanzhu" />
<IconFont type="icon-guanzhu" />
</div>
<div className="side_nav_list_item" onClick={() => linkToCollected('commodity')}>
<MyIcon type="icon-shoucang1" />
<IconFont type="icon-shoucang1" />
</div>
<div className="side_nav_list_item" onClick={() => linkToPurchaseOrder()}>
<MyIcon type="icon-gouwuche" />
<IconFont type="icon-gouwuche" />
</div>
<div className="side_nav_list_item" onClick={() => history.push('/memberCenter/systemSetting/message')}>
<MyIcon type="icon-xiaoxi" />
<IconFont type="icon-xiaoxi" />
</div>
<div className="side_nav_list_item">
<MyIcon type="icon-erweima1" />
<IconFont type="icon-erweima1" />
</div>
{/* <div className="side_nav_list_item" onClick={() => showToggleFootPrint()}>
<MyIcon type="icon-jilu" />
......
src/pages/lxMall/order/index.tsx
View file @ 32b8b307
......@@ -137,8 +137,8 @@ const Order: React.FC<OrderPropsType> = (props) => {
const param: any = {
orderModel: getOrderMode(), // 下单模式
contractTemplateId: data.electronicContractId,
signMemberId: orderInfo.supplyMembersId,
signRoleId: orderInfo.supplyMembersRoleId,
memberId: orderInfo.supplyMembersId,
roleId: orderInfo.supplyMembersRoleId,
orderProductRequests: getOrderProductRequests().orderProductRequests,
}
......@@ -146,7 +146,7 @@ const Order: React.FC<OrderPropsType> = (props) => {
param.deliveryAddresId = selectAddressInfo.id
}
const signRes = await PublicApi.postOrderSignaturePreOrderSignContractCreate(param)
const signRes = await PublicApi.postOrderContractSignSettlementSignContractCreate(param)
const signData: any = signRes.data
message.destroy()
if (signRes.code === 1000) {
......@@ -480,7 +480,7 @@ const Order: React.FC<OrderPropsType> = (props) => {
}
setAgreeSignLoading(true)
PublicApi.postOrderSignatureOrderSettleSign(param).then((res: any) => {
PublicApi.postOrderContractSignSettlementOneStepSign(param).then((res: any) => {
if (res.code === 1000) {
message.destroy()
checkoutCount = 0
......@@ -497,7 +497,7 @@ const Order: React.FC<OrderPropsType> = (props) => {
const param = {
signatureLogId
}
PublicApi.getOrderSignatureOrderSettleSignDetail(param).then(res => {
PublicApi.getOrderContractSignOrderSettleSignDetail(param).then(res => {
let timer = null
if (res.code === 1000) {
if (res.data.state === 4) {
......
src/theme/science/styles/colors.less
View file @ 32b8b307
......@@ -29,9 +29,11 @@
// 店铺科技类模板颜色配置
.theme-shop-science {
font-size: 14px;
--mall_main_color: #D32F2F;
--mall_sub_color: rgba(211, 47, 47, 0.1);
--mall_main_color: #00B37A;
--mall_sub_color: #daf2e7;
// --mall_main_color: #D32F2F;
// --mall_sub_color: rgba(211, 47, 47, 0.1);
--nav_active_bg: #008C65;
--category_content_bg: #FFFFFF;
--category_content_title_text: #303133;
--category_content_sub_title_text: #606266;
......
src/utils/iconfont.ts 0 → 100644
View file @ 32b8b307
import { createFromIconfontCN } from '@ant-design/icons'
const IconFont = createFromIconfontCN({
scriptUrl: '//at.alicdn.com/t/font_1971099_yqci87jdyqn.js', // 在 iconfont.cn 上生成
});
export default IconFont
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