Skip to content

J
jinfa-platform
Commit 83d785d6 authored by GuanHua's avatar GuanHua
Browse files
Options

style: 店铺模板样调整

parent a8cef2fd
Hide whitespace changes
Inline Side-by-side
Showing with 775 additions and 364 deletions
src/components/DetailPage/index.less
View file @ 83d785d6
.common_detail_page { .common_detail_page {
margin: -24px; margin: -24px;
min-height: calc(100vh - 112px);
.common_header { .common_header {
display: flex; display: flex;
...@@ -30,8 +31,8 @@ ...@@ -30,8 +31,8 @@
} }
.detail_page_contaner { .detail_page_contaner {
margin: 24px; margin: 16px;
border-radius: 8px; border-radius: 8px;
background-color: #ffffff; background-color: #ffffff;
} }
} }
\ No newline at end of file
src/components/TemplateItem/index.less 0 → 100644
View file @ 83d785d6
.template_item {
// width: 386px;
background-color: #ffffff;
border-radius: 8px;
overflow: hidden;
height: 100%;
padding: 16px;
.img_box {
position: relative;
// height: 218px;
height: 0;
padding-bottom: 67%;
overflow: hidden;
background-size: 100% auto;
background-position: center center;
background-repeat: no-repeat;
border-radius: 4px;
&:hover {
.img_box_mask {
opacity: 1;
}
}
.img_box_mask {
position: absolute;
width: 100%;
opacity: 0;
transition: all .5s;
height: 100%;
background: rgba(255, 255, 255, 0.45);
z-index: 8;
.detail_btn {
position: relative;
border-radius: 4px;
display: block;
left: 0;
right: 0;
top: 50%;
margin: 0 auto;
margin-top: -20px;
width: 240px;
height: 40px;
background: rgba(0, 0, 0, 0.85);
color: #ffffff!important;
text-align: center;
line-height: 40px;
font-weight: 500;
cursor: pointer;
a {
color: #FFF;
}
&:hover {
opacity: .9;
}
}
}
&>img {
// height: 100%;
width: 100%;
}
}
.type_tag {
position: relative;
padding: 0 4px;
color: #4787F0;
line-height: 16px;
font-size: 12px;
font-weight: 400;
background: #ECF2FE;
border-radius: 2px;
z-index: 3;
&.app {
background: #FCF7E8;
color: #E0AB50;
}
&.applet {
background: #EBF9F6;
color: #00A98F;
}
&.h5 {
background: #F3E8F9;
color: #9963D8;
}
}
.template_info {
.template_info_name {
display: flex;
align-items: center;
color: #252D37;
font-weight: 500;
line-height: 24px;
padding-top: 16px;
padding-bottom: 8px;
font-size: 14px;
.tag {
padding: 0 8px;
height: 24px;
background: rgba(244, 245, 247, 1);
border-radius: 4px;
margin-left: 8px;
color: #606266;
font-weight: 400;
}
}
.template_info_content {
display: flex;
align-items: flex-end;
&.goods {
height: 32px;
}
.template_info_content_text_wrap {
flex: 1;
font-size: 12px;
line-height: 22px;
.template_info_content_text_line {
display: flex;
&:not(:last-child) {
margin-bottom: 8px;
}
&>label {
color: #909399;
margin-right: 8px;
}
&>span {
flex: 1;
width: 0;
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: #303133;
}
}
}
.template_item_btn {
width: 80px;
height: 32px;
display: flex;
justify-content: center;
align-items: center;
background: #F4F5F7;
border: 1px solid #F4F5F7;
cursor: pointer;
color: #252D37;
font-size: 12px;
margin-left: auto;
border-radius: 4px;
&.active {
background: #00A98F;
border: 1px solid #00A98F;
color: #ffffff;
}
&>label {
margin-left: 8px;
cursor: pointer;
}
&:hover {
opacity: .8;
}
}
}
}
}
src/components/TemplateItem/index.tsx 0 → 100644
View file @ 83d785d6
import React from 'react'
import { PlayCircleOutlined } from '@ant-design/icons'
import cx from 'classnames'
import { Link, useIntl } from 'umi'
import styles from './index.less'
import AuthButton from '@/components/AuthButton'
import { Environment_Status } from '@/constants'
interface TemplateItemPropsType {
templateInfo: any;
type: string;
link: string,
}
const TemplateItem: React.FC<TemplateItemPropsType> = (props) => {
const { templateInfo, type, link } = props
const intl = useIntl()
const STYLE_NAME = {
0: 'pc',
1: 'pc',
2: 'h5',
3: 'applet',
4: 'app',
}
return (
<div className={styles.template_item}>
<div className={styles.img_box} style={{ backgroundImage: `url(${templateInfo.templatePicUrl})` }}>
<div className={styles.img_box_mask}>
<AuthButton btnCode='shopAbility.template.see' >
<Link to={`${link}?type=${type}&id=${templateInfo.id}`} className={styles.detail_btn}>{intl.formatMessage({ id: 'common.button.view.details' })}</Link>
</AuthButton>
</div>
</div>
<div className={styles.template_info}>
<div className={cx(styles.template_info_content, type === 'goods' ? styles.goods : '')}>
<div className={styles.template_info_content_text_wrap}>
<div className={styles.template_info_name}>
<span>{templateInfo.templateName}</span>
</div>
<div className={styles.template_info_content_text_line}>
<div className={cx(styles.type_tag, styles[STYLE_NAME[templateInfo.environment]])}>
{Environment_Status[templateInfo.environment].name}
</div>
</div>
</div>
<div className={cx(styles.template_item_btn, templateInfo.use === 1 ? styles.active : '')}>
<PlayCircleOutlined />
<label>{templateInfo.use === 1 ? intl.formatMessage({ id: 'shop.template.button.state.enabling' }) : intl.formatMessage({ id: 'shop.template.button.state.enable' })}</label>
</div>
</div>
</div>
</div>
)
}
export default TemplateItem
src/constants/index.ts
View file @ 83d785d6
import { GlobalConfig } from '@/global/config' import { GlobalConfig } from '@/global/config'
import { getIntl } from 'umi'
import { getTopDomainByHost, getDefaultEnterprise, getChannelInfo, getIChannelInfo } from '@/utils' import { getTopDomainByHost, getDefaultEnterprise, getChannelInfo, getIChannelInfo } from '@/utils'
import { import {
getInfoCenterUrl, getInfoCenterUrl,
...@@ -8,6 +9,7 @@ import { ...@@ -8,6 +9,7 @@ import {
getTopDomain, getTopDomain,
} from '@/utils/getDomain' } from '@/utils/getDomain'
export const NOT_CHANGE_VALUE = 'hello, world' export const NOT_CHANGE_VALUE = 'hello, world'
const intl = getIntl()
// socket的链接地址， 默认会使用后端接口网关地址 // socket的链接地址， 默认会使用后端接口网关地址
export const SOCKET_URL = process.env.SOCKET_URL?.replace('http|https', 'ws') || process.env.BACK_GATEWAY?.replace('http|https', 'ws') export const SOCKET_URL = process.env.SOCKET_URL?.replace('http|https', 'ws') || process.env.BACK_GATEWAY?.replace('http|https', 'ws')
...@@ -158,17 +160,25 @@ export const isDev = process.env.NODE_ENV === "development" ...@@ -158,17 +160,25 @@ export const isDev = process.env.NODE_ENV === "development"
// 暂时将权限访问关闭 // 暂时将权限访问关闭
// export const isDev = false // export const isDev = false
export const Environment_Status = { export const Environment_Status = {
0: "所有", 0: {
1: "web", name: intl.formatMessage({ id: 'shop.template.environment.status_0' })
2: "H5", },
3: "小程序", 1: {
4: "APP" name: "PC"
},
2: {
name: "H5"
},
3: {
name: intl.formatMessage({ id: 'shop.template.environment.status_3' })
},
4: {
name: "APP"
}
} }
export enum FILTER_TYPE { export enum FILTER_TYPE {
/** /**
* 常用筛选 * 常用筛选
......
src/pages/channel/channelTemplate/index.tsx
View file @ 83d785d6
...@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react' ...@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react'
import { Row, Col, message } from 'antd' import { Row, Col, message } from 'antd'
import { history, useIntl } from 'umi' import { history, useIntl } from 'umi'
import { PageHeaderWrapper } from '@ant-design/pro-layout' import { PageHeaderWrapper } from '@ant-design/pro-layout'
import TemplateItem from '../components/templateItem' import TemplateItem from '@/components/templateItem'
import styles from './index.less' import styles from './index.less'
import { getTemplateWebPageTemplateWebFindAllShelfChannelTemplate, GetTemplateWebPageTemplateWebFindAllShelfChannelTemplateResponse } from '@/services/TemplateV2Api' import { getTemplateWebPageTemplateWebFindAllShelfChannelTemplate, GetTemplateWebPageTemplateWebFindAllShelfChannelTemplateResponse } from '@/services/TemplateV2Api'
...@@ -31,11 +31,11 @@ const ShopTemplate: React.FC = () => { ...@@ -31,11 +31,11 @@ const ShopTemplate: React.FC = () => {
return ( return (
<PageHeaderWrapper> <PageHeaderWrapper>
<div className={styles.shop_center_template}> <div className={styles.shop_center_template}>
<Row gutter={24} className={styles.template_list}> <Row gutter={16} className={styles.template_list}>
{ {
templateList.map(item => ( templateList.map(item => (
<Col xxl={6} xl={8} lg={12} key={item.id} style={{ marginBottom: 16 }}> <Col xxl={6} xl={8} lg={12} key={item.id} style={{ marginBottom: 16 }}>
<TemplateItem templateInfo={item} type="channel" /> <TemplateItem templateInfo={item} type="channel" link='/memberCenter/channelAbility/template/detail' />
</Col> </Col>
)) ))
} }
......
src/pages/channel/templateDetail/index.less
View file @ 83d785d6
.template_detail { .template_detail {
height: 224px;
background-color: #ffffff; background-color: #ffffff;
display: flex; display: flex;
border-radius: 8px; border-radius: 8px;
align-items: center; align-items: center;
padding: 16px;
.back_btn { .back_btn {
color: #909399; color: #909399;
...@@ -16,16 +16,16 @@ ...@@ -16,16 +16,16 @@
.template_info_wrap { .template_info_wrap {
display: flex; display: flex;
margin-left: 36px;
flex: 1; flex: 1;
align-items: center; align-items: center;
.template_img_box { .template_img_box {
position: relative; position: relative;
width: 250px; width: 192x;
height: 165px; height: 128px;
border-radius: 8px 8px 0px 0px; border-radius: 8px;
overflow: hidden; overflow: hidden;
border: 1px solid #F5F6F7;
.type_tag { .type_tag {
position: absolute; position: absolute;
...@@ -57,35 +57,74 @@ ...@@ -57,35 +57,74 @@
margin-left: 24px; margin-left: 24px;
.template_info_line { .template_info_line {
line-height: 22px; font-size: 12px;
font-weight: 400;
.tempalte_name {
color: #252D37;
line-height: 24px;
font-size: 16px;
font-weight: 500;
}
.type_tag {
position: relative;
padding: 0 4px;
color: #4787F0;
line-height: 16px;
font-size: 12px;
font-weight: 400;
background: #ECF2FE;
border-radius: 2px;
z-index: 3;
display: inline-block;
&.app {
background: #FCF7E8;
color: #E0AB50;
}
&.applet {
background: #EBF9F6;
color: #00A98F;
}
&.h5 {
background: #F3E8F9;
color: #9963D8;
}
}
&:not(:last-child) { &:not(:last-child) {
margin-bottom: 8px; margin-bottom: 8px;
} }
&>label { &>label {
color: #909399; color: #91959B;
} }
&>span { &>span {
color: #303133; color: #252D37;
} }
} }
} }
} }
.btn { .btn {
margin-left: 24px; margin-left: 16px;
padding: 0 20px; padding: 0 16px;
min-width: 88px; min-width: 88px;
height: 40px; height: 32px;
background: rgba(250, 251, 252, 1); background: #F4F5F7;
border: 1px solid rgba(235, 236, 240, 1); border: 1px solid #F4F5F7;
color: #606266; color: #606266;
cursor: pointer; cursor: pointer;
line-height: 38px; display: flex;
text-align: center; align-items: center;
justify-content: center;
border-radius: 4px;
&>label { &>label {
margin-left: 5px; margin-left: 5px;
...@@ -98,16 +137,12 @@ ...@@ -98,16 +137,12 @@
} }
&.use { &.use {
background: #00B37A; background: #00A98F;
color: #ffffff; color: #ffffff;
} }
&:hover { &:hover {
opacity: .8; opacity: .8;
} }
&:last-child {
margin-right: 48px;
}
} }
} }
\ No newline at end of file
src/pages/channel/templateDetail/index.tsx
View file @ 83d785d6
...@@ -11,6 +11,7 @@ import { getTemplateWebPageTemplateWebFindChannelTemplateDetails, postTemplateWe ...@@ -11,6 +11,7 @@ import { getTemplateWebPageTemplateWebFindChannelTemplateDetails, postTemplateWe
import styles from './index.less' import styles from './index.less'
import AuthButton from '@/components/AuthButton' import AuthButton from '@/components/AuthButton'
import { getManageShopOpenMro } from '@/services/ManageV2Api' import { getManageShopOpenMro } from '@/services/ManageV2Api'
import { CusteomImageBox } from '@/components/ImageBox'
interface TemplateDetailPropsType { interface TemplateDetailPropsType {
location: { location: {
...@@ -115,6 +116,14 @@ const TemplateDetail: React.FC<TemplateDetailPropsType> = (props) => { ...@@ -115,6 +116,14 @@ const TemplateDetail: React.FC<TemplateDetailPropsType> = (props) => {
}) })
} }
const STYLE_NAME = {
0: 'pc',
1: 'pc',
2: 'h5',
3: 'applet',
4: 'app',
}
return ( return (
<DetailPage <DetailPage
title={intl.formatMessage({ id: 'shop.template.detail.title' })} title={intl.formatMessage({ id: 'shop.template.detail.title' })}
...@@ -122,21 +131,21 @@ const TemplateDetail: React.FC<TemplateDetailPropsType> = (props) => { ...@@ -122,21 +131,21 @@ const TemplateDetail: React.FC<TemplateDetailPropsType> = (props) => {
<div className={styles.template_detail}> <div className={styles.template_detail}>
<div className={styles.template_info_wrap}> <div className={styles.template_info_wrap}>
<div className={styles.template_img_box}> <div className={styles.template_img_box}>
<div className={cx(styles.type_tag)}>{Environment_Status[detailInfo?.environment]}</div> <CusteomImageBox
<img src={detailInfo?.templatePicUrl} /> imgUrl={detailInfo?.templatePicUrl}
width={192}
height={128}
borderRadius={8}
/>
</div> </div>
<div className={styles.template_info}> <div className={styles.template_info}>
<div className={styles.template_info_line}> <div className={styles.template_info_line}>
<label>{intl.formatMessage({ id: 'shop.template.form.label.templateName' })}</label> <span className={styles.tempalte_name}>{detailInfo?.templateName}</span>
<span>{detailInfo?.templateName}</span>
</div>
<div className={styles.template_info_line}>
<label>{intl.formatMessage({ id: 'shop.template.form.label.environment' })}</label>
<span>{Environment_Status[detailInfo?.environment]}</span>
</div> </div>
<div className={styles.template_info_line}> <div className={styles.template_info_line}>
<label>{intl.formatMessage({ id: 'shop.template.form.label.templateDescribe' })}</label> <div className={cx(styles.type_tag, styles[STYLE_NAME[detailInfo?.environment]])}>
<span>{detailInfo?.templateDescribe}</span> {Environment_Status[detailInfo?.environment]?.name}
</div>
</div> </div>
<div className={styles.template_info_line}> <div className={styles.template_info_line}>
<label>{intl.formatMessage({ id: 'shop.template.form.label.siteName' })}</label> <label>{intl.formatMessage({ id: 'shop.template.form.label.siteName' })}</label>
...@@ -144,7 +153,11 @@ const TemplateDetail: React.FC<TemplateDetailPropsType> = (props) => { ...@@ -144,7 +153,11 @@ const TemplateDetail: React.FC<TemplateDetailPropsType> = (props) => {
</div> </div>
<div className={styles.template_info_line}> <div className={styles.template_info_line}>
<label>{intl.formatMessage({ id: 'shop.template.form.label.shopName' })}</label> <label>{intl.formatMessage({ id: 'shop.template.form.label.shopName' })}</label>
<span>{detailInfo?.shopName}</span> <span>{detailInfo?.sourceShopName || detailInfo?.shopName}</span>
</div>
<div className={styles.template_info_line}>
<label>{intl.formatMessage({ id: 'shop.template.form.label.templateDescribe' })}</label>
<span>{detailInfo?.templateDescribe}</span>
</div> </div>
</div> </div>
</div> </div>
...@@ -161,7 +174,7 @@ const TemplateDetail: React.FC<TemplateDetailPropsType> = (props) => { ...@@ -161,7 +174,7 @@ const TemplateDetail: React.FC<TemplateDetailPropsType> = (props) => {
</div> </div>
</AuthButton> </AuthButton>
<AuthButton btnCode='channelTemplate.Detail.renovation' > <AuthButton btnCode='channelTemplate.Detail.renovation' >
<div className={cx(styles.btn, styles.fit)} onClick={() => handleLinkEdit()}> <div className={cx(styles.btn)} onClick={() => handleLinkEdit()}>
<LayoutOutlined /> <LayoutOutlined />
<label>{intl.formatMessage({ id: 'channel.template.button.mall.edit' })}</label> <label>{intl.formatMessage({ id: 'channel.template.button.mall.edit' })}</label>
</div> </div>
...@@ -169,7 +182,7 @@ const TemplateDetail: React.FC<TemplateDetailPropsType> = (props) => { ...@@ -169,7 +182,7 @@ const TemplateDetail: React.FC<TemplateDetailPropsType> = (props) => {
<AuthButton btnCode='channelTemplate.Detail.categoryrenovation' > <AuthButton btnCode='channelTemplate.Detail.categoryrenovation' >
{ {
detailInfo?.environment === 4 && ( detailInfo?.environment === 4 && (
<div className={cx(styles.btn, styles.fit)} onClick={handleJump}> <div className={cx(styles.btn)} onClick={handleJump}>
<LayoutOutlined /> <LayoutOutlined />
<label>{intl.formatMessage({ id: 'channel.template.button.mall.category.edit' })}</label> <label>{intl.formatMessage({ id: 'channel.template.button.mall.category.edit' })}</label>
</div> </div>
......
src/pages/ownMall/ownMallManager/ownMallTemplate/index.tsx
View file @ 83d785d6
import React, { useEffect, useState } from 'react' import React, { useEffect, useState } from 'react'
import { Row, Col } from 'antd' import { Row, Col } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout' import { PageHeaderWrapper } from '@ant-design/pro-layout'
import TemplateItem from '../components/templateItem' import TemplateItem from '@/components/templateItem'
import { getTemplateWebPageTemplateWebFindAllSelfTemplate, GetTemplateWebPageTemplateWebFindAllSelfTemplateResponse } from '@/services/TemplateV2Api' import { getTemplateWebPageTemplateWebFindAllSelfTemplate, GetTemplateWebPageTemplateWebFindAllSelfTemplateResponse } from '@/services/TemplateV2Api'
import styles from './index.less' import styles from './index.less'
...@@ -25,11 +25,11 @@ const OwnMallTemplate: React.FC = () => { ...@@ -25,11 +25,11 @@ const OwnMallTemplate: React.FC = () => {
return ( return (
<PageHeaderWrapper> <PageHeaderWrapper>
<div className={styles.shop_center_template}> <div className={styles.shop_center_template}>
<Row gutter={24} className={styles.template_list}> <Row gutter={16} className={styles.template_list}>
{ {
templateList.map(item => ( templateList.map(item => (
<Col xxl={6} xl={8} lg={12} key={item.id} style={{ marginBottom: 16 }}> <Col xxl={6} xl={8} lg={12} key={item.id} style={{ marginBottom: 16 }}>
<TemplateItem templateInfo={item} type="ownMall" /> <TemplateItem templateInfo={item} type="ownMall" link='/memberCenter/ownMallAbility/ownMallManager/template/detail' />
</Col> </Col>
)) ))
} }
......
src/pages/ownMall/ownMallManager/templateDetail/index.less
View file @ 83d785d6
.template_detail { .template_detail {
height: 224px; background-color: #ffffff;
background-color: #ffffff; display: flex;
display: flex; border-radius: 8px;
border-radius: 8px; align-items: center;
align-items: center; padding: 16px;
.back_btn { .back_btn {
color: #909399; color: #909399;
margin-left: 27px; margin-left: 27px;
font-size: 14px; font-size: 14px;
margin-top: 40px; margin-top: 40px;
cursor: pointer; cursor: pointer;
align-self: flex-start; align-self: flex-start;
} }
.template_info_wrap { .template_info_wrap {
display: flex; display: flex;
margin-left: 36px; flex: 1;
flex: 1; align-items: center;
align-items: center;
.template_img_box {
.template_img_box { position: relative;
position: relative; width: 192x;
width: 250px; height: 128px;
height: 165px; border-radius: 8px;
border-radius: 8px 8px 0px 0px; overflow: hidden;
overflow: hidden; border: 1px solid #F5F6F7;
.type_tag { .type_tag {
position: absolute; position: absolute;
top: 0; top: 0;
width: 72px; width: 72px;
height: 24px; height: 24px;
color: #ffffff; color: #ffffff;
text-align: center; text-align: center;
line-height: 24px; line-height: 24px;
font-size: 12px; font-size: 12px;
background: #4279DF; background: #4279DF;
border-radius: 8px 0px 8px 0px; border-radius: 8px 0px 8px 0px;
z-index: 3; z-index: 3;
&.h5 { &.h5 {
background: #6554C0; background: #6554C0;
} }
} }
&>img { &>img {
height: 100%; height: 100%;
width: auto; width: auto;
display: block; display: block;
margin: 0 auto; margin: 0 auto;
} }
} }
.template_info { .template_info {
margin-left: 24px; margin-left: 24px;
.template_info_line { .template_info_line {
line-height: 22px; font-size: 12px;
font-weight: 400;
&:not(:last-child) {
margin-bottom: 8px; .tempalte_name {
} color: #252D37;
line-height: 24px;
&>label { font-size: 16px;
color: #909399; font-weight: 500;
}
}
.type_tag {
&>span { position: relative;
color: #303133; padding: 0 4px;
} color: #4787F0;
} line-height: 16px;
} font-size: 12px;
} font-weight: 400;
background: #ECF2FE;
.btn { border-radius: 2px;
margin-left: 24px; z-index: 3;
padding: 0 20px; display: inline-block;
min-width: 88px;
height: 40px; &.app {
background: rgba(250, 251, 252, 1); background: #FCF7E8;
border: 1px solid rgba(235, 236, 240, 1); color: #E0AB50;
color: #606266; }
cursor: pointer;
line-height: 38px;
text-align: center; &.applet {
background: #EBF9F6;
&>label { color: #00A98F;
margin-left: 5px; }
cursor: pointer;
} &.h5 {
background: #F3E8F9;
&.fit { color: #9963D8;
background: #909399; }
color: #ffffff; }
}
&:not(:last-child) {
&.use { margin-bottom: 8px;
background: #00B37A; }
color: #ffffff;
} &>label {
color: #91959B;
&:hover {
opacity: .8; }
}
&>span {
&:last-child { color: #252D37;
margin-right: 48px; }
} }
} }
} }
\ No newline at end of file
.btn {
margin-left: 16px;
padding: 0 16px;
min-width: 88px;
height: 32px;
background: #F4F5F7;
border: 1px solid #F4F5F7;
color: #606266;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
&>label {
margin-left: 5px;
cursor: pointer;
}
&.fit {
background: #909399;
color: #ffffff;
}
&.use {
background: #00A98F;
color: #ffffff;
}
&:hover {
opacity: .8;
}
}
}
src/pages/ownMall/ownMallManager/templateDetail/index.tsx
View file @ 83d785d6
...@@ -14,6 +14,7 @@ import { postManageWebShopWebAll, PostManageWebShopWebAllResponse } from '@/serv ...@@ -14,6 +14,7 @@ import { postManageWebShopWebAll, PostManageWebShopWebAllResponse } from '@/serv
import { getAuth } from '@/utils/auth' import { getAuth } from '@/utils/auth'
import { GlobalConfig } from '@/global/config' import { GlobalConfig } from '@/global/config'
import { CusteomImageBox } from '@/components/ImageBox'
interface TemplateDetailPropsType { interface TemplateDetailPropsType {
location: { location: {
...@@ -133,13 +134,21 @@ const TemplateDetail: React.FC<TemplateDetailPropsType> = (props) => { ...@@ -133,13 +134,21 @@ const TemplateDetail: React.FC<TemplateDetailPropsType> = (props) => {
} }
const onChangeMroSetting = (e) => { const onChangeMroSetting = (e) => {
postTemplateWebPageTemplateWebOpenMro({openMro: e.target.checked ? 1 : 0, templateId: detailInfo.id, type: 1}).then(({code}) => { postTemplateWebPageTemplateWebOpenMro({ openMro: e.target.checked ? 1 : 0, templateId: detailInfo.id, type: 1 }).then(({code}) => {
if(code === 1000) { if(code === 1000) {
fetchDetail() fetchDetail()
} }
}) })
} }
const STYLE_NAME = {
0: 'pc',
1: 'pc',
2: 'h5',
3: 'applet',
4: 'app',
}
return ( return (
<DetailPage <DetailPage
title={intl.formatMessage({ id: 'shop.template.detail.title' })} title={intl.formatMessage({ id: 'shop.template.detail.title' })}
...@@ -147,21 +156,21 @@ const TemplateDetail: React.FC<TemplateDetailPropsType> = (props) => { ...@@ -147,21 +156,21 @@ const TemplateDetail: React.FC<TemplateDetailPropsType> = (props) => {
<div className={styles.template_detail}> <div className={styles.template_detail}>
<div className={styles.template_info_wrap}> <div className={styles.template_info_wrap}>
<div className={styles.template_img_box}> <div className={styles.template_img_box}>
<div className={cx(styles.type_tag)}>{Environment_Status[detailInfo?.environment]}</div> <CusteomImageBox
<img src={detailInfo?.templatePicUrl} /> imgUrl={detailInfo?.templatePicUrl}
width={192}
height={128}
borderRadius={8}
/>
</div> </div>
<div className={styles.template_info}> <div className={styles.template_info}>
<div className={styles.template_info_line}> <div className={styles.template_info_line}>
<label>{intl.formatMessage({ id: 'shop.template.form.label.templateName' })}</label> <span className={styles.tempalte_name}>{detailInfo?.templateName}</span>
<span>{detailInfo?.templateName}</span>
</div>
<div className={styles.template_info_line}>
<label>{intl.formatMessage({ id: 'shop.template.form.label.environment' })}</label>
<span>{Environment_Status[detailInfo?.environment]}</span>
</div> </div>
<div className={styles.template_info_line}> <div className={styles.template_info_line}>
<label>{intl.formatMessage({ id: 'shop.template.form.label.templateDescribe' })}</label> <div className={cx(styles.type_tag, styles[STYLE_NAME[detailInfo?.environment]])}>
<span>{detailInfo?.templateDescribe}</span> {Environment_Status[detailInfo?.environment]?.name}
</div>
</div> </div>
<div className={styles.template_info_line}> <div className={styles.template_info_line}>
<label>{intl.formatMessage({ id: 'shop.template.form.label.siteName' })}</label> <label>{intl.formatMessage({ id: 'shop.template.form.label.siteName' })}</label>
...@@ -171,6 +180,10 @@ const TemplateDetail: React.FC<TemplateDetailPropsType> = (props) => { ...@@ -171,6 +180,10 @@ const TemplateDetail: React.FC<TemplateDetailPropsType> = (props) => {
<label>{intl.formatMessage({ id: 'shop.template.form.label.shopName' })}</label> <label>{intl.formatMessage({ id: 'shop.template.form.label.shopName' })}</label>
<span>{detailInfo?.sourceShopName || detailInfo?.shopName}</span> <span>{detailInfo?.sourceShopName || detailInfo?.shopName}</span>
</div> </div>
<div className={styles.template_info_line}>
<label>{intl.formatMessage({ id: 'shop.template.form.label.templateDescribe' })}</label>
<span>{detailInfo?.templateDescribe}</span>
</div>
</div> </div>
</div> </div>
{ {
...@@ -185,7 +198,7 @@ const TemplateDetail: React.FC<TemplateDetailPropsType> = (props) => { ...@@ -185,7 +198,7 @@ const TemplateDetail: React.FC<TemplateDetailPropsType> = (props) => {
</div> </div>
</AuthButton> </AuthButton>
<AuthButton btnCode='ownMallTemplate.detail.renovation' > <AuthButton btnCode='ownMallTemplate.detail.renovation' >
<div className={cx(styles.btn, styles.fit)} onClick={() => handleLinkEdit()}> <div className={cx(styles.btn)} onClick={() => handleLinkEdit()}>
<LayoutOutlined /> <LayoutOutlined />
<label>{intl.formatMessage({ id: 'own.template.button.mall.edit' })}</label> <label>{intl.formatMessage({ id: 'own.template.button.mall.edit' })}</label>
</div> </div>
...@@ -193,7 +206,7 @@ const TemplateDetail: React.FC<TemplateDetailPropsType> = (props) => { ...@@ -193,7 +206,7 @@ const TemplateDetail: React.FC<TemplateDetailPropsType> = (props) => {
<AuthButton btnCode='ownMallTemplate.detail.categoryrenovation' > <AuthButton btnCode='ownMallTemplate.detail.categoryrenovation' >
{ {
MOBILE_ENVIROMENT.includes(detailInfo?.environment) && ( MOBILE_ENVIROMENT.includes(detailInfo?.environment) && (
<div className={cx(styles.btn, styles.fit)} onClick={() => handleCategoryJump()}> <div className={cx(styles.btn)} onClick={() => handleCategoryJump()}>
<LayoutOutlined /> <LayoutOutlined />
<label>{intl.formatMessage({ id: 'own.template.button.mall.category.edit' })}</label> <label>{intl.formatMessage({ id: 'own.template.button.mall.category.edit' })}</label>
</div> </div>
......
src/pages/shop/components/templateItem/index.less
View file @ 83d785d6
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
border-radius: 8px; border-radius: 8px;
overflow: hidden; overflow: hidden;
height: 100%; height: 100%;
padding-bottom: 24px; padding: 16px;
.img_box { .img_box {
position: relative; position: relative;
...@@ -12,9 +12,10 @@ ...@@ -12,9 +12,10 @@
height: 0; height: 0;
padding-bottom: 67%; padding-bottom: 67%;
overflow: hidden; overflow: hidden;
background-size: auto 100%; background-size: 100% auto;
background-position: center center; background-position: center center;
background-repeat: no-repeat; background-repeat: no-repeat;
border-radius: 4px;
&:hover { &:hover {
.img_box_mask { .img_box_mask {
...@@ -42,52 +43,67 @@ ...@@ -42,52 +43,67 @@
width: 240px; width: 240px;
height: 40px; height: 40px;
background: rgba(0, 0, 0, 0.85); background: rgba(0, 0, 0, 0.85);
color: #ffffff; color: #ffffff!important;
text-align: center; text-align: center;
line-height: 40px; line-height: 40px;
font-weight: 500; font-weight: 500;
cursor: pointer; cursor: pointer;
a {
color: #FFF;
}
&:hover { &:hover {
opacity: .9; opacity: .9;
} }
} }
} }
.type_tag {
position: absolute;
top: 0;
width: 72px;
height: 24px;
color: #ffffff;
text-align: center;
line-height: 24px;
font-size: 12px;
background: #4279DF;
border-radius: 8px 0px 8px 0px;
z-index: 3;
&.h5 {
background: #6554C0;
}
}
&>img { &>img {
// height: 100%; // height: 100%;
width: 100%; width: 100%;
} }
} }
.type_tag {
position: relative;
padding: 0 4px;
color: #4787F0;
line-height: 16px;
font-size: 12px;
font-weight: 400;
background: #ECF2FE;
border-radius: 2px;
z-index: 3;
&.app {
background: #FCF7E8;
color: #E0AB50;
}
&.applet {
background: #EBF9F6;
color: #00A98F;
}
&.h5 {
background: #F3E8F9;
color: #9963D8;
}
}
.template_info { .template_info {
padding: 0 24px;
.template_info_name { .template_info_name {
display: flex; display: flex;
align-items: center; align-items: center;
color: #303133; color: #252D37;
font-weight: bold; font-weight: 500;
line-height: 24px; line-height: 24px;
padding: 16px 0; padding-top: 16px;
padding-bottom: 8px;
font-size: 14px;
.tag { .tag {
padding: 0 8px; padding: 0 8px;
...@@ -104,7 +120,6 @@ ...@@ -104,7 +120,6 @@
.template_info_content { .template_info_content {
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
height: 52px;
&.goods { &.goods {
height: 32px; height: 32px;
...@@ -140,22 +155,23 @@ ...@@ -140,22 +155,23 @@
} }
.template_item_btn { .template_item_btn {
width: 88px; width: 80px;
height: 32px; height: 32px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background: rgba(250, 251, 252, 1); background: #F4F5F7;
border: 1px solid rgba(235, 236, 240, 1); border: 1px solid #F4F5F7;
cursor: pointer; cursor: pointer;
color: #606266; color: #252D37;
font-size: 12px; font-size: 12px;
// margin-top: auto;
margin-left: auto; margin-left: auto;
border-radius: 4px;
&.active { &.active {
background: #00B37A; background: #00A98F;
border: 1px solid #00B37A; border: 1px solid #00A98F;
color: #ffffff; color: #ffffff;
} }
......
src/pages/shop/components/templateItem/index.tsx
View file @ 83d785d6
...@@ -18,7 +18,7 @@ const TemplateItem: React.FC<TemplateItemPropsType> = (props) => { ...@@ -18,7 +18,7 @@ const TemplateItem: React.FC<TemplateItemPropsType> = (props) => {
name: intl.formatMessage({ id: 'shop.template.environment.status_0' }) name: intl.formatMessage({ id: 'shop.template.environment.status_0' })
}, },
1: { 1: {
name: "web" name: "PC"
}, },
2: { 2: {
name: "H5" name: "H5"
...@@ -31,6 +31,14 @@ const TemplateItem: React.FC<TemplateItemPropsType> = (props) => { ...@@ -31,6 +31,14 @@ const TemplateItem: React.FC<TemplateItemPropsType> = (props) => {
} }
} }
const STYLE_NAME = {
0: 'pc',
1: 'pc',
2: 'h5',
3: 'applet',
4: 'app',
}
return ( return (
<div className={styles.template_item}> <div className={styles.template_item}>
<div className={styles.img_box} style={{ backgroundImage: `url(${templateInfo.templatePicUrl})` }}> <div className={styles.img_box} style={{ backgroundImage: `url(${templateInfo.templatePicUrl})` }}>
...@@ -38,27 +46,19 @@ const TemplateItem: React.FC<TemplateItemPropsType> = (props) => { ...@@ -38,27 +46,19 @@ const TemplateItem: React.FC<TemplateItemPropsType> = (props) => {
<AuthButton btnCode='shopAbility.template.see' > <AuthButton btnCode='shopAbility.template.see' >
<Link to={`/memberCenter/shopAbility/template/detail?type=${type}&id=${templateInfo.id}`} className={styles.detail_btn}>{intl.formatMessage({ id: 'common.button.view.details' })}</Link> <Link to={`/memberCenter/shopAbility/template/detail?type=${type}&id=${templateInfo.id}`} className={styles.detail_btn}>{intl.formatMessage({ id: 'common.button.view.details' })}</Link>
</AuthButton> </AuthButton>
</div> </div>
<div className={cx(styles.type_tag, templateInfo.environment === 2 ? styles.h5 : '')}>{Environment_Status[templateInfo.environment].name}</div>
</div> </div>
<div className={styles.template_info}> <div className={styles.template_info}>
<div className={styles.template_info_name}>
<span>{templateInfo.templateName}</span>
{
templateInfo.isDefault && <div className={styles.tag}>{intl.formatMessage({ id: 'shop.template.tag.default' })}</div>
}
</div>
<div className={cx(styles.template_info_content, type === 'goods' ? styles.goods : '')}> <div className={cx(styles.template_info_content, type === 'goods' ? styles.goods : '')}>
<div className={styles.template_info_content_text_wrap}> <div className={styles.template_info_content_text_wrap}>
<div className={styles.template_info_content_text_line}> <div className={styles.template_info_name}>
<label>{intl.formatMessage({ id: 'shop.template.form.label.siteName' })}</label> <span>{templateInfo.templateName}</span>
<span>{templateInfo.siteName}</span>
</div> </div>
<div className={styles.template_info_content_text_line}> <div className={styles.template_info_content_text_line}>
<label>{intl.formatMessage({ id: 'shop.template.form.label.shopName' })}</label> <div className={cx(styles.type_tag, styles[STYLE_NAME[templateInfo.environment]])}>
<span>{templateInfo.shopName}</span> {Environment_Status[templateInfo.environment].name}
</div>
</div> </div>
</div> </div>
<div className={cx(styles.template_item_btn, templateInfo.use === 1 ? styles.active : '')}> <div className={cx(styles.template_item_btn, templateInfo.use === 1 ? styles.active : '')}>
......
src/pages/shop/shopTemplate/index.tsx
View file @ 83d785d6
...@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react' ...@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react'
import { Row, Col, message } from 'antd' import { Row, Col, message } from 'antd'
import { history, useIntl } from 'umi' import { history, useIntl } from 'umi'
import { PageHeaderWrapper } from '@ant-design/pro-layout' import { PageHeaderWrapper } from '@ant-design/pro-layout'
import TemplateItem from '../components/templateItem' import TemplateItem from '@/components/templateItem'
import { getTemplateWebPageTemplateWebFindAllShelfShopTemplate, GetTemplateWebPageTemplateWebFindAllShelfShopTemplateResponse } from '@/services/TemplateV2Api' import { getTemplateWebPageTemplateWebFindAllShelfShopTemplate, GetTemplateWebPageTemplateWebFindAllShelfShopTemplateResponse } from '@/services/TemplateV2Api'
import styles from './index.less' import styles from './index.less'
...@@ -31,11 +31,11 @@ const ShopTemplate: React.FC = () => { ...@@ -31,11 +31,11 @@ const ShopTemplate: React.FC = () => {
return ( return (
<PageHeaderWrapper> <PageHeaderWrapper>
<div className={styles.shop_center_template}> <div className={styles.shop_center_template}>
<Row gutter={24} className={styles.template_list}> <Row gutter={16} className={styles.template_list}>
{ {
templateList.map(item => ( templateList.map(item => (
<Col xxl={6} xl={8} lg={12} key={item.id} style={{ marginBottom: 16 }}> <Col xxl={6} xl={8} lg={12} key={item.id} style={{ marginBottom: 16 }}>
<TemplateItem templateInfo={item} type="shop" /> <TemplateItem templateInfo={item} type="shop" link='/memberCenter/shopAbility/template/detail' />
</Col> </Col>
)) ))
} }
......
src/pages/shop/templateDetail/index.less
View file @ 83d785d6
.template_detail { .template_detail {
height: 224px; background-color: #ffffff;
background-color: #ffffff; display: flex;
display: flex; border-radius: 8px;
border-radius: 8px; align-items: center;
align-items: center; padding: 16px;
.back_btn { .back_btn {
color: #909399; color: #909399;
margin-left: 27px; margin-left: 27px;
font-size: 14px; font-size: 14px;
margin-top: 40px; margin-top: 40px;
cursor: pointer; cursor: pointer;
align-self: flex-start; align-self: flex-start;
} }
.template_info_wrap { .template_info_wrap {
display: flex; display: flex;
margin-left: 36px; flex: 1;
flex: 1; align-items: center;
align-items: center;
.template_img_box {
.template_img_box { position: relative;
position: relative; width: 192x;
width: 250px; height: 128px;
height: 165px; border-radius: 8px;
border-radius: 8px 8px 0px 0px; overflow: hidden;
overflow: hidden; border: 1px solid #F5F6F7;
.type_tag { .type_tag {
position: absolute; position: absolute;
top: 0; top: 0;
width: 72px; width: 72px;
height: 24px; height: 24px;
color: #ffffff; color: #ffffff;
text-align: center; text-align: center;
line-height: 24px; line-height: 24px;
font-size: 12px; font-size: 12px;
background: #4279DF; background: #4279DF;
border-radius: 8px 0px 8px 0px; border-radius: 8px 0px 8px 0px;
z-index: 3; z-index: 3;
&.h5 { &.h5 {
background: #6554C0; background: #6554C0;
} }
} }
&>img { &>img {
height: 100%; height: 100%;
width: auto; width: auto;
display: block; display: block;
margin: 0 auto; margin: 0 auto;
} }
} }
.template_info { .template_info {
margin-left: 24px; margin-left: 24px;
.template_info_line { .template_info_line {
line-height: 22px; font-size: 12px;
font-weight: 400;
&:not(:last-child) {
margin-bottom: 8px; .tempalte_name {
} color: #252D37;
line-height: 24px;
&>label { font-size: 16px;
color: #909399; font-weight: 500;
}
}
.type_tag {
&>span { position: relative;
color: #303133; padding: 0 4px;
} color: #4787F0;
} line-height: 16px;
} font-size: 12px;
} font-weight: 400;
background: #ECF2FE;
.btn { border-radius: 2px;
margin-left: 24px; z-index: 3;
padding: 0 20px; display: inline-block;
min-width: 88px;
height: 40px; &.app {
background: rgba(250, 251, 252, 1); background: #FCF7E8;
border: 1px solid rgba(235, 236, 240, 1); color: #E0AB50;
color: #606266; }
cursor: pointer;
line-height: 38px;
text-align: center; &.applet {
background: #EBF9F6;
&>label { color: #00A98F;
margin-left: 5px; }
cursor: pointer;
} &.h5 {
background: #F3E8F9;
&.fit { color: #9963D8;
background: #909399; }
color: #ffffff; }
}
&:not(:last-child) {
&.use { margin-bottom: 8px;
background: #00B37A; }
color: #ffffff;
} &>label {
color: #91959B;
&:hover {
opacity: .8; }
}
&>span {
&:last-child { color: #252D37;
margin-right: 48px; }
} }
} }
} }
\ No newline at end of file
.btn {
margin-left: 16px;
padding: 0 16px;
min-width: 88px;
height: 32px;
background: #F4F5F7;
border: 1px solid #F4F5F7;
color: #606266;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
&>label {
margin-left: 5px;
cursor: pointer;
}
&.fit {
background: #909399;
color: #ffffff;
}
&.use {
background: #00A98F;
color: #ffffff;
}
&:hover {
opacity: .8;
}
}
}
src/pages/shop/templateDetail/index.tsx
View file @ 83d785d6
...@@ -5,11 +5,12 @@ import cx from 'classnames' ...@@ -5,11 +5,12 @@ import cx from 'classnames'
import { message, Checkbox } from 'antd' import { message, Checkbox } from 'antd'
import DetailPage from '@/components/DetailPage' import DetailPage from '@/components/DetailPage'
import UseModal from '../components/useModal' import UseModal from '../components/useModal'
// import { Environment_Status } from '@/constants' import { Environment_Status } from '@/constants'
import styles from './index.less' import styles from './index.less'
import AuthButton from '@/components/AuthButton' import AuthButton from '@/components/AuthButton'
import { getTemplateWebPageTemplateWebFindShopTemplateDetails, postTemplateWebPageTemplateWebOpenMro, postTemplateWebPageTemplateWebUseShopTemplate } from '@/services/TemplateV2Api' import { getTemplateWebPageTemplateWebFindShopTemplateDetails, postTemplateWebPageTemplateWebOpenMro, postTemplateWebPageTemplateWebUseShopTemplate } from '@/services/TemplateV2Api'
import { getManageShopOpenMro } from '@/services/ManageV2Api' import { getManageShopOpenMro } from '@/services/ManageV2Api'
import { CusteomImageBox } from '@/components/ImageBox'
interface TemplateDetailPropsType { interface TemplateDetailPropsType {
location: { location: {
...@@ -27,13 +28,7 @@ const TemplateDetail: React.FC<TemplateDetailPropsType> = (props) => { ...@@ -27,13 +28,7 @@ const TemplateDetail: React.FC<TemplateDetailPropsType> = (props) => {
const [confirmLoading, setConfirmLoading] = useState(false) const [confirmLoading, setConfirmLoading] = useState(false)
const [isMro, setIsMro] = useState<boolean>(false) const [isMro, setIsMro] = useState<boolean>(false)
const intl = useIntl() const intl = useIntl()
const Environment_Status = {
0: intl.formatMessage({ id: 'shop.template.environment.status_0' }),
1: "web",
2: "H5",
3: intl.formatMessage({ id: 'shop.template.environment.status_3' }),
4: "APP"
}
useEffect(() => { useEffect(() => {
fetchDetail() fetchDetail()
}, []) }, [])
...@@ -99,13 +94,21 @@ const TemplateDetail: React.FC<TemplateDetailPropsType> = (props) => { ...@@ -99,13 +94,21 @@ const TemplateDetail: React.FC<TemplateDetailPropsType> = (props) => {
} }
const onChangeMroSetting = (e) => { const onChangeMroSetting = (e) => {
postTemplateWebPageTemplateWebOpenMro({openMro: e.target.checked ? 1 : 0, templateId: detailInfo.id, type: 0}).then(({code}) => { postTemplateWebPageTemplateWebOpenMro({ openMro: e.target.checked ? 1 : 0, templateId: detailInfo.id, type: 0 }).then(({code}) => {
if(code === 1000) { if(code === 1000) {
fetchDetail() fetchDetail()
} }
}) })
} }
const STYLE_NAME = {
0: 'pc',
1: 'pc',
2: 'h5',
3: 'applet',
4: 'app',
}
return ( return (
<DetailPage <DetailPage
title={intl.formatMessage({ id: 'shop.template.detail.title' })} title={intl.formatMessage({ id: 'shop.template.detail.title' })}
...@@ -113,21 +116,21 @@ const TemplateDetail: React.FC<TemplateDetailPropsType> = (props) => { ...@@ -113,21 +116,21 @@ const TemplateDetail: React.FC<TemplateDetailPropsType> = (props) => {
<div className={styles.template_detail}> <div className={styles.template_detail}>
<div className={styles.template_info_wrap}> <div className={styles.template_info_wrap}>
<div className={styles.template_img_box}> <div className={styles.template_img_box}>
<div className={cx(styles.type_tag)}>{Environment_Status[detailInfo?.environment]}</div> <CusteomImageBox
<img src={detailInfo?.templatePicUrl} /> imgUrl={detailInfo?.templatePicUrl}
width={192}
height={128}
borderRadius={8}
/>
</div> </div>
<div className={styles.template_info}> <div className={styles.template_info}>
<div className={styles.template_info_line}> <div className={styles.template_info_line}>
<label>{intl.formatMessage({ id: 'shop.template.form.label.templateName' })}</label> <span className={styles.tempalte_name}>{detailInfo?.templateName}</span>
<span>{detailInfo?.templateName}</span>
</div>
<div className={styles.template_info_line}>
<label>{intl.formatMessage({ id: 'shop.template.form.label.environment' })}</label>
<span>{Environment_Status[detailInfo?.environment]}</span>
</div> </div>
<div className={styles.template_info_line}> <div className={styles.template_info_line}>
<label>{intl.formatMessage({ id: 'shop.template.form.label.templateDescribe' })}</label> <div className={cx(styles.type_tag, styles[STYLE_NAME[detailInfo?.environment]])}>
<span>{detailInfo?.templateDescribe}</span> {Environment_Status[detailInfo?.environment]?.name}
</div>
</div> </div>
<div className={styles.template_info_line}> <div className={styles.template_info_line}>
<label>{intl.formatMessage({ id: 'shop.template.form.label.siteName' })}</label> <label>{intl.formatMessage({ id: 'shop.template.form.label.siteName' })}</label>
...@@ -135,7 +138,11 @@ const TemplateDetail: React.FC<TemplateDetailPropsType> = (props) => { ...@@ -135,7 +138,11 @@ const TemplateDetail: React.FC<TemplateDetailPropsType> = (props) => {
</div> </div>
<div className={styles.template_info_line}> <div className={styles.template_info_line}>
<label>{intl.formatMessage({ id: 'shop.template.form.label.shopName' })}</label> <label>{intl.formatMessage({ id: 'shop.template.form.label.shopName' })}</label>
<span>{detailInfo?.shopName}</span> <span>{detailInfo?.sourceShopName || detailInfo?.shopName}</span>
</div>
<div className={styles.template_info_line}>
<label>{intl.formatMessage({ id: 'shop.template.form.label.templateDescribe' })}</label>
<span>{detailInfo?.templateDescribe}</span>
</div> </div>
</div> </div>
</div> </div>
...@@ -151,7 +158,7 @@ const TemplateDetail: React.FC<TemplateDetailPropsType> = (props) => { ...@@ -151,7 +158,7 @@ const TemplateDetail: React.FC<TemplateDetailPropsType> = (props) => {
</div> </div>
</AuthButton> </AuthButton>
<AuthButton btnCode='shopAbility.template.detail.detailInfo' > <AuthButton btnCode='shopAbility.template.detail.detailInfo' >
<div className={cx(styles.btn, styles.fit)} onClick={() => handleLinkEdit()}> <div className={cx(styles.btn)} onClick={() => handleLinkEdit()}>
<LayoutOutlined /> <LayoutOutlined />
<label>{intl.formatMessage({ id: 'shop.template.button.edit' })}</label> <label>{intl.formatMessage({ id: 'shop.template.button.edit' })}</label>
</div> </div>
......
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