caimei365-manager-ui/src/views/user/consult/list.vue

<template>
  <div class="app-container" style="padding: 0 20px 20px 20px">
    <!-- 顶部操作区域 -->
    <!-- <date-picker @prev-month="handlePrevMonth" @next-month="handleNextMonth" /> -->
    <!-- 筛选项 -->
    <div class="filter-container">
      <div class="filter-control">
        <span>标签词:</span>
        <el-input
          v-model="listQuery.remarks"
          placeholder="标签词"
          clearable
          style="width: 150px"
          @keyup.enter.native="getList"
          @clear="getList"
        />
      </div>
      <div class="filter-control">
        <span>机构名称:</span>
        <el-input
          v-model="listQuery.clubName"
          placeholder="机构名称"
          clearable
          @keyup.enter.native="getList"
          @clear="getList"
        />
      </div>
      <div class="filter-control">
        <span>咨询类别:</span>
        <el-select v-model="listQuery.consult" clearable style="width: 120px" @change="getList">
          <el-option value="" label="请选择" />
          <el-option v-for="(item, index) in categoryList" :key="index" :label="item.className" :value="item.id" />
        </el-select>
      </div>
      <div class="filter-control">
        <span>是否注册:</span>
        <el-select v-model="listQuery.isRegister" clearable style="width: 120px" @change="getList">
          <el-option value="" label="请选择" />
          <el-option :value="1" label="未注册" />
          <el-option :value="2" label="已注册" />
        </el-select>
      </div>
      <div class="filter-control">
        <span>新分配机构:</span>
        <el-select v-model="listQuery.newDeal" clearable style="width: 120px" @change="getList">
          <el-option value="" label="请选择" />
          <el-option :value="1" label="是" />
          <el-option :value="2" label="否" />
        </el-select>
      </div>
      <div class="filter-control">
        <span>提交时间:</span>
        <el-date-picker
          v-model="time"
          type="daterange"
          unlink-panels
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          @change="handleDatePick"
        />
      </div>
      <div class="filter-control">
        <el-button type="primary" @click="getList"> 查询 </el-button>
      </div>
    </div>
    <div class="filter-container">
      <span class="span-labels">
        【查询时间内】咨询客户总数：
        <el-tag type="primary" size="small">
          {{ totalInfo.number }}
        </el-tag>
      </span>
      <span class="span-labels">
        已注册客户总数：
        <el-tag type="primary" size="small">
          {{ totalInfo.registeredNumber }}
        </el-tag>
      </span>
      <span class="span-labels">
        未注册客户总数：
        <el-tag type="primary" size="small">
          {{ totalInfo.unRegisteredNumber }}
        </el-tag>
      </span>
    </div>
    <div class="filter-container">
      <span
        v-for="(item, index) in serviceList"
        :key="index"
        style="margin-right: 15px; margin-bottom: 5px; display: inline-block"
      >
        <el-button :type="sellerTabsIndex === index ? 'primary' : ''" @click="handeleTabsClick(item, index)">
          {{ item.linkMan }}:
          {{ item.registeredNumber + item.unregisteredNumber }}
          ({{ item.registeredNumber }} +{{ item.unregisteredNumber }})
        </el-button>
      </span>
    </div>
    <div class="filter-container">
      <span class="span-labels">
        <el-tag type="primary" size="small">{{ sellerTabsInfo.linkMan }}</el-tag>
        【查询时间内】咨询客户总数：
        <el-tag type="primary" size="small">
          {{ sellerTabsInfo.registeredNumber + sellerTabsInfo.unregisteredNumber }}
        </el-tag>
      </span>
      <span class="span-labels">
        已注册客户总数：
        <el-tag type="primary" size="small">
          {{ sellerTabsInfo.registeredNumber }}
        </el-tag>
      </span>
      <span class="span-labels">
        未注册客户总数：
        <el-tag type="primary" size="small">
          {{ sellerTabsInfo.unregisteredNumber }}
        </el-tag>
      </span>
    </div>
    <div class="filter-container">
      <template v-if="isLoading">
        <div class="list-loading">
          <p style="color: #ffffff"><i class="el-icon-loading"></i></p>
        </div>
      </template>
      <template v-else>
        <div v-if="list.length === 0" class="list-main-empty">
          <p style="color: #999999">暂无咨询记录</p>
        </div>
        <div v-for="(item, index) in list" v-else :key="index" class="list-main">
          <div class="list-main-item consult-list">
            <span class="list-time">{{ item.addTime }}</span>
            <el-row :gutter="24" class="box-row">
              <el-col v-if="item.clubName" :span="6"><b>机构：</b> {{ item.clubName }}</el-col>
              <el-col :span="6"><b>咨询人：</b> {{ item.questionMan }}</el-col>
              <el-col v-if="item.contractMobile" :span="12"><b>手机号：</b> {{ item.contractMobile }}</el-col>
            </el-row>
            <template v-if="item.product && item.product.length > 0">
              <el-row :gutter="24" class="box-row">
                <el-col :span="6"><b>咨询商品：</b></el-col>
              </el-row>
              <el-row :gutter="24" class="box-row">
                <el-col :span="24">
                  <el-table :data="item.product" border width="1000">
                    <el-table-column prop="mainImage" label="商品图片" align="center" width="100">
                      <template slot-scope="{ row }">
                        <el-popover placement="top-start" title="" width="180" trigger="hover">
                          <img :src="row.mainImage" alt="" style="width: 150px; height: 150px" />
                          <img slot="reference" :src="row.mainImage" alt="" style="width: 30px; height: 30px" />
                        </el-popover>
                      </template>
                    </el-table-column>
                    <el-table-column prop="name" label="商品名称" align="center" />
                    <el-table-column prop="shopName" label="供应商名称" align="center" />
                  </el-table>
                </el-col>
              </el-row>
            </template>
            <template v-if="item.reports && item.reports.length > 0">
              <el-row :gutter="24" class="box-row">
                <el-col :span="6"><b>咨询报备：</b></el-col>
              </el-row>
              <el-row :gutter="24" class="box-row">
                <el-col :span="24">
                  <el-table :data="item.reports" border width="1000">
                    <el-table-column prop="mainImage" label="商品图片" align="center" width="100">
                      <template slot-scope="{ row }">
                        <el-popover placement="top-start" title="" width="180" trigger="hover">
                          <img :src="row.mainImage" alt="" style="width: 150px; height: 150px" />
                          <img slot="reference" :src="row.mainImage" alt="" style="width: 30px; height: 30px" />
                        </el-popover>
                      </template>
                    </el-table-column>
                    <el-table-column prop="productName" label="商品名称" align="center" />
                    <el-table-column prop="reportText" label="报备事由" align="center" />
                    <el-table-column prop="status" label="审核状态" align="center" width="100">
                      <template slot-scope="{ row }">
                        <el-tag v-if="row.status === 1" type="warning" size="small">待审核</el-tag>
                        <el-tag v-else-if="row.status === 2" type="success" size="small">已审核</el-tag>
                        <el-tag v-else type="danger" size="small">审核未通过</el-tag>
                      </template>
                    </el-table-column>
                    <el-table-column prop="auditName" label="审核人" align="center" width="100">
                      <template slot-scope="{ row }">
                        {{ row.auditName ? row.auditName : '---' }}
                      </template>
                    </el-table-column>
                    <el-table-column prop="auditTime" label="审核时间" align="center">
                      <template slot-scope="{ row }">
                        {{ row.auditTime ? row.auditTime : '---' }}
                      </template>
                    </el-table-column>
                    <el-table-column prop="auditText" label="备注" align="center">
                      <template slot-scope="{ row }">
                        {{ row.auditText ? row.auditText : '---' }}
                      </template>
                    </el-table-column>
                  </el-table>
                </el-col>
              </el-row>
            </template>
            <el-row :gutter="24" class="box-row">
              <el-col :span="6">
                <b>沟通情况：</b>
                <el-tag v-if="item.communicationSituation === 1" type="danger" size="small"> 联系不上 </el-tag>
                <el-tag v-else type="success" size="small">
                  已沟通
                  <template v-if="item.communicationMethods === '1'"> (电话) </template>
                  <template v-if="item.communicationMethods === '2'"> (微信) </template>
                  <template v-if="item.communicationMethods === '1,2' || item.communicationMethods === '2,1'">
                    (电话，微信)
                  </template>
                </el-tag>
              </el-col>
              <el-col v-if="item.customerSource !== null" :span="6">
                <b>客户来源：</b>
                <el-tag type="success" size="small">
                  {{ item.customerSource | sourceActionsFilters }}
                </el-tag>
              </el-col>
              <el-col v-if="item.customerGender !== null" :span="6">
                <b>客户性别：</b>
                <el-tag v-if="item.customerGender === 0" type="success" size="small"> 男 </el-tag>
                <el-tag v-if="item.customerGender === 1" type="success" size="small"> 女 </el-tag>
              </el-col>
            </el-row>
            <el-row :gutter="24" class="box-row">
              <el-col v-if="item.customerAge" :span="6">
                <b>客户年龄：</b>
                <el-tag type="success" size="small"> {{ item.customerAge }} </el-tag>
              </el-col>
              <el-col :span="6">
                <b>加群情况：</b>
                <el-tag v-if="item.groupAddition === 0" type="success" size="small"> 已加群 </el-tag>
                <el-tag v-else type="danger" size="small"> 未加群 </el-tag>
              </el-col>
              <el-col v-if="item.consultType" :span="12">
                <b>咨询类别：</b>
                <el-tag
                  v-for="(consultType, consultTypeIndex) in item.consultType.split(',')"
                  :key="consultTypeIndex"
                  style="margin: 0 1px"
                  type="info"
                  size="small"
                  effect="dark"
                >
                  {{ consultType }}
                </el-tag>
              </el-col>
            </el-row>
            <el-row :gutter="24" class="box-row">
              <el-col v-if="item.satisfied" :span="6">
                <b>意向程度：</b>
                <el-tag type="success" size="small"> {{ (item.satisfied * 1) | intenActionsFilters }} </el-tag>
              </el-col>
              <el-col v-if="item.pinceSensitve" :span="6">
                <b>价格敏感度：</b>
                <el-tag type="success" size="small"> {{ (item.pinceSensitve * 1) | pinceFilters }} </el-tag>
              </el-col>
              <el-col v-if="item.followup" :span="6">
                <b>跟进状态：</b>
                <el-tag type="success" size="small"> {{ (item.followup * 1) | followupFilters }} </el-tag>
              </el-col>
            </el-row>
            <el-row v-if="item.remarks" :gutter="24" class="box-row">
              <el-col :span="24">
                <b>标签词：</b>
                <el-tag
                  v-for="(remarks, remarksIndex) in item.remarks.split(',')"
                  :key="remarksIndex"
                  style="margin: 0 1px"
                  type="success"
                  size="small"
                  effect="dark"
                >
                  {{ remarks }}
                </el-tag>
              </el-col>
            </el-row>
            <el-row v-if="item.extra" :gutter="24" class="box-row">
              <el-col :span="24">
                <b>额外说明：</b>
                {{ item.extra }}
              </el-col>
            </el-row>
            <el-row v-if="item.imageList.length > 0" :gutter="24" class="box-row">
              <el-col :span="24">
                <b>图片：</b>
              </el-col>
              <el-col :span="24">
                <div
                  v-for="(image, imageIndex) in item.imageList"
                  :key="imageIndex"
                  class="item-image"
                  style="width: 100px; height: 100px; margin: 5px; float: left"
                >
                  <el-popover placement="top-start" title="" width="180" trigger="hover">
                    <img :src="image" alt="" style="width: 150px; height: 150px" />
                    <img slot="reference" :src="image" alt="" style="width: 100px; height: 100px" />
                  </el-popover>
                </div>
              </el-col>
            </el-row>
            <el-row v-if="item.fileList.length > 0" :gutter="24" class="box-row">
              <el-col :span="24">
                <b>文件：</b>
              </el-col>
              <el-col :span="24">
                <div v-for="(file, fileIndex) in item.fileList" :key="fileIndex" class="item-file">
                  <el-tag type="warning" size="small"> {{ file.fileName }} </el-tag>
                  <el-button type="primary" size="mini" style="margin: 5px 10px" @click="handlePreview(file)">
                    预览
                  </el-button>
                  <el-button type="primary" size="mini" style="margin: 5px 10px" @click="handleDownload(file)">
                    下载
                  </el-button>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </template>
    </div>
    <!-- 页码 -->
    <pagination
      :total="total"
      :page-sizes="[20]"
      :page-size="20"
      :page.sync="listQuery.pageNum"
      :limit.sync="listQuery.pageSize"
      @pagination="getRemarksRegistList"
    />
  </div>
</template>

<script>
import { downloadWithUrl } from '@/utils'
import openWindow from '@/utils/open-window'
import { getClassName, getServiceList, getRemarksRegistList } from '@/api/user/consult/consult'
// import DatePicker from './components/datePicker'
import pickerOptions from '@/utils/time-picker.js'

export default {
  name: 'ConsultList',
  components: {
    // DatePicker
  },
  filters: {
    followupFilters(value) {
      // 跟进状态
      const map = {
        1: '跟进中',
        2: '跟进完成',
        3: '已放弃'
      }
      return map[value]
    },
    pinceFilters(value) {
      // 价格敏感度
      const map = {
        1: '敏感',
        2: '适中',
        3: '不敏感',
        4: '不明确'
      }
      return map[value]
    },
    intenActionsFilters(value) {
      // 意向
      const map = {
        1: '意向强烈',
        2: '意向一般',
        3: '意向平淡',
        4: '随便看看'
      }
      return map[value]
    },
    sourceActionsFilters(value) {
      // 客户来源
      console.log('value', value)
      const map = {
        0: '搜素引擎',
        1: '小程序',
        2: '公众号',
        3: '小红书',
        4: '微博',
        5: '搜狐',
        7: '抖音',
        8: '视频号',
        9: '朋友推荐',
        6: '其他'
      }
      return map[value]
    }
  },
  data() {
    return {
      time: '',
      pickerOptions,
      isLoading: true,
      listQuery: {
        remarks: '', // 标签词
        consult: '', // 咨询类别
        clubName: '', // 机构名称
        newDeal: '', // 新分配机构状态 0 全部 1 是  2否
        isRegister: '', // 是否注册 0 全部 1 未注册 2已注册
        startTime: '', // 开始时间
        endTime: '', // 结束时间
        serviceProviderId: '', // 协销Id
        pageNum: 1,
        pageSize: 20
      },
      freezeTimeText: '',
      list: [],
      total: 0,
      categoryList: [],
      totalInfo: {},
      sellerTabsIndex: 0,
      sellerTabsInfo: {},
      serviceList: []
    }
  },
  computed: {},
  created() {
    this.initDate()
  },
  mounted() {},
  methods: {
    initDate() {
      // 初始化获取当前年月
      this.getClassName()
      this.getServiceList(this.listQuery.startTime, this.listQuery.endTime)
      this.getList()
    },
    // 选择时间
    handleDatePick() {
      if (this.time && this.time.length > 0) {
        this.listQuery.startTime = this.time[0]
        this.listQuery.endTime = this.time[1]
      } else {
        this.listQuery.startTime = ''
        this.listQuery.endTime = ''
      }
      this.getServiceList(this.listQuery.startTime, this.listQuery.endTime)
      this.getList()
    },
    // 获取行为记录列表
    getList() {
      this.listQuery.pageNum = 1
      this.getRemarksRegistList()
    },
    // 获取咨询类别选项
    async getClassName() {
      try {
        const res = await getClassName()
        this.categoryList = res.data
      } catch (error) {
        console.log(error)
      }
    },
    // 获取当天协销咨询记录信息
    async getServiceList(startTime, endTime) {
      try {
        this.sellerTabsIndex = 0
        const res = await getServiceList({ startTime: startTime, endTime: endTime })
        this.serviceList = res.data.serviceList
        this.totalInfo = { ...this.totalInfo, ...res.data }
        this.sellerTabsInfo = this.serviceList[0]
        this.listQuery.serviceProviderId = this.serviceList[0].serviceProviderId
        this.getRemarksRegistList()
      } catch (error) {
        console.log(error)
      }
    },
    // 获取咨询记录
    async getRemarksRegistList() {
      try {
        this.isLoading = true
        if (this.time && this.time.length > 0) {
          this.listQuery.startTime = this.time[0]
          this.listQuery.endTime = this.time[1]
        } else {
          this.listQuery.startTime = ''
          this.listQuery.endTime = ''
        }
        const res = await getRemarksRegistList(this.listQuery)
        this.list = res.data.results
        this.total = res.data.totalRecord
        this.isLoading = false
      } catch (error) {
        console.log(error)
      }
    },
    // 预览文件
    handlePreview(file) {
      const fileName = file.fileName
      let url = `https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent(file.fileUrl)}`
      if (fileName.endsWith('.pdf') || fileName.endsWith('.doc')) {
        url = file.fileUrl
      }
      openWindow(url, `${file.fileName}`, 800, 460)
    },
    // 下载文件
    async handleDownload(file) {
      const params = `fileName=${encodeURIComponent(file.fileName)}&ossName=${encodeURIComponent(file.ossName)}`
      const url = process.env.VUE_APP_BASE_API + `/user/remarks/remarks/download?${params}`
      downloadWithUrl(url, file.fileName)
    },
    // 机构跳转
    handleClubHrefLink(row) {
      return (
        process.env.VUE_APP_ADMIN_URL +
        `/a/user/jumpLink/toOldAdmin?type=1&clubId=${row.clubId}&clubName=${row.corporateName}`
      )
    },
    // 查看详情
    handleRecordDetail(row) {
      this.$router.push({
        path: '/user/detail-list',
        query: { ip: row.ip, accessDate: row.accessDate, userId: row.userId }
      })
    },
    formattedDateFn(dateString) {
      // 创建一个Date对象，将字符串解析为日期和时间
      const date = new Date(dateString)
      // 使用toISOString()方法将Date对象转换为ISO格式的字符串
      const isoString = date.toISOString()
      // 从ISO格式字符串中提取日期部分
      const dateOnly = isoString.substring(0, isoString.indexOf('T'))
      // 将日期格式化为"YYYY-MM-DD"格式
      const formattedDate = dateOnly.replace(/-/g, '-')
      return formattedDate
    },
    handleNextMonth(value) {
      // 加日期
      this.listQuery.todayTime = value
      this.getServiceList(this.listQuery.todayTime)
      this.getList()
      console.log('todayTime', this.listQuery.todayTime)
    },
    handlePrevMonth(value) {
      // 减日期
      this.listQuery.todayTime = value
      this.getServiceList(this.listQuery.todayTime)
      this.getList()
      console.log('todayTime', this.listQuery.todayTime)
    },
    handeleTabsClick(item, index) {
      // 切换协销
      console.log('item', item)
      this.sellerTabsIndex = index
      this.sellerTabsInfo = item
      this.listQuery.serviceProviderId = item.serviceProviderId
      this.listQuery.pageNum = 1
      this.getList()
    }
  }
}
</script>

<style>
.filter-container {
  padding: 10px;
  background: #f7f7f7;
  margin: 10px 0;
}
.span-labels {
  font-size: 14px;
  color: #666666;
  margin-right: 50px;
}
.list-loading {
  width: 100%;
  height: 300px;
  padding: 40px;
  line-height: 220px;
  box-sizing: border-box;
  position: relative;
  text-align: center;
  background: #ffffff;
}
.list-loading .el-icon-loading {
  font-size: 40px;
  color: #409eff;
}
.list-main-empty {
  width: 100%;
  height: 300px;
  padding: 40px;
  line-height: 220px;
  box-sizing: border-box;
  position: relative;
  text-align: center;
}
.list-main {
  width: 100%;
  height: auto;
  padding: 24px 16px 24px 160px;
  box-sizing: border-box;
  position: relative;
}
.list-main::before {
  content: '';
  height: 100%;
  border-left: 2px dashed #e1e1e1;
  position: absolute;
  left: 120px;
  top: 0;
}
.list-main-item {
  width: 94%;
  min-height: 200px;
  box-sizing: border-box;
  padding: 24px 35px;
  background: #e1e1e1;
  background-size: cover;
  position: relative;
  border-radius: 16px;
}
.list-main-item::before {
  content: '';
  width: 20px;
  height: 20px;
  background: #999999;
  border-radius: 50%;
  background-size: cover;
  position: absolute;
  top: 30px;
  left: -49px;
}
.list-main-item::after {
  content: '';
  width: 0;
  height: 0;
  border-width: 30px;
  border-style: solid;
  border-color: transparent #e1e1e1 transparent transparent;
  position: absolute;
  left: -55px;
  top: 10px;
}
.list-main-item.consult-list .list-time {
  display: inline-block;
  font-size: 20px;
  color: #333333;
  position: absolute;
  top: 7px;
  left: -164px;
  font-weight: bold;
  width: 120px;
  text-align: center;
}
.box-row {
  margin-bottom: 14px;
}
</style>