From e8edfdadb561cd83bf6e1c3e00d55b8cc2aee6d5 Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期一, 17 十月 2022 17:57:34 +0800 Subject: [PATCH] 2022-10-17 --- src/views/mobdesign/menuform/index.jsx | 174 ++++++++++++++++++++++++++++++++++++++++++++++++--------- 1 files changed, 145 insertions(+), 29 deletions(-) diff --git a/src/views/mobdesign/menuform/index.jsx b/src/views/mobdesign/menuform/index.jsx index 5da1243..14fae1f 100644 --- a/src/views/mobdesign/menuform/index.jsx +++ b/src/views/mobdesign/menuform/index.jsx @@ -1,35 +1,34 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' -import { Form, Row, Col, Input, Radio, Icon, Tooltip, InputNumber } from 'antd' +import { Form, Row, Col, Input, Radio, Tooltip, InputNumber } from 'antd' +import { QuestionCircleOutlined } from '@ant-design/icons' import asyncComponent from '@/utils/asyncComponent' import './index.scss' +const { TextArea } = Input +const ColorSketch = asyncComponent(() => import('@/mob/colorsketch')) const SourceComponent = asyncComponent(() => import('@/menu/components/share/sourcecomponent')) class CustomMenuForm extends Component { static propTpyes = { - dict: PropTypes.object, // 瀛楀吀椤� config: PropTypes.object, MenuId: PropTypes.string, + adapters: PropTypes.array, updateConfig: PropTypes.func } state = {} // 涓�浜岀骇鑿滃崟鍒囨崲 - selectChange = (key, value) => { - const { config } = this.props + selectChange = (key, value, hex) => { + let _config = {...this.props.config, [key]: value} - if (key === 'cacheUseful') { - this.props.updateConfig({...config, cacheUseful: value}) - } else if (key === 'timeUnit') { - this.props.updateConfig({...config, timeUnit: value}) - } else if (key === 'advertUrl') { - this.props.updateConfig({...config, advertUrl: value}) - } else if (key === 'advertTime') { - this.props.updateConfig({...config, advertTime: value}) + if (key === 'statusBarbgColor' && hex) { + _config.statusBarHexColor = hex } + + this.props.updateConfig(_config) } // 鑿滃崟鍚嶇О @@ -42,6 +41,10 @@ this.props.updateConfig({...this.props.config, MenuNo: e.target.value}) } + changeRemark = (e) => { + this.props.updateConfig({...this.props.config, Remark: e.target.value}) + } + changeCacheDay = (val) => { if (typeof(val) !== 'number') { val = '' @@ -50,7 +53,7 @@ } render() { - const { dict, config } = this.props + const { config, adapters } = this.props const { getFieldDecorator } = this.props.form const formItemLayout = { labelCol: { @@ -67,26 +70,26 @@ <Form {...formItemLayout} className="custom-menu-form"> <Row> <Col span={24}> - <Form.Item label={dict['mob.menu'] + dict['mob.name']}> + <Form.Item label="鑿滃崟鍚嶇О"> {getFieldDecorator('MenuName', { initialValue: config.MenuName, rules: [ { required: true, - message: dict['mob.required.input'] + dict['mob.menu'] + dict['mob.name'] + '!' + message: '璇疯緭鍏ヨ彍鍗曞悕绉�!' } ] })(<Input placeholder="" autoComplete="off" onChange={this.changeName}/>)} </Form.Item> </Col> <Col span={24}> - <Form.Item label={dict['mob.menu'] + dict['mob.param']}> + <Form.Item label="鑿滃崟鍙傛暟"> {getFieldDecorator('MenuNo', { initialValue: config.MenuNo, rules: [ { required: true, - message: dict['mob.required.input'] + dict['mob.menu'] + dict['mob.param'] + '!' + message: '璇疯緭鍏ヨ彍鍗曞弬鏁�!' } ] })(<Input placeholder="" autoComplete="off" onChange={this.changeNo}/>)} @@ -95,7 +98,7 @@ <Col span={24}> <Form.Item label={ <Tooltip placement="topLeft" title="瀵逛簬涓嶇粡甯告�у彉鍔ㄧ殑淇℃伅锛岀紦瀛樻暟鎹湁鍔╀簬鎻愰珮鏌ヨ鏁堢巼銆�"> - <Icon type="question-circle" /> + <QuestionCircleOutlined className="mk-form-tip" /> 缂撳瓨鏁版嵁 </Tooltip> }> @@ -109,15 +112,15 @@ )} </Form.Item> </Col> - <Col span={24}> + {/* <Col span={24}> <Form.Item label={ <Tooltip placement="topLeft" title="璺宠繃鏉冮檺楠岃瘉鏃讹紝椤甸潰涓粍浠跺強鎸夐挳涓嶅湪杩涜鏉冮檺鎺у埗銆�"> - <Icon type="question-circle" /> + <QuestionCircleOutlined className="mk-form-tip" /> 鏉冮檺楠岃瘉 </Tooltip> }> {getFieldDecorator('permission', { - initialValue: config.permission || 'true' + initialValue: config.permission || 'false' })( <Radio.Group onChange={(e) => {this.selectChange('permission', e.target.value)}}> <Radio value="true">浣跨敤</Radio> @@ -125,11 +128,11 @@ </Radio.Group> )} </Form.Item> - </Col> + </Col> */} <Col span={24}> <Form.Item label={ <Tooltip placement="topLeft" title="浣跨敤鐧诲綍楠岃瘉鍚庯紝鐢ㄦ埛蹇呴』鐧诲綍绯荤粺鍚庢墠鍙互璁块棶锛屾敞锛氬惈鏈夌櫥褰曠粍浠剁殑椤甸潰涓棤鏁堛��"> - <Icon type="question-circle" /> + <QuestionCircleOutlined className="mk-form-tip" /> 鐧诲綍楠岃瘉 </Tooltip> }> @@ -162,7 +165,7 @@ rules: [ { required: true, - message: dict['mob.required.input'] + '鏃堕暱!' + message: '璇疯緭鍏ユ椂闀�!' } ] })( @@ -171,9 +174,48 @@ </Form.Item> </Col> : null} <Col span={24}> + <Form.Item label="涓嬫媺鍒锋柊"> + {getFieldDecorator('pullRefresh', { + initialValue: config.pullRefresh || 'false' + })( + <Radio.Group onChange={(e) => {this.selectChange('pullRefresh', e.target.value)}}> + <Radio value="false">鍏抽棴</Radio> + <Radio value="true">寮�鍚�</Radio> + </Radio.Group> + )} + </Form.Item> + </Col> + {adapters.includes('app') || adapters.includes('wxmini') ? <Col span={24}> + <Form.Item className="status-bar" label={ + <Tooltip placement="topLeft" title="鍦ㄦ槑绉戜簯APP鎴栧皬绋嬪簭涓紝鐘舵�佹爮鐨勮儗鏅壊銆�"> + <QuestionCircleOutlined className="mk-form-tip" /> + 鐘舵�佹爮鑳屾櫙 + </Tooltip> + }> + <ColorSketch value={config.statusBarbgColor || '#ffffff'} onChange={(val, hex) => {this.selectChange('statusBarbgColor', val, hex)}} /> + </Form.Item> + </Col> : null} + {adapters.includes('wxmini') ? <Col span={24}> + <Form.Item className="status-bar-color" label={ + <Tooltip placement="topLeft" title="鍦ㄤ娇鐢ㄥ皬绋嬪簭鏃讹紝鐘舵�佹爮鐨勫瓧浣撻鑹层��"> + <QuestionCircleOutlined className="mk-form-tip" /> + 鐘舵�佹爮瀛椾綋 + </Tooltip> + }> + {getFieldDecorator('statusBarColor', { + initialValue: config.statusBarColor || 'black' + })( + <Radio.Group onChange={(e) => {this.selectChange('statusBarColor', e.target.value)}}> + <Radio value="black">榛戣壊</Radio> + <Radio value="white">鐧借壊</Radio> + </Radio.Group> + )} + </Form.Item> + </Col> : null} + {adapters.includes('app') ? <Col span={24}> <Form.Item label={ <Tooltip placement="topLeft" title="鍦ㄦ槑绉戜簯APP涓湁鏁堛��"> - <Icon type="question-circle" /> + <QuestionCircleOutlined className="mk-form-tip" /> 骞垮憡椤� </Tooltip> }> @@ -183,15 +225,20 @@ <SourceComponent type="picture" placement="right" onChange={(val) => {this.selectChange('advertUrl', val)}}/> )} </Form.Item> - </Col> - {config.advertUrl ? <Col span={24}> - <Form.Item label="鍋滅暀(s)"> + </Col> : null} + {adapters.includes('app') && config.advertUrl ? <Col span={24}> + <Form.Item label={ + <Tooltip placement="topLeft" title="骞垮憡椤电殑鍋滅暀鏃堕棿銆�"> + <QuestionCircleOutlined className="mk-form-tip" /> + 鍋滅暀(s) + </Tooltip> + }> {getFieldDecorator('advertTime', { initialValue: config.advertTime || 3, rules: [ { required: true, - message: dict['mob.required.input'] + '鍋滅暀鏃堕棿!' + message: '璇疯緭鍏ュ仠鐣欐椂闂�!' } ] })( @@ -199,6 +246,75 @@ )} </Form.Item> </Col> : null} + {adapters.includes('weixin') || adapters.includes('wxmini') ? <Col span={24}> + <Form.Item label={ + <Tooltip placement="topLeft" title="浣跨敤榛樿鏃惰鍦ㄥ瓙搴旂敤璁剧疆鍒嗕韩淇℃伅锛屼娇鐢╱rl鍙傛暟浼氫娇鐢ㄤ笂椤靛弬鏁版浛鎹㈢浉搴斿瓧娈碉紙@field@锛夈�傛敞锛氫娇鐢ㄨ嚜瀹氫箟鎴杣rl鍙傛暟鏃朵細鍒嗕韩褰撳墠椤甸潰銆�"> + <QuestionCircleOutlined className="mk-form-tip" /> + 鍒嗕韩 + </Tooltip> + }> + {getFieldDecorator('share', { + initialValue: config.share || 'default' + })( + <Radio.Group className="mini-radio" onChange={(e) => {this.selectChange('share', e.target.value)}}> + <Radio value="default">榛樿</Radio> + <Radio value="custom">鑷畾涔�</Radio> + <Radio value="url">url鍙傛暟</Radio> + </Radio.Group> + )} + </Form.Item> + </Col> : null} + {['custom', 'url'].includes(config.share) && (adapters.includes('weixin') || adapters.includes('wxmini')) ? <Col span={24}> + <Form.Item label="鍒嗕韩鏍囬"> + {getFieldDecorator('share_title', { + initialValue: config.share_title || '', + rules: [ + { + required: true, + message: '璇疯緭鍏ュ垎浜爣棰�!' + } + ] + })(<Input placeholder="" autoComplete="off" onChange={(e) => {this.selectChange('share_title', e.target.value)}}/>)} + </Form.Item> + </Col> : null} + {['custom', 'url'].includes(config.share) && (adapters.includes('weixin') || adapters.includes('wxmini')) ? <Col span={24}> + <Form.Item label="鍒嗕韩鎻忚堪"> + {getFieldDecorator('share_des', { + initialValue: config.share_des || '' + })(<Input placeholder="" autoComplete="off" onChange={(e) => {this.selectChange('share_des', e.target.value)}}/>)} + </Form.Item> + </Col> : null} + {config.share === 'custom' && (adapters.includes('weixin') || adapters.includes('wxmini')) ? <Col span={24}> + <Form.Item label="鍒嗕韩鍥剧墖"> + {getFieldDecorator('share_url', { + initialValue: config.share_url || '' + })( + <SourceComponent type="picture" placement="right" onChange={(val) => {this.selectChange('share_url', val)}}/> + )} + </Form.Item> + </Col> : null} + {config.share === 'url' && (adapters.includes('weixin') || adapters.includes('wxmini')) ? <Col span={24}> + <Form.Item label="鍒嗕韩鍥剧墖"> + {getFieldDecorator('share_url', { + initialValue: config.share_url || '' + })( + <Input placeholder="" autoComplete="off" onChange={(e) => {this.selectChange('share_url', e.target.value)}}/> + )} + </Form.Item> + </Col> : null} + <Col span={24}> + <Form.Item label="澶囨敞"> + {getFieldDecorator('Remark', { + initialValue: config.Remark || '', + rules: [ + { + max: 512, + message: '澶囨敞鏈�澶�512涓瓧绗︼紒' + } + ] + })(<TextArea rows={2} placeholder={''} onChange={this.changeRemark} />)} + </Form.Item> + </Col> </Row> </Form> ) -- Gitblit v1.8.0