|
|
@@ -0,0 +1,917 @@
|
|
|
+<!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">
|
|
|
+ <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/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: 0;
|
|
|
+ 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;
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ .fold_data_item {
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ .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="handleCancel">
|
|
|
+ </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/imgList_type1.png' : './img/qw/imgList_type.png'" alt="">
|
|
|
+ <div>视频链接</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="tag_footers">
|
|
|
+ <div class="tag_re_btn" @click="handleCancel">取消</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="handleCancel">
|
|
|
+ </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="handleCancel">取消</div>
|
|
|
+ <div class="tag_ok_btn" @click="handleImgType">{{filterIndex ? '确定' : '发送'}}</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: materialData ? 'calc(100vh - 284px)' : '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-radio-group v-model="materialData" @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-radio :name="item.id" @click="handleCheckboxClick(item)">
|
|
|
+ <template #icon="props">
|
|
|
+ <div :class="props.checked ? 'check_div_active' : 'check_div'"></div>
|
|
|
+ </template>
|
|
|
+ </van-radio>
|
|
|
+ </div>
|
|
|
+ </van-radio-group>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="page_foot">
|
|
|
+ <div class="foot_btn">
|
|
|
+ <div class="btn_reset" @click="handleReset">取消</div>
|
|
|
+ <div class="btn_confirm" @click="handleConfirm">发送</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </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: '外部链接'
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ treeData: [], // 总树数据
|
|
|
+ allTreeData: [], // 总树扁平化数据
|
|
|
+ loading: false,
|
|
|
+ itemList: [], // 当前树下的数据
|
|
|
+ pathList: [], // 当前路径
|
|
|
+ filterIndex: 1,
|
|
|
+ showImgType: false,
|
|
|
+ showImgList: false,
|
|
|
+ imgList: [], // 图集图片列表
|
|
|
+ showVideoType: false,
|
|
|
+ materialData: null
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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'
|
|
|
+ }
|
|
|
+ if (this.getQueryParam('memberId')) {
|
|
|
+ // 已授权
|
|
|
+ this.memberId = this.getQueryParam('memberId')
|
|
|
+ this.getCpH5Login()
|
|
|
+ } else {
|
|
|
+ // 授权
|
|
|
+ this.getAuth()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getAuth() {
|
|
|
+ fetch(this.httpUrl + `/p/insuite/p/getRedirectUri?env=${this.env}&bId=${this.bId}`)
|
|
|
+ .then(res => {
|
|
|
+ return res.json()
|
|
|
+ }).then(result => {
|
|
|
+ let { data, code, msg } = result
|
|
|
+ if (code === 1) {
|
|
|
+ window.location.replace(data)
|
|
|
+ } else {
|
|
|
+ this.$message({
|
|
|
+ message: msg,
|
|
|
+ type: 'warning'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ 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()
|
|
|
+ this.getQyWxSign()
|
|
|
+ } else {
|
|
|
+ vant.Toast.fail(msg)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getQyWxSign() {
|
|
|
+ fetch(this.httpUrl + '/scrm/v1/wxcp-corp/p/getJsSDK', {
|
|
|
+ method: 'post',
|
|
|
+ body: JSON.stringify({
|
|
|
+ url: window.location.href,
|
|
|
+ }),
|
|
|
+ headers: {
|
|
|
+ 'Content-Type': 'application/json',
|
|
|
+ 'tenancyId': this.tenancyId,
|
|
|
+ }
|
|
|
+ }).then(res => {
|
|
|
+ return res.json()
|
|
|
+ }).then(result => {
|
|
|
+ let { data, code, msg } = result
|
|
|
+ if (code === 1) {
|
|
|
+ wx.agentConfig({
|
|
|
+ corpid: data.corpid,
|
|
|
+ agentid: data.agentId,
|
|
|
+ timestamp: data.timestamp, // 必填，生成签名的时间戳
|
|
|
+ nonceStr: data.nonceStr, // 必填，生成签名的随机串
|
|
|
+ signature: data.agentSignature, // 必填，签名，见附录1
|
|
|
+ jsApiList: ['sendChatMessage'], // 必填，需要使用的JS接口列表
|
|
|
+ success: function (res) {
|
|
|
+ console.log('agentConfig成功', res)
|
|
|
+ },
|
|
|
+ fail: function (res) {
|
|
|
+ if (res.errMsg.indexOf('function not exist') > -1) {
|
|
|
+ alert('版本过低请升级');
|
|
|
+ }
|
|
|
+ },
|
|
|
+ complete: function (res) {
|
|
|
+ // 回调
|
|
|
+ console.log('complete', res);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } 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.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()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 点击类型，获取树数据
|
|
|
+ handleTypeClick(type) {
|
|
|
+ this.keyword = '' // 点击谁，就把谁的图标变成item.icon，其余的变成icon1
|
|
|
+ this.contentType = type
|
|
|
+ this.getTreeData()
|
|
|
+ },
|
|
|
+ onChangeChecked(value) {
|
|
|
+ this.materialData = value
|
|
|
+ },
|
|
|
+ // 递归扁平化树数据
|
|
|
+ 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
|
|
|
+ },
|
|
|
+ handleCheckboxClick (item) {
|
|
|
+ if (this.contentType === 15) {
|
|
|
+ this.showVideoType = true
|
|
|
+ } else if (this.contentType === 17) {
|
|
|
+ this.showImgType = true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleVideoType () {
|
|
|
+ let obj = this.itemList.filter(item => item.id === this.materialData)[0]
|
|
|
+ if (this.filterIndex === 0) {
|
|
|
+ // 发送视频链接
|
|
|
+ this.sendNews(obj)
|
|
|
+ } else {
|
|
|
+ this.handleMedia(obj.id, 15)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 勾选图集项图片
|
|
|
+ handleSelect(data) {
|
|
|
+ this.imgList.forEach(item => {
|
|
|
+ if (item.id === data.id) {
|
|
|
+ this.$set(item, 'selected', true)
|
|
|
+ } else {
|
|
|
+ this.$set(item, 'selected', false)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleCancel () {
|
|
|
+ this.materialData = ''
|
|
|
+ this.showImgType = false
|
|
|
+ this.showVideoType = false
|
|
|
+ this.showImgList = false
|
|
|
+ },
|
|
|
+ // 点击图集类型
|
|
|
+ handleImgType() {
|
|
|
+ let obj = this.itemList.filter(item => item.id === this.materialData)[0]
|
|
|
+ if (this.filterIndex === 0) {
|
|
|
+ this.sendNews(obj)
|
|
|
+ } else {
|
|
|
+ this.showImgType = false
|
|
|
+ this.imgList = obj.imgList
|
|
|
+ this.showImgList = true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 发送图集图片
|
|
|
+ handleImgList () {
|
|
|
+ this.imgList.forEach(item => {
|
|
|
+ if (item.selected) {
|
|
|
+ this.handleMedia(item.id, 19)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ sendNews (obj) {
|
|
|
+ //
|
|
|
+ wx.invoke('sendChatMessage', {
|
|
|
+ msgtype: "news", //消息类型，必填
|
|
|
+ enterChat: true, //为true时表示发送完成之后顺便进入会话，仅移动端3.1.10及以上版本支持该字段
|
|
|
+ news: {
|
|
|
+ link: obj.sendUrl, //H5消息页面url 必填
|
|
|
+ title: obj.title || obj.name || '', //H5消息标题.
|
|
|
+ desc: obj.abs || '', //H5消息摘要
|
|
|
+ imgUrl: obj.cover, //H5消息封面图片URL
|
|
|
+ },
|
|
|
+ }, function (res) {
|
|
|
+ if (res.err_msg == 'sendChatMessage:ok') {
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleMedia(id, contentType) {
|
|
|
+ const headers = new Headers()
|
|
|
+ headers.append('tenancyId', this.tenancyId)
|
|
|
+ fetch(this.httpUrl + `/scrm/v1/wxcp-chat-tool/p/findMediaId?contentId=${id}&contentType=${contentType}`, {
|
|
|
+ method: 'GET',
|
|
|
+ headers: headers
|
|
|
+ }).then(res => {
|
|
|
+ return res.json()
|
|
|
+ }).then(result => {
|
|
|
+ let { data, code, msg } = result
|
|
|
+ if (code === 1) {
|
|
|
+ // 发送图集图片
|
|
|
+ if (contentType === 19) {
|
|
|
+ wx.invoke('sendChatMessage', {
|
|
|
+ msgtype: "image", //消息类型，必填
|
|
|
+ enterChat: true,
|
|
|
+ image:
|
|
|
+ {
|
|
|
+ mediaid: data, //图片的素材id
|
|
|
+ },
|
|
|
+ }, function (res) {
|
|
|
+ if (res.err_msg == 'sendChatMessage:ok') {
|
|
|
+ //发送成功
|
|
|
+ }
|
|
|
+ })
|
|
|
+ // 文件
|
|
|
+ } else if (contentType === 3) {
|
|
|
+ wx.invoke('sendChatMessage', {
|
|
|
+ msgtype: "file", //消息类型，必填
|
|
|
+ enterChat: true,
|
|
|
+ file:
|
|
|
+ {
|
|
|
+ mediaid: data, //文件的素材id
|
|
|
+ },
|
|
|
+ }, function (res) {
|
|
|
+ if (res.err_msg == 'sendChatMessage:ok') {
|
|
|
+ //发送成功
|
|
|
+ }
|
|
|
+ })
|
|
|
+ // 原生视频
|
|
|
+ } else if (contentType === 15) {
|
|
|
+ wx.invoke('sendChatMessage', {
|
|
|
+ msgtype: "video", //消息类型，必填
|
|
|
+ enterChat: true,
|
|
|
+ file:
|
|
|
+ {
|
|
|
+ mediaid: data,
|
|
|
+ },
|
|
|
+ }, function (res) {
|
|
|
+ if (res.err_msg == 'sendChatMessage:ok') {
|
|
|
+ //发送成功
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ vant.Toast.fail(msg)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleReset() {
|
|
|
+ window.close()
|
|
|
+ },
|
|
|
+ handleConfirm() {
|
|
|
+ let obj = {}
|
|
|
+ obj = this.itemList.filter(item => item.id === this.materialData)[0]
|
|
|
+ // 文章，表单，外部链接
|
|
|
+ if (this.contentType === 0 || this.contentType === 2 || this.contentType === 4) {
|
|
|
+ this.sendNews(obj)
|
|
|
+ // 文件
|
|
|
+ } else if (this.contentType === 3) {
|
|
|
+ this.handleMedia(obj.id, 3)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 截取url中的数据
|
|
|
+ getQueryParam(paramName) {
|
|
|
+ // 获取当前URL的查询字符串部分
|
|
|
+ const queryString = window.location.search;
|
|
|
+ // 创建一个URLSearchParams对象
|
|
|
+ const urlParams = new URLSearchParams(queryString);
|
|
|
+ // 返回指定参数的值，如果不存在则返回null
|
|
|
+ return urlParams.get(paramName);
|
|
|
+ },
|
|
|
+ }
|
|
|
+ })
|
|
|
+</script>
|
|
|
+
|
|
|
+</html>
|
