提交

package.json

     "moment": "^2.24.0",
     "omit.js": "^1.0.2",
     "path-to-regexp": "^3.0.0",
+    "qrcodejs2": "0.0.2",
     "qs": "^6.7.0",
     "react": "^16.8.6",
     "react-amap": "^1.2.8",

src/pages/activity/ActivityList.jsx

 import React, { useState, useEffect } from 'react';
 import { Form, Input, Button, Icon, Select, message, Table, Divider, Tag, Pagination, Modal, DatePicker } from 'antd';
 import { FormattedMessage } from 'umi-plugin-react/locale';
-import styles from '../style/GoodsList.less';
 import router from 'umi/router';
 import moment from 'moment';
+import QRCode from 'qrcodejs2'
+import styles from '../style/GoodsList.less';
 import SelectCity from '../../components/SelectButton/CitySelect'
 import BuildSelect from '../../components/SelectButton/BuildSelect'
 import apis from '../../services/apis';
     });
   }
 
+  const newQrcode = row => {
+    const qr = new QRCode('qrcode', {
+        text: row.dynamicId,
+        width: 128,
+        height: 128,
+    });
+  }
+
+  function download () {
+        const qrcode = document.getElementById('qrcode');
+        const imgs = qrcode.getElementsByTagName('img')
+        const img = imgs[imgs.length - 1]
+        console.log(img)
+        const link = document.createElement('a');
+        link.style.display = 'none'
+        const url = img.getAttribute('src');
+        console.log(img.getAttribute('src'))
+        link.setAttribute('href', url);
+        link.setAttribute('download', '活动二维码.png');
+        link.click();
+  }
+
   /**
    *
    *
       dataIndex: 'startDate',
       key: 'startDate',
       align: 'center',
-      render: (x, row) => <><span>{`${moment(row.startDate).format('YYYY-MM-DD')} —— ${moment(row.endDate).format('YYYY-MM-DD')}`}</span></>
+      render: (x, row) => <><span>{`${moment(row.startDate).format('YYYY-MM-DD')} —— ${moment(row.endDate).format('YYYY-MM-DD')}`}</span></>,
     },
     {
       title: '已参加人数',
       dataIndex: 'activityStatus',
       key: 'activityStatus',
       align: 'center',
-      render: activityStatus => <><span>{activityStatus == 0 ? "进行中" : activityStatus == 1 ? '未开始' : '已结束'}</span></>,
+      render: activityStatus => <><span>{activityStatus == 0 ? '进行中' : activityStatus == 1 ? '未开始' : '已结束'}</span></>,
     },
     {
       title: '操作',
       render: (x, row) => (
         <>
           <AuthButton name="admin.SignList.get" noRight={null}>
-            <span style={{ color: '#1990FF', cursor: 'pointer'}} onClick={getSignList.bind(this, row.dynamicId)}>{row.isEnlist == '1' || row.isEnlist == '2' ? "报名记录" : ""}<Icon type="snippets" className={styles.shoppingCart} /></span>
+            <span style={{ color: '#1990FF', cursor: 'pointer' }} onClick={getSignList.bind(this, row.dynamicId)}>{row.isEnlist == '1' || row.isEnlist == '2' ? '报名记录' : ''}<Icon type="snippets" className={styles.shoppingCart} /></span>
           </AuthButton>
           <AuthButton name="admin.buildingDynamic.send.dynamicId.put" noRight={null}>
-            <span style={{ color: '#1990FF', cursor: 'pointer' }} onClick={sendOrPublicDynamic.bind(this,row)}>{ row.status === 1 ? '取消发布' : '发布' }<Icon type="close-circle" className={styles.edit} /></span>
+            <span style={{ color: '#1990FF', cursor: 'pointer' }} onClick={sendOrPublicDynamic.bind(this, row)}>{ row.status === 1 ? '取消发布' : '发布' }<Icon type="close-circle" className={styles.edit} /></span>
           </AuthButton>
           <AuthButton name="admin.buildingDynamic.finish.put" noRight={null}>
-            {row.isEnlist == 1 && <span style={{ color: '#1990FF', cursor: 'pointer' }} onClick={finishDynamic.bind(this,row)}>结束活动<Icon type="poweroff" className={styles.edit} /></span>}
+            {row.isEnlist == 1 && <span style={{ color: '#1990FF', cursor: 'pointer' }} onClick={finishDynamic.bind(this, row)}>结束活动<Icon type="poweroff" className={styles.edit} /></span>}
           </AuthButton>
           <AuthButton name="admin.buildingDynamic.update.put" noRight={null}>
             <span style={{ color: '#1990FF', marginRight: '20px', cursor: 'pointer' }} onClick={topDynamic(row)}>{ row.weight === 1 ? '取消置顶' : '置顶' }<Icon type="vertical-align-top" className={styles.edit} /></span>
             {row.isEnlist != 2 && <span style={{ color: '#FF925C', cursor: 'pointer' }} onClick={toEditGoods(row.dynamicId)}>编辑<Icon type="form" className={styles.edit} /></span>}
           </AuthButton>
+          <span style={{ color: '#1990FF', cursor: 'pointer' }} onClick={newQrcode.bind(this, row)}>下载二维码<Icon type="qrcode" className={styles.shoppingCart} /></span>
         </>
-      )
+      ),
     },
   ];
 
           okText: '确定',
           cancelText: '取消',
           onOk() {
-              request({ ...apis.activity.finish, data: {dynamicId: row.dynamicId, top: "" } }).then(data => {
+              request({ ...apis.activity.finish, data: { dynamicId: row.dynamicId, top: '' } }).then(data => {
                   console.log(data)
                   message.info('操作成功！')
                   getList({ pageNum: 1, pageSize: 10 })
 //   置顶
   const topDynamic = row => () => {
       const weight = Math.abs(row.weight - 1)
-      request({ ...apis.activity.weight, params: {dynamicId: row.dynamicId, weight} }).then(data => {
+      request({ ...apis.activity.weight, params: { dynamicId: row.dynamicId, weight } }).then(data => {
           console.log(data)
           message.info('操作成功！')
           getList({ pageNum: 1, pageSize: 10 })
           message.info(err.msg || err.message)
       })
   }
-  
+
   const sendOrPublicDynamic = row => {
       if (row.status === 1) {
           cancelDynamic(row)
           sendDynamic(row)
       }
   }
-  
+
   // 取消活动
   const cancelDynamic = row => {
-      request({ ...apis.activity.cancel, urlData: {id: row.dynamicId}}).then((data) => {
+      request({ ...apis.activity.cancel, urlData: { id: row.dynamicId } }).then(data => {
           message.info('操作成功！')
           getList({ pageNum: 1, pageSize: 10 })
-      }).catch((err) => {
+      }).catch(err => {
           console.log(err)
           message.info(err.msg || err.message)
       })
   }
-  
-  //发布活动
+
+  // 发布活动
   const sendDynamic = row => {
-      request({ ...apis.activity.send, urlData: {id: row.dynamicId}}).then((data) => {
+      request({ ...apis.activity.send, urlData: { id: row.dynamicId } }).then(data => {
           message.info('操作成功！')
           getList({ pageNum: 1, pageSize: 10 });
-      }).catch((err) => {
+      }).catch(err => {
           console.log(err)
           message.info(err.msg || err.message)
       })
   }
-  
+
   const changePageNum = pageNumber => {
       getList({ pageNum: pageNumber, pageSize: 10 })
   }
     });
   }
 
-   //重置搜索
+   // 重置搜索
    function handleReset() {
     props.form.resetFields();
   }
   return (
 
     <>
+      {/* style={{ display: 'none' }} */}
+      <div id="qrcode"></div>
       <Form layout="inline" onSubmit={e => handleSubmit(e, props)}>
         <Form.Item>
           {getFieldDecorator('cityId')(
         </Form.Item>
         <Form.Item>
           {getFieldDecorator('time')(
-            <DatePicker />
+            <DatePicker />,
           )}
         </Form.Item>
         <Form.Item>
       </AuthButton>
       <Table dataSource={data.list} columns={columns} pagination={false} rowKey="activityList"/>
       <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '30px' }}>
-       <Pagination showQuickJumper defaultCurrent={1} total={data.total} onChange={(e) => changePageNum(e)} />
+       <Pagination showQuickJumper defaultCurrent={1} total={data.total} onChange={e => changePageNum(e)} />
       </div>
     </>
   )