wfg
/
lottery


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903
							<!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" />
  <!-- 必须先引入vue，  后使用vant-ui -->
  <link rel="stylesheet" href="../css/select-tag.css">
  <link rel="stylesheet" href="../css/page-return.css">
  <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/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;
    height: 100vh;
    box-sizing: border-box;
    background: #F7F9FC;
  }

  .page5 {
    width: 100vw;
    box-sizing: border-box;
  }
  .page_top {
    width: 100%;
    height: 144px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background: #FFFFFF;
    border-radius: 0px 0px 15px 15px;
  }
  .client_top_box {
    padding: 15px 15px 0px;
  }
  .search_icon {
    width: 24px;
    height: 24px;
  }
  .search_input {
    padding: 0;
  }
  .search_input .van-search__content {
    padding: 0;
    border-radius: 19px;
  }
  .search_input .van-cell {
    padding: 0;
  }
  .search_input .van-field__body {
    display: flex;
    align-items: center;
    position: relative;
  }
  .search_input .van-field__body input{
    border: none;
    width: 100%;
    height: 40px;
    background: #FAFAFA;
    padding: 10px 36px 10px 15px;
    border-radius: 19px;
  }
  .search_input .van-field__body input:focus {
    outline: none;
  }
  .search_input .van-field__body .van-field__right-icon{
    position: absolute;
    right: 12px;
  }
  .type_list {
    display: flex;
    align-items: flex-end;
    gap: 25px;
    padding: 15px 0px 13px 15px;
    overflow-x: auto;
  }
  .type_list img {
    width: 40px;
    height: 40px;
  }
  .type_item {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .type_title {
    font-size: 12px;
    line-height: 17px;
    white-space: nowrap;
    color: #999999;
  }
  .type_active {
    color: #222222;
    padding-top: 8px;
  }
  .page_content {
    background: #FFFFFF;
    border-radius: 15px 15px 0px 0px;
    position: absolute;
    top: 156px;
    left: 0;
    z-index: 1;
    width: 100%;
  }
  .page_box {
    padding: 15px 15px 0;
  }
  .path_list {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    white-space: nowrap;
    width: 100%;
    overflow-x: auto;
    margin-bottom: 25px;
  }
  .path_span {
    font-size: 12px;
    color: #999999;
    line-height: 17px;
  }
  .page_foot {
    position: absolute;
    bottom: 39px;
    left: 0;
    width: 100%;
  }
  .filter_list {
    display: flex;
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow-x: auto;
    padding: 10px 0px 10px 15px;
    background: #FAFAFA;
  }
  .filter_span {
    font-size: 12px;
    color: #999999;
  }
  .filter_count_blue {
    color: #136DFB;
  }
  .foot_btn {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 30px;
    background: #FFFFFF;
    box-shadow: 0px -3px 6px 1px rgba(0,0,0,0.05);
  }
  .btn_reset {
    border-radius: 20px;
    border: 1px solid #CCCCCC;
    font-weight: 500;
    font-size: 14px;
    color: #999999;
    padding: 15px 0;
    width: 100%;
    text-align: center;
  }
  .btn_confirm {
    border-radius: 20px;
    background: #1677FF;
    font-weight: 500;
    font-size: 14px;
    color: #FFFFFF;
    padding: 15px 0;
    width: 100%;
    text-align: center;
  }
  .data_list {
    gap: 25px;
    overflow-y: auto;
  }
  .data_item {
    display: flex;
    align-items: center;
    padding: 0 5px;
    margin-bottom: 25px;
  }
  .data_item img {
    width: 40px;
    height: 40px;
  }
  .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;
    padding-right: 43px;
    padding-left: 12px;
    max-width: 279px;
    box-sizing: border-box;
  }
  .check_div {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid #CCCCCC;
    box-sizing: border-box;
  }
  .fold_item {
    display: flex;
    align-items: center;
  }
  .check_div_active {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid #136DFB;
    box-sizing: border-box;
  }
  .check_div_active:after{
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #136DFB;
    position: relative;
    top: 2px;
    left: 2px;
  }
  .path_line {
    font-size: 12px;
    color: #999999;
    line-height: 17px;
    padding: 0 10px;
  }
  .path_item:last-child {
    color: #222222;
  }
  .filter_list1 {
    display: flex;
    flex-wrap: nowrap;
    white-space: nowrap;
    height: 146px;
    overflow-y: auto;
    background: #FFFFFF;
    box-sizing: border-box;
    padding: 5px 15px 20px;
    gap: 15px;
  }
  .filter_list1 img {
    width: 60px;
    height: 60px;
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 10px;
  }
  .filter_img {
    width: 100%;
    color: #136DFB;
    background: rgba(19, 109, 251, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
  }
  .filter_exc {
    width: 100%;
    color: #999999;
    background: #FAFAFA;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
  }
  .imgList_list {
    display: flex;
    flex-wrap: wrap;
    overflow-x: auto;
    padding: 5px 15px 0;
    background: #FFFFFF;
    height: 446px;
    overflow-y: auto;
    box-sizing: border-box;
    gap: 15px;
    align-content: flex-start;
  }
  .imgList_list div {
    width: 105px;
    height: 140px;
    border-radius: 10px;
    position: relative;
  }
  .imgList_item {
    width: 105px;
    height: 140px;
    border-radius: 10px;
    object-fit: cover;
  }
  .imgList_select {
    width: 16px;
    height: 16px;
    position: absolute;
    top: 5px;
    right: 5px;
  }
</style>

<body>
  <div id="box" class="box">
    <div class="page5">
      <!-- 选择视频格式 -->
      <van-popup v-model="showVideoType" 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="showVideoType = false">
        </div>
        <div class="filter_list1">
          <div :class="filterIndex ? 'filter_img' : 'filter_exc'" @click="filterIndex = 1">
            <img :src="filterIndex ? '../img/qw/video_type.png' : '../img/qw/video_type1.png'" alt="">
            <div>视频</div>
          </div>
          <div :class="filterIndex ? 'filter_exc' : 'filter_img'" @click="filterIndex = 0">
            <img :src="filterIndex ? '../img/qw/videoLink_type1.png' : '../img/qw/videoLink_type.png'" alt="">
            <div>视频链接</div>
          </div>
        </div>
        <div class="tag_footers">
          <div class="tag_re_btn" @click="showVideoType = false">取消</div>
          <div class="tag_ok_btn" @click="handleVideoType">确定</div>
        </div>
      </van-popup>
      <!-- 选择图集格式 -->
      <van-popup v-model="showImgType" 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="showImgType = false">
        </div>
        <div class="filter_list1">
          <div :class="filterIndex ? 'filter_img' : 'filter_exc'" @click="filterIndex = 1">
            <img :src="filterIndex ? '../img/qw/img_type.png' : '../img/qw/img_type1.png'" alt="">
            <div>选择图片</div>
          </div>
          <div :class="filterIndex ? 'filter_exc' : 'filter_img'" @click="filterIndex = 0">
            <img :src="filterIndex ? '../img/qw/imgList_type1.png' : '../img/qw/imgList_type.png'" alt="">
            <div>图集链接</div>
          </div>
        </div>
        <div class="tag_footers">
          <div class="tag_re_btn" @click="showImgType = false">取消</div>
          <div class="tag_ok_btn" @click="handleImgType">确定</div>
        </div>
      </van-popup>
      <!-- 选择图集图片 -->
      <van-popup v-model="showImgList" 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="handleCancel">
        </div>
        <div class="imgList_list">
          <div v-for="(item, index) in imgList" :key="item.id" @click="handleSelect(item)">
            <img class="imgList_item" :src="item.url" alt="">
            <img class="imgList_select" :src="item.selected ? '../img/qw/select_img.png' : '../img/qw/noselect_img.png'" alt="">
          </div>
        </div>
        <div class="tag_footers">
          <div class="tag_re_btn" @click="handleCancel">取消</div>
          <div class="tag_ok_btn" @click="handleImgList">保存</div>
        </div>
      </van-popup>
      <div class="page_top">
        <div class="client_top_box">
          <van-search class="search_input" placeholder="搜索素材名称" v-model="keyword" :clearable="false" left-icon=""
            @search="handleSearch">
            <!-- 自定义右侧图标 -->
            <template v-slot:right-icon>
              <img class="search_icon" src="../img/qw/search_icon.png" @click="handleSearch" />
            </template>
          </van-search>
        </div>
        <div class="type_list">
          <div class="type_item" v-for="item in typeList" :key="item.contentType" @click="handleTypeClick(item.contentType)">
            <img :src="item.contentType === contentType ? item.icon : item.icon1" alt="">
            <div :class="{'type_active': item.contentType === contentType}" class="type_title">{{item.title}}</div>
          </div>
        </div>
      </div>
      <div class="page_content">
        <div class="page_box">
          <div class="path_list">
            <div class="path_span">
              <span @click="getTreeData">全部</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" :style="{height: selectedMaters.length > 0 ? 'calc(100vh - 356px)' : 'calc(100vh - 213px)'}">
            <div class="data_item" v-for="item in treeData" :key="item.id" @click="handleFolderClick(item)">
              <img src="../img/qw/folder.png" alt="" />
              <div class="data_title">{{item.text}}</div>
            </div>
            <van-checkbox-group v-model="checkedMaterIds" @change="onChangeChecked">
              <div class="data_item fold_data_item" v-for="item in itemList" :key="item.id">
                <div class="fold_item">
                  <img v-if="contentType === 0" src="../img/qw/article.png" alt="" />
                  <img v-else-if="contentType === 2" src="../img/qw/form.png" alt="" />
                  <img v-else-if="contentType === 3" src="../img/qw/file.png" alt="" />
                  <img v-else-if="contentType === 15" src="../img/qw/video.png" alt="" />
                  <img v-else-if="contentType === 17" src="../img/qw/imgList.png" alt="" />
                  <img v-else-if="contentType === 4" src="../img/qw/link.png" alt="" />
                  <div class="data_title">{{item.title || item.name}}</div>
                </div>
                <van-checkbox :name="item.id" @click="handleCheckboxClick(item)">
                  <template #icon="props">
                    <div :class="props.checked ? 'check_div_active' : 'check_div'"></div>
                  </template>
                </van-checkbox>
              </div>
            </van-checkbox-group>
          </div>
        </div>
      </div>
      <div class="page_foot">
        <div class="filter_list"><span class="filter_span">全部：</span>
          <div class="filter_span" v-html="formatcontentTypes()"></div>
        </div>
        <div class="foot_btn">
          <div class="btn_reset" @click="handleReset">重置</div>
          <div class="btn_confirm" @click="handleConfirm">确定</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,
        keyword: '',
        contentType: 0, // 当前选中的类型
        typeList: [
          {
            contentType: 0,
            icon: '../img/qw/article.png',
            icon1: '../img/qw/article1.png',
            title: '文章'
          },
          {
            contentType: 2,
            icon: '../img/qw/form.png',
            icon1: '../img/qw/form1.png',
            title: '表单'
          },
          {
            contentType: 3,
            icon: '../img/qw/file.png',
            icon1: '../img/qw/file1.png',
            title: '文件'
          },
          {
            contentType: 15,
            icon: '../img/qw/video.png',
            icon1: '../img/qw/video1.png',
            title: '视频'
          },
          {
            contentType: 17,
            icon: '../img/qw/imgList.png',
            icon1: '../img/qw/imgList1.png',
            title: '图集'
          },
          {
            contentType: 4,
            icon: '../img/qw/link.png',
            icon1: '../img/qw/link1.png',
            title: '外部链接'
          },
        ],
        materTypeList: [
          {
            contentType: 0,
            title: '文章'
          },
          {
            contentType: 2,
            title: '表单'
          },
          {
            contentType: 3,
            title: '文件'
          },
          {
            contentType: 15,
            title: '视频'
          },
          {
            contentType: 17,
            title: '图集'
          },
          {
            contentType: 4,
            title: '外部链接'
          },
          {
            contentType: 19,
            title: '图集项图片'
          },
        ],
        treeData: [], // 总树数据
        allTreeData: [], // 总树扁平化数据
        loading: false,
        itemList: [], // 当前树下的数据
        checkedMaterIds: [],
        selectedMaters: [], // 当前选中的所有素材数据
        pathList: [], // 当前路径
        contentTypeCount: {}, // 当前选中的类型数量
        filterIndex: 1,
        showImgType: false,
        showImgList: false,
        imgList: [], // 图集图片列表
        showVideoType: 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.selectedMaters = localStorage.getItem('selectedMaters') ? JSON.parse(localStorage.getItem('selectedMaters')) : []
      this.contentTypeCount = this.countByType(this.selectedMaters)
      if (this.getQueryParam('memberId')) {
        // 已授权
        this.memberId = this.getQueryParam('memberId')
        this.getCpH5Login()
      }
    },
    methods: {
      getCpH5Login() {
        fetch(this.httpUrl + '/scrm/v1/wxcp-workbench/p/cpH5Login', {
          method: 'post',
          body: JSON.stringify({
            bid: this.bId,
            memberId: this.memberId,
          }),
          headers: {
            'Content-Type': 'application/json'
          }
        }).then(res => {
          return res.json()
        }).then(result => {
          let { data, code, msg } = result
          if (code === 1) {
            this.tenancyId = data.tenancyId
            this.getTreeData()
          } else {
            vant.Toast.fail(msg)
          }
        })
      },
      // 获取树数据
      getTreeData() {
        this.treeData = []
        this.allTreeData = []
        this.itemList = []
        this.pathList = []
        let url = ''
        if (this.contentType === 0) {
          url = '/scrm/v1/wxcp-chat-tool/p/ctArticleGroupTree'
        } else if (this.contentType === 2) {
          url = '/scrm/v1/wxcp-chat-tool/p/ctFormGroupTree'
        } else if (this.contentType === 3) {
          url = '/scrm/v1/wxcp-chat-tool/p/ctFileGroupTree'
        } else if (this.contentType === 15) {
          url = '/scrm/v1/wxcp-chat-tool/p/ctVideoGroupTree'
        } else if (this.contentType === 17) {
          url = '/scrm/v1/wxcp-chat-tool/p/ctImgGroupTree'
        } else if (this.contentType === 4) {
          url = '/scrm/v1/wxcp-chat-tool/p/ctUrlGroupTree'
        }
        this.loading = true
        fetch(this.httpUrl + url, {
          method: 'post',
          body: JSON.stringify({
            keyword: '',
          }),
          headers: {
            'Content-Type': 'application/json',
            'tenancyId': this.tenancyId,
          }
        }).then(res => {
          return res.json()
        }).then(result => {
          let { data, code, msg } = result
          if (code === 1) {
            this.treeData = data || []
            this.allTreeData = this.flattenTreeData(data, true)
          } else {
            vant.Toast.fail(msg)
          }
        }).finally(() => {
          this.loading = false
        })
      },
      handlePathClick (item) {
        // 找到目标元素的索引
        const index = this.pathList.findIndex(arr => arr.id === item.id)
        // 如果找到了该元素
        if (index !== -1) {
          // 从该索引位置开始删除到数组末尾
          this.pathList.splice(index)
          this.handleFolderClick(item)
        }
      },
      // 点击文件夹，获取子文件夹数据
      handleFolderClick(item) {
        this.pathList.push(item)
        this.getMaterData(item)
      },
      getMaterData (item) {
        this.treeData = []
        this.itemList = []
        let url = ''
        if (this.contentType === 0) {
          url = '/scrm/v1/wxcp-chat-tool/p/pageArticle'
        } else if (this.contentType === 2) {
          url = '/scrm/v1/wxcp-chat-tool/p/pageForm'
        } else if (this.contentType === 3) {
          url = '/scrm/v1/wxcp-chat-tool/p/pageFile'
        } else if (this.contentType === 15) {
          url = '/scrm/v1/wxcp-chat-tool/p/pageVideo'
        } else if (this.contentType === 17) {
          url = '/scrm/v1/wxcp-chat-tool/p/pageImg'
        } else if (this.contentType === 4) {
          url = '/scrm/v1/wxcp-chat-tool/p/pageUrl'
        }
        fetch(this.httpUrl + url, {
          method: 'post',
          body: JSON.stringify({
            groupId: item ? item.id : null,
            keyword: this.keyword,
            page: 1,
            pageCount: 1000,
          }),
          headers: {
            'Content-Type': 'application/json',
            'tenancyId': this.tenancyId,
          }
        }).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.checkedMaterIds = this.extractSameIds(this.itemList, this.selectedMaters)
            }
            if (this.keyword === '' && this.allTreeData.filter(all => all.id === item.id)[0] && this.allTreeData.filter(all => all.id === item.id)[0].children) {
              this.treeData = this.allTreeData.filter(all => all.id === item.id)[0].children
            } else {
              this.treeData = []
            }
          } else {
            vant.Toast.fail(msg)
          }
        })
      },
      handleSearch() {
        if (this.keyword === '') {
          this.getTreeData()
        } else {
          this.getMaterData()
        }
      },
      extractSameIds(itemList, selectedMaters) {
        const arr2Ids = new Set(selectedMaters.map(item => item.id))
        return itemList.filter(item => arr2Ids.has(item.id))
          .map(item => item.id)
      },
      // 点击类型，获取树数据
      handleTypeClick(type) {
        this.keyword = ''      // 点击谁，就把谁的图标变成item.icon，其余的变成icon1
        this.contentType = type
        this.getTreeData()
      },
      onChangeChecked(value) {
        // 更新当前页面的勾选状态
        // this.checkedMaterIds = value
        
        // 当前页面选中的，并标记类型
        const currentSelected = this.itemList
          .filter(item => this.checkedMaterIds.includes(item.id))
          .map(item => ({
            ...item,
            contentType: this.contentType // 标记素材类型
          }))
        
        // 先删除当前页面未选中的数据
        const currentPageIds = new Set(this.itemList.map(item => item.id))
        this.selectedMaters = this.selectedMaters.filter(item => {
          // 如果是当前页面的数据，但未选中，则删除
          if (currentPageIds.has(item.id)) {
            return this.checkedMaterIds.includes(item.id)
          }
          // 如果不是当前页面的数据，保留
          return true
        })
        
        // 合并当前选中的和之前选中的，基于 id 去重（当前选中的优先，使用最新的类型）
        const existingIdsMap = new Map()
        this.selectedMaters.forEach(item => {
          existingIdsMap.set(item.id, item)
        })

        // 更新或添加当前选中的数据（优先使用当前页面的数据和类型）
        currentSelected.forEach(item => {
          existingIdsMap.set(item.id, item)
        })
        
        this.selectedMaters = Array.from(existingIdsMap.values())
        
        console.log('当前选中的所有素材数据: ', this.selectedMaters)
        this.contentTypeCount = this.countByType(this.selectedMaters)
      },
      // 统计数组中每个类型的数量
      countByType(arr) {
        return arr.reduce((countMap, item) => {
          const type = item.contentType;
          countMap[type] = (countMap[type] || 0) + 1;
          return countMap;
        }, {});
      },
      // 格式化选中类型的显示文本，格式：文章 x1、文件 x2（数字部分为蓝色）
      formatcontentTypes() {
        const typeCountArr = []
        // 遍历 typeList 的顺序，确保显示顺序一致
        this.materTypeList.forEach(typeItem => {
          const count = this.contentTypeCount[typeItem.contentType] || 0
          if (count > 0) {
            // 将数字部分用span包裹，添加蓝色样式类
            typeCountArr.push(`${typeItem.title} <span class="filter_count_blue">x${count}</span>`)
          }
        })
        return typeCountArr.length > 0 ? typeCountArr.join('、') : ''
      },
      // 递归扁平化树数据
      flattenTreeData(data, keepChildren = true) {
        const result = []
        function traverse(nodes) {
          if (!Array.isArray(nodes)) return
          nodes.forEach(node => {
            const flatNode = { ...node }
            // 如果不保留children，删除该属性
            if (!keepChildren) {
              delete flatNode.children
            }
            result.push(flatNode)
            // 递归遍历子节点
            if (node.children && node.children.length > 0) {
              traverse(node.children)
            }
          })
        }
        traverse(data)
        return result
      },
      handleConfirm() {
        if (this.selectedMaters.length === 0) {
          vant.Toast.fail('请选择素材')
          return
        }
        localStorage.setItem('selectedMaters', JSON.stringify(this.selectedMaters))
        if (this.selectedMaters.length > 9) {
          vant.Toast.fail('最多选择9个素材')
          return
        }
        window.history.back()
      },
      handleCheckboxClick (item) {
        // if (this.contentType === 16) {
        //   if (this.selectedMaters.some(s => s.id === item.id)) {
        //     this.showVideoType = true
        //   }
        // } else 
        if (this.contentType === 17) {
          if (this.selectedMaters.some(s => s.id === item.id)) {
            this.showImgType = true
          }
        }
      },
      handleVideoType () {
        // this.showVideoType = false
        // let obj = this.selectedMaters[this.selectedMaters.length - 1]
        // this.selectedMaters.push({
        //   contentType: this.filterIndex === 1 ? 15 : 16,
        //   ...obj,
        // })
        // this.contentTypeCount = this.countByType(this.selectedMaters)
      },
      handleImgType () {
        if (this.filterIndex === 0) {
          this.showImgType = false
        } else {
          this.showImgType = false
          this.imgList = this.selectedMaters[this.selectedMaters.length-1].imgList
          this.selectedMaters.pop() // 删除最后一条数据（点击自动添加进去的图集项链接）
          this.checkedMaterIds.pop()
          this.selectedMaters.forEach(s => {
            this.imgList.forEach(item => {
              if (s.id === item.id) {
                this.$set(item, 'selected', true)
              } else {
                this.$set(item, 'selected', false)
              }
            })
          })
          this.showImgList = true
        }
      },
      handleSelect(data) {
        this.imgList.forEach(item => {
          if (item.id === data.id) {
            this.$set(item, 'selected', !item.selected)
          }
        })
      },
      handleCancel () {
        this.showImgList = false
      },
      handleImgList () {
        this.imgList.forEach(item => {
          if (item.selected) {
            this.selectedMaters.push({
              contentType: 19,
              ...item,
            })
          }
        })
        this.showImgList = false
        this.contentTypeCount = this.countByType(this.selectedMaters)
      },
      handleReset() {
        this.selectedMaters = []
        this.checkedMaterIds = []
        this.contentTypeCount = {}
        localStorage.removeItem('selectedMaters')
      },
      // 截取url中的数据
      getQueryParam(paramName) {
        // 获取当前URL的查询字符串部分  
        const queryString = window.location.search;
        // 创建一个URLSearchParams对象  
        const urlParams = new URLSearchParams(queryString);
        // 返回指定参数的值，如果不存在则返回null  
        return urlParams.get(paramName);
      },
    }
  })   
</script>

</html>