playlet/qwh5/src/views/quickwordH5....

<template>
  <div class="pageCon quickH5">
    <form action="/">
      <van-search
          v-model="key_word"
          show-action
          placeholder="搜索话术名称"
          @search="onSearch">
        <template #action>
          <div @click="onSearch" class="searchBox">搜索</div>
        </template>
      </van-search>
    </form>
    <van-tabs v-model:active="active" @click-tab="onClickTab" title-active-color="#333" shrink>
      <van-tab title="分组话术">
        <div  class="listBox_group">
          <van-collapse
              v-model="activeName" accordion @change="switchGroup">
            <van-empty v-if="radarGrouplist.length==0" description="暂无数据" />
            <template v-for="item in radarGrouplist" :key="item.group_id">
              <van-collapse-item :title="item.group_name" :name="item.group_id">
                <van-empty v-if="radarlist.length==0" description="暂无数据" />
                <van-list
                    class="listBox_nogroup"
                    style="max-height: 440px"
                    v-model:loading="loading"
                    :finished="finished"
                    finished-text=""
                    @load="onLoad" >
                  <div class="radar_box" v-for="item in radarlist" :key="item.rule_id">
                    <div class="radar_item">
                      <div class="titleBox">{{item.title?item.title:'-'}}</div>
                      <div class="itemBox" v-for="msg in item.msg_list">
                        <template v-if="msg.chat_type==1">
                          {{msg.chat_message[msg.chat_message.msgtype].content?msg.chat_message[msg.chat_message.msgtype].content:'-'}}
                        </template>
                        <template v-else-if="msg.chat_type==2">
                          <div class="flex">
                            <img :src="msg.chat_message[msg.chat_message.msgtype].oss_url" alt="" class="coverImg">
                            <div class="title">{{msg.chat_message[msg.chat_message.msgtype].name?msg.chat_message[msg.chat_message.msgtype].name:'-'}}</div>
                          </div>
                        </template>
                        <template v-else-if="msg.chat_type==5">
                          <div class="flex">
                            <img :src="msg.chat_message[msg.chat_message.msgtype].imgUrl" alt="" class="coverImg">
                            <div>
                              <div class="title">{{msg.chat_message[msg.chat_message.msgtype].title?msg.chat_message[msg.chat_message.msgtype].title:'-'}}</div>
                              <div class="desc">{{msg.chat_message[msg.chat_message.msgtype].desc?msg.chat_message[msg.chat_message.msgtype].desc:'-'}}</div>
                            </div>
                          </div>
                        </template>
                        <div v-else>
                          <span v-if="msg.fileType_Val==1">文字: </span>
                          <span v-if="msg.fileType_Val==2">图片: </span>
                          <span v-if="msg.fileType_Val==5">链接: </span>
                          <span v-if="msg.fileType_Val==6">小程序: </span>
                          <span v-if="msg.fileType_Val==4">文件: </span>
                          <span v-if="msg.fileType_Val==3">视频: </span>
                          {{msg.chat_message[msg.chat_message.msgtype].name?
                          msg.chat_message[msg.chat_message.msgtype].name:
                          (msg.chat_message[msg.chat_message.msgtype].title?
                          msg.chat_message[msg.chat_message.msgtype].title:'-')}}
                        </div>
                        <div class="flex">
                          <div class="send_box" @click="send(msg.rule_id,msg.msg_id)">
                            <van-icon name="guide-o" color="#fff" /> 发送
                          </div>
                          <div class="send_box edit_box" v-if="msg.chat_type==1"
                               @click="editBoxShow(msg.rule_id,msg.msg_id,msg.chat_message[msg.chat_message.msgtype].content)">
                            <van-icon name="edit" color="#00b38a" /> 修改发送
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </van-list>
              </van-collapse-item>
            </template>
          </van-collapse>
        </div>
      </van-tab>
      <van-tab title="未分组话术">
        <van-list
            class="listBox_nogroup"
            v-model:loading="loading"
            :finished="finished"
            finished-text=""
            @load="onLoad" >
          <van-empty v-if="radarlist.length==0" description="暂无数据" />
          <div class="radar_box" v-for="item in radarlist" :key="item.rule_id">
            <div class="radar_item">
              <div class="titleBox">{{item.title?item.title:'-'}}</div>
              <div class="itemBox" v-for="msg in item.msg_list">
                <template v-if="msg.chat_type==1">
                  {{msg.chat_message[msg.chat_message.msgtype].content?msg.chat_message[msg.chat_message.msgtype].content:'-'}}
                </template>
                <template v-else-if="msg.chat_type==2">
                  <div class="flex">
                    <img :src="msg.chat_message[msg.chat_message.msgtype].oss_url" alt="" class="coverImg">
                    <div class="title">{{msg.chat_message[msg.chat_message.msgtype].name?msg.chat_message[msg.chat_message.msgtype].name:'-'}}</div>
                  </div>
                </template>
                <template v-else-if="msg.chat_type==5">
                  <div class="flex">
                    <img :src="msg.chat_message[msg.chat_message.msgtype].imgUrl" alt="" class="coverImg">
                    <div>
                      <div class="title">{{msg.chat_message[msg.chat_message.msgtype].title?msg.chat_message[msg.chat_message.msgtype].title:'-'}}</div>
                      <div class="desc">{{msg.chat_message[msg.chat_message.msgtype].desc?msg.chat_message[msg.chat_message.msgtype].desc:'-'}}</div>
                    </div>
                  </div>
                </template>
                <div v-else>
                  <span v-if="msg.fileType_Val==1">文字: </span>
                  <span v-if="msg.fileType_Val==2">图片: </span>
                  <span v-if="msg.fileType_Val==5">链接: </span>
                  <span v-if="msg.fileType_Val==6">小程序: </span>
                  <span v-if="msg.fileType_Val==4">文件: </span>
                  <span v-if="msg.fileType_Val==3">视频: </span>
                  {{msg.chat_message[msg.chat_message.msgtype].name?
                    msg.chat_message[msg.chat_message.msgtype].name:
                    (msg.chat_message[msg.chat_message.msgtype].title?
                        msg.chat_message[msg.chat_message.msgtype].title:'-')}}
                </div>
                <div class="flex">
                  <div class="send_box" @click="send(msg.rule_id,msg.msg_id)">
                    <van-icon name="guide-o" color="#fff" /> 发送
                  </div>
                  <div class="send_box edit_box" v-if="msg.chat_type==1"
                       @click="editBoxShow(msg.rule_id,msg.msg_id,msg.chat_message[msg.chat_message.msgtype].content)">
                    <van-icon name="edit" color="#00b38a" /> 修改发送
                  </div>
                </div>
              </div>
            </div>
          </div>
        </van-list>

      </van-tab>
      <!-- S 个人SOP -->
      <van-tab v-if="isShowUserSop" title="SOP">
        <div class="radar_box">
          <div class="radar_item">
            <div class="itemBox" v-for="(msg, idx) in userSopList" :key="idx">
              <template v-if="msg.chat_type==1">
                {{msg.content?msg.content:'-'}}
              </template>
              <template v-else-if="msg.chat_type==2">
                <div class="flex">
                  <img :src="msg.oss_url" class="coverImg">
                  <div class="title">{{msg.name?msg.name:'-'}}</div>
                </div>
              </template>
              <template v-else-if="msg.chat_type==5">
                <div class="flex">
                  <img :src="msg.imgUrl" alt="" class="coverImg">
                  <div>
                    <div class="title">{{msg.title?msg.title:'-'}}</div>
                    <div class="desc">{{msg.desc?msg.desc:'-'}}</div>
                  </div>
                </div>
              </template>
              <div v-else>
                <span v-if="msg.chat_type==1">文字: </span>
                <span v-if="msg.chat_type==2">图片: </span>
                <span v-if="msg.chat_type==5">链接: </span>
                <span v-if="msg.chat_type==6">小程序: </span>
                <span v-if="msg.chat_type==4">文件: </span>
                <span v-if="msg.chat_type==3">视频: </span>
                {{msg.name ? msg.name : (msg.title ? msg.title : '-')}}
              </div>
              <div class="flex">
                <div class="send_box" @click="send(msg.rule_id,msg.msg_id,'',{isUserSop: true})">
                  <van-icon name="guide-o" color="#fff" /> 发送
                </div>
                <!-- <div class="send_box edit_box" v-if="msg.chat_type==1"
                      @click="editBoxShow(msg.rule_id,msg.msg_id,msg.chat_message[msg.chat_message.msgtype].content)">
                  <van-icon name="edit" color="#00b38a" /> 修改发送
                </div> -->
              </div>
            </div>
          </div>
        </div>
      </van-tab>
      <!-- E 个人SOP -->
    </van-tabs>

    <van-overlay :show="overshow" >
      <div class="overBox">
        <van-loading type="spinner" color="#00b38a" />
      </div>
    </van-overlay>

    <van-action-sheet v-model:show="actionShow" title="修改发送">
      <div class="actionContent">
        <div class="tips">
          <van-icon name="bell" color="#00b38a" />
          可对话术进行修改，【发送】后不会影响原有话术
        </div>
        <div class="textAreaBox">
          <div>
            <span class="c-00b38a f14" @click="appendCon(1)">[插入用户昵称]</span>
            <span class="c-00b38a f14" style="margin-left: 10px;" @click="appendCon(2)">[插入备注名]</span>
          </div>
          <div class="splitLine"></div>
          <van-cell-group inset>
          <van-field
                  v-model="actionedit_obj.actioneditCon"
                  @blur="campaignNameBlur"
                  rows="5"
                  type="textarea"
                  maxlength="2000"
                  placeholder="请输入内容"
                  show-word-limit/>
        </van-cell-group>
        </div>
        <div class="actionSend_box" @click="editSend_Btn">发送</div>

      </div>
    </van-action-sheet>
  </div>
</template>
<script lang="ts" >
import {ref, reactive, onBeforeMount, getCurrentInstance} from "vue";
import { Toast, Search, Tab, Tabs, Collapse, CollapseItem, Empty, Overlay, ActionSheet,Dialog     } from 'vant';
import { getQueryString } from '@/utils/common'
import getWxConfig from "@/utils/getWxConfig";
export default {
  components: {
    [Search.name]: Search,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Collapse.name]: Collapse,
    [CollapseItem.name]: CollapseItem,
    [Empty .name]: Empty ,
    [Overlay .name]: Overlay ,
    [ActionSheet .name]: ActionSheet ,
  },
  setup() {
    const { proxy } = getCurrentInstance();
    const configInfo = reactive({
      corpid:'',
      user_id:'',
      external_userid:''
    })
    const list = ref([]);
    const radarlist = ref([]);
    const radarGrouplist = ref([]);
    const loading = ref(false);
    const actionShow = ref(false);
    const overshow = ref(false);
    const finished = ref(true);
    const pointerIndex = ref();
    const activeName = ref();
    const key_word = ref('');
    const active = ref(0);
    const sendMes = ref({});
    const actionedit_obj = reactive({
        actioneditCon:'',
        rule_id:'',
        msg_id:''
    });
    const user_nick = reactive({
      name:'',
      remark:'',
    });

    const onSearch = () => {getRadarlist(activeName.value)};
    const editSend_Btn = () => {send(actionedit_obj.rule_id,actionedit_obj.msg_id,actionedit_obj.actioneditCon)};
    const editBoxShow = (rule_id,msg_id,content) => {
        actionedit_obj.actioneditCon = content
        actionedit_obj.rule_id = rule_id
        actionedit_obj.msg_id = msg_id
        actionShow.value = true
        if(configInfo.user_id&&configInfo.external_userid){
          get_nick()
        }else{
          if(!configInfo.user_id){
            getWxConfig('',(authInfo)=>{url_pin(authInfo)});
          }
          if(!configInfo.external_userid){
            getWxConfig(()=>{get_external_userid()});
          }
          get_nick()
        }
    };
    const get_nick=()=>{ //获取用户昵称和备注
      (proxy as any).$axios.get("/api/h5/chatMenuPage/customerInfo", {
        corpid: configInfo.corpid,
        user_id:configInfo.user_id,
        external_userid:configInfo.external_userid,
      }, true).then((res) => {
        let data = res.rst.user_info;
        user_nick.name = data.name
        user_nick.remark = data.remark
      }).catch(err => {
        Toast.loading({
          duration:2000,
          message: err,
          forbidClick: true,
        });
      })
    }
    const campaignNameBlur=(e)=>{//获取光标位置
      pointerIndex.value = e.srcElement.selectionStart
    }
    const appendCon = (type)=>{//将昵称添加到指定位置
      let con = actionedit_obj.actioneditCon
      if(type==1){
        actionedit_obj.actioneditCon = con.slice(0,pointerIndex.value) + ' ' + user_nick.name + ' ' + con.slice(pointerIndex.value)
      }else if(type==2){
        actionedit_obj.actioneditCon = con.slice(0,pointerIndex.value) + ' ' + user_nick.remark + ' ' + con.slice(pointerIndex.value)
      }
    }
    const switchGroup = (val) => val&&getRadarlist(val);
    const onClickTab = ({ title }) =>{
      if(title == '分组话术'){
        getRadarGrouplist()
      }else if(title == '未分组话术'){
          activeName.value=0
        getRadarlist(0)
      }
    };

    onBeforeMount(() => {//组件挂载之前
      if(getQueryString('againJump')){
        configInfo.corpid = getQueryString('corpid')
        getRadarGrouplist()
        wx_getuserinfo()
        getWxConfig(()=>{get_external_userid()});
        handleGetIsShowUserSop() // 获取个人SOP数据
      }else{//获取code
        overshow.value = true;
        getWxConfig('',(authInfo)=>{url_pin(authInfo) });
      }
    });


    // S ========= 个人sop
    const isShowUserSop = ref(false)
    const userSopList: any = ref([])

    // 获取 external_userid 返回Promise
    const handleGetExternalUserid = () => {
      return new Promise((resolve, reject) => {
        wx.invoke('getCurExternalContact', {}, function(res){
          if(res.err_msg == "getCurExternalContact:ok") {
            resolve(res.userId)
          } else {
            reject('获取失败')
          }
        });
      })
    }

    const handleGetIsShowUserSop = async () => {
      Dialog({ message: 'handleGetIsShowUserSop 执行' }) // mock


      let external_userid: any = configInfo.external_userid
      let USER_SOP = localStorage.getItem('USER_SOP') || ''
      Dialog({ message: 'USER_SOP => ' + USER_SOP }) // mock


      if (USER_SOP) {
        USER_SOP = JSON.parse(USER_SOP)
        console.log('USER_SOP => ', USER_SOP)
        if (!external_userid) {
          external_userid = await handleGetExternalUserid()
        }
        Dialog({ message: 'external_userid => ' + external_userid }) // mock
        let msgList = USER_SOP[external_userid]
        Dialog({ message: 'msgList => ' + USER_SOP[external_userid] }) // mock
        if (msgList && Array.isArray(msgList)) { // 有当前联系人对应的sop数据
          userSopList.value = msgList.map(item => item.content)
          isShowUserSop.value = true
        } else {
          isShowUserSop.value = false
        }
      } else {
        isShowUserSop.value = false
      }
    }

    // E ========= 个人sop

    const url_pin = (authInfo)=>{
      let redirect_uri = encodeURIComponent(window.location.href+'&againJump=true')
      let url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${authInfo.corpid}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_base&state=1&agentid=${authInfo.agent_id}#wechat_redirect`;
      let link = document.createElement("a");
      link.href = url;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }
    function get_external_userid () {//获取external_userid
        wx.invoke('getCurExternalContact', {
        }, function(res){
            if(res.err_msg == "getCurExternalContact:ok"){
                configInfo.external_userid  = res.userId ; //返回当前外部联系人userId
            }else {
                Toast.loading({
                    duration:2000,
                    message: '当前外部联系人userId获取错误',
                    forbidClick: true,
                });
            }
        });
    }
    function wx_getuserinfo(){ //获取user_id
      (proxy as any).$axios.get("/api/oauth2/userInfo", {
        corpid:configInfo.corpid,
        code:getQueryString('code'),
      },true).then((res) => {
        let data = res.rst;
        if(res&&res.errno==0){
          configInfo.user_id = data.user_id;
        }else{
          Toast.loading({
            duration:2000,
            message: res.err,
            forbidClick: true,
          });
        }
      }).catch( err => {
        Toast.loading({
          duration:2000,
          message: err,
          forbidClick: true,
        });
      })
    }

    const getRadarGrouplist=()=>{
      overshow.value = true;
      (proxy as any).$axios.get("/api/h5/chatMenuPage/groupList", {
        corpid: configInfo.corpid,
        page: 1,
        page_size: 500
      }, true).then((res) => {
        overshow.value = false;
        let data = res.rst;
        radarGrouplist.value = data.data
        if (data && data.data && data.data.length > 0) {
          activeName.value = data.data[0].group_id
          getRadarlist(activeName.value)
        }
        if(res&&res.errno==0){

        }else{
          Toast.loading({
            duration:2000,
            message: res.err,
            forbidClick: true,
          });
        }
      }).catch(err => {
        overshow.value = false;
        Toast.loading({
          duration:2000,
          message: err,
          forbidClick: true,
        });
      })
    }
    const getRadarlist=(group_id)=>{
      if(group_id || group_id==0){
        overshow.value = true;
        (proxy as any).$axios.get("/api/h5/chatMenuPage/list", {
          corpid: configInfo.corpid,
          group_id: group_id,
          title: key_word.value,
          page: 1,
          page_size: 500
        }, true).then((res) => {
          //请求成功
          overshow.value = false;
          if(res&&res.errno==0){
            let data = res.rst;
            data.data.forEach(item=>{
              item.msg_list.forEach(chart=>{
                chart.chat_message = JSON.parse(chart.chat_message)
              })
            })
            radarlist.value = data.data
          }else{
            Toast.loading({
              duration:2000,
              message: res.err,
              forbidClick: true,
            });
          }
        }).catch(err => {
          overshow.value = false;
          Toast.loading({
            duration:2000,
            message: err,
            forbidClick: true,
          });
        })
      }else{
        Toast.loading({
          duration:1000,
          message: '暂无数据',
          forbidClick: true,
        });
      }
    }

    const send=(rule_id,msg_id,editCon,options?)=>{
      actionShow.value = false;
      overshow.value = true;
      getmesBody(rule_id,msg_id,editCon,options)//直接发送,因为发送不需要user_id he external_userid

      if (options && options.isUserSop) { // sop数据上报
        if(configInfo.user_id && configInfo.external_userid){//如果有user_id he external_userid,直接上报数据
          dataReportUserSop(rule_id,msg_id)
        }else{//没有，重新获取code
          if(!configInfo.user_id){
              getWxConfig('',(authInfo)=>{url_pin(authInfo)});
          }
          if(!configInfo.external_userid){
              getWxConfig(()=>{get_external_userid()});
          }
          dataReportUserSop(rule_id,msg_id)
        }
      } else {
        if(configInfo.user_id && configInfo.external_userid){//如果有user_id he external_userid,直接上报数据
          dataReport(rule_id,msg_id)
        }else{//没有，重新获取code
          if(!configInfo.user_id){
              getWxConfig('',(authInfo)=>{url_pin(authInfo)});
          }
          if(!configInfo.external_userid){
              getWxConfig(()=>{get_external_userid()});
          }
          dataReport(rule_id,msg_id)
        }
      }
    }
    const getmesBody=(rule_id,msg_id,editCon,options?)=>{
      overshow.value = true;
      const params: any = {
        corpid: configInfo.corpid,
        msg_id: msg_id,
        rule_id: rule_id,
      }

      if (options && options.isUserSop) { // sop类型添加参数
        params.type = 2
      }

      ;(proxy as any).$axios.get("/api/h5/chatMenuPage/chatMessage", params, true).then((res) => {
        if(res&&res.errno=='0'){
            overshow.value = false;
          let res_new = res.rst.data
          if(editCon){
              res_new.text.content = editCon
          }
          sendMes.value = res_new
          sendRadar()
        }else{
            overshow.value = false;
          Toast.loading({
            duration:2000,
            message: '失败了,请联系管理员',
            forbidClick: true,
          });
        }
      }).catch(err => {
        overshow.value = false;
        Toast.loading({
          duration:2000,
          message: err,
          forbidClick: true,
        });
      })
    }
    const dataReport=(rule_id,msg_id)=>{
          (proxy as any).$axios.get("/api/h5/chatMenuPage/report", {
              corpid: configInfo.corpid,
              user_id:configInfo.user_id,
              external_userid:configInfo.external_userid,
              msg_id: msg_id,
              rule_id: rule_id,
          }, true).then((res) => {
              if(res&&res.errno=='0'){}else{
                  Toast.loading({
                      duration:2000,
                      message: '上报数据失败了,请联系管理员',
                      forbidClick: false,
                  });
              }
          }).catch(err => {

          })
      }
    const sendRadar=()=>{
        let enterChat_obj={enterChat: true}
        let synthetic_obj = {...enterChat_obj,...sendMes.value}
      wx.invoke('sendChatMessage', synthetic_obj, function (res) {
        if (res.err_msg == 'sendChatMessage:ok') {  //发送成功
        }else if(res.err_msg == 'sendChatMessage:fail_unexpect err'){
          Toast.loading({
            duration:2000,
            message: '发送失败，请检查消息是否合法',
            forbidClick: true,
          });
        }
      })
    }


    const dataReportUserSop=(rule_id,msg_id)=>{
        (proxy as any).$axios.get("/api/h5/userSop/report", {
            corpid: configInfo.corpid,
            rule_id: rule_id,
            user_id:configInfo.user_id,
            external_userid:configInfo.external_userid,
            msg_id: msg_id,
        }, true).then((res) => {
            if(res&&res.errno=='0'){}else{
                Toast.loading({
                    duration:2000,
                    message: '上报数据失败了,请联系管理员',
                    forbidClick: false,
                });
            }
        }).catch(err => {

        })
    }


    const onLoad = () => {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      // setTimeout(() => {
      //     for (let i = 0; i < 10; i++) {
      //         list.value.push(list.value.length + 1);
      //     }
      //
      //     // 加载状态结束
      //     loading.value = false;
      //
      //     // 数据全部加载完成
      //     if (list.value.length >= 40) {
      //         finished.value = true;
      //     }
      // }, 1000);
    };

    return {
      actionedit_obj,
      key_word,
      active,
      activeName,
      list,
      loading,
      overshow,
      actionShow,
      finished,
      radarlist,
      radarGrouplist,
      user_nick,
      onLoad,
      onSearch,
      onClickTab,
      switchGroup,
      send,
      editBoxShow,
      editSend_Btn,
      appendCon,
      campaignNameBlur,
      isShowUserSop,
      userSopList,

    };
  }
}
</script>
<style lang="scss">
.quickH5{
  .van-search__action{
    padding: 0;
  }
  .van-tab__text{
    ///*color: #666;*/
    font-size: 16px;
  }
  .van-tab--active{
    font-weight: 600;
    color: #333;
  }
  .van-tab--shrink{
    padding-left: 0;
    padding-right: 20px;
  }
  .van-tabs__content{
    padding: 5px 15px 0;
    background-color: #f8f8f8;
    height: 700px;
    overflow-y: auto;
  }
  .van-search{
    padding: 10px 15px;
    .van-search__content{
      background: #F8F8F8;
      height: 33px;
      line-height: 33px;
    }
    .van-search__field{
      padding: 0;
    }
    .van-field__control{
      height: 33px;
      line-height: 33px;
    }
    .van-field__left-icon .van-icon{
      margin-top: 6px;
    }
  }
  .van-tabs__wrap{
    padding: 0 10px;
  }
}
</style>
<style lang="scss" scoped>
.f14{
  font-size: 14px;
}
  .actionContent{
    padding:10px;
    .textAreaBox{
      background-color: #f8f8f8;
      padding:10px;
      margin-top:20px;
      .splitLine{
        height:1px;
        border-bottom:1px dashed #f0f0f0;
        margin:10px 0;
      }
    }
    .actionSend_box{
      height:36px;
      line-height:36px;
      background: #00b38a;
      color: #fff;
      width:80%;
      text-align:center;
      margin: 0 auto;
      margin-top:30px;
    }
    .tips{
      font-size: 13px;
      text-align: center;
      padding: 12px;
      background-color: #f8f8f8;
      color: #58A392;
    }
  }
  .flex{
    display:flex;
    align-items:center;
  }
  .c-00b38a{
    color:#00b38a
  }


.overBox{
  font-size: 18px;
  text-align: center;
  margin-top: 70%;
}


.pageCon{
  //padding: 10px;
  .searchBox{
    width: 60px;
    text-align: center;
    background: #00b38a;
    color: #fff;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }
  .listBox_group{
    margin-top: 10px;

  }


  .listBox_nogroup{
    /*border:1px solid red;*/
    max-height:500px;
    overflow-y:auto;
    /*margin-top: 10px;*/
  }

  .radar_box{
    background-color: #f8f8f8;
    .radar_item{
      padding: 10px;
      background-color: #fff;
      .titleBox{
        color: #000;
        font-weight:600;
        font-size:14px;
        word-wrap:break-word;
      }
      .coverImg{
        width:50px;
        height:50px;
        margin-right:10px;

      }
      .title{
        color: #444;
        font-size: 14px;
        word-wrap:break-word;
      }
      .desc{
        color: #999;
        margin-top: 4px;
        font-size: 12px;
        word-wrap:break-word;
      }
      .itemBox{
        background-color: #f8f8f8;
        padding:13px 14px;
        margin-top:4px;
        color: #333;
        word-wrap:break-word;
      }
    }

    .send_box{
      width: 60px;
      height: 26px;
      background-color: #00b38a;
      color:#fff;
      text-align: center;
      line-height: 26px;
      margin-top:5px;
      border-radius: 20px;
      margin-right:5px;
      font-size:10px;

    }
    .edit_box{
      width: 80px;
      background-color: transparent;
      color: #00b38a;
      border:1px solid #00b38a
    }
  }

}

</style>