|
|
@@ -1,8 +1,20 @@
|
|
|
import MHeader from '@/components/m-header';
|
|
|
-import { Cell, CellGroup, Col, Icon, Row, Tag, Image } from 'vant';
|
|
|
-import { defineComponent, onMounted, reactive } from 'vue';
|
|
|
+import {
|
|
|
+ Cell,
|
|
|
+ CellGroup,
|
|
|
+ Col,
|
|
|
+ Icon,
|
|
|
+ Row,
|
|
|
+ Tag,
|
|
|
+ Image,
|
|
|
+ showToast,
|
|
|
+ showFailToast,
|
|
|
+ showLoadingToast,
|
|
|
+ showSuccessToast
|
|
|
+} from 'vant';
|
|
|
+import { defineComponent, onMounted, reactive, ref } from 'vue';
|
|
|
import styles from './detail.module.less';
|
|
|
-import { toChinesNum } from '@/helpers/utils';
|
|
|
+import { browser, toChinesNum } from '@/helpers/utils';
|
|
|
import SOLO from './images/SOLO.png';
|
|
|
import REPRISE from './images/REPRISE.png';
|
|
|
import ENSEMBLE from './images/ENSEMBLE.png';
|
|
|
@@ -20,12 +32,33 @@ import CastModal from './components/cast-modal';
|
|
|
import iconEdit from './images/icon-edit.png';
|
|
|
import { checkFile } from '@/helpers/toolsValidate';
|
|
|
import iconVideoDefault from '@common/images/icon-video-c.png';
|
|
|
-
|
|
|
+import html2canvas from 'html2canvas';
|
|
|
+import { postMessage, promisefiyPostMessage } from '@/helpers/native-message';
|
|
|
+import backIcon from './images/back-icon.png';
|
|
|
+import eidtIcon from './images/eidt-icon.png';
|
|
|
+import shareIcon from './images/share-icon.png';
|
|
|
+import jiemuIcon from './images/jiemu-icon.png';
|
|
|
+import hornIcon from './images/horn-icon.png';
|
|
|
+import noteIcon from './images/note-icon.png';
|
|
|
+import colorBg from './images/colorBg.png';
|
|
|
+import dieIcon from './images/die-icon.png';
|
|
|
+import dBall from './images/d-ball.png';
|
|
|
+import qBall from './images/q-ball.png';
|
|
|
+import cBall from './images/c-ball.png';
|
|
|
+import hBall from './images/h-ball.png';
|
|
|
+import dotIcon from './images/dot-icon.png';
|
|
|
+import { state } from '@/state';
|
|
|
+import SwiperClass, { Navigation, Thumbs } from 'swiper';
|
|
|
+import { Swiper, SwiperSlide } from 'swiper/vue';
|
|
|
+import 'swiper/css';
|
|
|
+import 'swiper/css/navigation';
|
|
|
+import 'swiper/css/thumbs';
|
|
|
export default defineComponent({
|
|
|
name: 'detail-page',
|
|
|
setup() {
|
|
|
const route = useRoute();
|
|
|
const router = useRouter();
|
|
|
+
|
|
|
// console.log(toChinesNum(11));
|
|
|
const forms = reactive({
|
|
|
id: route.query.id,
|
|
|
@@ -37,9 +70,14 @@ export default defineComponent({
|
|
|
detail: [] as any[],
|
|
|
headerDetail: {} as any,
|
|
|
castStatus: false,
|
|
|
- studentAllList: [] as any
|
|
|
+ studentAllList: [] as any,
|
|
|
+ navBarHeight: state.navBarHeight
|
|
|
});
|
|
|
-
|
|
|
+ const thumbsSwiper = ref<SwiperClass>();
|
|
|
+ const setThumbsSwiper = (swiper: SwiperClass) => {
|
|
|
+ thumbsSwiper.value = swiper;
|
|
|
+ };
|
|
|
+ const modules = [Navigation, Thumbs];
|
|
|
const getDetail = async () => {
|
|
|
try {
|
|
|
const { data } = await request.get(
|
|
|
@@ -91,16 +129,16 @@ export default defineComponent({
|
|
|
let image: string = '';
|
|
|
switch (name) {
|
|
|
case 'SOLO':
|
|
|
- image = SOLO;
|
|
|
+ image = dBall;
|
|
|
break;
|
|
|
case 'REPRISE':
|
|
|
- image = REPRISE;
|
|
|
+ image = cBall;
|
|
|
break;
|
|
|
case 'ENSEMBLE':
|
|
|
- image = ENSEMBLE;
|
|
|
+ image = hBall;
|
|
|
break;
|
|
|
case 'UNISON':
|
|
|
- image = UNISON;
|
|
|
+ image = qBall;
|
|
|
break;
|
|
|
default:
|
|
|
image = SOLO;
|
|
|
@@ -116,14 +154,168 @@ export default defineComponent({
|
|
|
// }, 1000);
|
|
|
getDetail();
|
|
|
});
|
|
|
+ const imgs = reactive({
|
|
|
+ saveLoading: false,
|
|
|
+ image: null as any,
|
|
|
+ shareLoading: false
|
|
|
+ });
|
|
|
+ const onSaveImg = async () => {
|
|
|
+ // 判断是否在保存中...
|
|
|
+ if (imgs.saveLoading) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ imgs.saveLoading = true;
|
|
|
+ // 判断是否已经生成图片
|
|
|
+ if (imgs.image) {
|
|
|
+ saveImg();
|
|
|
+ } else {
|
|
|
+ const container: any = document.getElementById(`preview-container`);
|
|
|
+ html2canvas(container, {
|
|
|
+ allowTaint: true,
|
|
|
+ useCORS: true,
|
|
|
+ backgroundColor: null
|
|
|
+ })
|
|
|
+ .then(async canvas => {
|
|
|
+ const url = canvas.toDataURL('image/png');
|
|
|
+ imgs.image = url;
|
|
|
+ saveImg();
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ // closeToast();
|
|
|
+ imgs.saveLoading = false;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ };
|
|
|
+ const onShare = () => {
|
|
|
+ console.log('onShare');
|
|
|
+ if (imgs.shareLoading) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ imgs.shareLoading = true;
|
|
|
+ if (imgs.image) {
|
|
|
+ openShare();
|
|
|
+ console.log('onShareimgs.image');
|
|
|
+ } else {
|
|
|
+ const container: any = document.getElementById(`preview-container`);
|
|
|
+
|
|
|
+ html2canvas(container, {
|
|
|
+ allowTaint: true,
|
|
|
+ foreignObjectRendering: true,
|
|
|
+ useCORS: true,
|
|
|
+ backgroundColor: null
|
|
|
+ })
|
|
|
+ .then(async canvas => {
|
|
|
+ const url = canvas.toDataURL('image/png');
|
|
|
+ imgs.image = url;
|
|
|
+ openShare();
|
|
|
+ console.log('onShareimgs.Noimage');
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ // closeToast();
|
|
|
+ console.log(e);
|
|
|
+ imgs.shareLoading = false;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ };
|
|
|
+ const openShare = () => {
|
|
|
+ const image = imgs.image;
|
|
|
+ setTimeout(() => {
|
|
|
+ imgs.shareLoading = false;
|
|
|
+ }, 100);
|
|
|
+ if (image) {
|
|
|
+ console.log('postMessage', 'shareTripartite');
|
|
|
+ postMessage(
|
|
|
+ {
|
|
|
+ api: 'shareTripartite',
|
|
|
+ content: {
|
|
|
+ title: '',
|
|
|
+ desc: '',
|
|
|
+ image,
|
|
|
+ video: '',
|
|
|
+ type: 'image',
|
|
|
+ // button: ['copy']
|
|
|
+ shareType: 'wechat'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ (res: any) => {
|
|
|
+ if (res && res.content) {
|
|
|
+ showToast(
|
|
|
+ res.content.message ||
|
|
|
+ (res.content.status ? '分享成功' : '分享失败')
|
|
|
+ );
|
|
|
+ }
|
|
|
+ }
|
|
|
+ );
|
|
|
+ }
|
|
|
+ };
|
|
|
+ const saveImg = async () => {
|
|
|
+ showLoadingToast({ message: '图片生成中...', forbidClick: true });
|
|
|
+ setTimeout(() => {
|
|
|
+ imgs.saveLoading = false;
|
|
|
+ }, 100);
|
|
|
+ const res = await promisefiyPostMessage({
|
|
|
+ api: 'savePicture',
|
|
|
+ content: {
|
|
|
+ base64: imgs.image
|
|
|
+ }
|
|
|
+ });
|
|
|
+ if (res?.content?.status === 'success') {
|
|
|
+ showSuccessToast('保存成功');
|
|
|
+ } else {
|
|
|
+ showFailToast('保存失败');
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
return () => (
|
|
|
- <div class={styles.detail}>
|
|
|
- <MHeader>
|
|
|
+ <div class={styles.detail} id="preview-container">
|
|
|
+ {/* <MHeader>
|
|
|
{{
|
|
|
right: () => (
|
|
|
- <Icon
|
|
|
- name={iconEdit}
|
|
|
- class={styles.iconEdit}
|
|
|
+ <>
|
|
|
+ <Icon
|
|
|
+ name={iconEdit}
|
|
|
+ class={styles.iconEdit}
|
|
|
+ onClick={() => {
|
|
|
+ router.push({
|
|
|
+ path: '/activity-record-operation',
|
|
|
+ query: {
|
|
|
+ id: forms.id
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ <Icon
|
|
|
+ name={iconEdit}
|
|
|
+ class={styles.iconEdit}
|
|
|
+ onClick={() => onShare()}
|
|
|
+ />
|
|
|
+ </>
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ </MHeader> */}
|
|
|
+ <div
|
|
|
+ class={styles.detailTop}
|
|
|
+ style={{ 'padding-top': state.navBarHeight + 'px' }}>
|
|
|
+ <div
|
|
|
+ class={styles.fixWrap}
|
|
|
+ style={{ top: state.navBarHeight + 30 + 'px' }}>
|
|
|
+ <div class={styles.fixWrapLeft}>
|
|
|
+ <Image
|
|
|
+ src={backIcon}
|
|
|
+ onClick={() => {
|
|
|
+ if (browser().isApp) {
|
|
|
+ postMessage({
|
|
|
+ api: 'goBack'
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ router.back();
|
|
|
+ }
|
|
|
+ }}></Image>
|
|
|
+ </div>
|
|
|
+ <div class={styles.fixWrapRight}>
|
|
|
+ <Image
|
|
|
+ src={eidtIcon}
|
|
|
+ class={styles.editIcon}
|
|
|
onClick={() => {
|
|
|
router.push({
|
|
|
path: '/activity-record-operation',
|
|
|
@@ -131,86 +323,78 @@ export default defineComponent({
|
|
|
id: forms.id
|
|
|
}
|
|
|
});
|
|
|
+ }}></Image>
|
|
|
+ <Image src={shareIcon}></Image>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class={styles.wall}> </div>
|
|
|
+ <Image src={jiemuIcon} class={styles.jiemuIcon}></Image>
|
|
|
+ <div class={styles.typeCard}>
|
|
|
+ {' '}
|
|
|
+ {activityStatus[forms.headerDetail.type]}
|
|
|
+ </div>
|
|
|
+ <SkeletionIndexModal
|
|
|
+ v-model:show={forms.headerLoading}
|
|
|
+ showCount={[1]}
|
|
|
+ isLink={false}>
|
|
|
+ {/* <CellGroup inset class={styles.cellGroup}>
|
|
|
+ <Cell center class={styles.cellTitle}>
|
|
|
+ {{
|
|
|
+ icon: () => (
|
|
|
+ <Tag plain type="primary" class={styles.tag}>
|
|
|
+ {activityStatus[forms.headerDetail.type]}
|
|
|
+ </Tag>
|
|
|
+ ),
|
|
|
+ title: () => (
|
|
|
+ <div class={[styles.title, 'van-ellipsis']}>
|
|
|
+ {forms.headerDetail.name}
|
|
|
+ </div>
|
|
|
+ )
|
|
|
}}
|
|
|
- />
|
|
|
- )
|
|
|
- }}
|
|
|
- </MHeader>
|
|
|
-
|
|
|
- <SkeletionIndexModal
|
|
|
- v-model:show={forms.headerLoading}
|
|
|
- showCount={[1]}
|
|
|
- isLink={false}>
|
|
|
- <CellGroup inset class={styles.cellGroup}>
|
|
|
- <Cell center class={styles.cellTitle}>
|
|
|
- {{
|
|
|
- icon: () => (
|
|
|
- <Tag plain type="primary" class={styles.tag}>
|
|
|
- {activityStatus[forms.headerDetail.type]}
|
|
|
- </Tag>
|
|
|
- ),
|
|
|
- title: () => (
|
|
|
- <div class={[styles.title, 'van-ellipsis']}>
|
|
|
- {forms.headerDetail.name}
|
|
|
- </div>
|
|
|
- )
|
|
|
- }}
|
|
|
- </Cell>
|
|
|
- <Cell
|
|
|
- class={styles.cellTimer}
|
|
|
- center
|
|
|
- title={`活动日期：${dayjs(forms.headerDetail.startTime).format(
|
|
|
- 'YYYY年MM月DD日'
|
|
|
- )}`}
|
|
|
- value={activeStatus[forms.headerDetail.status]}
|
|
|
- valueClass={
|
|
|
- forms.headerDetail.status === 'PROCESSING' ? styles.ing : ''
|
|
|
- }></Cell>
|
|
|
- </CellGroup>
|
|
|
- </SkeletionIndexModal>
|
|
|
+ </Cell>
|
|
|
+ <Cell
|
|
|
+ class={styles.cellTimer}
|
|
|
+ center
|
|
|
+ title={`活动日期：${dayjs(forms.headerDetail.startTime).format(
|
|
|
+ 'YYYY年MM月DD日'
|
|
|
+ )}`}
|
|
|
+ value={activeStatus[forms.headerDetail.status]}
|
|
|
+ valueClass={
|
|
|
+ forms.headerDetail.status === 'PROCESSING' ? styles.ing : ''
|
|
|
+ }></Cell>
|
|
|
+ </CellGroup> */}
|
|
|
+ <div class={styles.activeInfo}>
|
|
|
+ <Image src={hornIcon} class={styles.hornIcon}></Image>
|
|
|
+ <h4 class={styles.headerName}> {forms.headerDetail.name}</h4>
|
|
|
+ <p class={styles.headerTimes}>{`活动日期：${dayjs(
|
|
|
+ forms.headerDetail.startTime
|
|
|
+ ).format('YYYY年MM月DD日')}`}</p>
|
|
|
+ <Image src={noteIcon} class={styles.noteIcon}></Image>
|
|
|
+ </div>
|
|
|
+ </SkeletionIndexModal>
|
|
|
+ </div>
|
|
|
|
|
|
<SkeletionDetailModal
|
|
|
v-model:show={forms.detailLoading}
|
|
|
showCount={[1, 2]}>
|
|
|
- <div
|
|
|
- style={{
|
|
|
- marginBottom: '18px'
|
|
|
- }}>
|
|
|
- {forms.detail.map((item: any, index: number) => (
|
|
|
- <>
|
|
|
- <div class={styles.pTitle}>节目{toChinesNum(index + 1)}</div>
|
|
|
-
|
|
|
- <CellGroup inset class={styles.pCellGroup}>
|
|
|
- <Cell center>
|
|
|
- {{
|
|
|
- icon: () => (
|
|
|
- <img
|
|
|
- src={formatterImage(item.type)}
|
|
|
- class={styles.imgType}
|
|
|
- />
|
|
|
- ),
|
|
|
- title: () => (
|
|
|
- <div class={[styles.title, 'van-ellipsis']}>
|
|
|
- {item.name}
|
|
|
- </div>
|
|
|
- ),
|
|
|
- value: () => {
|
|
|
- const timer = formatterTimer(item.time);
|
|
|
- return (
|
|
|
- <span class={styles.time}>
|
|
|
- {timer.minute}分{timer.secord}秒
|
|
|
- </span>
|
|
|
- );
|
|
|
- }
|
|
|
- }}
|
|
|
- </Cell>
|
|
|
- <Cell
|
|
|
- center
|
|
|
- class={styles.moreCell}
|
|
|
- valueClass={styles.valueClass}>
|
|
|
- <Row class={styles.item}>
|
|
|
+ <div class={styles.programWrap}>
|
|
|
+ <div class={styles.programList}>
|
|
|
+ {forms.detail.map((item: any, index: number) => (
|
|
|
+ <div class={styles.programItem}>
|
|
|
+ <Image src={colorBg} class={styles.colorBg}></Image>
|
|
|
+ <div class={styles.pTitle}>节目{toChinesNum(index + 1)}</div>
|
|
|
+ <div class={styles.programInfo}>
|
|
|
+ <Image
|
|
|
+ class={styles.ballIcon}
|
|
|
+ src={formatterImage(item.type)}></Image>
|
|
|
+ <div class={styles.programInfoTitleWrap}>
|
|
|
+ <Image class={styles.dieIcon} src={dieIcon}></Image>
|
|
|
+ <div class={styles.programInfoTitle}> {item.name}</div>
|
|
|
+ <Image class={styles.dotIcon} src={dotIcon}></Image>
|
|
|
+ </div>
|
|
|
+ <Row class={styles.itemRow}>
|
|
|
<Col span={6} class={styles.label}>
|
|
|
- 表演乐团
|
|
|
+ 表演乐团：
|
|
|
</Col>
|
|
|
<Col span={18} class={styles.content}>
|
|
|
{item.musicGroupName}
|
|
|
@@ -223,19 +407,38 @@ export default defineComponent({
|
|
|
</span>
|
|
|
</Col>
|
|
|
</Row>
|
|
|
- <Row class={styles.item} style={{ marginBottom: '0' }}>
|
|
|
+ <Row class={styles.itemRow} style={{ marginBottom: '0' }}>
|
|
|
<Col span={6} class={styles.label}>
|
|
|
- 表演团队
|
|
|
+ 表演团队：
|
|
|
</Col>
|
|
|
<Col span={18} class={styles.content}>
|
|
|
{item.subjectNameList}
|
|
|
</Col>
|
|
|
</Row>
|
|
|
- {item.attachmentUrl ? (
|
|
|
- <div class={styles.photoList}>
|
|
|
- {item.attachmentUrl.map(
|
|
|
- (i: any, index: number) =>
|
|
|
- index <= 3 && (
|
|
|
+ <Row class={styles.itemRow} style={{ marginBottom: '0' }}>
|
|
|
+ <Col span={6} class={styles.label}>
|
|
|
+ 节目时长：
|
|
|
+ </Col>
|
|
|
+ <Col span={18} class={styles.content}>
|
|
|
+ {formatterTimer(item.time).minute}分
|
|
|
+ {formatterTimer(item.time).secord}秒
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ </div>
|
|
|
+ <div class={styles.progItemList}>
|
|
|
+ <Swiper
|
|
|
+ class="topSwiper"
|
|
|
+ style={{
|
|
|
+ '--swiper-navigation-color': '#fff',
|
|
|
+ '--swiper-pagination-color': '#fff'
|
|
|
+ }}
|
|
|
+ modules={modules}
|
|
|
+ space-between={10}
|
|
|
+ ref={thumbsSwiper}>
|
|
|
+ {item.attachmentUrl.map(
|
|
|
+ (i: any, index: number) =>
|
|
|
+ index <= 3 && (
|
|
|
+ <SwiperSlide class="slide">
|
|
|
<div
|
|
|
class={styles.photo}
|
|
|
onClick={() => {
|
|
|
@@ -265,16 +468,147 @@ export default defineComponent({
|
|
|
''
|
|
|
)}
|
|
|
</div>
|
|
|
- )
|
|
|
- )}
|
|
|
- </div>
|
|
|
- ) : (
|
|
|
- ''
|
|
|
- )}
|
|
|
- </Cell>
|
|
|
- </CellGroup>
|
|
|
- </>
|
|
|
- ))}
|
|
|
+ </SwiperSlide>
|
|
|
+ )
|
|
|
+ )}
|
|
|
+ </Swiper>
|
|
|
+ <Swiper
|
|
|
+ class="thumbs-swiper"
|
|
|
+ modules={modules}
|
|
|
+ space-between={10}
|
|
|
+ slides-per-view={4}
|
|
|
+ watch-slides-progress={true}
|
|
|
+ prevent-clicks={false}
|
|
|
+ prevent-clicks-propagation={false}
|
|
|
+ onSwiper={setThumbsSwiper}>
|
|
|
+ {item.attachmentUrl.map(
|
|
|
+ (i: any, index: number) =>
|
|
|
+ index <= 3 && (
|
|
|
+ <SwiperSlide class="slide">
|
|
|
+ <div class={styles.photo}>
|
|
|
+ {checkFile(i, 'image') ? (
|
|
|
+ <Image
|
|
|
+ src={i + '@base@tag=imgScale&w=120'}
|
|
|
+ fit="cover"
|
|
|
+ />
|
|
|
+ ) : (
|
|
|
+ <video
|
|
|
+ style={{ backgroundColor: '#F8F8F8' }}
|
|
|
+ poster={iconVideoDefault}
|
|
|
+ src={i + '#t=1,4'}
|
|
|
+ />
|
|
|
+ )}
|
|
|
+
|
|
|
+ {item.attachmentUrl.length > 4 &&
|
|
|
+ index === 3 ? (
|
|
|
+ <div class={styles.photoMore}>
|
|
|
+ +{item.attachmentUrl.length - 4}
|
|
|
+ </div>
|
|
|
+ ) : (
|
|
|
+ ''
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+ </SwiperSlide>
|
|
|
+ )
|
|
|
+ )}
|
|
|
+ </Swiper>
|
|
|
+ </div>
|
|
|
+ {/* <CellGroup inset class={styles.pCellGroup}>
|
|
|
+ <Cell center>
|
|
|
+ {{
|
|
|
+ icon: () => (
|
|
|
+ <img
|
|
|
+ src={formatterImage(item.type)}
|
|
|
+ class={styles.imgType}
|
|
|
+ />
|
|
|
+ ),
|
|
|
+ title: () => (
|
|
|
+ <div class={[styles.title, 'van-ellipsis']}>
|
|
|
+ {item.name}
|
|
|
+ </div>
|
|
|
+ ),
|
|
|
+ value: () => {
|
|
|
+ const timer = formatterTimer(item.time);
|
|
|
+ return (
|
|
|
+ <span class={styles.time}>
|
|
|
+ {timer.minute}分{timer.secord}秒
|
|
|
+ </span>
|
|
|
+ );
|
|
|
+ }
|
|
|
+ }}
|
|
|
+ </Cell>
|
|
|
+ <Cell
|
|
|
+ center
|
|
|
+ class={styles.moreCell}
|
|
|
+ valueClass={styles.valueClass}>
|
|
|
+ <Row class={styles.item}>
|
|
|
+ <Col span={6} class={styles.label}>
|
|
|
+ 表演乐团
|
|
|
+ </Col>
|
|
|
+ <Col span={18} class={styles.content}>
|
|
|
+ {item.musicGroupName}
|
|
|
+ <span
|
|
|
+ onClick={() => {
|
|
|
+ if (item.studentNum <= 0) return;
|
|
|
+ formatterStudentList(item.studentList);
|
|
|
+ }}>
|
|
|
+ 共{item.studentNum}名 <Icon name="arrow" />
|
|
|
+ </span>
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ <Row class={styles.item} style={{ marginBottom: '0' }}>
|
|
|
+ <Col span={6} class={styles.label}>
|
|
|
+ 表演团队
|
|
|
+ </Col>
|
|
|
+ <Col span={18} class={styles.content}>
|
|
|
+ {item.subjectNameList}
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ {item.attachmentUrl ? (
|
|
|
+ <div class={styles.photoList}>
|
|
|
+ {item.attachmentUrl.map(
|
|
|
+ (i: any, index: number) =>
|
|
|
+ index <= 3 && (
|
|
|
+ <div
|
|
|
+ class={styles.photo}
|
|
|
+ onClick={() => {
|
|
|
+ forms.imagePreview = item.attachmentUrl;
|
|
|
+ forms.imageShow = true;
|
|
|
+ forms.startPosition = index;
|
|
|
+ }}>
|
|
|
+ {checkFile(i, 'image') ? (
|
|
|
+ <Image
|
|
|
+ src={i + '@base@tag=imgScale&w=120'}
|
|
|
+ fit="cover"
|
|
|
+ />
|
|
|
+ ) : (
|
|
|
+ <video
|
|
|
+ style={{ backgroundColor: '#F8F8F8' }}
|
|
|
+ poster={iconVideoDefault}
|
|
|
+ src={i + '#t=1,4'}
|
|
|
+ />
|
|
|
+ )}
|
|
|
+
|
|
|
+ {item.attachmentUrl.length > 4 &&
|
|
|
+ index === 3 ? (
|
|
|
+ <div class={styles.photoMore}>
|
|
|
+ +{item.attachmentUrl.length - 4}
|
|
|
+ </div>
|
|
|
+ ) : (
|
|
|
+ ''
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+ ) : (
|
|
|
+ ''
|
|
|
+ )}
|
|
|
+ </Cell>
|
|
|
+ </CellGroup> */}
|
|
|
+ </div>
|
|
|
+ ))}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</SkeletionDetailModal>
|
|
|
|
mo
