| | |
| | | import { Form, Row, Col, Select, Radio, Tooltip, Input } from 'antd' |
| | | import { QuestionCircleOutlined } from '@ant-design/icons' |
| | | |
| | | import Api from '@/api' |
| | | import asyncComponent from '@/utils/asyncComponent' |
| | | import './index.scss' |
| | | |
| | |
| | | |
| | | state = { |
| | | wxTemps: [], |
| | | selectTemp: null, |
| | | miniTemps: [], |
| | | } |
| | | |
| | | componentDidMount() { |
| | | const { verify } = this.props |
| | | let wxTemps = sessionStorage.getItem('wxTemplates') |
| | | let miniTemps = sessionStorage.getItem('wxMiniTemplates') |
| | | |
| | | wxTemps = wxTemps ? JSON.parse(wxTemps) : [] |
| | | miniTemps = miniTemps ? JSON.parse(miniTemps) : [] |
| | | if (window.GLOB.WXAppID && !wxTemps) { |
| | | Api.wxAccessToken().then(res => { |
| | | let wxtoken = res.oa_access_token || '' |
| | | // let minitoken = res.mini_access_token || '' |
| | | |
| | | if (wxtoken) { |
| | | 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] |
| | | |
| | | this.setState({wxTemps, miniTemps}) |
| | | 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}) |
| | | } |
| | | |
| | | sessionStorage.setItem('wxTemplates', JSON.stringify(temps)) |
| | | localStorage.setItem('wxTemplates', JSON.stringify(temps)) |
| | | |
| | | localStorage.removeItem('wxTemplates') |
| | | }) |
| | | } else { |
| | | sessionStorage.setItem('wxTemplates', JSON.stringify([])) |
| | | localStorage.setItem('wxTemplates', JSON.stringify([])) |
| | | |
| | | localStorage.removeItem('wxTemplates') |
| | | } |
| | | // if (minitoken) { |
| | | // Api.wxNginxRequest(`wxaapi/newtmpl/gettemplate?access_token=${minitoken}`, 'get').then(res => { |
| | | // if (res.errmsg === 'ok' && res.data) { |
| | | // sessionStorage.setItem('wxMiniTemplates', JSON.stringify(res.data)) |
| | | // } else { |
| | | // sessionStorage.setItem('wxMiniTemplates', JSON.stringify([])) |
| | | // } |
| | | // }) |
| | | // } else { |
| | | // sessionStorage.setItem('wxMiniTemplates', 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}) |
| | | } |
| | | } |
| | | |
| | | handleConfirm = () => { |
| | |
| | | _verify.wxNoteLinkMenuId = '' |
| | | _verify.wxNoteCallback = 'false' |
| | | _verify.wxNoteKeys = null |
| | | |
| | | if (this.state.selectTemp) { |
| | | this.setState({selectTemp: null}) |
| | | } |
| | | } |
| | | |
| | | this.props.onChange(_verify) |
| | |
| | | const { verify } = this.props |
| | | |
| | | let _verify = {...verify, wxTemplateId: val} |
| | | let selectTemp = {content: option.props.content.replace(/\r\n|\n/g, '<br/>'), example: option.props.example.replace(/\r\n|\n/g, '<br/>')} |
| | | |
| | | let keys = [] |
| | | if (option.props.content) { |
| | |
| | | |
| | | return item |
| | | }) |
| | | |
| | | this.setState({selectTemp}) |
| | | |
| | | this.props.onChange(_verify) |
| | | } |
| | |
| | | |
| | | render() { |
| | | const { unionFields, verify, notes, card } = this.props |
| | | const { wxTemps } = this.state |
| | | const { wxTemps, selectTemp } = this.state |
| | | const formItemLayout = { |
| | | labelCol: { |
| | | xs: { span: 24 }, |
| | |
| | | <Form.Item label="消息模板" required> |
| | | <Select value={verify.wxTemplateId} onSelect={this.onWxTemplateChange}> |
| | | {wxTemps.map(option => |
| | | <Select.Option key={option.template_id} content={option.content} value={option.template_id}> |
| | | <Select.Option key={option.template_id} content={option.content} example={option.example} value={option.template_id}> |
| | | {option.title} |
| | | </Select.Option> |
| | | )} |
| | |
| | | </Col> : null} |
| | | {verify.wxNoteLink === 'miniProgram' ? <Col span={8}> |
| | | <Form.Item label={ |
| | | <Tooltip placement="bottomLeft" title={`跳转至小程序指定菜单,空值默认跳转至小程序首页。`}> |
| | | <Tooltip placement="top" title="添加菜单ID可跳转至小程序指定页面,空值默认跳转至小程序首页。注:数据里中如果有bid字段(值不为空),打开小程序时会做为BID传入页面中。"> |
| | | <QuestionCircleOutlined className="mk-form-tip" /> |
| | | 菜单ID |
| | | </Tooltip> |
| | |
| | | <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 className="note-wrap"> |
| | | <div className="note"> |
| | | <p>内容示例</p> |
| | | <div dangerouslySetInnerHTML={{ __html: selectTemp.example }}></div> |
| | | </div> |
| | | </div> |
| | | <div className="note-wrap"> |
| | | <div className="note"> |
| | | <p>模板信息</p> |
| | | <div dangerouslySetInnerHTML={{ __html: selectTemp.content }}></div> |
| | | </div> |
| | | </div> |
| | | <div className="note-wrap"> |
| | | <div className="note"> |
| | | <p>消息体</p> |
| | | <div> |
| | | <p>openid: "接收者openid",</p> |
| | | <p>send_id: "防重入id",</p> |
| | | {verify.wxNoteKeys.map(item => <p>{item.value}: "=> {item.key}",</p>)} |
| | | <p>bid: "跳转小程序时,可作为BID。"</p> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </Col> : null} |
| | | </Row> |
| | | </Form> |
| | | ) |