31 changed files with 0 additions and 11726 deletions
-
7855backend/web/custom/sku_item.178ab99e60852816d81e.js
-
4backend/web/custom/sku_item.html
-
30backend/web/src/custom-menu/AddItem.js
-
124backend/web/src/custom-menu/Editor.js
-
176backend/web/src/custom-menu/MenuItem.js
-
247backend/web/src/custom-menu/index.js
-
7backend/web/src/custom-menu/index.scss
-
25backend/web/src/custom-menu/utils.js
-
149backend/web/src/dashboard/CircleCard.js
-
135backend/web/src/dashboard/LineChart.js
-
53backend/web/src/dashboard/OverviewCard.js
-
40backend/web/src/dashboard/PieChart.js
-
74backend/web/src/dashboard/RadioGroup.js
-
32backend/web/src/dashboard/Table.js
-
145backend/web/src/dashboard/index.js
-
65backend/web/src/mini-program-management/MainDescription.js
-
132backend/web/src/mini-program-management/ManageTriers.js
-
38backend/web/src/mini-program-management/StepBar.js
-
22backend/web/src/mini-program-management/common.js
-
146backend/web/src/mini-program-management/data.js
-
397backend/web/src/mini-program-management/index.js
-
127backend/web/src/order-detail/Card.js
-
77backend/web/src/order-detail/GoodsCard.js
-
23backend/web/src/order-detail/getOrderStatus.js
-
206backend/web/src/order-detail/index.js
-
171backend/web/src/sku-for-activity/index.js
-
185backend/web/src/spread/Movable/index.js
-
15backend/web/src/spread/Movable/index.scss
-
570backend/web/src/spread/index.js
-
354backend/web/src/spread/normalize.scss
-
102backend/web/src/spread/preview.scss
7855
backend/web/custom/sku_item.178ab99e60852816d81e.js
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -1,4 +0,0 @@ |
|||
<div id="app"></div> |
|||
<script> |
|||
var csrfToken = "<?= Yii::$app->request->csrfToken ?>"; |
|||
</script><script type="text/javascript" src="/custom/sku_item.178ab99e60852816d81e.js"></script> |
|||
@ -1,30 +0,0 @@ |
|||
import React from 'react' |
|||
import {Icon} from "antd"; |
|||
import styled from "styled-components"; |
|||
|
|||
export default function AddItem({ subMenu = false, onClick }) { |
|||
return ( |
|||
<AddItemRoot className={subMenu ? 'sub-menu' : ''} onClick={onClick}> |
|||
<Icon type='plus' /> |
|||
</AddItemRoot> |
|||
) |
|||
} |
|||
|
|||
const AddItemRoot = styled.div`
|
|||
flex: 1; |
|||
display: inline-flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
width: 100%; |
|||
cursor: default; |
|||
&:active { |
|||
background: #eee; |
|||
} |
|||
&.sub-menu { |
|||
height: 40px; |
|||
border: none; |
|||
&:not(:last-child) { |
|||
border-bottom: 1px solid #eee; |
|||
} |
|||
} |
|||
`;
|
|||
@ -1,124 +0,0 @@ |
|||
import React, { createContext, useContext } from 'react' |
|||
import { Form, Input, Radio, Select } from "antd"; |
|||
import styled from "styled-components"; |
|||
import { produce } from "immer"; |
|||
|
|||
const FormItem = Form.Item; |
|||
const RadioGroup = Radio.Group; |
|||
const Option = Select.Option; |
|||
|
|||
const { customPageList } = window; |
|||
|
|||
const MenuContext = createContext(); |
|||
const MenuContextProvider = MenuContext.Provider; |
|||
|
|||
function InputItem({ label, name }) { |
|||
const { activeMenu, formItemLayout, onChange } = useContext(MenuContext); |
|||
const rawValue = activeMenu.content.value; |
|||
const value = name ? (rawValue ? rawValue[name] : '') : rawValue; |
|||
|
|||
function handleChange(e) { |
|||
const newValue = e.target.value; |
|||
onChange(name ? { |
|||
...rawValue, |
|||
[name]: newValue |
|||
} : newValue); |
|||
} |
|||
|
|||
return ( |
|||
<FormItem label={label} {...formItemLayout}> |
|||
<Input |
|||
value={value} |
|||
placeholder={'请输入' + label} |
|||
onChange={handleChange} |
|||
/> |
|||
</FormItem> |
|||
) |
|||
} |
|||
|
|||
export default function Editor({ activeMenu, onChange }) { |
|||
function changeType(e) { |
|||
onChange('content', produce(activeMenu.content, draft => { |
|||
draft.type = e.target.value; |
|||
draft.value = null; |
|||
})) |
|||
} |
|||
|
|||
function changeValue(newValue) { |
|||
onChange('content', { |
|||
type: activeMenu.content.type, |
|||
value: newValue |
|||
}) |
|||
} |
|||
|
|||
const formItemLayout = { |
|||
labelCol: {span: 10}, |
|||
wrapperCol: {span: 14}, |
|||
}; |
|||
|
|||
const typeTable = { |
|||
view: { |
|||
label: '跳转网页', |
|||
content: <InputItem label='网页链接' /> |
|||
}, |
|||
customPage: { |
|||
label: '自定义页面', |
|||
content: ( |
|||
<FormItem label='自定义页面' {...formItemLayout}> |
|||
<Select defaultValue={activeMenu.content.value} onChange={changeValue}> |
|||
{customPageList.map(({id, title}) => <Option key={id} value={id.toString()}>{title}</Option>)} |
|||
</Select> |
|||
</FormItem> |
|||
) |
|||
}, |
|||
miniprogram: { |
|||
label: '跳转小程序', |
|||
content: ( |
|||
<> |
|||
<InputItem label='小程序 AppId' name='appId' /> |
|||
<InputItem label='小程序页面链接' name='url' /> |
|||
<InputItem label='备用网页链接' name='spareWebUrl' /> |
|||
</> |
|||
) |
|||
} |
|||
}; |
|||
|
|||
return ( |
|||
<Root> |
|||
<Form> |
|||
<FormItem label='菜单名称' {...formItemLayout}> |
|||
<Input |
|||
value={activeMenu.title} |
|||
onInput={e => onChange('title', e.target.value)} |
|||
/> |
|||
</FormItem> |
|||
{(!activeMenu.children || activeMenu.children.length === 0) && ( |
|||
<ContentValue> |
|||
<FormItem label='菜单内容' {...formItemLayout}> |
|||
<RadioGroup value={activeMenu.content.type} onChange={changeType}> |
|||
{Object.keys(typeTable).map(name => ( |
|||
<Radio key={name} value={name}>{typeTable[name].label}</Radio> |
|||
))} |
|||
</RadioGroup> |
|||
</FormItem> |
|||
{activeMenu.content.type && ( |
|||
<MenuContextProvider value={{ activeMenu, onChange: changeValue, formItemLayout }}> |
|||
{typeTable[activeMenu.content.type].content} |
|||
</MenuContextProvider> |
|||
)} |
|||
</ContentValue> |
|||
)} |
|||
</Form> |
|||
</Root> |
|||
) |
|||
} |
|||
|
|||
const Root = styled.div`
|
|||
margin-left: 20px; |
|||
padding: 20px; |
|||
background: #fff; |
|||
`;
|
|||
|
|||
const ContentValue = styled.div`
|
|||
|
|||
`;
|
|||
@ -1,176 +0,0 @@ |
|||
import React, { useState } from 'react' |
|||
import { Button, Popover } from "antd"; |
|||
import styled from "styled-components"; |
|||
import ClassNames from 'classnames' |
|||
import AddItem from './AddItem' |
|||
import { DragDropContext, Draggable, Droppable} from "react-beautiful-dnd"; |
|||
|
|||
function BaseMenuItem({ title, active, onClick, onDelete, children, provided, snapshot }) { |
|||
const providedProps = provided ? { |
|||
ref: provided.innerRef, |
|||
...provided.draggableProps, |
|||
...provided.dragHandleProps |
|||
} : {}; |
|||
|
|||
return ( |
|||
<MenuItemRoot |
|||
{...providedProps} |
|||
className={ClassNames({ |
|||
active, |
|||
dragging: snapshot.isDragging |
|||
})} |
|||
onClick={onClick} |
|||
> |
|||
<MenuItemWrapper> |
|||
<MenuItemText>{title}</MenuItemText> |
|||
<DeleteButton |
|||
type='danger' |
|||
shape='circle' |
|||
size='small' |
|||
icon='close' |
|||
onClick={e => { |
|||
e.stopPropagation(); |
|||
onDelete(e); |
|||
}} |
|||
/> |
|||
{children} |
|||
</MenuItemWrapper> |
|||
</MenuItemRoot> |
|||
) |
|||
} |
|||
|
|||
export default function MenuItem( |
|||
{ |
|||
title, children, active, activeSubMenuId, showSubMenu, provided, snapshot, onActivate, |
|||
onAddSubMenu, onDeleteSubMenu, onReorderSubMenu, onDelete |
|||
}) { |
|||
const content = ( |
|||
<> |
|||
<DragDropContext |
|||
onDragStart={({ draggableId }) => onActivate(draggableId)} |
|||
onDragEnd={result => onReorderSubMenu(result)} |
|||
> |
|||
<Droppable droppableId="droppable"> |
|||
{provided => ( |
|||
<div |
|||
{...provided.droppableProps} |
|||
ref={provided.innerRef} |
|||
> |
|||
{children && children.map(({id, title}, subIndex) => ( |
|||
<Draggable key={id} draggableId={id} index={subIndex}> |
|||
{(provided, snapshot) => ( |
|||
<SubMenuItem |
|||
ref={provided.innerRef} |
|||
{...provided.draggableProps} |
|||
{...provided.dragHandleProps} |
|||
> |
|||
<BaseMenuItem |
|||
title={title} |
|||
active={activeSubMenuId === id} |
|||
snapshot={snapshot} |
|||
onClick={() => onActivate(id)} |
|||
onDelete={() => onDeleteSubMenu(subIndex)} |
|||
/> |
|||
</SubMenuItem> |
|||
)} |
|||
</Draggable> |
|||
))} |
|||
{provided.placeholder} |
|||
</div> |
|||
)} |
|||
</Droppable> |
|||
</DragDropContext> |
|||
{(!children || children.length < 5) && <AddItem subMenu onClick={onAddSubMenu}/>} |
|||
</> |
|||
); |
|||
|
|||
return ( |
|||
<Popover |
|||
trigger='click' |
|||
content={content} |
|||
overlayStyle={{width: '100px', padding: '0'}} |
|||
visible={showSubMenu} |
|||
> |
|||
<BaseMenuItem |
|||
provided={provided} |
|||
snapshot={snapshot} |
|||
title={title} |
|||
active={active} |
|||
onClick={() => onActivate()} |
|||
onDelete={onDelete} |
|||
> |
|||
{(children && children.length > 0) && <SpreadSymbol/>} |
|||
</BaseMenuItem> |
|||
</Popover> |
|||
) |
|||
} |
|||
|
|||
const DeleteButton = styled(Button)`
|
|||
position: absolute; |
|||
right: 0; |
|||
top: 0; |
|||
transform: translate(50%, -50%); |
|||
box-shadow: 0 0 10px 0 rgba(0 0 0 .1); |
|||
visibility: hidden; |
|||
z-index: 2000; |
|||
`;
|
|||
|
|||
const fontSizeRatio = 0.03; |
|||
const MenuItemText = styled.div`
|
|||
padding: 0 5px; |
|||
white-space: nowrap; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
font-size: ${70 * fontSizeRatio}vh; |
|||
`;
|
|||
|
|||
const SubMenuItem = styled.div`
|
|||
display: flex; |
|||
width: 100%; |
|||
height: 40px; |
|||
border-bottom: 1px solid #eee; |
|||
`;
|
|||
|
|||
const MenuItemWrapper = styled.div`
|
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
width: 100%; |
|||
height: 100%; |
|||
`;
|
|||
|
|||
const triangleSize = 8; |
|||
const spreadOffset = 3; |
|||
const SpreadSymbol = styled.div`
|
|||
position: absolute; |
|||
right: ${spreadOffset}px; |
|||
bottom: ${spreadOffset}px; |
|||
width: 0; |
|||
height: 0; |
|||
border-top: ${triangleSize}px solid transparent; |
|||
border-right: ${triangleSize}px solid #ddd; |
|||
`;
|
|||
|
|||
const MenuItemRoot = styled.div`
|
|||
align-items: stretch; |
|||
position: relative; |
|||
flex: 1; |
|||
padding: 5px 0; |
|||
cursor: default; |
|||
background: #fff; |
|||
border: 2px solid transparent; |
|||
width: 0; |
|||
transition: box-shadow .1s; |
|||
&.active { |
|||
border-color: #09bb07; |
|||
} |
|||
&.dragging { |
|||
box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1); |
|||
} |
|||
&:not(:last-child) ${MenuItemWrapper} { |
|||
border-right: 1px solid #eee; |
|||
} |
|||
&:hover ${DeleteButton} { |
|||
visibility: visible; |
|||
} |
|||
`;
|
|||
@ -1,247 +0,0 @@ |
|||
import React, { useState } from 'react' |
|||
import ReactDOM from 'react-dom' |
|||
import styled from 'styled-components' |
|||
import { Button, Icon, message } from 'antd' |
|||
import { produce } from 'immer' |
|||
import axios from 'axios' |
|||
import { DragDropContext, Draggable, Droppable} from "react-beautiful-dnd"; |
|||
import './index.scss' |
|||
import Editor from './Editor' |
|||
import AddItem from './AddItem' |
|||
import MenuItem from './MenuItem' |
|||
import '../utils/ajax' |
|||
import { handleDragEnd } from './utils' |
|||
import uuid from 'uuid' |
|||
|
|||
const IconFont = Icon.createFromIconfontCN({ |
|||
scriptUrl: '//at.alicdn.com/t/font_827976_5ojdd8bmdsw.js', |
|||
}); |
|||
|
|||
const { data: initMenuList = [] } = window; |
|||
|
|||
function getActiveMenu(menuList, activeMenuInfo) { |
|||
const activeParent = menuList.find(menu => menu.id === activeMenuInfo.id); |
|||
return (activeParent && activeMenuInfo.subId !== null && activeParent.children.length > 0) ? |
|||
activeParent.children.find(child => child.id === activeMenuInfo.subId) : activeParent; |
|||
} |
|||
|
|||
function App() { |
|||
const [menuList, setMenuList] = useState(initMenuList); |
|||
const [activeMenuInfo, setActiveMenuInfo] = useState({ id: null, subId: null }); |
|||
|
|||
const activeMenu = getActiveMenu(menuList, activeMenuInfo); |
|||
|
|||
function addMenu() { |
|||
const id = uuid(); |
|||
|
|||
setMenuList([ |
|||
...menuList, |
|||
{ |
|||
id, |
|||
title: '菜单名称', |
|||
content: { |
|||
type: null, |
|||
value: null |
|||
}, |
|||
children: [] |
|||
} |
|||
]); |
|||
|
|||
setActiveMenuInfo({ |
|||
id, |
|||
subId: null |
|||
}) |
|||
} |
|||
|
|||
function deleteMenu(index) { |
|||
setMenuList(produce(menuList, (draft => { |
|||
draft.splice(index, 1); |
|||
}))); |
|||
} |
|||
|
|||
function deleteSubMenu(index, subIndex) { |
|||
setMenuList(produce(menuList, (draft => { |
|||
draft[index].children.splice(subIndex, 1); |
|||
}))); |
|||
} |
|||
|
|||
function addSubMenu(index) { |
|||
const id = uuid(); |
|||
|
|||
setMenuList(produce(menuList, (draft => { |
|||
draft[index].children.push({ |
|||
id, |
|||
title: '菜单名称', |
|||
content: { |
|||
type: null, |
|||
value: null |
|||
} |
|||
}) |
|||
}))); |
|||
setActiveMenuInfo({ |
|||
id: menuList[index].id, |
|||
subId: id |
|||
}) |
|||
} |
|||
|
|||
function changeForm(name, value) { |
|||
setMenuList(produce(menuList, (draft => { |
|||
const activeMenu = getActiveMenu(draft, activeMenuInfo); |
|||
activeMenu[name] = value; |
|||
}))); |
|||
} |
|||
|
|||
function checkData() { |
|||
return menuList.every(menu => { |
|||
if (menu.children && menu.children.length > 0) { |
|||
return menu.title && menu.children.every(item => { |
|||
if (item.content.type === 'weapp') { |
|||
const { appId, url, spareWebUrl } = item.content.value; |
|||
return item.title && appId && url && spareWebUrl |
|||
} else { |
|||
return item.title && item.content.type && item.content.value |
|||
} |
|||
}) |
|||
} else { |
|||
return menu.title && menu.content.type && menu.content.value |
|||
} |
|||
}) |
|||
} |
|||
|
|||
async function submit() { |
|||
if (checkData()) { |
|||
await axios.post('', { |
|||
data: menuList |
|||
}); |
|||
message.success('保存成功'); |
|||
} else { |
|||
message.error('数据填写不完整，请检查是否有数据漏填') |
|||
} |
|||
} |
|||
|
|||
function reorderSubMenu(index, result) { |
|||
handleDragEnd(menuList[index].children, result, newSubMenu => { |
|||
setMenuList(produce(menuList, draft => { |
|||
draft[index].children = newSubMenu; |
|||
})) |
|||
}) |
|||
} |
|||
|
|||
return ( |
|||
<Root> |
|||
<Previewer> |
|||
<TopBar src='/img/wechat-top.png' /> |
|||
<BottomBar> |
|||
<KeyBoardIcon> |
|||
<IconFont |
|||
type='fa-keyboard' |
|||
style={{ |
|||
fontSize: '1.3em', |
|||
padding: '0 10px', |
|||
alignSelf: 'center', |
|||
borderRight: '1px solid #eee' |
|||
}} |
|||
/> |
|||
</KeyBoardIcon> |
|||
<MenuWrapper> |
|||
<DragDropContext |
|||
onDragStart={({ draggableId }) => setActiveMenuInfo({ id: draggableId, subId: null })} |
|||
onDragEnd={result => handleDragEnd(menuList, result, setMenuList)} |
|||
> |
|||
<Droppable droppableId='droppable' direction='horizontal'> |
|||
{provided => ( |
|||
<MenuGroup |
|||
{...provided.droppableProps} |
|||
ref={provided.innerRef} |
|||
length={menuList.length} |
|||
> |
|||
{menuList.map((menu, index) => ( |
|||
<Draggable key={menu.id} draggableId={menu.id} index={index}> |
|||
{(provided, snapshot) => ( |
|||
<MenuItem |
|||
key={menu.id} |
|||
{...menu} |
|||
provided={provided} |
|||
snapshot={snapshot} |
|||
showSubMenu={activeMenuInfo.id === menu.id} |
|||
active={activeMenuInfo.id === menu.id && activeMenuInfo.subId === null} |
|||
activeSubMenuId={activeMenuInfo.id === menu.id && activeMenuInfo.subId} |
|||
onAddSubMenu={() => addSubMenu(index)} |
|||
onActivate={(subId = null) => setActiveMenuInfo({ id: menu.id, subId })} |
|||
onDelete={() => deleteMenu(index)} |
|||
onDeleteSubMenu={(subIndex) => deleteSubMenu(index, subIndex)} |
|||
onReorderSubMenu={result => reorderSubMenu(index, result)} |
|||
/> |
|||
)} |
|||
</Draggable> |
|||
))} |
|||
{provided.placeholder} |
|||
</MenuGroup> |
|||
)} |
|||
</Droppable> |
|||
</DragDropContext> |
|||
{menuList.length < 3 && <AddItem onClick={addMenu} />} |
|||
</MenuWrapper> |
|||
</BottomBar> |
|||
</Previewer> |
|||
{activeMenu && <Editor activeMenu={activeMenu} onChange={changeForm} />} |
|||
<SubmitButton type='primary' shape='circle' icon='check' size='large' onClick={submit} /> |
|||
</Root> |
|||
) |
|||
} |
|||
|
|||
const Root = styled.div`
|
|||
display: flex; |
|||
`;
|
|||
|
|||
const TopBar = styled.img`
|
|||
width: 100%; |
|||
height: auto; |
|||
`;
|
|||
|
|||
const BottomBar = styled.div`
|
|||
display: flex; |
|||
width: 100%; |
|||
height: 35px; |
|||
background: #fff; |
|||
`;
|
|||
|
|||
const KeyBoardIcon = styled.div`
|
|||
padding: 10px 0; |
|||
`;
|
|||
|
|||
const height = 70; |
|||
const ratio = 16 / 9; |
|||
|
|||
const Previewer = styled.div`
|
|||
flex-shrink: 0; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
width: ${height / ratio}vh; |
|||
height: ${height}vh; |
|||
background: #eee; |
|||
border: 1px solid #eee; |
|||
box-shadow: 0 0 20px 0 rgba(0, 0, 0, .1); |
|||
`;
|
|||
|
|||
const SubmitButton = styled(Button)`
|
|||
position: fixed; |
|||
width: 60px!important; |
|||
height: 60px!important; |
|||
font-size: 1.8em!important; |
|||
bottom: 40px; |
|||
right: 40px; |
|||
`;
|
|||
|
|||
const MenuWrapper = styled.div`
|
|||
flex-grow: 1; |
|||
display: flex; |
|||
width: 0; |
|||
`;
|
|||
|
|||
const MenuGroup = styled(MenuWrapper)`
|
|||
flex-grow: ${({ length }) => length}; |
|||
`;
|
|||
|
|||
ReactDOM.render(<App />, document.getElementById('app')); |
|||
@ -1,7 +0,0 @@ |
|||
.ant-popover-inner-content { |
|||
padding: 0!important; |
|||
} |
|||
|
|||
.ant-popover-arrow { |
|||
display: none!important; |
|||
} |
|||
@ -1,25 +0,0 @@ |
|||
export const reorder = (list, startIndex, endIndex) => { |
|||
const result = Array.from(list); |
|||
const [removed] = result.splice(startIndex, 1); |
|||
result.splice(endIndex, 0, removed); |
|||
|
|||
return result; |
|||
}; |
|||
|
|||
export function handleDragEnd(list, result, setList) { |
|||
if (!result.destination) { |
|||
return; |
|||
} |
|||
|
|||
if (result.destination.index === result.source.index) { |
|||
return; |
|||
} |
|||
|
|||
const newList = reorder( |
|||
list, |
|||
result.source.index, |
|||
result.destination.index |
|||
); |
|||
|
|||
setList(newList); |
|||
} |
|||
@ -1,149 +0,0 @@ |
|||
import Circle from 'react-circle'; |
|||
import React from "react"; |
|||
import PropTypes from "prop-types"; |
|||
import styled from 'styled-components' |
|||
import ClassNames from 'classnames' |
|||
import {Icon} from 'antd' |
|||
import NumberEasing from "che-react-number-easing" |
|||
|
|||
export default class RadioGroup extends React.Component { |
|||
constructor(props) { |
|||
super(props); |
|||
this.state = { |
|||
percentForDisplay: 0, |
|||
growthForDisplay: 0, |
|||
} |
|||
} |
|||
|
|||
static propTypes = { |
|||
title: PropTypes.string, |
|||
percent: PropTypes.number, |
|||
growth: PropTypes.number, |
|||
color: PropTypes.string, |
|||
animationDuration: PropTypes.number |
|||
}; |
|||
|
|||
static defaultProps = { |
|||
title: '', |
|||
percent: 0, |
|||
growth: 0, |
|||
color: '#312c50', |
|||
animationDuration: 1500 |
|||
}; |
|||
|
|||
componentDidMount() { |
|||
const {percent, growth} = this.props; |
|||
|
|||
function fixDigits(number, fractionDigits) { |
|||
return Number((number * 100).toFixed(fractionDigits)) |
|||
} |
|||
|
|||
this.setState({ |
|||
percentForDisplay: fixDigits(percent, 2), |
|||
growthForDisplay: fixDigits(growth, 2) |
|||
}) |
|||
} |
|||
|
|||
render() { |
|||
const {percentForDisplay, growthForDisplay} = this.state; |
|||
const {title, percent, growth, color, animationDuration} = this.props; |
|||
|
|||
return ( |
|||
<Root> |
|||
<Title>{title}</Title> |
|||
<CircleWrapper> |
|||
<Circle |
|||
animate={true} |
|||
animationDuration={`${animationDuration / 1000}s`} |
|||
progress={percentForDisplay} |
|||
progressColor={color} |
|||
textColor={color} |
|||
size={120} |
|||
textStyle={{ |
|||
font: 'bold 7rem Helvetica, Arial, sans-serif' |
|||
}} |
|||
roundedStroke={true} |
|||
showPercentage={false} |
|||
/> |
|||
<Percentage> |
|||
{percent > 0 ? ( |
|||
<> |
|||
<NumberEasing |
|||
value={percentForDisplay} |
|||
speed={animationDuration} |
|||
precision={2} |
|||
/> |
|||
<span>%</span> |
|||
</> |
|||
) : <div>N/A</div>} |
|||
</Percentage> |
|||
</CircleWrapper> |
|||
{(growth !== 0 && growth > 0) && ( |
|||
<Growth |
|||
className={ClassNames({ |
|||
up: growth > 0, |
|||
zero: growth === 0, |
|||
down: growth < 0 |
|||
})} |
|||
title={`同比${growth > 0 ? '增长' : '下降'} ${Math.abs(growth.toFixed(4) * 100)}%`} |
|||
> |
|||
<Icon type={'arrow-' + (growth > 0 ? 'up' : 'down')} /> |
|||
<NumberEasing |
|||
value={Math.abs(growthForDisplay)} |
|||
speed={animationDuration} |
|||
precision={2} |
|||
/> |
|||
<span>%</span> |
|||
</Growth> |
|||
)} |
|||
</Root> |
|||
) |
|||
} |
|||
} |
|||
|
|||
const Root = styled.div`
|
|||
height: 200px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-around; |
|||
align-items: center; |
|||
border-radius: 10px; |
|||
padding: 20px; |
|||
background: #fff; |
|||
box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.1)!important; |
|||
`;
|
|||
|
|||
const Title = styled.div`
|
|||
font-weight: bold; |
|||
font-size: 1em; |
|||
`;
|
|||
|
|||
const Growth = styled.div`
|
|||
font-weight: bold; |
|||
&.up { |
|||
color: #3fbe67; |
|||
} |
|||
&.zero { |
|||
color: #666; |
|||
} |
|||
&.down { |
|||
color: #ee4d48; |
|||
} |
|||
.anticon { |
|||
margin-right: 5px; |
|||
} |
|||
`;
|
|||
|
|||
const CircleWrapper = styled.div`
|
|||
position: relative; |
|||
`;
|
|||
|
|||
const Percentage = styled.div`
|
|||
position: absolute; |
|||
left: 50%; |
|||
top: 50%; |
|||
transform: translate(-50%, -50%); |
|||
font-size: 1.5em; |
|||
font-weight: bold; |
|||
color: ${(props) => props.color}; |
|||
`;
|
|||
@ -1,135 +0,0 @@ |
|||
import React from "react"; |
|||
import PropTypes from "prop-types"; |
|||
import { Chart, Geom, Axis, Tooltip, Legend, Coord } from 'bizcharts'; |
|||
import styled from 'styled-components' |
|||
import RadioGroup from './RadioGroup' |
|||
import {setLightness} from 'polished' |
|||
|
|||
export default class LineChart extends React.Component { |
|||
constructor(props) { |
|||
super(props); |
|||
this.state = { |
|||
checkedIndex: 0 |
|||
} |
|||
} |
|||
|
|||
static propTypes = { |
|||
data: PropTypes.oneOfType([PropTypes.array, PropTypes.object]).isRequired, |
|||
label: PropTypes.string.isRequired, |
|||
color: PropTypes.string, |
|||
title: PropTypes.string, |
|||
labelY: PropTypes.string, |
|||
prefix: PropTypes.string, |
|||
unit: PropTypes.string, |
|||
dateCount: PropTypes.number, |
|||
type: PropTypes.oneOf(['integer']) |
|||
}; |
|||
|
|||
static defaultProps = { |
|||
data: [], |
|||
label: '', |
|||
color: '#5d58e9', |
|||
title: '', |
|||
labelY: '', |
|||
prefix: '', |
|||
unit: '', |
|||
dateCount: 7, |
|||
type: 'integer' |
|||
}; |
|||
|
|||
render() { |
|||
const {checkedIndex} = this.state; |
|||
const {data, label, prefix, unit, title, color, type, dateCount} = this.props; |
|||
const currentData = data[checkedIndex]; |
|||
const position = `${currentData.key || 'date'}*value`; |
|||
const isLittle = !currentData.data.find(i => i.value > 5); |
|||
|
|||
// 定义度量
|
|||
const cols = { |
|||
[data[checkedIndex].key || 'date']: { |
|||
alias: '日期', |
|||
tickCount: dateCount |
|||
}, |
|||
value: { |
|||
alias: label, |
|||
type: 'linear', |
|||
formatter: value => `${prefix}${value}${unit}`, |
|||
tickInterval: type === 'integer' && isLittle ? 1 : undefined |
|||
} |
|||
}; |
|||
|
|||
return ( |
|||
<div className="line-chart"> |
|||
<Header> |
|||
<h1> |
|||
{title.replace(/<days>/g, data[checkedIndex].data.length) |
|||
.replace(/<label>/g, data[checkedIndex].label)} |
|||
</h1> |
|||
{data.length > 1 && ( |
|||
<RadioGroup |
|||
current={checkedIndex} |
|||
items={data.map(i => i.label)} |
|||
color={color} |
|||
onChange={(newValue) => { |
|||
this.setState({checkedIndex: newValue}) |
|||
}} |
|||
/> |
|||
)} |
|||
</Header> |
|||
<div className="content"> |
|||
<Chart |
|||
forceFit |
|||
height={300} |
|||
padding='auto' |
|||
data={data[checkedIndex].data} |
|||
scale={cols} |
|||
> |
|||
<Axis name="date" /> |
|||
<Axis name="value" /> |
|||
<Tooltip /> |
|||
<Geom |
|||
type="line" |
|||
shape="smooth" |
|||
position={position} |
|||
color={color} |
|||
animate={{ |
|||
appear: { |
|||
animation: 'clipIn', |
|||
easing: 'easePolyIn', |
|||
duration: 1500, |
|||
delay: 0 |
|||
} |
|||
}} |
|||
/> |
|||
<Geom |
|||
type="area" |
|||
shape="smooth" |
|||
position={position} |
|||
color={`l (90) 0:${setLightness(.85, color)} 0.7:${setLightness(.9, color)} 1:#ffffff`} |
|||
tooltip={false} |
|||
animate={{ |
|||
appear: { |
|||
animation: 'clipIn', |
|||
easing: 'easePolyIn', |
|||
duration: 1500, |
|||
delay: 0 |
|||
} |
|||
}} |
|||
/> |
|||
</Chart> |
|||
</div> |
|||
</div> |
|||
); |
|||
} |
|||
} |
|||
|
|||
const Header = styled.div`
|
|||
display: flex; |
|||
align-items: center; |
|||
margin: 10px 0 20px 0; |
|||
h1 { |
|||
flex-grow: 1; |
|||
line-height: 1; |
|||
margin: 0; |
|||
} |
|||
`;
|
|||
@ -1,53 +0,0 @@ |
|||
import React from "react"; |
|||
import PropTypes from "prop-types"; |
|||
import NumberEasing from 'che-react-number-easing'; |
|||
|
|||
export default class OverviewCard extends React.Component{ |
|||
constructor(props) { |
|||
super(props); |
|||
this.state = { |
|||
number: 0 |
|||
} |
|||
} |
|||
|
|||
static propTypes = { |
|||
title: PropTypes.string.isRequired, |
|||
number: PropTypes.oneOfType([ |
|||
PropTypes.number, |
|||
PropTypes.string |
|||
]).isRequired, |
|||
image: PropTypes.string, |
|||
isPrice: PropTypes.bool |
|||
}; |
|||
|
|||
static defaultProps = { |
|||
isPrice: false |
|||
}; |
|||
|
|||
|
|||
componentDidMount() { |
|||
this.setState({ |
|||
number: parseFloat(this.props.number).toFixed(2) |
|||
}) |
|||
} |
|||
|
|||
render() { |
|||
const {number} = this.state; |
|||
const {image, title, isPrice} = this.props; |
|||
return ( |
|||
<div className='overview-card'> |
|||
<div className="main"> |
|||
<h1>{title}</h1> |
|||
<p className='number'>{isPrice && '￥'} |
|||
<NumberEasing |
|||
value={number} |
|||
speed={1500} |
|||
precision={isPrice ? 2 : 0} |
|||
/> |
|||
</p> |
|||
</div> |
|||
<img src={image} alt="text"/> |
|||
</div> |
|||
) |
|||
} |
|||
} |
|||
@ -1,40 +0,0 @@ |
|||
// var myPieChart = new Chart(ctxTotalPie, {
|
|||
// type: 'pie',
|
|||
// data: {
|
|||
// datasets: [{
|
|||
// data: [
|
|||
// data.total.finish,
|
|||
// data.total.refund,
|
|||
// data.total.shipping,
|
|||
// data.total.unpaied,
|
|||
// data.total.unshipping
|
|||
// ],
|
|||
// backgroundColor: [
|
|||
// 'rgba(255, 87, 51, 1)',
|
|||
// 'rgba(95, 108, 160, 1)',
|
|||
// 'rgba(255, 206, 86, 1)',
|
|||
// 'rgba(75, 192, 192, 1)',
|
|||
// 'rgba(153, 102, 255, 1)',
|
|||
// 'rgba(255, 159, 64, 1)'
|
|||
// ],
|
|||
// // borderColor: [
|
|||
// // 'rgba(95, 108, 160, 1)',
|
|||
// // 'rgba(54, 162, 235, 1)',
|
|||
// // 'rgba(255, 206, 86, 1)',
|
|||
// // 'rgba(75, 192, 192, 1)',
|
|||
// // 'rgba(153, 102, 255, 1)',
|
|||
// // 'rgba(255, 159, 64, 1)'
|
|||
// // ]
|
|||
// }],
|
|||
//
|
|||
// // These labels appear in the legend and in the tooltips when hovering different arcs
|
|||
// labels: [
|
|||
// '已完成',
|
|||
// '申请退款中',
|
|||
// '待收货',
|
|||
// '未付款',
|
|||
// '待发货'
|
|||
// ]
|
|||
// },
|
|||
// options: {}
|
|||
// });
|
|||
@ -1,74 +0,0 @@ |
|||
import React from "react"; |
|||
import PropTypes from "prop-types"; |
|||
import styled from 'styled-components' |
|||
import {setLightness} from 'polished' |
|||
|
|||
export default class RadioGroup extends React.Component { |
|||
constructor(props) { |
|||
super(props); |
|||
this.state = { |
|||
number: 0 |
|||
} |
|||
} |
|||
|
|||
static propTypes = { |
|||
current: PropTypes.number, |
|||
items: PropTypes.arrayOf(PropTypes.string).isRequired, |
|||
color: PropTypes.string, |
|||
onChange: PropTypes.func |
|||
}; |
|||
|
|||
static defaultProps = { |
|||
current: '', |
|||
items: [], |
|||
onChange: () => { |
|||
}, |
|||
color: '#5d58e9' |
|||
}; |
|||
|
|||
render() { |
|||
const {current, items, color, onChange} = this.props; |
|||
|
|||
return ( |
|||
<Root> |
|||
{items.map((item, index) => ( |
|||
<Item |
|||
key={index} |
|||
color={color} |
|||
className={current === index ? 'active' : ''} |
|||
onClick={() => { |
|||
current !== item && onChange(index) |
|||
}} |
|||
>{item}</Item> |
|||
))} |
|||
</Root> |
|||
) |
|||
} |
|||
} |
|||
|
|||
const Root = styled.div`
|
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
align-items: center; |
|||
`;
|
|||
|
|||
const Item = styled.div`
|
|||
margin: 5px; |
|||
padding: 2px 10px; |
|||
font-size: .8em; |
|||
border-radius: 40px; |
|||
border: 2px solid ${(props) => props.color}; |
|||
color: ${(props) => props.color}; |
|||
background: #fff; |
|||
transition: all .2s; |
|||
white-space: nowrap; |
|||
cursor: pointer; |
|||
&:hover { |
|||
background: ${(props) => setLightness(.9, props.color)}; |
|||
} |
|||
&.active { |
|||
background: ${(props) => props.color}; |
|||
color: #fff; |
|||
cursor: default; |
|||
} |
|||
`;
|
|||
@ -1,32 +0,0 @@ |
|||
import React from "react"; |
|||
import PropTypes from "prop-types"; |
|||
import styled from "styled-components"; |
|||
|
|||
export default class Table extends React.Component { |
|||
constructor(props) { |
|||
super(props); |
|||
this.state = { |
|||
|
|||
}; |
|||
} |
|||
|
|||
static defaultProps = { |
|||
|
|||
}; |
|||
|
|||
static propTypes = { |
|||
|
|||
}; |
|||
|
|||
render() { |
|||
return ( |
|||
<Root> |
|||
|
|||
</Root> |
|||
) |
|||
} |
|||
} |
|||
|
|||
const Root = styled.div`
|
|||
|
|||
`;
|
|||
@ -1,145 +0,0 @@ |
|||
import React from 'react'; |
|||
import ReactDOM from 'react-dom'; |
|||
import styled from 'styled-components' |
|||
import CircleCard from './CircleCard'; |
|||
import LineChart from './LineChart' |
|||
import OverviewCard from './OverviewCard.js' |
|||
import '../styles/dashboard.scss' |
|||
import 'rc-switch/assets/index.css' |
|||
|
|||
const {total, sales, monthlySales, users, topGoods, topOrders, DAU, |
|||
dailyConversionRate, monthlyConversionRate} = data; |
|||
const {salesAmount, salesCount, orderCount, goodsCount, userCount} = total; |
|||
const fixedSales = sales.map(i => ({ |
|||
...i, |
|||
value: Number.parseFloat(i.value).toFixed(2) |
|||
})); |
|||
|
|||
const fixedonthlySales = monthlySales.map(i => ({ |
|||
...i, |
|||
value: Number.parseFloat(i.value).toFixed(2) |
|||
})); |
|||
|
|||
const salesData = [ |
|||
{ |
|||
label: '30天', |
|||
data: fixedSales |
|||
}, |
|||
{ |
|||
label: '15天', |
|||
data: fixedSales.slice(15), |
|||
}, |
|||
{ |
|||
label: '12个月', |
|||
data: fixedonthlySales.reverse(), |
|||
key: 'month' |
|||
}, |
|||
]; |
|||
|
|||
const topGoodsData = [ |
|||
{ |
|||
label: '销量最高', |
|||
highlightCol: 1, |
|||
data: topGoods.count.map(i => ({ |
|||
'商品名称': i.name, |
|||
'销量': i.count, |
|||
'销售额': i.sales |
|||
})) |
|||
}, |
|||
{ |
|||
label: '销售额最高', |
|||
highlightCol: 2, |
|||
data: data.topGoods.amount.map(i => ({ |
|||
'商品名称': i.name, |
|||
'销量': i.count, |
|||
'销售额': i.sales |
|||
})) |
|||
}, |
|||
]; |
|||
|
|||
|
|||
const CirclePanel = styled.div`
|
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
height: 420px; |
|||
`;
|
|||
|
|||
const dashboard = ( |
|||
<div> |
|||
<div className="row"> |
|||
<div className="total-display"> |
|||
<OverviewCard image='/img/money.png' title='总营业额' number={salesAmount} isPrice /> |
|||
<OverviewCard image='/img/sales.png' title='总销量' number={salesCount} /> |
|||
<OverviewCard image='/img/order.png' title='订单数量' number={orderCount} /> |
|||
<OverviewCard image='/img/goods.png' title='商品数量' number={goodsCount} /> |
|||
<OverviewCard image='/img/user.png' title='用户数量' number={userCount} /> |
|||
</div> |
|||
</div> |
|||
<div className="row"> |
|||
<LineChart |
|||
title='最近<label>营业额' |
|||
label='营业额' |
|||
prefix='￥' |
|||
data={salesData} |
|||
color='#ed862b' |
|||
/> |
|||
<CirclePanel> |
|||
<CircleCard |
|||
title='当日订单转化率' |
|||
percent={dailyConversionRate.rate} |
|||
growth={dailyConversionRate.growth} |
|||
color='#705fff' |
|||
/> |
|||
<CircleCard |
|||
title='当月订单转化率' |
|||
percent={monthlyConversionRate.rate} |
|||
growth={monthlyConversionRate.growth} |
|||
color='#eb607e' |
|||
/> |
|||
</CirclePanel> |
|||
{/*<Table*/} |
|||
{/*title='<label>的商品'*/} |
|||
{/*data={topGoodsData}*/} |
|||
{/*priceCol={2}*/} |
|||
{/*width='300px'*/} |
|||
{/*/>*/} |
|||
</div> |
|||
<div className="row"> |
|||
<LineChart |
|||
title='最近<days>天日活跃用户数' |
|||
label='日活量' |
|||
unit='人' |
|||
dateCount={4} |
|||
data={[{data: DAU}]} |
|||
color='#17e7ae' |
|||
/> |
|||
<LineChart |
|||
title='最近<days>天新增用户数' |
|||
label='新增用户数' |
|||
unit='人' |
|||
data={[{data: users}]} |
|||
color='#17e7ae' |
|||
/> |
|||
|
|||
{/*<Table*/} |
|||
{/*title='单笔最高'*/} |
|||
{/*data={[{*/} |
|||
{/*highlightCol: 1,*/} |
|||
{/*data: topOrders.map(i => ({*/} |
|||
{/*'名字': i.user.name,*/} |
|||
{/*'金额': i.info.pay_fee*/} |
|||
{/*}))*/} |
|||
{/*}]}*/} |
|||
{/*color='#ed862b'*/} |
|||
{/*priceCol={1}*/} |
|||
{/*/>*/} |
|||
</div> |
|||
</div> |
|||
); |
|||
|
|||
ReactDOM.render( |
|||
dashboard, |
|||
document.getElementById('react') |
|||
); |
|||
@ -1,65 +0,0 @@ |
|||
import ClassNames from "classnames"; |
|||
import {Icon} from "antd"; |
|||
import {Reason} from "./common"; |
|||
import React from "react"; |
|||
import styled from "styled-components"; |
|||
|
|||
export default function MainDescription({currentStep, auditStatusCode, currentStepInfo, currentStatusInfo, currentStepInfoWithStatus}) { |
|||
if (currentStepInfo) { |
|||
return ( |
|||
<Root |
|||
className={ClassNames({ |
|||
'error': currentStep === 2 && (auditStatusCode === 1 || auditStatusCode === 3), |
|||
'warning': currentStep === 2 && !currentStatusInfo |
|||
})} |
|||
> |
|||
<Icon |
|||
type={currentStepInfoWithStatus.icon} |
|||
style={{fontSize: '40px'}} |
|||
/> |
|||
<DescriptionText> |
|||
{currentStepInfoWithStatus.description || currentStepInfoWithStatus.title} |
|||
{(currentStep === 2 && auditStatusCode === 1) && <Reason>{auditStatus.reason}</Reason>} |
|||
</DescriptionText> |
|||
</Root> |
|||
) |
|||
} else { |
|||
return ( |
|||
<LatestTip> |
|||
<Icon type="safety-certificate" theme="filled" style={{fontSize: '120px'}}/> |
|||
<TipText>您的小程序线上版本已经是最新的</TipText> |
|||
</LatestTip> |
|||
) |
|||
} |
|||
} |
|||
|
|||
|
|||
const LatestTip = styled.div`
|
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: space-around; |
|||
color: #33a968; |
|||
`;
|
|||
|
|||
const TipText = styled.div`
|
|||
margin-top: 30px; |
|||
font-size: 1.5em; |
|||
`;
|
|||
|
|||
const Root = styled.div`
|
|||
display: flex; |
|||
align-items: center; |
|||
color: #40a9ff; |
|||
&.error { |
|||
color: #f5222d; |
|||
} |
|||
&.warning { |
|||
color: #f49c00; |
|||
} |
|||
`;
|
|||
|
|||
const DescriptionText = styled.div`
|
|||
margin-left: 20px; |
|||
font-size: 1.2em; |
|||
`;
|
|||
@ -1,132 +0,0 @@ |
|||
import React from "react"; |
|||
import PropTypes from "prop-types"; |
|||
import styled from "styled-components"; |
|||
import {Input, Button, Tag, Alert, message} from "antd"; |
|||
import {LoadingBar, Reason} from "./common"; |
|||
import axios from "axios"; |
|||
|
|||
const colorList = ['magenta', 'red', 'volcano', 'orange', 'gold', 'lime', 'green', 'cyan', 'blue', 'geekblue', 'purple']; |
|||
|
|||
function getRandomInt(min, max) { |
|||
min = Math.ceil(min); |
|||
max = Math.floor(max); |
|||
return Math.floor(Math.random() * (max - min)) + min; //The maximum is exclusive and the minimum is inclusive
|
|||
} |
|||
|
|||
export default class ManageTriers extends React.Component { |
|||
constructor(props) { |
|||
super(props); |
|||
this.state = { |
|||
trierList: null, |
|||
wechatId: '', |
|||
isAddingTrier: false |
|||
}; |
|||
} |
|||
|
|||
static propTypes = {}; |
|||
|
|||
static defaultProps = {}; |
|||
|
|||
componentWillMount() { |
|||
this.getTrierList(); |
|||
} |
|||
|
|||
getTrierList = () => { |
|||
axios.get('/agent/trier-list').then(data => { |
|||
this.setState({trierList: data.map(trier => ({ |
|||
...trier, |
|||
color: colorList[getRandomInt(0, colorList.length - 1)], |
|||
}))}) |
|||
}).catch((err) => this.setState({trierList: err})); |
|||
}; |
|||
|
|||
changeWechatId = (e) => { |
|||
this.setState({wechatId: e.target.value}) |
|||
}; |
|||
|
|||
addTrier = () => { |
|||
const {wechatId} = this.state; |
|||
|
|||
if (wechatId) { |
|||
this.setState({isAddingTrier: true}); |
|||
axios.post('/agent/set-trier', { |
|||
wechatId |
|||
}).then(() => { |
|||
message.success('设置体验者成功'); |
|||
this.setState({isAddingTrier: false, wechatId: ''}); |
|||
this.getTrierList(); |
|||
}).catch(() => { |
|||
this.setState({isAddingTrier: false}) |
|||
}); |
|||
} else { |
|||
message.error('请输入用户微信号') |
|||
} |
|||
}; |
|||
|
|||
render() { |
|||
const {trierList, wechatId, isAddingTrier} = this.state; |
|||
let trierListView; |
|||
|
|||
if (trierList && trierList.length > 0) { |
|||
trierListView = ( |
|||
<TrierList> |
|||
{trierList.map((trier, index) => ( |
|||
<Tag |
|||
key={index} |
|||
color={trier.color} |
|||
>{trier.wechatid}</Tag> |
|||
))} |
|||
</TrierList> |
|||
) |
|||
} else if (trierList && trierList.length === 0) { |
|||
trierListView = <Reason>当前没有体验者</Reason> |
|||
} else if (trierList && typeof trierList === 'string') { |
|||
trierListView = <Reason>{trierList}</Reason> |
|||
} else { |
|||
trierListView = <LoadingBar>加载体验者中</LoadingBar> |
|||
} |
|||
|
|||
return ( |
|||
<Root> |
|||
<Title>体验者微信号列表</Title> |
|||
<Alert message="由于微信限制，只有通过本系统设置的体验者才会在此处显示，在微信公众平台设置的不能在此处显示。" type="info" showIcon /> |
|||
<TrierArea>{trierListView}</TrierArea> |
|||
<Handler> |
|||
<Input |
|||
placeholder='请输入用户微信号' |
|||
value={wechatId} |
|||
allowClear |
|||
onChange={this.changeWechatId} |
|||
/> |
|||
<Button |
|||
type='primary' |
|||
loading={isAddingTrier} |
|||
style={{marginLeft: '10px'}} |
|||
onClick={this.addTrier} |
|||
>添加体验者</Button> |
|||
</Handler> |
|||
</Root> |
|||
) |
|||
} |
|||
} |
|||
|
|||
const Root = styled.div`
|
|||
|
|||
`;
|
|||
|
|||
const Title = styled.div`
|
|||
font-size: 1.2em; |
|||
font-weight: bold; |
|||
margin-bottom: 20px; |
|||
`;
|
|||
|
|||
const TrierArea = styled.div`
|
|||
margin: 20px 0; |
|||
`;
|
|||
|
|||
const Handler = styled.div`
|
|||
display: flex; |
|||
`;
|
|||
|
|||
const TrierList = styled.div`
|
|||
`;
|
|||
@ -1,38 +0,0 @@ |
|||
import React from "react"; |
|||
import {Icon, Steps} from "antd"; |
|||
import {stepInfoList} from "./data"; |
|||
|
|||
const Step = Steps.Step; |
|||
|
|||
export default function StepBar({currentStep, auditStatusCode, currentStatusInfo}) { |
|||
if (currentStep <= 3) { |
|||
return ( |
|||
<Steps |
|||
current={currentStep} |
|||
status={currentStatusInfo && currentStatusInfo.stepStatus} |
|||
> |
|||
{stepInfoList.map(({title, icon, status}, index) => { |
|||
if (index === 2 && status && status[auditStatusCode]) { |
|||
return ( |
|||
<Step |
|||
key={index} |
|||
title={status[auditStatusCode].title} |
|||
icon={<Icon type={status[auditStatusCode].icon}/>} |
|||
/> |
|||
) |
|||
} else { |
|||
return ( |
|||
<Step |
|||
key={index} |
|||
title={title} |
|||
icon={<Icon type={icon}/>} |
|||
/> |
|||
) |
|||
} |
|||
})} |
|||
</Steps> |
|||
) |
|||
} else { |
|||
return <></>; |
|||
} |
|||
} |
|||
@ -1,22 +0,0 @@ |
|||
import React from "react"; |
|||
import styled from "styled-components"; |
|||
import {Icon, Spin} from "antd"; |
|||
const antIcon = <Icon type="loading" style={{fontSize: 24}} spin/>; |
|||
|
|||
const LoadingBarRoot = styled.div`
|
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
margin: 10px 0; |
|||
> span { |
|||
margin-left: 20px; |
|||
} |
|||
`;
|
|||
|
|||
export function LoadingBar({children}) { |
|||
return <LoadingBarRoot><Spin indicator={antIcon}/><span>{children}...</span></LoadingBarRoot> |
|||
} |
|||
|
|||
export const Reason = styled.div`
|
|||
color: #f5222d; |
|||
`;
|
|||
@ -1,146 +0,0 @@ |
|||
import compareVersions from 'compare-versions' |
|||
|
|||
if (ENV_DEV) { |
|||
window.auditStatus = { |
|||
auditid: 438893451, |
|||
errcode: 0, |
|||
errmsg: "ok", |
|||
reason: '你充的钱不够，请再充钱', |
|||
status: 1, // 0: 审核成功，1: 审核失败，2: 审核中，3: 已撤回
|
|||
}; |
|||
|
|||
window.versions = { |
|||
version: "1.4.0", // 第三方平台模板库的最新版本
|
|||
commit_version: "1.3.0", // 上传为体验版
|
|||
audit_version: "", // 最新提交了审核的版本
|
|||
audited_version: "1.2.0", // 审核通过的版本
|
|||
release_version: "", // 线上的版本
|
|||
}; |
|||
|
|||
window.categoriesList = [ |
|||
{"first_class": "商家自营", "second_class": "机械/电子器件", "first_id": 304, "second_id": 788}, |
|||
{"first_class": "商家自营2", "second_class": "机械/电子器件", "first_id": 304, "second_id": 788}, |
|||
{"first_class": "商家自营3", "second_class": "机械/电子器件", "first_id": 304, "second_id": 788}, |
|||
{"first_class": "商家自营4", "second_class": "机械/电子器件", "first_id": 304, "second_id": 788}, |
|||
{"first_class": "商家自营5", "second_class": "机械/电子器件", "first_id": 304, "second_id": 788}, |
|||
{"first_class": "商家自营6", "second_class": "机械/电子器件", "first_id": 304, "second_id": 788}, |
|||
]; |
|||
} |
|||
|
|||
const {auditStatus, versions, categoriesList} = window; |
|||
|
|||
const {version, commit_version, audit_version, audited_version, release_version} = versions; |
|||
|
|||
const versionsArray = [version, commit_version, audit_version, audited_version, release_version]; |
|||
|
|||
const stepInfoList = [ |
|||
{ |
|||
title: '上传', |
|||
buttonText: '上传小程序代码', |
|||
icon: 'cloud-upload', |
|||
url: 'commit', |
|||
description: '将代码上传到微信公众平台，使其成为体验版' |
|||
}, |
|||
{ |
|||
title: '审核', |
|||
buttonText: '提交审核', |
|||
icon: 'audit', |
|||
url: 'submit-audit', |
|||
action: 'submitAudit', |
|||
description: '微信小程序均需要审核后才能上线，一般情况下24小时内即可完成审核' |
|||
}, |
|||
{ |
|||
title: '审核结果未知', |
|||
icon: 'question-circle', |
|||
buttonIcon: 'audit', |
|||
url: 'submit-audit', |
|||
action: 'submitAudit', |
|||
status: { |
|||
0: { |
|||
title: '审核通过', |
|||
icon: 'check-circle', |
|||
}, |
|||
1: { |
|||
title: '审核不通过', |
|||
icon: 'close-circle', |
|||
stepStatus: 'error', |
|||
buttonText: '重新提交审核', |
|||
description: '审核不通过，原因：' |
|||
}, |
|||
2: { |
|||
title: '等待审核结果', |
|||
icon: 'sync', |
|||
description: '请耐心等待微信的审核结果，一般情况下 24 小时内即可完成审核，节假日审核可能需要一到三天' |
|||
}, |
|||
3: { |
|||
title: '审核已撤回', |
|||
icon: 'rollback', |
|||
stepStatus: 'error', |
|||
buttonText: '重新提交审核', |
|||
description: '有人手动操作撤回了本次审核，请重新提交审核' |
|||
} |
|||
} |
|||
}, |
|||
{ |
|||
title: '发布', |
|||
buttonText: '发布新版', |
|||
icon: 'export', |
|||
url: 'release', |
|||
description: '新版本的小程序需要等下一次冷启动，即退出超过一定时间（目前是5分钟）后才会应用上。' |
|||
}, |
|||
]; |
|||
|
|||
const initVersionList = [ |
|||
{ |
|||
label: '版本库最新版本', |
|||
value: version |
|||
}, |
|||
{ |
|||
label: '体验版版本', |
|||
value: commit_version |
|||
}, |
|||
{ |
|||
label: '审核中版本', |
|||
value: auditStatus.status === 2 ? audit_version : '无' |
|||
}, |
|||
{ |
|||
label: '已审核版本', |
|||
value: audited_version |
|||
}, |
|||
{ |
|||
label: '线上版本', |
|||
value: release_version |
|||
}, |
|||
]; |
|||
|
|||
let canRelease = false; |
|||
|
|||
// 查找第一个需要完成的步骤
|
|||
let _currentStep = versionsArray[0] ? 0 : 4; |
|||
|
|||
if (versionsArray[2] && auditStatus.status === 2) { |
|||
_currentStep = 2; |
|||
} else if (versionsArray[0]) { |
|||
_currentStep = versionsArray.findIndex((currentVersion, index) => { |
|||
const nextItem = versionsArray[index + 1]; |
|||
return !nextItem || compareVersions(currentVersion, nextItem) > 0 |
|||
}); |
|||
} |
|||
|
|||
let _auditStatusCode = auditStatus.status; |
|||
|
|||
if (_currentStep === -1) { |
|||
_currentStep = 4; |
|||
} |
|||
|
|||
if (_currentStep !== 2) { |
|||
_auditStatusCode = 2; |
|||
} |
|||
|
|||
const currentStep = _currentStep; |
|||
const auditStatusCode = _auditStatusCode; |
|||
const latestVersion = version; |
|||
const auditedVersion = audited_version; |
|||
|
|||
export {currentStep, auditStatusCode, initVersionList, stepInfoList, latestVersion, |
|||
auditedVersion, categoriesList} |
|||
@ -1,397 +0,0 @@ |
|||
import React, {useState} from "react"; |
|||
import styled from "styled-components"; |
|||
import ReactDOM from "react-dom"; |
|||
import {Icon, Button, Alert, Modal, message, LocaleProvider, Checkbox} from 'antd'; |
|||
import zhCN from 'antd/lib/locale-provider/zh_CN'; |
|||
import axios from 'axios' |
|||
import compareVersions from 'compare-versions' |
|||
import '../utils/ajax' |
|||
import {stepInfoList, currentStep, auditStatusCode, initVersionList, latestVersion, categoriesList, |
|||
auditedVersion, canRelease} from './data' |
|||
import {LoadingBar, Reason} from "./common"; |
|||
import ManageTriers from './ManageTriers' |
|||
import StepBar from './StepBar' |
|||
import MainDescription from './MainDescription' |
|||
import '../utils/ajax' |
|||
|
|||
const CheckboxGroup = Checkbox.Group; |
|||
|
|||
function getStepInfo(stepIndex, currentStepInfo, auditStatusCode) { |
|||
if (stepIndex === 2 && currentStepInfo.status && currentStepInfo.status[auditStatusCode]) { |
|||
return { |
|||
title: currentStepInfo.status[auditStatusCode].title, |
|||
icon: currentStepInfo.status[auditStatusCode].icon, |
|||
description: currentStepInfo.status[auditStatusCode].description |
|||
} |
|||
} else { |
|||
return { |
|||
title: currentStepInfo.title, |
|||
icon: currentStepInfo.icon, |
|||
description: currentStepInfo.description |
|||
} |
|||
} |
|||
} |
|||
|
|||
export default class MiniProgramManagement extends React.Component { |
|||
constructor(props) { |
|||
super(props); |
|||
|
|||
this.state = { |
|||
currentStep, |
|||
versionList: initVersionList, |
|||
auditStatusCode, |
|||
qrCodeToTry: null, |
|||
isLoadingAction: false, |
|||
isShowModalForQrCode: false, |
|||
isShowModalForTrier: false, |
|||
isShowModalForAudit: false, |
|||
isShowReleaseAlert: canRelease, |
|||
checkedCategoryIndexList: [0] |
|||
}; |
|||
} |
|||
|
|||
static defaultProps = {}; |
|||
|
|||
static propTypes = {}; |
|||
|
|||
handleAction = () => { |
|||
const {currentStep} = this.state; |
|||
const {url, action} = stepInfoList[currentStep]; |
|||
|
|||
if (action === 'submitAudit') { |
|||
this.setState({isShowModalForAudit: true}) |
|||
} else { |
|||
this.commitAction(url); |
|||
} |
|||
}; |
|||
|
|||
commitAction = (url, params = {}, independentAction) => { |
|||
const {currentStep} = this.state; |
|||
let {versionList} = this.state; |
|||
const {buttonText} = stepInfoList[currentStep]; |
|||
|
|||
independentAction || this.setState({isLoadingAction: true}); |
|||
axios.post(`/agent/${url}`, params).then(() => { |
|||
if (independentAction) { |
|||
message.success(independentAction + '成功'); |
|||
if (independentAction === '发布') { |
|||
// 更新线上版本
|
|||
versionList[4].value = versionList[3].value; |
|||
this.setState({isShowReleaseAlert: false}) |
|||
} |
|||
} else if (currentStep === 2) { |
|||
// 重新提交审核，不切换到下一个步骤
|
|||
this.setState({ |
|||
auditStatusCode: 2, |
|||
isLoadingAction: false |
|||
}); |
|||
message.success((buttonText || '重新提交审核') + '成功'); |
|||
} else { |
|||
// 切换到下一个步骤
|
|||
versionList[currentStep + 1].value = versionList[currentStep].value; |
|||
|
|||
this.setState({ |
|||
currentStep: currentStep + 1, |
|||
isLoadingAction: false, |
|||
versionList |
|||
}); |
|||
|
|||
message.success((buttonText || '重新提交审核') + '成功'); |
|||
|
|||
if (currentStep === 1) { |
|||
this.setState({ |
|||
auditStatusCode: 2 |
|||
}); |
|||
} else if (currentStep === 3) { |
|||
Modal.info({ |
|||
title: '提示', |
|||
content: stepInfoList[3].description, |
|||
cancelText: '', |
|||
}) |
|||
} |
|||
} |
|||
}).catch(() => { |
|||
this.setState({isLoadingAction: false}) |
|||
}) |
|||
}; |
|||
|
|||
hideModalFoeAudit = () => { |
|||
this.setState({isShowModalForAudit: false}) |
|||
}; |
|||
|
|||
submitAudit = () => { |
|||
const {currentStep, checkedCategoryIndexList} = this.state; |
|||
const {url} = stepInfoList[currentStep]; |
|||
|
|||
if (checkedCategoryIndexList && checkedCategoryIndexList.length > 0) { |
|||
this.hideModalFoeAudit(); |
|||
this.commitAction(url, {categories: checkedCategoryIndexList}); |
|||
this.setState({isLoadingAction: true}); |
|||
} else { |
|||
message.error('应至少选择一个分类') |
|||
} |
|||
}; |
|||
|
|||
showManagingTrier = () => { |
|||
this.setState({isShowModalForTrier: true, trierList: null}); |
|||
}; |
|||
|
|||
showModalForQrCode = () => { |
|||
this.setState({isShowModalForQrCode: true, qrCodeToTry: ''}); |
|||
axios.get('/agent/qr-code-to-try').then(data => { |
|||
this.setState({qrCodeToTry: data.image}) |
|||
}).catch((err) => this.setState({qrCodeToTry: `error: ${err}`})); |
|||
}; |
|||
|
|||
hideModalForQrCode = () => { |
|||
this.setState({isShowModalForQrCode: false}); |
|||
}; |
|||
|
|||
hideModalForTrier = () => { |
|||
this.setState({isShowModalForTrier: false}); |
|||
}; |
|||
|
|||
handleChangeCategory = (value) => { |
|||
this.setState({ |
|||
checkedCategoryIndexList: value |
|||
}) |
|||
}; |
|||
|
|||
render() { |
|||
const {currentStep, versionList, isLoadingAction, auditStatusCode, isShowModalForQrCode, isShowModalForAudit, |
|||
isShowModalForTrier, qrCodeToTry, isAddingTrier, checkedCategoryIndexList} = this.state; |
|||
const currentStepInfo = stepInfoList[currentStep]; |
|||
const currentStatusInfo = currentStepInfo && currentStepInfo.status && currentStepInfo.status[auditStatusCode]; |
|||
const currentStepInfoWithStatus = currentStepInfo && getStepInfo(currentStep, currentStepInfo, auditStatusCode); |
|||
|
|||
const isShowReleaseAlert = currentStep !== 2 && currentStep !== 3 && versionList[3].value && |
|||
(!versionList[4].value || compareVersions(versionList[3].value, versionList[4].value) > 0); |
|||
|
|||
return ( |
|||
<Root> |
|||
<Container> |
|||
<StepBar currentStep={currentStep} auditStatusCode={auditStatusCode} currentStatusInfo={currentStatusInfo} /> |
|||
<Content> |
|||
<Description> |
|||
{currentStep === 0 && ( |
|||
<MessageAlert> |
|||
<Alert |
|||
message={( |
|||
<UpdateTip> |
|||
有新的版本<LatestVersion>{latestVersion}</LatestVersion>，建议进行更新。 |
|||
<GotoChangeLog href="/weapp/log">看看更新了什么</GotoChangeLog> |
|||
</UpdateTip> |
|||
)} |
|||
type="success" |
|||
showIcon |
|||
icon={<Icon type="bulb" theme="twoTone"/>} |
|||
/> |
|||
</MessageAlert> |
|||
)} |
|||
{isShowReleaseAlert && ( |
|||
<MessageAlert> |
|||
<Alert |
|||
message={( |
|||
<UpdateTip> |
|||
有旧的已审核版本<LatestVersion>{auditedVersion}</LatestVersion>，可以 |
|||
<GotoChangeLog |
|||
onClick={this.commitAction.bind(undefined, 'release', undefined, '发布')} |
|||
>发布此版本</GotoChangeLog> |
|||
</UpdateTip> |
|||
)} |
|||
type="info" |
|||
showIcon |
|||
closable |
|||
/> |
|||
</MessageAlert> |
|||
)} |
|||
<MainDescription |
|||
currentStep={currentStep} |
|||
auditStatusCode={auditStatusCode} |
|||
currentStatusInfo={currentStepInfo} |
|||
currentStepInfo={currentStepInfo} |
|||
currentStepInfoWithStatus={currentStepInfoWithStatus} |
|||
/> |
|||
</Description> |
|||
{(currentStepInfo && currentStepInfo.buttonText || currentStatusInfo && currentStatusInfo.buttonText) && ( |
|||
<Operation> |
|||
<Button |
|||
type='primary' |
|||
icon={ |
|||
stepInfoList[currentStep].buttonIcon || |
|||
stepInfoList[currentStep].icon |
|||
} |
|||
loading={isLoadingAction} |
|||
onClick={this.handleAction} |
|||
> |
|||
{currentStepInfo.buttonText || currentStatusInfo && currentStatusInfo.buttonText} |
|||
</Button> |
|||
</Operation> |
|||
)} |
|||
<Versions> |
|||
{versionList.map(({label, value}, index) => ( |
|||
<VersionItem key={index}> |
|||
<Label>{label}</Label> |
|||
<Value>{value || '无'}</Value> |
|||
</VersionItem> |
|||
))} |
|||
</Versions> |
|||
<Handler> |
|||
<Button type='primary' onClick={this.showModalForQrCode}>查看体验版二维码</Button> |
|||
<Button type='primary' onClick={this.showManagingTrier}>添加体验者</Button> |
|||
</Handler> |
|||
</Content> |
|||
</Container> |
|||
<Modal |
|||
visible={isShowModalForAudit} |
|||
title='提交审核' |
|||
onOk={this.submitAudit} |
|||
onCancel={this.hideModalFoeAudit} |
|||
> |
|||
<Alert |
|||
message="请选择小程序所属类目，至少选择1项，最多选择5项" |
|||
type="info" |
|||
showIcon |
|||
style={{ marginBottom: 20 }} |
|||
/> |
|||
{checkedCategoryIndexList.length >= 5 && ( |
|||
<Alert |
|||
message="已达到最大可选数量，不能再继续选择其它分类" |
|||
type="warning" |
|||
showIcon |
|||
style={{ marginBottom: 20 }} |
|||
/> |
|||
)} |
|||
<CheckboxGroup |
|||
value={checkedCategoryIndexList} |
|||
options={categoriesList.map(({first_class, second_class, third_class}, index) => ({ |
|||
label: ( |
|||
<CheckboxItem> |
|||
<CategoryName>{first_class}</CategoryName> |
|||
<span>＞</span> |
|||
<CategoryName>{second_class}</CategoryName> |
|||
{third_class && <><span>＞</span><CategoryName>{third_class}</CategoryName></>} |
|||
</CheckboxItem> |
|||
), |
|||
value: index, |
|||
disabled: checkedCategoryIndexList.length >= 5 && !checkedCategoryIndexList.includes(index) |
|||
}))} |
|||
onChange={this.handleChangeCategory} |
|||
/> |
|||
</Modal> |
|||
<Modal |
|||
visible={isShowModalForQrCode} |
|||
title='查看体验二维码' |
|||
cancelButtonProps={{style: {display: 'none'}}} |
|||
onOk={this.hideModalForQrCode} |
|||
onCancel={this.hideModalForQrCode} |
|||
> |
|||
{qrCodeToTry ? (qrCodeToTry.startsWith('error: ') ? <Reason>{qrCodeToTry.substr(6)}</Reason> : |
|||
<img src={qrCodeToTry} alt=""/>) : ( |
|||
<LoadingBar>加载中...</LoadingBar> |
|||
)} |
|||
</Modal> |
|||
<Modal |
|||
visible={isShowModalForTrier} |
|||
title='设置体验者' |
|||
confirmLoading={isAddingTrier} |
|||
cancelButtonProps={{style: {display: 'none'}}} |
|||
onOk={this.hideModalForTrier} |
|||
onCancel={this.hideModalForTrier} |
|||
> |
|||
<ManageTriers /> |
|||
</Modal> |
|||
</Root> |
|||
) |
|||
} |
|||
} |
|||
|
|||
const Root = styled.div`
|
|||
`;
|
|||
|
|||
const Container = styled.div`
|
|||
max-width: 600px; |
|||
margin: auto; |
|||
`;
|
|||
|
|||
const Content = styled.div`
|
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-around; |
|||
align-items: center; |
|||
min-height: 300px; |
|||
padding: 20px; |
|||
`;
|
|||
|
|||
const Description = styled.div`
|
|||
max-width: 400px; |
|||
margin-bottom: 30px; |
|||
`;
|
|||
|
|||
const Operation = styled.div`
|
|||
margin-bottom: 20px; |
|||
`;
|
|||
|
|||
const Versions = styled.div`
|
|||
display: table-row-group; |
|||
`;
|
|||
|
|||
const VersionItem = styled.div`
|
|||
display: table-row; |
|||
`;
|
|||
|
|||
const Label = styled.div`
|
|||
display: table-cell; |
|||
padding: 5px 20px; |
|||
`;
|
|||
|
|||
const Value = styled.div`
|
|||
display: table-cell; |
|||
padding: 5px 10px; |
|||
text-align: center; |
|||
color: #1c7cff; |
|||
`;
|
|||
|
|||
const Handler = styled.div`
|
|||
display: flex; |
|||
margin-top: 20px; |
|||
> button { |
|||
margin: 0 10px; |
|||
} |
|||
`;
|
|||
|
|||
const MessageAlert = styled.div`
|
|||
margin-bottom: 20px; |
|||
`;
|
|||
|
|||
const UpdateTip = styled.div`
|
|||
|
|||
`
|
|||
|
|||
const LatestVersion = styled.span`
|
|||
margin: 0 5px; |
|||
color: #f49c00; |
|||
`;
|
|||
|
|||
const GotoChangeLog = styled.a`
|
|||
margin-left: 5px; |
|||
`;
|
|||
|
|||
const CheckboxItem = styled.div`
|
|||
display: inline; |
|||
color: #aaa; |
|||
line-height: 2; |
|||
`;
|
|||
|
|||
const CategoryName = styled.span`
|
|||
color: #000; |
|||
margin: 0 5px; |
|||
font-weight: normal; |
|||
`;
|
|||
|
|||
ReactDOM.render( |
|||
<LocaleProvider locale={zhCN}> |
|||
<MiniProgramManagement/> |
|||
</LocaleProvider>, |
|||
document.getElementById('mini-program-management') |
|||
); |
|||
@ -1,127 +0,0 @@ |
|||
import React from "react"; |
|||
import PropTypes from "prop-types"; |
|||
import styled from "styled-components"; |
|||
import {setLightness} from 'polished' |
|||
import dayjs from 'dayjs' |
|||
|
|||
export default class Card extends React.Component { |
|||
constructor(props) { |
|||
super(props); |
|||
this.state = {}; |
|||
} |
|||
|
|||
static propTypes = { |
|||
icon: PropTypes.string, |
|||
title: PropTypes.string, |
|||
color: PropTypes.string, |
|||
data: PropTypes.arrayOf(PropTypes.object) |
|||
}; |
|||
|
|||
static defaultProps = { |
|||
icon: '', |
|||
title: '', |
|||
color: '#5845e9', |
|||
data: [] |
|||
}; |
|||
|
|||
render() { |
|||
const {icon, title, color, data} = this.props; |
|||
return ( |
|||
<Root> |
|||
<Header color={color}> |
|||
<Icon className={'fa ' + ('fa-' + icon)} color={color} /> |
|||
<Title>{title}</Title> |
|||
</Header> |
|||
<Body> |
|||
{data.map((item, index) => { |
|||
let value = item.value; |
|||
|
|||
if (item.type === 'time') { |
|||
value = dayjs(item.value * 1000).format('YYYY-MM-DD HH:mm:ss') |
|||
} else if (item.type === 'price') { |
|||
value = `${item.prefix || ''}￥${value}`; |
|||
} |
|||
|
|||
return ( |
|||
<Row key={index}> |
|||
<Label>{item.label}</Label> |
|||
<Value |
|||
className={'card-type__' + item.type} |
|||
> |
|||
{value || '无'} |
|||
{(item.link && item.link.url) && <a href={item.link.url}>{item.link.text}</a>} |
|||
</Value> |
|||
</Row> |
|||
) |
|||
})} |
|||
</Body> |
|||
</Root> |
|||
) |
|||
} |
|||
} |
|||
|
|||
const iconSize = 50; |
|||
|
|||
const Root = styled.div`
|
|||
//width: 300px;
|
|||
flex-grow: 1; |
|||
margin: 10px; |
|||
border-radius: 10px; |
|||
background: #fff; |
|||
box-shadow: 0 0 20px 0 rgba(0, 0, 0, .1); |
|||
`;
|
|||
|
|||
const Header = styled.div`
|
|||
position: relative; |
|||
padding: 10px; |
|||
border-radius: 10px 10px 0 0; |
|||
background: ${props => setLightness(.95, props.color)}; |
|||
color: ${props => setLightness(.2, props.color)}; |
|||
`;
|
|||
|
|||
const Icon = styled.div`
|
|||
position: absolute; |
|||
left: 10px; |
|||
bottom: -${iconSize / 2}px; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
width: ${iconSize}px; |
|||
height: ${iconSize}px; |
|||
font-size: ${iconSize / 2}px!important; |
|||
border-radius: 100%; |
|||
background: ${props => props.color}; |
|||
color: #fff; |
|||
box-shadow: 0 2px 20px 3px rgba(0, 0, 0, .2); |
|||
`;
|
|||
|
|||
const Body = styled.div`
|
|||
padding: 10px 20px; |
|||
min-height: 100px; |
|||
margin-top: ${iconSize / 2}px; |
|||
`;
|
|||
|
|||
const Title = styled.div`
|
|||
margin-left: ${iconSize + 10}px; |
|||
font-weight: bold; |
|||
`;
|
|||
|
|||
const Row = styled.div`
|
|||
display: table-row; |
|||
`;
|
|||
|
|||
const Label = styled.div`
|
|||
display: table-cell; |
|||
font-weight: bold; |
|||
padding: 10px 20px 10px 0; |
|||
`;
|
|||
|
|||
const Value = styled.div`
|
|||
display: table-cell; |
|||
&.card-type__price { |
|||
color: #e83139; |
|||
} |
|||
a { |
|||
margin-left: 10px; |
|||
} |
|||
`;
|
|||
@ -1,77 +0,0 @@ |
|||
import React from "react"; |
|||
import PropTypes from "prop-types"; |
|||
import styled from "styled-components"; |
|||
|
|||
export default class GoodsCard extends React.Component { |
|||
constructor(props) { |
|||
super(props); |
|||
this.state = {}; |
|||
} |
|||
|
|||
static propTypes = { |
|||
goodsInfo: PropTypes.object.isRequired |
|||
}; |
|||
|
|||
static defaultProps = { |
|||
goodsInfo: {} |
|||
}; |
|||
|
|||
render() { |
|||
const {goodsInfo} = this.props; |
|||
|
|||
return ( |
|||
<Root> |
|||
<Left><img src={`${ENV_DEV ? '//demo.kcshop.pro' : ''}${goodsInfo.goods_img}`} alt=""/></Left> |
|||
<Right> |
|||
<div>{goodsInfo.goods_name}</div> |
|||
{goodsInfo.sku_type && <Sku>规格：{goodsInfo.sku_type}</Sku>} |
|||
<Price>￥{goodsInfo.shop_price}</Price> |
|||
</Right> |
|||
<Other>x{goodsInfo.goods_number}</Other> |
|||
</Root> |
|||
) |
|||
} |
|||
} |
|||
|
|||
const Root = styled.div`
|
|||
display: flex; |
|||
padding: 10px 20px; |
|||
margin: 10px 0; |
|||
&:not(:last-child) { |
|||
border-bottom: 1px solid #eee; |
|||
} |
|||
`;
|
|||
|
|||
const imageSize = 60; |
|||
const Left = styled.div`
|
|||
width: ${imageSize}px; |
|||
height: ${imageSize}px; |
|||
img { |
|||
max-width: 100%; |
|||
max-height: 100%; |
|||
} |
|||
`;
|
|||
|
|||
const Right = styled.div`
|
|||
flex-grow: 1; |
|||
margin-left: 10px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-around; |
|||
`;
|
|||
|
|||
const Other = styled.div`
|
|||
display: flex; |
|||
align-items: center; |
|||
`;
|
|||
|
|||
const Sku = styled.div`
|
|||
color: #aaa; |
|||
font-size: .8em; |
|||
`;
|
|||
|
|||
const Price = styled.div`
|
|||
display: flex; |
|||
align-items: center; |
|||
color: #e83139; |
|||
`;
|
|||
@ -1,23 +0,0 @@ |
|||
export default function getStatus(order) { |
|||
if (!order) return '无'; |
|||
let orderStatus = parseInt(order.order_status); |
|||
let payStatus = parseInt(order.pay_status); |
|||
let shippingStatus = parseInt(order.shipping_status); |
|||
|
|||
if (orderStatus === 1 && payStatus === 1) { |
|||
return '付款确认中' |
|||
} else if (orderStatus === 1 && payStatus === 2) { |
|||
// 物流状态
|
|||
let shippingStatusText; |
|||
if (order.shipping_type === 1) { |
|||
shippingStatusText = ['待提货', '待提货', '已收货', '正在退货中']; |
|||
} else { |
|||
shippingStatusText = ['待发货', '待收货', '已收货', '正在退货中']; |
|||
} |
|||
return shippingStatusText[shippingStatus] || '已付款'; |
|||
} |
|||
|
|||
const orderStatusText = ['未确认', '待付款', '已取消', '申请退款中', '已关闭', '已退款', '已完成']; |
|||
|
|||
return orderStatusText[orderStatus] || '未知'; |
|||
} |
|||
@ -1,206 +0,0 @@ |
|||
import React from "react"; |
|||
import PropTypes from "prop-types"; |
|||
import styled from "styled-components"; |
|||
import ReactDOM from "react-dom"; |
|||
import GoodsCard from './GoodsCard' |
|||
import Card from './Card' |
|||
import getOrderStatus from './getOrderStatus' |
|||
import {Collapse} from 'antd'; |
|||
const Panel = Collapse.Panel; |
|||
|
|||
export default class DetailDisplay extends React.Component { |
|||
constructor(props) { |
|||
super(props); |
|||
this.state = {}; |
|||
} |
|||
|
|||
static defaultProps = {}; |
|||
|
|||
static propTypes = {}; |
|||
|
|||
render() { |
|||
const {id, order_sn, goodsList, consignee, tel, created_at, pay_at, |
|||
goods_fee, shipping_fee, pay_fee, discount_money, remark, |
|||
postscript, pay_id, pay_type, shipping_type, goods_amount, province, city, |
|||
district, address, shipping_sn, shipping_detail_link |
|||
} = order_info; |
|||
|
|||
let userInfo = [ |
|||
{ |
|||
label: '备注', |
|||
value: postscript, |
|||
}, |
|||
{ |
|||
label: '配送方式', |
|||
value: shipping_type, |
|||
}, |
|||
{ |
|||
label: '支付来源', |
|||
value: pay_id, |
|||
}, |
|||
{ |
|||
label: '支付方式', |
|||
value: pay_type, |
|||
}, |
|||
]; |
|||
|
|||
if (shipping_type === '快递配送') { |
|||
userInfo = [ |
|||
{ |
|||
label: '地区', |
|||
value: province + city + district, |
|||
}, |
|||
{ |
|||
label: '详细地址', |
|||
value: address, |
|||
}, |
|||
{ |
|||
label: '联系人', |
|||
value: consignee, |
|||
}, |
|||
{ |
|||
label: '联系电话', |
|||
value: tel, |
|||
}, |
|||
...userInfo |
|||
] |
|||
} else { |
|||
userInfo = [ |
|||
{ |
|||
label: '提货人', |
|||
value: consignee, |
|||
}, |
|||
{ |
|||
label: '联系电话', |
|||
value: tel, |
|||
}, |
|||
...userInfo |
|||
]; |
|||
} |
|||
return ( |
|||
<Root> |
|||
<CardList> |
|||
<Card |
|||
icon='info' |
|||
title='基本信息' |
|||
color='#55cbb8' |
|||
data={[ |
|||
{ |
|||
label: '订单状态', |
|||
value: getOrderStatus(order_info), |
|||
}, |
|||
{ |
|||
label: '订单号', |
|||
value: order_sn, |
|||
}, |
|||
{ |
|||
label: '发货单号', |
|||
value: shipping_sn, |
|||
link: { |
|||
url: shipping_detail_link, |
|||
text: '查看' |
|||
} |
|||
}, |
|||
{ |
|||
label: '数量', |
|||
value: goods_amount, |
|||
},{ |
|||
label: '下单时间', |
|||
value: created_at, |
|||
type: 'time' |
|||
}, |
|||
{ |
|||
label: '支付时间', |
|||
value: pay_at, |
|||
type: 'time' |
|||
}, |
|||
]} |
|||
/> |
|||
<Card |
|||
icon='contacts' |
|||
title='客户信息' |
|||
color='#6254a6' |
|||
data={userInfo} |
|||
/> |
|||
<Card |
|||
icon='money' |
|||
title='价格' |
|||
color='#ef5e5c' |
|||
data={[ |
|||
{ |
|||
label: '商品价格', |
|||
value: goods_fee, |
|||
type: 'price' |
|||
}, |
|||
{ |
|||
label: '运费', |
|||
value: shipping_fee, |
|||
type: 'price', |
|||
prefix: '+' |
|||
}, |
|||
{ |
|||
label: '优惠金额', |
|||
value: discount_money, |
|||
type: 'price', |
|||
prefix: '-' |
|||
}, |
|||
{ |
|||
label: '优惠内容', |
|||
value: remark, |
|||
}, |
|||
{ |
|||
label: '实付金额', |
|||
value: pay_fee, |
|||
type: 'price' |
|||
}, |
|||
]} |
|||
/> |
|||
</CardList> |
|||
<GoodsArea> |
|||
<Collapse> |
|||
<Panel header="商品列表" key="1"> |
|||
<GoodsList> |
|||
{goodsList.map(goodsInfo => ( |
|||
<GoodsCard key={goodsInfo.id} goodsInfo={goodsInfo} /> |
|||
))} |
|||
</GoodsList> |
|||
</Panel> |
|||
</Collapse> |
|||
</GoodsArea> |
|||
</Root> |
|||
) |
|||
} |
|||
} |
|||
|
|||
const Root = styled.div`
|
|||
|
|||
`;
|
|||
|
|||
const GoodsList = styled.div`
|
|||
|
|||
`;
|
|||
|
|||
const CardList = styled.div`
|
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
margin: 10px -10px; |
|||
`;
|
|||
|
|||
const GoodsArea = styled.div`
|
|||
max-width: 500px; |
|||
margin-bottom: 20px; |
|||
.ant-collapse { |
|||
border: none; |
|||
box-shadow: 0 0 20px 0 rgba(0, 0, 0, .1); |
|||
} |
|||
.ant-collapse-header { |
|||
background: #fbf5e8; |
|||
color: #573e07!important; |
|||
border: none; |
|||
} |
|||
`;
|
|||
|
|||
ReactDOM.render( |
|||
<DetailDisplay />, |
|||
document.getElementById('detail-display') |
|||
); |
|||
@ -1,171 +0,0 @@ |
|||
import React, {useState} from 'react' |
|||
import ReactDOM from 'react-dom' |
|||
import {Table, Select, InputNumber, Button, message, LocaleProvider} from "antd"; |
|||
import styled from 'styled-components' |
|||
import produce from 'immer' |
|||
import axios from 'axios' |
|||
import zhCN from 'antd/lib/locale-provider/zh_CN'; |
|||
import queryString from 'qs'; |
|||
import '../utils/ajax' |
|||
|
|||
const {allSku, existingSku} = window.data; |
|||
|
|||
const Option = Select.Option; |
|||
|
|||
const Fragment = React.Fragment; |
|||
|
|||
const skuColumnsData = [ |
|||
{ |
|||
key: 'id', |
|||
title: '规格', |
|||
type: 'select' |
|||
}, |
|||
{ |
|||
key: 'price', |
|||
title: '价格', |
|||
type: 'input', |
|||
isPrice: true, |
|||
precision: 2, |
|||
min: 0 |
|||
}, |
|||
{ |
|||
key: 'stock', |
|||
title: '库存（-1 为不限库存）', |
|||
type: 'input', |
|||
precision: 0, |
|||
min: -1 |
|||
} |
|||
]; |
|||
|
|||
function SkuTable({ data, allSkuOptions, onChangeItem, onDeleteItem }) { |
|||
const skuColumns = skuColumnsData.map(({key, title, type, precision, min, isPrice = false}, index) => ({ |
|||
title, |
|||
dataIndex: index, |
|||
key, |
|||
align: 'center', |
|||
render: (value, _, rowIndex) => ( |
|||
<Fragment> |
|||
{type === 'select' ? ( |
|||
<Select |
|||
value={data[rowIndex][key]} |
|||
style={{ width: '100%', minWidth: '200px' }} |
|||
onChange={newValue => onChangeItem(rowIndex, key, Number(newValue))} |
|||
> |
|||
{allSkuOptions.filter(i => data.every((j, index) => index === rowIndex || i.id !== j.id)) |
|||
.map(({ id, name }) => <Option key={id} value={id}>{name}</Option>)} |
|||
</Select> |
|||
) : ( |
|||
<InputNumber |
|||
type='number' |
|||
value={data[rowIndex][key]} |
|||
style={{ width: '100%', minWidth: '50px' }} |
|||
precision={precision} |
|||
min={min} |
|||
onChange={value => onChangeItem(rowIndex, key, value)} |
|||
/> |
|||
)} |
|||
</Fragment> |
|||
) |
|||
})); |
|||
|
|||
const columns = [ |
|||
...skuColumns, |
|||
{ |
|||
key: 'delete', |
|||
title: '操作', |
|||
render: (_1, _2, index) => <a href="javascript:void(0);" onClick={() => onDeleteItem(index)}>删除</a> |
|||
} |
|||
]; |
|||
|
|||
const dataSource = data.map((item, index) => ({ key: index, ...item })); |
|||
|
|||
return ( |
|||
<Fragment> |
|||
<Table dataSource={dataSource} columns={columns} pagination={false} /> |
|||
</Fragment> |
|||
) |
|||
} |
|||
|
|||
const allSkuOptions = allSku.map(({ id, value}) => ({ id, name: value })); |
|||
|
|||
function App() { |
|||
const skuId = queryString.parse(location.search.substr(1)).id; |
|||
const [data, setData] = useState(existingSku.map(({id, value, ...others}) => ({ |
|||
id: allSku.find(i => i.value === value).id, |
|||
...others |
|||
}))); |
|||
|
|||
function setItem(skuIndex, key, value) { |
|||
setData(produce(data, draftState => { |
|||
draftState[skuIndex][key] = value; |
|||
|
|||
if (key === 'id') { |
|||
const {price, stock} = allSku.find(({id}) => id === value); |
|||
draftState[skuIndex].price = price; |
|||
draftState[skuIndex].stock = stock; |
|||
} |
|||
})); |
|||
} |
|||
|
|||
function deleteItem(index) { |
|||
setData(produce(data, draftState => { |
|||
draftState.splice(index, 1) |
|||
})); |
|||
} |
|||
|
|||
function addItem() { |
|||
setData([...data, { |
|||
id: null, |
|||
price: null, |
|||
stock: null |
|||
}]) |
|||
} |
|||
|
|||
async function save() { |
|||
let errorMessage = '请填写完整的信息'; |
|||
|
|||
const isAllDataCorrect = data.every(item => { |
|||
return Object.keys(item) |
|||
.every(key => item[key] !== undefined && item[key] !== null && item[key] !== ''); |
|||
}); |
|||
|
|||
if (isAllDataCorrect) { |
|||
await axios.post('update-sku', { id: skuId, data }); |
|||
message.success('保存成功'); |
|||
history.back(); |
|||
} else { |
|||
message.error(errorMessage) |
|||
} |
|||
} |
|||
|
|||
return ( |
|||
<Wrapper> |
|||
<SkuTable |
|||
data={data} |
|||
allSkuOptions={allSkuOptions} |
|||
onChangeItem={setItem} |
|||
onDeleteItem={deleteItem} |
|||
/> |
|||
<ButtonGroup> |
|||
<Button type='primary' onClick={addItem}>新增一行</Button> |
|||
<Button type='primary' style={{ marginLeft: '20px' }} onClick={save}>保存</Button> |
|||
<Button style={{ marginLeft: '20px' }} onClick={() => history.back()}>返回</Button> |
|||
</ButtonGroup> |
|||
</Wrapper> |
|||
) |
|||
} |
|||
|
|||
const ButtonGroup = styled.div`
|
|||
margin-top: 20px; |
|||
`;
|
|||
|
|||
const Wrapper = styled.div`
|
|||
|
|||
`;
|
|||
|
|||
ReactDOM.render( |
|||
<LocaleProvider locale={zhCN}> |
|||
<App /> |
|||
</LocaleProvider>, |
|||
document.getElementById('app') |
|||
); |
|||
@ -1,185 +0,0 @@ |
|||
import React from "react"; |
|||
import PropTyps from 'prop-types' |
|||
import ClassNames from 'classnames' |
|||
import style from '!!to-string-loader!css-loader!resolve-url-loader!sass-loader?sourceMap!./index.scss' |
|||
|
|||
/** |
|||
* 计算对角线长度 |
|||
* @param x |
|||
* @param y |
|||
* @returns {number} |
|||
*/ |
|||
function getDiagonalLength(x, y) { |
|||
return Math.sqrt(x * x + y * y); |
|||
} |
|||
|
|||
export default class Movable extends React.Component { |
|||
constructor(props) { |
|||
super(props); |
|||
|
|||
this.refMovable = React.createRef(); |
|||
|
|||
this.isMouseDown = false; |
|||
this.isResizeHandleMouseDown = false; |
|||
this.recordedPosX = 0; |
|||
this.recordedPosY = 0; |
|||
this.state = { |
|||
active: false |
|||
} |
|||
} |
|||
|
|||
static propTypes = { |
|||
posX: PropTyps.number, |
|||
posY: PropTyps.number, |
|||
width: PropTyps.number, |
|||
height: PropTyps.number, |
|||
scale: PropTyps.number, |
|||
canResize: PropTyps.bool, |
|||
keepAspectRatio: PropTyps.bool, |
|||
resizeHandlerSize: PropTyps.number, |
|||
onPosChange: PropTyps.func, |
|||
onSizeChange: PropTyps.func |
|||
}; |
|||
|
|||
static defaultProps = { |
|||
posX: 0, |
|||
posY: 0, |
|||
size: null, |
|||
scale: 1, |
|||
canResize: true, |
|||
keepAspectRatio: true, |
|||
resizeHandlerSize: 10, |
|||
onPosChange: () => {}, |
|||
onSizeChange: () => {} |
|||
}; |
|||
|
|||
componentWillMount() { |
|||
window.addEventListener('mousedown', (e) => { |
|||
this.setState({ |
|||
active: false |
|||
}); |
|||
}, true); |
|||
window.addEventListener('mouseup', (e) => { |
|||
this.handleMouseUp(e) |
|||
}); |
|||
window.addEventListener('mousemove', (e) => { |
|||
this.handleMouseMove(e) |
|||
}); |
|||
} |
|||
|
|||
savePosition = (e) => { |
|||
this.recordedPosX = e.clientX; |
|||
this.recordedPosY = e.clientY; |
|||
}; |
|||
|
|||
handleMouseMove = (e) => { |
|||
if (this.isResizeHandleMouseDown) { |
|||
const {width, height, scale, keepAspectRatio, onSizeChange} = this.props; |
|||
if (keepAspectRatio) { |
|||
// 保持横纵比缩放
|
|||
// 参考 Photoshop 等比缩放的交互，往左和上移动视为减小大小，往右和下移动视为增加大小
|
|||
|
|||
|
|||
// const {x, y} = this.refMovable.current.getBoundingClientRect();
|
|||
// const ratioX = e.clientX + this.recordedPosX / width;
|
|||
// const ratioY = e.clientY - height / this.recordedPosY - height;
|
|||
|
|||
// 具体实现：先计算 X 和 Y 方向的移动距离，屏幕左上角为原点，右下角方向为正
|
|||
const distanceX = (e.clientX - this.recordedPosX) * scale; |
|||
const distanceY = (e.clientY - this.recordedPosY) * scale; |
|||
|
|||
// 取X和Y两个方向距离的叠加距离，
|
|||
// 可能全为正（鼠标往右下角移动）、全为负（鼠标往左上角移动）、正负叠加抵消（鼠标往左下角或右上角移动）
|
|||
const compoundDistance = distanceX + distanceY; |
|||
|
|||
// 计算取X和Y两个方向距离的叠加距离的对角线距离
|
|||
const compoundDiagonalDistance = getDiagonalLength(compoundDistance, compoundDistance); |
|||
|
|||
// 鼠标本次对角线方向的直接移动距离
|
|||
const diagonalDistance = getDiagonalLength(distanceX, distanceY); |
|||
|
|||
// 取叠加距离和直接距离的最小值，并附上正负
|
|||
const diagonalResult = (compoundDistance >= 0 ? 1 : -1) * Math.min(compoundDiagonalDistance, diagonalDistance); |
|||
|
|||
// const originalDiagonal = getDiagonalLength(width, height);
|
|||
|
|||
// const ratio = diagonalResult / originalDiagonal;
|
|||
// const ratio = Math.min(ratioX, ratioY);
|
|||
// const ratio = getDiagonalLength(ratioX, ratioY);
|
|||
|
|||
onSizeChange(width + diagonalResult, height + diagonalResult); |
|||
} else { |
|||
// 不保持横纵比缩放
|
|||
const distanceX = (e.clientX - this.recordedPosX) * scale; |
|||
const distanceY = (e.clientY - this.recordedPosY) * scale; |
|||
|
|||
onSizeChange(width + distanceX, height + distanceY); |
|||
} |
|||
this.savePosition(e); |
|||
} if (this.isMouseDown) { |
|||
const {posX, posY, scale, onPosChange} = this.props; |
|||
const distanceX = posX + (e.clientX - this.recordedPosX) / scale; |
|||
const distanceY = posY + (e.clientY - this.recordedPosY) / scale; |
|||
onPosChange(distanceX, distanceY); |
|||
this.savePosition(e); |
|||
} |
|||
}; |
|||
|
|||
handleMouseDown = (e) => { |
|||
this.isMouseDown = true; |
|||
this.isResizeHandleMouseDown = false; |
|||
this.savePosition(e); |
|||
this.setState({ |
|||
active: true |
|||
}); |
|||
}; |
|||
|
|||
handleResizeMouseDown = (e) => { |
|||
this.isMouseDown = false; |
|||
this.isResizeHandleMouseDown = true; |
|||
this.savePosition(e); |
|||
this.setState({ |
|||
active: true |
|||
}); |
|||
document.body.style.cursor = 'se-resize'; |
|||
|
|||
e.stopPropagation(); |
|||
e.preventDefault(); |
|||
}; |
|||
|
|||
handleMouseUp = () => { |
|||
this.isMouseDown = false; |
|||
if (this.isResizeHandleMouseDown) { |
|||
this.isResizeHandleMouseDown = false; |
|||
document.body.style.cursor = 'default'; |
|||
} |
|||
}; |
|||
|
|||
render() { |
|||
const {active} = this.state; |
|||
const {posX, posY, width, height, canResize, resizeHandlerSize, children} = this.props; |
|||
|
|||
return ( |
|||
<div |
|||
className={ClassNames('movable-object', {active})} |
|||
style={{ |
|||
left: `${posX}px`, |
|||
top: `${posY}px`, |
|||
width: `${width}px`, |
|||
height: `${height}px`, |
|||
}} |
|||
draggable="false" |
|||
onMouseDown={this.handleMouseDown} |
|||
ref={this.refMovable} |
|||
> |
|||
<style>{style}</style> |
|||
<div |
|||
className="resize-handler" |
|||
style={{width: `${resizeHandlerSize}px`, height: `${resizeHandlerSize}px`}} |
|||
onMouseDown={this.handleResizeMouseDown} |
|||
/> |
|||
{children} |
|||
</div> |
|||
) |
|||
} |
|||
} |
|||
@ -1,15 +0,0 @@ |
|||
.movable-object { |
|||
position: absolute; |
|||
border: 2px solid transparent; |
|||
&.active { |
|||
border-color: #35c7ff; |
|||
box-shadow: 0 0 20px rgba(0, 0, 0, .3); |
|||
} |
|||
.resize-handler { |
|||
position: absolute; |
|||
right: 0; |
|||
bottom: 0; |
|||
cursor: se-resize; |
|||
user-select: none; |
|||
} |
|||
} |
|||
@ -1,570 +0,0 @@ |
|||
import React, {useState} from "react"; |
|||
import styled from "styled-components"; |
|||
import {LocaleProvider, Form, Radio, Input, Button, message, Icon, Popover, Modal} from 'antd'; |
|||
import ReactDOM from "react-dom"; |
|||
import zhCN from "antd/lib/locale-provider/zh_CN"; |
|||
import ClassNames from 'classnames' |
|||
import RcUpload from "rc-upload"; |
|||
import axios from 'axios' |
|||
import qs from 'qs'; |
|||
import '../utils/ajax' |
|||
import * as rasterizeHTML from 'rasterizehtml' |
|||
import previewStyle from '!!to-string-loader!css-loader!resolve-url-loader!sass-loader?sourceMap!./preview.scss' |
|||
import {ChromePicker} from 'react-color' |
|||
import Movable from './Movable' |
|||
import {getLuminance} from 'polished' |
|||
import { debounce } from 'throttle-debounce'; |
|||
|
|||
const RadioGroup = Radio.Group; |
|||
|
|||
const {data, appName, qrCodeForWeapp, qrCodeForH5, errorMsg, |
|||
dataOfDistribution, csrf, isDistributionPage} = window; |
|||
|
|||
const codeType = { |
|||
weapp: { |
|||
imageUrl: qrCodeForWeapp, |
|||
text: '小程序码' |
|||
}, |
|||
h5: { |
|||
imageUrl: qrCodeForH5, |
|||
text: '二维码' |
|||
} |
|||
}; |
|||
|
|||
function SizeChangeForm({defaultWidth, defaultHeight, onChange}) { |
|||
const [width, setWidth] = useState(defaultWidth); |
|||
const [height, setHeight] = useState(defaultHeight); |
|||
|
|||
const handleChange = debounce(300, onChange); |
|||
|
|||
return ( |
|||
<InputGroup> |
|||
<Input |
|||
value={width} |
|||
placeholder='宽' |
|||
onChange={e => { |
|||
const newValue = e.target.value; |
|||
setWidth(newValue); |
|||
handleChange(newValue, height); |
|||
}} |
|||
/> |
|||
X |
|||
<Input |
|||
value={height} |
|||
placeholder='高' |
|||
onChange={e => { |
|||
const newValue = e.target.value; |
|||
setHeight(newValue); |
|||
handleChange(width, newValue); |
|||
}} |
|||
/> |
|||
</InputGroup> |
|||
) |
|||
} |
|||
|
|||
class Spread extends React.Component { |
|||
constructor(props) { |
|||
super(props); |
|||
|
|||
this.previewRef = React.createRef(); |
|||
|
|||
const aspectRatio = 2; |
|||
|
|||
const refWidth = 300; |
|||
const refHeight = refWidth * aspectRatio; |
|||
|
|||
const exportWidth = 1080; |
|||
const exportHeight = exportWidth * aspectRatio; |
|||
|
|||
if (isDistributionPage) { |
|||
const forceData = { |
|||
refWidth, |
|||
refHeight, |
|||
exportWidth, |
|||
exportHeight |
|||
}; |
|||
|
|||
this.state = { |
|||
mode: 'custom', |
|||
type: 'weapp', |
|||
refWidth, |
|||
refHeight, |
|||
exportWidth, |
|||
exportHeight, |
|||
imageUrl: '/img/background-for-qrcode.png', |
|||
title: appName, |
|||
description: '这里放入描述文字', |
|||
qrCodePos: { |
|||
x: 96.25, |
|||
y: 361.25 |
|||
}, |
|||
qrCodeSize: 109.46274169979692, |
|||
backgroundColor: '#fff', |
|||
...forceData, |
|||
...dataOfDistribution, |
|||
}; |
|||
} else { |
|||
const match = document.title.match(/(.+)-页面推广/); |
|||
if (match && match[1]) { |
|||
this.pageTitle = match[1] |
|||
} |
|||
|
|||
this.state = { |
|||
mode: 'template', |
|||
type: 'weapp', |
|||
refWidth, |
|||
refHeight, |
|||
exportWidth, |
|||
exportHeight, |
|||
imageUrl: '/img/logo-kcshop.png', |
|||
title: appName, |
|||
description: '这里放入描述文字', |
|||
qrCodePos: { |
|||
x: 0, |
|||
y: 0 |
|||
}, |
|||
qrCodeSize: 100, |
|||
backgroundColor: '#fff', |
|||
...data |
|||
}; |
|||
} |
|||
} |
|||
|
|||
componentDidMount() { |
|||
if (isDistributionPage) { |
|||
this.showCustomPosterTip() |
|||
} |
|||
} |
|||
|
|||
changeType = (e) => { |
|||
this.setState({type: e.target.value}) |
|||
}; |
|||
|
|||
changeMode = (e) => { |
|||
const mode = e.target.value; |
|||
this.setState({mode}); |
|||
if (mode === 'custom') { |
|||
this.showCustomPosterTip(); |
|||
} |
|||
}; |
|||
|
|||
showCustomPosterTip = () => { |
|||
if (localStorage.getItem('hasShowCustomPosterTip') !== '1') { |
|||
const {type} = this.state; |
|||
Modal.info({ |
|||
title: '自定义模式操作说明', |
|||
content: `拖动左侧海报内的${codeType[type].text}可以改变其位置，点击让其激活后拖动右下角区域可以改变其大小` |
|||
}); |
|||
localStorage.setItem('hasShowCustomPosterTip', '1'); |
|||
} |
|||
}; |
|||
|
|||
handleChange = ({fileList}) => this.setState({fileList}); |
|||
|
|||
handleInputChange = (name, e) => { |
|||
this.setState({[name]: e.target.value}) |
|||
}; |
|||
|
|||
handleImageChange = (data) => { |
|||
if (data && (data.status)) { |
|||
this.setState({imageUrl: data.filename}) |
|||
} else if (data.info) { |
|||
message.error(`上传失败：${data.info}`) |
|||
} else if (!data.status) { |
|||
message.error(`上传失败，请稍后重试`) |
|||
} else { |
|||
message.error(`上传失败：${JSON.stringify(data)}`) |
|||
} |
|||
}; |
|||
|
|||
downloadFile = (url, filename = '文件') => { |
|||
const downloadElement = document.createElement('a'); |
|||
downloadElement.download = filename; |
|||
downloadElement.href = url; |
|||
downloadElement.click(); |
|||
}; |
|||
|
|||
downloadPoster = () => { |
|||
if (this.previewRef && this.previewRef.current) { |
|||
const {refWidth, refHeight, exportWidth, exportHeight} = this.state; |
|||
|
|||
const canvas = document.createElement('canvas'); |
|||
canvas.width = exportWidth; |
|||
canvas.height = exportHeight; |
|||
|
|||
const ctx = canvas.getContext('2d'); |
|||
ctx.scale(exportWidth / refWidth, exportHeight / refHeight); |
|||
|
|||
rasterizeHTML.drawHTML(this.previewRef.current.outerHTML, canvas).then(() => { |
|||
this.downloadFile(canvas.toDataURL('image/png'), `【${this.pageTitle}】推广海报`); |
|||
}) |
|||
} |
|||
}; |
|||
|
|||
downloadQRCode = () => { |
|||
const {type} = this.state; |
|||
this.downloadFile(codeType[type].imageUrl, `【${this.pageTitle}】${codeType[type].text}`) |
|||
}; |
|||
|
|||
savePoster = () => { |
|||
const url = isDistributionPage ? '' : '/page-layout/spread-setting'; |
|||
axios.post(url, { |
|||
'_csrf-api': csrf, |
|||
id: qs.parse(location.search.substr(1)).id, |
|||
content: this.state, |
|||
}).then(() => { |
|||
message.success('保存成功'); |
|||
}) |
|||
}; |
|||
|
|||
handlePosChange = (x, y) => { |
|||
this.setState({ |
|||
qrCodePos: {x, y} |
|||
}) |
|||
}; |
|||
|
|||
handleSizeChange = (size) => { |
|||
this.setState({ |
|||
qrCodeSize: size |
|||
}) |
|||
}; |
|||
|
|||
handleChangeColor = (color) => { |
|||
this.setState({ |
|||
backgroundColor: color.hex |
|||
}) |
|||
}; |
|||
|
|||
changePosterSize = (width, height) => { |
|||
const {refWidth, refHeight, qrCodePos} = this.state; |
|||
const aspectRatio = height / width; |
|||
const newRefHeight = refWidth * aspectRatio; |
|||
|
|||
this.setState({ |
|||
exportWidth: width, |
|||
exportHeight: height, |
|||
refHeight: newRefHeight, |
|||
qrCodePos: { |
|||
x: qrCodePos.x, |
|||
y: qrCodePos.y / refHeight * newRefHeight |
|||
} |
|||
}) |
|||
}; |
|||
|
|||
render() { |
|||
const {mode, type, imageUrl, title, description, exportWidth, exportHeight, qrCodePos, refWidth, |
|||
qrCodeSize, backgroundColor} = this.state; |
|||
const formItemLayout = { |
|||
labelCol: {span: 4}, |
|||
wrapperCol: {span: 20}, |
|||
}; |
|||
const buttonItemLayout = { |
|||
wrapperCol: {span: 16, offset: 3}, |
|||
}; |
|||
|
|||
const aspectRatio = exportHeight / exportWidth; |
|||
const refHeight = refWidth * aspectRatio; |
|||
|
|||
return ( |
|||
<Root> |
|||
{errorMsg ? ( |
|||
<Error> |
|||
<Icon type="exclamation-circle" theme="filled" style={{fontSize: '6em'}}/> |
|||
<ErrorText>{errorMsg}</ErrorText> |
|||
</Error> |
|||
) : ( |
|||
<Container> |
|||
<PreviewWrapper style={{width: `${refWidth * .8 + 40}px`, height: `${refHeight * .8}px`}}> |
|||
<PreviewContainer style={{width: `${refWidth + 4}px`, height: `${refHeight + 4}px`}}> |
|||
<div |
|||
ref={this.previewRef} |
|||
className={ClassNames('preview', `mode-${mode}`)} |
|||
style={{ |
|||
width: `${refWidth}px`, |
|||
height: `${refHeight}px`, |
|||
backgroundColor |
|||
}} |
|||
> |
|||
<style>{previewStyle}</style> |
|||
{mode === 'template' ? ( |
|||
<> |
|||
<div className='preview__main'> |
|||
<div className="preview__image-wrapper"> |
|||
<img className='preview__image' src={imageUrl}/> |
|||
</div> |
|||
<div className='preview__info'> |
|||
<h1 className='preview__title'>{title}</h1> |
|||
<div className='preview__description'>{description}</div> |
|||
</div> |
|||
</div> |
|||
<div className='preview__footer'> |
|||
<img className='preview__circle-image' src={imageUrl}/> |
|||
<div className='preview__footer-info'> |
|||
<h4 className='preview__app-name'>{appName}</h4> |
|||
<div className='preview__tip'>扫描或长按{codeType[type].text}</div> |
|||
</div> |
|||
<img className='preview__qr-code' src={codeType[type].imageUrl}/> |
|||
</div> |
|||
</> |
|||
) : ( |
|||
<> |
|||
<img |
|||
src={imageUrl} |
|||
className={ClassNames('background', { |
|||
'distribution': isDistributionPage |
|||
})} |
|||
/> |
|||
<Movable |
|||
posX={qrCodePos.x} |
|||
posY={qrCodePos.y} |
|||
width={qrCodeSize} |
|||
height={qrCodeSize} |
|||
scale={0.8} |
|||
keepAspectRatio |
|||
onPosChange={this.handlePosChange} |
|||
onSizeChange={this.handleSizeChange} |
|||
> |
|||
<img |
|||
className='preview__qr-code' |
|||
src={codeType[type].imageUrl} |
|||
draggable="false" |
|||
/> |
|||
</Movable> |
|||
</> |
|||
)} |
|||
</div> |
|||
</PreviewContainer> |
|||
</PreviewWrapper> |
|||
<Editor> |
|||
<Form layout='horizontal'> |
|||
{!isDistributionPage && ( |
|||
<Form.Item label='模式' {...formItemLayout}> |
|||
<RadioGroup onChange={this.changeMode} value={mode}> |
|||
<Radio value='template'>默认模板</Radio> |
|||
<Radio value='custom'>自定义</Radio> |
|||
</RadioGroup> |
|||
</Form.Item> |
|||
)} |
|||
<Form.Item label='平台' {...formItemLayout}> |
|||
<RadioGroup onChange={this.changeType} value={type}> |
|||
<Radio value='weapp'>小程序</Radio> |
|||
<Radio value='h5'>H5</Radio> |
|||
</RadioGroup> |
|||
</Form.Item> |
|||
<Form.Item label='输出尺寸' {...formItemLayout}> |
|||
<SizeChangeForm |
|||
defaultWidth={exportWidth} |
|||
defaultHeight={exportHeight} |
|||
onChange={this.changePosterSize} |
|||
/> |
|||
</Form.Item> |
|||
{mode === 'template' && ( |
|||
<> |
|||
<Form.Item label='标题' {...formItemLayout}> |
|||
<Input |
|||
value={title} |
|||
placeholder='请输入标题' |
|||
onChange={this.handleInputChange.bind(undefined, 'title')} |
|||
/> |
|||
</Form.Item> |
|||
<Form.Item label='描述' {...formItemLayout}> |
|||
<Input |
|||
value={description} |
|||
placeholder='请输入描述' |
|||
onChange={this.handleInputChange.bind(undefined, 'description')} |
|||
/> |
|||
</Form.Item> |
|||
</> |
|||
)} |
|||
<Form.Item label='图片' {...formItemLayout}> |
|||
<Thumbnail> |
|||
<RcUpload |
|||
action='/page-layout/image-upload' |
|||
accept='image/*' |
|||
data={{'_csrf-api': csrf}} |
|||
onStart={this.onStart} |
|||
onSuccess={this.handleImageChange} |
|||
> |
|||
<UploadedImage |
|||
src={imageUrl} |
|||
draggable="false" |
|||
/> |
|||
<ImageHandle className='image-handle'> |
|||
<Icon type='edit' onClick={this.handlePreview}/> |
|||
<div>更改图片</div> |
|||
</ImageHandle> |
|||
</RcUpload> |
|||
</Thumbnail> |
|||
<ImageTip>海报背景宽高比例 1：{aspectRatio.toFixed(2)}</ImageTip> |
|||
</Form.Item> |
|||
{!isDistributionPage && ( |
|||
<Form.Item label='背景颜色' {...formItemLayout}> |
|||
<Popover |
|||
content={( |
|||
<ColorPicker> |
|||
<ChromePicker |
|||
color={backgroundColor} |
|||
disableAlpha |
|||
style={{ |
|||
padding: 0, |
|||
boxShadow: 'none' |
|||
}} |
|||
onChange={this.handleChangeColor} |
|||
/> |
|||
</ColorPicker> |
|||
)} |
|||
trigger='click' |
|||
> |
|||
<Color |
|||
style={{ |
|||
backgroundColor, |
|||
color: getLuminance(backgroundColor) > 0.5 ? '#333' : '#eee' |
|||
}} |
|||
>点击选择颜色</Color> |
|||
</Popover> |
|||
</Form.Item> |
|||
)} |
|||
<Form.Item {...buttonItemLayout}> |
|||
{!isDistributionPage && ( |
|||
<> |
|||
<Button |
|||
type="primary" |
|||
onClick={this.downloadPoster} |
|||
>下载海报</Button> |
|||
<Button |
|||
type="primary" |
|||
onClick={this.downloadQRCode} |
|||
style={{margin: '20px'}} |
|||
>仅下载{codeType[type].text}</Button> |
|||
</> |
|||
)} |
|||
<Button |
|||
type="primary" |
|||
onClick={this.savePoster} |
|||
>保存海报布局</Button> |
|||
</Form.Item> |
|||
</Form> |
|||
</Editor> |
|||
</Container> |
|||
)} |
|||
</Root> |
|||
) |
|||
} |
|||
} |
|||
|
|||
const Root = styled.div`
|
|||
`;
|
|||
|
|||
const Container = styled.div`
|
|||
display: flex; |
|||
align-items: flex-start; |
|||
`;
|
|||
|
|||
const Error = styled.div`
|
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
width: 100%; |
|||
min-height: 400px; |
|||
font-weight: bold; |
|||
color: #f5222d; |
|||
`;
|
|||
|
|||
const ErrorText = styled.div`
|
|||
margin-top: 40px; |
|||
font-weight: bold; |
|||
font-size: 1.5em; |
|||
`;
|
|||
|
|||
const Editor = styled.div`
|
|||
flex-grow: 1; |
|||
`;
|
|||
|
|||
const PreviewWrapper = styled.div`
|
|||
`;
|
|||
|
|||
const PreviewContainer = styled.div`
|
|||
top: 0; |
|||
left: 0; |
|||
border: 2px solid #eee; |
|||
transform-origin: left top; |
|||
transform: scale(.8); |
|||
`;
|
|||
|
|||
const Thumbnail = styled.div`
|
|||
position: relative; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
width: 150px; |
|||
height: 150px; |
|||
border: 2px solid #eee; |
|||
border-radius: 10px; |
|||
overflow: hidden; |
|||
`;
|
|||
|
|||
const UploadedImage = styled.img`
|
|||
max-width: 150px; |
|||
max-height: 150px; |
|||
`;
|
|||
|
|||
const ImageHandle = styled.div`
|
|||
position: absolute; |
|||
left: 0; |
|||
bottom: 0; |
|||
width: 100%; |
|||
height: 40px; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
background: rgba(0, 0, 0, .5); |
|||
color: #fff; |
|||
.anticon { |
|||
margin-right: 10px; |
|||
font-size: 1.4em; |
|||
transition: transform .3s; |
|||
cursor: pointer; |
|||
&:active { |
|||
transform: scale(1.6); |
|||
} |
|||
} |
|||
`;
|
|||
|
|||
const ImageTip = styled.div`
|
|||
`;
|
|||
|
|||
const ColorPicker = styled.div`
|
|||
.sketch-picker, .chrome-picker { |
|||
padding: 0!important; |
|||
box-shadow: none!important; |
|||
} |
|||
`;
|
|||
|
|||
const Color = styled.div`
|
|||
width: 120px; |
|||
height: 40px; |
|||
border: 1px solid #eee; |
|||
border-radius: 5px; |
|||
text-align: center; |
|||
cursor: pointer; |
|||
`;
|
|||
|
|||
const InputGroup = styled.div`
|
|||
display: flex; |
|||
align-items: center; |
|||
input { |
|||
width: 80px!important; |
|||
margin: 0 10px; |
|||
&:first-child { |
|||
margin-left: 0; |
|||
} |
|||
} |
|||
`;
|
|||
|
|||
ReactDOM.render( |
|||
<LocaleProvider locale={zhCN}> |
|||
<Spread/> |
|||
</LocaleProvider>, |
|||
document.getElementById('spread') |
|||
); |
|||
@ -1,354 +0,0 @@ |
|||
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ |
|||
|
|||
/* Document |
|||
========================================================================== */ |
|||
|
|||
/** |
|||
* 1. Correct the line height in all browsers. |
|||
* 2. Prevent adjustments of font size after orientation changes in iOS. |
|||
*/ |
|||
|
|||
html { |
|||
line-height: 1.15; /* 1 */ |
|||
-webkit-text-size-adjust: 100%; /* 2 */ |
|||
} |
|||
|
|||
/* Sections |
|||
========================================================================== */ |
|||
|
|||
/** |
|||
* Remove the margin in all browsers. |
|||
*/ |
|||
|
|||
body { |
|||
margin: 0; |
|||
} |
|||
|
|||
/** |
|||
* Render the `main` element consistently in IE. |
|||
*/ |
|||
|
|||
main { |
|||
display: block; |
|||
} |
|||
|
|||
/** |
|||
* Correct the font size and margin on `h1` elements within `section` and |
|||
* `article` contexts in Chrome, Firefox, and Safari. |
|||
*/ |
|||
|
|||
h1 { |
|||
font-size: 2em; |
|||
margin: 0.67em 0; |
|||
} |
|||
|
|||
h4 { |
|||
font-size: 1.2em; |
|||
margin: 0.2em 0; |
|||
} |
|||
|
|||
/* Grouping content |
|||
========================================================================== */ |
|||
|
|||
/** |
|||
* 1. Add the correct box sizing in Firefox. |
|||
* 2. Show the overflow in Edge and IE. |
|||
*/ |
|||
|
|||
hr { |
|||
box-sizing: content-box; /* 1 */ |
|||
height: 0; /* 1 */ |
|||
overflow: visible; /* 2 */ |
|||
} |
|||
|
|||
/** |
|||
* 1. Correct the inheritance and scaling of font size in all browsers. |
|||
* 2. Correct the odd `em` font sizing in all browsers. |
|||
*/ |
|||
|
|||
pre { |
|||
font-family: monospace, monospace; /* 1 */ |
|||
font-size: 1em; /* 2 */ |
|||
} |
|||
|
|||
/* Text-level semantics |
|||
========================================================================== */ |
|||
|
|||
/** |
|||
* Remove the gray background on active links in IE 10. |
|||
*/ |
|||
|
|||
a { |
|||
background-color: transparent; |
|||
} |
|||
|
|||
/** |
|||
* 1. Remove the bottom border in Chrome 57- |
|||
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. |
|||
*/ |
|||
|
|||
abbr[title] { |
|||
border-bottom: none; /* 1 */ |
|||
text-decoration: underline; /* 2 */ |
|||
text-decoration: underline dotted; /* 2 */ |
|||
} |
|||
|
|||
/** |
|||
* Add the correct font weight in Chrome, Edge, and Safari. |
|||
*/ |
|||
|
|||
b, |
|||
strong { |
|||
font-weight: bolder; |
|||
} |
|||
|
|||
/** |
|||
* 1. Correct the inheritance and scaling of font size in all browsers. |
|||
* 2. Correct the odd `em` font sizing in all browsers. |
|||
*/ |
|||
|
|||
code, |
|||
kbd, |
|||
samp { |
|||
font-family: monospace, monospace; /* 1 */ |
|||
font-size: 1em; /* 2 */ |
|||
} |
|||
|
|||
/** |
|||
* Add the correct font size in all browsers. |
|||
*/ |
|||
|
|||
small { |
|||
font-size: 80%; |
|||
} |
|||
|
|||
/** |
|||
* Prevent `sub` and `sup` elements from affecting the line height in |
|||
* all browsers. |
|||
*/ |
|||
|
|||
sub, |
|||
sup { |
|||
font-size: 75%; |
|||
line-height: 0; |
|||
position: relative; |
|||
vertical-align: baseline; |
|||
} |
|||
|
|||
sub { |
|||
bottom: -0.25em; |
|||
} |
|||
|
|||
sup { |
|||
top: -0.5em; |
|||
} |
|||
|
|||
/* Embedded content |
|||
========================================================================== */ |
|||
|
|||
/** |
|||
* Remove the border on images inside links in IE 10. |
|||
*/ |
|||
|
|||
img { |
|||
border-style: none; |
|||
} |
|||
|
|||
/* Forms |
|||
========================================================================== */ |
|||
|
|||
/** |
|||
* 1. Change the font styles in all browsers. |
|||
* 2. Remove the margin in Firefox and Safari. |
|||
*/ |
|||
|
|||
button, |
|||
input, |
|||
optgroup, |
|||
select, |
|||
textarea { |
|||
font-family: inherit; /* 1 */ |
|||
font-size: 100%; /* 1 */ |
|||
line-height: 1.15; /* 1 */ |
|||
margin: 0; /* 2 */ |
|||
} |
|||
|
|||
/** |
|||
* Show the overflow in IE. |
|||
* 1. Show the overflow in Edge. |
|||
*/ |
|||
|
|||
button, |
|||
input { /* 1 */ |
|||
overflow: visible; |
|||
} |
|||
|
|||
/** |
|||
* Remove the inheritance of text transform in Edge, Firefox, and IE. |
|||
* 1. Remove the inheritance of text transform in Firefox. |
|||
*/ |
|||
|
|||
button, |
|||
select { /* 1 */ |
|||
text-transform: none; |
|||
} |
|||
|
|||
/** |
|||
* Correct the inability to style clickable types in iOS and Safari. |
|||
*/ |
|||
|
|||
button, |
|||
[type="button"], |
|||
[type="reset"], |
|||
[type="submit"] { |
|||
-webkit-appearance: button; |
|||
} |
|||
|
|||
/** |
|||
* Remove the inner border and padding in Firefox. |
|||
*/ |
|||
|
|||
button::-moz-focus-inner, |
|||
[type="button"]::-moz-focus-inner, |
|||
[type="reset"]::-moz-focus-inner, |
|||
[type="submit"]::-moz-focus-inner { |
|||
border-style: none; |
|||
padding: 0; |
|||
} |
|||
|
|||
/** |
|||
* Restore the focus styles unset by the previous rule. |
|||
*/ |
|||
|
|||
button:-moz-focusring, |
|||
[type="button"]:-moz-focusring, |
|||
[type="reset"]:-moz-focusring, |
|||
[type="submit"]:-moz-focusring { |
|||
outline: 1px dotted ButtonText; |
|||
} |
|||
|
|||
/** |
|||
* Correct the padding in Firefox. |
|||
*/ |
|||
|
|||
fieldset { |
|||
padding: 0.35em 0.75em 0.625em; |
|||
} |
|||
|
|||
/** |
|||
* 1. Correct the text wrapping in Edge and IE. |
|||
* 2. Correct the color inheritance from `fieldset` elements in IE. |
|||
* 3. Remove the padding so developers are not caught out when they zero out |
|||
* `fieldset` elements in all browsers. |
|||
*/ |
|||
|
|||
legend { |
|||
box-sizing: border-box; /* 1 */ |
|||
color: inherit; /* 2 */ |
|||
display: table; /* 1 */ |
|||
max-width: 100%; /* 1 */ |
|||
padding: 0; /* 3 */ |
|||
white-space: normal; /* 1 */ |
|||
} |
|||
|
|||
/** |
|||
* Add the correct vertical alignment in Chrome, Firefox, and Opera. |
|||
*/ |
|||
|
|||
progress { |
|||
vertical-align: baseline; |
|||
} |
|||
|
|||
/** |
|||
* Remove the default vertical scrollbar in IE 10+. |
|||
*/ |
|||
|
|||
textarea { |
|||
overflow: auto; |
|||
} |
|||
|
|||
/** |
|||
* 1. Add the correct box sizing in IE 10. |
|||
* 2. Remove the padding in IE 10. |
|||
*/ |
|||
|
|||
[type="checkbox"], |
|||
[type="radio"] { |
|||
box-sizing: border-box; /* 1 */ |
|||
padding: 0; /* 2 */ |
|||
} |
|||
|
|||
/** |
|||
* Correct the cursor style of increment and decrement buttons in Chrome. |
|||
*/ |
|||
|
|||
[type="number"]::-webkit-inner-spin-button, |
|||
[type="number"]::-webkit-outer-spin-button { |
|||
height: auto; |
|||
} |
|||
|
|||
/** |
|||
* 1. Correct the odd appearance in Chrome and Safari. |
|||
* 2. Correct the outline style in Safari. |
|||
*/ |
|||
|
|||
[type="search"] { |
|||
-webkit-appearance: textfield; /* 1 */ |
|||
outline-offset: -2px; /* 2 */ |
|||
} |
|||
|
|||
/** |
|||
* Remove the inner padding in Chrome and Safari on macOS. |
|||
*/ |
|||
|
|||
[type="search"]::-webkit-search-decoration { |
|||
-webkit-appearance: none; |
|||
} |
|||
|
|||
/** |
|||
* 1. Correct the inability to style clickable types in iOS and Safari. |
|||
* 2. Change font properties to `inherit` in Safari. |
|||
*/ |
|||
|
|||
::-webkit-file-upload-button { |
|||
-webkit-appearance: button; /* 1 */ |
|||
font: inherit; /* 2 */ |
|||
} |
|||
|
|||
/* Interactive |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* Add the correct display in Edge, IE 10+, and Firefox. |
|||
*/ |
|||
|
|||
details { |
|||
display: block; |
|||
} |
|||
|
|||
/* |
|||
* Add the correct display in all browsers. |
|||
*/ |
|||
|
|||
summary { |
|||
display: list-item; |
|||
} |
|||
|
|||
/* Misc |
|||
========================================================================== */ |
|||
|
|||
/** |
|||
* Add the correct display in IE 10+. |
|||
*/ |
|||
|
|||
template { |
|||
display: none; |
|||
} |
|||
|
|||
/** |
|||
* Add the correct display in IE 10. |
|||
*/ |
|||
|
|||
[hidden] { |
|||
display: none; |
|||
} |
|||
@ -1,102 +0,0 @@ |
|||
@import "normalize"; |
|||
|
|||
$poster-width: 300px; |
|||
$padding: 20px; |
|||
$image-size: $poster-width - $padding * 2; |
|||
|
|||
.preview { |
|||
overflow: hidden; |
|||
background: #fff; |
|||
&.mode-template { |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 20px; |
|||
box-sizing: border-box; |
|||
.preview { |
|||
&__main { |
|||
padding: 20px; |
|||
background: #fff; |
|||
box-shadow: 0 0 30px rgba(0, 0, 0, .1); |
|||
} |
|||
&__image-wrapper { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
&__image { |
|||
width: 100%; |
|||
height: auto; |
|||
} |
|||
&__info { |
|||
width: 100%; |
|||
margin-top: 10px; |
|||
overflow: hidden; |
|||
} |
|||
&__footer { |
|||
width: 100%; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
margin-top: 30px; |
|||
} |
|||
&__title { |
|||
|
|||
} |
|||
&__description { |
|||
width: 100%; |
|||
font-size: 14px; |
|||
line-height: 1.5; |
|||
color: #aaa; |
|||
overflow: hidden; |
|||
} |
|||
&__circle-image { |
|||
$circle-image-size: $poster-width * 0.2; |
|||
width: $circle-image-size; |
|||
height: $circle-image-size; |
|||
border-radius: 100%; |
|||
background: #fff; |
|||
} |
|||
&__footer-info { |
|||
border-radius: 100%; |
|||
margin: 0 10px; |
|||
} |
|||
&__app-name { |
|||
margin: 0; |
|||
margin-bottom: 5px; |
|||
} |
|||
&__tip { |
|||
font-size: 12px; |
|||
color: #aaa; |
|||
} |
|||
&__qr-code { |
|||
$size: $poster-width * 0.2; |
|||
width: $size; |
|||
height: $size; |
|||
} |
|||
} |
|||
} |
|||
&.mode-custom { |
|||
position: relative; |
|||
background-repeat: no-repeat; |
|||
background-size: contain; |
|||
.background { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
max-width: 100%; |
|||
max-height:100%; |
|||
&.distribution { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
} |
|||
.preview { |
|||
&__qr-code { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue