Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
J
jinfa-platform
Project
Project
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
黄庭坚
jinfa-platform
Commits
83d785d6
Commit
83d785d6
authored
May 14, 2022
by
GuanHua
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
style: 店铺模板样调整
parent
a8cef2fd
Show whitespace changes
Inline
Side-by-side
Showing
15 changed files
with
579 additions
and
164 deletions
+579
-164
index.less
src/components/DetailPage/index.less
+2
-1
index.less
src/components/TemplateItem/index.less
+191
-0
index.tsx
src/components/TemplateItem/index.tsx
+59
-0
index.ts
src/constants/index.ts
+17
-7
index.tsx
src/pages/channel/channelTemplate/index.tsx
+3
-3
index.less
src/pages/channel/templateDetail/index.less
+55
-20
index.tsx
src/pages/channel/templateDetail/index.tsx
+25
-12
index.tsx
src/pages/ownMall/ownMallManager/ownMallTemplate/index.tsx
+3
-3
index.less
src/pages/ownMall/ownMallManager/templateDetail/index.less
+55
-20
index.tsx
src/pages/ownMall/ownMallManager/templateDetail/index.tsx
+25
-12
index.less
src/pages/shop/components/templateItem/index.less
+45
-29
index.tsx
src/pages/shop/components/templateItem/index.tsx
+14
-14
index.tsx
src/pages/shop/shopTemplate/index.tsx
+3
-3
index.less
src/pages/shop/templateDetail/index.less
+55
-20
index.tsx
src/pages/shop/templateDetail/index.tsx
+27
-20
No files found.
src/components/DetailPage/index.less
View file @
83d785d6
.common_detail_page {
margin: -24px;
min-height: calc(100vh - 112px);
.common_header {
display: flex;
...
...
@@ -30,7 +31,7 @@
}
.detail_page_contaner {
margin:
24
px;
margin:
16
px;
border-radius: 8px;
background-color: #ffffff;
}
...
...
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
{
getIntl
}
from
'umi'
import
{
getTopDomainByHost
,
getDefaultEnterprise
,
getChannelInfo
,
getIChannelInfo
}
from
'@/utils'
import
{
getInfoCenterUrl
,
...
...
@@ -8,6 +9,7 @@ import {
getTopDomain
,
}
from
'@/utils/getDomain'
export
const
NOT_CHANGE_VALUE
=
'hello, world'
const
intl
=
getIntl
()
// socket的链接地址, 默认会使用后端接口网关地址
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"
// 暂时将权限访问关闭
// export const isDev = false
export
const
Environment_Status
=
{
0
:
"所有"
,
1
:
"web"
,
2
:
"H5"
,
3
:
"小程序"
,
4
:
"APP"
0
:
{
name
:
intl
.
formatMessage
({
id
:
'shop.template.environment.status_0'
})
},
1
:
{
name
:
"PC"
},
2
:
{
name
:
"H5"
},
3
:
{
name
:
intl
.
formatMessage
({
id
:
'shop.template.environment.status_3'
})
},
4
:
{
name
:
"APP"
}
}
export
enum
FILTER_TYPE
{
/**
* 常用筛选
...
...
src/pages/channel/channelTemplate/index.tsx
View file @
83d785d6
...
...
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react'
import
{
Row
,
Col
,
message
}
from
'antd'
import
{
history
,
useIntl
}
from
'umi'
import
{
PageHeaderWrapper
}
from
'@ant-design/pro-layout'
import
TemplateItem
from
'
..
/components/templateItem'
import
TemplateItem
from
'
@
/components/templateItem'
import
styles
from
'./index.less'
import
{
getTemplateWebPageTemplateWebFindAllShelfChannelTemplate
,
GetTemplateWebPageTemplateWebFindAllShelfChannelTemplateResponse
}
from
'@/services/TemplateV2Api'
...
...
@@ -31,11 +31,11 @@ const ShopTemplate: React.FC = () => {
return
(
<
PageHeaderWrapper
>
<
div
className=
{
styles
.
shop_center_template
}
>
<
Row
gutter=
{
24
}
className=
{
styles
.
template_list
}
>
<
Row
gutter=
{
16
}
className=
{
styles
.
template_list
}
>
{
templateList
.
map
(
item
=>
(
<
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
>
))
}
...
...
src/pages/channel/templateDetail/index.less
View file @
83d785d6
.template_detail {
height: 224px;
background-color: #ffffff;
display: flex;
border-radius: 8px;
align-items: center;
padding: 16px;
.back_btn {
color: #909399;
...
...
@@ -16,16 +16,16 @@
.template_info_wrap {
display: flex;
margin-left: 36px;
flex: 1;
align-items: center;
.template_img_box {
position: relative;
width:
250p
x;
height: 1
65
px;
border-radius: 8px
8px 0px 0px
;
width:
192
x;
height: 1
28
px;
border-radius: 8px;
overflow: hidden;
border: 1px solid #F5F6F7;
.type_tag {
position: absolute;
...
...
@@ -57,35 +57,74 @@
margin-left: 24px;
.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) {
margin-bottom: 8px;
}
&>label {
color: #9
09399
;
color: #9
1959B
;
}
&>span {
color: #
303133
;
color: #
252D37
;
}
}
}
}
.btn {
margin-left:
24
px;
padding: 0
20
px;
margin-left:
16
px;
padding: 0
16
px;
min-width: 88px;
height:
40
px;
background:
rgba(250, 251, 252, 1)
;
border: 1px solid
rgba(235, 236, 240, 1)
;
height:
32
px;
background:
#F4F5F7
;
border: 1px solid
#F4F5F7
;
color: #606266;
cursor: pointer;
line-height: 38px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
&>label {
margin-left: 5px;
...
...
@@ -98,16 +137,12 @@
}
&.use {
background: #00
B37A
;
background: #00
A98F
;
color: #ffffff;
}
&:hover {
opacity: .8;
}
&:last-child {
margin-right: 48px;
}
}
}
src/pages/channel/templateDetail/index.tsx
View file @
83d785d6
...
...
@@ -11,6 +11,7 @@ import { getTemplateWebPageTemplateWebFindChannelTemplateDetails, postTemplateWe
import
styles
from
'./index.less'
import
AuthButton
from
'@/components/AuthButton'
import
{
getManageShopOpenMro
}
from
'@/services/ManageV2Api'
import
{
CusteomImageBox
}
from
'@/components/ImageBox'
interface
TemplateDetailPropsType
{
location
:
{
...
...
@@ -115,6 +116,14 @@ const TemplateDetail: React.FC<TemplateDetailPropsType> = (props) => {
})
}
const
STYLE_NAME
=
{
0
:
'pc'
,
1
:
'pc'
,
2
:
'h5'
,
3
:
'applet'
,
4
:
'app'
,
}
return
(
<
DetailPage
title=
{
intl
.
formatMessage
({
id
:
'shop.template.detail.title'
})
}
...
...
@@ -122,21 +131,21 @@ const TemplateDetail: React.FC<TemplateDetailPropsType> = (props) => {
<
div
className=
{
styles
.
template_detail
}
>
<
div
className=
{
styles
.
template_info_wrap
}
>
<
div
className=
{
styles
.
template_img_box
}
>
<
div
className=
{
cx
(
styles
.
type_tag
)
}
>
{
Environment_Status
[
detailInfo
?.
environment
]
}
</
div
>
<
img
src=
{
detailInfo
?.
templatePicUrl
}
/>
<
CusteomImageBox
imgUrl=
{
detailInfo
?.
templatePicUrl
}
width=
{
192
}
height=
{
128
}
borderRadius=
{
8
}
/>
</
div
>
<
div
className=
{
styles
.
template_info
}
>
<
div
className=
{
styles
.
template_info_line
}
>
<
label
>
{
intl
.
formatMessage
({
id
:
'shop.template.form.label.templateName'
})
}
</
label
>
<
span
>
{
detailInfo
?.
templateName
}
</
span
>
<
span
className=
{
styles
.
tempalte_name
}
>
{
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
className=
{
cx
(
styles
.
type_tag
,
styles
[
STYLE_NAME
[
detailInfo
?.
environment
]])
}
>
{
Environment_Status
[
detailInfo
?.
environment
]?.
name
}
</
div
>
<
div
className=
{
styles
.
template_info_line
}
>
<
label
>
{
intl
.
formatMessage
({
id
:
'shop.template.form.label.templateDescribe'
})
}
</
label
>
<
span
>
{
detailInfo
?.
templateDescribe
}
</
span
>
</
div
>
<
div
className=
{
styles
.
template_info_line
}
>
<
label
>
{
intl
.
formatMessage
({
id
:
'shop.template.form.label.siteName'
})
}
</
label
>
...
...
@@ -144,7 +153,11 @@ const TemplateDetail: React.FC<TemplateDetailPropsType> = (props) => {
</
div
>
<
div
className=
{
styles
.
template_info_line
}
>
<
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
>
...
...
@@ -161,7 +174,7 @@ const TemplateDetail: React.FC<TemplateDetailPropsType> = (props) => {
</
div
>
</
AuthButton
>
<
AuthButton
btnCode=
'channelTemplate.Detail.renovation'
>
<
div
className=
{
cx
(
styles
.
btn
,
styles
.
fit
)
}
onClick=
{
()
=>
handleLinkEdit
()
}
>
<
div
className=
{
cx
(
styles
.
btn
)
}
onClick=
{
()
=>
handleLinkEdit
()
}
>
<
LayoutOutlined
/>
<
label
>
{
intl
.
formatMessage
({
id
:
'channel.template.button.mall.edit'
})
}
</
label
>
</
div
>
...
...
@@ -169,7 +182,7 @@ const TemplateDetail: React.FC<TemplateDetailPropsType> = (props) => {
<
AuthButton
btnCode=
'channelTemplate.Detail.categoryrenovation'
>
{
detailInfo
?.
environment
===
4
&&
(
<
div
className=
{
cx
(
styles
.
btn
,
styles
.
fit
)
}
onClick=
{
handleJump
}
>
<
div
className=
{
cx
(
styles
.
btn
)
}
onClick=
{
handleJump
}
>
<
LayoutOutlined
/>
<
label
>
{
intl
.
formatMessage
({
id
:
'channel.template.button.mall.category.edit'
})
}
</
label
>
</
div
>
...
...
src/pages/ownMall/ownMallManager/ownMallTemplate/index.tsx
View file @
83d785d6
import
React
,
{
useEffect
,
useState
}
from
'react'
import
{
Row
,
Col
}
from
'antd'
import
{
PageHeaderWrapper
}
from
'@ant-design/pro-layout'
import
TemplateItem
from
'
..
/components/templateItem'
import
TemplateItem
from
'
@
/components/templateItem'
import
{
getTemplateWebPageTemplateWebFindAllSelfTemplate
,
GetTemplateWebPageTemplateWebFindAllSelfTemplateResponse
}
from
'@/services/TemplateV2Api'
import
styles
from
'./index.less'
...
...
@@ -25,11 +25,11 @@ const OwnMallTemplate: React.FC = () => {
return
(
<
PageHeaderWrapper
>
<
div
className=
{
styles
.
shop_center_template
}
>
<
Row
gutter=
{
24
}
className=
{
styles
.
template_list
}
>
<
Row
gutter=
{
16
}
className=
{
styles
.
template_list
}
>
{
templateList
.
map
(
item
=>
(
<
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
>
))
}
...
...
src/pages/ownMall/ownMallManager/templateDetail/index.less
View file @
83d785d6
.template_detail {
height: 224px;
background-color: #ffffff;
display: flex;
border-radius: 8px;
align-items: center;
padding: 16px;
.back_btn {
color: #909399;
...
...
@@ -16,16 +16,16 @@
.template_info_wrap {
display: flex;
margin-left: 36px;
flex: 1;
align-items: center;
.template_img_box {
position: relative;
width:
250px;
height: 1
65px;
border-radius: 8px
8px 0px 0px;
width:
192x;
height: 1
28px;
border-radius: 8px
;
overflow: hidden;
border: 1px solid #F5F6F7;
.type_tag {
position: absolute;
...
...
@@ -57,35 +57,74 @@
margin-left: 24px;
.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) {
margin-bottom: 8px;
}
&>label {
color: #9
09399;
color: #9
1959B;
}
&>span {
color: #
303133;
color: #
252D37;
}
}
}
}
.btn {
margin-left:
24px;
padding: 0
20px;
margin-left:
16px;
padding: 0
16px;
min-width: 88px;
height:
40px;
background:
rgba(250, 251, 252, 1);
border: 1px solid
rgba(235, 236, 240, 1);
height:
32px;
background:
#F4F5F7;
border: 1px solid
#F4F5F7;
color: #606266;
cursor: pointer;
line-height: 38px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
&>label {
margin-left: 5px;
...
...
@@ -98,16 +137,12 @@
}
&.use {
background: #00
B37A;
background: #00
A98F;
color: #ffffff;
}
&:hover {
opacity: .8;
}
&:last-child {
margin-right: 48px;
}
}
}
src/pages/ownMall/ownMallManager/templateDetail/index.tsx
View file @
83d785d6
...
...
@@ -14,6 +14,7 @@ import { postManageWebShopWebAll, PostManageWebShopWebAllResponse } from '@/serv
import
{
getAuth
}
from
'@/utils/auth'
import
{
GlobalConfig
}
from
'@/global/config'
import
{
CusteomImageBox
}
from
'@/components/ImageBox'
interface
TemplateDetailPropsType
{
location
:
{
...
...
@@ -133,13 +134,21 @@ const TemplateDetail: React.FC<TemplateDetailPropsType> = (props) => {
}
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) {
fetchDetail()
}
})
}
const STYLE_NAME = {
0: 'pc',
1: 'pc',
2: 'h5',
3: 'applet',
4: 'app',
}
return (
<DetailPage
title={intl.formatMessage({ id: 'shop.template.detail.title' })}
...
...
@@ -147,21 +156,21 @@ const TemplateDetail: React.FC<TemplateDetailPropsType> = (props) => {
<div className={styles.template_detail}>
<div className={styles.template_info_wrap}>
<div className={styles.template_img_box}>
<div className={cx(styles.type_tag)}>{Environment_Status[detailInfo?.environment]}</div>
<img src={detailInfo?.templatePicUrl} />
<CusteomImageBox
imgUrl={detailInfo?.templatePicUrl}
width={192}
height={128}
borderRadius={8}
/>
</div>
<div className={styles.template_info}>
<div className={styles.template_info_line}>
<label>{intl.formatMessage({ id: 'shop.template.form.label.templateName' })}</label>
<span>{detailInfo?.templateName}</span>
<span className={styles.tempalte_name}>{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 className={cx(styles.type_tag, styles[STYLE_NAME[detailInfo?.environment]])}
>
{Environment_Status[detailInfo?.environment]?.name}
</div>
<div className={styles.template_info_line}>
<label>{intl.formatMessage({ id: 'shop.template.form.label.templateDescribe' })}</label>
<span>{detailInfo?.templateDescribe}</span>
</div>
<div className={styles.template_info_line}>
<label>{intl.formatMessage({ id: 'shop.template.form.label.siteName' })}</label>
...
...
@@ -171,6 +180,10 @@ const TemplateDetail: React.FC<TemplateDetailPropsType> = (props) => {
<label>{intl.formatMessage({ id: 'shop.template.form.label.shopName' })}</label>
<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>
{
...
...
@@ -185,7 +198,7 @@ const TemplateDetail: React.FC<TemplateDetailPropsType> = (props) => {
</div>
</AuthButton>
<AuthButton btnCode='ownMallTemplate.detail.renovation' >
<div className={cx(styles.btn
, styles.fit
)} onClick={() => handleLinkEdit()}>
<div className={cx(styles.btn)} onClick={() => handleLinkEdit()}>
<LayoutOutlined />
<label>{intl.formatMessage({ id: 'own.template.button.mall.edit' })}</label>
</div>
...
...
@@ -193,7 +206,7 @@ const TemplateDetail: React.FC<TemplateDetailPropsType> = (props) => {
<AuthButton btnCode='ownMallTemplate.detail.categoryrenovation' >
{
MOBILE_ENVIROMENT.includes(detailInfo?.environment) && (
<div className={cx(styles.btn
, styles.fit
)} onClick={() => handleCategoryJump()}>
<div className={cx(styles.btn)} onClick={() => handleCategoryJump()}>
<LayoutOutlined />
<label>{intl.formatMessage({ id: 'own.template.button.mall.category.edit' })}</label>
</div>
...
...
src/pages/shop/components/templateItem/index.less
View file @
83d785d6
...
...
@@ -4,7 +4,7 @@
border-radius: 8px;
overflow: hidden;
height: 100%;
padding
-bottom: 24
px;
padding
: 16
px;
.img_box {
position: relative;
...
...
@@ -12,9 +12,10 @@
height: 0;
padding-bottom: 67%;
overflow: hidden;
background-size:
auto 100%
;
background-size:
100% auto
;
background-position: center center;
background-repeat: no-repeat;
border-radius: 4px;
&:hover {
.img_box_mask {
...
...
@@ -42,52 +43,67 @@
width: 240px;
height: 40px;
background: rgba(0, 0, 0, 0.85);
color: #ffffff;
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: absolute;
top: 0;
width: 72px;
height: 24px;
color: #ffffff;
text-align: center;
line-height: 24px;
position: relative;
padding: 0 4px;
color: #4787F0;
line-height: 16px;
font-size: 12px;
background: #4279DF;
border-radius: 8px 0px 8px 0px;
font-weight: 400;
background: #ECF2FE;
border-radius: 2px;
z-index: 3;
&.h5 {
background: #6554C0;
&.app {
background: #FCF7E8;
color: #E0AB50;
}
&.applet {
background: #EBF9F6;
color: #00A98F;
}
&
>img
{
// height: 100%
;
width: 100%
;
&
.h5
{
background: #F3E8F9
;
color: #9963D8
;
}
}
.template_info {
padding: 0 24px;
.template_info_name {
display: flex;
align-items: center;
color: #
303133
;
font-weight:
bold
;
color: #
252D37
;
font-weight:
500
;
line-height: 24px;
padding: 16px 0;
padding-top: 16px;
padding-bottom: 8px;
font-size: 14px;
.tag {
padding: 0 8px;
...
...
@@ -104,7 +120,6 @@
.template_info_content {
display: flex;
align-items: flex-end;
height: 52px;
&.goods {
height: 32px;
...
...
@@ -140,22 +155,23 @@
}
.template_item_btn {
width: 8
8
px;
width: 8
0
px;
height: 32px;
display: flex;
justify-content: center;
align-items: center;
background:
rgba(250, 251, 252, 1)
;
border: 1px solid
rgba(235, 236, 240, 1)
;
background:
#F4F5F7
;
border: 1px solid
#F4F5F7
;
cursor: pointer;
color: #
606266
;
color: #
252D37
;
font-size: 12px;
// margin-top: auto;
margin-left: auto;
border-radius: 4px;
&.active {
background: #00
B37A
;
border: 1px solid #00
B37A
;
background: #00
A98F
;
border: 1px solid #00
A98F
;
color: #ffffff;
}
...
...
src/pages/shop/components/templateItem/index.tsx
View file @
83d785d6
...
...
@@ -18,7 +18,7 @@ const TemplateItem: React.FC<TemplateItemPropsType> = (props) => {
name
:
intl
.
formatMessage
({
id
:
'shop.template.environment.status_0'
})
},
1
:
{
name
:
"
web
"
name
:
"
PC
"
},
2
:
{
name
:
"H5"
...
...
@@ -31,6 +31,14 @@ const TemplateItem: React.FC<TemplateItemPropsType> = (props) => {
}
}
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})`
}
}
>
...
...
@@ -38,27 +46,19 @@ const TemplateItem: React.FC<TemplateItemPropsType> = (props) => {
<
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
>
</
AuthButton
>
</
div
>
<
div
className=
{
cx
(
styles
.
type_tag
,
templateInfo
.
environment
===
2
?
styles
.
h5
:
''
)
}
>
{
Environment_Status
[
templateInfo
.
environment
].
name
}
</
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
>
{
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=
{
styles
.
template_info_content_text_wrap
}
>
<
div
className=
{
styles
.
template_info_content_text_line
}
>
<
label
>
{
intl
.
formatMessage
({
id
:
'shop.template.form.label.siteName'
})
}
</
label
>
<
span
>
{
templateInfo
.
siteName
}
</
span
>
<
div
className=
{
cx
(
styles
.
type_tag
,
styles
[
STYLE_NAME
[
templateInfo
.
environment
]])
}
>
{
Environment_Status
[
templateInfo
.
environment
].
name
}
</
div
>
<
div
className=
{
styles
.
template_info_content_text_line
}
>
<
label
>
{
intl
.
formatMessage
({
id
:
'shop.template.form.label.shopName'
})
}
</
label
>
<
span
>
{
templateInfo
.
shopName
}
</
span
>
</
div
>
</
div
>
<
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'
import
{
Row
,
Col
,
message
}
from
'antd'
import
{
history
,
useIntl
}
from
'umi'
import
{
PageHeaderWrapper
}
from
'@ant-design/pro-layout'
import
TemplateItem
from
'
..
/components/templateItem'
import
TemplateItem
from
'
@
/components/templateItem'
import
{
getTemplateWebPageTemplateWebFindAllShelfShopTemplate
,
GetTemplateWebPageTemplateWebFindAllShelfShopTemplateResponse
}
from
'@/services/TemplateV2Api'
import
styles
from
'./index.less'
...
...
@@ -31,11 +31,11 @@ const ShopTemplate: React.FC = () => {
return
(
<
PageHeaderWrapper
>
<
div
className=
{
styles
.
shop_center_template
}
>
<
Row
gutter=
{
24
}
className=
{
styles
.
template_list
}
>
<
Row
gutter=
{
16
}
className=
{
styles
.
template_list
}
>
{
templateList
.
map
(
item
=>
(
<
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
>
))
}
...
...
src/pages/shop/templateDetail/index.less
View file @
83d785d6
.template_detail {
height: 224px;
background-color: #ffffff;
display: flex;
border-radius: 8px;
align-items: center;
padding: 16px;
.back_btn {
color: #909399;
...
...
@@ -16,16 +16,16 @@
.template_info_wrap {
display: flex;
margin-left: 36px;
flex: 1;
align-items: center;
.template_img_box {
position: relative;
width:
250px;
height: 1
65px;
border-radius: 8px
8px 0px 0px;
width:
192x;
height: 1
28px;
border-radius: 8px
;
overflow: hidden;
border: 1px solid #F5F6F7;
.type_tag {
position: absolute;
...
...
@@ -57,35 +57,74 @@
margin-left: 24px;
.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) {
margin-bottom: 8px;
}
&>label {
color: #9
09399;
color: #9
1959B;
}
&>span {
color: #
303133;
color: #
252D37;
}
}
}
}
.btn {
margin-left:
24px;
padding: 0
20px;
margin-left:
16px;
padding: 0
16px;
min-width: 88px;
height:
40px;
background:
rgba(250, 251, 252, 1);
border: 1px solid
rgba(235, 236, 240, 1);
height:
32px;
background:
#F4F5F7;
border: 1px solid
#F4F5F7;
color: #606266;
cursor: pointer;
line-height: 38px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
&>label {
margin-left: 5px;
...
...
@@ -98,16 +137,12 @@
}
&.use {
background: #00
B37A;
background: #00
A98F;
color: #ffffff;
}
&:hover {
opacity: .8;
}
&:last-child {
margin-right: 48px;
}
}
}
src/pages/shop/templateDetail/index.tsx
View file @
83d785d6
...
...
@@ -5,11 +5,12 @@ import cx from 'classnames'
import
{
message
,
Checkbox
}
from
'antd'
import
DetailPage
from
'@/components/DetailPage'
import
UseModal
from
'../components/useModal'
//
import { Environment_Status } from '@/constants'
import
{
Environment_Status
}
from
'@/constants'
import
styles
from
'./index.less'
import
AuthButton
from
'@/components/AuthButton'
import
{
getTemplateWebPageTemplateWebFindShopTemplateDetails
,
postTemplateWebPageTemplateWebOpenMro
,
postTemplateWebPageTemplateWebUseShopTemplate
}
from
'@/services/TemplateV2Api'
import
{
getManageShopOpenMro
}
from
'@/services/ManageV2Api'
import
{
CusteomImageBox
}
from
'@/components/ImageBox'
interface
TemplateDetailPropsType
{
location
:
{
...
...
@@ -27,13 +28,7 @@ const TemplateDetail: React.FC<TemplateDetailPropsType> = (props) => {
const
[
confirmLoading
,
setConfirmLoading
]
=
useState
(
false
)
const
[
isMro
,
setIsMro
]
=
useState
<
boolean
>
(
false
)
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
(()
=>
{
fetchDetail
()
},
[])
...
...
@@ -99,13 +94,21 @@ const TemplateDetail: React.FC<TemplateDetailPropsType> = (props) => {
}
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) {
fetchDetail()
}
})
}
const STYLE_NAME = {
0: 'pc',
1: 'pc',
2: 'h5',
3: 'applet',
4: 'app',
}
return (
<DetailPage
title={intl.formatMessage({ id: 'shop.template.detail.title' })}
...
...
@@ -113,21 +116,21 @@ const TemplateDetail: React.FC<TemplateDetailPropsType> = (props) => {
<div className={styles.template_detail}>
<div className={styles.template_info_wrap}>
<div className={styles.template_img_box}>
<div className={cx(styles.type_tag)}>{Environment_Status[detailInfo?.environment]}</div>
<img src={detailInfo?.templatePicUrl} />
<CusteomImageBox
imgUrl={detailInfo?.templatePicUrl}
width={192}
height={128}
borderRadius={8}
/>
</div>
<div className={styles.template_info}>
<div className={styles.template_info_line}>
<label>{intl.formatMessage({ id: 'shop.template.form.label.templateName' })}</label>
<span>{detailInfo?.templateName}</span>
<span className={styles.tempalte_name}>{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 className={cx(styles.type_tag, styles[STYLE_NAME[detailInfo?.environment]])}
>
{Environment_Status[detailInfo?.environment]?.name}
</div>
<div className={styles.template_info_line}>
<label>{intl.formatMessage({ id: 'shop.template.form.label.templateDescribe' })}</label>
<span>{detailInfo?.templateDescribe}</span>
</div>
<div className={styles.template_info_line}>
<label>{intl.formatMessage({ id: 'shop.template.form.label.siteName' })}</label>
...
...
@@ -135,7 +138,11 @@ const TemplateDetail: React.FC<TemplateDetailPropsType> = (props) => {
</div>
<div className={styles.template_info_line}>
<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>
...
...
@@ -151,7 +158,7 @@ const TemplateDetail: React.FC<TemplateDetailPropsType> = (props) => {
</div>
</AuthButton>
<AuthButton btnCode='shopAbility.template.detail.detailInfo' >
<div className={cx(styles.btn
, styles.fit
)} onClick={() => handleLinkEdit()}>
<div className={cx(styles.btn)} onClick={() => handleLinkEdit()}>
<LayoutOutlined />
<label>{intl.formatMessage({ id: 'shop.template.button.edit' })}</label>
</div>
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment