pc-admin/src/pages/activity/lookHouseActivity/edit/Share.jsx

import React, { useState, useEffect } from 'react';
import { Form, Input, Button, Icon, Select, Tabs, Radio, DatePicker, message, Card } from 'antd';

import router from 'umi/router';
import apis from '@/services/apis';
import moment from 'moment';
import BuildSelect from '@/components/SelectButton/BuildSelect2';
import Wangedit from '@/components/Wangedit/Wangedit';
import request from '@/utils/request';
import yinhao from '@/assets/yinhao.png';
import ImageUploader from '@/components/XForm/ImageUpload';
import logo from '@/assets/logo.svg';
import touxiang from '@/assets/touxiang.jpg';
import poster1 from '@/assets/poster1.png';
import poster2 from '@/assets/poster2.png';
import xiaochengxu from '@/assets/xiaochengxu.png';

const { TextArea } = Input;

const cancelPage = () => {
  router.go('-1');
};

const Share = props => {
  const { dynamicId } = props;
  const [inputValue, changeInput] = useState('');
  const [imgValue, changeImg] = useState('');
  const [shareContentId, setShareContentId] = useState('');

  useEffect(() => {
    if (dynamicId) {
      request({
        ...apis.activity.shareContent,
        params: { targetId: dynamicId, targetType: 'activity' },
      })
        .then(data => {
          if (data.length > 0) {
            setShareContentId(data[0].shareContentId);
            changeImg(data[0].shareContentImg);
            changeInput(data[0].shareContentTitle);
          }
        })
        .catch(err => {
          message.info(err.msg || err.message);
        });
    }
  }, [dynamicId]);

  const submitShare = () => {
    if (dynamicId) {
      if (shareContentId) {
        request({
          ...apis.activity.updateShareContent,
          urlData: { id: shareContentId },
          data: {
            targetId: dynamicId,
            shareContentType: 'activity',
            shareContentImg: imgValue,
            shareContentTitle: inputValue,
          },
        })
          .then(data => {
            message.info('保存成功');
          })
          .catch(err => {
            message.info(err.msg || err.message);
          });
      } else {
        request({
          ...apis.activity.addShareContent,
          data: {
            targetId: dynamicId,
            shareContentType: 'activity',
            shareContentImg: imgValue,
            shareContentTitle: inputValue,
          },
        })
          .then(data => {
            setShareContentId(data.shareContentId);
            message.info('保存成功');
          })
          .catch(err => {
            message.info(err.msg || err.message);
          });
      }
    } else {
      message.warn('请先保存基本信息数据');
    }
  };

  return (
    <div style={{ padding: '20px' }}>
      <div style={{ display: 'flex', margin: '10px 0 40px 0', width: '100%' }}>
        <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}>
          分享模板
        </p>
        <div>
          <p
            style={{
              display: 'flex',
              alignItems: 'center',
              fontSize: '14px',
              color: '#999',
              margin: '0',
              lineHeight: '0',
            }}
          >
            <img src={logo} style={{ width: '22px', marginRight: '10px' }} alt="" />
            橙蕉互动
          </p>
          <p style={{ fontSize: '16px', color: '#222', fontWeight: '600', margin: '0' }}>
            {inputValue || '置业V客厅 精准获客平台'}
          </p>
          <img style={{ width: '200px', height: '160px' }} src={imgValue || poster2} alt="" />
        </div>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', width: '100%' }}>
        <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}>
          分享标题
        </p>
        <Input
          placeholder="请输入分享标题"
          value={inputValue}
          onChange={e => changeInput(e.target.value)}
        />
      </div>
      <div style={{ display: 'flex', width: '100%', marginTop: '40px' }}>
        <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}>
          活动分享图
        </p>
        <ImageUploader value={imgValue} onChange={e => changeImg(e)} />
      </div>
      <p style={{ fontSize: '0.5vw', color: '#A9A9A9', marginLeft: '230px', marginTop: '20px' }}>
        建议图片尺寸：750*600px，比例5:4,格式：jpg，用于活动分享好友
      </p>
      <Button
        type="primary"
        htmlType="submit"
        onClick={submitShare}
        style={{ margin: '40px 40px 40px 220px' }}
      >
        {' '}
        确定
      </Button>
      <Button onClick={() => cancelPage()}>取消</Button>
    </div>
  );
};

export default Share;