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 {
margin: -24px;
min-height: calc(100vh - 112px);
.common_header {
display: flex;
......@@ -30,8 +31,8 @@
}
.detail_page_contaner {
margin: 24px;
margin: 16px;
border-radius: 8px;
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 { 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: 250px;
height: 165px;
border-radius: 8px 8px 0px 0px;
width: 192x;
height: 128px;
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: #909399;
color: #91959B;
}
&>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: #00B37A;
background: #00A98F;
color: #ffffff;
}
&:hover {
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
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>
</div>
<div className={styles.template_info_line}>
<label>{intl.formatMessage({ id: 'shop.template.form.label.environment' })}</label>
<span>{Environment_Status[detailInfo?.environment]}</span>
<span className={styles.tempalte_name}>{detailInfo?.templateName}</span>
</div>
<div className={styles.template_info_line}>
<label>{intl.formatMessage({ id: 'shop.template.form.label.templateDescribe' })}</label>
<span>{detailInfo?.templateDescribe}</span>
<div className={cx(styles.type_tag, styles[STYLE_NAME[detailInfo?.environment]])}>
{Environment_Status[detailInfo?.environment]?.name}
</div>
</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;
.back_btn {
color: #909399;
margin-left: 27px;
font-size: 14px;
margin-top: 40px;
cursor: pointer;
align-self: flex-start;
}
.template_info_wrap {
display: flex;
margin-left: 36px;
flex: 1;
align-items: center;
.template_img_box {
position: relative;
width: 250px;
height: 165px;
border-radius: 8px 8px 0px 0px;
overflow: hidden;
.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 {
height: 100%;
width: auto;
display: block;
margin: 0 auto;
}
}
.template_info {
margin-left: 24px;
.template_info_line {
line-height: 22px;
&:not(:last-child) {
margin-bottom: 8px;
}
&>label {
color: #909399;
}
&>span {
color: #303133;
}
}
}
}
.btn {
margin-left: 24px;
padding: 0 20px;
min-width: 88px;
height: 40px;
background: rgba(250, 251, 252, 1);
border: 1px solid rgba(235, 236, 240, 1);
color: #606266;
cursor: pointer;
line-height: 38px;
text-align: center;
&>label {
margin-left: 5px;
cursor: pointer;
}
&.fit {
background: #909399;
color: #ffffff;
}
&.use {
background: #00B37A;
color: #ffffff;
}
&:hover {
opacity: .8;
}
&:last-child {
margin-right: 48px;
}
}
}
\ No newline at end of file
.template_detail {
background-color: #ffffff;
display: flex;
border-radius: 8px;
align-items: center;
padding: 16px;
.back_btn {
color: #909399;
margin-left: 27px;
font-size: 14px;
margin-top: 40px;
cursor: pointer;
align-self: flex-start;
}
.template_info_wrap {
display: flex;
flex: 1;
align-items: center;
.template_img_box {
position: relative;
width: 192x;
height: 128px;
border-radius: 8px;
overflow: hidden;
border: 1px solid #F5F6F7;
.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 {
height: 100%;
width: auto;
display: block;
margin: 0 auto;
}
}
.template_info {
margin-left: 24px;
.template_info_line {
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: #91959B;
}
&>span {
color: #252D37;
}
}
}
}
.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
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>
</div>
<div className={styles.template_info_line}>
<label>{intl.formatMessage({ id: 'shop.template.form.label.environment' })}</label>
<span>{Environment_Status[detailInfo?.environment]}</span>
<span className={styles.tempalte_name}>{detailInfo?.templateName}</span>
</div>
<div className={styles.template_info_line}>
<label>{intl.formatMessage({ id: 'shop.template.form.label.templateDescribe' })}</label>
<span>{detailInfo?.templateDescribe}</span>
<div className={cx(styles.type_tag, styles[STYLE_NAME[detailInfo?.environment]])}>
{Environment_Status[detailInfo?.environment]?.name}
</div>
</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: 24px;
padding: 16px;
.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;
}
}
}
.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 {
// 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 {
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: 88px;
width: 80px;
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: #00B37A;
border: 1px solid #00B37A;
background: #00A98F;
border: 1px solid #00A98F;
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={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={styles.template_info_name}>
<span>{templateInfo.templateName}</span>
</div>
<div className={styles.template_info_content_text_line}>
<label>{intl.formatMessage({ id: 'shop.template.form.label.shopName' })}</label>
<span>{templateInfo.shopName}</span>
<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 : '')}>
......
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;
.back_btn {
color: #909399;
margin-left: 27px;
font-size: 14px;
margin-top: 40px;
cursor: pointer;
align-self: flex-start;
}
.template_info_wrap {
display: flex;
margin-left: 36px;
flex: 1;
align-items: center;
.template_img_box {
position: relative;
width: 250px;
height: 165px;
border-radius: 8px 8px 0px 0px;
overflow: hidden;
.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 {
height: 100%;
width: auto;
display: block;
margin: 0 auto;
}
}
.template_info {
margin-left: 24px;
.template_info_line {
line-height: 22px;
&:not(:last-child) {
margin-bottom: 8px;
}
&>label {
color: #909399;
}
&>span {
color: #303133;
}
}
}
}
.btn {
margin-left: 24px;
padding: 0 20px;
min-width: 88px;
height: 40px;
background: rgba(250, 251, 252, 1);
border: 1px solid rgba(235, 236, 240, 1);
color: #606266;
cursor: pointer;
line-height: 38px;
text-align: center;
&>label {
margin-left: 5px;
cursor: pointer;
}
&.fit {
background: #909399;
color: #ffffff;
}
&.use {
background: #00B37A;
color: #ffffff;
}
&:hover {
opacity: .8;
}
&:last-child {
margin-right: 48px;
}
}
}
\ No newline at end of file
.template_detail {
background-color: #ffffff;
display: flex;
border-radius: 8px;
align-items: center;
padding: 16px;
.back_btn {
color: #909399;
margin-left: 27px;
font-size: 14px;
margin-top: 40px;
cursor: pointer;
align-self: flex-start;
}
.template_info_wrap {
display: flex;
flex: 1;
align-items: center;
.template_img_box {
position: relative;
width: 192x;
height: 128px;
border-radius: 8px;
overflow: hidden;
border: 1px solid #F5F6F7;
.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 {
height: 100%;
width: auto;
display: block;
margin: 0 auto;
}
}
.template_info {
margin-left: 24px;
.template_info_line {
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: #91959B;
}
&>span {
color: #252D37;
}
}
}
}
.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'
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>
</div>
<div className={styles.template_info_line}>
<label>{intl.formatMessage({ id: 'shop.template.form.label.environment' })}</label>
<span>{Environment_Status[detailInfo?.environment]}</span>
<span className={styles.tempalte_name}>{detailInfo?.templateName}</span>
</div>
<div className={styles.template_info_line}>
<label>{intl.formatMessage({ id: 'shop.template.form.label.templateDescribe' })}</label>
<span>{detailInfo?.templateDescribe}</span>
<div className={cx(styles.type_tag, styles[STYLE_NAME[detailInfo?.environment]])}>
{Environment_Status[detailInfo?.environment]?.name}
</div>
</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>
......
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