|
|
|
@ -16,7 +16,7 @@ import { DndContext, DragEndEvent, PointerSensor, useSensor } from '@dnd-kit/cor
|
|
|
|
|
import { arrayMove, SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
|
|
|
|
|
import { useAccess, useParams, useSearchParams } from '@umijs/max';
|
|
|
|
|
import { Button, Form, Image, message, Tag } from 'antd';
|
|
|
|
|
import { RcFile, UploadFile } from 'antd/es/upload';
|
|
|
|
|
import Upload, { RcFile, UploadFile } from 'antd/es/upload';
|
|
|
|
|
import React, { useEffect, useState } from 'react';
|
|
|
|
|
import { CSS } from '@dnd-kit/utilities';
|
|
|
|
|
|
|
|
|
@ -115,14 +115,61 @@ const Detail: React.FC<any> = () => {
|
|
|
|
|
valueTypeMap={{
|
|
|
|
|
upload: {
|
|
|
|
|
render: (text) => {
|
|
|
|
|
return text.length > 0 ? text.map((e: any) =>
|
|
|
|
|
console.log(text)
|
|
|
|
|
return text.length > 0 ? /\.mp4($|\?)/i.test(text[0].url) ? <video width={240} height={160} controls src={text[0].url} style={{ background: '#000' }} /> : text.map((e: any) =>
|
|
|
|
|
<Image key={e.url} width={200} src={e.url}></Image>
|
|
|
|
|
) : (
|
|
|
|
|
<span></span>
|
|
|
|
|
);
|
|
|
|
|
},
|
|
|
|
|
renderFormItem: (text, props: any) => {
|
|
|
|
|
return (
|
|
|
|
|
return props.id === 'pbcBusinessVideo' ? (
|
|
|
|
|
<ProFormUploadButton
|
|
|
|
|
{...props}
|
|
|
|
|
{...props?.fieldProps}
|
|
|
|
|
max={1}
|
|
|
|
|
fieldProps={{
|
|
|
|
|
name: 'file',
|
|
|
|
|
accept: 'video/mp4',
|
|
|
|
|
multiple: false,
|
|
|
|
|
headers: {
|
|
|
|
|
authorization: localStorage.getItem('token') ?? '',
|
|
|
|
|
},
|
|
|
|
|
action: process.env.BASE_URL + '/oss/imgUpload',
|
|
|
|
|
beforeUpload(file: RcFile) {
|
|
|
|
|
const isLt100M = file.size / 1024 / 1024 < 100;
|
|
|
|
|
if (!isLt100M) {
|
|
|
|
|
message.error('视频大小不能超过100MB!');
|
|
|
|
|
}
|
|
|
|
|
return isLt100M || Upload.LIST_IGNORE;
|
|
|
|
|
},
|
|
|
|
|
onChange: (a: any) => {
|
|
|
|
|
props?.fieldProps.onChange(a.fileList);
|
|
|
|
|
},
|
|
|
|
|
onPreview: async (file) => {
|
|
|
|
|
const url = file.url || (file.response && file.response.data);
|
|
|
|
|
if (!url) {
|
|
|
|
|
message.warning('无法预览该文件');
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
if (/\.mp4($|\?)/i.test(url)) {
|
|
|
|
|
const videoWindow = window.open('', '_blank');
|
|
|
|
|
if (videoWindow) {
|
|
|
|
|
videoWindow.document.write(`
|
|
|
|
|
<html>
|
|
|
|
|
<body style=\"margin:0;display:flex;align-items:center;justify-content:center;height:100vh;background:#000;\">
|
|
|
|
|
<video src=\"${url}\" controls autoplay style=\"max-width:100vw;max-height:100vh;\"></video>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
`);
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
window.open(url);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
}}
|
|
|
|
|
/>
|
|
|
|
|
) : (
|
|
|
|
|
<DndContext sensors={[sensor]} onDragEnd={(event) => onDragEnd(event, props.id, 1)}>
|
|
|
|
|
<SortableContext items={form1.getFieldValue(props.id) ? form1.getFieldValue(props.id).map((i: any) => i.uid) : []} strategy={verticalListSortingStrategy}>
|
|
|
|
|
<ProFormUploadButton
|
|
|
|
@ -235,6 +282,11 @@ const Detail: React.FC<any> = () => {
|
|
|
|
|
pbcBusinessLogo: key === 'pbcBusinessLogo' ? pbcBusinessLogo : info.pbcBusinessLogo,
|
|
|
|
|
pbcBusinessImage: key === 'pbcBusinessImage' ? pbcBusinessImage.join(',') : info.pbcBusinessImage,
|
|
|
|
|
pbcBusinessPosterUrl: key === 'pbcBusinessPosterUrl' ? pbcBusinessPosterUrl.join(',') : info.pbcBusinessPosterUrl,
|
|
|
|
|
pbcBusinessVideo: key === 'pbcBusinessVideo' && record[key] && record[key].length > 0
|
|
|
|
|
? (record[key][0].response && record[key][0].response.retcode
|
|
|
|
|
? record[key][0].response.data
|
|
|
|
|
: record[key][0].url)
|
|
|
|
|
: info.pbcBusinessVideo,
|
|
|
|
|
})
|
|
|
|
|
.then((res) => {
|
|
|
|
|
if (res.retcode) {
|
|
|
|
@ -305,6 +357,14 @@ const Detail: React.FC<any> = () => {
|
|
|
|
|
url: e,
|
|
|
|
|
}
|
|
|
|
|
}) : [],
|
|
|
|
|
pbcBusinessVideo: info.pbcBusinessVideo ? [
|
|
|
|
|
{
|
|
|
|
|
uid: '-1',
|
|
|
|
|
name: 'video.mp4',
|
|
|
|
|
status: 'done',
|
|
|
|
|
url: info.pbcBusinessVideo,
|
|
|
|
|
},
|
|
|
|
|
] : [],
|
|
|
|
|
}}
|
|
|
|
|
columns={[
|
|
|
|
|
{
|
|
|
|
@ -395,6 +455,13 @@ const Detail: React.FC<any> = () => {
|
|
|
|
|
span: 3,
|
|
|
|
|
valueType: 'upload',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '商家视频',
|
|
|
|
|
key: 'pbcBusinessVideo',
|
|
|
|
|
dataIndex: 'pbcBusinessVideo',
|
|
|
|
|
span: 3,
|
|
|
|
|
valueType: 'upload'
|
|
|
|
|
}
|
|
|
|
|
]}
|
|
|
|
|
column={3}
|
|
|
|
|
></ProDescriptions>
|
|
|
|
@ -405,7 +472,6 @@ const Detail: React.FC<any> = () => {
|
|
|
|
|
valueTypeMap={{
|
|
|
|
|
upload: {
|
|
|
|
|
render: (text) => {
|
|
|
|
|
console.log(text)
|
|
|
|
|
return text.length > 0 ? text.map((e: any) =>
|
|
|
|
|
<Image key={e.url} width={200} src={e.url}></Image>
|
|
|
|
|
) : (
|
|
|
|
|