| | |
| | | import { Form, Row, Col, Select, Radio, Input, Tooltip, InputNumber, Checkbox } from 'antd' |
| | | import { QuestionCircleOutlined } from '@ant-design/icons' |
| | | |
| | | import { langs } from '@/store/options.js' |
| | | import asyncComponent from '@/utils/asyncComponent' |
| | | import './index.scss' |
| | | |
| | |
| | | inputSubmit: PropTypes.func // input回车提交 |
| | | } |
| | | |
| | | state = {typename: 'mob', adapters: [], exts: []} |
| | | state = { |
| | | typename: 'mob', |
| | | adapters: [], |
| | | exts: [], |
| | | WXApps: null, |
| | | WXMerchs: null |
| | | } |
| | | |
| | | UNSAFE_componentWillMount() { |
| | | const { card } = this.props |
| | | let adapters = [] |
| | | let exts = [] |
| | | let typename = 'mob' |
| | | let _langs = [] |
| | | Object.keys(langs).forEach(key => { |
| | | _langs.push({value: key, label: langs[key]}) |
| | | }) |
| | | |
| | | if (card) { |
| | | typename = card.typename || 'mob' |
| | |
| | | } |
| | | } |
| | | |
| | | this.setState({typename, adapters, exts}) |
| | | let WXApps = null |
| | | let WXMerchs = null |
| | | if (window.GLOB.WXApps) { |
| | | WXApps = window.GLOB.WXApps.filter(app => app.appType === 'public') |
| | | |
| | | if (WXApps.length === 0) { |
| | | WXApps = null |
| | | } |
| | | WXMerchs = window.GLOB.WXApps.filter(app => app.appType === 'merchant') |
| | | |
| | | if (WXMerchs.length === 0) { |
| | | WXMerchs = null |
| | | } |
| | | } |
| | | |
| | | this.setState({typename, adapters, exts, langs: _langs, WXApps, WXMerchs}) |
| | | } |
| | | |
| | | /** |
| | |
| | | values.user_binding = values.exts.includes('user_binding') ? 'true' : 'false' |
| | | values.share = values.exts.includes('share') ? 'true' : 'false' |
| | | delete values.exts |
| | | } |
| | | if (values.wxAppId) { |
| | | let app = window.GLOB.WXApps.filter(app => app.appType === 'public' && values.wxAppId === app.appId)[0] |
| | | values.wxAppName = app ? app.appName : values.wxAppId |
| | | } |
| | | if (values.wxMerchId) { |
| | | let app = window.GLOB.WXApps.filter(app => app.appType === 'merchant' && values.wxMerchId === app.appId)[0] |
| | | values.wxMerchName = app ? app.appName : values.wxMerchId |
| | | } |
| | | |
| | | resolve(values) |
| | |
| | | render() { |
| | | const { card, type } = this.props |
| | | const { getFieldDecorator } = this.props.form |
| | | const { typename, adapters, exts } = this.state |
| | | const { typename, adapters, exts, langs, WXApps, WXMerchs } = this.state |
| | | const formItemLayout = { |
| | | labelCol: { |
| | | xs: { span: 24 }, |
| | |
| | | {getFieldDecorator('lang', { |
| | | initialValue: card ? card.lang || 'zh-CN' : 'zh-CN' |
| | | })( |
| | | <Radio.Group disabled={type === 'edit'}> |
| | | <Radio value="zh-CN">中文</Radio> |
| | | <Radio value="en-US">英文</Radio> |
| | | </Radio.Group> |
| | | <Select disabled={type === 'edit'}> |
| | | {langs.map(item => <Select.Option key={item.value} value={item.value}>{item.label}</Select.Option>)} |
| | | </Select> |
| | | )} |
| | | </Form.Item> |
| | | </Col> |
| | |
| | | <Select.Option value="bg_black_style_magenta"><span className="color-block" style={{background: '#eb2f96'}}></span>洋红色(#eb2f96)</Select.Option> |
| | | <Select.Option value="bg_black_style_grass_green"><span className="color-block" style={{background: '#aeb303'}}></span>草绿色(#aeb303)</Select.Option> |
| | | <Select.Option value="bg_black_style_deep_red"><span className="color-block" style={{background: '#c32539'}}></span>深红色(#c32539)</Select.Option> |
| | | <Select.Option value="bg_black_style_deep_blue"><span className="color-block" style={{background: '#1d3661'}}></span>深蓝色(#1d3661)</Select.Option> |
| | | </Select> |
| | | )} |
| | | </Form.Item> |
| | |
| | | <Checkbox value="weixin">公众号</Checkbox> |
| | | <Checkbox value="wxmini">小程序</Checkbox> |
| | | </Checkbox.Group> |
| | | )} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | {WXApps ? <Col span={12}> |
| | | <Form.Item label={ |
| | | <Tooltip placement="topLeft" title="用户可通过此公众号进行支付、退款、授权登录。"> |
| | | <QuestionCircleOutlined className="mk-form-tip" /> |
| | | 关联应用 |
| | | </Tooltip> |
| | | }> |
| | | {getFieldDecorator('wxAppId', { |
| | | initialValue: card ? card.wxAppId : '' |
| | | })( |
| | | <Select allowClear> |
| | | {WXApps.map(item => <Select.Option key={item.appId} value={item.appId}>{item.appName}</Select.Option>)} |
| | | </Select> |
| | | )} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | {WXMerchs ? <Col span={12}> |
| | | <Form.Item label={ |
| | | <Tooltip placement="topLeft" title="用户可通过此商户号进行支付及退款。"> |
| | | <QuestionCircleOutlined className="mk-form-tip" /> |
| | | 关联商户 |
| | | </Tooltip> |
| | | }> |
| | | {getFieldDecorator('wxMerchId', { |
| | | initialValue: card ? card.wxMerchId : '' |
| | | })( |
| | | <Select allowClear> |
| | | {WXMerchs.map(item => <Select.Option key={item.appId} value={item.appId}>{item.appName}</Select.Option>)} |
| | | </Select> |
| | | )} |
| | | </Form.Item> |
| | | </Col> : null} |
| | |
| | | <Form.Item label={ |
| | | <Tooltip placement="topLeft" title="在使用明科云APP时,状态栏的字体颜色。"> |
| | | <QuestionCircleOutlined className="mk-form-tip" /> |
| | | 状态栏 |
| | | 状态栏文字 |
| | | </Tooltip> |
| | | }> |
| | | {getFieldDecorator('statusBarColor', { |
| | |
| | | <Radio value="white">白色</Radio> |
| | | </Radio.Group> |
| | | )} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | {typename === 'pad' && adapters.includes('app') ? <Col span={12}> |
| | | <Form.Item label={ |
| | | <Tooltip placement="topLeft" title="在明科云APP中,状态栏的最大高度,空值时使用APP获取到的状态栏高度。"> |
| | | <QuestionCircleOutlined className="mk-form-tip" /> |
| | | 状态栏高度 |
| | | </Tooltip> |
| | | }> |
| | | {getFieldDecorator('topHeight', { |
| | | initialValue: card ? card.topHeight || '' : '' |
| | | })(<InputNumber min={0} max={5000} precision={0} onPressEnter={this.handleSubmit}/>)} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | <Col span={12}> |
| | |
| | | )} |
| | | </Form.Item> |
| | | </Col> |
| | | {typename === 'pad' ? <Col span={12}> |
| | | <Form.Item label={ |
| | | <Tooltip placement="topLeft" title="系统默认屏幕方向,单个页面方向请在页面中配置。"> |
| | | <QuestionCircleOutlined className="mk-form-tip" /> |
| | | 屏幕方向 |
| | | </Tooltip> |
| | | }> |
| | | {getFieldDecorator('direction', { |
| | | initialValue: card ? card.direction || 'vertical' : 'vertical' |
| | | })( |
| | | <Radio.Group> |
| | | <Radio value="vertical">竖屏</Radio> |
| | | <Radio value="horizontal">横屏</Radio> |
| | | </Radio.Group> |
| | | )} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | </Row> |
| | | </Form> |
| | | ) |