From 7a5502884c004b829bf881dc304215a16755de6c Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期二, 01 十一月 2022 14:21:04 +0800 Subject: [PATCH] 2022-11-01 --- src/tabviews/custom/components/carousel/prop-card/index.jsx | 96 ++++++++++++++++++++++++++++++++++++++++++++---- 1 files changed, 88 insertions(+), 8 deletions(-) diff --git a/src/tabviews/custom/components/carousel/prop-card/index.jsx b/src/tabviews/custom/components/carousel/prop-card/index.jsx index 9be4cc9..6df066d 100644 --- a/src/tabviews/custom/components/carousel/prop-card/index.jsx +++ b/src/tabviews/custom/components/carousel/prop-card/index.jsx @@ -1,7 +1,8 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Spin, notification, Carousel, Modal } from 'antd' +import { Spin, notification, Carousel, Modal, Checkbox, Button } from 'antd' +import { LeftOutlined, RightOutlined } from '@ant-design/icons' import asyncComponent from '@/utils/asyncComponent' import Api from '@/api' @@ -24,8 +25,9 @@ config: null, // 鍥捐〃閰嶇疆淇℃伅 loading: false, // 鏁版嵁鍔犺浇鐘舵�� sync: false, // 鏄惁缁熶竴璇锋眰鏁版嵁 - data: {}, // 鏁版嵁 - BData: null + data: {$$empty: true}, + BData: null, + visible: false } UNSAFE_componentWillMount () { @@ -66,6 +68,7 @@ } } + _data.$$uuid = _data[_config.setting.primaryKey] || '' _data.$$BID = BID || '' _data.$$BData = BData || '' @@ -101,6 +104,8 @@ setTimeout(() => { this.loadData() }, _config.setting.delay || 0) + } else if (_config.wrap.display === 'modal' && _config.wrap.datatype === 'static') { + this.openModal() } }) } @@ -152,15 +157,38 @@ } } + _data.$$uuid = _data[config.setting.primaryKey] || '' _data.$$BID = BID || '' _data.$$BData = BData || '' - this.setState({sync: false, data: _data}) + this.setState({sync: false, data: _data}, () => { + if (config.wrap.display === 'modal') { + this.openModal() + } + }) } else if (config.setting.syncRefresh && nextProps.mainSearch && !is(fromJS(this.props.mainSearch), fromJS(nextProps.mainSearch))) { this.setState({}, () => { this.loadData() }) } + } + + openModal = () => { + const { config, data } = this.state + + let tip = localStorage.getItem('modal' + config.uuid) + + if ((data.$$uuid && tip === data.$$uuid) || (!data.$$uuid && tip)) return + + if (config.wrap.modalContent === 'update') { + localStorage.setItem('modal' + config.uuid, data.$$uuid || 'true') + + Api.getAppVersion(true) + } + + setTimeout(() => { + this.setState({visible: true}) + }, 200) } /** @@ -264,13 +292,18 @@ } else { _data = result.data[0] } - + + _data.$$uuid = _data[config.setting.primaryKey] || '' _data.$$BID = BID || '' _data.$$BData = BData || '' this.setState({ data: _data, loading: false + }, () => { + if (config.wrap.display === 'modal') { + this.openModal() + } }) } else { this.setState({ @@ -292,10 +325,57 @@ } } - render() { - const { config, loading, data } = this.state + onTipChange = (e) => { + const { config, data } = this.state - if (config.wrap.empty === 'hidden' && (!data || data.$$empty)) return null + if (e.target.checked) { + localStorage.setItem('modal' + config.uuid, data.$$uuid || 'true') + } else { + localStorage.removeItem('modal' + config.uuid) + } + } + + render() { + const { config, loading, data, visible } = this.state + + if (config.wrap.empty === 'hidden' && data.$$empty) return null + + if (config.wrap.display === 'modal') { + return <Modal + wrapClassName='mk-carousel-modal' + visible={visible} + maskClosable={false} + width={config.wrap.modalWidth} + onCancel={() => this.setState({visible: false})} + footer={null} + destroyOnClose + > + <div className="custom-prop-carousel-box" style={config.style}> + {config.subcards.length > 1 ? <div className="prev" onClick={() => this.node && this.node.prev()}><LeftOutlined /></div> : null} + {config.subcards.length > 1 ? <div className="next" onClick={() => this.node && this.node.next()}><RightOutlined /></div> : null} + <Carousel + autoplay={config.wrap.autoplay !== 'false'} + dots={config.wrap.dots !== 'false'} + dotPosition={config.wrap.dotPosition || 'bottom'} + effect={config.wrap.effect || 'scrollx'} + autoplaySpeed={config.wrap.speed} + ref={ref => this.node = ref} + > + {config.subcards.map((item, index) => ( + <div key={index}> + <CardItem card={item} cards={config} data={data}/> + </div> + ))} + </Carousel> + </div> + {config.wrap.modalContent !== 'update' ? <div className="mk-footer"> + <Checkbox defaultChecked={false} onChange={this.onTipChange}>涓嶅湪鎻愰啋</Checkbox> + <Button className="close" onClick={() => this.setState({visible: false})}>绔嬪嵆浣撻獙</Button> + </div> : <div className="mk-footer single"> + <Button className="close" onClick={() => this.setState({visible: false})}>鐭ラ亾浜�</Button> + </div>} + </Modal> + } return ( <div className="custom-prop-carousel-box" id={'anchor' + config.uuid} style={config.style}> -- Gitblit v1.8.0