wfg
/
lottery


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965
							<!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: 163px;
    height: 60px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #EFEFEF;
    position: relative;
  }

  .matters_item_img {
    width: 40px;
    height: 40px;
    margin-right: 8px;
  }
  .close_mater {
    width: 24px;
    height: 24px;
    position: absolute;
    top: -8px;
    right: -8px;
  }
  .matters_item_info {
    display: flex;
    flex-direction: column;
    font-size: 12px;
    color: #999999;
    line-height: 17px;
  }

  .matters_item_title {
    font-size: 12px;
    color: #222222;
    line-height: 17px;
    width: 96px;
    /* 必须设置宽度 */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-bottom: 4px;
  }

  .matters_list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .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: 20px 0 10px;
  }
  .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_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>
      <!-- 标签筛选组件 -->
      <select-tag :show-Client-Tag.sync="showClientTag" :show-Label-Filter="showLabelFilter" :label-Filter.sync="selectLabelFilter" :select-Tag-List.sync="SelectWach" @add="handleAdd"></select-tag>
      <!-- 选择群发时间 -->
      <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="showFilter" duration="0.2" round position="bottom" :close-on-click-overlay="false"
        :style="{ width: '100%', height: '266px' }">
        <div class="clientTag_title">
          <div class="close_icon"></div>
          <div>筛选条件</div>
          <img class="close_icon" src="../img/qw/close_icon.png" alt="" @click="showFilter = false">
        </div>
        <div class="filter_list">
          <div class="dev_left" :class="filterIndex ? 'filter_or' : 'filter_exc'" @click="filterIndex = 1">或</div>
          <div class="dev_right" :class="(formValidate.tagReq.excludeTags.length || filterIndex) ? 'filter_exc' : 'filter_exc_active'" @click="handleExclude">排除</div>
        </div>
        <div class="tag_footers">
          <div class="tag_re_btn" @click="showFilter = false">取消</div>
          <div class="tag_ok_btn" @click="handleFilter">保存</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>
      <!-- 客群包数据 -->
      <van-popup v-model="showClientBag" 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="showClientBag = false">
        </div>
        <div class="search_box">
          <van-search class="search_input" placeholder="搜索客户昵称/客户群昵称" v-model="clientBagKeyword" :clearable="false" left-icon=""
            @search="handleAddClientBag">
            <!-- 自定义右侧图标 -->
            <template v-slot:right-icon>
              <img class="search_icon" src="../img/qw/search_icon.png" alt="" @click="handleAddClientBag" />
            </template>
          </van-search>
        </div>
        <div class="tag_list">
          <van-checkbox-group v-model="checkedCbIds" @change="onChangeChecked">
            <div class="data_item" v-for="item in clientBagList" :key="item.id">
              <div class="data_title">{{item.name}}</div>
              <van-checkbox :name="item.id">
                <template #icon="props">
                  <div :class="props.checked ? 'check_div_active' : 'check_div'"></div>
                </template>
              </van-checkbox>
            </div>
          </van-checkbox-group>
        </div>
        <div class="tag_footer">
          <div class="tag_re_btn" @click="showClientBag = false">取消</div>
          <div class="tag_ok_btn" @click="handleCb">保存</div>
        </div>
      </van-popup>
      <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>
          <van-radio-group v-model="formValidate.isAll" 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="0">
              筛选客户
              <template #icon="props">
                <div :class="props.checked ? 'check_div_active' : 'check_div'"></div>
              </template>
            </van-radio>
          </van-radio-group>
          <div v-if="!formValidate.isAll">
            <div class="send_item_name">客群包</div>
            <div class="mem_tag mem_tag_list">
              <span v-for="(item, index) in SelectPackage" :key="index">{{item.name}}</span>
            </div>
            <div class="cond_btn_box">
              <div class="matter_btn" @click="handleAddClientBag">{{SelectPackage.length ? '编辑' : '添加'}}客群包</div>
            </div>
            <div class="send_item_name">筛选条件</div>
            <div class="mem_tag" :class="index > 0 ? 'condition_box2' : 'condition_box1'" v-for="(item, index) in formValidate.tagReq.tagPackageList" :key="index">
              <div class="mem_title">
                <div class="mem_title_left">{{index > 0 ? '或' : '初始条件'}}</div>
                <div class="mem_title_right" @click="handleCond(index)">
                  <img src="../img/qw/con_add.png" alt="">
                  <div>添加</div>
                </div>
              </div>
              <div class="condition_list" v-for="(cond, condIndex) in formValidate.tagReq.tagPackageList[index].tagCondList" :key="condIndex">
                <div class="con_data">
                  <div class="con_data_title">条件{{ condIndex + 1 }}</div>
                  <div class="con_data_edit" @click="handleSelectWach(index, condIndex, 'package')">修改</div>
                  <div class="con_data_del"@click="handleDelCond(index, condIndex)">删除</div>
                </div>
                <van-radio-group class="tag_radio" v-model="cond.labelFilter" direction="horizontal">
                  <van-radio :name="1" class="tag_radio_item">
                    标签满足其一
                    <template #icon="props">
                      <div :class="props.checked ? 'check_div_active' : 'check_div'"></div>
                    </template>
                  </van-radio>
                  <van-radio :name="0">
                    标签同时满足
                    <template #icon="props">
                      <div :class="props.checked ? 'check_div_active' : 'check_div'"></div>
                    </template>
                  </van-radio>
                </van-radio-group>
                <div class="mem_tag_list" :class="index > 0 ? 'condition_mem_tag2' : 'condition_mem_tag1'">
                  <span v-for="(tag, tagIndex) in cond.tags" :key="tagIndex">{{tag.name}}</span>
                </div>
              </div>
            </div>
            <div class="condition_box3" v-if="formValidate.tagReq.excludeTags.length">
              <div>
                <div class="con_data">
                  <div class="mem_title_left exc_title">排除</div>
                  <div class="con_data_edit" @click="handleExcludeTags('exclude')">修改</div>
                  <div class="con_data_del" @click="handleDelExclude">删除</div>
                </div>
                <div class="condition_mem_tag3 mem_tag_list">
                  <span v-for="(tag, tagIndex) in formValidate.tagReq.excludeTags" :key="tagIndex">{{tag.name}}</span>
                </div>
              </div>
            </div>
            <div class="cond_btn_box">
              <div class="matter_btn" @click="handleAddFilter">添加筛选条件</div>
            </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" 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.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">
              定时转发
              <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, // 记录初始历史记录长度
        clientBagKeyword: '',
        showClientBag: false,
        checkedCbIds: [], // 选中的客群包id
        clientBagList: [], // 客群包列表
        SelectPackage: [], // 选中的客群包
        showClientTag: false,
        selectLabelFilter: 0,
        showLabelFilter: true,
        pageIndex: 0,
        condIndex: 0,
        tagType: 'package',
        SelectWach: [],
        showFilter: false,
        filterIndex: 1,
        materialType: 1,
        formValidate: {
          name: '',
          contentText: '',
          memberIds: [],
          ctOthers: [],
          matters: [],
          isAll: 1,
          type: 1,
          tagReq: {
            excludeTags: [],
            packageList: [],
            tagPackageList: []
          }
        },
        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: [], // 选好的微信成员
        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: [],
        isAll: 1,
        type: 1,
        tagReq: {
          excludeTags: [],
          packageList: [],
          tagPackageList: []
        }
      }
      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)
          }
        })
      }
      // 客群包
      if (this.formValidate.tagReq && this.formValidate.tagReq.packageList && this.formValidate.tagReq.packageList.length > 0) {
        this.SelectPackage = this.formValidate.tagReq.packageList || []
        this.checkedCbIds = this.SelectPackage.map(item => item.id)
      }
    },
    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 = 'clientMassList.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)
      },
      // 获取树数据
      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
      },
      // 打开客群包
      handleAddClientBag() {
        this.showClientBag = true
        fetch(this.httpUrl + '/scrm/v1/wxcp-package/m/findListByPage', {
          method: 'post',
          body: JSON.stringify({
            keyword: this.clientBagKeyword,
            page: 1,
            pageCount: 1000,
          }),
          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) {
            this.clientBagList = data.records || []
          } else {
            vant.Toast.fail(msg)
          }
        })
      },
      onChangeChecked (val) {
        this.checkedCbIds = val
      },
      // 选择客群包
      handleCb() {
        this.SelectPackage = this.clientBagList.filter(item => this.checkedCbIds.includes(item.id))
        this.formValidate.tagReq.packageList = this.SelectPackage.length ? this.SelectPackage.map(item => {
          return {
            id: item.id,
            name: item.name
          }
        }) : []
        this.showClientBag = false
      },
      // 添加或
      handleAddFilter() {
        if (this.formValidate.tagReq.tagPackageList && this.formValidate.tagReq.tagPackageList.length > 0) {
          this.showFilter = true
          this.filterIndex = 1
        } else {
          this.showClientTag = true
        }
      },
      handleFilter () {
        if (this.filterIndex === 1) {
          this.formValidate.tagReq.tagPackageList.push({
            tagCondList: [
              {
                tags: [],
                labelFilter: 0
              }
            ]
          })
        } else {
          // 打开排除标签选择
          this.tagType = 'exclude'
          this.SelectWach = this.formValidate.tagReq.excludeTags
          this.showLabelFilter = false
          this.showFilter = false
          this.showClientTag = true
        }
        this.showFilter = false
      },
      // 点击排除标签
      handleExclude() {
        if (this.formValidate.tagReq.excludeTags && this.formValidate.tagReq.excludeTags.length > 0) {
          this.filterIndex = 1
        } else {
          this.filterIndex = 0
        }
      },
      // 添加且
      handleCond(index) {
        this.formValidate.tagReq.tagPackageList[index].tagCondList.push({
          tags: [],
          labelFilter: 0
        })
      },
      // 修改标签选择
      handleSelectWach(index, condIndex, tagType) {
        this.pageIndex = index
        this.condIndex = condIndex
        this.tagType = tagType
        this.SelectWach = this.formValidate.tagReq.tagPackageList[index].tagCondList[condIndex].tags
        this.selectLabelFilter = this.formValidate.tagReq.tagPackageList[index].tagCondList[condIndex].labelFilter
        this.showLabelFilter = true
        this.showClientTag = true
      },
      // 删除条件
      handleDelCond(index, condIndex) {
        this.formValidate.tagReq.tagPackageList[index].tagCondList.splice(condIndex, 1)
        if (this.formValidate.tagReq.tagPackageList[index].tagCondList.length === 0) {
          this.formValidate.tagReq.tagPackageList.splice(index, 1)
        }
      },
      // 修改排除
      handleExcludeTags(tagType) {
        this.tagType = tagType
        this.SelectWach = this.formValidate.tagReq.excludeTags
        this.showLabelFilter = false
        this.showClientTag = true
      },
      // 删除排除
      handleDelExclude() {
        this.formValidate.tagReq.excludeTags = []
      },
      // 接收标签数据
      handleAdd(labelFilter, tagList) {
        if (this.tagType === 'exclude') {
          this.formValidate.tagReq.excludeTags = tagList
        } else {
          this.SelectWach = tagList
          this.selectLabelFilter = labelFilter
          if (this.formValidate.tagReq.tagPackageList.length === 0) {
            this.formValidate.tagReq.tagPackageList.push({
              tagCondList: [
                {
                  tags: tagList,
                  labelFilter: labelFilter
                }
              ]
            })
          } else {
            this.formValidate.tagReq.tagPackageList[this.pageIndex].tagCondList[this.condIndex].tags = tagList
            this.formValidate.tagReq.tagPackageList[this.pageIndex].tagCondList[this.condIndex].labelFilter = labelFilter
          }
        }
        this.showClientTag = 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.formValidate.matters.filter(matter => matter.id !== item.id)
        this.matterOthersList = this.matterOthersList.filter(matter => matter.id !== item.id)
        this.matterImgList = this.matterImgList.filter(img => img.id !== item.id)
        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.matters && this.formValidate.matters.length > 9) {
          vant.Toast.fail('发送素材最多9个')
          return
        }
        if (this.formValidate.type === 2 && !this.formValidate.sendTime) {
          vant.Toast.fail('请设置群发时间再提交')
          return
        }
        if (this.formValidate.type === 1) {
          this.formValidate.sendTime = ''
        }
        this.formValidate.tagReq.tagPackageList = this.processData(this.formValidate.tagReq.tagPackageList)
        fetch(this.httpUrl + '/scrm/v1/wxcp-send/m/add2', {
          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)
          }
        })
      },
      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}`
        } 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>