| | |
| | | import { QuestionCircleOutlined } from '@ant-design/icons' |
| | | |
| | | import Api from '@/api' |
| | | import asyncComponent from '@/utils/asyncComponent' |
| | | import './index.scss' |
| | | |
| | | const ColorSketch = asyncComponent(() => import('@/mob/colorsketch')) |
| | | |
| | | class BillCodeForm extends Component { |
| | | static propTpyes = { |
| | |
| | | } |
| | | |
| | | componentDidMount() { |
| | | const { verify } = this.props |
| | | let wxTemps = sessionStorage.getItem('wxTemplates') |
| | | |
| | | if (window.GLOB.WXAppID && window.GLOB.nginx && !wxTemps) { |
| | |
| | | Api.wxNginxRequest(`cgi-bin/template/get_all_private_template?access_token=${wxtoken}`, 'get').then(res => { |
| | | let temps = [] |
| | | if (res.template_list) { |
| | | temps = res.template_list.filter(item => item.primary_industry) |
| | | let selectTemp = temps.filter(item => item.template_id === verify.wxTemplateId)[0] |
| | | temps = res.template_list.filter(item => { |
| | | if (!item.primary_industry) return false |
| | | if (item.content) { |
| | | item.content = item.content.replace('{{first.DATA}}\n', '').replace('\n{{remark.DATA}}', '') |
| | | } |
| | | |
| | | if (selectTemp) { |
| | | selectTemp.content = selectTemp.content.replace(/\r\n|\n/g, '<br/>') |
| | | selectTemp.example = selectTemp.example.replace(/\r\n|\n/g, '<br/>') |
| | | } |
| | | |
| | | this.setState({wxTemps: temps, selectTemp}) |
| | | return true |
| | | }) |
| | | } |
| | | |
| | | |
| | | sessionStorage.setItem('wxTemplates', JSON.stringify(temps)) |
| | | localStorage.setItem('wxTemplates', JSON.stringify(temps)) |
| | | |
| | | localStorage.removeItem('wxTemplates') |
| | | |
| | | this.resetTemps(temps) |
| | | }) |
| | | } else { |
| | | sessionStorage.setItem('wxTemplates', JSON.stringify([])) |
| | |
| | | } else if (wxTemps) { |
| | | wxTemps = JSON.parse(wxTemps) |
| | | |
| | | let selectTemp = wxTemps.filter(item => item.template_id === verify.wxTemplateId)[0] |
| | | |
| | | if (selectTemp) { |
| | | selectTemp.content = selectTemp.content.replace(/\r\n|\n/g, '<br/>') |
| | | selectTemp.example = selectTemp.example.replace(/\r\n|\n/g, '<br/>') |
| | | } |
| | | |
| | | this.setState({wxTemps, selectTemp}) |
| | | this.resetTemps(wxTemps) |
| | | } |
| | | } |
| | | |
| | | resetTemps = (wxTemps) => { |
| | | const { verify } = this.props |
| | | |
| | | let sysTemps = [{"template_id":"UdGBwbjFKnIBzW2TalsdJkwZ9R2LvaAozWZ-yo2Dn00","title":"缴费通知","primary_industry":"IT科技","deputy_industry":"IT软件与服务","content":"{{first.DATA}}\n受理编号:{{keyword1.DATA}}\n缴费时间:{{keyword2.DATA}}\n缴费类别:{{keyword3.DATA}}\n缴费金额:{{keyword4.DATA}}\n缴费结果:{{keyword5.DATA}}\n{{remark.DATA}}","example":"您的缴费信息如下\r\n受理编号:010000000001\r\n缴费时间:2018年07月23日\r\n缴费类别:供暖缴费\r\n缴费金额:20元\r\n缴费结果:成功\r\n感谢您的使用!"}] |
| | | |
| | | sysTemps = [] |
| | | |
| | | let _wxTemps = [...wxTemps, ...sysTemps] |
| | | |
| | | let selectTemp = _wxTemps.filter(item => item.template_id === verify.wxTemplateId)[0] |
| | | |
| | | if (selectTemp) { |
| | | selectTemp.content = selectTemp.content.replace(/\r\n|\n/g, '<br/>') |
| | | selectTemp.example = selectTemp.example.replace(/\r\n|\n/g, '<br/>') |
| | | } |
| | | |
| | | this.setState({wxTemps: _wxTemps, selectTemp}) |
| | | } |
| | | |
| | | handleConfirm = () => { |
| | |
| | | |
| | | let index = 1 |
| | | _verify.wxNoteKeys = keys.map(key => { |
| | | let item = { |
| | | key: key, |
| | | color: '#000000', |
| | | readonly: false |
| | | } |
| | | if (key === 'first') { |
| | | item.value = 'first' |
| | | item.readonly = true |
| | | } else if (key === 'remark') { |
| | | item.value = 'remark' |
| | | item.readonly = true |
| | | } else { |
| | | item.value = 'p' + index |
| | | index++ |
| | | } |
| | | let item = { key: key } |
| | | |
| | | item.value = 'p' + index |
| | | index++ |
| | | |
| | | return item |
| | | }) |
| | |
| | | _verify.wxNoteKeys = _verify.wxNoteKeys.map(m => { |
| | | if (m.key === key) { |
| | | m.value = val |
| | | } |
| | | |
| | | return m |
| | | }) |
| | | |
| | | this.props.onChange(_verify) |
| | | } |
| | | |
| | | onWxNoteColorChange = (key, val) => { |
| | | let _verify = fromJS(this.props.verify).toJS() |
| | | |
| | | _verify.wxNoteKeys = _verify.wxNoteKeys.map(m => { |
| | | if (m.key === key) { |
| | | m.color = val |
| | | } |
| | | |
| | | return m |
| | |
| | | <Input placeholder="" autoComplete="off" value={verify.wxNoteLinkMenuId || ''} onChange={(e) => {this.onOptionChange(e.target.value, 'wxNoteLinkMenuId')}}/> |
| | | </Form.Item> |
| | | </Col> : null} |
| | | {verify.wxNote === 'true' && verify.wxNoteKeys ? verify.wxNoteKeys.map(item => <Col span={8} key={item.key}> |
| | | <Form.Item className="mk-note-keyword" label={item.key} required> |
| | | <Select value={item.value} disabled={item.readonly} onSelect={(val) => this.onWxNoteKeyChange(item.key, val)}> |
| | | {verify.wxNote === 'true' && verify.wxNoteKeys ? verify.wxNoteKeys.map((item, index) => <Col span={8} key={'mk' + index}> |
| | | <Form.Item label={item.key} required> |
| | | <Select value={item.value} onSelect={(val) => this.onWxNoteKeyChange(item.key, val)}> |
| | | <Select.Option value="p1">p1</Select.Option> |
| | | <Select.Option value="p2">p2</Select.Option> |
| | | <Select.Option value="p3">p3</Select.Option> |
| | |
| | | <Select.Option value="p9">p9</Select.Option> |
| | | <Select.Option value="p10">p10</Select.Option> |
| | | </Select> |
| | | <ColorSketch value={item.color || '#ffffff'} onChange={(val, hex) => {this.onWxNoteColorChange(item.key, hex)}} /> |
| | | </Form.Item> |
| | | </Col>) : null} |
| | | {selectTemp && verify.wxNoteKeys ? <Col span={24} className="wx-note"> |
| | |
| | | <div> |
| | | <p>openid: "接收者openid",</p> |
| | | <p>send_id: "防重入id",</p> |
| | | {verify.wxNoteKeys.map(item => <p>{item.value}: "=> {item.key}",</p>)} |
| | | {verify.wxNoteKeys.map((item, i) => <p key={'index' + i}>{item.value}: "=> {item.key}",</p>)} |
| | | <p>bid: "跳转小程序时,可作为BID。"</p> |
| | | </div> |
| | | </div> |