wfg
/
lottery


			
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823
							<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport"
    content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no, viewport-fit=cover" />
  <title>发布企微朋友圈</title>
  <!-- 引入样式文件 -->
  <link rel="stylesheet"
    href="https://wl-1306604067.cos.ap-guangzhou.myqcloud.com/production/ct/103548289110001/1758012584633/vant.css" />
  <link rel="stylesheet" href="../css/select-tag.css">
  <link rel="stylesheet" href="../css/page-return.css">
  <!-- 必须先引入vue，  后使用vant-ui -->
  <script
    src="https://wl-1306604067.cos.ap-guangzhou.myqcloud.com/production/ct/103548289110001/1742017957144/vue.js"></script>
  <!-- 引入vant的组件库-->
  <!-- 引入 Vant 的 JS 文件 -->
  <script
    src="https://wl-1306604067.cos.ap-guangzhou.myqcloud.com/production/ct/103548289110001/1758012748487/vant.min.js"></script>

  <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
  <script src="https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js"></script>
  <script src="../js/select-tag.js"></script>
  <script src="../js/page-return.js"></script>
  <!-- <script src="js/vconsole.min.js"></script>
    <script>
  		  var vConsole = new window.VConsole();
  		</script> -->
</head>
<style>
  body {
    margin: 0;
    padding: 0;
  }

  .box {
    width: 100vw;
    min-height: 100vh;
    box-sizing: border-box;
    background: #F7F9FC;
  }

  .page5 {
    width: 100vw;
    box-sizing: border-box;
    padding-bottom: 39px;
  }

  .task_content {
    padding: 15px 10px;
  }

  .send_item {
    width: 100%;
    background: #FFFFFF;
    border-radius: 15px;
    box-sizing: border-box;
    padding: 15px 10px;
    margin-bottom: 15px;
  }


  .client_tag {
    font-size: 12px;
    line-height: 17px;
  }


  .status1 {
    color: #136DFB;
  }

  .status2 {
    color: #FFA041;
  }

  .status3 {
    color: #FF4141;
  }

  .mem_title {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .mem_title_left {
    font-size: 14px;
    color: #222222;
    line-height: 20px;
    padding-left: 5px;
    position: relative;
    display: flex;
    align-items: center;
  }

  .mem_title_left::after {
    position: absolute;
    left: 0;
    content: '';
    width: 2px;
    height: 12px;
    background: #136DFB;
    border-radius: 1px;
  }

  .mem_title_right {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #136DFB;
    line-height: 17px;
  }

  .mem_title_right img {
    width: 16px;
    height: 16px;
  }

  .mem_tag_list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    max-height: 52px;
    overflow: hidden;
  }

  .mem_tag {
    margin-top: 15px;
  }

  .mem_tag span {
    padding: 2px 8px;
    background: rgba(19, 109, 251, 0.05);
    border-radius: 5px;
    font-size: 12px;
    line-height: 17px;
    color: #136DFB;
  }

  .condition_mem_tag1 {
    margin-top: 10px;
  }

  .condition_mem_tag2 {
    margin-top: 10px;
  }

  .condition_mem_tag3 {
    margin-top: 18px;
  }

  .condition_mem_tag1 span {
    padding: 2px 8px;
    background: #F2F6FC;
    border-radius: 5px;
    font-size: 12px;
    line-height: 17px;
    color: #7D97BF;
  }

  .condition_mem_tag2 span {
    padding: 2px 8px;
    background: #FCF7F2;
    border-radius: 5px;
    font-size: 12px;
    line-height: 17px;
    color: #BFA17D;
  }

  .condition_mem_tag3 span {
    padding: 2px 8px;
    background: #FCF2F2;
    border-radius: 5px;
    font-size: 12px;
    line-height: 17px;
    color: #BF7D7D;
  }

  .send_centent {
    padding: 20px 15px;
  }

  .send_text {
    font-size: 14px;
    color: #222222;
    line-height: 20px;
    padding-bottom: 10px;
  }

  .send_contentText {
    font-size: 14px;
    line-height: 23px;
    color: #666666;
    padding-bottom: 20px;
  }

  .img_list {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 10px;
    padding: 10px 5px 10px;
  }

  .img_box {
    position: relative;
    width: 105px;
    height: 140px;
  }

  .close_imgMater {
    width: 24px;
    height: 24px;
    position: absolute;
    top: -8px;
    right: -8px;
  }

  .img_url {
    width: 105px;
    height: 140px;
    border-radius: 10px;
    object-fit: cover;
  }

  .video_container {
    position: relative;
    width: 105px;
    height: 140px;
  }

  .play_button {
    width: 24px;
    height: 24px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .matters_item {
    width: calc(50% - 5px);
    height: 60px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    padding: 10px;
    margin-bottom: 10px;
    box-sizing: border-box;
    border: 1px solid #EFEFEF;
    position: relative;
  }

  .matters_item_img {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    margin-right: 8px;
  }

  .close_mater {
    width: 24px;
    height: 24px;
    position: absolute;
    top: -8px;
    right: -8px;
  }

  .matters_item_info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    font-size: 12px;
    color: #999999;
    line-height: 17px;
  }

  .matters_item_title {
    font-size: 12px;
    color: #222222;
    line-height: 17px;
    /* 必须设置宽度,此处宽度继承父元素 */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-bottom: 4px;
  }

  .matters_list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .mem_centent {
    padding: 10px 15px;
  }

  .filter_list {
    display: flex;
    flex-wrap: nowrap;
    white-space: nowrap;
    width: 100%;
    overflow-x: auto;
    gap: 10px;
  }

  .filter_span {
    height: 25px;
    box-sizing: border-box;
    font-size: 12px;
    color: #999999;
    padding: 4px 12px;
    background: #FAFAFA;
    border-radius: 10px;
  }

  .active {
    height: 25px;
    box-sizing: border-box;
    font-size: 12px;
    color: #1677FF;
    background: rgba(22, 119, 255, 0.1);
    padding: 4px 12px;
    border-radius: 10px;
  }

  .send_num_data {
    display: flex;
    align-items: center;
    padding: 15px 5px 10px;
    font-size: 12px;
    color: #222222;
    line-height: 17px;
  }

  .color1 {
    color: #1677FF;
    padding-right: 20px;
  }

  .color2 {
    color: #FFA041;
    padding-right: 20px;
  }

  .color3 {
    color: #FF4E4E;
    padding-right: 20px;
  }

  .color4 {
    color: #7D97BF;
    padding-right: 20px;
  }

  .send_mem_item {
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 15px;
    background: #FAFAFA;
    border-radius: 15px;
    box-sizing: border-box;
    margin-bottom: 10px;
  }

  .send_mem_name {
    font-weight: 500;
    font-size: 14px;
    color: #222222;
    line-height: 20px;
  }

  .send_mem_data {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #999999;
    line-height: 17px;
  }

  .send_mem_time {
    font-size: 12px;
    color: #999999;
    line-height: 17px;
  }

  .van-cell {
    padding: 15px 5px 0;
  }

  .matter_btn_box {
    padding-top: 20px;
  }

  .cond_btn_box {
    padding-top: 15px;
  }

  .matter_btn {
    height: 50px;
    padding: 15px 0;
    background: rgba(19, 109, 251, 0.1);
    border-radius: 20px;
    font-weight: 500;
    font-size: 14px;
    color: #136DFB;
    text-align: center;
    box-sizing: border-box;
  }

  .send_btn_box {
    padding: 15px 25px 10px;
  }

  .send_btn {
    height: 50px;
    padding: 15px 0;
    background: #1677FF;
    border-radius: 20px;
    font-weight: 500;
    font-size: 14px;
    color: #FFFFFF;
    text-align: center;
    box-sizing: border-box;
  }

  textarea {
    height: 68px !important;
    line-height: 23px;
  }

  .van-radio__icon {
    width: 16px;
    height: 16px;
  }

  .van-radio__label {
    font-size: 14px;
    line-height: 20px;
    color: #222222;
  }

  .van-radio--horizontal {
    margin-right: 40px;
  }

  .van-radio-group {
    margin-top: 15px;
  }

  .check_div {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid #CCCCCC;
    box-sizing: border-box;
    margin-right: 8px;
  }

  .check_div_active {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid #136DFB;
    box-sizing: border-box;
    margin-right: 8px;
  }

  .check_div_active:after {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #136DFB;
    position: relative;
    top: 2px;
    left: 2px;
  }

  .send_item_name {
    font-size: 14px;
    line-height: 20px;
    color: #666666;
    padding-top: 20px;
  }

  .data_item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px 10px;
  }

  .data_title {
    font-size: 14px;
    color: #222222;
    line-height: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .condition_box1 {
    padding: 15px;
    background: rgba(245, 249, 255, 0.5);
    border-radius: 10px;
    border: 1px solid #E2EAFF;
    box-sizing: border-box;
    margin-bottom: 10px;
  }

  .condition_box2 {
    padding: 15px;
    background: rgba(255, 252, 245, 0.5);
    border-radius: 10px;
    border: 1px solid #FFF5E2;
    box-sizing: border-box;
    margin-bottom: 10px;
  }

  .condition_box3 {
    padding: 15px;
    background: rgba(255, 245, 245, 0.5);
    border-radius: 10px;
    border: 1px solid #FFE2E2;
    box-sizing: border-box;
  }

  .con_data {
    display: flex;
    align-items: center;
  }

  .con_data_title {
    font-weight: 500;
    font-size: 12px;
    color: #222222;
    padding-right: 24px;
  }

  .con_data_edit {
    font-size: 12px;
    color: #136DFB;
    padding-right: 15px;
  }

  .con_data_del {
    font-size: 12px;
    color: #FF4141;
  }

  .tag_radio {
    margin-top: 10px;
  }
  .tag_radio_bo {
    margin-bottom: 10px;
  }
  .tag_radio_item {
    margin-right: 32px;
  }

  .condition_list {
    margin-top: 15px;
  }

  .exc_title {
    padding-right: 24px;
  }

  .filter_list {
    height: 146px;
    display: flex;
    align-items: center;
    gap: 15px;
  }

  .filter_or {
    font-weight: 500;
    font-size: 16px;
    color: #FFA041;
    width: 100%;
    text-align: center;
    background: rgba(255, 160, 65, 0.05);
    padding: 49px 0 48px;
    border-radius: 15px;
  }

  .filter_exc_active {
    font-weight: 500;
    font-size: 16px;
    color: #FF4141;
    width: 100%;
    text-align: center;
    padding: 49px 0 48px;
    background: rgba(255, 65, 65, 0.05);
    border-radius: 15px;
  }

  .filter_exc {
    font-weight: 500;
    font-size: 16px;
    color: #999999;
    width: 100%;
    text-align: center;
    padding: 49px 0 48px;
    background: #FAFAFA;
    border-radius: 15px;
  }

  .dev_left {
    margin-left: 15px;
  }

  .dev_right {
    margin-right: 15px;
  }

  .page_box {
    padding: 15px 15px 0;
    height: 446px;
    box-sizing: border-box;
  }

  .path_list {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    white-space: nowrap;
    width: 100%;
    overflow-x: auto;
    margin-bottom: 25px;
    height: 17px;
  }

  .path_span {
    font-size: 12px;
    color: #999999;
    line-height: 17px;
  }

  .path_line {
    font-size: 12px;
    color: #999999;
    line-height: 17px;
    padding: 0 10px;
  }

  .path_item:last-child {
    color: #222222;
  }

  .data_list {
    height: 404px;
    gap: 25px;
    overflow-y: auto;
  }

  .mem_item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
  }

  .mem_item img {
    width: 40px;
    height: 40px;
    margin-right: 10px;
  }

  .mem_title {
    width: 224px;
    font-size: 14px;
    color: #222222;
    line-height: 20px;
    width: 238px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .dept_item {
    display: flex;
    align-items: center;
  }

  .time_list {
    overflow-y: auto;
    padding: 10px 20px 29px;
    box-sizing: border-box;
  }

  .time_box {
    height: 50px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    border-radius: 15px;
    border: 1px solid #F1F1F1;
  }

  .time_box img {
    width: 16px;
    height: 16px;
  }

  .date_box {
    height: 210px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 15px;
    border: 1px solid #F1F1F1;
  }

  .date_box .van-ellipsis {
    /* width: 100px; */
    width: 102px;
    text-align: center;
    font-size: 14px;
    color: #222222;
    white-space: wrap;
  }

  .time_date {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #222222;
    line-height: 20px;
  }

  .time_date_center {
    padding: 0 10px;
  }

  .date_select {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
  }

  .select_time {
    width: 76px;
    height: 37px;
    line-height: 37px;
    background: #FAFAFA;
    border-radius: 10px;
    font-size: 12px;
    color: #222222;
    text-align: center;
  }

  .select_time_ac {
    width: 76px;
    height: 37px;
    line-height: 37px;
    background: rgba(19, 109, 251, 0.05);
    border-radius: 10px;
    border: 1px solid #136DFB;
    font-size: 12px;
    color: #136DFB;
    text-align: center;
    box-sizing: border-box;
  }

  .now_date {
    display: flex;
    align-items: center;
    font-weight: 500;
    font-size: 16px;
    color: #222222;
    padding: 12px 20px;
    background: #FAFAFA;
    border-radius: 15px;
    justify-content: space-between;
    margin-top: 20px;
  }
</style>

<body>
  <div id="box" class="box">
    <div class="page5">
      <van-dialog v-model="showReturn" title="提示" show-cancel-button :before-close="beforeClose"
        confirm-button-text="确定" cancel-button-text="取消">
        <div style="padding: 20px; text-align: center;">确认返回吗?</div>
      </van-dialog>
      <!-- 选择群发时间 -->
      <van-popup v-model="showTime" duration="0.2" round position="bottom" :close-on-click-overlay="false"
        :style="{ width: '100%', height: showDateColumns ? '426px' : '266px' }">
        <div class="clientTag_title">
          <div class="close_icon"></div>
          <div>选择时间</div>
          <img class="close_icon" src="../img/qw/close_icon.png" alt="" @click="showTime = false" />
        </div>
        <div class="time_list" :style="{ height: showDateColumns ? '306px' : '146px' }">
          <div class="date_box" v-if="showDateColumns">
            <van-picker ref="vanPicker" :columns="dateColumns" @change="handleChangeDate" visible-item-count="4" />
          </div>
          <div class="time_box" @click="handleShowDateColumns" v-else>
            <div class="close_icon"></div>
            <div class="time_date">
              <span>{{nowDate[0]}}</span>
              <span class="time_date_center">{{nowDate[1]}}</span>
              <span>{{nowDate[2]}}</span>
            </div>
            <img src="../img/qw/select_icon.png" alt="" @click="showTime = false">
          </div>
          <div class="date_select">
            <span :class="dateIndex === 'hour' ? 'select_time_ac' : 'select_time'"
              @click="getTimeInfo('hour')">一小时后</span>
            <span :class="dateIndex === 'day' ? 'select_time_ac' : 'select_time'" @click="getTimeInfo('day')">一天后</span>
            <span :class="dateIndex === 'week' ? 'select_time_ac' : 'select_time'"
              @click="getTimeInfo('week')">一周后</span>
            <span :class="dateIndex === 'month' ? 'select_time_ac' : 'select_time'"
              @click="getTimeInfo('month')">一个月后</span>
          </div>
        </div>
        <div class="tag_footers">
          <div class="tag_re_btn" @click="showTime = false">取消</div>
          <div class="tag_ok_btn" @click="handleTime">保存</div>
        </div>
      </van-popup>
      <!-- 成员数据 -->
      <van-popup v-model="showMem" duration="0.2" round position="bottom" :close-on-click-overlay="false"
        :style="{ width: '100%', height: '566px' }">
        <div class="clientTag_title">
          <div class="close_icon"></div>
          <div>添加成员</div>
          <img class="close_icon" src="../img/qw/close_icon.png" alt="" @click="handleCancelMem">
        </div>
        <div class="page_box">
          <div class="path_list">
            <div class="path_span">
              <span @click="getTreeData(0)">全部</span>
              <span class="path_item" v-for="(item, index) in pathList" :key="index" @click="handlePathClick(item)">
                <span class="path_line">/</span>{{item.text}}</span>
            </div>
          </div>
          <div class="data_list">
            <!-- 部门 -->
            <div class="mem_item" v-for="item in treeData" :key="item.id">
              <div class="dept_item" @click="handleDeptClick(item)">
                <img src="../img/qw/dept_icon.png" alt="" />
                <div class="mem_title">{{item.text}}</div>
              </div>
            </div>
            <!-- 成员 -->
            <van-checkbox-group v-model="checkedMemIds" @change="onChangeMem">
              <div class="mem_item" v-for="item in itemList" :key="item.memberId">
                <div class="dept_item">
                  <img src="../img/qw/mem_icon.png" alt="" />
                  <div class="mem_title">{{item.name}}</div>
                </div>
                <van-checkbox :name="item.memberId">
                  <template #icon="props">
                    <div :class="props.checked ? 'check_div_active' : 'check_div'"></div>
                  </template>
                </van-checkbox>
              </div>
            </van-checkbox-group>
          </div>
        </div>
        <div class="tag_footer">
          <div class="tag_re_btn" @click="handleCancelMem">取消</div>
          <div class="tag_ok_btn" @click="handleMem">保存</div>
        </div>
      </van-popup>
      <!-- 标签筛选组件 -->
      <select-tag :tenancy-Id="tenancyId" :show-Client-Tag.sync="showClientTag" :show-Label-Filter="false"
        :select-Tag-List.sync="formValidate.tags" @add="handleAdd"></select-tag>
      <div class="task_content">
        <div class="send_item">
          <div class="mem_title_left">朋友圈名称</div>
          <van-field v-model="formValidate.name" maxlength="20" show-word-limit placeholder="请输入朋友圈名称" />
        </div>
        <div class="send_item">
          <div class="mem_title_left">生效成员</div>
          <div class="mem_tag mem_tag_list">
            <span v-for="(item, index) in SelectWachAuthor" :key="index">{{item.name}}</span>
          </div>
          <div class="matter_btn_box">
            <div class="matter_btn" @click="handleAddMem">{{SelectWachAuthor.length ? '编辑' : '添加'}}成员</div>
          </div>
        </div>
        <div class="send_item">
          <div class="mem_title_left">企业标签</div>
          <div class="mem_tag mem_tag_list">
            <span v-for="(item, index) in formValidate.tags" :key="index">{{item.name}}</span>
          </div>
          <div class="matter_btn_box">
            <div class="matter_btn" @click="handleAddTag">{{formValidate.tags.length ? '编辑' : '添加'}}标签</div>
          </div>
        </div>
        <div class="send_item">
          <div class="mem_title_left">朋友圈内容</div>
          <van-field v-model="formValidate.contentText" maxlength="500" show-word-limit type="textarea"
            placeholder="请输入要发送给客户的文本" />
        </div>
        <div class="send_item">
          <div class="mem_title_left">素材</div>
          <van-radio-group class="tag_radio tag_radio_bo" v-model="materialType" direction="horizontal">
            <van-radio :name="1">
              素材库选择
              <template #icon="props">
                <div :class="props.checked ? 'check_div_active' : 'check_div'"></div>
              </template>
            </van-radio>
            <!-- <van-radio :name="2">
              自定义上传
              <template #icon="props">
                <div :class="props.checked ? 'check_div_active' : 'check_div'"></div>
              </template>
            </van-radio> -->
          </van-radio-group>
          <template v-if="formValidate.ctOthers && formValidate.ctOthers.length > 0">
            <div class="img_list" v-if="formValidate.ctOthers[0].matterType === 1">
              <div class="img_box" v-for="(item, index) in formValidate.ctOthers" :key="index">
                <img class="img_url" :src="item.url" alt="">
                <img class="close_imgMater" src="../img/qw/close_img.png" alt="" @click="handleCloseMatter(item)">
              </div>
            </div>
            <div class="video_container" v-if="formValidate.ctOthers[0].matterType === 2">
              <video id="myVideo" style="width: 105px; height: 140px;"
                :src="formValidate.ctOthers[0].videoPath"></video>
              <img id="playButton" class="play_button" src="../img/qw/play_icon.png" alt="" @click="playPause">
            </div>
            <div class="matters_item" v-if="formValidate.ctOthers[0].matterType === 5">
              <img class="matters_item_img" src="../img/qw/link.png" alt="">
              <div class="matters_item_info">
                <div class="matters_item_title">{{formValidate.ctOthers[0].linkTitle}}</div>
                <div>自定义链接</div>
              </div>
              <img class="close_mater" src="../img/qw/close_mater.png" alt="" @click="handleCloseMatter(item)">
            </div>
          </template>
          <template v-if="formValidate.matters && formValidate.matters.length > 0">
            <div class="img_list" v-if="matterImgList.length > 0">
              <div class="img_box" v-for="(item, index) in matterImgList" :key="index">
                <img class="img_url" :src="item.url" alt="">
                <img class="close_imgMater" src="../img/qw/close_img.png" alt="" @click="handleCloseMatter(item)">
              </div>
            </div>
            <div class="matters_list">
              <div class="matters_item" v-for="(item, index) in matterOthersList" :key="index">
                <img class="matters_item_img" v-if="item.contentType === 0" src="../img/qw/article.png" alt="">
                <img class="matters_item_img" v-else-if="item.contentType === 2" src="../img/qw/form.png" alt="">
                <img class="matters_item_img" v-else-if="item.contentType === 3" src="../img/qw/file.png" alt="">
                <img class="matters_item_img" v-else src="../img/qw/link.png" alt="">
                <div class="matters_item_info">
                  <div class="matters_item_title">{{item.name || item.title}}</div>
                  <div>{{matterTypeList.find(type => type.contentType === item.contentType)?.name || '未知类型'}}</div>
                </div>
                <img class="close_mater" src="../img/qw/close_mater.png" alt="" @click="handleCloseMatter(item)">
              </div>
            </div>
          </template>
          <div class="matter_btn_box">
            <div class="matter_btn" @click="handleAddMatter">添加素材</div>
          </div>
        </div>
        <div class="send_item">
          <div class="mem_title_left">群发时间</div>
          <van-radio-group class="tag_radio" v-model="formValidate.type" direction="horizontal"
            @change="handleRadioType">
            <van-radio :name="1">
              立即群发
              <template #icon="props">
                <div :class="props.checked ? 'check_div_active' : 'check_div'"></div>
              </template>
            </van-radio>
            <van-radio :name="2" @click="handleRadioType(2)">
              定时群发
              <template #icon="props">
                <div :class="props.checked ? 'check_div_active' : 'check_div'"></div>
              </template>
            </van-radio>
          </van-radio-group>
          <div class="now_date" v-if="showDateTime.length > 0" @click="showTime = true">
            <span>{{showDateTime[0]}}</span>
            <span>{{showDateTime[1]}}</span>
            <span>{{showDateTime[2]}}</span>
          </div>
        </div>
        <div class="send_btn_box">
          <div class="send_btn" @click="sendMass">一键群发</div>
        </div>
      </div>
    </div>
    <!-- 底部返回栏 -->
    <page-return></page-return>
  </div>
</body>
<script>
  new Vue({
    el: '#box',
    data() {
      return {
        httpUrl: '',
        bId: null,
        env: '',
        memberId: null,
        tenancyId: null,
        token: null,
        userId: null,
        showReturn: false,
        isConfirmingBack: false, // 标记是否已确认返回
        pushStateCount: 0, // 记录 pushState 的次数
        initialHistoryLength: 0, // 记录初始历史记录长度
        materialType: 1,
        formValidate: {
          name: '',
          contentText: '',
          memberIds: [],
          ctOthers: [],
          matters: [],
          type: 1,
          sendTime: '',
          tags: [],
        },
        matterImgList: [],
        matterOthersList: [],
        matterTypeList: [
          { contentType: 0, name: '文章' },
          { contentType: 2, name: '表单' },
          { contentType: 3, name: '文件' },
          { contentType: 4, name: '外部链接' },
          { contentType: 15, name: '视频' },
          { contentType: 17, name: '图集链接' },
        ],
        showMem: false,
        checkedMemIds: [], // 选中的成员id
        memList: [], // 成员列表
        SelectMem: [], // 选中的成员
        treeData: [], // 总部门树数据
        selectedMems: [], // 选中的所有成员数据
        itemList: [], // 当前树下的数据
        pathList: [], // 当前路径
        SelectWachAuthor: [], // 选好的微信成员
        showClientTag: false,
        showTime: false,
        dateIndex: 'hour',
        showDateColumns: false,
        dateColumns: [],
        nowDate: [], // 当前选中的日期
        NewDate: '', // 最终的日期
        showDateTime: [], // 外面展示的日期格式
      }
    },
    mounted() {
      // 监听浏览器返回按钮
      if (window.history && window.history.pushState) {
        // 记录初始历史记录长度
        this.initialHistoryLength = window.history.length;
        history.pushState(null, null, document.URL);
        this.pushStateCount = 1; // 记录初始 pushState
        window.addEventListener('popstate', this.handleBack, false);
      }

      // 监听微信/企业微信返回按钮
      if (typeof wx !== 'undefined' && wx.ready) {
        wx.ready(() => {
          wx.hideOptionMenu();
        });
      }
      if (typeof ww !== 'undefined' && ww.ready) {
        ww.ready(() => {
          ww.hideOptionMenu();
        });
      }
    },
    beforeDestroy() {
      // 移除事件监听
      window.removeEventListener('popstate', this.handleBack, false);
    },
    created() {
      this.bId = this.getQueryParam('bId')
      this.env = this.getQueryParam('env')

      if (!this.env || this.env === 'prod') {
        this.httpUrl = 'https://wlapi.wefanbot.com'
      } else {
        this.httpUrl = 'http://test.wefanbot.com:18993'
      }
      this.memberId = this.getQueryParam('memberId')
      this.token = localStorage.getItem('tokenValue')
      this.tenancyId = localStorage.getItem('tenancyIdValue')
      this.userId = localStorage.getItem('userId')
      this.formValidate = localStorage.getItem('clientMassData') ? JSON.parse(localStorage.getItem('clientMassData')) : {
        name: '',
        contentText: '',
        memberIds: [],
        ctOthers: [],
        matters: [],
        type: 1,
        sendTime: '',
        tags: [],
      }
      this.SelectWachAuthor = localStorage.getItem('selectedMems') ? JSON.parse(localStorage.getItem('selectedMems')) : []
      this.formValidate.matters = JSON.parse(localStorage.getItem('selectedMaters')) || []
      if (this.formValidate.matters && this.formValidate.matters.length > 0) {
        this.formValidate.matters.forEach(item => {
          if (item.contentType === 19) {
            this.matterImgList.push(item)
          } else {
            this.matterOthersList.push(item)
          }
        })
      }
    },
    methods: {
      handleBack(e) {
        // 如果已经确认返回，直接返回，不显示弹框
        if (this.isConfirmingBack) {
          return;
        }

        // 如果弹框已经显示，阻止默认返回行为，但不重复显示弹框
        if (this.showReturn) {
          // 阻止返回，重新添加历史记录
          if (window.history && window.history.pushState) {
            history.pushState(null, null, document.URL);
            this.pushStateCount++;
          }
          return;
        }

        // 阻止默认返回行为
        if (window.history && window.history.pushState) {
          history.pushState(null, null, document.URL);
          this.pushStateCount++;
        }

        // 显示确认弹框
        this.showReturn = true;
      },
      beforeClose(action, done) {
        if (action === 'confirm') {
          // 点击确定，设置确认返回标志
          this.isConfirmingBack = true;
          // 清理数据
          localStorage.removeItem('selectedMaters');
          localStorage.removeItem('selectedMems');
          localStorage.removeItem('clientMassData');
          // 移除事件监听，避免触发弹框
          window.removeEventListener('popstate', this.handleBack, false);
          // 关闭弹框
          done();
          // 直接跳转到 WeCom.html 页面
          setTimeout(() => {
            // 获取当前 URL 的查询参数，保留必要的参数
            const params = new URLSearchParams(window.location.search);
            const memberId = params.get('memberId') || this.memberId;
            const bId = params.get('bId') || this.bId;
            const env = params.get('env') || this.env;

            // 构建跳转 URL
            let targetUrl = 'pyqMassList.html';
            if (memberId || bId || env) {
              const queryParams = [];
              if (memberId) queryParams.push(`memberId=${memberId}`);
              if (bId) queryParams.push(`bId=${bId}`);
              if (env) queryParams.push(`env=${env}`);
              if (queryParams.length > 0) {
                targetUrl += '?' + queryParams.join('&');
              }
            }

            window.location.href = targetUrl;
          }, 150);
        } else {
          // 点击取消，关闭弹框，重新添加历史记录防止返回
          done();
          if (window.history && window.history.pushState) {
            history.pushState(null, null, document.URL);
            this.pushStateCount++;
          }
        }
      },
      // 打开成员选择
      handleAddMem() {
        this.showMem = true
        this.getTreeData(0)
      },
      // 打开标签选择
      handleAddTag() {
        localStorage.setItem('clientMassData', JSON.stringify(this.formValidate))
        this.showClientTag = true
      },
      // 接收标签数据
      handleAdd(labelFilter, tagList) {
        this.formValidate.tags = tagList.map(item => {
          return {
            id: item.id,
            name: item.name,
          }
        })
        this.showClientTag = false
      },
      // 获取树数据
      getTreeData(id) {
        this.treeData = []
        if (id === 0) {
          this.pathList = []
          this.itemList = []
        }
        const headers = new Headers()
        headers.append('tenancyId', this.tenancyId)
        headers.append('token', this.token)
        headers.append('userId', this.userId)
        fetch(this.httpUrl + `/scrm/v1/wxcp-dept/m/findByParentId?parentId=${id}`, {
          method: 'GET',
          headers: headers
        }).then(res => {
          return res.json()
        }).then(result => {
          let { data, code, msg } = result
          if (code === 1) {
            this.treeData = data || []
          } else {
            vant.Toast.fail(msg)
          }
        })
      },
      // 点击树路径
      handlePathClick(item) {
        // 找到目标元素的索引
        const index = this.pathList.findIndex(arr => arr.id === item.id)
        // 如果找到了该元素
        if (index !== -1) {
          // 从该索引位置开始删除到数组末尾
          this.pathList.splice(index)
          this.handleDeptClick(item)
        }
      },
      //点击部门
      handleDeptClick(item) {
        this.pathList.push(item)
        this.treeData = []
        this.itemList = []
        this.getTreeData(item.id)
        fetch(this.httpUrl + '/scrm/v1/wxcp-dept/m/findActiveDeptMemberListByPage', {
          method: 'post',
          body: JSON.stringify({
            deptId: item.id,
            page: 1,
            pageCount: 1000,
          }),
          headers: {
            'Content-Type': 'application/json',
            'tenancyId': this.tenancyId,
            'token': this.token,
            'userId': this.userId,
          }
        }).then(res => {
          return res.json()
        }).then(result => {
          let { data, code, msg } = result
          if (code === 1) {
            this.itemList = data.records || []
            if (this.itemList.length > 0) {
              // 回显已选择的数据
              this.checkedMemIds = this.extractSameIds(this.itemList, this.selectedMems)
            }
          } else {
            vant.Toast.fail(msg)
          }
        })
      },
      extractSameIds(itemList, selectedMems) {
        const arr2Ids = new Set(selectedMems.map(item => item.memberId))
        return itemList.filter(item => arr2Ids.has(item.memberId))
          .map(item => item.memberId)
      },
      // 成员选择改变
      onChangeMem(item) {
        const currentSelected = this.itemList
          .filter(item => this.checkedMemIds.includes(item.memberId))
          .map(item => ({
            ...item,
          }))

        // 先删除当前页面未选中的数据
        const currentPageIds = new Set(this.itemList.map(item => item.memberId))
        this.selectedMems = this.selectedMems.filter(item => {
          // 如果是当前页面的数据，但未选中，则删除
          if (currentPageIds.has(item.memberId)) {
            return this.checkedMemIds.includes(item.memberId)
          }
          // 如果不是当前页面的数据，保留
          return true
        })

        // 合并当前选中的和之前选中的，基于 id 去重（当前选中的优先，使用最新的类型）
        const existingIdsMap = new Map()
        this.selectedMems.forEach(item => {
          existingIdsMap.set(item.memberId, item)
        })

        // 更新或添加当前选中的数据（优先使用当前页面的数据和类型）
        currentSelected.forEach(item => {
          existingIdsMap.set(item.memberId, item)
        })

        this.selectedMems = Array.from(existingIdsMap.values())

        console.log('当前选中的所有成员数据: ', this.selectedMems)
        localStorage.setItem('selectedMems', JSON.stringify(this.selectedMems))
      },
      // 取消成员选择
      handleCancelMem() {
        this.showMem = false
        this.selectedMems = this.SelectWachAuthor
        localStorage.setItem('selectedMems', JSON.stringify(this.selectedMems))
      },
      // 确定成员选择
      handleMem() {
        let selectData = this.selectedMems.map((item) => {
          return {
            name: item.name,
            memberId: item.memberId,
          }
        })
        const strings = selectData.map((item) => JSON.stringify(item))
        this.SelectWachAuthor = [...new Set(strings)].map((item) => JSON.parse(item))
        this.formValidate.memberIds = [...new Set(this.selectedMems)].map((item) => item.memberId)
        this.formValidate.memberIds = Array.from(new Set(this.formValidate.memberIds))
        console.log('最终成员选择: ', this.formValidate.memberIds)
        this.showMem = false
      },
      handleRadioType(val) {
        if (val === 2) {
          this.showTime = true
          if (!this.nowDate.length) {
            this.getTimeInfo('hour')
          }
          this.dateColumns = [
            {
              values: this.generateDateArray(),
            },
            {
              values: this.generateHourArrayEnhanced(),
            },
            {
              values: this.generateMinuteArrayWithLoop(),
            }
          ]
        } else {

        }
      },
      // 生成日期数组第一组数据
      generateDateArray() {
        const result = [];
        const today = new Date();

        // 星期映射
        const weekDays = ['日', '一', '二', '三', '四', '五', '六'];

        // 前三天特殊处理
        const dayNames = ['今天', '明天', '后天'];

        for (let i = 0; i < 365; i++) {
          const currentDate = new Date(today);
          currentDate.setDate(today.getDate() + i);

          const year = currentDate.getFullYear();
          const month = currentDate.getMonth() + 1;
          const date = currentDate.getDate();
          const day = currentDate.getDay();

          // 获取星期几的中文
          const weekDay = `周${weekDays[day]}`;

          if (i < 3) {
            // 前三天用特殊格式
            result.push(`${dayNames[i]} ${weekDay}`);
          } else {
            // 从第四天开始用正常日期格式
            // 年份只显示后两位
            const shortYear = year.toString().slice(-2);
            result.push(`${shortYear}年${month}月${date}日 ${weekDay}`);
          }
        }

        return result;
      },
      // 生成小时数组
      generateHourArrayEnhanced() {
        const now = new Date();
        const currentHour = now.getHours(); // 获取当前小时（0-23）
        const currentMinute = now.getMinutes(); // 获取当前分钟（0-59）
        const result = [];

        // 计算开始小时：如果当前分钟≥55，从下一小时开始
        let startHour = currentHour;
        if (currentMinute >= 55) {
          startHour = currentHour + 1;
        }

        // 如果开始小时大于23，返回空数组（因为已经超过今天的小时范围）
        if (startHour > 23) {
          return [];
        }

        // 从开始小时到23时
        for (let hour = startHour; hour <= 23; hour++) {
          result.push(`${hour}时`);
        }

        return result;
      },
      // 生成分钟数组，从当前分钟开始，循环到59分
      generateMinuteArrayWithLoop() {
        const now = new Date();
        const currentMinute = now.getMinutes(); // 获取当前分钟（0-59）
        const startMinute = (currentMinute + 5) % 60; // 计算开始分钟，如果超过59则从0开始

        const result = [];

        // 从开始分钟到59分
        for (let minute = startMinute; minute <= 59; minute++) {
          result.push(`${minute}分`);
        }

        return result;
      },
      handleChangeDate(values, index) {
        if (index[0].substring(0, 2) === '今天') {
          this.dateColumns[1].values = this.generateHourArrayEnhanced()
          index[1] = this.dateColumns[1].values[0]
          this.dateColumns[2].values = this.generateMinuteArrayWithLoop()
          index[2] = this.dateColumns[2].values[0]
        } else {
          this.dateColumns[1].values = Array.from({ length: 24 }, (_, i) => `${i}时`)
          this.dateColumns[2].values = Array.from({ length: 60 }, (_, i) => `${i}分`)
        }
        this.dateIndex = ''
        this.NewDate = this.convertArrayToDateTime(index)
      },
      // 将那4个选项转为相应的数据
      getTimeInfo(interval) {
        const weekDays = ['日', '一', '二', '三', '四', '五', '六'];
        const now = new Date();
        const result = new Date(now);

        // 时间间隔映射
        const intervals = {
          'hour': () => result.setHours(result.getHours() + 1, result.getMinutes() + 5),
          'day': () => result.setDate(result.getDate() + 1),
          'week': () => result.setDate(result.getDate() + 7),
          'month': () => result.setMonth(result.getMonth() + 1)
        };

        // 应用时间间隔
        intervals[interval]?.();
        if (interval !== 'hour') result.setMinutes(result.getMinutes() + 5);

        // 将秒数设置为0（确保格式化为 "00" 秒）
        result.setSeconds(0, 0);

        // 格式化为 "2026-01-01 00:00:00" 格式
        const year = result.getFullYear();
        const month = String(result.getMonth() + 1).padStart(2, '0');
        const day = String(result.getDate()).padStart(2, '0');
        const hours = String(result.getHours()).padStart(2, '0');
        const minutes = String(result.getMinutes()).padStart(2, '0');

        // 赋值给 NewDate 变量
        this.NewDate = `${year}-${month}-${day} ${hours}:${minutes}:00`;
        // 格式化（原有逻辑保持不变）
        const dayOfWeek = weekDays[result.getDay()];
        const time = `${hours}:${minutes}`;

        // 日期描述
        let dateDesc = '';
        if (interval === 'hour') {
          const isSameDay = now.toDateString() === result.toDateString();
          dateDesc = isSameDay ? '今天' : '明天';
        } else if (interval === 'day') {
          dateDesc = '明天';
        } else {
          dateDesc = `${result.getMonth() + 1}月${result.getDate()}日`;
        }

        this.dateIndex = interval;
        this.nowDate = [dateDesc, `周${dayOfWeek}`, time];
        this.showDateColumns = false;
      },
      // 将选择的日期时间数组转换为标准格式
      convertArrayToDateTime(arr) {
        // 获取当前日期和时间
        const now = new Date();
        const currentYear = now.getFullYear();
        const currentMonth = now.getMonth() + 1;
        const currentDate = now.getDate();

        let targetDate;
        const firstPart = arr[0];

        // 解析小时和分钟
        const hourStr = arr[1].replace('时', '');
        const minuteStr = arr[2].replace('分', '');
        const hour = parseInt(hourStr);
        const minute = parseInt(minuteStr);

        // 判断是哪种情况
        if (firstPart.includes('今天')) {
          // 今天的情况
          targetDate = new Date(currentYear, currentMonth - 1, currentDate, hour, minute, 0);
        } else if (firstPart.includes('明天')) {
          // 明天的情况
          const tomorrow = new Date(now);
          tomorrow.setDate(currentDate + 1);
          targetDate = new Date(tomorrow.getFullYear(), tomorrow.getMonth(), tomorrow.getDate(), hour, minute, 0);
        } else if (firstPart.includes('后天')) {
          // 后天的情况
          const dayAfterTomorrow = new Date(now);
          dayAfterTomorrow.setDate(currentDate + 2);
          targetDate = new Date(dayAfterTomorrow.getFullYear(), dayAfterTomorrow.getMonth(), dayAfterTomorrow.getDate(), hour, minute, 0);
        } else {
          // 具体日期的情况，如 '26年1月1日 周四'
          // 提取日期部分（去掉星期几）
          const dateStr = firstPart.split(' ')[0];

          // 解析日期字符串，如 "26年1月1日"
          const dateMatch = dateStr.match(/(\d+)年(\d+)月(\d+)日/);

          if (dateMatch) {
            let year = parseInt(dateMatch[1]);
            const month = parseInt(dateMatch[2]);
            const day = parseInt(dateMatch[3]);

            // 处理两位数年份：假设20xx年
            if (year < 100) {
              year += 2000;
            }

            targetDate = new Date(year, month - 1, day, hour, minute, 0);
          } else {
            throw new Error('日期格式解析错误');
          }
        }

        // 格式化为 "YYYY-MM-DD HH:mm:00"
        const year = targetDate.getFullYear();
        const month = String(targetDate.getMonth() + 1).padStart(2, '0');
        const day = String(targetDate.getDate()).padStart(2, '0');
        const hours = String(targetDate.getHours()).padStart(2, '0');
        const minutes = String(targetDate.getMinutes()).padStart(2, '0');

        return `${year}-${month}-${day} ${hours}:${minutes}:00`;
      },
      //  将"2026-01-01 00:00:00"这种格式的数据转为['2026年1月1日'，‘周四’，‘0时0分’]这种格式
      formatDateTimeToArray(dateTimeStr) {
        // 解析输入的时间字符串
        let date;

        try {
          // 处理 "YYYY-MM-DD HH:mm:ss" 格式
          date = new Date(dateTimeStr.replace(' ', 'T'));

          // 验证日期是否有效
          if (isNaN(date.getTime())) {
            throw new Error('无效的日期时间格式');
          }
        } catch (error) {
          throw new Error(`日期解析失败: ${error.message}`);
        }

        // 获取年、月、日
        const year = date.getFullYear();
        const month = date.getMonth() + 1; // getMonth() 返回 0-11
        const day = date.getDate();

        // 获取小时和分钟（24小时制）
        const hour = date.getHours();  // 0-23
        const minute = date.getMinutes();  // 0-59

        // 获取星期几
        const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
        const weekDay = weekDays[date.getDay()];

        // 构建数组
        this.showDateTime = [
          `${year}年${month}月${day}日`,
          weekDay,
          `${hour}时${minute}分`
        ];
      },
      handleShowDateColumns() {
        this.showDateColumns = true
      },
      handleTime() {
        this.formatDateTimeToArray(this.NewDate)
        this.formValidate.sendTime = this.NewDate
        this.showTime = false
      },
      handleCloseMatter(item) {
        this.formValidate.matters = this.removeItemFromArray(this.formValidate.matters, item)
        this.matterOthersList = this.removeItemFromArray(this.matterOthersList, item)
        this.matterImgList = this.removeItemFromArray(this.matterImgList, item)

        this.deleteItemFromLocalStorage('selectedMaters', item.id)
      },
      // 从localStorage中删除指定id的对象项
      deleteItemFromLocalStorage(storageKey, idToDelete) {
        try {
          // 1. 从localStorage获取数据
          const storedData = localStorage.getItem(storageKey);

          if (!storedData) {
            console.warn(`未找到键为 "${storageKey}" 的数据`);
            return false;
          }

          // 2. 解析JSON数据
          const dataArray = JSON.parse(storedData);

          if (!Array.isArray(dataArray)) {
            console.error(`"${storageKey}" 中存储的不是数组`);
            return false;
          }

          // 3. 过滤掉要删除的项
          const filteredArray = dataArray.filter(item => item.id !== idToDelete);

          // 4. 检查是否有删除
          if (filteredArray.length === dataArray.length) {
            console.warn(`未找到id为 "${idToDelete}" 的项`);
            return false;
          }

          // 5. 将过滤后的数组存回localStorage
          localStorage.setItem(storageKey, JSON.stringify(filteredArray));

          console.log(`成功删除id为 "${idToDelete}" 的项`);
          return true;
        } catch (error) {
          console.error('删除localStorage项时出错:', error);
          return false;
        }
      },
      // 播放暂停视频
      playPause() {
        const video = document.getElementById('myVideo')
        const playButton = document.getElementById("playButton")
        if (video.paused) {
          video.play()
        } else {
          video.pause()
        }
      },
      // 一键群发
      sendMass() {
        if (!this.formValidate.name) {
          vant.Toast.fail('请填写任务名称')
          return
        }
        if (this.formValidate.memberIds && this.formValidate.memberIds.length === 0) {
          vant.Toast.fail('请选择成员')
          return
        }
        if (!this.formValidate.contentText && this.formValidate.ctOthers.length === 0 && this.formValidate.matters.length === 0) {
          vant.Toast.fail('请添加要发送的内容')
          return
        }
        if (this.formValidate.type === 2 && !this.formValidate.sendTime) {
          vant.Toast.fail('请设置群发时间再提交')
          return
        }
        if (this.formValidate.type === 1) {
          this.formValidate.sendTime = ''
        }
        if (this.formValidate.matters && this.formValidate.matters.length) {
          this.formValidate.matters = this.formValidate.matters.map(matter => {
            return {
              contentId: matter.id,
              contentType: matter.contentType,
              headUrl: matter.cover || '',
              title: matter.title || matter.name,
            }
          })
          if (!this.validateMaterials(this.formValidate.matters).valid) {
            vant.Toast.fail(this.validateMaterials(this.formValidate.matters).message)
            return
          }
        }
        fetch(this.httpUrl + '/scrm/v1/wxcp-moment/m/add', {
          method: 'post',
          body: JSON.stringify({
            ...this.formValidate,
          }),
          headers: {
            'Content-Type': 'application/json',
            'token': this.token,
            'tenancyId': this.tenancyId,
            'userId': this.userId,
          }
        }).then(res => {
          return res.json()
        }).then(result => {
          let { data, code, msg } = result
          if (code === 1) {
            vant.Toast.success('发布成功')
            localStorage.removeItem('selectedMems')
            localStorage.removeItem('clientMassData')
            localStorage.removeItem('selectedMaters')
            this.beforeClose('confirm', () => { })
          } else {
            vant.Toast.fail(msg)
          }
        })
      },
      validateMaterials(materials) {
        // 分离 type 为 19 和不为 19 的项
        const type19Items = materials.filter(item => item.type === 19);
        const otherTypeItems = materials.filter(item => item.type !== 19);

        // 检查条件
        if (type19Items.length > 0 && otherTypeItems.length > 0) {
          return {
            valid: false,
            message: "图片和别的素材只能传一种"
          };
        }

        // 检查其他类型是否有多条
        if (otherTypeItems.length > 1) {
          return {
            valid: false,
            message: "同一类型的素材只能上传一条"
          };
        }

        return {
          valid: true,
        };
      },
      // 创建删除函数生成器
      removeItemFromArray (array, item) {
        return array.filter(element => {
          // 如果 element 有 id，则用 id 比较
          if (element.id) {
            return element.id !== item.id
          }
          // 如果 element 有 contentId，则用 contentId 比较
          if (element.contentId) {
            return element.contentId !== item.id
          }
          // 如果都没有，保留元素
          return true
        })
      },
      processData(data) {
        return data.map(obj => {
          // 过滤掉tags为空的条件项
          const filteredTagCondList = obj.tagCondList.filter(cond => cond.tags.length > 0)

          // 如果过滤后tagCondList不为空则保留该对象
          return filteredTagCondList.length > 0
            ? { ...obj, tagCondList: filteredTagCondList }
            : null
        }).filter(obj => obj !== null) // 剔除空对象
      },
      // 添加素材
      handleAddMatter() {
        if (this.materialType === 1) {
          localStorage.setItem('clientMassData', JSON.stringify(this.formValidate))
          window.location.href = `material.html?memberId=${this.memberId}&bId=${this.bId}&env=${this.env}&hideType=3`
        } else {
          // 创建一个input元素，用于选择相册中的图片
          const input = document.createElement('input');
          input.type = 'file';
          input.accept = 'image/*';
          // 添加change事件监听，当选择图片后触发回调函数
          input.addEventListener('change', this.handleFileSelect);
          // 触发input的点击事件，打开相册
          input.click();
        }
      },
      handleFileSelect(event) {
        // 获取选择的图片
        const file = event.target.files[0];
        // 使用FileReader读取图片数据
        const reader = new FileReader();
        reader.onload = (e) => {
          // 将读取的图片数据赋值给selectedImage，用于展示选择的图片
          // this.selectedImage = e.target.result;
          console.log('等待', e.target.result);

        };
        reader.readAsDataURL(file);
      },
      // 截取url中的数据
      getQueryParam(paramName) {
        // 获取当前URL的查询字符串部分  
        const queryString = window.location.search;
        // 创建一个URLSearchParams对象  
        const urlParams = new URLSearchParams(queryString);
        // 返回指定参数的值，如果不存在则返回null  
        return urlParams.get(paramName);
      },
    }
  })   
</script>

</html>