feat: first commit
This commit is contained in:
eleanor.mao
96
src/components/material-video-card/index.less
Normal file
96
src/components/material-video-card/index.less
Normal file
@ -0,0 +1,96 @@
|
||||
@import '@/styles/variables.less';
|
||||
|
||||
.material-video-card {
|
||||
margin-top: 24px;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 16px;
|
||||
|
||||
&__cover {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&__cover__image,
|
||||
&__cover__placeholder {
|
||||
width: 150px;
|
||||
height: 200px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
&__cover__placeholder {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #F7F7F7;
|
||||
}
|
||||
|
||||
&__cover__placeholder__image {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
}
|
||||
|
||||
&__cover__preview-video {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 50%;
|
||||
transform: translate3d(50%, -50%, 0);
|
||||
}
|
||||
|
||||
&__info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
margin-left: 24px;
|
||||
}
|
||||
|
||||
&__info__title {
|
||||
width: 100%;
|
||||
padding-bottom: 24px;
|
||||
border-bottom: 1px solid #E0E0E0;
|
||||
}
|
||||
|
||||
&__info__title__input {
|
||||
font-size: 32px;
|
||||
color: @blColor;
|
||||
}
|
||||
|
||||
&__info__title__placeholder {
|
||||
font-size: 32px;
|
||||
color: #CCCCCC;
|
||||
}
|
||||
|
||||
&__info__operate {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
font-size: 28px;
|
||||
line-height: 32px;
|
||||
font-weight: 400;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&__info__operate__checkbox {
|
||||
--checkbox-label-color: @blColor;
|
||||
--checkbox-checked-icon-border-color: @blHighlightColor;
|
||||
--checkbox-checked-icon-background-color: @blHighlightColor;
|
||||
}
|
||||
|
||||
&__info__operate__delete {
|
||||
color: @blHighlightColor;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
&__info__temp-tips {
|
||||
font-size: 28px;
|
||||
line-height: 50px;
|
||||
font-weight: 400;
|
||||
color: @blColorG1;
|
||||
}
|
||||
}
|
||||
149
src/components/material-video-card/index.tsx
Normal file
149
src/components/material-video-card/index.tsx
Normal file
@ -0,0 +1,149 @@
|
||||
import { BaseEventOrig, Image, Input, InputProps, Text } from '@tarojs/components';
|
||||
import { navigateTo } from '@/utils/route';
|
||||
import Taro from '@tarojs/taro';
|
||||
|
||||
import { Checkbox } from '@taroify/core';
|
||||
import { useCallback } from 'react';
|
||||
|
||||
import { MaterialVideoInfo } from '@/types/material';
|
||||
import { logWithPrefix, isDesktop } from '@/utils/common';
|
||||
import { PageUrl } from '@/constants/app';
|
||||
|
||||
import './index.less';
|
||||
|
||||
interface IProps {
|
||||
isTemp?: boolean;
|
||||
videoInfo: MaterialVideoInfo;
|
||||
onClickUpload?: () => void;
|
||||
onClickDelete?: () => void;
|
||||
onClickSetDefault?: () => void;
|
||||
onTitleChange?: (newTitle: string) => void;
|
||||
}
|
||||
|
||||
const PREFIX = 'material-video-card';
|
||||
const log = logWithPrefix(PREFIX);
|
||||
|
||||
function MaterialVideoCard(props: IProps) {
|
||||
const { videoInfo, isTemp = false, onClickUpload, onClickDelete, onClickSetDefault, onTitleChange } = props;
|
||||
const isVideo = videoInfo.type === 'video';
|
||||
|
||||
const handleInput = useCallback(
|
||||
(e: BaseEventOrig<InputProps.inputValueEventDetail>) => {
|
||||
const value = e.detail?.value || '';
|
||||
log('handleInput value', value);
|
||||
onTitleChange?.(value);
|
||||
},
|
||||
[onTitleChange]
|
||||
);
|
||||
|
||||
// const handleInputBlurOrConfirm = useCallback(() => {
|
||||
// log('newVideoTitle', title);
|
||||
// if (!title) {
|
||||
// return;
|
||||
// }
|
||||
// onTitleChange?.(videoInfo);
|
||||
// // ...
|
||||
// }, [title, videoInfo, onTitleChange]);
|
||||
|
||||
const handleCheckboxChange = useCallback(
|
||||
(checked: boolean) => {
|
||||
log('handleCheckboxChange', checked);
|
||||
if (videoInfo.isDefault) {
|
||||
return;
|
||||
}
|
||||
// ...
|
||||
onClickSetDefault?.();
|
||||
},
|
||||
[videoInfo, onClickSetDefault]
|
||||
);
|
||||
|
||||
const handleClickVideo = useCallback(() => {
|
||||
log('handleClickVideo', videoInfo);
|
||||
if (!videoInfo.url) {
|
||||
return;
|
||||
}
|
||||
if (isDesktop) {
|
||||
navigateTo(PageUrl.MaterialWebview, {
|
||||
source: encodeURIComponent(videoInfo.url)
|
||||
})
|
||||
} else {
|
||||
Taro.previewMedia({
|
||||
sources: [{ url: videoInfo.url, type: videoInfo.type }],
|
||||
});
|
||||
}
|
||||
|
||||
}, [videoInfo]);
|
||||
|
||||
return (
|
||||
<div className={PREFIX}>
|
||||
<div className={`${PREFIX}__cover`}>
|
||||
{!isTemp && (
|
||||
<>
|
||||
<Image
|
||||
className={`${PREFIX}__cover__image`}
|
||||
mode="aspectFit"
|
||||
src={videoInfo.coverUrl}
|
||||
onClick={handleClickVideo}
|
||||
/>
|
||||
{isVideo && (
|
||||
<Image
|
||||
className={`${PREFIX}__cover__preview-video`}
|
||||
mode="aspectFit"
|
||||
src={require('@/statics/svg/preview_video.svg')}
|
||||
onClick={handleClickVideo}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{isTemp && (
|
||||
<div className={`${PREFIX}__cover__placeholder`} onClick={onClickUpload}>
|
||||
<Image
|
||||
className={`${PREFIX}__cover__placeholder__image`}
|
||||
mode="aspectFit"
|
||||
src={require('@/statics/svg/add.svg')}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className={`${PREFIX}__info`}>
|
||||
{!isTemp && (
|
||||
<>
|
||||
<div className={`${PREFIX}__info__title`}>
|
||||
<Input
|
||||
value={videoInfo.title}
|
||||
maxlength={20}
|
||||
confirmType="done"
|
||||
placeholder="请填写直播产品名称"
|
||||
onInput={handleInput}
|
||||
// onBlur={handleInputBlurOrConfirm}
|
||||
// onConfirm={handleInputBlurOrConfirm}
|
||||
className={`${PREFIX}__info__title__input`}
|
||||
placeholderClass={`${PREFIX}__info__title__placeholder`}
|
||||
/>
|
||||
</div>
|
||||
<div className={`${PREFIX}__info__operate`}>
|
||||
<Checkbox
|
||||
checked={videoInfo.isDefault}
|
||||
onChange={handleCheckboxChange}
|
||||
className={`${PREFIX}__info__operate__checkbox`}
|
||||
>
|
||||
选为封面
|
||||
</Checkbox>
|
||||
<div className={`${PREFIX}__info__operate__delete`} onClick={onClickDelete}>
|
||||
删除
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{isTemp && (
|
||||
<Text className={`${PREFIX}__info__temp-tips`}>
|
||||
{`视频不能超过1000M
|
||||
视频若太大加载较慢，请耐心等待`}
|
||||
</Text>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default MaterialVideoCard;
|
||||
Reference in New Issue
Block a user