☰

acfunlivedanmake

acfunlivedanmaku

  1. // ==UserScript==
  2. // @name     acfunlivedanmake
  3. // @description acfunlivedanmaku
  4. // @namespace syachiku
  5. // @author       syachiku
  6. // @match        https://live.acfun.cn/live/*
  7. // @run-at document-end
  8. // @grant   GM_addStyle
  9. // @grant GM_getResourceURL
  10. // @grant   GM_xmlhttpRequest
  11. // @grant       GM_getValue
  12. // @grant       GM_setValue
  13. // @version  1.1.0
  14. // @require https://cdn.jsdelivr.net/npm/qs@6.9.4/dist/qs.min.js
  15. // @require https://cdn.jsdelivr.net/npm/uuid@8.3.2/dist/umd/uuidv4.min.js
  16. // @require https://cdn.jsdelivr.net/npm/lodash@4.17.15/lodash.min.js
  17. // @require https://cdn.jsdelivr.net/npm/moment@2.18.1/min/moment.min.js
  18. // @require https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js
  19. // @require https://cdn.jsdelivr.net/npm/element-ui@2.15.1/lib/index.js
  20. // @require https://cdn.jsdelivr.net/npm/file-saver@2.0.2/dist/FileSaver.min.js
  21. // @require https://cdn.jsdelivr.net/npm/exceljs@4.2.1/dist/exceljs.min.js
  22. // @require https://cdn.jsdelivr.net/npm/clipboard-polyfill@2.5.4/build/clipboard-polyfill.min.js
  23. // @require https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js
  24. // @require https://cdn.jsdelivr.net/npm/keymaster@1.6.2/keymaster.min.js
  25. // @require https://cdn.jsdelivr.net/npm/easy-danmaku-js@1.0.6/demo/easy-Danmaku.min.js
  26. // @require https://cdn.jsdelivr.net/npm/jquery-countdown@2.2.0/dist/jquery.countdown.min.js
  27. // @require https://cdn.jsdelivr.net/npm/hotkeys-js@3.7.3/dist/hotkeys.min.js
  28. // ==/UserScript==
  29.  
  30.  
  31.  
  32. ;(async function(){
  33.  
  34.     const config = {
  35.       UID : parseInt(window.location.href.split('/').pop()),
  36.       TOKEN : null,
  37.       ACFUN_SERVER : 'https://www.acfun.cn',
  38.       ACFUNLIVE_SERVER : 'https://live.acfun.cn',
  39.       URLS : {
  40.         USER : {
  41.           INFO : '/user/info',
  42.         },
  43.         ACFUN_USER : {
  44.           VUP : '/user/acfun_user_info_simplified',
  45.           INFO : '/rest/pc-direct/user/userInfo',
  46.           SPACE : '/u'
  47.         },
  48.         DOUGA : {
  49.           COMMENT : '/rest/pc-direct/comment/list',
  50.           VIDEO : '/v',
  51.           ARTICLE : '/a',
  52.           BANGUMI : '/bangumi'
  53.         },
  54.       },
  55.       RESPONSE : {
  56.         FIELD : {
  57.           STATUS : 'code',
  58.           MSG : 'message',
  59.           DATA : 'data',
  60.         },
  61.         STATUS : {
  62.           SUCCESS : 200,
  63.         }
  64.       }
  65.     };
  66.   
  67.     const css = `
  68.       /* base html */
  69.       #header,#footer,
  70.       .main>.list-container.outer-wrapper,
  71.       .main>.list-container.outer-wrapper:before,
  72.       .container-live>.left,
  73.       .live-feed-watching,
  74.       .container-live-feed-messages:before
  75.       {display:none!important}
  76.       #app>.main,
  77.       .player-outer-wrapper,
  78.       .player-outer-wrapper>.container-live,
  79.       .player-outer-wrapper>.container-live>.container-live-feed.right,
  80.       .player-outer-wrapper>.container-live>.container-live-feed.right>.live-feed,
  81.       .player-outer-wrapper>.container-live>.container-live-feed.right>.live-feed>.container-live-feed-messages,
  82.       .player-outer-wrapper>.container-live>.container-live-feed.right>.live-feed>.container-live-feed-messages>.live-feed-messages
  83.       {
  84.         display:block!important;
  85.         position:fixed!important;
  86.         width:100%!important;
  87.         height:100%!important;
  88.         margin:0!important;
  89.         padding:0!important;
  90.         border:0!important;
  91.         top:0!important;
  92.         bottom:0!important;
  93.         word-break:break-all!important;
  94.       }
  95.       .live-feed-input{
  96.         display : none !important;
  97.       }
  98.   
  99.       @keyframes scaleDraw {  /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
  100.               0%{
  101.                   transform: scale(1);  /*开始为原始大小*/
  102.               }
  103.               25%{
  104.                   transform: scale(1.5); /*放大1.1倍*/
  105.               }
  106.               50%{
  107.                   transform: scale(1);
  108.               }
  109.               75%{
  110.                   transform: scale(1.5);
  111.               }
  112.           }
  113.         .scale-anime{
  114.               -webkit-animation: scaleDraw 5s ease-in-out;
  115.           }
  116.   
  117.       .container-live-feed-messages-acfunlive:before{
  118.         display:none!important;
  119.       }
  120.       .container-live-feed-messages-acfunlive{
  121.         display:block!important;
  122.         position:fixed!important;
  123.         width:100%!important;
  124.         height:100%!important;
  125.         margin:0!important;
  126.         padding:0!important;
  127.         border:0!important;
  128.         top:0!important;
  129.         bottom:0!important;
  130.         word-break:break-all!important;
  131.       }
  132.   
  133.       .container-live-feed-messages-acfunlive .live-message-container.live-message-container-vertical{
  134.         height: 100%;
  135.         overflow-y: auto;
  136.       }
  137.       .container-live-feed-messages-acfunlive .live-message-container.live-message-container-horizontal{
  138.         width: 100%;
  139.         height: 100%;
  140.         overflow-x: auto;
  141.         overflow-y: hidden;
  142.         display : flex;
  143.         flex-direction: column;
  144.         flex-wrap: wrap;
  145.       }
  146.       .container-live-feed-messages-acfunlive .live-message-container.live-message-container-vertical.active::-webkit-scrollbar{
  147.         width: 10px;
  148.         height: 1px;
  149.       }
  150.       .container-live-feed-messages-acfunlive .live-message-container.live-message-container-vertical.inactive::-webkit-scrollbar{
  151.         display:none;
  152.       }
  153.       .container-live-feed-messages-acfunlive .live-message-container.live-message-container-vertical::-webkit-scrollbar-thumb {
  154.         border-radius: 10px;
  155.         -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  156.         background: #535353;
  157.       }
  158.       .container-live-feed-messages-acfunlive .live-message-container.live-message-container-vertical::-webkit-scrollbar-track {
  159.         -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  160.         border-radius: 10px;
  161.         background: #EDEDED;
  162.       }
  163.   
  164.       .container-live-feed-messages-acfunlive .live-message-container.live-message-container-horizontal.active::-webkit-scrollbar{
  165.         height: 10px;
  166.         width: 1px;
  167.       }
  168.       .container-live-feed-messages-acfunlive .live-message-container.live-message-container-horizontal.inactive::-webkit-scrollbar{
  169.         display:none;
  170.       }
  171.       .container-live-feed-messages-acfunlive .live-message-container.live-message-container-horizontal::-webkit-scrollbar-thumb {
  172.         border-radius: 10px;
  173.         -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  174.         background: #535353;
  175.       }
  176.       .container-live-feed-messages-acfunlive .live-message-container.live-message-container-horizontal::-webkit-scrollbar-track {
  177.         -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  178.         border-radius: 10px;
  179.         background: #EDEDED;
  180.       }
  181.   
  182.       .container-live-feed-messages-acfunlive .live-message-container .live-message-popup{
  183.         display:flex;
  184.         padding: 7px;
  185.         width: 100%;
  186.       }
  187.       .container-live-feed-messages-acfunlive .live-message-container .live-message-popup .live-message-popup-right{
  188.         margin-left : 5px;
  189.         width: 90%;
  190.       }
  191.   
  192.       @keyframes clippath{
  193.         0%, 100% {clip-path: inset(0 0 100% 0);}
  194.         25% {clip-path: inset(0 100% 0 0);}
  195.         50% {clip-path: inset(100% 0 0 0);}
  196.         75% {clip-path: inset(0 0 0 100%);}
  197.       }
  198.       .container-live-feed-messages-acfunlive .live-message-container .live-message-popup .live-message-border-flow{
  199.         position: relative;
  200.       }
  201.   
  202.   
  203.       .live-message-border-flow .border-flow-item::before,.live-message-border-flow .border-flow-item::after{
  204.         content: "";
  205.         position: absolute;
  206.         transition: all .5s;
  207.         animation: clippath 3s infinite linear;
  208.       }
  209.       .live-message-border-flow .border-flow-item::after{
  210.         animation: clippath 3s -1.5s infinite linear;
  211.       }
  212.   
  213.       .container-live-feed-messages-acfunlive .live-message-container .live-message-popup .live-message-danmaku{
  214.         margin-top: 3px;
  215.         padding: 5px 12px 5px 12px;
  216.         box-sizing: border-box;
  217.         word-break: break-all;
  218.         cursor: pointer;
  219.       }
  220.       .container-live-feed-messages-acfunlive .live-message-container .live-message-popup .live-message-danmaku .live-message-douga{
  221.         margin-top: 10px;
  222.       }
  223.       .container-live-feed-messages-acfunlive .live-message-container .live-message-popup .live-message-danmaku .live-message-douga .el-card{
  224.         background: transparent;
  225.         border: transparent;
  226.         box-shadow: 0px 2px 12px rgba(0, 0, 0, 30%);
  227.         border-radius: 0px;
  228.       }
  229.       .container-live-feed-messages-acfunlive .live-message-container .live-message-popup .live-message-danmaku .live-message-douga .el-card__body{
  230.         padding: 10px;
  231.       }
  232.       .container-live-feed-messages-acfunlive .live-message-container .live-message-popup .live-message-danmaku .live-message-douga .douga-info{
  233.       }
  234.       .container-live-feed-messages-acfunlive .live-message-container .live-message-popup .live-message-danmaku .live-message-douga .douga-info .douga-info-right{
  235.         height : 100%;
  236.         display:flex;
  237.         flex-direction:column;
  238.         justify-content:space-between;
  239.       }
  240.       .container-live-feed-messages-acfunlive .live-message-container .live-message-popup .live-message-danmaku .live-message-douga .douga-info .cover{
  241.         display:inline-block;
  242.         border-radius : 4px;
  243.       }
  244.       .container-live-feed-messages-acfunlive .live-message-container .live-message-popup .live-message-danmaku .live-message-douga .douga-info .cover >img{
  245.         object-fit:cover;
  246.           display: block;
  247.           height: 100%;
  248.           vertical-align: middle;
  249.       }
  250.       .container-live-feed-messages-acfunlive .live-message-container .live-message-popup .live-message-danmaku .live-message-douga .douga-info .title-container{
  251.         overflow: hidden;
  252.         text-overflow: ellipsis;
  253.         display: -webkit-box;
  254.         -webkit-line-clamp: 3;
  255.         -webkit-box-orient: vertical;
  256.       }
  257.       .container-live-feed-messages-acfunlive .live-message-container .live-message-popup .live-message-danmaku .live-message-douga .douga-info.article .title{
  258.         overflow: hidden;
  259.         text-overflow: ellipsis;
  260.         display: -webkit-box;
  261.         -webkit-line-clamp: 1;
  262.         -webkit-box-orient: vertical;
  263.       }
  264.       .container-live-feed-messages-acfunlive .live-message-container .live-message-popup .live-message-danmaku .live-message-douga .douga-info.article .description{
  265.         overflow: hidden;
  266.         text-overflow: ellipsis;
  267.         display: -webkit-box;
  268.         -webkit-line-clamp: 2;
  269.         -webkit-box-orient: vertical;
  270.         filter : invert(100%);
  271.       }
  272.       .container-live-feed-messages-acfunlive .live-message-container .live-message-popup .live-message-danmaku .live-message-douga .douga-info .up{
  273.         overflow: hidden;
  274.         text-overflow: ellipsis;
  275.         display: -webkit-box;
  276.         -webkit-line-clamp: 1;
  277.         -webkit-box-orient: vertical;
  278.       }
  279.       .container-live-feed-messages-acfunlive .live-message-container .live-message-popup .live-message-danmaku .live-message-douga .douga-info .play-count{
  280.       }
  281.       .container-live-feed-messages-acfunlive .live-message-container .live-message-popup .live-message-gift{
  282.         width: max-content;
  283.         display: table-cell;
  284.           margin-top: 3px;
  285.           padding: 5px 12px 5px 12px;
  286.           box-sizing: border-box;
  287.           word-break: break-all;
  288.       }
  289.       .container-live-feed-messages-acfunlive .live-message-container .live-message-popup .live-message-gift .live-message-gift-count{
  290.           pointer-events: none;
  291.           display: inline-block;
  292.       }
  293.   
  294.       .user-info-badge{
  295.           border-radius: 4px;
  296.           padding-left: 4px;
  297.           padding-right: 4px;
  298.           color: white;
  299.       }
  300.       .user-info-badge-green{
  301.           background-image: linear-gradient(30deg, #14bd5a, #40E584, #01b54c);
  302.       }
  303.       .user-info-badge-blue{
  304.           background-image: linear-gradient(30deg, #32A9DE, #4fbdef, #0e9ada);
  305.       }
  306.       .user-info-badge-orange{
  307.           background-image: linear-gradient(30deg, #eb9f19, #e6a01b, #f19b00);
  308.       }
  309.       .user-info-badge-red{
  310.           background-image: linear-gradient(30deg, #d43535, #e25537, #e94a47);
  311.       }
  312.       .user-info-badge-purple{
  313.           background-image: linear-gradient(30deg, #4801FF, #7918F2, #AC32E4);
  314.       }
  315.       .user-info-badge-black{
  316.           background-image: linear-gradient(30deg, #5e659d, #5e659d, #3c4270);
  317.       }
  318.       .user-info-badge-vup{
  319.           background-image: linear-gradient(30deg, #32A9DE, #4fbdef, #0e9ada);
  320.       }
  321.       .user-info-username{
  322.       }
  323.   
  324.   
  325.       .container-live-feed-messages-acfunlive .live-message-container .live-message-inline{
  326.         text-align : center;
  327.         display: -webkit-box;
  328.           -webkit-box-orient: vertical;
  329.           -webkit-line-clamp: 1;
  330.           overflow: hidden;
  331.       }
  332.   
  333.       .container-live-feed-messages-acfunlive .live-feed-dropmenu.live-feed-dropmenu-horizontal{
  334.         display:block;
  335.         position:absolute;
  336.         top : 50px;
  337.         left : 50px;
  338.         z-index : 999999;
  339.       }
  340.       .container-live-feed-messages-acfunlive .live-feed-dropmenu.live-feed-dropmenu-vertical{
  341.         display:block;
  342.         position:absolute;
  343.         top : 50px;
  344.         right : 50px;
  345.         z-index : 999999;
  346.       }
  347.   
  348.       /*.live-feed-input:hover{
  349.           opacity : 1;
  350.       }*/
  351.   
  352.       @font-face{
  353.         font-family:element-icons;
  354.         src:url('https://cdn.jsdelivr.net/npm/element-ui@2.15.1/lib/theme-chalk/fonts/element-icons.ttf');
  355.       }
  356.   
  357.       .lottery-form-dialog {
  358.         z-index : 999999;
  359.         height: 400px;
  360.       }
  361.   
  362.       .lottery-form-dialog .el-dialog__body{
  363.         height : 80%;
  364.         overflow-y: auto;
  365.       }
  366.   
  367.       .lottery-form .gift-selector .el-select-dropdown__item{
  368.         height : 40px;
  369.         line-height : 40px;
  370.       }
  371.   
  372.       .lottery-form .el-divider{
  373.         margin-top : 40px;
  374.       }
  375.       .lottery-form .el-divider .el-divider__text{
  376.         color : #409EFF;
  377.       }
  378.       .lottery-form .douga-list-wrapper{
  379.         overflow:auto;
  380.         height:200px;
  381.       }
  382.   
  383.       .lottery-form .douga-list-wrapper .douga-list .douga-list-item.video .douga-info{
  384.         height : 100px;
  385.       }
  386.       .lottery-form .douga-list-wrapper .douga-list .douga-list-item.article .douga-info{
  387.         height : 60px;
  388.       }
  389.       .lottery-form .douga-list-wrapper .douga-list .douga-list-item .douga-info .douga-info-right{
  390.         height : 100%;
  391.         display:flex;
  392.         flex-direction:column;
  393.         justify-content:space-between;
  394.       }
  395.       .lottery-form .douga-list-wrapper .douga-list .douga-list-item .cover{
  396.         display:inline-block;
  397.         height:100px;
  398.         width:177px;
  399.         line-height:100px;
  400.         border-radius : 4px;
  401.       }
  402.       .lottery-form .douga-list-wrapper .douga-list .douga-list-item .cover >img{
  403.         object-fit:cover;
  404.           display: block;
  405.           height: 100%;
  406.           vertical-align: middle;
  407.       }
  408.       .lottery-form .douga-list-wrapper .douga-list .douga-list-item.video .title{
  409.         height:60px;
  410.         overflow: hidden;
  411.         text-overflow: ellipsis;
  412.         display: -webkit-box;
  413.         -webkit-line-clamp: 3;
  414.         -webkit-box-orient: vertical;
  415.         font-weight : bold;
  416.       }
  417.       .lottery-form .douga-list-wrapper .douga-list .douga-list-item.article .title{
  418.         height:40px;
  419.         overflow: hidden;
  420.         text-overflow: ellipsis;
  421.         display: -webkit-box;
  422.         -webkit-line-clamp: 2;
  423.         -webkit-box-orient: vertical;
  424.         text-decoration : underline;
  425.         font-weight : bold;
  426.       }
  427.       .lottery-form .douga-list-wrapper .douga-list .douga-list-item .el-card:hover{
  428.         background-color : #409effb0;
  429.         cursor:pointer;
  430.         color : white;
  431.       }
  432.       .lottery-form .douga-list-wrapper .douga-list .douga-list-item.active .el-timeline-item__tail{
  433.         border-left: 2px solid #409EFF;
  434.       }
  435.       .lottery-form .douga-list-wrapper .douga-list .douga-list-item.active .el-timeline-item__node{
  436.         background-color : #409EFF;
  437.       }
  438.       .lottery-form .douga-list-wrapper .douga-list .douga-list-item.active .el-card{
  439.         color : white;
  440.         background-color : #409eff;
  441.       }
  442.   
  443.       .lottery-table .lottery-status-finish{
  444.         background: #8aec53;
  445.       }
  446.   
  447.       .lottery-table-dialog{
  448.         z-index : 999999;
  449.       }
  450.   
  451.       .lottery-table-dialog .el-dialog__body{
  452.         height : 80%;
  453.         overflow-y: auto;
  454.       }
  455.   
  456.       .user-table-dialog{
  457.         z-index : 999999;
  458.       }
  459.   
  460.       .user-table-dialog .el-dialog__body{
  461.         height : 80%;
  462.         overflow-y: auto;
  463.       }
  464.   
  465.   
  466.       .lottery-countdown-dialog{
  467.         z-index : 999999;
  468.         background-color : rgba(0,0,0,0) !important;
  469.         box-shadow : none !important;
  470.       }
  471.       .lottery-countdown-dialog button[data-setter] {
  472.           outline: none;
  473.           background: transparent;
  474.           border: none;
  475.           font-family: 'Roboto';
  476.           font-weight: 300;
  477.           font-size: 18px;
  478.           width: 25px;
  479.           height: 30px;
  480.           color: #409EFF;
  481.           cursor: pointer;
  482.       }
  483.       .lottery-countdown-dialog button[data-setter]:hover {
  484.           opacity: 0.5;
  485.       }
  486.       .lottery-countdown-dialog .container {
  487.           position: relative;
  488.           top: 30px;
  489.           width: 300px;
  490.           margin: 0 auto;
  491.       }
  492.       .lottery-countdown-dialog .setters {
  493.           position: absolute;
  494.           left: 85px;
  495.           top: 75px;
  496.       }
  497.       .lottery-countdown-dialog .minutes-set {
  498.           float: left;
  499.           margin-right: 28px;
  500.       }
  501.       .lottery-countdown-dialog .seconds-set {
  502.           float: right;
  503.       }
  504.       .lottery-countdown-dialog .controlls {
  505.           position: absolute;
  506.           left: 75px;
  507.           top: 105px;
  508.           text-align: center;
  509.       }
  510.       .lottery-countdown-dialog .display-remain-time {
  511.           font-family: 'Roboto';
  512.           font-weight: bold;
  513.           font-size: 65px;
  514.           color: #409EFF;
  515.       }
  516.       .lottery-countdown-dialog #pause {
  517.           outline: none;
  518.           background: transparent;
  519.           border: none;
  520.           margin-top: 10px;
  521.           width: 50px;
  522.           height: 50px;
  523.           position: relative;
  524.       }
  525.       .lottery-countdown-dialog .play::before {
  526.           display: block;
  527.           content: "";
  528.           position: absolute;
  529.           top: 8px;
  530.           left: 16px;
  531.           border-top: 15px solid transparent;
  532.           border-bottom: 15px solid transparent;
  533.           border-left: 22px solid #409EFF;
  534.       }
  535.       .lottery-countdown-dialog .pause::after {
  536.           content: "";
  537.           position: absolute;
  538.           top: 8px;
  539.           left: 12px;
  540.           width: 15px;
  541.           height: 30px;
  542.           background-color: transparent;
  543.           border-radius: 1px;
  544.           border: 5px solid #409EFF;
  545.           border-top: none;
  546.           border-bottom: none;
  547.       }
  548.       .lottery-countdown-dialog #pause:hover {
  549.           opacity: 0.8;
  550.       }
  551.       .lottery-countdown-dialog .e-c-base {
  552.           fill: none;
  553.           stroke: #B6B6B6;
  554.           stroke-width: 15px;
  555.       }
  556.       .lottery-countdown-dialog .e-c-progress {
  557.           fill: none;
  558.           stroke: #409EFF;
  559.           stroke-width: 15px;
  560.           transition: stroke-dashoffset 0.7s;
  561.       }
  562.       .lottery-countdown-dialog .e-c-pointer {
  563.           fill: #FFF;
  564.           stroke: #409EFF;
  565.           stroke-width: 2px;
  566.       }
  567.       .lottery-countdown-dialog #e-pointer {
  568.           transition: transform 0.7s;
  569.       }
  570.   
  571.       .lottery-start-dialog{
  572.         z-index : 999999;
  573.       }
  574.       .lottery-start-dialog .el-carousel__item{
  575.         background-color: #99a9bf;
  576.         opacity: 0.75;
  577.         margin: 0;
  578.         display:flex;
  579.         width : 250px;
  580.         justify-content:center;
  581.         align-items:center;
  582.         flex-direction:column;
  583.       }
  584.   
  585.       .lottery-start-dialog .el-dialog__header{
  586.         display:none;
  587.       }
  588.       .lottery-start-dialog .el-carousel__item.highlight{
  589.         background-color: gold;
  590.       }
  591.       .lottery-start-dialog .el-carousel__item .nickname{
  592.         font-size : 20px;
  593.         color : white;
  594.         text-shadow : 0px 2px 2px black, 0px -2px 2px black, 2px 0px 2px black, -2px 0px 2px black, 2px 2px 2px black, -2px -2px 2px black, 2px -2px 2px black, -2px 2px 2px black;
  595.         font-weight: bold;
  596.       }
  597.   
  598.       .login-form-dialog {
  599.         z-index : 999999;
  600.         height: 400px;
  601.       }
  602.   
  603.       .audio-form-dialog {
  604.         z-index : 999999;
  605.         height: 400px;
  606.       }
  607.   
  608.       .audio-form-dialog .el-dialog__body{
  609.         height : 80%;
  610.         overflow-y: auto;
  611.       }
  612.   
  613.       .interaction-form-dialog {
  614.         z-index : 999999;
  615.         height: 400px;
  616.       }
  617.   
  618.       .interaction-form-dialog .el-dialog__body{
  619.         height : 80%;
  620.         overflow-y: auto;
  621.       }
  622.   
  623.       .interaction-form .el-divider .el-divider__text{
  624.         color : #409EFF;
  625.       }
  626.   
  627.   
  628.       .guess-form-dialog {
  629.         z-index : 999999;
  630.         height: 400px;
  631.       }
  632.   
  633.       .guess-form-dialog .el-dialog__body{
  634.         height : 100%;
  635.         overflow-y: auto;
  636.       }
  637.   
  638.       .guess-start-dialog {
  639.         z-index : 999999;
  640.         height: 400px;
  641.       }
  642.   
  643.       .guess-start-dialog .el-dialog__body{
  644.         height : 100%;
  645.         overflow-y: auto;
  646.       }
  647.   
  648.       .guess-danmaku-dialog {
  649.         z-index : 999999;
  650.         height: 400px;
  651.       }
  652.   
  653.       .guess-danmaku-dialog .el-dialog__body{
  654.         height : 100%;
  655.         overflow-y: auto;
  656.       }
  657.   
  658.       .guess-danmaku-dialog .guess-danmaku-container{
  659.         height : 100%;
  660.         width : 100%;
  661.       }
  662.   
  663.       .guess-danmaku-dialog .guess-danmaku-danmu{
  664.         display : flex;
  665.         color: rgb(255, 255, 255);
  666.           font-size: 25px;
  667.           font-family: buding;
  668.           text-shadow: rgb(0 0 0) 0px 1px 1px, rgb(0 0 0) 0px -1px 1px, rgb(0 0 0) 1px 0px 1px, rgb(0 0 0) -1px 0px 1px, rgb(0 0 0) 1px 1px 1px, rgb(0 0 0) -1px -1px 1px, rgb(0 0 0) 1px -1px 1px, rgb(0 0 0) -1px 1px 1px;
  669.         cursor : pointer;
  670.       }
  671.   
  672.       .guess-danmaku-dialog .guess-danmaku-danmu.is-select{
  673.         border : 1px solid red;
  674.       }
  675.   
  676.       .guess-danmaku-dialog .guess-danmaku-danmu >img{
  677.         width : 20px;
  678.         height : 20px;
  679.         border-radius : 10px;
  680.       }
  681.   
  682.   
  683.       .guess-table-dialog {
  684.         z-index : 999999;
  685.         height: 400px;
  686.       }
  687.       .guess-table-dialog .el-dialog__body{
  688.         height : 100%;
  689.         overflow-y: auto;
  690.       }
  691.   
  692.     `;
  693.   
  694.     GM_addStyle(css);
  695.     var audio = null;
  696.   
  697.   
  698.   
  699.     // 检查token是否存在
  700.     var token = await GM_getValue("token");
  701.     if(token){
  702.       config.TOKEN = token;
  703.     }
  704.   
  705.   
  706.     // 禁止播放视频
  707.     function disableVideos(){
  708.       window.setInterval(function(){
  709.         let videoEles = document.querySelectorAll('video');
  710.         for(let videoEle of videoEles){
  711.           videoEle.src = null;
  712.         }
  713.       }, 500);
  714.   
  715.     }
  716.   
  717.     // 是否为空
  718.     function isNullOrEmpty(val){
  719.       return _.isUndefined(val) || _.isNull(val) || _.isNaN(val) || (((_.isObject(val) && !_.isDate(val)) || _.isArray(val) || _.isString(val)) && _.isEmpty(val))
  720.     }
  721.   
  722.     // 通用请求
  723.     function commonRequrest(url, method, form, raw, callback, headers){
  724.       var isSuccess = false;
  725.       var data = null;
  726.       if(!headers){
  727.         headers = {};
  728.       }
  729.   
  730.       if(!raw){
  731.   
  732.         if(method == 'post'){
  733.   
  734.           headers['Content-Type'] = 'application/x-www-form-urlencoded';
  735.           if(form){
  736.             form = Qs.stringify(form);
  737.           }
  738.   
  739.         }
  740.   
  741.       }
  742.   
  743.       if(method == 'get' && form){
  744.         form = Qs.stringify(form);
  745.         url += '?' + form;
  746.       }
  747.   
  748.       // 获取了token
  749.       if(config.TOKEN){
  750.         headers['Authorization'] = `Token ${config.TOKEN}`;
  751.       }
  752.   
  753.       GM_xmlhttpRequest({
  754.         synchronous : !_.isFunction(callback),
  755.         method : method,
  756.         url : url,
  757.         data : form,
  758.         headers : headers,
  759.         onload : function(res){
  760.   
  761.           // 200
  762.           if(res.status==200){
  763.             if(raw){
  764.               callback(true, res.responseText);
  765.             }
  766.             else{
  767.               res = JSON.parse(res.responseText);
  768.               isSuccess = res[config.RESPONSE.FIELD.STATUS] == config.RESPONSE.STATUS.SUCCESS;
  769.               data = res[config.RESPONSE.FIELD.DATA];
  770.   
  771.               if(_.isFunction(callback)){
  772.                 callback(isSuccess, data);
  773.               }
  774.             }
  775.           }
  776.           else{
  777.             if(_.isFunction(callback)){
  778.               callback(isSuccess, data);
  779.             }
  780.           }
  781.         },
  782.         onerror : function(){
  783.           if(_.isFunction(callback)){
  784.             callback(isSuccess, data);
  785.           }
  786.         },
  787.         onabort : function(){
  788.           if(_.isFunction(callback)){
  789.             callback(isSuccess, data);
  790.           }
  791.         },
  792.       });
  793.   
  794.       return [isSuccess, data];
  795.     }
  796.   
  797.     function formatText(text, params){
  798.   
  799.       for(var key in params){
  800.         text = text.replace(new RegExp('\\$\\{'+ key +'\\}', 'g'), params[key]);
  801.       }
  802.   
  803.       return text;
  804.   
  805.     }
  806.   
  807.     function addCssResource(url){
  808.   
  809.       commonRequrest(url, 'get', null, true, function(isSuccess, css){
  810.         if(isSuccess){
  811.           GM_addStyle(css);
  812.         }
  813.       })
  814.     }
  815.   
  816.     // 添加element-ui样式
  817.     addCssResource('https://cdn.jsdelivr.net/npm/element-ui@2.15.1/lib/theme-chalk/index.css');
  818.   
  819.   
  820.     class CallbackManager{
  821.       constructor(feedback){
  822.         this.callbacks = {};
  823.         this.callbackGroupMapper = {};
  824.       }
  825.   
  826.       register(group, func, params, first){
  827.         if(!(group in this.callbacks)){
  828.           this.callbacks[group] = [];
  829.         }
  830.   
  831.         var callback = {
  832.           id : uuidv4(),
  833.           func : func,
  834.           params : params
  835.         };
  836.   
  837.         // 添加到最前
  838.         if(first){
  839.           this.callbacks[group].splice(0, 0, callback);
  840.         }
  841.         else{
  842.           this.callbacks[group].push(callback);
  843.         }
  844.         this.callbackGroupMapper[callback.id] = group;
  845.   
  846.         return callback.id;
  847.   
  848.       }
  849.   
  850.       cancel(handler){
  851.   
  852.         if(!(handler in this.callbackGroupMapper) || !(this.callbackGroupMapper[handler] in this.callbacks)){
  853.           return;
  854.         }
  855.   
  856.         var findIndex = _.findIndex(this.callbacks[this.callbackGroupMapper[handler]], {id:handler});
  857.         if(findIndex==-1){
  858.           return;
  859.         }
  860.   
  861.         this.callbacks[this.callbackGroupMapper[handler]].splice(findIndex, 1);
  862.         delete this.callbackGroupMapper[handler];
  863.   
  864.       }
  865.   
  866.       feed(group, data){
  867.   
  868.         if(!(group in this.callbacks)){
  869.           return;
  870.         }
  871.   
  872.   
  873.   
  874.         this.callbacks[group].forEach(function(callback){
  875.   
  876.           callback.func(data, callback.params);
  877.   
  878.         });
  879.   
  880.   
  881.       }
  882.   
  883.     }
  884.   
  885.     var callbackManager = new CallbackManager();
  886.   
  887.   
  888.     const acSeriesPattern = /[aA][aAbBcC][=号]?\s*(\d+)/;
  889.     function extractAcSeries(text){
  890.       var match = text.match(acSeriesPattern);
  891.       if(match){
  892.         return parseInt(match[match.length-1]);
  893.       }
  894.       else{
  895.         return null;
  896.       }
  897.     }
  898.     const giftPattern = /送出((?<count>\d+)个)?(?<name>.+)/;
  899.     function extractGift(text){
  900.       var match = text.match(giftPattern);
  901.       if(match){
  902.         return {
  903.           name : match.groups.name,
  904.           count : match.groups.count?parseInt(match.groups.count):1,
  905.         };
  906.       }
  907.       else{
  908.         return null;
  909.       }
  910.     }
  911.     const modalClassNamePattern = /medal-lv-(?<level>\d+)/;
  912.     function extractLevel(text){
  913.       var match = text.match(modalClassNamePattern);
  914.       if(match){
  915.         return parseInt(match.groups.level);
  916.       }
  917.       else{
  918.         return null;
  919.       }
  920.     }
  921.     const commandPattern = /^\/(?<command>[^s]+)\s+(?<text>[^s]+)$/;
  922.     function extractCommand(text){
  923.       var match = text.match(commandPattern);
  924.       if(match){
  925.         return match.groups;
  926.       }
  927.       else{
  928.         return null;
  929.       }
  930.     }
  931.   
  932.   
  933.     var userInfo = {};
  934.   
  935.     var vupInfo = {};
  936.   
  937.     var refreshTimeoutHandler = null;
  938.   
  939.     // 开始
  940.     function start(){
  941.   
  942.     
  943.         // 监听弹幕添加
  944.         var messageContainer = document.querySelector('.live-feed-messages');
  945.         var observer = new MutationObserver(function(mutations, observer){
  946.   
  947.   
  948.           // 遍历改变
  949.           mutations.forEach(function(mutation){
  950.             // 子节点发生变化
  951.             if(mutation.type == 'childList'){
  952.   
  953.               if(refreshTimeoutHandler){
  954.                 window.clearTimeout(refreshTimeoutHandler);
  955.               }
  956.   
  957.               // 3分钟内没接收到信息，刷新
  958.               refreshTimeoutHandler = window.setTimeout(()=>window.location.reload(), 3 * 60 * 1000);
  959.   
  960.               // 遍历新增节点
  961.               mutation.addedNodes.forEach(function(node){
  962.   
  963.                 // 获取用户名元素
  964.                 var userEle = node.querySelector('.nickname');
  965.                 var userName = userEle.innerText;
  966.                 var uid = null;
  967.                 var badgeName = null;
  968.                 var badgeLevel = null;
  969.                 var badgeColor = null;
  970.   
  971.                 // 查看是否有徽章
  972.                 var badgeContainerEle = node.querySelector('.medal-wrapper');
  973.                 if(badgeContainerEle){
  974.   
  975.                   badgeName = badgeContainerEle.querySelector('.medal-name').innerText;
  976.   
  977.                   badgeContainerEle.classList.forEach(function(className){
  978.   
  979.                     if(extractLevel(className)!=null){
  980.                       badgeLevel = extractLevel(className);
  981.                     }
  982.   
  983.                   });
  984.   
  985.                   if(badgeLevel >= 1 && badgeLevel <= 3){
  986.                     badgeColor = 'green';
  987.                   }
  988.                   else if(badgeLevel >= 4 && badgeLevel <= 6){
  989.                     badgeColor = 'blue';
  990.                   }
  991.                   else if(badgeLevel >= 7 && badgeLevel <= 9){
  992.                     badgeColor = 'orange';
  993.                   }
  994.                   else if(badgeLevel >= 10 && badgeLevel <= 12){
  995.                     badgeColor = 'red';
  996.                   }
  997.                   else if(badgeLevel >= 13 && badgeLevel <= 15){
  998.                     badgeColor = 'purple';
  999.                   }
  1000.                   else if(badgeLevel >= 16 && badgeLevel <= 20){
  1001.                     badgeColor = 'black';
  1002.                   }
  1003.   
  1004.   
  1005.                 }
  1006.   
  1007.                 if(userEle && userEle.attributes['data-user-id']){
  1008.                   uid = parseInt(userEle.attributes['data-user-id'].value);
  1009.                 }
  1010.   
  1011.                 var interaction = {
  1012.                   id : uuidv4(),
  1013.                   sendTime : new Date(),
  1014.                 };
  1015.                 // 弹幕
  1016.                 if(node.classList.contains('comment')){
  1017.                   interaction.type = 'danmaku';
  1018.                   interaction.content = _.trimStart(node.querySelector('.comment-text').innerText, '：');
  1019.                 }
  1020.                 // 送礼
  1021.                 else if(node.classList.contains('gift')){
  1022.                   var giftText = userEle.nextElementSibling.innerText;
  1023.                   var gift = extractGift(giftText);
  1024.   
  1025.                   interaction.type = 'gift';
  1026.                   interaction.giftName = gift.name;
  1027.                   interaction.giftCount = gift.count;
  1028.                 }
  1029.                 // 点赞
  1030.                 else if(node.classList.contains('like')){
  1031.                   interaction.type = 'like';
  1032.                 }
  1033.                 // 进入直播间
  1034.                 else if(node.classList.contains('user-enter')){
  1035.                   interaction.type = 'enterroom';
  1036.                 }
  1037.                 // 关注了主播
  1038.                 else if(node.classList.contains('follow')){
  1039.                   interaction.type = 'follow';
  1040.                 }
  1041.                 // 加入守护团
  1042.                 else if(node.classList.contains('join-club')){
  1043.                   interaction.type = 'joinclub';
  1044.                 }
  1045.   
  1046.                 // vup
  1047.                 if(uid in vupInfo){
  1048.                   addBadgeToUser(userEle);
  1049.                 }
  1050.   
  1051.                 if(uid in userInfo){
  1052.                   callbackManager.feed('message', {
  1053.                     uid : uid,
  1054.                     vup : uid in vupInfo,
  1055.                     userName : userName,
  1056.                     badgeName : badgeName,
  1057.                     badgeLevel : badgeLevel,
  1058.                     badgeColor : badgeColor,
  1059.                     photo : userInfo[uid].photo,
  1060.                     interaction : interaction,
  1061.                   });
  1062.   
  1063.                 }
  1064.                 else{
  1065.                   // 获取用户信息
  1066.                   commonRequrest(config.ACFUNLIVE_SERVER + config.URLS.ACFUN_USER.INFO + `?userId=${uid}`, 'get', null, true, function(isSuccess, data){
  1067.   
  1068.                     var photo = null;
  1069.                     if(data){
  1070.                       data = JSON.parse(data);
  1071.                       if(data.result == 0){
  1072.                         photo = data.profile.headUrl;
  1073.                       }
  1074.                     }
  1075.                     userInfo[uid] = {
  1076.                       userName : userName,
  1077.                       photo : photo,
  1078.                     };
  1079.   
  1080.                     callbackManager.feed('message', {
  1081.                       uid : uid,
  1082.                       vup : uid in vupInfo,
  1083.                       userName : userName,
  1084.                       photo : userInfo[uid].photo,
  1085.                       badgeName : badgeName,
  1086.                       badgeLevel : badgeLevel,
  1087.                       badgeColor : badgeColor,
  1088.                       interaction : interaction,
  1089.                     });
  1090.   
  1091.                   });
  1092.                 }
  1093.   
  1094.               });
  1095.             }
  1096.           });
  1097.         });
  1098.         observer.observe(messageContainer, {childList:true});
  1099.   
  1100.     }
  1101.   
  1102.   
  1103.     // 加载Vue实例
  1104.     function loadVue(){
  1105.   
  1106.       var vue = null;
  1107.   
  1108.       // 获取礼物列表
  1109.       var giftList = [];
  1110.       var giftContainerEles = document.querySelectorAll('.item-gift');
  1111.       giftContainerEles.forEach(function(giftContainerEle, giftIndex){
  1112.         var gift = {
  1113.           index : giftIndex,
  1114.           id : giftContainerEle.attributes['data-gift-id'].value,
  1115.           name : giftContainerEle.querySelector('.name').textContent,
  1116.           price : _.parseInt(giftContainerEle.attributes['data-gift-price'].value),
  1117.           img : giftContainerEle.querySelector('img').attributes['src'].value,
  1118.         };
  1119.   
  1120.         // 设置香蕉的价格为0
  1121.         if(gift.name == '香蕉'){
  1122.           gift.price = 0;
  1123.         }
  1124.   
  1125.         giftList.push(gift);
  1126.   
  1127.       });
  1128.   
  1129.       // 无法获取礼物列表
  1130.       if(giftList.length==0){
  1131.         return;
  1132.       }
  1133.   
  1134.       // 将礼物按照AC币排序
  1135.       giftList = _.sortBy(giftList, ['price', 'index']);
  1136.       // 隐藏原有弹幕
  1137.       document.querySelector('.container-live-feed-messages').style.setProperty('display', 'none', 'important');
  1138.   
  1139.   
  1140.       // 添加悬浮菜单
  1141.       // 容器
  1142.       var containerEle = document.querySelector('.container-live-feed .live-feed');
  1143.       // 悬浮菜单元素
  1144.       var menuEle = document.createElement('div');
  1145.   
  1146.       menuEle.className = 'container-live-feed-messages-acfunlive';
  1147.       menuEle.innerHTML = `
  1148.   
  1149.         <div :class="{'live-message-container':true, 'active':mouseOn, 'inactive':!mouseOn, 'live-message-container-horizontal':interactionFormData.direction=='horizontal', 'live-message-container-vertical':interactionFormData.direction!='horizontal'}" :style="backgroundStyle">
  1150.   
  1151.           <template v-for="message in messageData">
  1152.   
  1153.             <!--弹幕-->
  1154.             <template v-if="message.interaction.type=='danmaku' && message.interaction.content">
  1155.               <div class="live-message-popup" :style="danmakuMessageContainerStyle" :key="message.interaction.id">
  1156.                 <div class="live-message-popup-left">
  1157.                   <el-avatar shape="circle" fit="fill" :size="userPhotoSize" :src="message.photo"></el-avatar>
  1158.                 </div>
  1159.                 <div class="live-message-popup-right">
  1160.                   <div class="user-info-container">
  1161.                     <span class="user-info-badge user-info-badge-vup" :style="userBadgeStyle" v-if="message.vup">VUP</span>
  1162.                     <span :style="userBadgeStyle" :class="{'user-info-badge':true,'user-info-badge-black':message.badgeColor=='black','user-info-badge-purple':message.badgeColor=='purple','user-info-badge-red':message.badgeColor=='red','user-info-badge-orange':message.badgeColor=='orange','user-info-badge-blue':message.badgeColor=='blue','user-info-badge-green':message.badgeColor=='green'}" v-if="message.badgeName">LV.{{message.badgeLevel}} {{message.badgeName}}</span>
  1163.                     <span class="user-info-username" :style="userNameMessageStyle">{{message.userName}}</span>
  1164.                   </div>
  1165.                   <div :class="danmakuMessageClass.concat([!lastDanmakuMessage || message.interaction.id == lastDanmakuMessage.interaction.id?'active':'inactive'])" :style="danmakuMessageStyle">
  1166.                     <div class="border-flow-item" :style="borderFlowItemStyle"></div>
  1167.                     <span @click="clickMessage(message)">{{message.interaction.content}}</span>
  1168.                     <div class="live-message-douga" @click="clickMessage(message, true)" v-if="message.interaction.douga">
  1169.                       <el-card  :title="message.interaction.douga.title" :style="danmakuDougaMessageStyle">
  1170.                         <el-row :class="{'douga-info':true, 'article':message.interaction.douga.type == 'article', 'video':['video', 'bangumi'].indexOf(message.interaction.douga.type) != -1}" :style="danmakuDougaContainerStyle">
  1171.   
  1172.                           <template v-if="message.interaction.douga.type == 'video'">
  1173.                             <div class="douga-info-left" :style="danmakuDougaLeftColStyle">
  1174.                               <span class="cover" :style="danmakuDougaCoverStyle">
  1175.                                 <img :src="message.interaction.douga.cover">
  1176.                               </span>
  1177.                             </div>
  1178.                             <div class="douga-info-right" :style="danmakuDougaRightColStyle">
  1179.                               <div class="title-container" :style="danmakuDougaTitleStyle"><span>{{message.interaction.douga.title}}</span></div>
  1180.                               <div class="info" :style="danmakuDougaInfoStyle">
  1181.                                 <p class="up"><span>up主：</span><span>{{message.interaction.douga.userName}}</span></p>
  1182.                                 <p class="play-count" :style="danmakuDougaInfoStyle">播放量：<span>{{message.interaction.douga.playCountText}}</span></p>
  1183.                               </div>
  1184.                             </div>
  1185.                           </template>
  1186.   
  1187.                           <template v-if="message.interaction.douga.type == 'article'">
  1188.                             <div class="title-container" :style="danmakuDougaTitleStyle">
  1189.                               <p class="title">{{message.interaction.douga.title}}</p>
  1190.                               <p class="description" :style="danmakuDougaDescriptionStyle">{{message.interaction.douga.description}}</p>
  1191.                             </div>
  1192.   
  1193.                             <div class="info" :style="danmakuDougaInfoStyle">
  1194.                               <p class="up"><span>up主：</span><span>{{message.interaction.douga.userName}}</span></p>
  1195.                               <p class="play-count" :style="danmakuDougaInfoStyle">访问量：<span>{{message.interaction.douga.playCountText}}</span></p>
  1196.                             </div>
  1197.                           </template>
  1198.   
  1199.                           <template v-if="message.interaction.douga.type == 'bangumi'">
  1200.                             <div class="douga-info-left" :style="danmakuDougaLeftColStyle">
  1201.                               <span class="cover" :style="danmakuDougaCoverStyle">
  1202.                                 <img :src="message.interaction.douga.cover">
  1203.                               </span>
  1204.                             </div>
  1205.                             <div class="douga-info-right" :style="danmakuDougaRightColStyle">
  1206.                               <div class="title-container" :style="danmakuDougaTitleStyle">
  1207.                                 <el-tag effect="dark" type="danger" v-if="message.interaction.douga.acfunOnly">A站独播</el-tag>
  1208.                                 <span>{{message.interaction.douga.title}}</span>
  1209.                               </div>
  1210.                               <div class="info" :style="danmakuDougaInfoStyle">
  1211.                                 <p class="stow-count" :style="danmakuDougaInfoStyle">追番人数：<span>{{message.interaction.douga.stowCountText}}</span></p>
  1212.                                 <p class="play-count" :style="danmakuDougaInfoStyle">播放量：<span>{{message.interaction.douga.playCountText}}</span></p>
  1213.                               </div>
  1214.                             </div>
  1215.                           </template>
  1216.                         </el-row>
  1217.                       </el-card>
  1218.   
  1219.                     </div>
  1220.                   </div>
  1221.   
  1222.                 </div>
  1223.               </div>
  1224.   
  1225.             </template>
  1226.   
  1227.             <!--点赞-->
  1228.             <template v-if="message.interaction.type=='like' && message.interaction.content">
  1229.               <div class="live-message-inline" :style="likeMessageContainerStyle" :key="message.interaction.id">
  1230.                 <span :style="likeMessageStyle">
  1231.                   <span v-if="message.vup">【VUP】</span>
  1232.                   <span class="user-info-username">{{message.userName}}</span>
  1233.                   <span>{{message.interaction.content}}</span>
  1234.                 </span>
  1235.               </div>
  1236.   
  1237.             </template>
  1238.   
  1239.             <!--礼物-->
  1240.             <template v-if="message.interaction.type=='gift' && message.interaction.content">
  1241.               <div class="live-message-popup" :style="giftMessageContainerStyle" :key="message.interaction.id">
  1242.                 <div class="live-message-popup-left">
  1243.                   <el-avatar shape="circle" fit="fill" :size="userPhotoSize" :src="message.photo"></el-avatar>
  1244.                 </div>
  1245.                 <div class="live-message-popup-right">
  1246.                   <div class="user-info-container">
  1247.                     <span :style="userBadgeStyle" class="user-info-badge user-info-badge-vup" v-if="message.vup">VUP</span>
  1248.                     <span :style="userBadgeStyle" :class="{'user-info-badge':true,'user-info-badge-black':message.badgeColor=='black','user-info-badge-purple':message.badgeColor=='purple','user-info-badge-red':message.badgeColor=='red','user-info-badge-orange':message.badgeColor=='orange','user-info-badge-blue':message.badgeColor=='blue','user-info-badge-green':message.badgeColor=='green'}" v-if="message.badgeName">LV.{{message.badgeLevel}} {{message.badgeName}}</span>
  1249.                     <span class="user-info-username" :style="userNameMessageStyle">{{message.userName}}</span>
  1250.                   </div>
  1251.                   <div class="live-message-gift" :style="giftMessageStyle">
  1252.                     <span >{{message.interaction.content}}</span>
  1253.                     <el-avatar shape="square" :size="giftImageSize" fit="fill" :src="giftNameMapper[message.interaction.giftName].img" style="background-color:transparent;vertical-align:bottom;"></el-avatar>
  1254.                     <span :class="{'live-message-gift-count':true, 'scale-anime':message.interaction.doAnime}" v-if="message.interaction.giftCount>0" :style="giftCountStyle">
  1255.                       x{{message.interaction.giftCount}}
  1256.                     </span>
  1257.                   </div>
  1258.                 </div>
  1259.               </div>
  1260.   
  1261.             </template>
  1262.   
  1263.             <!--进入直播间-->
  1264.             <template v-if="message.interaction.type=='enterroom' && message.interaction.content">
  1265.               <div class="live-message-inline" :style="enterroomMessageContainerStyle" :key="message.interaction.id">
  1266.                 <span :style="enterroomMessageStyle">
  1267.                   <span v-if="message.vup">【VUP】</span>
  1268.                   <span class="user-info-username">{{message.userName}}</span>
  1269.                   <span class="live-message-enterroom">{{message.interaction.content}}</span>
  1270.                 </span>
  1271.               </div>
  1272.   
  1273.             </template>
  1274.   
  1275.             <!--关注-->
  1276.             <template v-if="message.interaction.type=='follow' && message.interaction.content">
  1277.               <div class="live-message-inline" :style="followMessageContainerStyle" :key="message.interaction.id">
  1278.                 <span :style="followMessageStyle">
  1279.                   <span v-if="message.vup">【VUP】</span>
  1280.                   <span class="user-info-username">{{message.userName}}</span>
  1281.                   <span class="live-message-follow">{{message.interaction.content}}</span>
  1282.                 </span>
  1283.               </div>
  1284.   
  1285.             </template>
  1286.   
  1287.             <!--加入守护团-->
  1288.             <template v-if="message.interaction.type=='joinclub' && message.interaction.content">
  1289.               <div class="live-message-inline" :style="joinclubMessageContainerStyle" :key="message.interaction.id">
  1290.                 <span :style="joinclubMessageStyle">
  1291.                   <span v-if="message.vup">【VUP】</span>
  1292.                   <span class="user-info-username">{{message.userName}}</span>
  1293.                   <span class="live-message-joinclub">{{message.interaction.content}}</span>
  1294.                 </span>
  1295.               </div>
  1296.   
  1297.             </template>
  1298.   
  1299.           </template>
  1300.   
  1301.   
  1302.         </div>
  1303.   
  1304.         <div :class="{'live-feed-dropmenu':true, 'live-feed-dropmenu-horizontal':interactionFormData.direction=='horizontal','live-feed-dropmenu-vertical':interactionFormData.direction!='horizontal'}">
  1305.           <el-dropdown trigger="click" @command="handleDropdownMenuClick">
  1306.             <span class="el-dropdown-link" style="font-size:32px;">
  1307.               <i class="el-icon-menu"></i>
  1308.             </span>
  1309.             <el-dropdown-menu slot="dropdown">
  1310.               <el-dropdown-item icon="el-icon-edit" command="editInteraction">弹幕编辑</el-dropdown-item>
  1311.               <el-dropdown-item>
  1312.                 <el-dropdown trigger="hover" placement="right-start"  trigger="click" @command="handleDropdownMenuClick">
  1313.                   <span class="el-icon-lollipop">
  1314.                     直播抽奖<i class="el-icon-arrow-down el-icon--right"></i>
  1315.                   </span>
  1316.                   <el-dropdown-menu slot="dropdown">
  1317.                     <el-dropdown-item icon="el-icon-circle-plus" command="newLottery">添加抽奖</el-dropdown-item>
  1318.                     <el-dropdown-item icon="el-icon-info" command="lotteryTable">查看抽奖</el-dropdown-item>
  1319.                     <el-dropdown-item icon="el-icon-download" command="exportLottery">导出名单</el-dropdown-item>
  1320.                   </el-dropdown-menu>
  1321.                 </el-dropdown>
  1322.               </el-dropdown-item>
  1323.               <!-- 
  1324.               <el-dropdown-item>
  1325.                 <el-dropdown trigger="hover" placement="right-start"  trigger="click" @command="handleDropdownMenuClick">
  1326.                   <span class="el-icon-chat-dot-round">
  1327.                     直播竞猜<i class="el-icon-arrow-down el-icon--right"></i>
  1328.                   </span>
  1329.                   <el-dropdown-menu slot="dropdown">
  1330.                     <el-dropdown-item icon="el-icon-circle-plus" command="newGuess">添加竞猜</el-dropdown-item>
  1331.                     <el-dropdown-item icon="el-icon-info" command="guessTable">查看竞猜</el-dropdown-item>
  1332.                     <el-dropdown-item icon="el-icon-download" command="exportGuess">导出名单</el-dropdown-item>
  1333.                   </el-dropdown-menu>
  1334.                 </el-dropdown>
  1335.               </el-dropdown-item>
  1336.               -->
  1337.               <el-dropdown-item icon="el-icon-notebook-1" command="help">帮助文档</el-dropdown-item>
  1338.             </el-dropdown-menu>
  1339.           </el-dropdown>
  1340.   
  1341.           <el-dialog v-dialog-drag title="查看抽奖" :visible.sync="lotteryTableDialogVisible" :modal="false" width="550px" custom-class="lottery-table-dialog" :close-on-click-modal="false">
  1342.             <el-table :data="lotteryTableData" style="width: 100%" class="lottery-table" :row-class-name="lotteryTableRowClassName">
  1343.               <el-table-column prop="name" label="奖品名称" :width="150">
  1344.               </el-table-column>
  1345.               <el-table-column prop="startTimeText" label="开奖时间" :width="100">
  1346.               </el-table-column>
  1347.               <el-table-column label="操作" :width="250">
  1348.                 <template slot-scope="scope">
  1349.                   <el-button type="text" @click="handleLotteryModify(scope.row)">编辑</el-button>
  1350.                   <el-button type="text" @click="handleLotteryCopy(scope.row)">复制</el-button>
  1351.                   <el-button type="text" @click="handleLotteryCandidatesCheck(scope.row)" v-if="scope.row.status == '未开始'">查看候选名单</el-button>
  1352.                   <el-button type="text" @click="handleLotteryWinnersCheck(scope.row)" v-if="scope.row.status == '已结束'">查看中奖名单</el-button>
  1353.                 </template>
  1354.               </el-table-column>
  1355.   
  1356.             </el-table>
  1357.   
  1358.           </el-dialog>
  1359.   
  1360.           <el-dialog v-dialog-drag :title="lotteryFormDialogTitle" :visible.sync="lotteryFormDialogVisible" :modal="false" width="550px" custom-class="lottery-form-dialog" :close-on-click-modal="false">
  1361.             <el-form :model="lotteryFormData" class="lottery-form" ref="form" :rules="lotteryFormRules" @submit.native.prevent  v-loading="lotteryFormData.loading" :element-loading-text="lotteryFormData.loadingText" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
  1362.               <el-form-item label="奖品名称" label-width="130px" prop="name">
  1363.                 <el-input v-model="lotteryFormData.name" autocomplete="off" style="width:100%;"></el-input>
  1364.               </el-form-item>
  1365.               <el-form-item>
  1366.                 <el-col :span="11">
  1367.                   <el-form-item label="抽奖倒计时（秒）" label-width="130px" prop="countdown">
  1368.                     <el-input-number size="medium" v-model="lotteryFormData.countdown" :min="0" controls-position="right" style="width:100%;"></el-input-number>
  1369.                   </el-form-item>
  1370.                 </el-col>
  1371.                 <el-col :span="13">
  1372.                   <el-form-item label="开奖时间" label-width="100px" prop="startTime">
  1373.                     <el-time-picker v-model="lotteryFormData.startTime" :picker-options="timePickerOptions" style="width:100%;">
  1374.                     </el-time-picker>
  1375.                   </el-form-item>
  1376.                 </el-row>
  1377.               </el-form-item>
  1378.               <el-form-item label="互斥抽奖" label-width="130px" prop="mutualLotteryList">
  1379.                 <el-select v-model="lotteryFormData.mutualLotteryList" multiple placeholder="请选择互斥的抽奖" style="width:100%;">
  1380.                   <el-option
  1381.                     :value="lottery.id"
  1382.                     :label="lottery.name"
  1383.                     :key="lottery.id"
  1384.                     v-if="lottery.id != lotteryFormData.id"
  1385.                     v-for="lottery in lotteryTableData"
  1386.                   >
  1387.                   </el-option>
  1388.                 </el-select>
  1389.               </el-form-item>
  1390.               <!--
  1391.               <el-form-item label="抽奖权重" label-width="130px" prop="weight">
  1392.                 <el-switch v-model="lotteryFormData.weight" active-text="加权" inactive-text="等权">
  1393.                 </el-switch>
  1394.               </el-form-item>
  1395.               -->
  1396.   
  1397.               <el-form-item>
  1398.                 <el-col :span="13">
  1399.                   <el-form-item label="牌子名称" label-width="130px" prop="medalName">
  1400.                     <el-input v-model="lotteryFormData.medalName" autocomplete="off" style="width:100%;"></el-input>
  1401.                   </el-form-item>
  1402.                 </el-col>
  1403.                 <el-col :span="11">
  1404.                   <el-form-item label="牌子等级" label-width="130px" prop="medalLevel">
  1405.                     <el-input-number v-model="lotteryFormData.medalLevel" autocomplete="off"  :min="0" controls-position="right" style="width:100%;"></el-input-number>
  1406.                   </el-form-item>
  1407.                 </el-col>
  1408.               </el-form-item>
  1409.   
  1410.               <el-form-item label="抽奖来源" label-width="130px" prop="source">
  1411.                 <el-radio-group v-model="lotteryFormData.source" style="width:100%;">
  1412.                   <el-radio label="livestream">直播间抽奖</el-radio>
  1413.                   <el-radio label="douga">稿件抽奖</el-radio>
  1414.                 </el-radio-group>
  1415.               </el-form-item>
  1416.   
  1417.   
  1418.               <template v-if="lotteryFormData.source == 'livestream'">
  1419.   
  1420.                 <el-form-item label="抽奖参与方式" label-width="130px" prop="joinMethod">
  1421.                   <el-checkbox-group v-model="lotteryFormData.joinMethod" style="width:100%;">
  1422.                     <el-checkbox label="danmaku">弹幕</el-checkbox>
  1423.                     <el-checkbox label="gift">礼物</el-checkbox>
  1424.                     <el-checkbox label="like">点赞</el-checkbox>
  1425.                   </el-checkbox-group>
  1426.                 </el-form-item>
  1427.   
  1428.                 <!-- 弹幕 -->
  1429.                 <template v-if="lotteryFormData.joinMethod.indexOf('danmaku')!=-1">
  1430.                   <el-form-item label="抽奖参与关键词" label-width="130px" prop="joinKeyword">
  1431.                     <el-input v-model="lotteryFormData.joinKeyword" autocomplete="off" style="width:100%;" placeholder="请输入参与抽奖的弹幕关键词"></el-input>
  1432.                   </el-form-item>
  1433.                 </template>
  1434.   
  1435.                 <!-- 礼物 -->
  1436.                 <template v-if="lotteryFormData.joinMethod.indexOf('gift')!=-1">
  1437.                   <el-form-item label="抽奖参与礼物" label-width="130px" prop="joinGiftList">
  1438.                     <el-select v-model="lotteryFormData.joinGiftList" multiple placeholder="请选择礼物" popper-class="gift-selector" style="width:100%;">
  1439.                       <el-option
  1440.                         :label="gift.name"
  1441.                         :value="gift.id"
  1442.                         :key="gift.id"
  1443.                         v-for="gift in giftList"
  1444.                       >
  1445.                         <el-row>
  1446.                           <el-col :span="8">
  1447.                             <el-avatar shape="square" :size="40" fit="fill" :src="gift.img" style="background-color:white;"></el-avatar>
  1448.                           </el-col>
  1449.                           <el-col :span="6" :offset="4">
  1450.                             <span>{{gift.name}}</span>
  1451.                           </el-col>
  1452.                           <el-col :span="6">
  1453.                             <span v-if="gift.price>0">（{{gift.price}}AC币）</span>
  1454.                           </el-col>
  1455.                         </el-row>
  1456.                       </el-option>
  1457.                     </el-select>
  1458.                   </el-form-item>
  1459.                 </template>
  1460.               </template>
  1461.               <template v-else-if="lotteryFormData.source == 'douga'">
  1462.   
  1463.                 <el-form-item label="抽奖稿件类型" label-width="130px" prop="dougaType">
  1464.                   <el-radio-group v-model="lotteryFormData.dougaType" style="width:100%;" @change="refreshDougaList">
  1465.                     <el-radio label="video">视频投稿</el-radio>
  1466.                     <el-radio label="article">文章投稿</el-radio>
  1467.                   </el-radio-group>
  1468.                 </el-form-item>
  1469.   
  1470.                 <!--
  1471.                 <el-form-item label="抽奖参与方式" label-width="130px" prop="joinMethod">
  1472.                   <el-checkbox-group v-model="lotteryFormData.joinMethod" style="width:100%;">
  1473.                     <el-checkbox label="comment">评论</el-checkbox>
  1474.                     <el-checkbox label="subcomment">楼中楼</el-checkbox>
  1475.                     <el-checkbox label="floor">指定楼层</el-checkbox>
  1476.                   </el-checkbox-group>
  1477.                 </el-form-item>
  1478.                  -->
  1479.   
  1480.                 <el-divider>请选取参与抽奖的稿件</el-divider>
  1481.   
  1482.                 <el-row class="douga-list-wrapper">
  1483.                   <el-timeline class="douga-list" v-infinite-scroll="getDougaList" :infinite-scroll-disabled="lotteryFormData.dougaListDisabled">
  1484.                     <el-timeline-item :class="{'douga-list-item':true,'active':lotteryFormData.dougaListActiveIndex == dougaIndex, 'video':lotteryFormData.dougaType == 'video', 'article' : lotteryFormData.dougaType == 'article'}" :timestamp="douga.uploadDateText" placement="top" v-for="(douga, dougaIndex) in lotteryFormData.dougaList" :key="douga.id">
  1485.                       <el-card  :title="douga.title" @click.native="handleDougaListItemClick(dougaIndex)">
  1486.                         <el-row class="douga-info">
  1487.   
  1488.                           <template v-if="lotteryFormData.dougaType == 'video'">
  1489.                             <el-col :span="12" class="douga-info-left">
  1490.                               <span class="cover">
  1491.                                 <img :src="douga.cover" @click.stop="handleDougaListItemDetailClick(dougaIndex)">
  1492.                               </span>
  1493.                             </el-col>
  1494.                             <el-col :span="12"  class="douga-info-right">
  1495.                               <p class="title"><span>{{douga.title}}</span></p>
  1496.                               <p class="play-count">播放量：<span>{{douga.playCountText}}</span></p>
  1497.                             </el-col>
  1498.                           </template>
  1499.   
  1500.                           <template v-if="lotteryFormData.dougaType == 'article'">
  1501.                             <p class="title"><span @click.stop="handleDougaListItemDetailClick(dougaIndex)">{{douga.title}}</span></p>
  1502.                             <p class="play-count">访问量：<span>{{douga.playCountText}}</span></p>
  1503.                           </template>
  1504.   
  1505.                         </el-row>
  1506.                       </el-card>
  1507.                     </el-timeline-item>
  1508.                   </el-timeline>
  1509.   
  1510.                   <p v-if="lotteryFormData.dougaListLoading">...正在加载投稿稿件...</p>
  1511.                   <p v-if="lotteryFormData.dougaListNoMore">加载完毕</p>
  1512.                 </el-row>
  1513.   
  1514.   
  1515.   
  1516.               </template>
  1517.   
  1518.               <el-form-item style="display:flex;justify-content:center;">
  1519.                 <el-button type="primary" @click="handleLotteryFormSubmit">立即创建</el-button>
  1520.               </el-form-item>
  1521.             </el-form>
  1522.           </el-dialog>
  1523.   
  1524.   
  1525.           <el-dialog v-dialog-drag :title="userTableDialogTitle" :visible.sync="userTableDialogVisible" :modal="false" width="550px" custom-class="user-table-dialog" :close-on-click-modal="false">
  1526.             <el-table :data="userTableData" style="width: 100%" class="user-table">
  1527.               <el-table-column prop="userName" label="用户名" :width="300">
  1528.                 <template slot-scope="scope">
  1529.                   <el-avatar shape="circle" fit="fill" size="40" :src="scope.row.photo"></el-avatar>
  1530.                   <span>{{scope.row.userName}}</span>
  1531.                 </template>
  1532.               </el-table-column>
  1533.               <el-table-column prop="uid" label="用户uid" :width="150">
  1534.               </el-table-column>
  1535.   
  1536.   
  1537.             </el-table>
  1538.   
  1539.           </el-dialog>
  1540.   
  1541.           <el-dialog v-dialog-drag :visible.sync="lotteryCountdownDialogVisible" :modal="false" width="550px" custom-class="lottery-countdown-dialog" :close-on-click-modal="false" :show-close="false">
  1542.             <div class="container">
  1543.                <div class="circle">
  1544.                   <svg width="300" viewBox="0 0 220 220" xmlns="http://www.w3.org/2000/svg">
  1545.                      <g transform="translate(110,110)">
  1546.                         <circle r="100" class="e-c-base"/>
  1547.                         <g transform="rotate(-90)">
  1548.                            <circle r="100" class="e-c-progress"/>
  1549.                            <g id="e-pointer">
  1550.                               <circle cx="100" cy="0" r="15" class="e-c-pointer"/>
  1551.                            </g>
  1552.                         </g>
  1553.                      </g>
  1554.                   </svg>
  1555.                </div>
  1556.                <div class="controlls">
  1557.                   <div class="display-remain-time">{{activeLottery.countdownText}}</div>
  1558.                </div>
  1559.             </div>
  1560.           </el-dialog>
  1561.   
  1562.           <el-dialog v-dialog-drag :visible.sync="lotteryStartDialogVisible" :modal="false" width="550px" custom-class="lottery-start-dialog" :close-on-click-modal="false" :destroy-on-close="true" :show-close="false">
  1563.             <el-row v-if="activeLottery!=null && activeLottery.name" style="text-align:center;margin-bottom:20px;">
  1564.               <p style="font-size:30px;font-weight:bold;">{{activeLottery.name}}</p>
  1565.               <p>
  1566.                 <span>已中奖人数：<span style="color:#409EFF;font-weight:bold;">{{activeLottery.winnerCount}}</span>名</span>
  1567.                 <span style="margin-left:20px;">候选人数：<span style="color:#409EFF;font-weight:bold;">{{activeLottery.startCandidates.length}}</span>人</span>
  1568.               </p>
  1569.             </el-row>
  1570.             <el-row class="carousel-container" v-if="activeLottery!=null && activeLottery.name">
  1571.               <el-carousel ref="carousel" type="card" height="200px" indicator-position="none" arrow="never" :autoplay="false">
  1572.                 <el-carousel-item v-for="candidate in activeLottery.startCandidates" :class="candidate.highlight?'highlight':''">
  1573.                     <el-row>
  1574.                       <el-avatar shape="square" :size="120" fit="fill" :src="candidate.photo"></el-avatar>
  1575.                     </el-row>
  1576.                     <el-row>
  1577.                       <span class="nickname" style="cursor:pointer;">{{candidate.userName}}</span>
  1578.                     </el-row>
  1579.                     <el-row>
  1580.                       <span :style="userBadgeStyle" :class="{'user-info-badge':true,'user-info-badge-black':candidate.medalColor=='black','user-info-badge-purple':candidate.medalColor=='purple','user-info-badge-red':candidate.medalColor=='red','user-info-badge-orange':candidate.medalColor=='orange','user-info-badge-blue':candidate.medalColor=='blue','user-info-badge-green':candidate.medalColor=='green'}" v-if="candidate.medalName">LV.{{candidate.medalLevel}} {{candidate.medalName}}</span>
  1581.                     </el-row>
  1582.                 </el-carousel-item>
  1583.               </el-carousel>
  1584.             </el-row>
  1585.             <el-row style="text-align:center;margin-top:20px;" v-if="!activeLottery.rolling && activeLottery.activeIndex!=null && activeLottery.activeIndex!=-1">
  1586.               <el-tag type="warning" effect="dark" v-if="userInfo[activeLottery.startCandidates[activeLottery.activeIndex].uid].hasEnterroom">进入直播间</el-tag>
  1587.               <el-tag type="warning" effect="dark" v-if="userInfo[activeLottery.startCandidates[activeLottery.activeIndex].uid].hasLike">点赞</el-tag>
  1588.               <el-tag type="warning" effect="dark" v-if="userInfo[activeLottery.startCandidates[activeLottery.activeIndex].uid].hasDanmaku">弹幕</el-tag>
  1589.               <el-tag type="warning" effect="dark" v-if="userInfo[activeLottery.startCandidates[activeLottery.activeIndex].uid].hasGift">礼物</el-tag>
  1590.               <el-tag type="warning" effect="dark" v-if="userInfo[activeLottery.startCandidates[activeLottery.activeIndex].uid].hasFollow">关注</el-tag>
  1591.             </el-row>
  1592.             <el-row style="text-align:center;margin-top:20px;">
  1593.               <el-button-group v-if="!activeLottery.rolling">
  1594.                 <el-button type="primary" icon="el-icon-refresh-left" @click="activeLottery.nextFunc(false)">重新抽选</el-button>
  1595.                 <el-button type="primary" icon="el-icon-right" @click="activeLottery.nextFunc(true)">继续抽选</el-button>
  1596.                 <el-button type="primary" icon="el-icon-check" @click="activeLottery.finishFunc()">结束抽选</el-button>
  1597.               <el-button-group>
  1598.             </el-row>
  1599.           </el-dialog>
  1600.   
  1601.           <el-dialog v-dialog-drag title="弹幕预设" :visible.sync="interactionPresetDialogVisible" :modal="false" width="550px" custom-class="interaction-preset-dialog" :close-on-click-modal="false">
  1602.   
  1603.             <el-row style="display:flex;justify-content:end;">
  1604.               <el-button icon="el-icon-circle-plus-outline" type="primary" @click="handleInteractionFormOpen()">新增预设</el-button>
  1605.             </el-row>
  1606.             <!-- 预设 -->
  1607.             <el-table :data="interactionPreset" style="width: 100%" class="interaction-preset-table" border ref="interactionPresetTable" height="200">
  1608.               <el-table-column prop="index" label="序号" min-width="10%">
  1609.               </el-table-column>
  1610.               <el-table-column prop="name" label="名称" min-width="45%">
  1611.               </el-table-column>
  1612.               <el-table-column prop="hotkey" label="热键" min-width="20%">
  1613.               </el-table-column>
  1614.               <el-table-column label="操作" min-width="25%">
  1615.                 <template slot-scope="scope">
  1616.                   <el-button type="text" @click="handleInteractionFormOpen(scope.row)">编辑</el-button>
  1617.                   <el-button type="text" @click="removeInteractionPreset(scope.row)">删除</el-button>
  1618.                 </template>
  1619.               </el-table-column>
  1620.             </el-table>
  1621.           </el-dialog>
  1622.           <el-dialog v-dialog-drag title="弹幕编辑" :visible.sync="interactionFormDialogVisible" :modal="false" width="550px" custom-class="interaction-form-dialog" :close-on-click-modal="false" :destroy-on-close="true">
  1623.             <el-form :model="interactionFormData" class="interaction-form" ref="interactionForm" :rules="interactionFormRules" @submit.native.prevent>
  1624.   
  1625.               <!--
  1626.               <el-form-item label="是否启动" label-width="130px" prop="enable">
  1627.                 <el-switch v-model="interactionFormData.enable" active-text="启动" inactive-text="不启动">
  1628.                 </el-switch>
  1629.               </el-form-item>
  1630.               -->
  1631.   
  1632.               <template v-if="interactionFormData.enable">
  1633.                 <!-- 排版 -->
  1634.                 <!--<el-divider>排版配置</el-divider>
  1635.                 <el-form-item label="排版方向" label-width="130px" prop="direction">
  1636.                   <el-select v-model="interactionFormData.direction" style="width:100%;">
  1637.                     <el-option value="vertical" label="纵版" key="vertical"></el-option>
  1638.                     <el-option value="horizontal" label="横版" key="horizontal"></el-option>
  1639.                   </el-select>
  1640.                 </el-form-item>
  1641.                 <el-form-item label="弹幕/礼物单列显示" label-width="130px" prop="displayNotWrap">
  1642.                   <el-switch v-model="interactionFormData.displayNotWrap" active-text="是" inactive-text="否">
  1643.                   </el-switch>
  1644.                 </el-form-item>-->
  1645.                 <!-- 历史 -->
  1646.                 <!-- <el-divider>互动历史配置</el-divider>
  1647.                 -->
  1648.                 <!-- 全局 -->
  1649.                 <el-divider>全局配置</el-divider>
  1650.                 <el-form-item>
  1651.                   <el-form-item label="预设名称" label-width="130px" prop="name">
  1652.                     <el-input v-model="interactionFormData.name" autocomplete="off" style="width:100%;" placeholder="请输入预设名称"></el-input>
  1653.                   </el-form-item>
  1654.                 </el-form-item>
  1655.                 <el-form-item>
  1656.                   <el-col :span="11">
  1657.                     <el-form-item label="背景颜色" label-width="130px" prop="backgroundColor">
  1658.                       <el-color-picker v-model="interactionFormData.backgroundColor" show-alpha style="width:100%;" :predefine="predefineColors"></el-color-picker>
  1659.                     </el-form-item>
  1660.                   </el-col>
  1661.                 </el-form-item>
  1662.                 <el-form-item label="互动信息保留" label-width="130px" prop="historyMinutes">
  1663.                   <el-input-number size="medium" v-model="interactionFormData.historyMinutes" :min="1" controls-position="right" style="width:30%;"></el-input-number>
  1664.                   <span>分钟</span>
  1665.                 </el-form-item>
  1666.                 <el-form-item label="互动信息保留" label-width="130px" prop="historyCount">
  1667.                   <el-input-number size="medium" v-model="interactionFormData.historyCount" :min="1" controls-position="right" style="width:30%;"></el-input-number>
  1668.                   <span>条</span>
  1669.                 </el-form-item>
  1670.                 <el-form-item style="display:flex;justify-content:center;">
  1671.                   <el-button type="primary" @click="handleInteractionFormInit">重置为默认配置</el-button>
  1672.                 </el-form-item>
  1673.                 <!-- 边框 -->
  1674.                 <el-divider>边框配置</el-divider>
  1675.                 <el-form-item>
  1676.                   <el-col :span="11">
  1677.                     <el-form-item label="边框宽度" label-width="130px" prop="borderWidth">
  1678.                       <el-select v-model="interactionFormData.borderWidth" style="width:100%;">
  1679.                         <el-option value="auto" label="自适应" key="auto"></el-option>
  1680.                         <el-option value="fixed" label="定宽" key="fixed"></el-option>
  1681.                       </el-select>
  1682.                     </el-form-item>
  1683.                   </el-col>
  1684.                   <el-col :span="13">
  1685.                     <el-form-item label="边框形状" label-width="100px" prop="borderShape">
  1686.                       <el-select v-model="interactionFormData.borderShape" style="width:100%;">
  1687.                         <el-option value="rect" label="矩形" key="rect"></el-option>
  1688.                         <el-option value="round" label="圆角矩形" key="round"></el-option>
  1689.                         <el-option value="flow" label="流动矩形" key="flow"></el-option>
  1690.                       </el-select>
  1691.                     </el-form-item>
  1692.                   </el-col>
  1693.                 </el-form-item>
  1694.                 <el-form-item>
  1695.                   <el-col :span="11">
  1696.                     <el-form-item label="边框颜色" label-width="130px" prop="borderColor">
  1697.                       <el-color-picker v-model="interactionFormData.borderColor" show-alpha style="width:100%;" :predefine="predefineColors"></el-color-picker>
  1698.                     </el-form-item>
  1699.                   </el-col>
  1700.                   <el-col :span="13">
  1701.                     <el-form-item label="边框大小" label-width="100px" prop="borderSize">
  1702.                       <el-input-number size="medium" v-model="interactionFormData.borderSize" :min="0" controls-position="right" style="width:100%;"></el-input-number>
  1703.                     </el-form-item>
  1704.                   </el-col>
  1705.                 </el-form-item>
  1706.                 <!-- 用户名 -->
  1707.                 <!-- 字体 -->
  1708.                 <el-divider>字体配置</el-divider>
  1709.                 <el-form-item label="字体名称" label-width="130px" prop="fontFamily">
  1710.                   <el-cascader v-model="interactionFormData.fontFamily" :options="fontOptions" style="width:100%;" @change="handleFontSelectChange">
  1711.                   </elcascader>
  1712.                 </el-form-item>
  1713.                 <!-- 用户名 -->
  1714.                 <el-divider>用户名配置</el-divider>
  1715.                 <el-form-item>
  1716.                   <el-col :span="11">
  1717.                     <el-form-item label="字体颜色" label-width="130px" prop="userNameFontColor">
  1718.                       <el-color-picker v-model="interactionFormData.userNameFontColor" show-alpha style="width:100%;" :predefine="predefineColors"></el-color-picker>
  1719.                     </el-form-item>
  1720.                   </el-col>
  1721.                   <el-col :span="13">
  1722.                     <el-form-item label="字体大小" label-width="100px" prop="userNameFontSize">
  1723.                       <el-input-number size="medium" v-model="interactionFormData.userNameFontSize" :min="0" controls-position="right" style="width:100%;"></el-input-number>
  1724.                     </el-form-item>
  1725.                   </el-row>
  1726.                 </el-form-item>
  1727.                 <el-form-item>
  1728.                   <el-col :span="11">
  1729.                     <el-form-item label="阴影颜色" label-width="130px" prop="userNameFontShadowColor">
  1730.                       <el-color-picker v-model="interactionFormData.userNameFontShadowColor" show-alpha style="width:100%;" :predefine="predefineColors"></el-color-picker>
  1731.                     </el-form-item>
  1732.                   </el-col>
  1733.                   <el-col :span="13">
  1734.                     <el-form-item label="阴影大小" label-width="100px" prop="userNameFontShadowSize">
  1735.                       <el-input-number size="medium" v-model="interactionFormData.userNameFontShadowSize" :min="0" controls-position="right" style="width:100%;"></el-input-number>
  1736.                     </el-form-item>
  1737.                   </el-row>
  1738.                 </el-form-item>
  1739.   
  1740.                 <!-- 弹幕 -->
  1741.                 <el-divider>弹幕信息配置</el-divider>
  1742.                 <el-form-item>
  1743.                   <el-col :span="11">
  1744.                     <el-form-item label="背景颜色" label-width="130px" prop="danmakuBackgroundColor">
  1745.                       <el-color-picker v-model="interactionFormData.danmakuBackgroundColor" show-alpha style="width:100%;" :predefine="predefineColors"></el-color-picker>
  1746.                     </el-form-item>
  1747.                   </el-col>
  1748.                   <el-col :span="13">
  1749.                     <el-form-item label="渐变为" label-width="100px" prop="danmakuBackgroundGradientColor">
  1750.                       <el-color-picker v-model="interactionFormData.danmakuBackgroundGradientColor" show-alpha style="width:100%;" :predefine="predefineColors"></el-color-picker>
  1751.                     </el-form-item>
  1752.                   </el-col>
  1753.                 </el-form-item>
  1754.                 <el-form-item>
  1755.                   <el-col :span="11">
  1756.                     <el-form-item label="字体颜色" label-width="130px" prop="danmakuFontColor">
  1757.                       <el-color-picker v-model="interactionFormData.danmakuFontColor" show-alpha style="width:100%;" :predefine="predefineColors"></el-color-picker>
  1758.                     </el-form-item>
  1759.                   </el-col>
  1760.                   <el-col :span="13">
  1761.                     <el-form-item label="字体大小" label-width="100px" prop="danmakuFontSize">
  1762.                       <el-input-number size="medium" v-model="interactionFormData.danmakuFontSize" :min="0" controls-position="right" style="width:100%;"></el-input-number>
  1763.                     </el-form-item>
  1764.                   </el-row>
  1765.                 </el-form-item>
  1766.                 <el-form-item>
  1767.                   <el-col :span="11">
  1768.                     <el-form-item label="阴影颜色" label-width="130px" prop="danmakuFontShadowColor">
  1769.                       <el-color-picker v-model="interactionFormData.danmakuFontShadowColor" show-alpha style="width:100%;" :predefine="predefineColors"></el-color-picker>
  1770.                     </el-form-item>
  1771.                   </el-col>
  1772.                   <el-col :span="13">
  1773.                     <el-form-item label="阴影大小" label-width="100px" prop="danmakuFontShadowSize">
  1774.                       <el-input-number size="medium" v-model="interactionFormData.danmakuFontShadowSize" :min="0" controls-position="right" style="width:100%;"></el-input-number>
  1775.                     </el-form-item>
  1776.                   </el-row>
  1777.                 </el-form-item>
  1778.                 <el-form-item>
  1779.                   <el-col :span="11">
  1780.                     <el-form-item label="稿件背景颜色" label-width="130px" prop="danmakuDougaBackgroundColor">
  1781.                       <el-color-picker v-model="interactionFormData.danmakuDougaBackgroundColor" show-alpha style="width:100%;" :predefine="predefineColors"></el-color-picker>
  1782.                     </el-form-item>
  1783.                   </el-col>
  1784.                 </el-form-item>
  1785.                 <el-form-item style="display:flex;justify-content:center;">
  1786.                   <el-button type="primary" @click="pushTestDanmakuMessage">测试一下</el-button>
  1787.                 </el-form-item>
  1788.   
  1789.                 <!-- 礼物 -->
  1790.                 <el-divider>礼物信息配置</el-divider>
  1791.                 <el-form-item>
  1792.                   <el-col :span="11">
  1793.                     <el-form-item label="背景颜色" label-width="130px" prop="giftBackgroundColor">
  1794.                       <el-color-picker v-model="interactionFormData.giftBackgroundColor" show-alpha style="width:100%;" :predefine="predefineColors"></el-color-picker>
  1795.                     </el-form-item>
  1796.                   </el-col>
  1797.                   <el-col :span="13">
  1798.                     <el-form-item label="渐变为" label-width="100px" prop="giftBackgroundGradientColor">
  1799.                       <el-color-picker v-model="interactionFormData.giftBackgroundGradientColor" show-alpha style="width:100%;" :predefine="predefineColors"></el-color-picker>
  1800.                     </el-form-item>
  1801.                   </el-col>
  1802.                 </el-form-item>
  1803.                 <el-form-item label="礼物信息" label-width="130px" prop="giftFormat">
  1804.                   <el-input v-model="interactionFormData.giftFormat" autocomplete="off" style="width:100%;" placeholder="请输入参与抽奖的弹幕关键词"></el-input>
  1805.                 </el-form-item>
  1806.                 <el-form-item>
  1807.                   <el-col :span="11">
  1808.                     <el-form-item label="字体颜色" label-width="130px" prop="giftFontColor">
  1809.                       <el-color-picker v-model="interactionFormData.giftFontColor" show-alpha style="width:100%;" :predefine="predefineColors"></el-color-picker>
  1810.                     </el-form-item>
  1811.                   </el-col>
  1812.                   <el-col :span="13">
  1813.                     <el-form-item label="字体大小" label-width="100px" prop="giftFontSize">
  1814.                       <el-input-number size="medium" v-model="interactionFormData.giftFontSize" :min="0" controls-position="right" style="width:100%;"></el-input-number>
  1815.                     </el-form-item>
  1816.                   </el-row>
  1817.                 </el-form-item>
  1818.                 <el-form-item>
  1819.                   <el-col :span="11">
  1820.                     <el-form-item label="阴影颜色" label-width="130px" prop="giftFontShadowColor">
  1821.                       <el-color-picker v-model="interactionFormData.giftFontShadowColor" show-alpha style="width:100%;" :predefine="predefineColors"></el-color-picker>
  1822.                     </el-form-item>
  1823.                   </el-col>
  1824.                   <el-col :span="13">
  1825.                     <el-form-item label="阴影大小" label-width="100px" prop="giftFontShadowSize">
  1826.                       <el-input-number size="medium" v-model="interactionFormData.giftFontShadowSize" :min="0" controls-position="right" style="width:100%;"></el-input-number>
  1827.                     </el-form-item>
  1828.                   </el-row>
  1829.                 </el-form-item>
  1830.                 <el-form-item style="display:flex;justify-content:center;">
  1831.                   <el-button type="primary" @click="pushTestGiftMessage">测试一下</el-button>
  1832.                 </el-form-item>
  1833.   
  1834.                 <!-- 点赞 -->
  1835.                 <el-divider>点赞信息配置</el-divider>
  1836.                 <el-form-item label="点赞信息" label-width="130px" prop="likeFormat">
  1837.                   <el-input v-model="interactionFormData.likeFormat" autocomplete="off" style="width:100%;" placeholder="请输入参与抽奖的弹幕关键词"></el-input>
  1838.                 </el-form-item>
  1839.                 <el-form-item>
  1840.                   <el-col :span="11">
  1841.                     <el-form-item label="字体颜色" label-width="130px" prop="likeFontColor">
  1842.                       <el-color-picker v-model="interactionFormData.likeFontColor" show-alpha style="width:100%;" :predefine="predefineColors"></el-color-picker>
  1843.                     </el-form-item>
  1844.                   </el-col>
  1845.                   <el-col :span="13">
  1846.                     <el-form-item label="字体大小" label-width="100px" prop="likeFontSize">
  1847.                       <el-input-number size="medium" v-model="interactionFormData.likeFontSize" :min="0" controls-position="right" style="width:100%;"></el-input-number>
  1848.                     </el-form-item>
  1849.                   </el-row>
  1850.                 </el-form-item>
  1851.                 <el-form-item>
  1852.                   <el-col :span="11">
  1853.                     <el-form-item label="阴影颜色" label-width="130px" prop="likeFontShadowColor">
  1854.                       <el-color-picker v-model="interactionFormData.likeFontShadowColor" show-alpha style="width:100%;" :predefine="predefineColors"></el-color-picker>
  1855.                     </el-form-item>
  1856.                   </el-col>
  1857.                   <el-col :span="13">
  1858.                     <el-form-item label="阴影大小" label-width="100px" prop="likeFontShadowSize">
  1859.                       <el-input-number size="medium" v-model="interactionFormData.likeFontShadowSize" :min="0" controls-position="right" style="width:100%;"></el-input-number>
  1860.                     </el-form-item>
  1861.                   </el-row>
  1862.                 </el-form-item>
  1863.                 <el-form-item style="display:flex;justify-content:center;">
  1864.                   <el-button type="primary" @click="pushTestLikeMessage">测试一下</el-button>
  1865.                 </el-form-item>
  1866.   
  1867.   
  1868.                 <!-- 进入直播间 -->
  1869.                 <el-divider>进入直播间信息配置</el-divider>
  1870.                 <el-form-item label="进入直播间信息" label-width="130px" prop="enterroomFormat">
  1871.                   <el-input v-model="interactionFormData.enterroomFormat" autocomplete="off" style="width:100%;" placeholder="请输入参与抽奖的弹幕关键词"></el-input>
  1872.                 </el-form-item>
  1873.                 <el-form-item>
  1874.                   <el-col :span="11">
  1875.                     <el-form-item label="字体颜色" label-width="130px" prop="enterroomFontColor">
  1876.                       <el-color-picker v-model="interactionFormData.enterroomFontColor" show-alpha style="width:100%;" :predefine="predefineColors"></el-color-picker>
  1877.                     </el-form-item>
  1878.                   </el-col>
  1879.                   <el-col :span="13">
  1880.                     <el-form-item label="字体大小" label-width="100px" prop="enterroomFontSize">
  1881.                       <el-input-number size="medium" v-model="interactionFormData.enterroomFontSize" :min="0" controls-position="right" style="width:100%;"></el-input-number>
  1882.                     </el-form-item>
  1883.                   </el-row>
  1884.                 </el-form-item>
  1885.                 <el-form-item>
  1886.                   <el-col :span="11">
  1887.                     <el-form-item label="阴影颜色" label-width="130px" prop="enterroomFontShadowColor">
  1888.                       <el-color-picker v-model="interactionFormData.enterroomFontShadowColor" show-alpha style="width:100%;" :predefine="predefineColors"></el-color-picker>
  1889.                     </el-form-item>
  1890.                   </el-col>
  1891.                   <el-col :span="13">
  1892.                     <el-form-item label="阴影大小" label-width="100px" prop="enterroomFontShadowSize">
  1893.                       <el-input-number size="medium" v-model="interactionFormData.enterroomFontShadowSize" :min="0" controls-position="right" style="width:100%;"></el-input-number>
  1894.                     </el-form-item>
  1895.                   </el-row>
  1896.                 </el-form-item>
  1897.                 <el-form-item style="display:flex;justify-content:center;">
  1898.                   <el-button type="primary" @click="pushTestEnterRoomMessage">测试一下</el-button>
  1899.                 </el-form-item>
  1900.   
  1901.                 <!-- 关注 -->
  1902.                 <el-divider>关注信息配置</el-divider>
  1903.                 <el-form-item label="关注信息" label-width="130px" prop="followFormat">
  1904.                   <el-input v-model="interactionFormData.followFormat" autocomplete="off" style="width:100%;" placeholder="请输入参与抽奖的弹幕关键词"></el-input>
  1905.                 </el-form-item>
  1906.                 <el-form-item>
  1907.                   <el-col :span="11">
  1908.                     <el-form-item label="字体颜色" label-width="130px" prop="followFontColor">
  1909.                       <el-color-picker v-model="interactionFormData.followFontColor" show-alpha style="width:100%;" :predefine="predefineColors"></el-color-picker>
  1910.                     </el-form-item>
  1911.                   </el-col>
  1912.                   <el-col :span="13">
  1913.                     <el-form-item label="字体大小" label-width="100px" prop="followFontSize">
  1914.                       <el-input-number size="medium" v-model="interactionFormData.followFontSize" :min="0" controls-position="right" style="width:100%;"></el-input-number>
  1915.                     </el-form-item>
  1916.                   </el-row>
  1917.                 </el-form-item>
  1918.                 <el-form-item>
  1919.                   <el-col :span="11">
  1920.                     <el-form-item label="阴影颜色" label-width="130px" prop="followFontShadowColor">
  1921.                       <el-color-picker v-model="interactionFormData.followFontShadowColor" show-alpha style="width:100%;" :predefine="predefineColors"></el-color-picker>
  1922.                     </el-form-item>
  1923.                   </el-col>
  1924.                   <el-col :span="13">
  1925.                     <el-form-item label="阴影大小" label-width="100px" prop="followFontShadowSize">
  1926.                       <el-input-number size="medium" v-model="interactionFormData.followFontShadowSize" :min="0" controls-position="right" style="width:100%;"></el-input-number>
  1927.                     </el-form-item>
  1928.                   </el-row>
  1929.                 </el-form-item>
  1930.                 <el-form-item style="display:flex;justify-content:center;">
  1931.                   <el-button type="primary" @click="pushTestFollowMessage">测试一下</el-button>
  1932.                 </el-form-item>
  1933.   
  1934.                 <!-- 加入守护团 -->
  1935.                 <el-divider>加入守护团信息配置</el-divider>
  1936.                 <el-form-item label="加入守护团信息" label-width="130px" prop="joinclubFormat">
  1937.                   <el-input v-model="interactionFormData.joinclubFormat" autocomplete="off" style="width:100%;" placeholder="请输入参与抽奖的弹幕关键词"></el-input>
  1938.                 </el-form-item>
  1939.                 <el-form-item>
  1940.                   <el-col :span="11">
  1941.                     <el-form-item label="字体颜色" label-width="130px" prop="joinclubFontColor">
  1942.                       <el-color-picker v-model="interactionFormData.joinclubFontColor" show-alpha style="width:100%;" :predefine="predefineColors"></el-color-picker>
  1943.                     </el-form-item>
  1944.                   </el-col>
  1945.                   <el-col :span="13">
  1946.                     <el-form-item label="字体大小" label-width="100px" prop="joinclubFontSize">
  1947.                       <el-input-number size="medium" v-model="interactionFormData.joinclubFontSize" :min="0" controls-position="right" style="width:100%;"></el-input-number>
  1948.                     </el-form-item>
  1949.                   </el-row>
  1950.                 </el-form-item>
  1951.                 <el-form-item>
  1952.                   <el-col :span="11">
  1953.                     <el-form-item label="阴影颜色" label-width="130px" prop="joinclubFontShadowColor">
  1954.                       <el-color-picker v-model="interactionFormData.joinclubFontShadowColor" show-alpha style="width:100%;" :predefine="predefineColors"></el-color-picker>
  1955.                     </el-form-item>
  1956.                   </el-col>
  1957.                   <el-col :span="13">
  1958.                     <el-form-item label="阴影大小" label-width="100px" prop="joinclubFontShadowSize">
  1959.                       <el-input-number size="medium" v-model="interactionFormData.joinclubFontShadowSize" :min="0" controls-position="right" style="width:100%;"></el-input-number>
  1960.                     </el-form-item>
  1961.                   </el-row>
  1962.                 </el-form-item>
  1963.                 <el-form-item style="display:flex;justify-content:center;">
  1964.                   <el-button type="primary" @click="pushTestJoinClubMessage">测试一下</el-button>
  1965.                 </el-form-item>
  1966.               </template>
  1967.   
  1968.   
  1969.               <el-form-item style="display:flex;justify-content:center;">
  1970.                 <el-button type="primary" @click="handleInteractionFormSubmit">提交</el-button>
  1971.               </el-form-item>
  1972.             </el-form>
  1973.           </el-dialog>
  1974.   
  1975.   
  1976.           <el-dialog v-dialog-drag title="添加竞猜" :visible.sync="guessFormDialogVisible" :modal="false" width="550px" custom-class="guess-form-dialog" :close-on-click-modal="false">
  1977.             <el-form :model="guessFormData" class="guess-form" ref="form" :rules="guessFormRules" @submit.native.prevent>
  1978.               <el-form-item label="竞猜标题" label-width="150px" prop="title">
  1979.                 <el-input v-model="guessFormData.title" autocomplete="off" style="width:100%;"></el-input>
  1980.               </el-form-item>
  1981.               <el-form-item label="竞猜问题挑选方式" label-width="150px" prop="chooseWay">
  1982.                 <el-radio-group v-model="guessFormData.chooseWay" style="width:100%;">
  1983.                   <el-radio label="manual">手动挑选</el-radio>
  1984.                   <el-radio label="random">随机挑选</el-radio>
  1985.                 </el-radio-group>
  1986.               </el-form-item>
  1987.               <el-form-item label="竞猜问题挑选倒计时" label-width="150px" prop="countdown">
  1988.                 <el-input-number size="medium" v-model="guessFormData.countdown" :min="0" controls-position="right" style="width:50%;"></el-input-number><span>（秒，0表示不做限制）</span>
  1989.               </el-form-item>
  1990.               <el-form-item label="总共可竞猜次数" label-width="150px" prop="maxGuess">
  1991.                 <el-input-number size="medium" v-model="guessFormData.maxGuess" :min="0" controls-position="right" style="width:50%;"></el-input-number><span>（0表示不做限制）</span>
  1992.               </el-form-item>
  1993.               <el-form-item label="每个用户可竞猜次数" label-width="150px" prop="maxGuessPerUser">
  1994.                 <el-input-number size="medium" v-model="guessFormData.maxGuessPerUser" :min="0" controls-position="right" style="width:50%;"></el-input-number><span>（0表示不做限制）</span>
  1995.               </el-form-item>
  1996.               <el-form-item label="总共可狙击次数" label-width="150px" prop="maxDirectGuess">
  1997.                 <el-input-number size="medium" v-model="guessFormData.maxDirectGuess" :min="0" controls-position="right" style="width:50%;"></el-input-number><span>（0表示不做限制）</span>
  1998.               </el-form-item>
  1999.               <el-form-item label="每个用户可狙击次数" label-width="150px" prop="maxDirectGuessPerUser">
  2000.                 <el-input-number size="medium" v-model="guessFormData.maxDirectGuessPerUser" :min="0" controls-position="right" style="width:50%;"></el-input-number><span>（0表示不做限制）</span>
  2001.               </el-form-item>
  2002.   
  2003.               <el-form-item style="display:flex;justify-content:center;">
  2004.                 <el-button type="primary" @click="handleGuessFormSubmit">立即创建</el-button>
  2005.               </el-form-item>
  2006.             </el-form>
  2007.           </el-dialog>
  2008.   
  2009.           <el-dialog ref="guessStartDialog" v-dialog-drag title="竞猜详情" :visible.sync="guessStartDialogVisible" :modal="false" width="1000px" custom-class="guess-start-dialog" :close-on-click-modal="false" @closed="handleGuessStartDialogClose">
  2010.             <template v-if="activeGuess">
  2011.               <el-row>
  2012.                 <span>{{activeGuess.displayDirectGuess?'狙击':'竞猜'}}问题列表</span>
  2013.                 <el-button type="primary" @click="handleGuessDanmakuSubmit" size="small" v-if="activeGuess.status == '进行中' && (activeGuess.maxGuess==0 || activeGuess.maxGuess > activeGuess.guessList.length)">开始下一个问题</el-button>
  2014.                 <el-button type="primary" @click="activeGuess.displayDirectGuess = !activeGuess.displayDirectGuess" size="small">{{activeGuess.displayDirectGuess?'隐藏狙击问题':'显示狙击问题'}}</el-button>
  2015.                 <el-button type="primary" @click="activeGuess.onlyDisplayMatch = !activeGuess.onlyDisplayMatch" size="small">{{activeGuess.onlyDisplayMatch?'显示未命中问题':'隐藏未命中问题'}}</el-button>
  2016.               </el-row>
  2017.               <el-table :data="activeGuessGuessListData" style="width: 100%" class="guess-list-table" border ref="guessListTable" height="330">
  2018.                 <el-table-column prop="index" label="序号" min-width="5%">
  2019.                 </el-table-column>
  2020.                 <el-table-column prop="userName" label="用户" min-width="25%">
  2021.                   <template slot-scope="scope">
  2022.                     <el-avatar shape="circle" fit="fill" size="40" :src="scope.row.photo"></el-avatar>
  2023.                     <span>{{scope.row.userName}}</span>
  2024.                   </template>
  2025.                 </el-table-column>
  2026.                 <el-table-column prop="guess" label="问题" min-width="60%">
  2027.                 </el-table-column>
  2028.                 <el-table-column prop="isValid" label="是否命中" min-width="10%">
  2029.                   <template slot-scope="scope">
  2030.                     <i class="el-icon-check" v-if="scope.row.isValid==true" style="font-size:50px;color:#409EFF;"></i>
  2031.                     <i class="el-icon-close" v-if="scope.row.isValid==false" style="font-size:50px;color:#F56C6C;"></i>
  2032.                   </template>
  2033.                 </el-table-column>
  2034.               </el-table>
  2035.             </template>
  2036.           </el-dialog>
  2037.   
  2038.           <el-dialog ref="guessDanmakuDialog" v-dialog-drag :visible.sync="guessDanmakuDialogVisible" :modal="false" width="550px" custom-class="guess-danmaku-dialog" :close-on-click-modal="false" :destroy-on-close="true" @closed="handleGuessDanmakuDialogClose">
  2039.             <template slot="title">
  2040.               <el-row type="flex">
  2041.                 <span class="el-dialog__title">弹幕竞猜</span>
  2042.                 <span style="font-size:16px;color:#303133" v-show="activeGuess && activeGuess.chooseWay == 'random'">
  2043.                   <span>（倒计时</span>
  2044.                   <span style="background-color:#66b1ff;color:white;border-radius:5px;font-weight:bold;" id="guess-danmaku-countdown-text"></span>
  2045.                   <span>）</span>
  2046.                 </span>
  2047.   
  2048.               </el-row>
  2049.             </template>
  2050.             <el-row class="guess-danmaku-container">
  2051.             </el-row>
  2052.           </el-dialog>
  2053.   
  2054.           <el-dialog v-dialog-drag title="查看竞猜" :visible.sync="guessTableDialogVisible" :modal="false" width="1000px" custom-class="guess-table-dialog" :close-on-click-modal="false">
  2055.             <el-table :data="guessTableData" style="width: 100%" class="guess-table" >
  2056.               <el-table-column prop="title" label="竞猜标题" min-width="50%">
  2057.               </el-table-column>
  2058.               <el-table-column prop="status" label="状态" min-width="10%">
  2059.               </el-table-column>
  2060.               <el-table-column prop="winner" label="狙击成功用户" min-width="30%">
  2061.                 <template slot-scope="scope">
  2062.                   <template v-if="scope.row.winner">
  2063.                     <el-avatar shape="circle" fit="fill" size="40" :src="scope.row.winner.photo"></el-avatar>
  2064.                     <span>{{scope.row.winner.userName}}</span>
  2065.                   </template>
  2066.                   <span v-else></span>
  2067.                 </template>
  2068.               </el-table-column>
  2069.               <el-table-column label="操作" min-width="10%">
  2070.                 <template slot-scope="scope">
  2071.                   <el-button type="text" @click="openGuessStartDialog(scope.row)">进入竞猜</el-button>
  2072.                 </template>
  2073.               </el-table-column>
  2074.   
  2075.             </el-table>
  2076.   
  2077.           </el-dialog>
  2078.   
  2079.   
  2080.           <div id="douga-result" style="display:none;"></div>
  2081.         </div>
  2082.   
  2083.   
  2084.   
  2085.       `;
  2086.       containerEle.append(menuEle);
  2087.   
  2088.       // 对话框拖动指令
  2089.       Vue.directive('dialog-drag', function(el, binding, vnode, oldVnode) {
  2090.   
  2091.         // 弹框可拉伸最小宽高
  2092.         const minWidth = 400
  2093.         const minHeight = 300
  2094.   
  2095.         // 初始非全屏
  2096.         let isFullScreen = false
  2097.   
  2098.         // 当前顶部高度
  2099.         let nowMarginTop = 0
  2100.   
  2101.         // 获取弹框头部（这部分可双击全屏）
  2102.         const dialogHeaderEl = el.querySelector('.el-dialog__header')
  2103.   
  2104.         // 弹窗
  2105.         const dragDom = el.querySelector('.el-dialog')
  2106.   
  2107.         // 给弹窗加上overflow auto；不然缩小时框内的标签可能超出dialog；
  2108.         dragDom.style.overflow = 'hidden'
  2109.   
  2110.         // 清除选择头部文字效果
  2111.         // dialogHeaderEl.onselectstart = new Function("return false");
  2112.   
  2113.         // 头部加上可拖动cursor
  2114.         dialogHeaderEl.style.cursor = 'move'
  2115.   
  2116.         // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
  2117.         const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)
  2118.         const moveDown = e => {
  2119.           // 鼠标按下，计算当前元素距离可视区的距离
  2120.           const disX = e.clientX - dialogHeaderEl.offsetLeft
  2121.           const disY = e.clientY - dialogHeaderEl.offsetTop
  2122.   
  2123.           // 获取到的值带px 正则匹配替换
  2124.           let styL, styT
  2125.   
  2126.           // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
  2127.   
  2128.           if (sty.left.includes('%')) {
  2129.             styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100)
  2130.             styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100)
  2131.           } else {
  2132.             styL = +sty.left.replace(/\px/g, '')
  2133.             styT = +sty.top.replace(/\px/g, '')
  2134.           }
  2135.   
  2136.           document.onmousemove = function(e) {
  2137.             // 通过事件委托，计算移动的距离
  2138.             const l = e.clientX - disX
  2139.             const t = e.clientY - disY
  2140.   
  2141.             // 移动当前元素
  2142.             dragDom.style.left = `${l + styL}px`
  2143.             dragDom.style.top = `${t + styT}px`
  2144.   
  2145.             // 将此时的位置传出去
  2146.             // binding.value({x:e.pageX,y:e.pageY})
  2147.           }
  2148.   
  2149.           document.onmouseup = function(e) {
  2150.             document.onmousemove = null
  2151.             document.onmouseup = null
  2152.           }
  2153.         }
  2154.   
  2155.         dialogHeaderEl.onmousedown = moveDown
  2156.         // 当前宽高
  2157.         let nowWidth = 0
  2158.         // let nowHight = 0
  2159.         // 双击头部全屏效果
  2160.         dialogHeaderEl.ondblclick = e => {
  2161.           if (isFullScreen === false) {
  2162.             // nowHight = dragDom.clientHeight
  2163.             nowWidth = dragDom.clientWidth
  2164.             nowMarginTop = dragDom.style.marginTop
  2165.   
  2166.             dragDom.style.left = 0
  2167.             dragDom.style.top = 0
  2168.             dragDom.style.height = '100VH'
  2169.             dragDom.style.width = '100VW'
  2170.             dragDom.style.marginTop = 0
  2171.   
  2172.             isFullScreen = true
  2173.   
  2174.             dialogHeaderEl.style.cursor = 'initial'
  2175.             dialogHeaderEl.onmousedown = null
  2176.           } else {
  2177.             dragDom.style.height = 'auto'
  2178.             dragDom.style.width = nowWidth + 'px'
  2179.             dragDom.style.marginTop = nowMarginTop
  2180.   
  2181.             isFullScreen = false
  2182.   
  2183.             dialogHeaderEl.style.cursor = 'move'
  2184.             dialogHeaderEl.onmousedown = moveDown
  2185.           }
  2186.         }
  2187.   
  2188.         dragDom.onmousemove = function(e) {
  2189.           // let moveE = e
  2190.   
  2191.           if (
  2192.             e.clientX > dragDom.offsetLeft + dragDom.clientWidth - 10 ||
  2193.             dragDom.offsetLeft + 10 > e.clientX
  2194.           ) {
  2195.             dragDom.style.cursor = 'w-resize'
  2196.           } else if (
  2197.             el.scrollTop + e.clientY >
  2198.             dragDom.offsetTop + dragDom.clientHeight - 10
  2199.           ) {
  2200.             dragDom.style.cursor = 's-resize'
  2201.           } else {
  2202.             dragDom.style.cursor = 'default'
  2203.   
  2204.             dragDom.onmousedown = null
  2205.           }
  2206.   
  2207.           dragDom.onmousedown = e => {
  2208.             const clientX = e.clientX
  2209.             const clientY = e.clientY
  2210.             const elW = dragDom.clientWidth
  2211.             const elH = dragDom.clientHeight
  2212.             const EloffsetLeft = dragDom.offsetLeft
  2213.             const EloffsetTop = dragDom.offsetTop
  2214.   
  2215.             dragDom.style.userSelect = 'none'
  2216.   
  2217.             const ELscrollTop = el.scrollTop
  2218.   
  2219.             // 判断点击的位置是不是为头部
  2220.             if (
  2221.               clientX > EloffsetLeft &&
  2222.               clientX < EloffsetLeft + elW &&
  2223.               clientY > EloffsetTop &&
  2224.               clientY < EloffsetTop + 100
  2225.             ) {
  2226.               // 如果是头部在此就不做任何动作，以上有绑定dialogHeaderEl.onmousedown = moveDown;
  2227.             } else {
  2228.               document.onmousemove = function(e) {
  2229.                 // 移动时禁用默认事件
  2230.                 e.preventDefault()
  2231.   
  2232.                 // 左侧鼠标拖拽位置
  2233.                 if (clientX > EloffsetLeft && clientX < EloffsetLeft + 10) {
  2234.                   // 往左拖拽
  2235.                   if (clientX > e.clientX) {
  2236.                     dragDom.style.width = elW + (clientX - e.clientX) * 2 + 'px'
  2237.                   }
  2238.   
  2239.                   // 往右拖拽
  2240.                   if (clientX < e.clientX) {
  2241.                     if (dragDom.clientWidth < minWidth) {
  2242.                     } else {
  2243.                       dragDom.style.width = elW - (e.clientX - clientX) * 2 + 'px'
  2244.                     }
  2245.                   }
  2246.                 }
  2247.   
  2248.                 // 右侧鼠标拖拽位置
  2249.                 if (
  2250.                   clientX > EloffsetLeft + elW - 10 &&
  2251.                   clientX < EloffsetLeft + elW
  2252.                 ) {
  2253.                   // 往左拖拽
  2254.                   if (clientX > e.clientX) {
  2255.                     if (dragDom.clientWidth < minWidth) {
  2256.                     } else {
  2257.                       dragDom.style.width = elW - (clientX - e.clientX) * 2 + 'px'
  2258.                     }
  2259.                   }
  2260.   
  2261.                   // 往右拖拽
  2262.                   if (clientX < e.clientX) {
  2263.                     dragDom.style.width = elW + (e.clientX - clientX) * 2 + 'px'
  2264.                   }
  2265.                 }
  2266.   
  2267.                 // 底部鼠标拖拽位置
  2268.                 if (
  2269.                   ELscrollTop + clientY > EloffsetTop + elH - 20 &&
  2270.                   ELscrollTop + clientY < EloffsetTop + elH
  2271.                 ) {
  2272.                   // 往上拖拽
  2273.                   if (clientY > e.clientY) {
  2274.                     if (dragDom.clientHeight < minHeight) {
  2275.                     } else {
  2276.                       dragDom.style.height = elH - (clientY - e.clientY) * 2 + 'px'
  2277.                     }
  2278.                   }
  2279.   
  2280.                   // 往下拖拽
  2281.                   if (clientY < e.clientY) {
  2282.                     dragDom.style.height = elH + (e.clientY - clientY) * 2 + 'px'
  2283.                   }
  2284.                 }
  2285.               }
  2286.   
  2287.               // 拉伸结束
  2288.               document.onmouseup = function(e) {
  2289.                 document.onmousemove = null
  2290.   
  2291.                 document.onmouseup = null
  2292.   
  2293.                 vue.onDialogResize(dragDom);
  2294.               }
  2295.             }
  2296.           }
  2297.         }
  2298.       });
  2299.   
  2300.   
  2301.       Vue.use(ELEMENT);
  2302.       Vue.prototype.$message = ELEMENT.Message;
  2303.   
  2304.       if(!document.querySelector('.container-live-feed-messages-acfunlive')){
  2305.         return false;
  2306.       }
  2307.   
  2308.       // 初始化实例
  2309.       vue = new Vue({
  2310.           el : '.container-live-feed-messages-acfunlive',
  2311.           components : {
  2312.           },
  2313.           data : function(){
  2314.   
  2315.             var vue = this;
  2316.   
  2317.             var lotteryFormDataDefault = {
  2318.               joinMethod : [],
  2319.               weight : false,
  2320.               joinGiftList : [],
  2321.               mutualLotteryList : [],
  2322.               countdown : 10,
  2323.               status : '未开始',
  2324.               candidates : {},
  2325.               winners : [],
  2326.               startCandidates : [],
  2327.               medalName : '',
  2328.               medalLevel : 0,
  2329.               source : 'livestream',
  2330.               dougaType : 'video',
  2331.               dougaList : [],
  2332.               dougaListPage : 1,
  2333.               dougaListDisabled : false,
  2334.               dougaListLoading : false,
  2335.               dougaListNoMore : false,
  2336.               dougaListActiveIndex : null,
  2337.               loading : false,
  2338.               rolling : false,
  2339.               loadingText : '',
  2340.               winnerCount : 0,
  2341.             };
  2342.   
  2343.             var guessFormDataDefault = {
  2344.               title : '',
  2345.               countdown : 20,
  2346.               chooseWay : 'random',
  2347.               status : '进行中',
  2348.               maxGuess : 0,
  2349.               maxGuessPerUser : 0,
  2350.               maxQuestionPerUser : 0,
  2351.               maxDirectGuess : 0,
  2352.               maxDirectGuessPerUser : 1,
  2353.               guessList : [],
  2354.               matchGuessList : [],
  2355.               directGuessList : [],
  2356.               guessIndex : 1,
  2357.               displayDirectGuess : false,
  2358.               onlyDisplayMatch : false,
  2359.             };
  2360.   
  2361.             var interactionFormDataInit = {
  2362.   
  2363.               enable : true,
  2364.               historyMinutes : 10,
  2365.               historyCount : 200,
  2366.               direction : 'vertical',
  2367.               displayNotWrap : false,
  2368.               fontFamily : ['default', 'inherit'],
  2369.               userNameFontSize : 18,
  2370.               userNameFontColor : 'rgba(255, 69, 0, 1)',
  2371.               userNameFontShadowColor : 'rgba(0, 0, 0, 1)',
  2372.               userNameFontShadowSize : 1,
  2373.               danmakuBackgroundColor : 'rgba(30, 144, 255, 1)',
  2374.               danmakuBackgroundGradientColor : 'rgba(30, 144, 255, 1)',
  2375.               danmakuFontSize : 25,
  2376.               danmakuFontColor : 'rgba(255, 255, 255, 1)',
  2377.               danmakuFontShadowColor : 'rgba(0, 0, 0, 1)',
  2378.               danmakuFontShadowSize : 1,
  2379.               danmakuDougaBackgroundColor: 'rgba(255, 255, 255, 1)',
  2380.               giftBackgroundColor: 'rgba(255, 166, 104, 1)',
  2381.               giftBackgroundGradientColor: 'rgba(252, 91, 108, 1)',
  2382.               giftFormat : '送出了${礼物名称}',
  2383.               giftFontSize : 25,
  2384.               giftFontColor : 'rgba(255, 176, 35, 1)',
  2385.               giftFontShadowColor : 'rgba(0, 0, 0, 1)',
  2386.               giftFontShadowSize : 1,
  2387.               likeFormat : '点赞了',
  2388.               likeFontSize : 18,
  2389.               likeFontColor : 'rgba(255, 0, 0, 1)',
  2390.               likeFontShadowColor : 'rgba(255, 255, 255, 1)',
  2391.               likeFontShadowSize : 2,
  2392.               enterroomFormat : '进入直播间',
  2393.               enterroomFontSize : 18,
  2394.               enterroomFontColor : 'rgba(30, 144, 255, 1)',
  2395.               enterroomFontShadowColor : '#FFF',
  2396.               enterroomFontShadowSize : 2,
  2397.               followFormat : '关注了主播',
  2398.               followFontSize : 20,
  2399.               followFontColor : 'rgba(199, 21, 133, 1)',
  2400.               followFontShadowColor : 'rgba(255, 255, 255, 1)',
  2401.               followFontShadowSize : 2,
  2402.               joinclubFormat : '加入主播的守护团',
  2403.               joinclubFontSize : 20,
  2404.               joinclubFontColor : 'rgba(199, 21, 133, 1)',
  2405.               joinclubFontShadowColor : 'rgba(255, 255, 255, 1)',
  2406.               joinclubFontShadowSize : 2,
  2407.   
  2408.               backgroundColor: 'rgba(0, 204, 0, 1)',
  2409.   
  2410.               borderShape: 'round',
  2411.               borderWidth: 'auto',
  2412.               borderSize: 2,
  2413.               borderColor: 'rgba(30, 144, 255, 1)',
  2414.             };
  2415.   
  2416.             return {
  2417.   
  2418.               messageData : [],
  2419.               lastDanmakuMessage : null,
  2420.               userInfo : userInfo,
  2421.   
  2422.               uid : config.UID,
  2423.   
  2424.               loginFormDialogVisible : false,
  2425.               lotteryTableDialogVisible : false,
  2426.               lotteryFormDialogVisible : false,
  2427.               userTableDialogVisible : false,
  2428.               lotteryCountdownDialogVisible : false,
  2429.               lotteryStartDialogVisible : false,
  2430.               lotteryFormDialogTitle : '',
  2431.               userTableDialogTitle : '',
  2432.               audioFormDialogVisible : false,
  2433.               interactionFormDialogVisible : false,
  2434.               interactionPresetDialogVisible: false,
  2435.   
  2436.               loginFormData : {
  2437.                 token : '',
  2438.               },
  2439.               loginFormRules : {
  2440.                 token : [{
  2441.                   required : true, message : '请输入口令', trigger : 'blur',
  2442.                 }],
  2443.               },
  2444.   
  2445.               lotteryFormDataDefault : _.cloneDeep(lotteryFormDataDefault),
  2446.               lotteryFormData : _.cloneDeep(lotteryFormDataDefault),
  2447.               lotteryFormRules : {
  2448.                 name : [{
  2449.                   required : true, message : '请输入奖品名称', trigger : 'blur',
  2450.                 }],
  2451.                 countdown : [{
  2452.                   required : true, message : '请输入抽奖倒计时', trigger : 'blur',
  2453.                 }],
  2454.                 startTime : [{
  2455.                   required : true, message : '请设置开奖时间', trigger : 'blur',
  2456.                 },{
  2457.                   trigger : 'blur',
  2458.                   message : '开奖时间与当前时间差距低于1分钟',
  2459.                   validator : function(rule, value, callback){
  2460.                     if(value && moment(value, 'HH:mm:ss').subtract(1, 'minutes') < moment()){
  2461.                       callback(new Error(rule.message));
  2462.                     }
  2463.                     else{
  2464.                       callback();
  2465.                     }
  2466.                   },
  2467.                 },],
  2468.                 /*joinMethod : [{
  2469.                   required : true, message : '请设置抽奖参与方式', trigger : 'blur',
  2470.                 },{
  2471.                   trigger : 'blur',
  2472.                   message : '请选择至少一个抽奖参与方式',
  2473.                   validator : function(rule, value, callback){
  2474.                     if(value.length==0){
  2475.                       callback(new Error(rule.message));
  2476.                     }
  2477.                     else{
  2478.                       callback();
  2479.                     }
  2480.                   },
  2481.                 }],*/
  2482.                 /*joinKeyword : [{
  2483.                   trigger : 'blur',
  2484.                   message : '请输入参与抽奖的弹幕关键词',
  2485.                   validator : function(rule, value, callback){
  2486.                     // 抽奖参与方式为弹幕
  2487.                     if(vue.lotteryFormData.joinMethod == 'danmaku' && !value){
  2488.                       callback(new Error(rule.message));
  2489.                     }else{
  2490.                       callback();
  2491.                     }
  2492.                   },
  2493.                 }],*/
  2494.                 /*joinGiftList : [{
  2495.                   trigger : 'blur',
  2496.                   message : '请选择参与抽奖的礼物，至少一个',
  2497.                   validator : function(rule, value, callback){
  2498.                     // 抽奖参与方式为礼物
  2499.                     if(vue.lotteryFormData.joinMethod == 'gift' && (!value || value.length==0)){
  2500.                       callback(new Error(rule.message));
  2501.                     }else{
  2502.                       callback();
  2503.                     }
  2504.                   },
  2505.                 }],*/
  2506.               },
  2507.               giftList : giftList,
  2508.               giftNameMapper : {},
  2509.   
  2510.               lotteryTableData : [],
  2511.   
  2512.               userTableData : [],
  2513.   
  2514.               // 时间筛选范围，为当前时间至23:59:59
  2515.               timePickerOptions : {
  2516.                 selectableRange : `${moment().format("HH:mm:ss")} - 23:59:59`,
  2517.                 "value-format" : 'HH:mm:ss',
  2518.               },
  2519.   
  2520.               // 当前活跃抽奖
  2521.               activeLottery : {},
  2522.   
  2523.               // 可选语音
  2524.               audioVoiceOptions : null,
  2525.               // 语速
  2526.               speechRateMarks : {
  2527.                 250 : '更慢',
  2528.                 500 : '默认',
  2529.                 750 : '更快',
  2530.               },
  2531.               speechVolumeMarks : {
  2532.                 25 : '更小',
  2533.                 50 : '默认',
  2534.                 75 : '更大',
  2535.               },
  2536.               // 语音配置表单规则
  2537.               audioFormRules : {
  2538.   
  2539.               },
  2540.               // 语音配置表单数据
  2541.               audioFormData : {
  2542.   
  2543.                 voice : ['general', 'Xiaoyun'],
  2544.                 enable : false,
  2545.                 speechRate : 500,
  2546.                 speechVolume : 50,
  2547.                 joinMethod : ['danmaku', 'gift', 'follow'],
  2548.                 danmakuFormat : '${用户名}说${弹幕内容}',
  2549.                 likeFormat : '${用户名}点赞了',
  2550.                 giftFormat : '${用户名}送出${礼物数量}个${礼物名称}',
  2551.                 enterroomFormat : '${用户名}进入直播间',
  2552.                 followFormat : '${用户名}关注了主播',
  2553.                 danmakuTimeout : 0,
  2554.                 likeTimeout : 0,
  2555.                 giftTimeout : 2,
  2556.                 enterroomTimeout : 0,
  2557.                 followTimeout : 0,
  2558.   
  2559.                 consumeing : false,
  2560.                 interactions : [],
  2561.                 messageBuffer : {},
  2562.   
  2563.               },
  2564.   
  2565.   
  2566.               // 弹幕配置表单规则
  2567.               interactionFormRules : {},
  2568.               interactionFormDataInit: interactionFormDataInit,
  2569.               // 弹幕配置表单数据
  2570.               interactionFormData : {
  2571.                 index: null,
  2572.                 name: "",
  2573.                 ..._.cloneDeep(interactionFormDataInit)
  2574.               },
  2575.   
  2576.   
  2577.               // 竞猜表单
  2578.               guessFormDialogVisible : false,
  2579.               guessFormDataDefault : _.cloneDeep(guessFormDataDefault),
  2580.               guessFormData : _.cloneDeep(guessFormDataDefault),
  2581.               guessFormRules : {
  2582.                 title : [{
  2583.                   required : true, message : '竞猜标题不可为空', trigger : 'blur',
  2584.                 }],
  2585.                 countdown : [{
  2586.                   trigger : 'blur',
  2587.                   message : '竞猜挑选方式为“随机挑选”时，竞猜挑选倒计时至少为10（秒）',
  2588.                   validator : function(rule, value, callback){
  2589.                     if(vue.guessFormData.chooseWay == 'random' && value < 10){
  2590.                       callback(new Error(rule.message));
  2591.                     }
  2592.                     else{
  2593.                       callback();
  2594.                     }
  2595.                   },
  2596.                 }],
  2597.               },
  2598.   
  2599.               // 当前活跃竞猜
  2600.               activeGuess : null,
  2601.   
  2602.               // 竞猜表格
  2603.               guessTableDialogVisible : false,
  2604.               guessTableData : [],
  2605.   
  2606.               // 开始竞猜
  2607.               guessStartDialogVisible : false,
  2608.   
  2609.               // 弹幕竞猜
  2610.               guessDanmakuDialogVisible : false,
  2611.   
  2612.               // 请求acfun用户投稿时使用
  2613.               reqId : 1,
  2614.   
  2615.               // 鼠标悬浮状态
  2616.               mouseOn : false,
  2617.   
  2618.               // 预定义颜色
  2619.               predefineColors : [
  2620.                 '#ff4500',
  2621.                 '#ff8c00',
  2622.                 '#ffd700',
  2623.                 '#90ee90',
  2624.                 '#00ced1',
  2625.                 '#1e90ff',
  2626.                 '#c71585',
  2627.                 'rgba(255, 69, 0, 0.68)',
  2628.                 'rgb(255, 120, 0)',
  2629.                 'hsv(51, 100, 98)',
  2630.                 'hsva(120, 40, 94, 0.5)',
  2631.                 'hsl(181, 100%, 37%)',
  2632.                 'hsla(209, 100%, 56%, 0.73)',
  2633.                 '#c7158577'
  2634.               ],
  2635.   
  2636.   
  2637.               // 字体选项
  2638.               fontOptions : null,
  2639.   
  2640.               // 下载过的字体
  2641.               downloadedFonts : {},
  2642.   
  2643.               // 弹幕配置
  2644.               danmaku : null,
  2645.   
  2646.               candidateInfoCallbacks : [],
  2647.               isGettingCandidate : false,
  2648.   
  2649.               // 弹幕配置预设值
  2650.               interactionPreset : [
  2651.               ],
  2652.   
  2653.             };
  2654.           },
  2655.           methods : {
  2656.             filter : _.filter,
  2657.             // 下拉菜单点击回调
  2658.             handleDropdownMenuClick : function(command){
  2659.   
  2660.               var vue = this;
  2661.   
  2662.               // 添加抽奖
  2663.               if(command=='newLottery'){
  2664.                 this.addOrUpdateLottery();
  2665.               }
  2666.               // 查看抽奖表格
  2667.               else if(command=='lotteryTable'){
  2668.                 this.lotteryTableDialogVisible = true;
  2669.               }
  2670.               // 导出中奖名单
  2671.               else if(command=='exportLottery'){
  2672.                 this.exportLottery();
  2673.               }
  2674.               // 添加竞猜
  2675.               else if(command=='newGuess'){
  2676.                 this.guessFormDialogVisible = true;
  2677.               }
  2678.               // 查看竞猜表格
  2679.               else if(command=='guessTable'){
  2680.                 this.guessTableDialogVisible = true;
  2681.               }
  2682.               // 弹幕编辑
  2683.               else if(command=='editInteraction'){
  2684.                 this.interactionPresetDialogVisible = true;
  2685.               }
  2686.               // 帮助手册
  2687.               else if(command == 'help'){
  2688.                 window.open('https://docs.qq.com/doc/DZXF2aFJWb0FxR3N4', '_blank');
  2689.               }
  2690.             },
  2691.             // 对话框大小修改
  2692.             onDialogResize : function(diagDom){
  2693.   
  2694.   
  2695.             },
  2696.   
  2697.             // 抽奖表单提交回调
  2698.             handleLotteryFormSubmit : function(){
  2699.   
  2700.               var vue = this;
  2701.   
  2702.               function addOrUpdateLottery(){
  2703.   
  2704.                 var isNew = !vue.lotteryFormData.id;
  2705.                 // 设置状态
  2706.                 vue.lotteryFormData.status = '未开始';
  2707.                 // 设置开奖时间文字
  2708.                 vue.lotteryFormData.startTimeText = moment(vue.lotteryFormData.startTime).format('HH:mm:ss');
  2709.                 // 备选
  2710.                 vue.lotteryFormData.candidates = {};
  2711.                 vue.lotteryFormData.startCandidates = [];
  2712.                 // 获奖者
  2713.                 vue.lotteryFormData.winners = [];
  2714.   
  2715.                 // 新增抽奖
  2716.                 if(!vue.lotteryFormData.id){
  2717.   
  2718.                   // 添加id
  2719.                   vue.lotteryFormData.id = uuidv4();
  2720.   
  2721.                   vue.lotteryTableData.splice(0, 0, vue.lotteryFormData);
  2722.   
  2723.                 }
  2724.   
  2725.                 // 注册(不可用)抽奖回调
  2726.                 vue.registerLotteryCallback(vue.lotteryFormData);
  2727.   
  2728.                 vue.lotteryFormDialogVisible = false;
  2729.   
  2730.                 vue.$message({
  2731.                   message : isNew?'添加抽奖成功':'修改抽奖信息成功',
  2732.                   type : 'info',
  2733.                   duration : 2000,
  2734.                 });
  2735.               }
  2736.   
  2737.               this.$refs.form.validate((valid) => {
  2738.                 // 通过校验
  2739.                 if(valid){
  2740.   
  2741.                   // 如果是稿件抽奖，查看是否有选中稿件
  2742.                   if(this.lotteryFormData.source == 'douga' && this.lotteryFormData.dougaListActiveIndex==null){
  2743.   
  2744.                     this.$message({
  2745.                       message : '请选择稿件',
  2746.                       type : 'error',
  2747.                     });
  2748.   
  2749.                     return;
  2750.                   }
  2751.   
  2752.                   // 稿件抽奖
  2753.                   if(this.lotteryFormData.source=='douga'){
  2754.   
  2755.                     var processMessage = null;;
  2756.   
  2757.                     // 获取稿件评论
  2758.                     this.getCommentList(this.lotteryFormData.dougaList[this.lotteryFormData.dougaListActiveIndex], true, function(isSuccess, isFinish, commentCount, page, totalPage){
  2759.   
  2760.                       // 错误
  2761.                       if(!isSuccess){
  2762.   
  2763.                         vue.lotteryFormData.loading = false;
  2764.   
  2765.                         vue.$message({
  2766.                           message : '获取稿件评论信息错误',
  2767.                           type : 'error',
  2768.                         });
  2769.                       }
  2770.   
  2771.                       else{
  2772.   
  2773.                         // 开始加载
  2774.                         vue.lotteryFormData.loadingText = `正在加载 ${page}/${totalPage} 页评论`;
  2775.                         vue.lotteryFormData.loading = true;
  2776.   
  2777.                         // 加载完毕
  2778.                         if(isFinish){
  2779.   
  2780.                           vue.lotteryFormData.loading = false;
  2781.                           addOrUpdateLottery();
  2782.   
  2783.                         }
  2784.   
  2785.   
  2786.                       }
  2787.   
  2788.   
  2789.                     });
  2790.   
  2791.                   }
  2792.   
  2793.                   else{
  2794.   
  2795.                     addOrUpdateLottery();
  2796.                   }
  2797.   
  2798.   
  2799.                 }
  2800.                 else{
  2801.   
  2802.                   this.$message({
  2803.                     message : '提交失败，请检查是否填写正确',
  2804.                     type : 'error',
  2805.                   });
  2806.                 }
  2807.               });
  2808.             },
  2809.             // 修改抽奖信息
  2810.             handleLotteryModify : function(lottery){
  2811.               this.addOrUpdateLottery(lottery);
  2812.             },
  2813.             // 复制抽奖
  2814.             handleLotteryCopy : function(lottery){
  2815.               this.addOrUpdateLottery(lottery, true);
  2816.             },
  2817.             // 查看候选人
  2818.             handleLotteryCandidatesCheck : function(lottery){
  2819.               var userTableData = [];
  2820.               for(var uid in lottery.candidates){
  2821.                 var candidate = lottery.candidates[uid];
  2822.                 userTableData.push(candidate);
  2823.               }
  2824.   
  2825.               this.userTableData = _.sortBy(userTableData, 'index');
  2826.               this.userTableDialogTitle = '候选名单';
  2827.               this.userTableDialogVisible = true;
  2828.   
  2829.             },
  2830.             // 查看中奖者
  2831.             handleLotteryWinnersCheck : function(lottery){
  2832.   
  2833.               this.userTableData = lottery.winners;
  2834.               this.userTableDialogTitle = '中奖名单';
  2835.               this.userTableDialogVisible = true;
  2836.             },
  2837.             login : function(callback){
  2838.               this.loginFormDialogVisible = true;
  2839.   
  2840.               if(_.isFunction(callback)){
  2841.                 this.loginFormData.nextCallback = callback;
  2842.               }
  2843.               else{
  2844.                 this.loginFormData.nextCallback = null;
  2845.               }
  2846.   
  2847.             },
  2848.             addOrUpdateLottery : function(lottery, copy){
  2849.               if(lottery && lottery.id){
  2850.   
  2851.                 // 复制抽奖信息
  2852.                 if(copy){
  2853.                   this.lotteryFormData = {
  2854.                     name : lottery.name,
  2855.                     weight : lottery.weight,
  2856.                     soucre : lottery.source,
  2857.                     startTime : lottery.startTime,
  2858.                     countdown : lottery.countdown,
  2859.                     medalName : lottery.medalName,
  2860.                     medalLevel : lotter.medalLevel,
  2861.                     mutualLotteryList : _.cloneDeep(lottery.mutualLotteryList),
  2862.                     joinMethod : _.cloneDeep(lottery.joinMethod),
  2863.                     joinKeyword : lottery.joinKeyword,
  2864.                     joinGiftList : _.cloneDeep(lottery.joinGiftList),
  2865.                     candidates : {},
  2866.                     startCandidates : [],
  2867.                     winners : [],
  2868.                     dougaType : lottery.dougaType,
  2869.                     dougaList : lottery.dougaList,
  2870.                     dougaListPage : lottery.dougaListPage,
  2871.                     dougaListDisabled : lottery.dougaListDisabled,
  2872.                     dougaListLoading : lottery.dougaListLoading,
  2873.                     dougaListNoMore : lottery.dougaListNoMore,
  2874.                     dougaListActiveIndex : lottery.dougaListActiveIndex,
  2875.                   };
  2876.                   this.lotteryFormDialogTitle = '添加抽奖';
  2877.                 }
  2878.                 // 修改抽奖信息
  2879.                 else{
  2880.                   this.lotteryFormData = lottery;
  2881.                   this.lotteryFormDialogTitle = '修改抽奖';
  2882.                 }
  2883.   
  2884.               }
  2885.               else{
  2886.                 this.lotteryFormData = _.cloneDeep(this.lotteryFormDataDefault);
  2887.                 this.lotteryFormDialogTitle = '添加抽奖';
  2888.               }
  2889.               this.lotteryFormDialogVisible = true;
  2890.             },
  2891.             // 注册(不可用)抽奖回调
  2892.             registerLotteryCallback : function(lottery){
  2893.   
  2894.               var vue = this;
  2895.   
  2896.               function updateCandidates(){
  2897.   
  2898.                 var candidates = {};
  2899.   
  2900.                 lottery.dougaList[lottery.dougaListActiveIndex].commentList.forEach(function(comment, index){
  2901.   
  2902.                   var pass = true;
  2903.                   // 如果设置了互斥抽奖
  2904.                   if(lottery.mutualLotteryList && lottery.mutualLotteryList.length>0){
  2905.   
  2906.   
  2907.                     _.filter(vue.lotteryTableData, function(o){return lottery.mutualLotteryList.indexOf(o.id)!=-1}).every(function(anotherLottery){
  2908.   
  2909.                       if(_.findIndex(anotherLottery.winners, {uid:comment.uid})!=-1){
  2910.                         pass = false;
  2911.                         return false;
  2912.                       }
  2913.                       else{
  2914.                         return true;
  2915.                       }
  2916.   
  2917.                     });
  2918.   
  2919.                   }
  2920.   
  2921.                   if(!pass){
  2922.                     return;
  2923.                   }
  2924.   
  2925.                   if(!(comment.uid in candidates)){
  2926.                     let candidate = {
  2927.                       index : -comment.floor,
  2928.                       uid : comment.uid,
  2929.                       userName : comment.userName,
  2930.                       photo : comment.photo,
  2931.                     };
  2932.   
  2933.                     // 如果筛选了牌子
  2934.                     if(lottery.medalName && lottery.medalLevel){
  2935.                       vue.getCandidateInfo(candidate, (isSuccess, )=>{
  2936.                         if(candidate.medalName == lottery.medalName && candidate.medalLevel >= lottery.medalLevel){
  2937.                           candidates[comment.uid] = candidate;
  2938.                         }
  2939.                       });
  2940.                     }
  2941.                     else{
  2942.                       candidates[comment.uid] = candidate;
  2943.                     }
  2944.   
  2945.                   }
  2946.   
  2947.                 });
  2948.   
  2949.                 lottery.candidates = candidates;
  2950.   
  2951.               }
  2952.   
  2953.               // 如果是稿件抽奖
  2954.               if(lottery.source=='douga'){
  2955.   
  2956.                 // 是否注册(不可用)过数据回调
  2957.                 if(lottery.messageHandler){
  2958.                   window.clearInterval(lottery.messageHandler);
  2959.                   lottery.messageHandler = null;
  2960.   
  2961.                   // 清空候选
  2962.                   lottery.candidates = {};
  2963.                   lottery.startCandidates = [];
  2964.                   lottery.winners = [];
  2965.                 }
  2966.   
  2967.   
  2968.                 // 更新候选名单
  2969.                 updateCandidates();
  2970.   
  2971.                 // 注册(不可用)数据回调（每30秒执行）
  2972.                 /*lottery.messageHandler = window.setInterval(function(){
  2973.   
  2974.                   // 获取评论
  2975.                   vue.getCommentList(lottery.dougaList[lottery.dougaListActiveIndex], true, function(isSuccess, isFinish, commentCount, page, totalPage){
  2976.   
  2977.                     // 获取完毕
  2978.                     if(isFinish){
  2979.   
  2980.                       // 更新候选名单
  2981.                       updateCandidates();
  2982.   
  2983.   
  2984.                     }
  2985.   
  2986.                   });
  2987.   
  2988.                 }, 30 * 1000);*/
  2989.   
  2990.   
  2991.               }
  2992.               // 直播间抽奖
  2993.               else{
  2994.                 // 是否注册(不可用)过数据回调
  2995.                 if(lottery.messageHandler){
  2996.                   callbackManager.cancel(lottery.messageHandler);
  2997.                   lottery.messageHandler = null;
  2998.   
  2999.                   // 清空候选
  3000.                   lottery.candidates = {};
  3001.                   lottery.startCandidates = [];
  3002.                   lottery.winners = [];
  3003.   
  3004.                 }
  3005.                 // 注册(不可用)数据回调
  3006.                 lottery.messageHandler = callbackManager.register('message', function(data){
  3007.   
  3008.   
  3009.                   // 不符合参与方式
  3010.                   if(!(
  3011.                       (lottery.joinMethod.indexOf('danmaku')!=-1 && data.interaction.type=='danmaku')
  3012.                       || (lottery.joinMethod.indexOf('gift')!=-1 && data.interaction.type=='gift')
  3013.                       || (lottery.joinMethod.indexOf('like')!=-1 && data.interaction.type=='like')
  3014.                     )
  3015.                   ){
  3016.                     return;
  3017.                   }
  3018.   
  3019.                   // 如果参与方式是弹幕
  3020.                   if(data.interaction.type=='danmaku' && (lottery.joinKeyword && data.interaction.content.indexOf(lottery.joinKeyword)==-1)){
  3021.                     return;
  3022.                   }
  3023.                   // 如果参与方式是礼物
  3024.                   if(data.interaction.type=='gift' && (lottery.joinGiftList.length>0 && lottery.joinGiftList.indexOf(vue.giftNameMapper[data.interaction.giftName].id)==-1)){
  3025.                     return;
  3026.                   }
  3027.   
  3028.                   var pass = true;
  3029.                   // 如果设置了互斥抽奖
  3030.                   if(lottery.mutualLotteryList && lottery.mutualLotteryList.length>0){
  3031.   
  3032.   
  3033.                     _.filter(vue.lotteryTableData, function(o){return lottery.mutualLotteryList.indexOf(o.id)!=-1}).every(function(anotherLottery){
  3034.   
  3035.                       if(_.findIndex(anotherLottery.winners, {uid:data.uid})!=-1){
  3036.                         pass = false;
  3037.                         return false;
  3038.                       }
  3039.                       else{
  3040.                         return true;
  3041.                       }
  3042.   
  3043.                     });
  3044.   
  3045.                   }
  3046.   
  3047.                   if(!pass){
  3048.                     return;
  3049.                   }
  3050.   
  3051.                   // 第一次被侦测
  3052.                   if(!(data.uid in lottery.candidates)){
  3053.                     let candidate = {
  3054.                       uid : data.uid,
  3055.                       userName : data.userName,
  3056.                       photo : data.photo,
  3057.                       weight : 0,
  3058.                       index : Object.keys(lottery.candidates).length,
  3059.                     };
  3060.   
  3061.                     // 如果筛选了牌子
  3062.                     if(lottery.medalName && lottery.medalLevel){
  3063.                       vue.getCandidateInfo(candidate, (isSuccess, )=>{
  3064.   
  3065.                         if(candidate.medalName == lottery.medalName && candidate.medalLevel >= lottery.medalLevel){
  3066.                           lottery.candidates[data.uid] = candidate;
  3067.   
  3068.   
  3069.                           if(data.interaction.type=='danmaku'){
  3070.                             lottery.candidates[data.uid].weight += 1;
  3071.                           }
  3072.                           else if(data.interaction.type=='gift'){
  3073.                             lottery.candidates[data.uid].weight += vue.giftNameMapper[data.interaction.giftName].price * data.interaction.giftCount;
  3074.                           }
  3075.                           else if(data.interaction.type=='like'){
  3076.                             lottery.candidates[data.uid].weight += 0.5;
  3077.                           }
  3078.                         }
  3079.   
  3080.                       });
  3081.                     }
  3082.                     else{
  3083.                       lottery.candidates[data.uid] = candidate;
  3084.   
  3085.                       if(data.interaction.type=='danmaku'){
  3086.                         lottery.candidates[data.uid].weight += 1;
  3087.                       }
  3088.                       else if(data.interaction.type=='gift'){
  3089.                         lottery.candidates[data.uid].weight += vue.giftNameMapper[data.interaction.giftName].price * data.interaction.giftCount;
  3090.                       }
  3091.                       else if(data.interaction.type=='like'){
  3092.                         lottery.candidates[data.uid].weight += 0.5;
  3093.                       }
  3094.                     }
  3095.                   }
  3096.   
  3097.   
  3098.                 });
  3099.               }
  3100.   
  3101.               var startLotteryTimeout = lottery.startTime - new Date();
  3102.               var countdownTimeout = startLotteryTimeout - lottery.countdown * 1000;
  3103.   
  3104.               // 是否已经注册(不可用)过抽奖倒计时
  3105.               if(lottery.countdownHandler){
  3106.                 window.clearTimeout(lottery.countdownHandler);
  3107.                 lottery.countdownHandler = null;
  3108.               }
  3109.   
  3110.               if(lottery.countdown>0){
  3111.                 lottery.countdownHandler = window.setTimeout(function(){
  3112.   
  3113.                   lottery.countdownHandler = null;
  3114.   
  3115.                   lottery.countdownText = `${lottery.countdown/60>=10?'':'0'}${_.floor(lottery.countdown/60)}:${lottery.countdown%60>=10?'':'0'}${lottery.countdown%60}`;
  3116.                   vue.activeLottery = lottery;
  3117.                   // 展示倒计时
  3118.                   vue.showLotteryCountdown(lottery);
  3119.   
  3120.   
  3121.                 }, countdownTimeout);
  3122.               }
  3123.   
  3124.   
  3125.               // 是否已经注册(不可用)过抽奖
  3126.               if(lottery.startHandler){
  3127.                 window.clearTimeout(lottery.startHandler);
  3128.                 lottery.startHandler = null;
  3129.               }
  3130.               lottery.startHandler = window.setTimeout(function(){
  3131.   
  3132.   
  3133.                 // 清除数据回调
  3134.                 if(lottery.source=='douga'){
  3135.                   window.clearInterval(lottery.messageHandler)
  3136.                 }
  3137.                 else{
  3138.                   callbackManager.cancel(lottery.messageHandler);
  3139.                 }
  3140.                 lottery.messageHandler = null;
  3141.                 lottery.startHandler = null;
  3142.   
  3143.                 vue.activeLottery = lottery;
  3144.                 // 展示结果
  3145.                 vue.showLotteryStart(lottery);
  3146.   
  3147.               }, startLotteryTimeout);
  3148.   
  3149.   
  3150.             },
  3151.   
  3152.             // 返回抽奖表格行类名
  3153.             lotteryTableRowClassName : function({row}){
  3154.               if(row.status == '未开始'){
  3155.                 return 'lottery-status-unstart';
  3156.               }
  3157.               if(row.status == '已结束'){
  3158.                 return 'lottery-status-finish';
  3159.               }
  3160.             },
  3161.             getCandidateInfo(candidate, callback){
  3162.   
  3163.               this.candidateInfoCallbacks.push([candidate, callback]);
  3164.             },
  3165.             // 获取用户信息
  3166.             _getCandidateInfo(candidate, callback){
  3167.               if(candidate.medalName){
  3168.                 if(_.isFunction){
  3169.                   callback(true, candidate);
  3170.                 }
  3171.                 return;
  3172.               }
  3173.   
  3174.               commonRequrest(config.ACFUN_SERVER + config.URLS.ACFUN_USER.SPACE + `/${candidate.uid}`, 'get', null, true, function(isSuccess, data){
  3175.   
  3176.                 // 获取成功
  3177.                 if(isSuccess){
  3178.                   let medalDataJsonMatch = data.match(/data-medal='(?<medal>.+?)'/);
  3179.                   if(medalDataJsonMatch!=null){
  3180.                     let medalData = JSON.parse(medalDataJsonMatch.groups['medal']);
  3181.                     let medalColor = 'green';
  3182.                     if(medalData.level >= 1 && medalData.level <= 3){
  3183.                       medalColor = 'green';
  3184.                     }
  3185.                     else if(medalData.level >= 4 && medalData.level <= 6){
  3186.                       medalColor = 'blue';
  3187.                     }
  3188.                     else if(medalData.level >= 7 && medalData.level <= 9){
  3189.                       medalColor = 'orange';
  3190.                     }
  3191.                     else if(medalData.level >= 10 && medalData.level <= 12){
  3192.                       medalColor = 'red';
  3193.                     }
  3194.                     else if(medalData.level >= 13 && medalData.level <= 15){
  3195.                       medalColor = 'purple';
  3196.                     }
  3197.                     else if(medalData.level >= 16 && medalData.level <= 20){
  3198.                       medalColor = 'black';
  3199.                     }
  3200.                     Object.assign(candidate, {
  3201.                       medalName : medalData.clubName,
  3202.                       medalLevel : medalData.level,
  3203.                       medalColor : medalColor,
  3204.                     });
  3205.                   }
  3206.   
  3207.   
  3208.                   if(_.isFunction){
  3209.                     callback(true, candidate);
  3210.                   }
  3211.   
  3212.                 }
  3213.                 else{
  3214.   
  3215.                   if(_.isFunction){
  3216.                     callback(false, candidate);
  3217.                   }
  3218.                 }
  3219.               });
  3220.             },
  3221.             // 开始倒计时
  3222.             showLotteryCountdown : function(lottery){
  3223.   
  3224.               var vue = this;
  3225.   
  3226.               this.lotteryStartDialogVisible = false;
  3227.               this.lotteryCountdownDialogVisible = true;
  3228.               this.$nextTick(function(){
  3229.                 //circle start
  3230.                 var progressBar = document.querySelector('.lottery-countdown-dialog .e-c-progress');
  3231.                 var indicator = document.querySelector('.lottery-countdown-dialog #e-indicator');
  3232.                 var pointer = document.querySelector('.lottery-countdown-dialog #e-pointer');
  3233.                 var length = Math.PI * 2 * 100;
  3234.   
  3235.                 progressBar.style.strokeDasharray = length;
  3236.   
  3237.                 function update(value, timePercent) {
  3238.                   var offset = - length - length * value / (timePercent);
  3239.                   progressBar.style.strokeDashoffset = offset;
  3240.                   pointer.style.transform = `rotate(${360 * value / (timePercent)}deg)`;
  3241.                 };
  3242.   
  3243.                 //circle ends
  3244.                 const displayOutput = document.querySelector('.lottery-countdown-dialog .display-remain-time')
  3245.   
  3246.                 var intervalTimer;
  3247.                 var timeLeft;
  3248.                 var wholeTime = lottery.countdown; // manage this to set the whole time
  3249.                 var isPaused = false;
  3250.                 var isStarted = false;
  3251.   
  3252.   
  3253.                 update(wholeTime,wholeTime); //refreshes progress bar
  3254.                 displayTimeLeft(wholeTime);
  3255.   
  3256.                 function changeWholeTime(seconds){
  3257.                   if ((wholeTime + seconds) > 0){
  3258.                     wholeTime += seconds;
  3259.                     update(wholeTime,wholeTime);
  3260.                   }
  3261.                 }
  3262.   
  3263.   
  3264.                 function timer (seconds){ //counts time, takes seconds
  3265.                   var remainTime = Date.now() + (seconds * 1000);
  3266.                   displayTimeLeft(seconds);
  3267.   
  3268.                   intervalTimer = window.setInterval(function(){
  3269.                     timeLeft = Math.round((remainTime - Date.now()) / 1000);
  3270.   
  3271.                     // 倒计时结束
  3272.                     if(timeLeft < 0){
  3273.                       window.clearInterval(intervalTimer);
  3274.                       isStarted = false;
  3275.   
  3276.                       // 隐藏对话框
  3277.                       vue.lotteryCountdownDialogVisible = false;
  3278.   
  3279.                       return ;
  3280.                     }
  3281.                     displayTimeLeft(timeLeft);
  3282.                   }, 1000);
  3283.                 }
  3284.                 function displayTimeLeft (timeLeft){ //displays time on the input
  3285.                   var minutes = Math.floor(timeLeft / 60);
  3286.                   var seconds = timeLeft % 60;
  3287.                   var displayString = `${minutes < 10 ? '0' : ''}${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
  3288.                   displayOutput.textContent = displayString;
  3289.                   update(timeLeft, wholeTime);
  3290.                 }
  3291.   
  3292.                 timer(wholeTime);
  3293.   
  3294.               });
  3295.             },
  3296.             // 开始抽奖
  3297.             showLotteryStart : function(lottery){
  3298.   
  3299.               var vue = this;
  3300.               var stop = false;
  3301.               lottery.activeIndex = -1;
  3302.   
  3303.               this.lotteryCountdownDialogVisible = false;
  3304.               var rollIntervalHandler = null;
  3305.   
  3306.               // 候选人数为0
  3307.               if(Object.keys(lottery.candidates).length == 0){
  3308.   
  3309.                 this.$message({
  3310.                   type : 'info',
  3311.                   message : '无参与抽奖人员',
  3312.                 });
  3313.   
  3314.                 lottery.winners = _.flatMap(lottery.candidates);
  3315.                 lottery.status = '已结束';
  3316.                 this.handleLotteryWinnersCheck(lottery);
  3317.   
  3318.                 return;
  3319.   
  3320.               }
  3321.   
  3322.   
  3323.               function roll(){
  3324.                 if(stop){
  3325.                   // 获取当前赢家
  3326.                   // vue.$refs.carousel.setActiveItem(_.findIndex(lottery.startCandidates, {uid:lottery.winners[lottery.winners.length-1].uid}));
  3327.   
  3328.                 }
  3329.                 else{
  3330.                   vue.$refs.carousel.next();
  3331.                 }
  3332.               }
  3333.   
  3334.               function changeRollIntervals(intervals, timeouts, callback){
  3335.   
  3336.                 if(!timeouts){
  3337.                   timeouts = 0;
  3338.                 }
  3339.   
  3340.                 if(!_.isArray(intervals)){
  3341.                   intervals = [intervals];
  3342.                 }
  3343.                 if(!_.isArray(timeouts)){
  3344.                   timeouts = [timeouts];
  3345.   
  3346.                   if(timeouts.length>intervals.length){
  3347.                     timeouts = timeouts.slice(0, intervals.length);
  3348.                   }
  3349.                   if(timeouts.length<intervals.length){
  3350.                     var npads = intervals.length-timeouts.length;
  3351.                     for(var i=0;i<npads;++i){
  3352.                       timeouts.splice(0, 0, 0);
  3353.                     }
  3354.                   }
  3355.   
  3356.                 }
  3357.   
  3358.                 intervals.forEach(function(interval, index){
  3359.                   window.setTimeout(function(){
  3360.                     if(rollIntervalHandler!=null){
  3361.                       window.clearTimeout(rollIntervalHandler);
  3362.                     }
  3363.                     if(interval != null){
  3364.                       rollIntervalHandler = window.setInterval(roll, interval);
  3365.                     }
  3366.                     else{
  3367.   
  3368.                       stop = true;
  3369.   
  3370.                       vue.$nextTick(function(){
  3371.                         vue.$refs.carousel.$nextTick(function(){
  3372.   
  3373.                           // 获取当前赢家
  3374.                           lottery.activeIndex = vue.$refs.carousel.activeIndex;
  3375.                           // 高亮
  3376.                           lottery.startCandidates[lottery.activeIndex].highlight = true;
  3377.   
  3378.                           vue.$refs.carousel.$nextTick(function(){
  3379.                             // 停止回调
  3380.                             if(_.isFunction(callback)){
  3381.                               callback();
  3382.                             }
  3383.                           });
  3384.                         });
  3385.                       });
  3386.   
  3387.   
  3388.                     }
  3389.                   }, timeouts[index]);
  3390.   
  3391.                 });
  3392.   
  3393.               }
  3394.   
  3395.               // 当前滚动名单
  3396.               vue.$set(lottery, 'startCandidates', _.flatMap(lottery.candidates));
  3397.   
  3398.               this.$nextTick(function(){
  3399.   
  3400.                 var startChoose = function(){
  3401.   
  3402.                   lottery.rolling = true;
  3403.   
  3404.                   // 获取中奖者
  3405.                   vue.lotteryStartDialogVisible = true;
  3406.                   stop = false;
  3407.   
  3408.                   // 8秒内需要滚动完所有用户
  3409.                   var interval = Math.min(Math.max(Math.floor(8000/lottery.startCandidates.length), 150), 350);
  3410.   
  3411.                   // 高速转动
  3412.                   // 10秒后停止转动
  3413.                   changeRollIntervals(
  3414.                     [interval, null],
  3415.                     [0, 10000],
  3416.                     // 转动结束后获取当前用户
  3417.                     function(){
  3418.   
  3419.                       lottery.rolling = false;
  3420.   
  3421.                     },
  3422.                   );
  3423.   
  3424.                 };
  3425.   
  3426.                 function checkWinner(valid){
  3427.   
  3428.                   // 去除高亮
  3429.                   lottery.startCandidates[lottery.activeIndex].highlight = false;
  3430.   
  3431.                   // 删除候选
  3432.                   let candidate = lottery.startCandidates.splice(lottery.activeIndex, 1)[0];
  3433.                   // 删除候选
  3434.                   delete lottery.candidates[candidate.uid];
  3435.   
  3436.                   // 如果有效，添加入赢家
  3437.                   if(valid){
  3438.                     // 添加赢家
  3439.                     lottery.winners.push(candidate);
  3440.                   }
  3441.   
  3442.   
  3443.                   lottery.winnerCount = lottery.winners.length;
  3444.   
  3445.                 }
  3446.   
  3447.                 // 设置抽奖结束函数
  3448.                 lottery.finishFunc = function(){
  3449.   
  3450.                   if(lottery.rolling){
  3451.                     return;
  3452.                   }
  3453.   
  3454.                   checkWinner(true);
  3455.   
  3456.                   lottery.status = '已结束';
  3457.                   // 关闭弹窗
  3458.                   vue.lotteryStartDialogVisible = false;
  3459.                   // 打开中奖名单
  3460.                   vue.handleLotteryWinnersCheck(lottery);
  3461.   
  3462.                 };
  3463.   
  3464.                 // 设置继续抽奖函数
  3465.                 lottery.nextFunc = function(valid){
  3466.   
  3467.                   if(lottery.rolling){
  3468.                     return;
  3469.                   }
  3470.   
  3471.                   // 查看候选人数是否足够
  3472.                   if(valid && lottery.startCandidates.length == 0){
  3473.                     vue.$message({
  3474.                       type : 'error',
  3475.                       message : '人数不足，无法抽奖'
  3476.                     });
  3477.                     return;
  3478.                   }
  3479.   
  3480.                   checkWinner(valid);
  3481.   
  3482.                   // 关闭弹窗
  3483.                   // vue.lotteryStartDialogVisible = false;
  3484.                   vue.activeLottery = {};
  3485.                   vue.$nextTick(function(){
  3486.                     // 1秒后重新开始
  3487.                     window.setTimeout(function(){
  3488.                       // 打乱顺序
  3489.                       vue.$set(lottery, 'startCandidates', _.shuffle(lottery.startCandidates));
  3490.                       vue.$nextTick(function(){
  3491.                         lottery.activeIndex = -1;
  3492.                         vue.activeLottery = lottery;
  3493.                         startChoose();
  3494.                       });
  3495.                     }, 1000);
  3496.                   });
  3497.   
  3498.                 };
  3499.   
  3500.   
  3501.                 // 开始抽奖
  3502.                 startChoose();
  3503.   
  3504.   
  3505.   
  3506.               });
  3507.   
  3508.   
  3509.             },
  3510.             // 导出中奖名单
  3511.             exportLottery : function(){
  3512.   
  3513.               var workbook = new ExcelJS.Workbook();
  3514.               var sheet = workbook.addWorksheet('中奖名单');
  3515.               sheet.columns = [
  3516.                 { key: 'userName', width: 30, },
  3517.                 { key: 'uid', width: 10, },
  3518.               ];
  3519.   
  3520.               var rowIndex = 1;
  3521.               // 遍历所有已结束的抽奖
  3522.               this.lotteryTableData.forEach(function(lottery){
  3523.   
  3524.                 if(lottery.status != '已结束'){
  3525.                   return true;
  3526.                 }
  3527.   
  3528.                 // 添加标题
  3529.                 sheet.addRow([lottery.name]);
  3530.                 sheet.mergeCells(rowIndex,1,rowIndex,2);
  3531.                 // 设置标题样式
  3532.                 var titleRow = sheet.getRow(rowIndex);
  3533.                 var titleCell = titleRow.getCell(1);
  3534.                 // 文字居中
  3535.                 titleCell.alignment = {vertical: 'middle', horizontal: 'center'};
  3536.                 // 添加边框
  3537.                 titleCell.border = {
  3538.                   top: {style:'thin'},
  3539.                   left: {style:'thin'},
  3540.                   bottom: {style:'thin'},
  3541.                   right: {style:'thin'},
  3542.                 };
  3543.                 // 加粗字体
  3544.                 titleCell.font = {
  3545.                   bold : true,
  3546.                 };
  3547.   
  3548.   
  3549.                 sheet.addRow({userName: '用户名', uid : '用户uid'});
  3550.                 // 设置列名样式
  3551.                 var headerRow = sheet.getRow(rowIndex + 1);
  3552.                 for(var i=1;i<=2;++i){
  3553.                   headerRow.getCell(i).alignment = {vertical: 'middle', horizontal: 'center'};
  3554.                   headerRow.getCell(i).border = {
  3555.                     top: {style:'thin'},
  3556.                     left: {style:'thin'},
  3557.                     bottom: {style:'thin'},
  3558.                     right: {style:'thin'},
  3559.                   };
  3560.                 }
  3561.   
  3562.                 // 遍历中奖用户
  3563.                 lottery.winners.forEach(function(winner, index){
  3564.                   sheet.addRow({userName: winner.userName, uid : winner.uid});
  3565.   
  3566.                   // 设置记录样式
  3567.                   var recordRow = sheet.getRow(rowIndex + 2 + index);
  3568.                   for(var i=1;i<=2;++i){
  3569.                     recordRow.getCell(i).alignment = {vertical: 'middle', horizontal: 'center'};
  3570.                     recordRow.getCell(i).border = {
  3571.                       top: {style:'thin'},
  3572.                       left: {style:'thin'},
  3573.                       bottom: {style:'thin'},
  3574.                       right: {style:'thin'},
  3575.                     };
  3576.                   }
  3577.                 });
  3578.   
  3579.                 // 添加两个空白行
  3580.                 sheet.addRow();
  3581.                 sheet.addRow();
  3582.   
  3583.                 rowIndex += 1 + 1 + lottery.winners.length + 2;
  3584.   
  3585.               });
  3586.   
  3587.               ;(async function(){
  3588.                 var buffer = await workbook.xlsx.writeBuffer();
  3589.                 var file = new File([buffer], '中奖名单.xlsx');
  3590.                 saveAs(file);
  3591.               })();
  3592.   
  3593.             },
  3594.   
  3595.             // 语音配置表单提交
  3596.             handleAudioFormSubmit : function(){
  3597.   
  3598.               var vue = this;
  3599.   
  3600.               this.$refs.audioForm.validate((valid) => {
  3601.                 // 通过校验
  3602.                 if(valid){
  3603.                   // 提交修改
  3604.                   GM_setValue('audioFormData', JSON.stringify({
  3605.                     voice : this.audioFormData.voice,
  3606.                     enable : this.audioFormData.enable,
  3607.                     speechRate : this.audioFormData.speechRate,
  3608.                     speechVolume : this.audioFormData.speechVolume,
  3609.                     joinMethod : this.audioFormData.joinMethod,
  3610.                     danmakuFormat : this.audioFormData.danmakuFormat,
  3611.                     likeFormat : this.audioFormData.likeFormat,
  3612.                     giftFormat : this.audioFormData.giftFormat,
  3613.                     enterroomFormat : this.audioFormData.enterroomFormat,
  3614.                     followFormat : this.audioFormData.followFormat,
  3615.                     danmakuTimeout : this.audioFormData.danmakuTimeout,
  3616.                     likeTimeout : this.audioFormData.likeTimeout,
  3617.                     giftTimeout : this.audioFormData.giftTimeout,
  3618.                     enterroomTimeout : this.audioFormData.enterroomTimeout,
  3619.                     followTimeout : this.audioFormData.followTimeout,
  3620.   
  3621.                     consumeing : false,
  3622.                     interactions : [],
  3623.                     messageBuffer : {},
  3624.   
  3625.                   }));
  3626.   
  3627.                   this.handleAudioFormSubmitValid();
  3628.   
  3629.                 }
  3630.               });
  3631.   
  3632.             },
  3633.             handleAudioFormSubmitValid : function(){
  3634.               var vue = this;
  3635.               // 检测当前是否有缓冲
  3636.               for(var bufferKey in this.audioFormData.messageBuffer){
  3637.                 window.clearTimeout(this.audioFormData.messageBuffer[bufferKey].handler);
  3638.               }
  3639.   
  3640.               this.audioFormData.messageBuffer = {};
  3641.   
  3642.               // 检测是否已经添加了语音播报
  3643.               if(this.audioFormData.messageHandler){
  3644.                 callbackManager.cancel(this.audioFormData.messageHandler);
  3645.                 this.audioFormData.messageHandler = null;
  3646.               }
  3647.   
  3648.               // 开启播报
  3649.               if(this.audioFormData.enable){
  3650.                 this.audioFormData.messageHandler = callbackManager.register('message', function(data){
  3651.   
  3652.                   // 不是允许的互动类型
  3653.                   if(vue.audioFormData.joinMethod.indexOf(data.interaction.type)==-1){
  3654.                     return;
  3655.                   }
  3656.   
  3657.                   var bufferKey = null;
  3658.                   var timeout = 0;
  3659.                   if(data.interaction.type=='gift'){
  3660.                     bufferKey = data.uid + data.interaction.type + data.interaction.giftName;
  3661.                     timeout = vue.audioFormData.giftTimeout;
  3662.                   }
  3663.   
  3664.                   // 不进行缓存，直接播报
  3665.                   if(bufferKey==null || timeout == 0){
  3666.                     data.interaction = [data.interaction];
  3667.                     vue.consumeAudio(vue.audioFormData, data);
  3668.                     return;
  3669.                   }
  3670.   
  3671.                   // 已有相同信息
  3672.                   if(bufferKey in vue.audioFormData.messageBuffer){
  3673.                     window.clearTimeout(vue.audioFormData.messageBuffer[bufferKey].handler);
  3674.                     vue.audioFormData.messageBuffer[bufferKey].interaction.push(data.interaction);
  3675.                   }
  3676.                   else{
  3677.                     vue.audioFormData.messageBuffer[bufferKey] = {
  3678.                       uid : data.uid,
  3679.                       userName : data.userName,
  3680.                       interaction : [data.interaction],
  3681.                     };
  3682.                   }
  3683.                   vue.audioFormData.messageBuffer[bufferKey].handler = window.setTimeout(function(){
  3684.                     var data = vue.audioFormData.messageBuffer[bufferKey];
  3685.                     vue.audioFormData.messageBuffer[bufferKey].handler = null;
  3686.                     delete vue.audioFormData.messageBuffer[bufferKey];
  3687.                     vue.consumeAudio(vue.audioFormData, data);
  3688.                   }, timeout*1000);
  3689.                 });
  3690.               }
  3691.   
  3692.               // 关闭弹窗
  3693.               this.audioFormDialogVisible = false;
  3694.             },
  3695.             // 字体选择回调
  3696.             handleFontSelectChange : function(value){
  3697.               this.addFont(value[value.length-1]);
  3698.             },
  3699.             // 新增预设
  3700.             addInteractionPreset: function(item){
  3701.               this.interactionPreset.push(_.cloneDeep(item));
  3702.               this.interactionPreset[this.interactionPreset.length-1].index = this.interactionPreset.length;
  3703.               this.interactionPreset[this.interactionPreset.length-1].hotkey = this.interactionPreset.length<=9?`ctrl+alt+${this.interactionPreset.length}`:'预设过多，无法激活';
  3704.               return this.interactionPreset[this.interactionPreset.length-1];
  3705.             },
  3706.             // 编辑预设
  3707.             editInteractionPreset: function(item){
  3708.               console.log('edit', item)
  3709.               this.interactionPreset[item.index-1] = _.cloneDeep(item);
  3710.               return this.interactionPreset[item.index-1];
  3711.             },
  3712.             // 激活某一预设
  3713.             activeInteractionPreset: function(item){
  3714.               for(var preset of this.interactionPreset){
  3715.                 preset.active = false;
  3716.               }
  3717.               item.active = true;
  3718.               console.log('item', item)
  3719.               this.interactionFormData = _.cloneDeep(item);
  3720.               this.handleInteractionFormSubmitValid();
  3721.             },
  3722.             // 删除某一预设
  3723.             removeInteractionPreset: function(item){
  3724.               this.$confirm(`确定删除预设：${item.name}`, '是否删除', {
  3725.                 confirmButtonText: '确定',
  3726.                 cancelButtonText: '取消',
  3727.               }).then(() => {
  3728.                 this.interactionPreset.splice(item.index-1, 1);
  3729.                 this.interactionPreset.forEach(function(item, index){
  3730.                   item.index = index + 1;
  3731.                   item.hotkey = index<9?`ctrl+alt+${index+1}`:'预设过多，无法激活';
  3732.                 });
  3733.   
  3734.                 // 提交修改
  3735.                 GM_setValue('interactionPreset', JSON.stringify(vue.interactionPreset));
  3736.   
  3737.               });
  3738.             },
  3739.             // 打开弹幕配置表单
  3740.             handleInteractionFormOpen(item){
  3741.               var vue = this;
  3742.   
  3743.               // 新增预设
  3744.               if(item==null){
  3745.                 this.interactionFormData.name = "";
  3746.                 this.interactionFormData.index = null;
  3747.               }
  3748.               // 编辑预设
  3749.               else{
  3750.                 this.activeInteractionPreset(item);
  3751.               }
  3752.               this.interactionFormDialogVisible = true;
  3753.             },
  3754.             // 重置配置表单
  3755.             handleInteractionFormInit: function(){
  3756.               this.interactionFormData = {
  3757.                 ...this.interactionFormData,
  3758.                 ..._.cloneDeep(this.interactionFormDataInit),
  3759.               };
  3760.             },
  3761.             // 弹幕配置表单提交
  3762.             handleInteractionFormSubmit : function(){
  3763.   
  3764.               var vue = this;
  3765.   
  3766.               this.$refs.interactionForm.validate((valid) => {
  3767.                 // 通过校验
  3768.                 if(valid){
  3769.   
  3770.                   var fontName = vue.interactionFormData.fontFamily[vue.interactionFormData.fontFamily.length-1];
  3771.   
  3772.                   if(fontName!='inherit'){
  3773.                     // 添加缓存
  3774.                     GM_setValue('downloadedFonts', vue.downloadedFonts);
  3775.                   }
  3776.   
  3777.                   var preset = null;
  3778.                   // 编辑
  3779.                   if(vue.interactionFormData.index!=null){
  3780.                     preset = vue.editInteractionPreset(vue.interactionFormData);
  3781.                   }
  3782.                   // 新增
  3783.                   else{
  3784.                     preset = vue.addInteractionPreset(vue.interactionFormData);
  3785.                   }
  3786.   
  3787.                   console.log('submit', preset)
  3788.                   vue.activeInteractionPreset(preset);
  3789.                   vue.interactionFormDialogVisible = false;
  3790.   
  3791.   
  3792.   
  3793.                   // 提交修改
  3794.                   GM_setValue('interactionPreset', JSON.stringify(vue.interactionPreset));
  3795.                 }
  3796.               });
  3797.   
  3798.             },
  3799.             handleInteractionFormSubmitValid : function(){
  3800.   
  3801.               var vue = this;
  3802.   
  3803.               if(vue.interactionFormData.enable){
  3804.   
  3805.   
  3806.                 vue.interactionFormData.modifyContentFunc = function(data){
  3807.   
  3808.                   if(data.interaction.type == 'gift'){
  3809.                     data.interaction.content = formatText(vue.interactionFormData.giftFormat, {
  3810.                       '礼物名称' : data.interaction.giftName,
  3811.                     });
  3812.                   }
  3813.                   else if(data.interaction.type == 'enterroom'){
  3814.                     data.interaction.content = vue.interactionFormData.enterroomFormat;
  3815.                   }
  3816.                   else if(data.interaction.type == 'like'){
  3817.                     data.interaction.content = vue.interactionFormData.likeFormat;
  3818.                   }
  3819.                   else if(data.interaction.type == 'follow'){
  3820.                     data.interaction.content = vue.interactionFormData.followFormat;
  3821.                   }
  3822.                   else if(data.interaction.type == 'joinclub'){
  3823.                     data.interaction.content = vue.interactionFormData.joinclubFormat;
  3824.                   }
  3825.   
  3826.                 }
  3827.   
  3828.   
  3829.                 if(vue.interactionFormData.cleanInteractionHistoryHandler){
  3830.   
  3831.                   window.clearInterval(vue.interactionFormData.cleanInteractionHistoryHandler);
  3832.   
  3833.                 }
  3834.   
  3835.                 // 清除弹幕历史
  3836.                 vue.interactionFormData.cleanInteractionHistoryHandler = window.setInterval(function(){
  3837.   
  3838.   
  3839.                   let historyMinuteStartIndex = 0;
  3840.                   let historyCountStartIndex = vue.messageData.length - vue.interactionFormData.historyCount;
  3841.                   let sendTimeLower = new Date();
  3842.                   sendTimeLower.setMinutes(sendTimeLower.getMinutes()-vue.interactionFormData.historyMinutes);
  3843.   
  3844.                   vue.messageData.every(function(message, messageIndex){
  3845.   
  3846.                     if(message.interaction.sendTime>=sendTimeLower){
  3847.                       historyMinuteStartIndex = messageIndex;
  3848.                       return false;
  3849.                     }
  3850.                     else{
  3851.                       return true;
  3852.                     }
  3853.   
  3854.                   });
  3855.   
  3856.                   let historyStartIndex = Math.max(0, Math.max(historyMinuteStartIndex, historyCountStartIndex));
  3857.   
  3858.                   if(historyStartIndex==0){
  3859.                     return;
  3860.                   }
  3861.                   else{
  3862.                     vue.messageData.splice(0, historyStartIndex);
  3863.                   }
  3864.   
  3865.   
  3866.   
  3867.   
  3868.                 }, 5 * 1000);
  3869.   
  3870.               }
  3871.               else{
  3872.                 vue.interactionFormData.modifyContentFunc = null;
  3873.                 window.clearInterval(vue.interactionFormData.cleanInteractionHistoryHandler);
  3874.               }
  3875.   
  3876.             },
  3877.   
  3878.             consumeAudio(audioFormData, interactionData){
  3879.   
  3880.               var vue = this;
  3881.   
  3882.               // 弹幕合并
  3883.               if(interactionData.interaction[0].type == 'danmaku'){
  3884.                 interactionData.interaction = {
  3885.                   type : 'danmaku',
  3886.                   content : _.reduce(interactionData.interaction, function(text, interaction){
  3887.                       return text + (text==''?'':'<break time=\"500ms\"/>') + interaction.content;
  3888.                     }, ''),
  3889.                 };
  3890.   
  3891.               }
  3892.               // 礼物合并
  3893.               else if(interactionData.interaction[0].type == 'gift'){
  3894.                 // 有连击
  3895.                 let findIndex = _.findIndex(interactionData.interaction, {'doAnime': true});
  3896.                 interactionData.interaction = {
  3897.                   type : 'gift',
  3898.                   giftName : interactionData.interaction[0].giftName,
  3899.                   giftCount : findIndex==-1?_.sumBy(interactionData.interaction, 'giftCount'):interactionData.interaction[findIndex].giftCount,
  3900.                 }
  3901.   
  3902.               }
  3903.               // 其他合并
  3904.               else{
  3905.                 interactionData.interaction = interactionData.interaction[0];
  3906.               }
  3907.   
  3908.               audioFormData.interactions.push(interactionData);
  3909.               if(audioFormData.consumeing){
  3910.                 return;
  3911.               }
  3912.               audioFormData.consumeing = true;
  3913.   
  3914.               new Promise(function(resolve, reject) {
  3915.   
  3916.                 var readInteractionAudio = function(){
  3917.   
  3918.                   // 如果停止了语音
  3919.                   if(!audioFormData.enable){
  3920.                     audioFormData.interactions = [];
  3921.                     resolve();
  3922.                     return;
  3923.                   }
  3924.   
  3925.                   if(audioFormData.interactions.length==0){
  3926.                     audioFormData.consumeing = false;
  3927.                     resolve();
  3928.                     return;
  3929.                   }
  3930.   
  3931.                   var interactionData = audioFormData.interactions.splice(0, 1)[0];
  3932.                   vue.readInteractionAudio(audioFormData, interactionData, readInteractionAudio);
  3933.   
  3934.   
  3935.                 }
  3936.   
  3937.                 readInteractionAudio();
  3938.   
  3939.   
  3940.               }).then(function(){
  3941.   
  3942.               }).catch(function(err){
  3943.               });
  3944.   
  3945.   
  3946.             },
  3947.   
  3948.             readInteractionAudio(audioFormData, interactionData, callback){
  3949.   
  3950.   
  3951.               // 弹幕
  3952.               if(interactionData.interaction.type == 'danmaku'){
  3953.                 nls(`<speak>${audioFormData.danmakuFormat}</speak>`, audioFormData.voice[audioFormData.voice.length-1], audioFormData.speechRate - 500, audioFormData.speechVolume, {
  3954.                   '用户名' : interactionData.userName + '<break time=\"500ms\"/>',
  3955.                   '弹幕内容' : '<break time=\"500ms\"/>' + interactionData.interaction.content,
  3956.                 }, callback);
  3957.               }
  3958.               // 礼物
  3959.               else if(interactionData.interaction.type == 'gift'){
  3960.                 nls(`<speak>${audioFormData.giftFormat}</speak>`, audioFormData.voice[audioFormData.voice.length-1], audioFormData.speechRate - 500, audioFormData.speechVolume, {
  3961.                   '用户名' : interactionData.userName + '<break time=\"500ms\"/>',
  3962.                   '礼物数量' : interactionData.interaction.giftCount,
  3963.                   '礼物名称' : interactionData.interaction.giftName,
  3964.                 }, callback);
  3965.               }
  3966.               // 点赞
  3967.               else if(interactionData.interaction.type == 'like'){
  3968.                 nls(`<speak>${audioFormData.likeFormat}</speak>`, audioFormData.voice[audioFormData.voice.length-1], audioFormData.speechRate - 500, audioFormData.speechVolume, {
  3969.                   '用户名' : interactionData.userName + '<break time=\"500ms\"/>',
  3970.                 }, callback);
  3971.               }
  3972.               // 进入直播间
  3973.               else if(interactionData.interaction.type == 'enterroom'){
  3974.                 nls(`<speak>${audioFormData.enterroomFormat}</speak>`, audioFormData.voice[audioFormData.voice.length-1], audioFormData.speechRate - 500, audioFormData.speechVolume, {
  3975.                   '用户名' : interactionData.userName + '<break time=\"500ms\"/>',
  3976.                 }, callback);
  3977.               }
  3978.               // 关注
  3979.               else if(interactionData.interaction.type == 'follow'){
  3980.                 nls(`<speak>${audioFormData.followFormat}</speak>`, audioFormData.voice[audioFormData.voice.length-1], audioFormData.speechRate - 500, audioFormData.speechVolume, {
  3981.                   '用户名' : interactionData.userName + '<break time=\"500ms\"/>',
  3982.                 }, callback);
  3983.               }
  3984.               else{
  3985.                 callback();
  3986.               }
  3987.   
  3988.             },
  3989.   
  3990.   
  3991.             // 竞猜表单提交回调
  3992.             handleGuessFormSubmit : function(){
  3993.   
  3994.               var vue = this;
  3995.   
  3996.               this.$refs.form.validate((valid) => {
  3997.                 // 通过校验
  3998.                 if(valid){
  3999.   
  4000.                   // 添加id
  4001.                   vue.guessFormData.id = uuidv4();
  4002.   
  4003.                   vue.guessTableData.splice(0, 0, vue.guessFormData);
  4004.   
  4005.                   vue.guessFormDialogVisible = false;
  4006.                   vue.guessFormData = _.cloneDeep(vue.guessFormDataDefault);
  4007.   
  4008.                   vue.$message({
  4009.                     message : '添加竞猜成功',
  4010.                     type : 'info',
  4011.                     duration : 2000,
  4012.                   });
  4013.   
  4014.                   // 进入竞猜
  4015.                   vue.openGuessStartDialog(vue.guessTableData[0]);
  4016.   
  4017.                 }
  4018.                 else{
  4019.   
  4020.                   this.$message({
  4021.                     message : '提交失败，请检查是否填写正确',
  4022.                     type : 'error',
  4023.                   });
  4024.                 }
  4025.               });
  4026.             },
  4027.   
  4028.             // 竞猜开始下一个问题回调
  4029.             handleGuessDanmakuSubmit : function(){
  4030.   
  4031.   
  4032.               var vue = this;
  4033.   
  4034.               this.guessDanmakuDialogVisible = true;
  4035.   
  4036.               this.$nextTick(function(){
  4037.                 this.activeGuess.guessDanmakuList = [];
  4038.   
  4039.                 var danmakuList = [];
  4040.                 var danmakuUserMapper = {};
  4041.                 var danmakuContentMapper = {};
  4042.                 var hoverDanmakuItem = null;
  4043.   
  4044.                 var randomId = uuidv4();
  4045.   
  4046.                 // 随机给定一个id
  4047.                 var containerEle = document.querySelector('.guess-danmaku-dialog .guess-danmaku-container');
  4048.                 containerEle.setAttribute('id', 'R' + randomId);
  4049.   
  4050.                 this.activeGuess.danmaku = new EasyDanmaku({
  4051.                   el: `#R${randomId}`,
  4052.                   // 彩色弹幕
  4053.                   colourful : false,
  4054.                   // 弹幕行数
  4055.                   line : 10,
  4056.                   // 弹幕样式
  4057.                   wrapperStyle : 'guess-danmaku-danmu',
  4058.                   // 弹幕播放速度
  4059.                   speed : 3,
  4060.                   // 播放一次时长
  4061.                   runtime : 3,
  4062.                   // 鼠标悬浮暂停
  4063.                   hover : true,
  4064.                   coefficient : 5,
  4065.                 });
  4066.   
  4067.   
  4068.                 // 添加监听
  4069.                 this.activeGuess.messageHandler = callbackManager.register('command:提问', function(data){
  4070.                   // 非弹幕
  4071.                   if(data.interaction.type != 'danmaku'){
  4072.                     return;
  4073.                   }
  4074.   
  4075.                   // 只有一次提问机会
  4076.                   if(data.uid in danmakuUserMapper){
  4077.                     return;
  4078.                   }
  4079.   
  4080.                   // 不允许重复提问
  4081.                   if(data.interaction.content in danmakuContentMapper){
  4082.                     return;
  4083.                   }
  4084.   
  4085.                   // 达到单个用户可提问上限
  4086.                   if(vue.activeGuess.maxGuessPerUser>0){
  4087.                     if(_.filter(vue.activeGuess.guessList, {uid:data.uid}).length>=vue.activeGuess.maxGuessPerUser){
  4088.                       return;
  4089.                     }
  4090.                   }
  4091.   
  4092.                   var danmakuItem = _.cloneDeep(data);
  4093.                   danmakuList.push(danmakuItem);
  4094.                   vue.activeGuess.danmaku.send(danmakuItem.interaction.content);
  4095.                   danmakuItem.sendTime = new Date();
  4096.                   danmakuUserMapper[danmakuItem.uid] = true;
  4097.                   danmakuContentMapper[danmakuItem.interaction.content] = danmakuItem;
  4098.   
  4099.                 });
  4100.   
  4101.   
  4102.                 // 鼠标事件回调
  4103.                 $('.guess-danmaku-container').on('mouseenter', '.guess-danmaku-danmu', function(e){
  4104.                   var danmakuItem = danmakuContentMapper[e.target.innerText];
  4105.                   if(danmakuItem){
  4106.                     danmakuItem.hover = true;
  4107.                     hoverDanmakuItem = danmakuItem;
  4108.   
  4109.                     // 如果是手动选择模式，添加class
  4110.                     if(vue.activeGuess.chooseWay == 'manual'){
  4111.                       e.target.classList.add('is-select');
  4112.                     }
  4113.   
  4114.                   }
  4115.                 });
  4116.                 $('.guess-danmaku-container').on('mouseout', '.guess-danmaku-danmu', function(e){
  4117.                   if(hoverDanmakuItem){
  4118.                     hoverDanmakuItem.hover = false;
  4119.                     hoverDanmakuItem.sendTime = new Date();
  4120.                     hoverDanmakuItem = null;
  4121.   
  4122.                     // 如果是手动选择模式，删除class
  4123.                     if(vue.activeGuess.chooseWay == 'manual'){
  4124.                       e.target.classList.remove('is-select');
  4125.                     }
  4126.                   }
  4127.                 });
  4128.                 $('.guess-danmaku-container').on('click', '.guess-danmaku-danmu', function(e){
  4129.                   // 只有挑选方式为手动时才可点击
  4130.                   if(hoverDanmakuItem && vue.activeGuess.chooseWay == 'manual'){
  4131.   
  4132.                     // 暂停播放
  4133.                     vue.activeGuess.danmaku.pause();
  4134.   
  4135.                     var hoverDanmakuItem_ = hoverDanmakuItem;
  4136.   
  4137.                     hoverDanmakuItem_.guess = hoverDanmakuItem_.interaction.content;
  4138.   
  4139.                     vue.$confirm(`${hoverDanmakuItem_.guess}${hoverDanmakuItem_.guess.endsWith('?')?'':'?'}`, '是否命中', {
  4140.                       confirmButtonText: '命中',
  4141.                       cancelButtonText: '未命中',
  4142.                       closeOnClickModal : false,
  4143.                       closeOnPressEscape : false,
  4144.                     }).then(() => {
  4145.                       hoverDanmakuItem_.isValid = true;
  4146.                       hoverDanmakuItem_.index = vue.activeGuess.guessIndex;
  4147.                       vue.activeGuess.guessIndex += 1;
  4148.   
  4149.                       vue.activeGuess.guessList.splice(0, 0, hoverDanmakuItem_);
  4150.                       vue.activeGuess.matchGuessList.splice(0, 0, hoverDanmakuItem_);
  4151.                       // 关闭弹窗
  4152.                       vue.guessDanmakuDialogVisible = false;
  4153.                     }).catch((action) => {
  4154.                       if(action=='cancel'){
  4155.                         hoverDanmakuItem_.isValid = false;
  4156.                         hoverDanmakuItem_.index = vue.activeGuess.guessIndex;
  4157.                         vue.activeGuess.guessIndex += 1;
  4158.   
  4159.                         vue.activeGuess.guessList.splice(0, 0, hoverDanmakuItem_);
  4160.                         // 关闭弹窗
  4161.                         vue.guessDanmakuDialogVisible = false;
  4162.                       }
  4163.                       else{
  4164.   
  4165.                       }
  4166.                     });
  4167.   
  4168.                   }
  4169.                 });
  4170.   
  4171.                 // 开启轮询
  4172.                 this.activeGuess.danmakuLoopHandler = window.setInterval(function(){
  4173.   
  4174.                   var now = new Date();
  4175.                   var findIndex = _.findIndex(danmakuList, function(danmaku){
  4176.   
  4177.                     // 距离上次发送已经超过5秒
  4178.                     return now - danmaku.sendTime >= 3*1000 && !danmaku.hover;
  4179.   
  4180.                   });
  4181.   
  4182.                   if(findIndex != -1){
  4183.                     vue.activeGuess.danmaku.send(danmakuList[findIndex].interaction.content);
  4184.                     danmakuList[findIndex].sendTime = now;
  4185.                   }
  4186.   
  4187.   
  4188.                 }, 50);
  4189.   
  4190.   
  4191.   
  4192.                 // 如果是随机选择，随机选中
  4193.                 if(vue.activeGuess.chooseWay == 'random'){
  4194.                   var now = new Date();
  4195.                   // 竞猜问题倒计时结束
  4196.                   vue.activeGuess.handleGuessDanmakuCountdownFinish = function(){
  4197.   
  4198.                     // 暂停随机选中
  4199.                     window.clearInterval(vue.activeGuess.randomSelectHandler);
  4200.                     // 暂停弹幕
  4201.                     vue.activeGuess.danmaku.pause();
  4202.   
  4203.                     // 获取选中
  4204.                     var selectedEle = containerEle.querySelector('.is-select');
  4205.   
  4206.                     // 未选中信息
  4207.                     if(selectedEle==null){
  4208.                       vue.$message({
  4209.                         type : 'error',
  4210.                         message : '无法选中弹幕信息，本次问题获取失败',
  4211.                       });
  4212.                       // 关闭弹窗
  4213.                       vue.guessDanmakuDialogVisible = false;
  4214.   
  4215.                     }
  4216.                     else{
  4217.                       // 获取对应弹幕信息
  4218.                       var danmakuItem = danmakuContentMapper[selectedEle.innerText];
  4219.   
  4220.                       danmakuItem.guess = danmakuItem.interaction.content;
  4221.   
  4222.                       vue.$confirm(`${danmakuItem.guess}${danmakuItem.guess.endsWith('?')?'':'?'}`, '是否命中', {
  4223.                         distinguishCancelAndClose : true,
  4224.                         confirmButtonText: '命中',
  4225.                         cancelButtonText: '未命中',
  4226.                         closeOnClickModal : false,
  4227.                         closeOnPressEscape : false,
  4228.                       }).then(() => {
  4229.                         danmakuItem.isValid = true;
  4230.                         // 添加序号
  4231.                         danmakuItem.index = vue.activeGuess.guessIndex;
  4232.                         vue.activeGuess.guessIndex += 1;
  4233.   
  4234.                         vue.activeGuess.guessList.splice(0, 0, danmakuItem);
  4235.                         vue.activeGuess.matchGuessList.splice(0, 0, danmakuItem);
  4236.                         // 关闭弹窗
  4237.                         vue.guessDanmakuDialogVisible = false;
  4238.                       }).catch((action ) => {
  4239.                         // 未命中
  4240.                         if(action=='cancel'){
  4241.                           danmakuItem.isValid = false;
  4242.                           danmakuItem.index = vue.activeGuess.guessIndex;
  4243.                           vue.activeGuess.guessIndex += 1;
  4244.                           vue.activeGuess.guessList.splice(0, 0, danmakuItem);
  4245.                           // 关闭弹窗
  4246.                           vue.guessDanmakuDialogVisible = false;
  4247.                         }
  4248.                         else{
  4249.                         }
  4250.                       });
  4251.                     }
  4252.   
  4253.                   };
  4254.                   vue.activeGuess.randomSelectHandler = window.setInterval(function(){
  4255.   
  4256.                     // 删除已选中
  4257.                     var selectedEle = containerEle.querySelector('.is-select');
  4258.                     if(selectedEle){
  4259.                       selectedEle.classList.remove('is-select');
  4260.                     }
  4261.   
  4262.                     if(containerEle.children.length>0){
  4263.   
  4264.                       // 如果未有选中，或者没有兄弟节点，则选中第一个
  4265.                       if(selectedEle==null || selectedEle.nextElementSibling==null){
  4266.                         selectedEle =  containerEle.children[0];
  4267.                       }
  4268.                       // 否则选中下一个
  4269.                       else{
  4270.                         selectedEle = selectedEle.nextElementSibling;
  4271.                       }
  4272.   
  4273.                       selectedEle.classList.add('is-select');
  4274.                     }
  4275.   
  4276.                   }, 100);
  4277.   
  4278.                   vue.$refs.guessDanmakuDialog.$nextTick(function(){
  4279.                     // 倒计时文字
  4280.                     $('#guess-danmaku-countdown-text')
  4281.                       .countdown(new Date().getTime() + vue.activeGuess.countdown*1000, function(event){$(this).html(event.strftime('【%M:%S】'))})
  4282.                       .on('finish.countdown', vue.activeGuess.handleGuessDanmakuCountdownFinish);
  4283.   
  4284.                   });
  4285.   
  4286.                 }
  4287.   
  4288.   
  4289.               });
  4290.             },
  4291.   
  4292.             openGuessStartDialog : function(guessFormData){
  4293.   
  4294.               var vue = this;
  4295.   
  4296.               this.guessStartDialogVisible = true;
  4297.               this.activeGuess = guessFormData;
  4298.   
  4299.               var danmakuContentMapper = {};
  4300.               var isInDirectGuess = false;
  4301.   
  4302.               // 监听狙击消息
  4303.               this.activeGuess.directGuessMessageHandler = callbackManager.register('command:狙击', function(data){
  4304.                 // 当前是否位于狙击状态
  4305.                 if(isInDirectGuess){
  4306.                   return;
  4307.                 }
  4308.   
  4309.                 // 非弹幕
  4310.                 if(data.interaction.type != 'danmaku'){
  4311.                   return;
  4312.                 }
  4313.   
  4314.                 // 已结束竞猜
  4315.                 if(vue.activeGuess.status != '进行中'){
  4316.                   return;
  4317.                 }
  4318.   
  4319.                 // 达到狙击总上限
  4320.                 if(vue.activeGuess.maxDirectGuess > 0 && vue.activeGuess.directGuessList.length>=vue.activeGuess.maxDirectGuess){
  4321.                   return;
  4322.                 }
  4323.   
  4324.                 // 达到单个用户可狙击上限
  4325.                 if(vue.activeGuess.maxDirectGuessPerUser>0 && _.filter(vue.activeGuess.directGuessList, {uid:data.uid}).length >= vue.activeGuess.maxDirectGuessPerUser ){
  4326.                   return;
  4327.                 }
  4328.   
  4329.                 // 不允许重复提问
  4330.                 if(data.interaction.content in danmakuContentMapper){
  4331.                   return;
  4332.                 }
  4333.   
  4334.                 isInDirectGuess = true;
  4335.                 var danmakuItem = _.cloneDeep(data);
  4336.                 danmakuItem.guess = data.interaction.content;
  4337.                 danmakuItem.sendTime = new Date();
  4338.                 danmakuContentMapper[danmakuItem.interaction.content] = danmakuItem;
  4339.   
  4340.                 // 打开询问
  4341.                 vue.$confirm(`${danmakuItem.guess}${danmakuItem.guess.endsWith('?')?'':'?'}`, '狙击！是否命中？', {
  4342.                   confirmButtonText: '命中',
  4343.                   cancelButtonText: '未命中',
  4344.                   closeOnClickModal : false,
  4345.                   closeOnPressEscape : false,
  4346.                 }).then(() => {
  4347.                   danmakuItem.isValid = true;
  4348.                   danmakuItem.index = vue.activeGuess.guessIndex;
  4349.                   vue.activeGuess.guessIndex += 1;
  4350.   
  4351.                   vue.activeGuess.directGuessList.splice(0, 0, danmakuItem);
  4352.                   // 关闭弹窗
  4353.                   vue.guessDanmakuDialogVisible = false;
  4354.                   isInDirectGuess = false;
  4355.   
  4356.                   vue.activeGuess.winner = danmakuItem;
  4357.                   // 修改状态
  4358.                   vue.activeGuess.status = '竞猜成功';
  4359.                   vue.$message({
  4360.                     type : 'info',
  4361.                     message : '竞猜成功！',
  4362.                   });
  4363.   
  4364.                 }).catch((action) => {
  4365.                   if(action=='cancel'){
  4366.                     danmakuItem.isValid = false;
  4367.                     danmakuItem.index = vue.activeGuess.guessIndex;
  4368.                     vue.activeGuess.guessIndex += 1;
  4369.   
  4370.                     vue.activeGuess.directGuessList.splice(0, 0, danmakuItem);
  4371.                     isInDirectGuess = false;
  4372.   
  4373.                     // 达到狙击上限，竞猜失败
  4374.                     if(vue.activeGuess.maxDirectGuess>0 && vue.activeGuess.maxDirectGuess<=vue.activeGuess.directGuessList.length){
  4375.                       // 修改状态
  4376.                       vue.activeGuess.status = '竞猜失败';
  4377.                       vue.$message({
  4378.                         type : 'error',
  4379.                         message : '竞猜失败！',
  4380.                       });
  4381.                     }
  4382.   
  4383.                   }
  4384.                   else{
  4385.   
  4386.                   }
  4387.                 });
  4388.   
  4389.               });
  4390.   
  4391.             },
  4392.             // 竞猜弹幕弹窗关闭回调
  4393.             handleGuessDanmakuDialogClose : function(){
  4394.   
  4395.               delete this.activeGuess.danmaku;
  4396.   
  4397.               if(this.activeGuess.messageHandler){
  4398.                 callbackManager.cancel(this.activeGuess.messageHandler);
  4399.                 this.activeGuess.messageHandler = null;
  4400.               }
  4401.   
  4402.               window.clearInterval(this.activeGuess.danmakuLoopHandler);
  4403.               this.activeGuess.danmakuLoopHandler = null;
  4404.   
  4405.               if(this.activeGuess.randomSelectHandler){
  4406.                 window.clearInterval(this.activeGuess.randomSelectHandler);
  4407.                 this.activeGuess.randomSelectHandler = null;
  4408.               }
  4409.               if(this.activeGuess.handleGuessDanmakuCountdownFinish){
  4410.                 this.activeGuess.handleGuessDanmakuCountdownFinish = null;
  4411.               }
  4412.             },
  4413.             // 竞猜详情弹窗关闭
  4414.             handleGuessStartDialogClose : function(){
  4415.               // 关闭狙击消息获取
  4416.               if(this.activeGuess.directGuessMessageHandler){
  4417.                 callbackManager.cancel(this.activeGuess.directGuessMessageHandler);
  4418.                 this.activeGuess.directGuessMessageHandler = null;
  4419.               }
  4420.   
  4421.               this.activeGuess = null;
  4422.   
  4423.             },
  4424.   
  4425.             // 获取投稿数据
  4426.             getDougaList(){
  4427.   
  4428.               var vue = this;
  4429.   
  4430.               var pageSize = null;
  4431.               if(this.lotteryFormData.dougaType == 'video'){
  4432.                 pageSize = 10;
  4433.               }
  4434.               else if(this.lotteryFormData.dougaType == 'article'){
  4435.                 pageSize = 10;
  4436.               }
  4437.   
  4438.               var params = {
  4439.                 'quickViewId' : `ac-space-${this.lotteryFormData.dougaType}-list`,
  4440.                 'reqID': this.reqId,
  4441.                 'ajaxpipe': 1,
  4442.                 'type': this.lotteryFormData.dougaType,
  4443.                 'order': 'newest',
  4444.                 'page' : this.lotteryFormData.dougaListPage,
  4445.                 'pageSize': pageSize,
  4446.               };
  4447.   
  4448.               this.reqId += 1;
  4449.               vue.lotteryFormData.dougaListLoading = true;
  4450.               commonRequrest(config.ACFUN_SERVER + config.URLS.ACFUN_USER.SPACE + `/${this.uid}`, 'get', params, true, function(isSuccess, data){
  4451.   
  4452.   
  4453.                 // 获取成功
  4454.                 if(isSuccess){
  4455.   
  4456.   
  4457.                   document.querySelector('#douga-result').innerHTML = JSON.parse(data.replace('/*<!-- fetch-stream -->*/', ''))['html'];
  4458.   
  4459.                   var dougaEleList = null;
  4460.   
  4461.                   // 查看视频投稿
  4462.                   if(params.type == 'video'){
  4463.                     dougaEleList = document.querySelectorAll('#douga-result #ac-space-video-list a');
  4464.                   }
  4465.                   // 查看文章投稿
  4466.                   else if(params.type == 'article'){
  4467.                     dougaEleList = document.querySelectorAll('#douga-result #ac-space-article-list article');
  4468.                   }
  4469.   
  4470.   
  4471.                   // 无结果
  4472.                   if(!dougaEleList || dougaEleList.length==0){
  4473.                     vue.lotteryFormData.dougaListDisabled = true;
  4474.                     vue.lotteryFormData.dougaListNoMore = true;
  4475.                   }
  4476.                   else{
  4477.   
  4478.                     var dougaList = [];
  4479.   
  4480.                     // 视频投稿
  4481.                     if(params.type == 'video'){
  4482.   
  4483.                       dougaEleList.forEach(function(dougaEle){
  4484.   
  4485.                         dougaList.push({
  4486.                           id : dougaEle.attributes.href.value.split('/').pop().replace('ac', ''),
  4487.                           href : config.ACFUN_SERVER + dougaEle.attributes.href.value,
  4488.                           cover : dougaEle.querySelector('img').src,
  4489.                           title : dougaEle.querySelector('figcaption .title').title,
  4490.                           uploadDateText : dougaEle.querySelector('figcaption .date').innerText,
  4491.                           playCountText : dougaEle.querySelector('figcaption .play-info').innerText.match(/观看(?<count>[0-9\.万]+)/).groups['count'],
  4492.                         });
  4493.                       });
  4494.   
  4495.                     }
  4496.                     // 文章投稿
  4497.                     else if(params.type == 'article'){
  4498.   
  4499.                       dougaEleList.forEach(function(dougaEle){
  4500.   
  4501.   
  4502.                         dougaList.push({
  4503.                           id : dougaEle.querySelector('a').attributes.href.value.split('/').pop().replace('ac', ''),
  4504.                           href : config.ACFUN_SERVER + dougaEle.querySelector('a').attributes.href.value,
  4505.                           title : dougaEle.querySelector('a').title,
  4506.                           uploadDateText : dougaEle.querySelector('.info').innerText.match(/发布于\s*(?<date>\d{4}\/\d{2}\/\d{2})/).groups['date'],
  4507.                           playCountText : dougaEle.querySelector('.info').innerText.match(/(?<count>[0-9\.万]+)人围观/).groups['count'],
  4508.                         });
  4509.                       });
  4510.                     }
  4511.   
  4512.   
  4513.                     vue.lotteryFormData.dougaList.splice(vue.lotteryFormData.dougaList.length, 0, ...dougaList);
  4514.   
  4515.                     vue.lotteryFormData.dougaListPage += 1;
  4516.   
  4517.                   }
  4518.   
  4519.   
  4520.                 }
  4521.                 else{
  4522.   
  4523.                   vue.lotteryFormData.dougaListDisabled = true;
  4524.                   vue.lotteryFormData.dougaListNoMore = true;
  4525.   
  4526.                 }
  4527.   
  4528.                 vue.lotteryFormData.dougaListLoading = false;
  4529.   
  4530.   
  4531.               });
  4532.             },
  4533.   
  4534.             // 刷新投稿数据
  4535.             refreshDougaList(){
  4536.   
  4537.               this.lotteryFormData.dougaList = [];
  4538.               this.lotteryFormData.dougaListPage = 1;
  4539.               this.lotteryFormData.dougaListDisabled = false;
  4540.               this.lotteryFormData.dougaListLoading = false;
  4541.               this.lotteryFormData.dougaListNoMore = false;
  4542.               this.lotteryFormData.dougaListActiveIndex = null;
  4543.               this.getDougaList();
  4544.   
  4545.             },
  4546.             handleDougaListItemClick(dougaIndex){
  4547.               // 点击已选中投稿表示取消选中
  4548.               if(this.lotteryFormData.dougaListActiveIndex == dougaIndex){
  4549.                 this.lotteryFormData.dougaListActiveIndex = null;
  4550.               }
  4551.               else{
  4552.                 this.lotteryFormData.dougaListActiveIndex = dougaIndex;
  4553.   
  4554.               }
  4555.             },
  4556.             handleDougaListItemDetailClick(dougaIndex){
  4557.               window.open(this.lotteryFormData.dougaList[dougaIndex].href, '_blank');
  4558.             },
  4559.   
  4560.             // 获取投稿
  4561.             getCommentList(douga, all, callback){
  4562.   
  4563.               var vue = this;
  4564.   
  4565.               var params = {
  4566.                 sourceId : douga.id,
  4567.                 sourceType : 3,
  4568.                 page : 1,
  4569.                 pivotCommentId : 0,
  4570.                 supportZtEmot : true,
  4571.               };
  4572.   
  4573.               var fetch = true;
  4574.               var commentList = [];
  4575.               var preCommentId = douga.commentList && douga.commentList.length>0?douga.commentList[0].id:null;
  4576.   
  4577.               var getData = function(){
  4578.   
  4579.                 commonRequrest(config.ACFUN_SERVER + config.URLS.DOUGA.COMMENT, 'get', params, true, function(isSuccess, data){
  4580.   
  4581.                   // 获取失败
  4582.                   if(!isSuccess){
  4583.                     callback(false, false, douga.commentCount, params.page, douga.commentListTotalPage);
  4584.                     fetch = false;
  4585.                   }
  4586.   
  4587.                   else{
  4588.   
  4589.                     data = JSON.parse(data);
  4590.   
  4591.                     // 返回错误
  4592.                     if(data.result != 0){
  4593.                       fetch = false;
  4594.                       return;
  4595.                     }
  4596.   
  4597.                     // 设置评论数量
  4598.                     douga.commentCount = data.commentCount;
  4599.                     douga.commentListTotalPage = data.totalPage;
  4600.   
  4601.                     data.rootComments.every(function(comment, commentIndex){
  4602.   
  4603.                       // 如果是已经获取过的评论，结束获取
  4604.                       if(comment.commentId == preCommentId){
  4605.                         fetch = false;
  4606.                         return false;
  4607.                       }
  4608.   
  4609.                       // 如果是未获取过的用户，添加
  4610.                       if(!(comment.userId in userInfo)){
  4611.                         userInfo[comment.userId] = {
  4612.                           uid : comment.userId,
  4613.                           userName : comment.userName,
  4614.                           photo : comment.headUrl[0].url,
  4615.                         };
  4616.                       }
  4617.   
  4618.                       commentList.push({
  4619.                         id : comment.commentId,
  4620.                         uid : comment.userId,
  4621.                         userName : comment.userName,
  4622.                         photo : comment.headUrl[0].url,
  4623.                         content : comment.content.replace(/\[emot=[^\[\]]*\]/g, ''),
  4624.                         floor : comment.floor,
  4625.                         date : moment(comment.timestamp).toDate(),
  4626.                         dateText : moment(comment.timestamp).format('MM-DD HH:mm'),
  4627.                       });
  4628.   
  4629.                       return true;
  4630.   
  4631.                     });
  4632.   
  4633.                     // 获取结束
  4634.                     if(params.page == douga.commentListTotalPage){
  4635.                       fetch = false;
  4636.                     }
  4637.   
  4638.   
  4639.                   }
  4640.   
  4641.   
  4642.                   if(!all){
  4643.                     fetch = false;
  4644.                   }
  4645.                   // 获取完毕
  4646.                   else if(params.page == douga.commentListTotalPage){
  4647.                     fetch = false;
  4648.                   }
  4649.   
  4650.                   // 继续获取
  4651.                   if(fetch){
  4652.                     params.page += 1;
  4653.                     // 回调
  4654.                     if(_.isFunction(callback)){
  4655.                       callback(true, false, douga.commentCount, params.page, douga.commentListTotalPage);
  4656.                     }
  4657.   
  4658.                     getData();
  4659.   
  4660.                   }
  4661.                   // 获取结束
  4662.                   else{
  4663.   
  4664.                     // 添加评论
  4665.                     if(!douga.commentList){
  4666.                       douga.commentList = [];
  4667.                     }
  4668.   
  4669.                     if(commentList.length>0){
  4670.                       douga.commentList.splice(0, 0, ...commentList);
  4671.                     }
  4672.   
  4673.                     // 回调
  4674.                     if(_.isFunction(callback)){
  4675.                       callback(true, true, douga.commentCount, params.page, douga.commentListTotalPage);
  4676.                     }
  4677.   
  4678.   
  4679.   
  4680.                   }
  4681.   
  4682.   
  4683.   
  4684.   
  4685.                 });
  4686.   
  4687.               }
  4688.   
  4689.               // 获取数据
  4690.               getData();
  4691.   
  4692.             },
  4693.             clickMessage : function(message, isDouga){
  4694.   
  4695.               // 弹幕
  4696.               if(message.interaction.type == 'danmaku'){
  4697.   
  4698.                 // 点击稿件，则复制稿件ac号
  4699.                 if(isDouga){
  4700.                   clipboard.writeText(message.interaction.acSeries);
  4701.                   this.$message({
  4702.                     message : '已复制ac号：' + message.interaction.acSeries,
  4703.                     type : 'info',
  4704.                     duration : 2000,
  4705.                   });
  4706.                 }
  4707.                 // 否则复制弹幕内容
  4708.                 else{
  4709.                   clipboard.writeText(message.interaction.content);
  4710.                   this.$message({
  4711.                     message : '已复制弹幕：' + message.interaction.content,
  4712.                     type : 'info',
  4713.                     duration : 2000,
  4714.                   });
  4715.                 }
  4716.   
  4717.               }
  4718.   
  4719.             },
  4720.             getDougaByAcSeries(acSeries, callback){
  4721.   
  4722.               let vue = this;
  4723.   
  4724.               // 获取视频
  4725.               this.getVideoByAcSeries(acSeries, function(isSuccess, data){
  4726.   
  4727.                 // 获取成功
  4728.                 if(isSuccess){
  4729.   
  4730.                   if(_.isFunction(callback)){
  4731.                     callback(isSuccess, data);
  4732.                   }
  4733.   
  4734.                 }
  4735.                 // 获取失败，则获取文章
  4736.                 else{
  4737.   
  4738.                   // 获取文章
  4739.                   vue.getArticleByAcSeries(acSeries, function(isSuccess, data){
  4740.   
  4741.                     // 获取成功
  4742.                     if(isSuccess){
  4743.   
  4744.                       if(_.isFunction(callback)){
  4745.                         callback(isSuccess, data);
  4746.                       }
  4747.   
  4748.                     }
  4749.                     else{
  4750.   
  4751.                       // 获取番剧
  4752.                       vue.getBangumiByAcSeries(acSeries, function(isSuccess, data){
  4753.   
  4754.                         // 获取成功
  4755.                         if(isSuccess){
  4756.   
  4757.                           if(_.isFunction(callback)){
  4758.                             callback(isSuccess, data);
  4759.                           }
  4760.   
  4761.                         }
  4762.                         else{
  4763.                           if(_.isFunction(callback)){
  4764.                             callback(isSuccess, data);
  4765.                           }
  4766.                         }
  4767.   
  4768.                       });
  4769.   
  4770.   
  4771.                     }
  4772.   
  4773.   
  4774.                   });
  4775.   
  4776.                 }
  4777.   
  4778.               });
  4779.   
  4780.             },
  4781.             getVideoByAcSeries(acSeries, callback){
  4782.   
  4783.               commonRequrest(config.ACFUN_SERVER + config.URLS.DOUGA.VIDEO + `/ac${acSeries}`, 'get', null, true, function(isSuccess, data){
  4784.   
  4785.   
  4786.                 // 获取成功
  4787.                 if(isSuccess){
  4788.   
  4789.                   var match = data.match(new RegExp('window.videoInfo = (?<data>.+)'));
  4790.                   // 匹配成功
  4791.                   if(match){
  4792.                     eval('var videoInfo = ' + match.groups.data);
  4793.   
  4794.                     if(_.isFunction(callback)){
  4795.                       callback(true, {
  4796.                         type : 'video',
  4797.                         title : videoInfo.title,
  4798.                         cover : videoInfo.coverUrl,
  4799.                         channel : videoInfo.channel,
  4800.                         description : videoInfo.description,
  4801.                         danmakuCount : videoInfo.danmakuCount,
  4802.                         danmakuCountText : videoInfo.danmakuCountShow,
  4803.                         playCount : videoInfo.viewCount,
  4804.                         playCountText : videoInfo.viewCountShow,
  4805.                         uid : parseInt(videoInfo.user.id),
  4806.                         userName : videoInfo.user.name,
  4807.                       });
  4808.                     }
  4809.   
  4810.                   }
  4811.                   else{
  4812.                     if(_.isFunction(callback)){
  4813.                       callback(false);
  4814.                     }
  4815.                   }
  4816.   
  4817.                 }
  4818.                 else{
  4819.   
  4820.                   if(_.isFunction(callback)){
  4821.                     callback(false);
  4822.                   }
  4823.                 }
  4824.   
  4825.   
  4826.   
  4827.               });
  4828.   
  4829.             },
  4830.             getArticleByAcSeries(acSeries, callback){
  4831.   
  4832.               commonRequrest(config.ACFUN_SERVER + config.URLS.DOUGA.ARTICLE + `/ac${acSeries}`, 'get', null, true, function(isSuccess, data){
  4833.   
  4834.   
  4835.                 // 获取成功
  4836.                 if(isSuccess){
  4837.   
  4838.   
  4839.                   var match = data.match(new RegExp('window.articleInfo = (?<data>.+)'));
  4840.                   // 匹配成功
  4841.                   if(match){
  4842.                     eval('var articleInfo = ' + match.groups.data);
  4843.   
  4844.                     if(_.isFunction(callback)){
  4845.                       callback(true, {
  4846.                         type : 'article',
  4847.                         title : articleInfo.title,
  4848.                         // cover : articleInfo.coverUrl,
  4849.                         description : articleInfo.description,
  4850.                         channel : articleInfo.channel,
  4851.                         playCount : articleInfo.viewCount,
  4852.                         playCountText : articleInfo.formatViewCount,
  4853.                         uid : parseInt(articleInfo.user.id),
  4854.                         userName : articleInfo.user.name,
  4855.                       });
  4856.                     }
  4857.   
  4858.                   }
  4859.                   else{
  4860.                     if(_.isFunction(callback)){
  4861.                       callback(false);
  4862.                     }
  4863.                   }
  4864.   
  4865.                 }
  4866.                 else{
  4867.   
  4868.                   if(_.isFunction(callback)){
  4869.                     callback(false);
  4870.                   }
  4871.                 }
  4872.   
  4873.   
  4874.   
  4875.               });
  4876.   
  4877.             },
  4878.             getBangumiByAcSeries(acSeries, callback){
  4879.   
  4880.               commonRequrest(config.ACFUN_SERVER + config.URLS.DOUGA.BANGUMI + `/aa${acSeries}`, 'get', null, true, function(isSuccess, data){
  4881.   
  4882.   
  4883.                 // 获取成功
  4884.                 if(isSuccess){
  4885.   
  4886.   
  4887.                   var match = data.match(new RegExp('window.bangumiData = (?<data>.+)'));
  4888.                   // 匹配成功
  4889.                   if(match){
  4890.                     eval('var bangumiData = ' + match.groups.data);
  4891.   
  4892.                     if(_.isFunction(callback)){
  4893.                       callback(true, {
  4894.                         type : 'bangumi',
  4895.                         title : bangumiData.bangumiTitle,
  4896.                         acfunOnly : bangumiData.acfunOnly,
  4897.                         cover : bangumiData.bangumiCoverImageH,
  4898.                         description : bangumiData.bangumiIntro,
  4899.                         channel : bangumiData.channel,
  4900.                         playCount : bangumiData.playCount,
  4901.                         playCountText : bangumiData.playCountShow,
  4902.                         stowCount : bangumiData.stowCount,
  4903.                         stowCountText : bangumiData.stowCountShow,
  4904.                       });
  4905.                     }
  4906.   
  4907.                   }
  4908.                   else{
  4909.                     if(_.isFunction(callback)){
  4910.                       callback(false);
  4911.                     }
  4912.                   }
  4913.   
  4914.                 }
  4915.                 else{
  4916.   
  4917.                   if(_.isFunction(callback)){
  4918.                     callback(false);
  4919.                   }
  4920.                 }
  4921.   
  4922.   
  4923.   
  4924.               });
  4925.   
  4926.             },
  4927.             // 发送一条测试用的弹幕
  4928.             pushTestMessage : function(type){
  4929.               var message = {
  4930.                 uid : 37693149,
  4931.                 vup : false,
  4932.                 userName : '特工澪',
  4933.                 badgeName : '505团',
  4934.                 badgeLevel : 999,
  4935.                 badgeColor : 'black',
  4936.                 photo : 'https://tx-free-imgs2.acfun.cn/kimg/EJjM1y8qPQoFYWNmdW4SBWltYWdlGi0zNzY5MzE0OV8yYTE4YjBiZTZhZTM0OTc1OTkyNDIyZGFhMTdlNzA0MS5wbmc.png',
  4937.                 interaction : {
  4938.                   type: type,
  4939.                   sendTime : new Date(),
  4940.                   id: uuidv4(),
  4941.                   giftName: '猴岛',
  4942.                   giftCount: 1,
  4943.                   content: type == 'danmaku'?'听我说👂👂👂谢谢你🙏🙏🙏因为有你👉👉👉温暖了四季🌈🌈🌈谢谢你🙏🙏🙏感谢有你👉👉👉世界更美丽🌏🌏🌏我要谢谢你🙏🙏🙏因为有你👉👉👉爱常在心底💃💃💃谢谢你 🙏🙏🙏感谢有你🙇♂🙇♂🙇♂把幸福传递 ac32814163':'',
  4944.                 },
  4945.               };
  4946.               if(!(message.uid in userInfo)){
  4947.                 userInfo[message.uid] = {
  4948.                   userName: message.userName,
  4949.                   photo: message.photo,
  4950.                 };
  4951.               }
  4952.               callbackManager.feed('message', message);
  4953.             },
  4954.             pushTestDanmakuMessage: function(){
  4955.               this.pushTestMessage('danmaku');
  4956.             },
  4957.             pushTestGiftMessage: function(){
  4958.               this.pushTestMessage('gift');
  4959.             },
  4960.             pushTestLikeMessage: function(){
  4961.               this.pushTestMessage('like');
  4962.             },
  4963.             pushTestEnterRoomMessage: function(){
  4964.               this.pushTestMessage('enterroom');
  4965.             },
  4966.             pushTestFollowMessage: function(){
  4967.               this.pushTestMessage('follow');
  4968.             },
  4969.             pushTestJoinClubMessage: function(){
  4970.               this.pushTestMessage('joinclub');
  4971.             },
  4972.   
  4973.           },
  4974.           computed : {
  4975.             danmakuMessageClass: function(){
  4976.               return ['live-message-danmaku'].concat(this.borderClass);
  4977.             },
  4978.             backgroundStyle: function(){
  4979.               style = {
  4980.                 background: this.interactionFormData.backgroundColor,
  4981.               };
  4982.               return style;
  4983.             },
  4984.             borderClass: function(){
  4985.               classes = [];
  4986.               // 圆角矩形边框
  4987.               if(this.interactionFormData.borderShape == 'round'){
  4988.               }
  4989.               // 矩形
  4990.               else if(this.interactionFormData.borderShape == 'rect'){
  4991.   
  4992.               }
  4993.               // 流动
  4994.               else if(this.interactionFormData.borderShape == 'flow'){
  4995.                 classes.push('live-message-border-flow')
  4996.               }
  4997.               return classes;
  4998.             },
  4999.             borderStyle: function(){
  5000.               style = {};
  5001.               // 圆角矩形边框
  5002.               if(this.interactionFormData.borderShape == 'round'){
  5003.                 style['border-radius'] = '6px';
  5004.                 style['border'] = `${this.interactionFormData.borderSize}px solid ${this.interactionFormData.borderColor}`;
  5005.               }
  5006.               // 矩形
  5007.               else if(this.interactionFormData.borderShape == 'rect'){
  5008.                 style['border'] = `${this.interactionFormData.borderSize}px solid ${this.interactionFormData.borderColor}`;
  5009.               }
  5010.               // 流动
  5011.               else if(this.interactionFormData.borderShape == 'flow'){
  5012.                 GM_addStyle(`
  5013.                   .live-message-border-flow.active{
  5014.                     border: ${this.interactionFormData.borderSize}px solid transparent
  5015.                   }
  5016.                   .live-message-border-flow.inactive{
  5017.                     border: ${this.interactionFormData.borderSize}px solid ${this.interactionFormData.borderColor}
  5018.                   }
  5019.                 `);
  5020.               }
  5021.   
  5022.               // 自适应宽度
  5023.               if(this.interactionFormData.borderWidth == 'auto'){
  5024.                 style['width'] = 'max-content';
  5025.                 style['display'] = 'table-cell';
  5026.               }
  5027.               // 定宽
  5028.               else if(this.interactionFormData.borderWidth == 'fixed'){
  5029.                 style['width'] = '100%';
  5030.                 style['display'] = 'block';
  5031.               }
  5032.               return style;
  5033.             },
  5034.             borderFlowItemStyle: function(){
  5035.               style = {};
  5036.               // 圆角矩形边框
  5037.               if(this.interactionFormData.borderShape == 'round'){
  5038.               }
  5039.               // 矩形
  5040.               else if(this.interactionFormData.borderShape == 'rect'){
  5041.   
  5042.               }
  5043.               // 流动
  5044.               else if(this.interactionFormData.borderShape == 'flow'){
  5045.   
  5046.                 GM_addStyle(`
  5047.                   .live-message-border-flow.active .border-flow-item::before,.live-message-border-flow.active .border-flow-item::after{
  5048.                     border: ${this.interactionFormData.borderSize}px solid ${this.interactionFormData.borderColor}
  5049.                   }
  5050.                   .live-message-border-flow .border-flow-item::before,.live-message-border-flow .border-flow-item::after{
  5051.                     top: -${this.interactionFormData.borderSize}px;
  5052.                     bottom: -${this.interactionFormData.borderSize}px;
  5053.                     left: -${this.interactionFormData.borderSize}px;
  5054.                     right: -${this.interactionFormData.borderSize}px;
  5055.                   }
  5056.                 `);
  5057.               }
  5058.               return style;
  5059.             },
  5060.             userNameMessageStyle : function(){
  5061.   
  5062.               return {
  5063.                 'color':this.interactionFormData.userNameFontColor,
  5064.                 'font-size':this.interactionFormData.userNameFontSize + 'px',
  5065.                 'font-family' : this.interactionFormData.fontFamily[this.interactionFormData.fontFamily.length-1],
  5066.                 'text-shadow':`0px ${this.interactionFormData.userNameFontShadowSize}px ${this.interactionFormData.userNameFontShadowSize}px ${this.interactionFormData.userNameFontShadowColor}, 0px -${this.interactionFormData.userNameFontShadowSize}px ${this.interactionFormData.userNameFontShadowSize}px ${this.interactionFormData.userNameFontShadowColor}, ${this.interactionFormData.userNameFontShadowSize}px 0px ${this.interactionFormData.userNameFontShadowSize}px ${this.interactionFormData.userNameFontShadowColor}, -${this.interactionFormData.userNameFontShadowSize}px 0px ${this.interactionFormData.userNameFontShadowSize}px ${this.interactionFormData.userNameFontShadowColor}, ${this.interactionFormData.userNameFontShadowSize}px ${this.interactionFormData.userNameFontShadowSize}px ${this.interactionFormData.userNameFontShadowSize}px ${this.interactionFormData.userNameFontShadowColor}, -${this.interactionFormData.userNameFontShadowSize}px -${this.interactionFormData.userNameFontShadowSize}px ${this.interactionFormData.userNameFontShadowSize}px ${this.interactionFormData.userNameFontShadowColor}, ${this.interactionFormData.userNameFontShadowSize}px -${this.interactionFormData.userNameFontShadowSize}px ${this.interactionFormData.userNameFontShadowSize}px ${this.interactionFormData.userNameFontShadowColor}, -${this.interactionFormData.userNameFontShadowSize}px ${this.interactionFormData.userNameFontShadowSize}px ${this.interactionFormData.userNameFontShadowSize}px ${this.interactionFormData.userNameFontShadowColor}`,
  5067.               };
  5068.             },
  5069.             userBadgeStyle : function(){
  5070.   
  5071.               return {
  5072.                 'font-size':this.interactionFormData.userNameFontSize*0.8 + 'px',
  5073.                 'font-family' : this.interactionFormData.fontFamily[this.interactionFormData.fontFamily.length-1],
  5074.               };
  5075.   
  5076.             },
  5077.             userPhotoSize : function(){
  5078.               return this.interactionFormData.userNameFontSize*2;
  5079.             },
  5080.             danmakuMessageStyle : function(){
  5081.               return {
  5082.                 ...this.borderStyle,
  5083.                 'background-image' : `linear-gradient(to right, ${this.interactionFormData.danmakuBackgroundColor}, ${this.interactionFormData.danmakuBackgroundGradientColor})`,
  5084.                 'color':this.interactionFormData.danmakuFontColor,
  5085.                 'font-size':this.interactionFormData.danmakuFontSize + 'px',
  5086.                 'font-family' : this.interactionFormData.fontFamily[this.interactionFormData.fontFamily.length-1],
  5087.                 'text-shadow':`0px ${this.interactionFormData.danmakuFontShadowSize}px ${this.interactionFormData.danmakuFontShadowSize}px ${this.interactionFormData.danmakuFontShadowColor}, 0px -${this.interactionFormData.danmakuFontShadowSize}px ${this.interactionFormData.danmakuFontShadowSize}px ${this.interactionFormData.danmakuFontShadowColor}, ${this.interactionFormData.danmakuFontShadowSize}px 0px ${this.interactionFormData.danmakuFontShadowSize}px ${this.interactionFormData.danmakuFontShadowColor}, -${this.interactionFormData.danmakuFontShadowSize}px 0px ${this.interactionFormData.danmakuFontShadowSize}px ${this.interactionFormData.danmakuFontShadowColor}, ${this.interactionFormData.danmakuFontShadowSize}px ${this.interactionFormData.danmakuFontShadowSize}px ${this.interactionFormData.danmakuFontShadowSize}px ${this.interactionFormData.danmakuFontShadowColor}, -${this.interactionFormData.danmakuFontShadowSize}px -${this.interactionFormData.danmakuFontShadowSize}px ${this.interactionFormData.danmakuFontShadowSize}px ${this.interactionFormData.danmakuFontShadowColor}, ${this.interactionFormData.danmakuFontShadowSize}px -${this.interactionFormData.danmakuFontShadowSize}px ${this.interactionFormData.danmakuFontShadowSize}px ${this.interactionFormData.danmakuFontShadowColor}, -${this.interactionFormData.danmakuFontShadowSize}px ${this.interactionFormData.danmakuFontShadowSize}px ${this.interactionFormData.danmakuFontShadowSize}px ${this.interactionFormData.danmakuFontShadowColor}`,
  5088.   
  5089.               };
  5090.   
  5091.             },
  5092.             danmakuMessageContainerStyle : function(){
  5093.   
  5094.               // 横版
  5095.               if(this.interactionFormData.direction == 'horizontal'){
  5096.                 var style = {
  5097.                   'max-width' : this.interactionFormData.danmakuFontSize*20 + 'px',
  5098.                 };
  5099.                 if(this.interactionFormData.displayNotWrap){
  5100.                   style.height = '100%';
  5101.                 }
  5102.                 return style;
  5103.   
  5104.               }
  5105.               // 纵版
  5106.               else{
  5107.               }
  5108.   
  5109.             },
  5110.             danmakuDougaMessageStyle: function(){
  5111.               return {
  5112.                 ...this.borderStyle,
  5113.                 'border': 'transparent',
  5114.                 'display': 'block',
  5115.                 'width': this.danmakuDougaContainerStyle.width,
  5116.                 'background-image' : `linear-gradient(to right, ${this.interactionFormData.danmakuDougaBackgroundColor}, ${this.interactionFormData.danmakuDougaBackgroundColor})`,
  5117.                 'color':this.interactionFormData.danmakuFontColor,
  5118.                 'font-size':this.interactionFormData.danmakuFontSize + 'px',
  5119.                 'font-family' : this.interactionFormData.fontFamily[this.interactionFormData.fontFamily.length-1],
  5120.                 'text-shadow':`0px ${this.interactionFormData.danmakuFontShadowSize}px ${this.interactionFormData.danmakuFontShadowSize}px ${this.interactionFormData.danmakuFontShadowColor}, 0px -${this.interactionFormData.danmakuFontShadowSize}px ${this.interactionFormData.danmakuFontShadowSize}px ${this.interactionFormData.danmakuFontShadowColor}, ${this.interactionFormData.danmakuFontShadowSize}px 0px ${this.interactionFormData.danmakuFontShadowSize}px ${this.interactionFormData.danmakuFontShadowColor}, -${this.interactionFormData.danmakuFontShadowSize}px 0px ${this.interactionFormData.danmakuFontShadowSize}px ${this.interactionFormData.danmakuFontShadowColor}, ${this.interactionFormData.danmakuFontShadowSize}px ${this.interactionFormData.danmakuFontShadowSize}px ${this.interactionFormData.danmakuFontShadowSize}px ${this.interactionFormData.danmakuFontShadowColor}, -${this.interactionFormData.danmakuFontShadowSize}px -${this.interactionFormData.danmakuFontShadowSize}px ${this.interactionFormData.danmakuFontShadowSize}px ${this.interactionFormData.danmakuFontShadowColor}, ${this.interactionFormData.danmakuFontShadowSize}px -${this.interactionFormData.danmakuFontShadowSize}px ${this.interactionFormData.danmakuFontShadowSize}px ${this.interactionFormData.danmakuFontShadowColor}, -${this.interactionFormData.danmakuFontShadowSize}px ${this.interactionFormData.danmakuFontShadowSize}px ${this.interactionFormData.danmakuFontShadowSize}px ${this.interactionFormData.danmakuFontShadowColor}`,
  5121.   
  5122.               };
  5123.             },
  5124.             danmakuDougaContainerStyle: function(){
  5125.   
  5126.               var height = Math.ceil(this.interactionFormData.danmakuFontSize*0.8*1.3*3 + this.interactionFormData.danmakuFontSize*0.6*1.3*2);
  5127.               var width = Math.ceil(height*16/9)*2;
  5128.   
  5129.               return {
  5130.                 'width' : width + 'px',
  5131.               };
  5132.   
  5133.             },
  5134.             danmakuDougaTitleStyle : function(){
  5135.   
  5136.               var fontSize = Math.ceil(this.interactionFormData.danmakuFontSize*0.8);
  5137.               var shadowSize = Math.ceil(this.interactionFormData.danmakuFontShadowSize*0.8);
  5138.               var height = Math.ceil(fontSize*1.3 * 3);
  5139.   
  5140.               return {
  5141.                 'height': height + 'px',
  5142.                 'color':this.interactionFormData.danmakuFontColor,
  5143.                 'font-size':fontSize + 'px',
  5144.                 'font-family' : this.interactionFormData.fontFamily[this.interactionFormData.fontFamily.length-1],
  5145.                 'text-shadow':`0px ${shadowSize}px ${shadowSize}px ${this.interactionFormData.danmakuFontShadowColor}, 0px -${shadowSize}px ${shadowSize}px ${this.interactionFormData.danmakuFontShadowColor}, ${shadowSize}px 0px ${shadowSize}px ${this.interactionFormData.danmakuFontShadowColor}, -${shadowSize}px 0px ${shadowSize}px ${this.interactionFormData.danmakuFontShadowColor}, ${shadowSize}px ${shadowSize}px ${shadowSize}px ${this.interactionFormData.danmakuFontShadowColor}, -${shadowSize}px -${shadowSize}px ${shadowSize}px ${this.interactionFormData.danmakuFontShadowColor}, ${shadowSize}px -${shadowSize}px ${shadowSize}px ${this.interactionFormData.danmakuFontShadowColor}, -${shadowSize}px ${shadowSize}px ${shadowSize}px ${this.interactionFormData.danmakuFontShadowColor}`,
  5146.               };
  5147.             },
  5148.             danmakuDougaDescriptionStyle : function(){
  5149.   
  5150.               var fontSize = Math.ceil(this.interactionFormData.danmakuFontSize*0.6);
  5151.               var shadowSize = Math.ceil(this.interactionFormData.danmakuFontShadowSize*0.6);
  5152.   
  5153.               return {
  5154.                 'font-size':fontSize + 'px',
  5155.                 'text-shadow':`0px ${shadowSize}px ${shadowSize}px ${this.interactionFormData.danmakuFontShadowColor}, 0px -${shadowSize}px ${shadowSize}px ${this.interactionFormData.danmakuFontShadowColor}, ${shadowSize}px 0px ${shadowSize}px ${this.interactionFormData.danmakuFontShadowColor}, -${shadowSize}px 0px ${shadowSize}px ${this.interactionFormData.danmakuFontShadowColor}, ${shadowSize}px ${shadowSize}px ${shadowSize}px ${this.interactionFormData.danmakuFontShadowColor}, -${shadowSize}px -${shadowSize}px ${shadowSize}px ${this.interactionFormData.danmakuFontShadowColor}, ${shadowSize}px -${shadowSize}px ${shadowSize}px ${this.interactionFormData.danmakuFontShadowColor}, -${shadowSize}px ${shadowSize}px ${shadowSize}px ${this.interactionFormData.danmakuFontShadowColor}`,
  5156.               };
  5157.             },
  5158.             danmakuDougaCoverStyle : function(){
  5159.   
  5160.               var height = Math.ceil(this.interactionFormData.danmakuFontSize*0.8*1.3*3 + this.interactionFormData.danmakuFontSize*0.6*1.3*2);
  5161.               var width = Math.ceil(height*16/9);
  5162.   
  5163.   
  5164.               return {
  5165.                 'height' : height + 'px',
  5166.                 'width' : width + 'px',
  5167.               };
  5168.   
  5169.             },
  5170.             danmakuDougaLeftColStyle : function(){
  5171.               return {
  5172.                 'width': this.danmakuDougaCoverStyle.width,
  5173.                 'display': 'inline-block',
  5174.                 'float': 'left',
  5175.               };
  5176.             },
  5177.             danmakuDougaRightColStyle : function(){
  5178.               return {
  5179.                 'width': `calc(100% - ${this.danmakuDougaLeftColStyle.width})`,
  5180.                 'display': 'inline-block',
  5181.                 'float': 'left',
  5182.               };
  5183.             },
  5184.             danmakuDougaInfoStyle : function(){
  5185.   
  5186.               var fontSize = Math.ceil(this.interactionFormData.danmakuFontSize*0.6);
  5187.               var shadowSize = Math.ceil(this.interactionFormData.danmakuFontShadowSize*0.6);
  5188.   
  5189.               return {
  5190.                 'color':this.interactionFormData.danmakuFontColor,
  5191.                 'font-size':fontSize + 'px',
  5192.                 'font-family' : this.interactionFormData.fontFamily[this.interactionFormData.fontFamily.length-1],
  5193.                 'text-shadow':`0px ${shadowSize}px ${shadowSize}px ${this.interactionFormData.danmakuFontShadowColor}, 0px -${shadowSize}px ${shadowSize}px ${this.interactionFormData.danmakuFontShadowColor}, ${shadowSize}px 0px ${shadowSize}px ${this.interactionFormData.danmakuFontShadowColor}, -${shadowSize}px 0px ${shadowSize}px ${this.interactionFormData.danmakuFontShadowColor}, ${shadowSize}px ${shadowSize}px ${shadowSize}px ${this.interactionFormData.danmakuFontShadowColor}, -${shadowSize}px -${shadowSize}px ${shadowSize}px ${this.interactionFormData.danmakuFontShadowColor}, ${shadowSize}px -${shadowSize}px ${shadowSize}px ${this.interactionFormData.danmakuFontShadowColor}, -${shadowSize}px ${shadowSize}px ${shadowSize}px ${this.interactionFormData.danmakuFontShadowColor}`,
  5194.               };
  5195.   
  5196.             },
  5197.             giftMessageStyle : function(){
  5198.   
  5199.               return {
  5200.                 ...this.borderStyle,
  5201.                 'background-image' : `linear-gradient(to right, ${this.interactionFormData.giftBackgroundColor}, ${this.interactionFormData.giftBackgroundGradientColor})`,
  5202.                 'color':this.interactionFormData.giftFontColor,
  5203.                 'font-size':this.interactionFormData.giftFontSize + 'px',
  5204.                 'font-family' : this.interactionFormData.fontFamily[this.interactionFormData.fontFamily.length-1],
  5205.                 'text-shadow':`0px ${this.interactionFormData.giftFontShadowSize}px ${this.interactionFormData.giftFontShadowSize}px ${this.interactionFormData.giftFontShadowColor}, 0px -${this.interactionFormData.giftFontShadowSize}px ${this.interactionFormData.giftFontShadowSize}px ${this.interactionFormData.giftFontShadowColor}, ${this.interactionFormData.giftFontShadowSize}px 0px ${this.interactionFormData.giftFontShadowSize}px ${this.interactionFormData.giftFontShadowColor}, -${this.interactionFormData.giftFontShadowSize}px 0px ${this.interactionFormData.giftFontShadowSize}px ${this.interactionFormData.giftFontShadowColor}, ${this.interactionFormData.giftFontShadowSize}px ${this.interactionFormData.giftFontShadowSize}px ${this.interactionFormData.giftFontShadowSize}px ${this.interactionFormData.giftFontShadowColor}, -${this.interactionFormData.giftFontShadowSize}px -${this.interactionFormData.giftFontShadowSize}px ${this.interactionFormData.giftFontShadowSize}px ${this.interactionFormData.giftFontShadowColor}, ${this.interactionFormData.giftFontShadowSize}px -${this.interactionFormData.giftFontShadowSize}px ${this.interactionFormData.giftFontShadowSize}px ${this.interactionFormData.giftFontShadowColor}, -${this.interactionFormData.giftFontShadowSize}px ${this.interactionFormData.giftFontShadowSize}px ${this.interactionFormData.giftFontShadowSize}px ${this.interactionFormData.giftFontShadowColor}`,
  5206.               };
  5207.             },
  5208.             giftMessageContainerStyle : function(){
  5209.   
  5210.               // 横版
  5211.               if(this.interactionFormData.direction == 'horizontal'){
  5212.                 var style = {
  5213.                   'max-width' : this.interactionFormData.giftFontSize*20 + 'px',
  5214.                 };
  5215.                 if(this.interactionFormData.displayNotWrap){
  5216.                   style.height = '100%';
  5217.                 }
  5218.                 return style;
  5219.   
  5220.               }
  5221.               // 纵版
  5222.               else{
  5223.               }
  5224.   
  5225.             },
  5226.             giftImageSize : function(){
  5227.               return this.interactionFormData.giftFontSize*1.5;
  5228.             },
  5229.             giftCountStyle : function(){
  5230.               return {
  5231.                 'font-size':this.interactionFormData.giftFontSize*1.5 + 'px',
  5232.                 'font-family' : this.interactionFormData.fontFamily[this.interactionFormData.fontFamily.length-1] == 'inherit' ? 'gift':this.interactionFormData.fontFamily[this.interactionFormData.fontFamily.length-1],
  5233.               };
  5234.             },
  5235.             likeMessageStyle : function(){
  5236.   
  5237.               return {
  5238.                 'color':this.interactionFormData.likeFontColor,
  5239.                 'font-size':this.interactionFormData.likeFontSize + 'px',
  5240.                 'font-family' : this.interactionFormData.fontFamily[this.interactionFormData.fontFamily.length-1],
  5241.                 'text-shadow':`0px ${this.interactionFormData.likeFontShadowSize}px ${this.interactionFormData.likeFontShadowSize}px ${this.interactionFormData.likeFontShadowColor}, 0px -${this.interactionFormData.likeFontShadowSize}px ${this.interactionFormData.likeFontShadowSize}px ${this.interactionFormData.likeFontShadowColor}, ${this.interactionFormData.likeFontShadowSize}px 0px ${this.interactionFormData.likeFontShadowSize}px ${this.interactionFormData.likeFontShadowColor}, -${this.interactionFormData.likeFontShadowSize}px 0px ${this.interactionFormData.likeFontShadowSize}px ${this.interactionFormData.likeFontShadowColor}, ${this.interactionFormData.likeFontShadowSize}px ${this.interactionFormData.likeFontShadowSize}px ${this.interactionFormData.likeFontShadowSize}px ${this.interactionFormData.likeFontShadowColor}, -${this.interactionFormData.likeFontShadowSize}px -${this.interactionFormData.likeFontShadowSize}px ${this.interactionFormData.likeFontShadowSize}px ${this.interactionFormData.likeFontShadowColor}, ${this.interactionFormData.likeFontShadowSize}px -${this.interactionFormData.likeFontShadowSize}px ${this.interactionFormData.likeFontShadowSize}px ${this.interactionFormData.likeFontShadowColor}, -${this.interactionFormData.likeFontShadowSize}px ${this.interactionFormData.likeFontShadowSize}px ${this.interactionFormData.likeFontShadowSize}px ${this.interactionFormData.likeFontShadowColor}`,
  5242.               };
  5243.   
  5244.             },
  5245.             likeMessageContainerStyle : function(){
  5246.   
  5247.               // 横版
  5248.               if(this.interactionFormData.direction == 'horizontal'){
  5249.                 return {
  5250.                   'max-width' : this.interactionFormData.likeFontSize*20 + 'px',
  5251.                 }
  5252.   
  5253.               }
  5254.               // 纵版
  5255.               else{
  5256.               }
  5257.   
  5258.             },
  5259.             enterroomMessageStyle : function(){
  5260.               return {
  5261.                 'color':this.interactionFormData.enterroomFontColor,
  5262.                 'font-size':this.interactionFormData.enterroomFontSize + 'px',
  5263.                 'font-family' : this.interactionFormData.fontFamily[this.interactionFormData.fontFamily.length-1],
  5264.                 'text-shadow':`0px ${this.interactionFormData.enterroomFontShadowSize}px ${this.interactionFormData.enterroomFontShadowSize}px ${this.interactionFormData.enterroomFontShadowColor}, 0px -${this.interactionFormData.enterroomFontShadowSize}px ${this.interactionFormData.enterroomFontShadowSize}px ${this.interactionFormData.enterroomFontShadowColor}, ${this.interactionFormData.enterroomFontShadowSize}px 0px ${this.interactionFormData.enterroomFontShadowSize}px ${this.interactionFormData.enterroomFontShadowColor}, -${this.interactionFormData.enterroomFontShadowSize}px 0px ${this.interactionFormData.enterroomFontShadowSize}px ${this.interactionFormData.enterroomFontShadowColor}, ${this.interactionFormData.enterroomFontShadowSize}px ${this.interactionFormData.enterroomFontShadowSize}px ${this.interactionFormData.enterroomFontShadowSize}px ${this.interactionFormData.enterroomFontShadowColor}, -${this.interactionFormData.enterroomFontShadowSize}px -${this.interactionFormData.enterroomFontShadowSize}px ${this.interactionFormData.enterroomFontShadowSize}px ${this.interactionFormData.enterroomFontShadowColor}, ${this.interactionFormData.enterroomFontShadowSize}px -${this.interactionFormData.enterroomFontShadowSize}px ${this.interactionFormData.enterroomFontShadowSize}px ${this.interactionFormData.enterroomFontShadowColor}, -${this.interactionFormData.enterroomFontShadowSize}px ${this.interactionFormData.enterroomFontShadowSize}px ${this.interactionFormData.enterroomFontShadowSize}px ${this.interactionFormData.enterroomFontShadowColor}`,
  5265.               };
  5266.   
  5267.             },
  5268.             enterroomMessageContainerStyle : function(){
  5269.   
  5270.               // 横版
  5271.               if(this.interactionFormData.direction == 'horizontal'){
  5272.                 return {
  5273.                   'max-width' : this.interactionFormData.enterroomFontSize*20 + 'px',
  5274.                 }
  5275.   
  5276.               }
  5277.               // 纵版
  5278.               else{
  5279.               }
  5280.   
  5281.             },
  5282.             followMessageStyle : function(){
  5283.   
  5284.               return {
  5285.                 'color':this.interactionFormData.followFontColor,
  5286.                 'font-size':this.interactionFormData.followFontSize + 'px',
  5287.                 'font-family' : this.interactionFormData.fontFamily[this.interactionFormData.fontFamily.length-1],
  5288.                 'text-shadow':`0px ${this.interactionFormData.followFontShadowSize}px ${this.interactionFormData.followFontShadowSize}px ${this.interactionFormData.followFontShadowColor}, 0px -${this.interactionFormData.followFontShadowSize}px ${this.interactionFormData.followFontShadowSize}px ${this.interactionFormData.followFontShadowColor}, ${this.interactionFormData.followFontShadowSize}px 0px ${this.interactionFormData.followFontShadowSize}px ${this.interactionFormData.followFontShadowColor}, -${this.interactionFormData.followFontShadowSize}px 0px ${this.interactionFormData.followFontShadowSize}px ${this.interactionFormData.followFontShadowColor}, ${this.interactionFormData.followFontShadowSize}px ${this.interactionFormData.followFontShadowSize}px ${this.interactionFormData.followFontShadowSize}px ${this.interactionFormData.followFontShadowColor}, -${this.interactionFormData.followFontShadowSize}px -${this.interactionFormData.followFontShadowSize}px ${this.interactionFormData.followFontShadowSize}px ${this.interactionFormData.followFontShadowColor}, ${this.interactionFormData.followFontShadowSize}px -${this.interactionFormData.followFontShadowSize}px ${this.interactionFormData.followFontShadowSize}px ${this.interactionFormData.followFontShadowColor}, -${this.interactionFormData.followFontShadowSize}px ${this.interactionFormData.followFontShadowSize}px ${this.interactionFormData.followFontShadowSize}px ${this.interactionFormData.followFontShadowColor}`,
  5289.               };
  5290.   
  5291.             },
  5292.             followMessageContainerStyle : function(){
  5293.   
  5294.               // 横版
  5295.               if(this.interactionFormData.direction == 'horizontal'){
  5296.                 return {
  5297.                   'max-width' : this.interactionFormData.followFontSize*20 + 'px',
  5298.                 }
  5299.   
  5300.               }
  5301.               // 纵版
  5302.               else{
  5303.               }
  5304.   
  5305.             },
  5306.             joinclubMessageStyle : function(){
  5307.   
  5308.               return {
  5309.                 'color':this.interactionFormData.joinclubFontColor,
  5310.                 'font-size':this.interactionFormData.joinclubFontSize + 'px',
  5311.                 'font-family' : this.interactionFormData.fontFamily[this.interactionFormData.fontFamily.length-1],
  5312.                 'text-shadow':`0px ${this.interactionFormData.joinclubFontShadowSize}px ${this.interactionFormData.joinclubFontShadowSize}px ${this.interactionFormData.joinclubFontShadowColor}, 0px -${this.interactionFormData.joinclubFontShadowSize}px ${this.interactionFormData.joinclubFontShadowSize}px ${this.interactionFormData.joinclubFontShadowColor}, ${this.interactionFormData.joinclubFontShadowSize}px 0px ${this.interactionFormData.joinclubFontShadowSize}px ${this.interactionFormData.joinclubFontShadowColor}, -${this.interactionFormData.joinclubFontShadowSize}px 0px ${this.interactionFormData.joinclubFontShadowSize}px ${this.interactionFormData.joinclubFontShadowColor}, ${this.interactionFormData.joinclubFontShadowSize}px ${this.interactionFormData.joinclubFontShadowSize}px ${this.interactionFormData.joinclubFontShadowSize}px ${this.interactionFormData.joinclubFontShadowColor}, -${this.interactionFormData.joinclubFontShadowSize}px -${this.interactionFormData.joinclubFontShadowSize}px ${this.interactionFormData.joinclubFontShadowSize}px ${this.interactionFormData.joinclubFontShadowColor}, ${this.interactionFormData.joinclubFontShadowSize}px -${this.interactionFormData.joinclubFontShadowSize}px ${this.interactionFormData.joinclubFontShadowSize}px ${this.interactionFormData.joinclubFontShadowColor}, -${this.interactionFormData.joinclubFontShadowSize}px ${this.interactionFormData.joinclubFontShadowSize}px ${this.interactionFormData.joinclubFontShadowSize}px ${this.interactionFormData.joinclubFontShadowColor}`,
  5313.               };
  5314.   
  5315.             },
  5316.             joinclubMessageContainerStyle : function(){
  5317.   
  5318.               // 横版
  5319.               if(this.interactionFormData.direction == 'horizontal'){
  5320.                 return {
  5321.                   'max-width' : this.interactionFormData.joinclubFontSize*20 + 'px',
  5322.                 }
  5323.   
  5324.               }
  5325.               // 纵版
  5326.               else{
  5327.               }
  5328.   
  5329.             },
  5330.             activeGuessGuessListData : function(){
  5331.               var listData = this.activeGuess.displayDirectGuess?this.activeGuess.directGuessList:(this.activeGuess.onlyDisplayMatch?this.activeGuess.matchGuessList:this.activeGuess.guessList);
  5332.               return listData?listData:[];
  5333.             },
  5334.             toUserSpace: function(...args){
  5335.               console.log(args)
  5336.               // console.log(candidate, config.ACFUN_SERVER + config.URLS.ACFUN_USER.SPACE + '/' + candidate.uid)
  5337.               // window.open(config.ACFUN_SERVER + config.URLS.ACFUN_USER.SPACE + '/' + candidate.uid);
  5338.             },
  5339.   
  5340.           },
  5341.           mounted : function(){
  5342.   
  5343.             var vue = this;
  5344.   
  5345.             var messageContainerEle = document.querySelector('.container-live-feed-messages-acfunlive .live-message-container');
  5346.   
  5347.             // 获取弹幕消息
  5348.             callbackManager.register('message', function(data){
  5349.   
  5350.               // 修改信息
  5351.               if(_.isFunction(vue.interactionFormData.modifyContentFunc)){
  5352.   
  5353.                 vue.interactionFormData.modifyContentFunc(data);
  5354.   
  5355.               }
  5356.   
  5357.               if(data.interaction.type == 'enterroom'){
  5358.                 userInfo[data.uid].hasEnterroom = true;
  5359.               }
  5360.               else if(data.interaction.type == 'danmaku'){
  5361.                 userInfo[data.uid].hasDanmaku = true;
  5362.                 vue.lastDanmakuMessage = data;
  5363.               }
  5364.               else if(data.interaction.type == 'like'){
  5365.                 userInfo[data.uid].hasLike = true;
  5366.               }
  5367.               else if(data.interaction.type == 'gift'){
  5368.                 userInfo[data.uid].hasGift = true;
  5369.               }
  5370.               else if(data.interaction.type == 'follow'){
  5371.                 userInfo[data.uid].hasFollow = true;
  5372.               }
  5373.   
  5374.               // 礼物合并
  5375.               if(
  5376.                 data.interaction.type == 'gift'
  5377.                 && userInfo[data.uid].lastInteraction
  5378.                 && userInfo[data.uid].lastInteraction.type == 'gift'
  5379.                 && data.interaction.giftName == userInfo[data.uid].lastInteraction.giftName
  5380.                 && data.interaction.sendTime - userInfo[data.uid].lastInteraction.sendTime<=5*1000*(data.interaction.giftName=='香蕉'?2:1)
  5381.               ){
  5382.   
  5383.                 userInfo[data.uid].lastInteraction.giftCount += data.interaction.giftCount;
  5384.                 userInfo[data.uid].lastInteraction.sendTime = data.interaction.sendTime;
  5385.                 userInfo[data.uid].lastInteraction.doAnime = false;
  5386.                 userInfo[data.uid].lastInteraction.doAnime = true;
  5387.               }
  5388.               else{
  5389.                 vue.messageData.push(data);
  5390.                 userInfo[data.uid].lastInteraction = data.interaction;
  5391.               }
  5392.   
  5393.   
  5394.               if(data.interaction.type == 'danmaku'){
  5395.                 // 如果有ac号，获取稿件信息
  5396.                 data.interaction.acSeries = extractAcSeries(data.interaction.content);
  5397.   
  5398.                 if(data.interaction.acSeries != null){
  5399.                   vue.getDougaByAcSeries(data.interaction.acSeries, function(isSuccess, douga){
  5400.   
  5401.                     // 获取稿件成功
  5402.                     if(isSuccess){
  5403.                       data.interaction.douga = douga;
  5404.                     }
  5405.   
  5406.                   });
  5407.                 }
  5408.   
  5409.                 // 如果是指令
  5410.                 var command = extractCommand(data.interaction.content);
  5411.   
  5412.                 if(command!=null){
  5413.                   data = _.cloneDeep(data);
  5414.                   data.command = command.command;
  5415.                   data.interaction.content = command.text;
  5416.                   callbackManager.feed('command:'+command.command, data);
  5417.                 }
  5418.   
  5419.               }
  5420.   
  5421.   
  5422.               // 如果鼠标没有悬浮，则自动滚动至底部
  5423.               if(!vue.mouseOn){
  5424.                 vue.$nextTick(function(){
  5425.                   // 横版滚动
  5426.                   if(vue.interactionFormData.direction=='horizontal'){
  5427.                     messageContainerEle.scrollLeft = messageContainerEle.scrollWidth;
  5428.                   }
  5429.                   // 纵版滚动
  5430.                   else{
  5431.                     messageContainerEle.scrollTop = messageContainerEle.scrollHeight;
  5432.                   }
  5433.                 });
  5434.               }
  5435.             });
  5436.   
  5437.   
  5438.             // 监听事件
  5439.             messageContainerEle.addEventListener('mouseenter', function(e){
  5440.               // 鼠标悬浮，显示滚动条
  5441.               vue.mouseOn = true;
  5442.   
  5443.             });
  5444.   
  5445.             messageContainerEle.addEventListener('mouseleave', function(e){
  5446.               // 鼠标离开，隐藏滚动条
  5447.               vue.mouseOn = false;
  5448.   
  5449.             });
  5450.   
  5451.   
  5452.             this.giftList.forEach(function(gift){
  5453.               vue.giftNameMapper[gift.name] = gift;
  5454.             });
  5455.   
  5456.             async function loadData(){
  5457.               // 查看缓存的数据
  5458.               var audioFormData = await GM_getValue('audioFormData');
  5459.               if(audioFormData){
  5460.                 vue.audioFormData = JSON.parse(audioFormData);
  5461.                 vue.handleAudioFormSubmitValid();
  5462.               }
  5463.               var interactionPreset = await GM_getValue('interactionPreset');
  5464.               if(interactionPreset){
  5465.                 interactionPreset = JSON.parse(interactionPreset);
  5466.                 vue.interactionPreset = interactionPreset;
  5467.                 var activeInteractionPresetIndex = _.findIndex(interactionPreset, {active:true});
  5468.                 if(activeInteractionPresetIndex!=-1){
  5469.                   vue.activeInteractionPreset(interactionPreset[activeInteractionPresetIndex]);
  5470.   
  5471.                   vue.downloadedFonts = await GM_getValue('downloadedFonts');
  5472.                   for(var fontName in vue.downloadedFonts){
  5473.                     // 添加字体
  5474.                     GM_addStyle(`
  5475.                       @font-face{
  5476.                         font-family : ${fontName};
  5477.                         src: url(data:font/truetype;charset=utf-8;base64,${vue.downloadedFonts[fontName]}) format('truetype');
  5478.                       }
  5479.                     `);
  5480.                   }
  5481.                 }
  5482.               }
  5483.               else{
  5484.                 vue.handleInteractionFormSubmitValid();
  5485.               }
  5486.               /*var interactionFormData = await GM_getValue('interactionFormData');
  5487.               if(interactionFormData){
  5488.                 interactionFormData = JSON.parse(interactionFormData);
  5489.   
  5490.                 if(!interactionFormData.historyMinutes){
  5491.                   interactionFormData.historyMinutes = 10;
  5492.                 }
  5493.                 if(!interactionFormData.historyCount){
  5494.                   interactionFormData.historyCount = 200;
  5495.                 }
  5496.   
  5497.                 if(interactionFormData.joinclubFontSize){
  5498.                   vue.interactionFormData = interactionFormData;
  5499.                   vue.handleInteractionFormSubmitValid();
  5500.   
  5501.                   // 默认字体
  5502.                   if(!vue.interactionFormData.fontFamily){
  5503.                     vue.interactionFormData.fontFamily = ['default', 'inherit'];
  5504.                   }
  5505.   
  5506.                   var fontName = vue.interactionFormData.fontFamily[vue.interactionFormData.fontFamily.length-1];
  5507.   
  5508.                   if(fontName!='inherit'){
  5509.                     vue.downloadedFonts = await GM_getValue('downloadedFonts');
  5510.                     for(var fontName in vue.downloadedFonts){
  5511.                       // 添加字体
  5512.                       GM_addStyle(`
  5513.                         @font-face{
  5514.                           font-family : ${fontName};
  5515.                           src: url(data:font/truetype;charset=utf-8;base64,${vue.downloadedFonts[fontName]}) format('truetype');
  5516.                         }
  5517.                       `);
  5518.                     }
  5519.                   }
  5520.   
  5521.                 }
  5522.   
  5523.   
  5524.               }
  5525.               else{
  5526.                 vue.handleInteractionFormSubmitValid();
  5527.               }*/
  5528.             }
  5529.             loadData();
  5530.   
  5531.             // 每500毫秒获取一次用户信息，避免被封
  5532.             window.setInterval(()=>{
  5533.               if(vue.candidateInfoCallbacks.length>0){
  5534.                 let [candidate, callback] = vue.candidateInfoCallbacks.splice(0, 1)[0];
  5535.                 vue._getCandidateInfo(candidate, callback);
  5536.   
  5537.                 [candidate, callback] = vue.candidateInfoCallbacks.splice(0, 1)[0];
  5538.                 vue._getCandidateInfo(candidate, callback);
  5539.   
  5540.   
  5541.                 [candidate, callback] = vue.candidateInfoCallbacks.splice(0, 1)[0];
  5542.                 vue._getCandidateInfo(candidate, callback);
  5543.               }
  5544.             }, 500);
  5545.   
  5546.             // 按键绑定，从ctrl+alt+0到ctrl+alt+9
  5547.             hotkeys(_.range(10).map((index)=>`ctrl+alt+${index}`).join(','), (event, handler)=>{
  5548.               var index = parseInt(handler.key.split('+')[2]);
  5549.               console.log('key', index, this.interactionPreset[index-1])
  5550.               if(index<=this.interactionPreset.length){
  5551.                 this.activeInteractionPreset(this.interactionPreset[index-1]);
  5552.               }
  5553.             });
  5554.   
  5555.           },
  5556.       });
  5557.   
  5558.       return vue;
  5559.     }
  5560.   
  5561.   
  5562.     disableVideos();
  5563.   
  5564.   
  5565.     window.onload = function(){
  5566.       start();
  5567.   
  5568.       var intervalHandler = window.setInterval(function(){
  5569.         if(loadVue()){
  5570.           window.clearInterval(intervalHandler);
  5571.         }
  5572.       }, 500);
  5573.   
  5574.     };
  5575.   
  5576.   })();

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址