playlet/project/src/components/smartPush/massMsgDetail/userDetail.vue

<template>
  <div class="modular">
    <div class="modularItem" v-loading='loading'>
      <div class="flex">
        <div class="big_title flex-align-center">成员详情</div>
        <a :href="exportHref" class="selfBtn_detial">导出</a>
      </div>
      <div class="tabBox">
        <div :class="['tabItem',memberType==item.id?'active':'']" v-for="(item) in memberTypeList" :key="item.id+'memberTypeList'" @click="memberType=item.id;sender_list_change()">{{item.name}}</div>
      </div>
      <div class="flex">
        <div class="totalCustom"><i class="el-icon-user-solid"></i> 共<span>{{total}}</span>人</div>
        <self-input label_name='成员昵称' :hasLabel='false' @inputChange='(val)=>{input_keyword = val;sender_list_change()}'></self-input>
      </div>
      <div class="userListBox self-scrollbar-3 senderSccrollBox">
        <div class="userItem" v-for="(item,idx) in senderList" :key="item.user_id+'sender'+idx">
          <div class="time">群发时间：{{item.send_time?item.send_time:'-'}}</div>
          <div class="userBox">
            <img :src="item.avatar" alt="" class="userImg">
            <div>
              <div class="userName">{{item.name}}</div>
              <div class="other">共需发送{{$formatNum(item.customer_num)}}个好友，已发送{{$formatNum(item.send_success)}}人</div>
            </div>
          </div>
        </div>
        <noData v-if="senderList&&senderList.length<=0&&!loading"></noData>
      </div>
      <div class="pagination" v-show="total>page_size">
        <el-pagination background :current-page="page" @current-change="handleCurrentChange" layout="prev, pager, next" :page-count='Number(pages)'>
        </el-pagination>
      </div>
    </div>
    <div class="modularItem" v-loading="cy_loading">
      <div class="flex">
        <div class="big_title flex-align-center">客户详情</div>
        <div class="flex-align-center">
          <el-select v-model="user_id" size='mini' clearable placeholder="请选择客服" @change="sendCustList_change()">
            <el-option v-for="item in allMemberOptions" :key="item.user_id" :label="item.name" :value="item.user_id">
            </el-option>
          </el-select>
          <a :href="exportHref_send" class="selfBtn_detial" style="margin-left:20px">导出</a>
        </div>
      </div>
      <div class="tabBox">
        <div :class="['tabItem',massType==item.id?'active':'']" v-for="(item) in massTypeList" :key="item.id+'massTypeList'" @click="massType=item.id;sendCustList_change()">{{item.name}}</div>
      </div>
      <div class="flex">
        <div class="totalCustom"><i class="el-icon-user-solid"></i> 共<span>{{$formatNum(cy_total)}}</span>人</div>
        <self-input label_name='客户昵称' :hasLabel='false' @inputChange='(val)=>{input_mass_keyword = val;sendCustList_change()}'></self-input>
      </div>
      <div class="userListBox self-scrollbar-3 massSendScroll">
        <div class="userItem massList" v-for="(item,index) in massSendCustList" :key="index+'massSend'">
          <div class="userBox">
            <img :src="item.external_avatar" alt="" class="userImg">
            <div>
              <div class="userName">{{item.external_username}}</div>
              <div :class="['statusBox',item.status!=1?'statusBox2':'']">{{item.status==0?'未发送':item.status==1?'已发送':item.status==2?'已不是好友':item.status==3?'接收已达上限':item.status_description}}</div>
            </div>
          </div>
          <div class="userRight">通过 {{item.sender_name}} 发送</div>
        </div>
        <noData v-if="massSendCustList&&massSendCustList.length<=0&&!cy_loading"></noData>
      </div>
      <div class="pagination" v-show="cy_total>page_size">
        <el-pagination background :current-page="cy_page" @current-change="cy_handleCurrentChange" layout="prev, pager, next" :page-count='Number(cy_pages)'>
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import selfInput from '@/components/assembly/screen/input.vue'
import noData from "@/components/assembly/noData";
export default {
  components: {
    noData,
    selfInput
  },
  props: ['rule_id', 'send_num', 'send_date'],
  data () {
    return {
      memberType: 'all',
      memberTypeList: [
        { id: 'all', name: '全部成员' },
        { id: 'sent', name: '已发送成员' },
        { id: 'unsent', name: '未发送成员' },
        { id: 'fail', name: '发送失败' },
      ],
      massType: 0,
      massTypeList: [
        { id: 0, name: '全部' },
        { id: 1, name: '已送达' },
        { id: 2, name: '未送达' },
        { id: 3, name: '接收已达上限' },
        { id: 4, name: '已不是好友' },
      ],
      input_keyword: '',
      loading: false,
      page: 1,
      page_size: 20,
      total: 0,
      pages: 0,
      senderList: [],
      massSendCustList: [],
      cy_page: 1,
      cy_total: 0,
      cy_pages: 0,
      cy_loading: false,
      input_mass_keyword: '',
      allMemberOptions: [],
      user_id: '',
      exportHref: '',
      corpid: '',
      exportHref_send: ''
    }
  },
  created () {
    let corpid = '';
    if (sessionStorage.getItem('company_session_defaultCorp') && sessionStorage.getItem('company_session_defaultCorp') != 'undefined') {
      this.corpid = JSON.parse(sessionStorage.getItem('company_session_defaultCorp')).corpid
    } else {
      this.corpid = this.$localSelfStore.getLocal('defaultCorp') && this.$localSelfStore.getLocal('defaultCorp') != 'undefined' ? JSON.parse(this.$localSelfStore.getLocal('defaultCorp')).corpid : ''
    }
    this.sender_list_change()
    this.get_allMemberOptions()
    this.sendCustList_change()
  },
  methods: {
    sender_list_change () {//成员列表
      this.exportHref = this.URL.BASEURL + this.URL.smartPush_senderListExport + `?admin_id=${this.$cookie.getCookie('admin_id')}&ttl=${Number(this.$cookie.getCookie('ttl'))}&sign=${this.$cookie.getCookie('sign')}&corpid=${this.corpid}&rule_id=${this.rule_id}&type=${this.memberType}&keyword=${this.input_keyword}&send_num=${this.send_num}&send_date=${this.send_date}`;
      this.get_sender_list(1)
    },
    sendCustList_change () {//客户列表
      this.exportHref_send = this.URL.BASEURL + this.URL.smartPush_massSendCustListExport + `?admin_id=${this.$cookie.getCookie('admin_id')}&ttl=${Number(this.$cookie.getCookie('ttl'))}&sign=${this.$cookie.getCookie('sign')}&corpid=${this.corpid}&rule_id=${this.rule_id}&type=${this.massType}&name=${this.input_mass_keyword}&sender=${this.user_id}&send_num=${this.send_num}&send_date=${this.send_date}`;
      this.get_mass_SendCustList(1)
    },
    get_allMemberOptions () {//客户详情-客服筛选列表
      this.$axios.get(this.URL.BASEURL + this.URL.smartPush_senderList, {
        params: {
          rule_id: this.rule_id,
          send_num: this.send_num,
          send_date: this.send_date,
          page: 1,
          page_size: 500,
          type: 'all',
        }
      }).then((res) => {
        var res = res.data
        if (res && res.errno == 0) {
          this.allMemberOptions = res.rst.data;
        } else if (res.errno != 4002) {
          this.$message({
            message: res.err,
            type: "warning"
          })
        }
      }).catch((err) => {
      });
    },
    get_sender_list (page) {
      this.page = page ? page : this.page;
      this.loading = true
      this.$axios.get(this.URL.BASEURL + this.URL.smartPush_senderList, {
        params: {
          rule_id: this.rule_id,
          send_num: this.send_num,
          send_date: this.send_date,
          page: this.page,
          page_size: this.page_size,
          type: this.memberType,
          keyword: this.input_keyword
        }
      }).then((res) => {
        var res = res.data
        this.loading = false
        if (res && res.errno == 0) {
          this.senderList = res.rst.data;
          // if (this.memberType == 'all') {
          //   this.allMemberOptions
          // }
          this.total = res.rst.pageInfo.total;
          this.pages = res.rst.pageInfo.pages;
          document.getElementsByClassName('senderSccrollBox')[0].scrollTop = 0
        } else if (res.errno != 4002) {
          this.$message({
            message: res.err,
            type: "warning"
          })
        }
      }).catch((err) => {
        this.loading = false
      });
    },
    handleCurrentChange (val) {
      this.get_sender_list(val)
    },
    get_mass_SendCustList (page) {//成员列表
      this.cy_page = page ? page : this.cy_page;
      this.cy_loading = true
      this.$axios.get(this.URL.BASEURL + this.URL.smartPush_massSendCustList, {
        params: {
          rule_id: this.rule_id,
          send_num: this.send_num,
          send_date: this.send_date,
          page: this.cy_page,
          page_size: this.page_size,
          type: this.massType,
          name: this.input_mass_keyword,
          sender: this.user_id
        }
      }).then((res) => {
        var res = res.data
        this.cy_loading = false
        if (res && res.errno == 0) {
          this.massSendCustList = res.rst.data;
          this.cy_total = res.rst.pageInfo.total;
          this.cy_pages = res.rst.pageInfo.pages;
          document.getElementsByClassName('massSendScroll')[0].scrollTop = 0
        } else if (res.errno != 4002) {
          this.$message({
            message: res.err,
            type: "warning"
          })
        }
      }).catch((err) => {
        this.cy_loading = false
      });
    },
    cy_handleCurrentChange (val) {
      this.get_mass_SendCustList(val)
    }
  }
}
</script>
<style lang="scss" scoped>
.modular {
  background: #f5f6f8;
  display: flex;
  justify-content: space-between;
  padding: 0;
  .modularItem {
    background: #ffffff;
    padding: 20px;
    width: calc(50% - 5px);
  }
  .big_title {
    font-size: 15px;
    font-weight: 600;
    color: #333333;
    line-height: 21px;
  }
}
.tabBox {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #eee;
  margin-top: 10px;
  .tabItem {
    font-size: 14px;
    line-height: 40px;
    margin-right: 30px;
    cursor: pointer;
    &.active {
      color: #00b38a;
      font-weight: bold;
      position: relative;
      &::after {
        content: "";
        width: 30px;
        height: 2px;
        border-radius: 2px;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        background: #00b38a;
      }
    }
  }
}
.totalCustom {
  color: #333333;
  font-size: 14px;
  line-height: 20px;
  span {
    color: #00b38a;
    font-weight: bold;
    font-size: 16px;
    line-height: 25px;
    padding: 0 4px;
  }
}
.userListBox {
  height: 500px;
  overflow-y: auto;
  .userItem {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    border: 1px solid rgba(0, 90, 255, 0.25);
    background: #f5faff;
    padding: 15px 20px;
    margin-bottom: 15px;
    &.massList {
      background: #fffdfa;
      border-color: #fddc9e;
    }
    .time {
      font-size: 12px;
      line-height: 20px;
      color: #666;
      position: absolute;
      top: 10px;
      right: 20px;
    }
    .statusBox {
      background: #c0eae0;
      font-size: 12px;
      line-height: 20px;
      border: 1px solid #01b28a;
      padding: 0 4px;
      margin-top: 4px;
      display: inline-block;
      &.statusBox2 {
        background: #ffe1d6;
        border-color: #ffb16c;
      }
    }
    .userBox {
      display: flex;
      align-items: center;
      .userImg {
        width: 50px;
        height: 50px;
        border-radius: 4px;
        margin-right: 8px;
      }
      .userName {
        font-size: 15px;
        font-weight: bold;
        line-height: 20px;
      }
      .other {
        font-size: 13px;
        color: #777;
        margin-top: 7px;
      }
    }
    .userRight {
      font-size: 14px;
      color: #666;
    }
  }
}
.selfBtn_detial {
  padding: 7px 15px;
  font-size: 12px;
  border-radius: 3px;
  color: #fff;
  background-color: #00b38a;
  border-color: #00b38a;
}
</style>