mschool/src/views/activity-record/detail.tsx

import MHeader from '@/components/m-header';
import {
  Cell,
  CellGroup,
  Col,
  Icon,
  Row,
  Tag,
  Image,
  showToast,
  showFailToast,
  showLoadingToast,
  showSuccessToast,
  Popup,
  Grid,
  GridItem
} from 'vant';
import { defineComponent, nextTick, onMounted, reactive, ref } from 'vue';
import styles from './detail.module.less';
import { browser, toChinesNum } from '@/helpers/utils';
import SOLO from './images/SOLO.png';
import REPRISE from './images/REPRISE.png';
import ENSEMBLE from './images/ENSEMBLE.png';
import UNISON from './images/UNISON.png';
import MImagePreview from '@/components/m-image-preview';
import SkeletionIndexModal from './skeletion-index-modal';
import SkeletionDetailModal from './skeletion-detail-modal';
import request from '@/helpers/request';
import { useRoute, useRouter } from 'vue-router';
import { activeStatus, activityStatus } from '@/helpers/constant';
import dayjs from 'dayjs';
import { formatterTimer } from './operation';
import MPopup from '@/components/m-popup';
import CastModal from './components/cast-modal';
import iconEdit from './images/icon-edit.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 Detailswiper from './detail-swiper';
import bottomBg from './images/bottomBg.png';
import logo from './images/logo.png';
import MQrcode from '@/components/m-qrcode';
import { state } from '@/state';
import { useRect } from '@vant/use';
import iconWechat from './images/iconWechat.png';
import iconSaveImage from './images/iconSaveImage.png';
import shareBg from './images/shareBg.png';
import schoolIcon from './images/schoolIcon.png';
import popupQrcodeBg from './images/popupQrcodeBg.png';
import shareBottom from './images/shareBottom.png';
import { vaildTeachingUrl } from '@/helpers/utils';
export default defineComponent({
  name: 'detail-page',
  setup() {
    const route = useRoute();
    const router = useRouter();

    // console.log(toChinesNum(11));
    const forms = reactive({
      id: route.query.id,
      imageShow: false,
      imagePreview: [] as any,
      startPosition: 0,
      headerLoading: true,
      detailLoading: true,
      detail: [] as any[],
      headerDetail: {} as any,
      castStatus: false,
      studentAllList: [] as any,
      navBarHeight: state.navBarHeight
    });

    const shareForms = reactive({
      id: route.query.id,
      share: route.query.share as any,
      showQrcode: false,
      url:
        vaildTeachingUrl() +
        '/school/#/activity-record-detail' +
        `?id=${route.query.id}`,
      width: 0,
      height: 0
    });

    const getDetail = async () => {
      try {
        const { data } = await request.get(
          '/api-web/schoolActivity/detail/' + forms.id
        );
        const { detail, ...res } = data || {};
        detail.forEach((item: any) => {
          item.attachmentUrl = item.attachmentUrl
            ? item.attachmentUrl.split(',')
            : [];
        });
        forms.detail = detail;
        forms.headerDetail = { ...res };
      } catch {
        //
      } finally {
        forms.headerLoading = false;
        forms.detailLoading = false;
      }
    };

    const formatterStudentList = (list: any[]) => {
      const tempList: any[] = [];
      list.map((student: any) => {
        let count = 0;
        const students: any[] = [];

        student.studentList.forEach((item: any) => {
          if (item.selected) {
            count++;
            students.push(item);
          }
        });

        if (count > 0) {
          tempList.push({
            studentCount: count,
            subjectId: student.subjectId,
            subjectName: student.subjectName,
            studentList: students
          });
        }
      });
      forms.studentAllList = tempList;
      forms.castStatus = true;
    };

    const formatterImage = (name: string) => {
      let image: string = '';
      switch (name) {
        case 'SOLO':
          image = dBall;
          break;
        case 'REPRISE':
          image = cBall;
          break;
        case 'ENSEMBLE':
          image = hBall;
          break;
        case 'UNISON':
          image = qBall;
          break;
        default:
          image = SOLO;
          break;
      }
      return image;
    };

    onMounted(() => {
      // setTimeout(() => {
      //   // forms.headerLoading = false;
      //   // forms.detailLoading = false;
      // }, 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 showImageToas = (obj: any) => {
      forms.imagePreview = obj.imagePreview;
      forms.imageShow = obj.imageShow;
      forms.startPosition = obj.index;
      console.log(forms.imagePreview, 'showImageToas', obj);
    };
    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>
          {{
            right: () => (
              <>
                <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' }}>
          {browser().isApp ? (
            <>
              {' '}
              <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',
                        query: {
                          id: forms.id
                        }
                      });
                    }}></Image>
                  <Image
                    src={shareIcon}
                    onClick={() => {
                      shareForms.showQrcode = true;
                      nextTick(() => {
                        const previewContainer = document.querySelector(
                          '#preview-container'
                        ) as HTMLElement;
                        const share = useRect(previewContainer);
                        shareForms.width = share.width;
                        shareForms.height = share.height;
                        if (share.width > 0 && share.height > 0) {
                          previewContainer.style.width =
                            Math.round(share.width) + 'px';
                          previewContainer.style.height =
                            Math.round(share.height) + 'px';
                        }
                      });
                    }}></Image>
                </div>
              </div>
            </>
          ) : null}
          <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>
                  )
                }}
              </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 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}
                        <span
                          onClick={() => {
                            if (item.studentNum <= 0) return;
                            formatterStudentList(item.studentList);
                          }}>
                          共{item.studentNum}名 <Icon name="arrow" />
                        </span>
                      </Col>
                    </Row>
                    <Row class={styles.itemRow} style={{ marginBottom: '0' }}>
                      <Col span={6} class={styles.label}>
                        表演团队：
                      </Col>
                      <Col span={18} class={styles.content}>
                        {item.subjectNameList}
                      </Col>
                    </Row>
                    <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>
                  <Detailswiper
                    item={item}
                    onShowImageToas={showImageToas}></Detailswiper>
                  {/* <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 class={styles.bottomWrap}>
              {browser().isApp ? null : (
                <Image class={styles.logo} src={logo}></Image>
              )}
              <Image class={styles.bottomBg} src={bottomBg}></Image>
            </div>
          </div>
        </SkeletionDetailModal>

        <MImagePreview
          v-model:show={forms.imageShow}
          images={forms.imagePreview}
          startPosition={forms.startPosition}
        />

        {/* 演员名单 */}
        <MPopup v-model:modelValue={forms.castStatus}>
          <CastModal
            type="look"
            subjectAllList={forms.studentAllList}
            onClose={() => (forms.castStatus = false)}
          />
        </MPopup>

        <Popup
          v-model:show={shareForms.showQrcode}
          position="bottom"
          style={{ background: 'transparent' }}>
          <div class={styles.codeContainer}>
            <div
              class={[styles.codeImg, styles.teacherCodeImg]}
              id="preview-container">
              <Image src={shareBg} class={styles.popupWeekBanner} />
              <div class={styles.timerBg}>
                {dayjs(forms.headerDetail.startTime).format('YYYY年MM月DD日')}
              </div>
              <div class={styles.codeContent}>
                <Image
                  class={styles.schoolLogo}
                  src={
                    forms.headerDetail?.cooperationOrganLogo
                      ? forms.headerDetail?.cooperationOrganLogo
                      : schoolIcon
                  }></Image>
                <div class={styles.schoolName}>
                  {forms.headerDetail?.cooperationOrganName || '武汉小学'}
                </div>
                <div class={styles.shareName}>{forms.headerDetail.name}</div>
                <div class={styles.codeQr}>
                  <Image src={popupQrcodeBg} class={styles.popupQrcodeBg} />
                  <MQrcode
                    text={shareForms.url}
                    size={'100%'}
                    logoSize="small"
                  />
                </div>
                <Image src={shareBottom} class={styles.shareBottom}></Image>
              </div>
            </div>
            <div class={styles.codeBottom}>
              <Icon
                name="cross"
                size={22}
                class={styles.close}
                color="#666"
                onClick={() => (shareForms.showQrcode = false)}
              />

              <h3 class={styles.title}>
                <i></i>分享方式
              </h3>
              <Grid columnNum={2} border={false}>
                <GridItem onClick={onSaveImg}>
                  {{
                    icon: () => (
                      <Image class={styles.shareImg} src={iconSaveImage} />
                    ),
                    text: () => <div class={styles.shareText}>保存图片</div>
                  }}
                </GridItem>
                <GridItem onClick={onShare}>
                  {{
                    icon: () => (
                      <Image class={styles.shareImg} src={iconWechat} />
                    ),
                    text: () => <div class={styles.shareText}>微信</div>
                  }}
                </GridItem>
              </Grid>
            </div>
          </div>
        </Popup>
      </div>
    );
  }
});