Skip to content

J
jinfa-admin
Commit 5e826459 authored by GuanHua's avatar GuanHua
Browse files
Options

feat:对接商城模板接口和店铺模板列表接口

parents 4f7cb543 53199f9e
Hide whitespace changes
Inline Side-by-side
Showing with 282 additions and 165 deletions
config/routes/index.ts
View file @ 5e826459
......@@ -11,13 +11,17 @@
import pageCustomized from './pageCustomized'
import logisticsRoutes from './logisticsRoutes'
import memberAbility from './memberAbility'
const routeList = [pageCustomized,memberAbility]
const routeList = [pageCustomized, memberAbility]
const router = [
{
path: '/login',
component: '@/pages/user/login',
},
{
path: '/mall/template/edit',
component: '@/pages/pageCustomized/mallEdit',
},
{
path: '/',
component: '@/layouts/index',
routes: [
......
config/routes/memberAbility.ts
View file @ 5e826459
......@@ -35,16 +35,28 @@ const memberAbility =
component: '@/pages/member/memberPrSubmit/auditPrSubmit',
},
{
path: '/memberAbility/manage/memberPr',
name: 'memberPr',
component: '@/pages/member/memberPr/index',
path: '/memberAbility/manage/memberPr1',
name: 'memberPr1',
component: '@/pages/member/memberPr1/index',
},
{
path: '/memberAbility/manage/auditPr',
name: 'memberPr',
path: '/memberAbility/manage/auditPr1',
name: 'auditPr1',
hideInMenu: true,
hidePageHeader: true,
component: '@/pages/member/memberPr/auditPr',
component: '@/pages/member/memberPr1/auditPr1',
},
{
path: '/memberAbility/manage/memberPr2',
name: 'memberPr2',
component: '@/pages/member/memberPr2/index',
},
{
path: '/memberAbility/manage/auditPr2',
name: 'auditPr2',
hideInMenu: true,
hidePageHeader: true,
component: '@/pages/member/memberPr2/auditPr2',
},
{
path: '/memberAbility/manage/memberPrConfirm',
......
package.json
View file @ 5e826459
{
"name": "god-template",
"name": "lingxi-business-system",
"version": "1.0.4",
"private": true,
"scripts": {
......
src/pages/pageCustomized/components/templateItem/index.tsx
View file @ 5e826459
......@@ -13,17 +13,32 @@ interface TemplateItemPropsType {
const TemplateItem: React.FC<TemplateItemPropsType> = (props) => {
const { templateInfo, type } = props
const Environment_Status = {
0: {
name: "所有"
},
1: {
name: "PC "
},
2: {
name: "H5 "
},
3: {
name: "APP "
}
}
return (
<div className={styles.template_item}>
<div className={styles.img_box} style={{ backgroundImage: `url(${default_img})` }}>
<div className={styles.img_box_mask}>
<Link to={`/pageCustomized/template/detail?type=${type}`} className={styles.detail_btn}>查看详情</Link>
<Link to={`/pageCustomized/template/detail?type=${type}&id=${templateInfo.id}`} className={styles.detail_btn}>查看详情</Link>
</div>
<div className={cx(styles.type_tag, templateInfo.platform === 'H5' ? styles.h5 : '')}>{templateInfo.platform}</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.name}</span>
<span>{templateInfo.templateName}</span>
{
templateInfo.isDefault && <div className={styles.tag}>默认模板</div>
}
......@@ -33,20 +48,20 @@ const TemplateItem: React.FC<TemplateItemPropsType> = (props) => {
<div className={styles.template_info_content_text_wrap}>
<div className={styles.template_info_content_text_line}>
<label>使用站点：</label>
<span>{templateInfo.station}</span>
<span>{templateInfo.siteName}</span>
</div>
{
type !== 'goods' && (
<div className={styles.template_info_content_text_line}>
<label>使用商城：</label>
<span>{templateInfo.useShopCenter}</span>
<span>{templateInfo.shopName}</span>
</div>
)
}
</div>
<div className={cx(styles.template_item_btn, templateInfo.isUse ? styles.active : '')}>
<div className={cx(styles.template_item_btn, templateInfo.shelf === 1 ? styles.active : '')}>
<PlayCircleOutlined />
<label>{templateInfo.isUse ? '启用中' : '启用'}</label>
<label>{templateInfo.shelf === 1 ? '启用中' : '启用'}</label>
</div>
</div>
</div>
......
src/pages/pageCustomized/mallEdit/defaultData.ts
View file @ 5e826459
......@@ -16,7 +16,15 @@ export default {
"2": {
"componentName": "Advert",
"props": {
"type": "top"
"type": "top",
"linkdisable": true,
"advertList": [
{
id: 1,
picUrl: 'https://img.alicdn.com/tps/i4/TB1ICgYL.H1gK0jSZSySuttlpXa.jpg',
link: 'https://www.baidu.com'
}
]
},
},
"3": {
......@@ -31,7 +39,20 @@ export default {
"componentName": "Advert",
"props": {
"type": "banner",
"hasQuickNav": true
"hasQuickNav": true,
"linkdisable": true,
"advertList": [
{
id: 1,
picUrl: 'https://img.alicdn.com/imgextra/i4/81/O1CN01VT5ViO1CT8h4sY7qc_!!81-0-luban.jpg_q100.jpg_.webp',
link: 'https://www.baidu.com'
},
{
id: 2,
picUrl: 'https://img.alicdn.com/tps/i4/TB1ICgYL.H1gK0jSZSySuttlpXa.jpg',
link: 'https://www.baidu.com'
}
]
}
},
"7": {
......
src/pages/pageCustomized/mallEdit/index.less
View file @ 5e826459
......@@ -5,6 +5,7 @@
display: flex;
flex-direction: column;
box-shadow: 2px 0 4px 0 rgba(174, 174, 174, 0.50);
transition: all .3s;
}
.content {
......@@ -21,4 +22,19 @@
height: calc(@content-height + 50px);
overflow: hidden;
}
.loading_wrap {
width: 100%;
height: 100vh;
justify-content: center;
flex-direction: column;
display: flex;
align-items: center;
.loading_text {
margin-top: 16px;
font-size: 16px;
font-weight: bold;
}
}
\ No newline at end of file
src/pages/pageCustomized/mallEdit/index.tsx
View file @ 5e826459
import React, { useEffect } from 'react'
import React, { useEffect, useState } from 'react'
import { LegoProvider } from 'lingxi-editor-core'
import ToolBar from '../components/toolBar'
import DesignPanel from '../components/DesignPanel'
import SettingPanel from '../settingsPanel'
import config from '../configs'
import initData from './defaultData'
import Loading from './loading'
import { PublicApi } from '@/services/api'
import styles from './index.less'
const MallEdit: React.FC = () => {
interface MallEditPropsType {
location: {
query: {
id: number;
}
}
}
const MallEdit: React.FC<MallEditPropsType> = (props) => {
const { query: { id } } = props.location
const [loading, setLoading] = useState<boolean>(true)
useEffect(() => {
let body = document.getElementsByTagName('body')[0];
body.className = `theme-mall-science`;
setTimeout(() => {
setLoading(false)
}, 2000);
fetchTmeplateInfo()
}, [])
return (
const fetchTmeplateInfo = () => {
//@ts-ignore
PublicApi.getTemplatePlatformFindMallHome({ templateId: id }).then(res => {
})
}
return !loading ? (
<LegoProvider initState={{ componentConfigs: initData }} config={config}>
<div className={styles['wrapper']}>
<ToolBar />
......@@ -27,7 +50,7 @@ const MallEdit: React.FC = () => {
</div>
<SettingPanel />
</LegoProvider>
)
) : <Loading />
}
export default MallEdit
\ No newline at end of file
src/pages/pageCustomized/mallEdit/loading.tsx 0 → 100644
View file @ 5e826459
import React from 'react'
import { Spin } from 'antd'
import styles from './index.less'
const Loading: React.FC = () => {
return (
<div className={styles.loading_wrap}>
<Spin size="large" />
<p className={styles.loading_text}>正在加载页面数据...</p>
</div>
)
}
export default Loading
src/pages/pageCustomized/settingsPanel/propsSettings/index.tsx
View file @ 5e826459
......@@ -255,7 +255,7 @@ const PropsSettings: React.FC<PropsSettingsPropsType> = (props) => {
return (
<Drawer
maskClosable={false}
// maskClosable={false}
title={drawerTitle}
placement="right"
onClose={onClose}
......
src/pages/pageCustomized/shopCenterTemplate/index.tsx
View file @ 5e826459
import React from 'react'
import React, { useState, useEffect } from 'react'
import { Row, Col } from 'antd'
import { Link } from 'umi'
import { PlusOutlined } from '@ant-design/icons'
import TemplateItem from '../components/templateItem'
import { inject } from 'mobx-react'
import { PublicApi } from '@/services/api'
import { GetTemplatePlatformFindAllTemplateByTypeResponse } from '@/services'
import styles from './index.less'
const ShopCenterTemplate: React.FC = () => {
interface ShopCenterTemplatePropsType {
SiteStore: any
}
const ShopCenterTemplate: React.FC<ShopCenterTemplatePropsType> = (props) => {
const { SiteStore: { siteId } } = props
const [templateList, setTemplateList] = useState<GetTemplatePlatformFindAllTemplateByTypeResponse>([])
const template_data_mock = [
{
id: 1,
name: '模板001-清新类',
platform: 'PC',
station: '中国站',
useShopCenter: 'WEB用户商城',
isUse: true,
isDefault: true,
},
{
id: 2,
name: '模板002-科技类',
platform: 'H5',
station: '美国站',
useShopCenter: 'H5用户商城',
isUse: true,
isDefault: true,
},
{
id: 3,
name: '模板003-科技类',
platform: 'PC',
station: '美国站',
useShopCenter: 'WEB用户商城',
isUse: false,
isDefault: false,
useEffect(() => {
let prarm = {
type: '1',
siteId
}
]
PublicApi.getTemplatePlatformFindAllTemplateByType(prarm).then(res => {
setTemplateList(res.data)
})
}, [])
return (
<div className={styles.shop_center_template}>
<Row gutter={24} className={styles.template_list}>
{
template_data_mock.map(item => (
templateList.map(item => (
<Col span={6} key={item.id}>
<TemplateItem templateInfo={item} type="shopCenter" />
</Col>
......@@ -52,4 +39,4 @@ const ShopCenterTemplate: React.FC = () => {
)
}
export default ShopCenterTemplate
export default inject('SiteStore')(ShopCenterTemplate)
src/pages/pageCustomized/shopTemplate/index.tsx
View file @ 5e826459
import React from 'react'
import React, { useState, useEffect } from 'react'
import { Row, Col } from 'antd'
import { Link } from 'umi'
import { PlusOutlined } from '@ant-design/icons'
import { inject } from 'mobx-react'
import TemplateItem from '../components/templateItem'
import { PublicApi } from '@/services/api'
import { GetTemplatePlatformFindAllTemplateByTypeResponse } from '@/services'
import styles from './index.less'
const ShopTemplate: React.FC = () => {
interface ShopCenterTemplatePropsType {
SiteStore: any
}
const ShopTemplate: React.FC<ShopCenterTemplatePropsType> = (props) => {
const { SiteStore: { siteId } } = props
const [templateList, setTemplateList] = useState<GetTemplatePlatformFindAllTemplateByTypeResponse>([])
const template_data_mock = [
{
id: 1,
name: '模板001-清新类',
platform: 'PC',
station: '中国站',
useShopCenter: 'WEB用户商城',
isUse: true,
isDefault: true,
},
{
id: 2,
name: '模板002-科技类',
platform: 'H5',
station: '美国站',
useShopCenter: 'H5用户商城',
isUse: true,
isDefault: true,
},
{
id: 3,
name: '模板003-科技类',
platform: 'PC',
station: '美国站',
useShopCenter: 'WEB用户商城',
isUse: false,
isDefault: false,
useEffect(() => {
let prarm = {
type: '2',
siteId
}
]
PublicApi.getTemplatePlatformFindAllTemplateByType(prarm).then(res => {
setTemplateList(res.data)
})
}, [])
return (
<div className={styles.shop_center_template}>
<Row gutter={24} className={styles.template_list}>
{
template_data_mock.map(item => (
templateList.map(item => (
<Col span={6} key={item.id}>
<TemplateItem templateInfo={item} type="shop" />
</Col>
......@@ -52,4 +40,4 @@ const ShopTemplate: React.FC = () => {
)
}
export default ShopTemplate
export default inject('SiteStore')(ShopTemplate)
src/pages/pageCustomized/templateDetail/index.less
View file @ 5e826459
......@@ -2,7 +2,7 @@
height: 224px;
background-color: #ffffff;
display: flex;
margin: -24px;
border-radius: 8px;
align-items: center;
.back_btn {
......@@ -91,6 +91,11 @@
margin-left: 5px;
}
&.renovation {
background: #6B778C;
color: #ffffff;
}
&.use {
background: #00B37A;
color: #ffffff;
......
src/pages/pageCustomized/templateDetail/index.tsx
View file @ 5e826459
import React, { useState, Fragment } from 'react'
import React, { useState, Fragment, useEffect } from 'react'
import { history } from 'umi';
import { ArrowLeftOutlined, EyeOutlined, PushpinOutlined, BgColorsOutlined, ToTopOutlined } from '@ant-design/icons'
import { LayoutOutlined, EyeOutlined, PlayCircleOutlined, ToTopOutlined } from '@ant-design/icons'
import cx from 'classnames'
import UseModal from '../components/useModal'
import DetailPage from '@/components/DetailPage'
import { PublicApi } from '@/services/api'
import default_img from '@/asserts/template_default_img.png'
import styles from './index.less'
interface TemplateDetailPropsType {
location: {
query: {
id: number;
type: string; // 商城模板：shopCenter ；店铺模板：shop; 商品描述模板: goods
}
}
}
const TemplateDetail: React.FC<TemplateDetailPropsType> = (props) => {
const { location: { query } } = props
const { query: { type, id } } = props.location
const [useModalVisible, setUseModalVisible] = useState<boolean>(false)
useEffect(() => {
fetchDetail()
}, [])
const fetchDetail = () => {
//@ts-ignore
PublicApi.getTemplatePlatformFindTemplateDetails({ id }).then(res => {
})
}
return (
<div className={styles.template_detail}>
<div className={styles.back_btn} onClick={() => history.goBack()}>
<ArrowLeftOutlined />
</div>
<div className={styles.template_info_wrap}>
<div className={styles.template_img_box}>
<div className={cx(styles.type_tag)}>PC</div>
<img src={default_img} />
</div>
<div className={styles.template_info}>
<div className={styles.template_info_line}>
<label>模板名称：</label>
<span>模板001-清新类</span>
</div>
<div className={styles.template_info_line}>
<label>适用环境：</label>
<span>PC</span>
</div>
<div className={styles.template_info_line}>
<label>模板描述：</label>
<span>此模板只适用于PC端</span>
</div>
<div className={styles.template_info_line}>
<label>使用站点：</label>
<span>中国站</span>
<DetailPage
title="查看模板"
>
<div className={styles.template_detail}>
<div className={styles.template_info_wrap}>
<div className={styles.template_img_box}>
<div className={cx(styles.type_tag)}>PC</div>
<img src={default_img} />
</div>
<div className={styles.template_info_line}>
<label>使用商城：</label>
<span>WEB用户商城</span>
</div>
</div>
</div>
<div className={styles.btn}>
<EyeOutlined />
<label>预览</label>
</div>
{
query.type === 'shopCenter' && (
<Fragment>
<div className={cx(styles.btn, styles.use)} onClick={() => setUseModalVisible(true)}>
<PushpinOutlined />
<label>使用</label>
<div className={styles.template_info}>
<div className={styles.template_info_line}>
<label>模板名称：</label>
<span>模板001-清新类</span>
</div>
<div className={styles.template_info_line}>
<label>适用环境：</label>
<span>PC</span>
</div>
<div className={cx(styles.btn, styles.use)} onClick={() => history.push('/mall/template/edit')} >
<BgColorsOutlined />
<label>商城装修</label>
<div className={styles.template_info_line}>
<label>模板描述：</label>
<span>此模板只适用于PC端</span>
</div>
</Fragment>
)
}
{
query.type === 'shop' && (
<Fragment>
<div className={cx(styles.btn, styles.use)}>
<ToTopOutlined />
<label>上架</label>
<div className={styles.template_info_line}>
<label>使用站点：</label>
<span>中国站</span>
</div>
<div className={cx(styles.btn, styles.use)}>
<ToTopOutlined rotate={180} />
<label>下架</label>
<div className={styles.template_info_line}>
<label>使用商城：</label>
<span>WEB用户商城</span>
</div>
</Fragment>
)
}
</div>
</div>
<div className={styles.btn}>
<EyeOutlined />
<label>预览</label>
</div>
{
type === 'shopCenter' && (
<Fragment>
<div className={cx(styles.btn, styles.renovation)} onClick={() => history.push(`/mall/template/edit?id=${id}`)} >
<LayoutOutlined />
<label>装修</label>
</div>
<div className={cx(styles.btn)} onClick={() => setUseModalVisible(true)}>
<PlayCircleOutlined />
<label>启用</label>
</div>
</Fragment>
)
}
{
type === 'shop' && (
<Fragment>
<div className={cx(styles.btn, styles.use)}>
<ToTopOutlined />
<label>上架</label>
</div>
<div className={cx(styles.btn, styles.use)}>
<ToTopOutlined rotate={180} />
<label>下架</label>
</div>
</Fragment>
)
}
<UseModal
title="使用商场模板"
visible={useModalVisible}
onOk={() => { }}
type={query.type}
onCancel={() => setUseModalVisible(false)}
/>
</div>
<UseModal
title="使用商场模板"
visible={useModalVisible}
onOk={() => { }}
type={type}
onCancel={() => setUseModalVisible(false)}
/>
</div>
</DetailPage>
)
}
......
src/services/index.ts deleted 100644 → 0
View file @ 4f7cb543
This source diff could not be displayed because it is too large. You can view the blob instead.
src/store/index.tsx
View file @ 5e826459
......@@ -3,7 +3,7 @@ import React from 'react';
import { Provider } from 'mobx-react'
import { ITestModule } from '@/module/testModule';
import GlobalSelectStore from './globalSelect';
import SiteStore from './site'
/**
*
* mobx使用说明
......@@ -25,10 +25,11 @@ export interface IStore {
export const store = {
testStore: new TestStore,
globalStore: new GlobalSelectStore
globalStore: new GlobalSelectStore,
SiteStore: new SiteStore
}
const MobxProvider:React.FC = (props) => {
const MobxProvider: React.FC = (props) => {
return <Provider {...store}>{props.children}</Provider>
}
......
src/store/site/index.ts 0 → 100644
View file @ 5e826459
import { action, computed, observable, runInAction, autorun } from 'mobx'
class SiteStore {
@observable public siteId: number = 352
}
export default SiteStore
\ No newline at end of file
ytt.config.ts
View file @ 5e826459
......@@ -7,6 +7,7 @@ const tokens = [
'8d14d945507d1f8cd89afe139ca6d111bbad25f702fafe0aec59d3c9cd2e0ffe', // 物流服务
'3a46198c5b97ac7147e5b07ad2dff5ac5c93c1afed47e1911961db87149e6ebf', // 商户会员管理服务
'efe99e20ed1375dc0db3e809e4fc7692f42ecebaf60cd77e65c50ed65d6ba6c4', // 商品服务
'7ec923520215c7e2f771867cb4d29cafbf823daf0fb2d3d9fa70b57a523c8bfb', // 页面模板
]
const genMap = (tokens) => {
return tokens.map(v => {
......
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