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 popupShareBg from './images/popup-share-bg.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;
      // 判断是否已经生成图片
      console.log(imgs.image);
      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;
            console.log(url, 'html2canvas');
            saveImg();
          })
          .catch(() => {
            // closeToast();
            imgs.saveLoading = false;
          });
      }
    };
    const showImageToas = (obj: any) => {
      forms.imagePreview = obj.imagePreview;
      forms.imageShow = obj.imageShow;
      forms.startPosition = obj.startPosition;
      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,
          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={{
            '--bar-height': state.navBarHeight + 'px'
          }}>
          {!browser().isApp ? (
            <>
              <div
                class={styles.fixWrap}
                style={{ top: state.navBarHeight + 20 + '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}
                                      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={popupShareBg} class={styles.popupWeekBanner} />
              <div class={styles.timerBg}>
                {dayjs(forms.headerDetail.startTime).format('YYYY年MM月DD日')}
              </div>
              <div class={styles.codeContent}>
                {/* <Image
                  class={styles.schoolLogo}
                  fit="cover"
                  src={
                    forms.headerDetail?.cooperationOrganLogo
                      ? forms.headerDetail?.cooperationOrganLogo
                      : schoolIcon
                  }></Image> */}
                <img
                  class={[styles.schoolLogo]}
                  src={
                    forms.headerDetail?.cooperationOrganLogo
                      ? forms.headerDetail?.cooperationOrganLogo +
                        '?t=' +
                        Date.now()
                      : schoolIcon
                  }
                  crossorigin="anonymous"
                  style={{
                    objectFit: 'cover'
                  }}
                />
                <div class={[styles.schoolName, 'van-multi-ellipsis--l2']}>
                  {forms.headerDetail?.cooperationOrganName || '--'}
                  武昌学校武昌学校武昌学校武昌学校武昌学校武昌学校武昌学校武昌学校武昌学校武昌学校武昌学校武昌学校武昌学校武昌学校武昌学校武昌学校武昌学校武昌学校
                </div>
                <div class={[styles.shareName, 'van-ellipsis']}>
                  {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>
    );
  }
});