From cedec1422fa7cada087728147bf56efa757beea7 Mon Sep 17 00:00:00 2001
From: wangsongsole <wangsongsole@126.com>
Date: Thu, 16 Jun 2022 13:58:26 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=AF=8C=E6=96=87=E6=9C=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/knockGold/index.jsx          | 21 ++++----
 src/components/knockGold/mobileCmponent.jsx |  5 +-
 src/components/knockGold/wangEditor.jsx     | 54 +++++++++++++++++++++
 3 files changed, 68 insertions(+), 12 deletions(-)
 create mode 100644 src/components/knockGold/wangEditor.jsx

diff --git a/src/components/knockGold/index.jsx b/src/components/knockGold/index.jsx
index d5862a26..e4ef4e61 100644
--- a/src/components/knockGold/index.jsx
+++ b/src/components/knockGold/index.jsx
@@ -29,6 +29,7 @@ import _, { isArray } from 'lodash'
 import { getVoucherWarningAccount, handelResponse } from '@/assets/api'
 import AddNewDialog from './Dialog'
 import MobileComponent from './mobileCmponent'
+import WangEditor from './wangEditor'
 const getTimeList = [
   { key: '0', text: '立即生效' },
   { key: '1', text: '次日生效' }
@@ -116,6 +117,8 @@ export default class addKnockGold extends Component {
       let model = this.state.model
       model.entry_time[0] = this.props.data.time_limit.effect_time.start_time
       model.entry_time[1] = this.props.data.time_limit.effect_time.end_time
+      model.instruction = this.props.data.instruction
+
       model.fixed_time[0] =
         this.props.data.time_limit.use_time.fiexd_time?.start_time
       model.fixed_time[1] =
@@ -127,12 +130,12 @@ export default class addKnockGold extends Component {
 
   /* 编辑回显 */
   echoFun(UserSelectList) {
-    console.log(this.props.data)
     if (this.props.data) {
       let model = this.state.model
       for (let key in this.props.data) {
         model[key] = this.props.data[key]
       }
+      model.weight = String(this.props.data.weight)
       model.early_per = this.props.data.early_per.map((item) => String(item))
       model.channel = String(this.props.data.channel)
       model.natural_limit = String(this.props.data.natural_limit)
@@ -1021,17 +1024,13 @@ export default class addKnockGold extends Component {
         <Card style={{ width: '70%', margin: '10px 0' }} title={'样式设置'}>
           <Form ref='form3'>
             <FormItem id='instruction' labelname='使用说明' required=''>
-              <Input
-                value={this.state.model.instruction}
-                width='520px'
-                onChange={({ target }) => {
-                  this.onHandleChange(target.value, 'instruction')
+              <WangEditor
+                pageType='detaileditor'
+                setEdittext={(text) => {
+                  this.onHandleChange(text, 'instruction')
                 }}
-                placeholder={'请输入'}
-                maxLength={500}
-                type='textarea'
-                showCount
-                autoSize
+                width='520px'
+                text={this.state.model.instruction}
               />
             </FormItem>
           </Form>
diff --git a/src/components/knockGold/mobileCmponent.jsx b/src/components/knockGold/mobileCmponent.jsx
index 05fba9f0..8abe9277 100644
--- a/src/components/knockGold/mobileCmponent.jsx
+++ b/src/components/knockGold/mobileCmponent.jsx
@@ -53,7 +53,10 @@ export default ({ data }) => {
             </div>
             <div className='content'>
               <h3>使用规则</h3>
-              {<p>{data.instruction}</p>}
+              <div
+                dangerouslySetInnerHTML={{
+                  __html: data.instruction
+                }}></div>
             </div>
           </>
         ) : (
diff --git a/src/components/knockGold/wangEditor.jsx b/src/components/knockGold/wangEditor.jsx
new file mode 100644
index 00000000..9e5eb68e
--- /dev/null
+++ b/src/components/knockGold/wangEditor.jsx
@@ -0,0 +1,54 @@
+import React from 'react'
+import Editor from 'wangeditor'
+export default class wangeditor extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      editorHtml: ''
+    }
+  }
+  componentDidMount() {
+    let self = this
+    const editor = new Editor('#wangeditorDom')
+    this.setState({ editor })
+    editor.config.colors = ['#696969', '#9093a2', '#fgddbb', '#e3e7eb']
+    editor.config.pasteText = true
+    // 设置编辑区域高度为 500px
+    editor.config.height = 200
+    editor.config.menus = [
+      'bold',
+      'foreColor',
+      'italic',
+      'indent',
+      'link',
+      'justify'
+    ]
+
+    // 注意，先配置 height ，再执行 create()
+    // 注意，先配置 height ，再执行 create()
+    editor.config.onchange = function (newHtml) {
+      var text = editor.txt.text()
+      if (text.length == 0) {
+        //没有文字
+        self.props.setEdittext('')
+      }
+      if (text.length > 500) {
+        let str = text.slice(0, 500)
+        self.setState({ editorHtml: str })
+        editor.txt.html(str)
+        self.props.setEdittext(str)
+        return
+      }
+      self.setState({ editorHtml: newHtml })
+      self.props.setEdittext(newHtml)
+    }
+
+    editor.create()
+    //列表悬浮富文本
+    editor.txt.html(this.props.text)
+  }
+
+  render() {
+    return <div id='wangeditorDom' style={{ width: this.props.width }}></div>
+  }
+}