| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512 |
- <!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">
- <!-- 必须先引入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/vconsole.min.js"></script>
- <script>
- var vConsole = new window.VConsole();
- </script> -->
- </head>
- <style>
- body {
- margin: 0;
- padding: 0;
- }
- .box {
- width: 100vw;
- height: 100vh;
- height: calc(100vh - constant(safe-area-inset-top));
- height: calc(100vh - env(safe-area-inset-top));
- box-sizing: border-box;
- background: #F7F9FC;
- }
- .page5 {
- width: 100vw;
- height: 100vh;
- height: calc(100vh - constant(safe-area-inset-top));
- height: calc(100vh - env(safe-area-inset-top));
- box-sizing: border-box;
- }
- .tabbar {
- width: 100%;
- height: 46px;
- background: #FFFFFF;
- box-shadow: 0px -10px 20px 1px rgba(62,89,132,0.03);
- border-radius: 20px 20px 0px 0px;
- position: fixed;
- bottom: 0;
- left: 0;
- z-index: 2;
- font-size: 10px;
- color: #858F9B;
- margin-bottom: constant(safe-area-inset-bottom);
- margin-bottom: env(safe-area-inset-bottom);
- }
- .tabbar_box {
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 0 60px;
- }
- .tabbar_item {
- display: flex;
- flex-direction: column;
- align-items: center;
- }
- .tabbar_text {
- font-size: 10px;
- color: #7D97BF;
- line-height: 15px;
- }
- .tabbar_text_active {
- font-size: 10px;
- line-height: 15px;
- color: #136DFB;
- }
- .tabbar_img {
- width: 32px;
- height: 32px;
- }
- .home_bg {
- width: 100%;
- height: 240px;
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1;
- }
- .home_bg img{
- width: 100%;
- height: 100%;
- }
- .home_box {
- position: absolute;
- top: 94px;
- left: 0;
- z-index: 2;
- width: 100%;
- height: auto;
- /* padding-bottom: 46px; */
- }
- .task_content {
- padding: 0 15px 46px;
- }
- .wel_tip {
- font-weight: bold;
- font-size: 16px;
- color: #222222;
- line-height: 27px;
- padding-left: 15px;
- padding-bottom: 30px;
- }
- .task_box {
- padding: 15px 9px;
- background: linear-gradient( 180deg, rgba(255,255,255,0.8) 0%, #FFFFFF 100%);
- border-radius: 15px;
- border: 1px solid #FFFFFF;
- box-sizing: border-box;
- margin-bottom: 15px;
- }
- .task_top {
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding-bottom: 15px;
- }
- .task_top_left {
- display: flex;
- align-items: center;
- font-weight: 500;
- font-size: 14px;
- color: #222222;
- line-height: 20px;
- }
- .task_top_left img{
- width: 20px;
- height: 20px;
- margin-right: 5px;
- }
- .task_top_right {
- display: flex;
- align-items: center;
- font-size: 12px;
- color: #136DFB;
- line-height: 17px;
- }
- .task_top_right img{
- width: 16px;
- height: 16px;
- }
- .notask_tip {
- font-size: 12px;
- color: #CCCCCC;
- line-height: 17px;
- padding-top: 55px;
- text-align: center;
- }
- .task_list {
- gap: 10px;
- display: flex;
- flex-direction: column;
- }
- .task_item {
- background: #F5F8FC;
- border-radius: 10px;
- display: flex;
- padding: 10px 20px 15px 10px;
- display: flex;
- align-items: center;
- }
- .task_item_left {
- display: flex;
- flex-direction: column;
- }
- .task_item_left_top {
- display: flex;
- align-items: center;
- font-size: 12px;
- color: #666666;
- }
- .task_item_left_top img{
- width: 18px;
- height: 18px;
- margin-right: 5px;
- border-radius: 50%;
- }
- .task_item_left_bottom {
- font-size: 12px;
- color: #222222;
- line-height: 17px;
- padding-top: 10px;
- width: 240px;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- }
- .task_item_CLIENT_LOG {
- height: 17px;
- }
- .task_item_CLIENT_LOG div{
- font-size: 12px;
- color: #222222;
- line-height: 17px;
- padding-top: 10px;
- width: 240px; /* 必须设置宽度 */
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- }
- .task_item_line {
- width: 1px;
- height: 40px;
- margin: 0 15px;
- background: linear-gradient( 180deg, rgba(217,219,227,0) 0%, #D9DBE3 49%, rgba(217,219,227,0) 100%);
- }
- .task_item_right {
- font-size: 12px;
- color: #136DFB;
- line-height: 17px;
- white-space: nowrap;
- }
- .client_box_title {
- display: flex;
- align-items: center;
- font-weight: 500;
- font-size: 14px;
- color: #222222;
- line-height: 20px;
- margin-bottom: 10px;
- }
- .time_box {
- display: flex;
- align-items: center;
- font-size: 12px;
- color: #FFFFFF;
- background: #136DFB;
- border-radius: 5px;
- padding: 2px 4px 2px;
- margin-left: 10px;
- height: 20px;
- box-sizing: border-box;
- }
- .time_box img {
- width: 16px;
- height: 16px;
- }
- .time_box span {
- padding-left: 2px;
- }
- .client_box {
- display: flex;
- align-items: center;
- gap: 10px;
- }
- .client_data_item {
- width: 168px;
- height: 86px;
- padding: 15px 10px;
- box-sizing: border-box;
- }
- .client_all {
- background-image: url('./img/qw/client_all.png');
- background-size: 100% 100%;
- }
- .client_add {
- background-image: url('./img/qw/client_add.png');
- background-size: 100% 100%;
- }
- .client_title {
- font-size: 12px;
- color: #666666;
- line-height: 17px;
- }
- .client_num {
- font-weight: bold;
- font-size: 20px;
- line-height: 29px;
- padding-top: 10px;
- }
- .client_all_color {
- color: #136DFB;
- }
- .client_add_color {
- color: #FFA041;
- }
- .date_box {
- width: 162px;
- padding: 10px;
- background: #FFFFFF;
- box-shadow: 0px 3px 6px 1px rgba(62,89,132,0.05);
- border-radius: 8px;
- display: flex;
- flex-wrap: wrap;
- gap: 10px;
- box-sizing: border-box;
- }
- .date_item {
- width: 66px;
- font-size: 12px;
- color: #222222;
- line-height: 17px;
- padding: 8px 0;
- background: #F7F9FC;
- border-radius: 8px;
- text-align: center;
- }
- .date_active {
- width: 66px;
- font-size: 12px;
- color: #FFFFFF;
- line-height: 17px;
- padding: 8px 0;
- background: #136DFB;
- border-radius: 8px;
- text-align: center;
- }
- .client_top {
- width: 100%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1;
- background: #FFFFFF;
- }
- .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;
- }
- .van-tabs--line .van-tabs__wrap {
- height: 40px;
- }
- .van-tab--active {
- color: #136DFB !important;
- }
- .van-tab {
- color: #999999;
- }
- .client_top_line {
- width: 100%;
- height: 1px;
- background: #F1F1F1;
- }
- .tag_box {
- display: flex;
- align-items: center;
- gap: 10px;
- padding-top: 10px;
- padding-left: 15px;
- }
- .tag_box_item {
- font-size: 14px;
- color: #999999;
- line-height: 20px;
- padding: 4px 16px;
- border-radius: 10px;
- background: #FAFAFA;
- }
- .tag_box_active {
- font-size: 14px;
- color: #1677FF;
- line-height: 20px;
- padding: 4px 16px;
- border-radius: 10px;
- background: rgba(22, 119, 255, 0.1);
- }
- .client_content {
- position: absolute;
- left: 0;
- z-index: 1;
- width: 100%;
- }
- .client_content_box {
- padding: 10px 15px 15px;
- height: calc(100vh - 144px);
- box-sizing: border-box;
- }
- .client_date {
- display: flex;
- align-items: center;
- gap: 8px;
- padding-left: 2px;
- margin-bottom: 10px;
- }
- .client_date_item {
- font-size: 12px;
- color: #999999;
- line-height: 17px;
- padding: 3px 9px;
- background: #F7F9FC;
- border: 1px solid #F7F9FC;
- }
- .client_date_active {
- font-size: 12px;
- color: #1677FF;
- line-height: 17px;
- padding: 3px 9px;
- border-radius: 10px;
- background: rgba(22,119,255,0.05);
- border: 1px solid #136DFB;
- }
- .client_list {
- display: flex;
- flex-direction: column;
- gap: 10px;
- height: calc(100vh - 189px);
- overflow: auto;
- padding-bottom: 100px;
- box-sizing: border-box;
- }
- .noclient_list {
- display: flex;
- align-items: center;
- justify-content: center;
- height: calc(100vh - 189px);
- overflow: auto;
- padding-bottom: 46px;
- box-sizing: border-box;
- font-size: 14px;
- color: #CCCCCC;
- line-height: 20px;
- flex-direction: column;
- }
- .noclient_list img {
- width: 102px;
- height: 90px;
- margin-bottom: 20px;
- }
- .client_item {
- background: #FFFFFF;
- border-radius: 15px;
- border: 1px solid #FFFFFF;
- padding: 10px 15px;
- box-sizing: border-box;
- height: 68px;
- display: flex;
- align-items: center;
- margin-bottom: 10px;
- }
- .van-radio__icon {
- width: 16px;
- height: 16px;
- }
- .van-radio__label {
- font-size: 14px;
- line-height: 20px;
- color: #222222;
- }
- .van-radio--horizontal {
- margin-right: 20px;
- }
- .van-radio-group {
- margin-top: 15px;
- margin-left: 15px;
- }
- .check_div {
- width: 16px;
- height: 16px;
- border-radius: 50%;
- border: 1px solid #CCCCCC;
- box-sizing: border-box;
- margin-right: 15px;
- }
- .check_div_active {
- width: 16px;
- height: 16px;
- border-radius: 50%;
- border: 1px solid #136DFB;
- box-sizing: border-box;
- margin-right: 15px;
- }
- .check_div_active:after{
- content: "";
- display: block;
- width: 10px;
- height: 10px;
- border-radius: 50%;
- background: #136DFB;
- position: relative;
- top: 2px;
- left: 2px;
- }
- .client_info {
- display: flex;
- align-items: center;
- flex: 1;
- min-width: 0;
- overflow: hidden;
- }
- .client_info img{
- width: 48px;
- height: 48px;
- border-radius: 8px;
- margin-right: 10px;
- flex-shrink: 0;
- }
- .client_info_text {
- font-weight: 500;
- font-size: 14px;
- color: #222222;
- display: flex;
- flex-direction: column;
- gap: 8px;
- flex: 1;
- min-width: 0;
- overflow: hidden;
- }
- .client_tag {
- display: flex;
- align-items: center;
- gap: 8px;
- overflow: hidden;
- flex-wrap: wrap;
- width: 100%;
- max-height: 21px;
- }
- .client_tag span {
- height: 21px;
- font-size: 12px;
- color: #999999;
- line-height: 17px;
- border-radius: 5px;
- padding: 2px 8px;
- background: #FAFAFA;
- border: 1px solid #F1F1F1;
- box-sizing: border-box;
- }
- .van-checkbox__icon .van-icon {
- width: 16px;
- height: 16px;
- line-height: 16px;
- border: 1px solid #CCCCCC;
- }
- .group_item {
- background: #FFFFFF;
- border-radius: 15px;
- border: 1px solid #FFFFFF;
- padding: 15px;
- box-sizing: border-box;
- height: 102px;
- }
- .group_info {
- display: flex;
- flex-direction: column;
- }
- .group_name {
- font-weight: 500;
- font-size: 14px;
- color: #222222;
- line-height: 20px;
- }
- .group_data {
- font-weight: 500;
- font-size: 12px;
- color: #999999;
- line-height: 17px;
- display: flex;
- align-items: center;
- padding: 10px 0 8px;
- }
- .create_time {
- font-size: 12px;
- color: #999999;
- line-height: 17px;
- }
- .send_foot {
- position: absolute;
- bottom: 61px;
- left: 0;
- width: 100%;
- }
- .send_btn {
- font-weight: 500;
- font-size: 14px;
- color: #FFFFFF;
- line-height: 20px;
- padding: 15px 0;
- border-radius: 20px;
- background: #1677FF;
- margin: 0 35px;
- text-align: center;
- }
- .marketing_bg {
- width: 100%;
- height: 200px;
- position: absolute;
- top: 0;
- left: 0;
- z-index: 0;
- }
- .marketing_bg img{
- width: 100%;
- height: 100%;
- }
- .marketing_box {
- position: absolute;
- top: 138px;
- left: 0;
- z-index: 1;
- width: 100%;
- /* height: calc(100vh - 138px); */
- background: linear-gradient( 180deg, rgba(247,249,252,0.8) 0%, #F7F9FC 100%);
- border-radius: 15px 15px 0 0;
- border: 1px solid #FFFFFF;
- border-bottom: unset;
- box-sizing: border-box;
- }
- .marketing_content {
- padding: 20px 15px 46px;
- }
- .reach_tools {
- display: flex;
- align-items: center;
- font-weight: 500;
- font-size: 14px;
- color: #222222;
- }
- .reach_tools img {
- width: 20px;
- height: 20px;
- margin-right: 5px;
- }
- .reach_tools_title {
- margin-top: 30px;
- }
- .tools_box {
- width: calc(50% - 7px);
- height: 72px;
- box-sizing: border-box;
- display: flex;
- align-items: center;
- padding: 15px 10px;
- background: linear-gradient( 180deg, rgba(255,255,255,0.5) 0%, #FFFFFF 100%);
- border-radius: 15px;
- border: 1px solid #FFFFFF;
- margin-top: 15px;
- }
- .tools_box img {
- width: 40px;
- height: 40px;
- margin-right: 8px;
- }
- .tools_box_info {
- display: flex;
- flex-direction: column;
- font-weight: 500;
- font-size: 14px;
- color: #222222;
- line-height: 20px;
- white-space: nowrap;
- flex: 1;
- min-width: 0;
- }
- .tools_box_info_text {
- font-weight: 400;
- font-size: 12px;
- color: #999999;
- line-height: 17px;
- padding-top: 5px;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- }
- .tools_box_list {
- display: flex;
- flex-wrap: wrap;
- justify-content: space-between;
- }
- .task_manage_item {
- font-weight: 400;
- font-size: 12px;
- color: #666666;
- line-height: 17px;
- }
- .van-checkbox {
- width: 31px;
- }
- </style>
- <body>
- <div id="box" class="box">
- <div class="page5" :style="{'padding': bind ? '0' : '0 15px'}">
- <!-- 首页 -->
- <div v-if="activeTabbar === 'home'">
- <div v-if="bind" :style="{'height': 'calc(100vh - 46px)'}">
- <iframe :src="`qw/qwJxs.html?bId=${bId}&env=${env}`" width="100%" height="100%" frameborder="0"></iframe>
- </div>
- <div v-else>
- <div class="home_bg">
- <img src="./img/qw/home_bg.png" alt="">
- </div>
- <div class="home_box">
- <div class="wel_tip">
- <div>{{nowTime}}</div>
- <div>{{memberName}}</div>
- </div>
- <div class="task_content">
- <div class="task_box" :style="{'height': taskList.length ? '295px' : '180px'}">
- <div class="task_top">
- <div class="task_top_left">
- <img src="./img/qw/to-do.png" alt="">
- <div>待办任务</div>
- </div>
- <div class="task_top_right" @click="handleAllTask">
- <div>全部任务</div>
- <img src="./img/qw/link-icon.png" alt="">
- </div>
- </div>
- <div class="task_list" v-if="taskList.length > 0">
- <div class="task_item" v-for="item in taskList" :key="item.id">
- <div class="task_item_left">
- <div class="task_item_left_top">
- <img :src="item.clientAvatar ? item.clientAvatar : './img/qw/mem_icon.png'" alt="">
- <div>{{ item.clientName }}</div>
- </div>
- <div class="task_item_CLIENT_LOG" v-if="item.type === 'CLIENT_LOG'" v-html="item.taskDesc"></div>
- <div class="task_item_left_bottom" v-else>{{item.taskDesc}}</div>
- </div>
- <div class="task_item_line"></div>
- <div class="task_item_right" @click="handleTaskDetail(item)">{{item.type === 'MONITORED_MESSAGE' ? '回复' : '查看'}}</div>
- </div>
- </div>
- <div class="notask_tip" v-else>暂无需要完成的任务</div>
- </div>
- <div class="client_box_title">
- <div>我的客户</div>
- <van-popover v-model="timePopover" trigger="click" placement="bottom-start">
- <div class="date_box">
- <div :class="dateIndex === '今日' ? 'date_active' : 'date_item'" @click="handleDate('今日')">今日</div>
- <div :class="dateIndex === '近7天' ? 'date_active' : 'date_item'" @click="handleDate('近7天')">近7天</div>
- <div :class="dateIndex === '近30天' ? 'date_active' : 'date_item'" @click="handleDate('近30天')">近30天</div>
- <div :class="dateIndex === '自定义' ? 'date_active' : 'date_item'" @click="handleDate('自定义')">自定义</div>
- </div>
- <template #reference>
- <div class="time_box">
- <img src="./img/qw/time_icon.png" alt="">
- <span>{{dateIndex}}</span>
- <img src="./img/qw/time_select.png" alt="">
- </div>
- </template>
- </van-popover>
- </div>
- <div class="client_box">
- <div class="client_data_item client_all">
- <div class="client_title">总客户数</div>
- <div class="client_num client_all_color">{{clientTotal}}</div>
- </div>
- <div class="client_data_item client_add">
- <div class="client_title">新增客户数</div>
- <div class="client_num client_add_color">{{clientAdd}}</div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <!-- 自定义时间 -->
- <van-calendar type="range" v-model="showSelfDate" @confirm="onSelfConfirm" color="#1677FF" :min-date="minDate"
- :max-date="maxDate" :allow-same-day="true"></van-calendar>
- <!-- 客户 -->
- <div v-if="activeTabbar === 'client'">
- <div class="client_top" :style="activeTab === '客户' ? 'height: 144px' : 'height: 100px'">
- <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>
- <van-tabs v-model="activeTab" ref="tabs" color="#136DFB" line-width="18px" line-height="2px" @change="handleChange">
- <van-tab title="客户" name="客户"></van-tab>
- <van-tab title="客户群" name="客户群"></van-tab>
- </van-tabs>
- <div class="client_top_line" v-if="activeTab === '客户'"></div>
- <div class="tag_box" v-if="activeTab === '客户'">
- <div :class="activeTag === '全部' ? 'tag_box_active' : 'tag_box_item'" @click="handleTagClick('全部')">全部</div>
- <div :class="activeTag === '按客户标签筛选' ? 'tag_box_active' : 'tag_box_item'" @click="handleTagClick('按客户标签筛选')">按客户标签筛选</div>
- </div>
- </div>
- <!-- 标签筛选组件 -->
- <select-tag :tenancy-Id="tenancyId" :label-Filter.sync="labelFilter" :show-Client-Tag.sync="showClientTag" :select-Tag-List.sync="clientTags" @add="handleAdd"></select-tag>
- <!-- 客户、客户群列表 -->
- <div class="client_content" :style="activeTab === '客户' ? 'top: 144px' : 'top: 100px'">
- <div class="client_content_box">
- <div class="client_date">
- <div :class="clientDate === 'today' ? 'client_date_active' : 'client_date_item'" @click="handleClientDate('today')">今日</div>
- <div :class="clientDate === 'week' ? 'client_date_active' : 'client_date_item'" @click="handleClientDate('week')">近7天</div>
- <div :class="clientDate === 'month' ? 'client_date_active' : 'client_date_item'" @click="handleClientDate('month')">近30天</div>
- <div :class="clientDate === 'custom' ? 'client_date_active' : 'client_date_item'" @click="handleClientDate('custom')">自定义</div>
- </div>
- <div class="client_list" v-if="clientList.length > 0">
- <!-- 使用 checkbox-group 统一管理选中项 -->
- <van-checkbox-group v-model="checkedClientIds" @change="onChangeChecked">
- <div class="client_item" v-for="item in clientList" :key="item.id">
- <van-checkbox :name="item.id">
- <template #icon="props">
- <div :class="props.checked ? 'check_div_active' : 'check_div'"></div>
- </template>
- </van-checkbox>
- <div class="client_info" @click="handleClientDetail(item)">
- <img :src="item.avatar ? item.avatar : './img/qw/mem_icon.png'" alt="">
- <div class="client_info_text">
- <div>{{item.name}}</div>
- <div class="client_tag">
- <span v-for="(tag, tagIndex) in item.tagList" :key="tagIndex">
- {{tag}}
- </span>
- </div>
- </div>
- </div>
- </div>
- </van-checkbox-group>
- </div>
- <div class="client_list" v-else-if="groupList.length > 0">
- <div class="group_item" v-for="item in groupList" :key="item.id" @click="handleGroupClientDetail(item)">
- <div class="group_info">
- <div class="group_name">{{item.name}}</div>
- <div class="group_data">
- 群主:<span style="color: #136DFB;padding-right: 15px;">{{item.ownAccountName}}</span>
- 群人数:<span style="color: #FFA041;padding-right: 15px;">{{item.groupMemberNumber}}</span>
- 群客户数:<span style="color: #5DD565;">{{item.clientNum}}</span>
- </div>
- <div class="create_time">建群时间:{{formatDate(item.createdGroupTime)}}</div>
- </div>
- </div>
- </div>
- <div class="noclient_list" v-else>
- <div v-if="loading">搜寻中...</div>
- <div v-else>
- <img src="./img/qw/no_task.png" alt="">
- <div class="notask_text">暂无数据</div>
- </div>
- </div>
- <div class="send_foot" v-if="checkedClientIds.length > 0 && activeTab === '客户'">
- <div class="send_btn" @click="handleMass">创建群发</div>
- </div>
- </div>
- </div>
- </div>
- <!-- 营销 -->
- <div v-if="activeTabbar === 'marketing'">
- <div class="marketing_bg">
- <img src="./img/qw/market_bg.png" alt="">
- </div>
- <div class="marketing_box">
- <div class="marketing_content">
- <div class="reach_tools">
- <img src="./img/qw/reach_tools.png" alt="">
- <span>触达工具</span>
- </div>
- <div class="tools_box" @click="handleAiCall">
- <img src="./img/qw/ai_call.png" alt="">
- <div class="tools_box_info">
- <div>AI外呼</div>
- <div class="tools_box_info_text">你的专属外呼助理</div>
- </div>
- </div>
- <div v-if="bind">
- <div class="reach_tools reach_tools_title">
- <img src="./img/qw/task_icon.png" alt="">
- <span>任务管理</span>
- </div>
- <div class="tools_box_list">
- <div class="tools_box" @click="handleClientMass">
- <img src="./img/qw/client_mass.png" alt="">
- <div class="task_manage_item">客户群发任务</div>
- </div>
- <div class="tools_box" @click="handleClientGroupMass">
- <img src="./img/qw/group_mass.png" alt="">
- <div class="task_manage_item">客户群群发任务</div>
- </div>
- <div class="tools_box" @click="handlePyqMass">
- <img src="./img/qw/pyq_mass.png" alt="">
- <div class="task_manage_item">朋友圈群发任务</div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <!-- 底部导航栏 -->
- <div class="tabbar">
- <div class="tabbar_box">
- <div class="tabbar_item" @click="handleTabClick('home')">
- <img class="tabbar_img" :src="activeTabbar === 'home' ? './img/qw/tabbar-home1.png' : './img/qw/tabbar-home.png'" />
- <div :class="activeTabbar === 'home' ? 'tabbar_text_active' : 'tabbar_text'">首页</div>
- </div>
- <div class="tabbar_item" @click="handleTabClick('client')">
- <img class="tabbar_img" :src="activeTabbar === 'client' ? './img/qw/tabbar-client1.png' : './img/qw/tabbar-client.png'" />
- <div :class="activeTabbar === 'client' ? 'tabbar_text_active' : 'tabbar_text'">客户</div>
- </div>
- <div class="tabbar_item" @click="handleTabClick('marketing')">
- <img class="tabbar_img" :src="activeTabbar === 'marketing' ? './img/qw/tabbar-market1.png' : './img/qw/tabbar-market.png'" />
- <div :class="activeTabbar === 'marketing' ? 'tabbar_text_active' : 'tabbar_text'">营销</div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </body>
- <script>
- new Vue({
- el: '#box',
- data() {
- return {
- httpUrl: '',
- bId: null,
- env: '',
- memberId: null,
- tenancyId: '',
- nowTime: '',
- memberName: '',
- bind: false, // 首页
- taskList: [],
- clientAdd: null,
- clientTotal: null,
- dateIndex: '今日',
- timePopover: false,
- startTime: null,
- endTime: null,
- showSelfDate: false,
- minDate: '',
- maxDate: '',
- clientStartTime: null, // 客户
- clientEndTime: null,
- clientList: [],
- groupList: [],
- clientDate: '',
- activeTab: '客户',
- activeTag: '全部',
- loading: false,
- labelFilter: 0,
- clientTags: [],
- activeTabbar: 'home',
- keyword: '',
- showClientTag: false,
- // 客户列表勾选的 id 集合
- checkedClientIds: [],
- // 勾选的客户列表(包含 id + externalUserid 等信息)
- selectedClients: [],
- aiCallToken: null, // AI外呼token
- }
- },
- created() {
- let nowDat = new Date();
- let dateY = nowDat.getFullYear()
- let dateM = nowDat.getMonth()
- let dateD = nowDat.getDate()
- // 设置日期可选最小值minDate、最大值maxDate
- this.minDate = new Date(dateY - 100, dateM, dateD)
- //日历可选范围为一年,dateY + 1
- this.maxDate = new Date(dateY, dateM, dateD - 1)
- this.bId = this.getQueryParam('bId')
- this.env = this.getQueryParam('env')
- this.getGreeting()
- 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()
- }
- this.startTime = this.getDateTime(0)
- this.endTime = this.getDateTime(0)
- this.getQyWxSign()
- },
- 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 {
- vant.Toast.fail(msg)
- }
- })
- },
- getGreeting() {
- const now = new Date();
- const hour = now.getHours(); // 获取当前小时 (0-23)
- if (hour >= 5 && hour < 12) {
- this.nowTime = '早上好~'
- } else if (hour >= 12 && hour < 18) {
- this.nowTime = '下午好~'
- } else {
- this.nowTime = '晚上好~'
- }
- },
- 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.bind = data.bind
- if (this.bind) {
- localStorage.setItem('tokenValue', data.token)
- localStorage.setItem('tenancyIdValue', data.tenancyId)
- localStorage.setItem('userId', data.userId)
- localStorage.setItem('qwTenancyNameValue', this.nowTime + data.memberName)
- } else {
- this.clientData()
- this.getTaskList()
- }
- this.tenancyId = data.tenancyId || ''
- this.memberName = data.memberName || ''
- } else {
- vant.Toast.fail(msg)
- }
- })
- },
- // 我的客户
- clientData() {
- fetch(this.httpUrl + '/scrm/v1/wxcp-workbench/p/clientData', {
- method: 'post',
- body: JSON.stringify({
- memberId: this.memberId,
- startTime: this.startTime,
- endTime: this.endTime
- }),
- headers: {
- 'Content-Type': 'application/json'
- }
- }).then(res => {
- return res.json()
- }).then(result => {
- let { data, code, msg } = result
- if (code === 1) {
- this.clientAdd = data.clientAdd
- this.clientTotal = data.clientTotal
- } else {
- vant.Toast.fail(msg)
- }
- })
- },
- // 切换日期
- handleDate(text) {
- this.dateIndex = text
- if (text === '今日') {
- this.startTime = this.getDateTime(0)
- this.endTime = this.getDateTime(0)
- } else if (text === '近7天') {
- this.startTime = this.getDateTime(-7)
- this.endTime = this.getDateTime(-1)
- } else if (text === '近30天') {
- this.startTime = this.getDateTime(-30)
- this.endTime = this.getDateTime(-1)
- } else if (text === '自定义') {
- this.showSelfDate = true
- }
- this.clientData()
- this.timePopover = false
- },
- // 自定义日期
- onSelfConfirm(date) {
- const [start, end] = date
- if (this.formatDate(new Date()) === this.formatDate(end)) {
- this.formatDate(end) = this.formatDate(start)
- }
- this.showSelfDate = false
- if (this.activeTabbar === 'home') {
- this.startTime = this.formatDate(start)
- this.endTime = this.formatDate(end)
- this.clientData()
- } else if (this.activeTabbar === 'client') {
- this.clientStartTime = this.formatDate(start)
- this.clientEndTime = this.formatDate(end)
- if (this.activeTab === '客户') {
- this.pageClient()
- } else {
- this.pageGroup()
- }
- }
- },
- // 切换底部tabbar
- handleTabClick(tab) {
- this.activeTabbar = tab
- if (tab === 'home') {
- this.getTaskList()
- this.clientData()
- } else if (tab === 'client') {
- this.clientStartTime = null
- this.clientEndTime = null
- this.clientDate = ''
- this.activeTab = '客户'
- this.pageClient()
- } else if (tab === 'marketing') {
- }
- },
- // 查询待办任务
- getTaskList () {
- fetch(this.httpUrl + `/scrm/v1/wxcp-member-todo-task/p/page?memberId=${this.memberId}&page=1&pageCount=3`)
- .then(res => {
- return res.json()
- }).then(result => {
- let { data, code, msg } = result
- if (code === 1) {
- this.taskList = data.records || []
- } else {
- vant.Toast.fail(msg)
- }
- })
- },
- // 全部任务
- handleAllTask() {
- window.location.href = `qw/toDoTaskList.html?memberId=${this.memberId}&env=${this.env}&bId=${this.bId}`
- },
- // 任务详情
- handleTaskDetail(item) {
- if (item.type === 'MONITORED_MESSAGE') {
- if (!item.clientExternalUserId) {
- vant.Toast.fail('无效')
- return
- }
- wx.openEnterpriseChat({
- externalUserIds: item.clientExternalUserId, // 参与会话的外部联系人列表,格式为userId1;userId2;…,用分号隔开。
- groupName: "", // 会话名称。单聊时该参数传入空字符串""即可。
- chatId: "",
- success: function (res) {
- var chatId = res.chatId; //返回当前群聊ID,仅当使用agentConfig注入该接口权限时才返回chatId
- // 回调
- console.log('成功', res);
- },
- fail: function (res) {
- // 回调
- if (res.errMsg.indexOf('function not exist') > -1) {
- alert('版本过低请升级');
- }
- console.log('失败', res);
- },
- complete: function (res) {
- // 回调
- console.log('完成', res);
- }
- })
- } else {
- window.location.href = `qw/taskDetail.html?taskId=${item.todoTaskId}&type=${item.type}&env=${this.env}&bId=${this.bId}`
- }
- },
- handleChange(tab) {
- this.activeTab = tab
- this.keyword = ''
- this.clientList = []
- this.groupList = []
- this.clientStartTime = null
- this.clientEndTime = null
- if (tab === '客户') {
- this.pageClient()
- } else if (tab === '客户群') {
- this.pageGroup()
- }
- },
- handleAdd(tagType, tagList) {
- this.labelFilter = tagType
- this.clientTags = tagList
- this.tagIds = tagList.length ? tagList.map(item => item.id) : []
- this.pageClient()
- },
- // 搜索客户
- handleSearch() {
- if (this.activeTab === '客户') {
- this.pageClient()
- } else {
- this.pageGroup()
- }
- },
- // 全部客户
- pageClient() {
- this.loading = true
- fetch(this.httpUrl + '/scrm/v1/wxcp-workbench/p/pageClient', {
- method: 'post',
- body: JSON.stringify({
- bid: this.bId,
- memberId: this.memberId,
- startTime: this.clientStartTime,
- endTime: this.clientEndTime,
- keyword: this.keyword,
- labelFilter: this.labelFilter,
- tagIds: this.tagIds,
- page: 1,
- pageCount: 1000,
- }),
- headers: {
- 'Content-Type': 'application/json',
- }
- }).then(res => {
- return res.json()
- }).then(result => {
- let { data, code, msg } = result
- if (code === 1) {
- this.clientList = data.records || []
- // 刷新列表时清空已勾选项
- console.log('勾选项', this.selectedClients)
- } else {
- vant.Toast.fail(msg)
- }
- }).finally(() => {
- this.loading = false
- })
- },
- // 全部客户群
- pageGroup () {
- this.loading = true
- fetch(this.httpUrl + '/scrm/v1/wxcp-workbench/p/pageGroup', {
- method: 'post',
- body: JSON.stringify({
- bid: this.bId,
- memberId: this.memberId,
- keyword: this.keyword,
- startTime: this.clientStartTime,
- endTime: this.clientEndTime,
- page: 1,
- pageCount: 1000,
- }),
- headers: {
- 'Content-Type': 'application/json',
- }
- }).then(res => {
- return res.json()
- }).then(result => {
- let { data, code, msg } = result
- if (code === 1) {
- this.groupList = data.records || []
- } else {
- vant.Toast.fail(msg)
- }
- }).finally(() => {
- this.loading = false
- })
- },
- // 客户日期筛选
- handleClientDate(text) {
- if (this.clientDate === text) {
- this.clientDate = ''
- this.clientStartTime = ''
- this.clientEndTime = ''
- } else {
- this.clientDate = text
- }
- if (this.clientDate === 'today') {
- this.clientStartTime = this.getDateTime(0)
- this.clientEndTime = this.getDateTime(0)
- } else if (this.clientDate === 'week') {
- this.clientStartTime = this.getDateTime(-7)
- this.clientEndTime = this.getDateTime(-1)
- } else if (this.clientDate === 'month') {
- this.clientStartTime = this.getDateTime(-30)
- this.clientEndTime = this.getDateTime(-1)
- } else if (this.clientDate === 'custom') {
- this.showSelfDate = true
- }
- if (this.activeTab === '客户') {
- this.pageClient()
- } else {
- this.pageGroup()
- }
- },
- handleTagClick(tag) {
- this.activeTag = tag
- if (tag === '按客户标签筛选') {
- this.showClientTag = true
- } else {
- this.labelFilter = 0
- this.tagIds = []
- this.clientTags = []
- this.pageClient()
- }
- },
- // 客户详情
- handleClientDetail(item) {
- window.location.href = `userProfile.html?bId=${this.bId}&env=${this.env}&memberId=${item.memberId}&externalUserId=${item.externalUserid}`
- },
- // 客户群详情
- handleGroupClientDetail(item) {
- window.location.href = `qw/clientGroupDetail.html?bId=${this.bId}&memberId=${this.memberId}&groupId=${item.id}&env=${this.env}`
- },
- // 营销群发
- handleMass() {
- localStorage.setItem('clientData', JSON.stringify(this.selectedClients))
- window.location.href = `qw/mass.html?bId=${this.bId}&env=${this.env}&memberId=${this.memberId}`
- },
- // 客户群发任务
- handleClientMass() {
- window.location.href = `qw/clientMassList.html?bId=${this.bId}&env=${this.env}&memberId=${this.memberId}`
- },
- // 客户群群发任务
- handleClientGroupMass() {
- window.location.href = `qw/clientGroupMassList.html?bId=${this.bId}&env=${this.env}&memberId=${this.memberId}`
- },
- // 朋友圈群发任务
- handlePyqMass() {
- window.location.href = `qw/pyqMassList.html?bId=${this.bId}&env=${this.env}&memberId=${this.memberId}`
- },
- handleAiCall () {
- // 获取顾问手机号
- fetch(this.httpUrl + `/call/api/user/p/getPhone?memberId=${this.memberId}`)
- .then(res => {
- return res.json()
- }).then(result => {
- let { data, code, msg } = result
- if (code === 1) {
- if (data) {
- this.wxcpLoginRegister(data)
- }
- } else {
- vant.Toast.fail(msg)
- }
- })
- },
- wxcpLoginRegister (phone) {
- fetch(this.httpUrl + '/call/api/user/p/wxcpLoginRegister', {
- method: 'post',
- body: JSON.stringify({
- memberId: this.memberId,
- phone: phone,
- }),
- headers: {
- 'Content-Type': 'application/json',
- }
- }).then(res => {
- const resHeader = res.headers
- this.aiCallToken = resHeader.get("token")
- return res.json()
- }).then(result => {
- let { data, code, msg } = result
- if (code === 1) {
- } else {
- vant.Toast.fail(msg)
- }
- }).finally(() => {
- if (!this.env || this.env === 'prod') {
- window.location.href = `https://call.wefanbot.com/?token=${this.aiCallToken}`
- } else {
- window.location.href = `https://test.wefanbot.com:18211/?token=${this.aiCallToken}`
- }
- })
- },
- // 勾选客户变更
- onChangeChecked (value) {
- // value 为当前勾选的 name 数组(即 id 集合)
- this.checkedClientIds = value
- // 根据勾选的 id,从 clientList 里筛出完整客户信息
- this.selectedClients = this.clientList
- .filter(item => value.includes(item.id))
- .map(item => ({
- clientId: item.id,
- externalUserid: item.externalUserid,
- avatar: item.avatar,
- tagList: item.tagList || [],
- // 如果后面还需要其它字段,也可以一起带上
- name: item.name,
- }))
- console.log('当前选中的客户列表(含 id 和 externalUserid): ', this.selectedClients)
- },
- formatDate(input) {
- // 创建 Date 对象(兼容不同浏览器)
- const date = new Date(input)
- // 提取年、月、日
- const year = date.getFullYear()
- const month = String(date.getMonth() + 1).padStart(2, '0') // 月份从0开始,需要+1
- const day = String(date.getDate()).padStart(2, '0')
- return `${year}-${month}-${day}`
- },
- // 日期格式处理
- getDateTime(day) {
- let today = new Date()
- let targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day
- today.setTime(targetday_milliseconds)
- let tYear = today.getFullYear()
- let tMonth = today.getMonth() + 1
- let tDate = today.getDate()
- if (tMonth < 10) {
- tMonth = '0' + tMonth
- }
- if (tDate < 10) {
- tDate = '0' + tDate
- }
- return tYear + '-' + tMonth + '-' + tDate
- },
- getQyWxSign() {
- fetch(this.httpUrl + '/scrm/v1/wxcp-corp/p/getAgentConfig', {
- method: 'post',
- body: JSON.stringify({
- bid: this.bId,
- url: window.location.href,
- }),
- headers: {
- 'Content-Type': 'application/json'
- }
- }).then(res => {
- return res.json()
- }).then(result => {
- let { data, code, msg } = result
- if (code === 1) {
- wx.config({
- beta: true,
- debug: false,
- appId: data.corpid, // 必填,企业号的唯一标识,此处填写企业号corpid
- timestamp: data.timestamp, // 必填,生成签名的时间戳
- nonceStr: data.nonceStr, // 必填,生成签名的随机串
- signature: data.agentSignature, // 必填,签名,见附录1
- jsApiList: ['checkJsApi', 'openEnterpriseChat'] // 必填,需要使用的JS接口列表
- })
- wx.agentConfig({
- corpid: data.corpid,
- agentid: data.agentId,
- timestamp: data.timestamp, // 必填,生成签名的时间戳
- nonceStr: data.nonceStr, // 必填,生成签名的随机串
- signature: data.agentSignature, // 必填,签名,见附录1
- jsApiList: ['openEnterpriseChat'], // 必填,需要使用的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)
- }
- })
- },
- // 截取url中的数据
- getQueryParam(paramName) {
- // 获取当前URL的查询字符串部分
- const queryString = window.location.search;
- // 创建一个URLSearchParams对象
- const urlParams = new URLSearchParams(queryString);
- // 返回指定参数的值,如果不存在则返回null
- return urlParams.get(paramName);
- },
- }
- })
- </script>
- </html>
|