NewZkgj/pages/center/consumer/index.vue

<template>
  <view class="box">
    <view class="top-search">
      <view class="search-box">
        <view class="search" @click="goSearch">
          <view class="search-img">
            <image
              class="search-img1"
              src="../../../static/images/search.png"
              mode=""
            ></image>
          </view>
          <view class="search-text">输入客户姓名/手机号</view>
        </view>
      </view>
      <image
        class="filter-icon"
        @click="screenShow = true"
        src="https://static.quhouse.com/f4feade4a19d413085b591612179457f.png"
        mode=""
      />
    </view>
    <!-- 选择器 -->
    <view class="boxtittab" style="border: none">
      <view class="tabbox" @click="soltishow = true">
        {{ sortFilter }}
        <u-icon
          name="arrow-down"
          size="24"
          style="padding-left: 12rpx"
        ></u-icon>
      </view>
      <view class="tabbox" @click="timeshow = true">
        {{ arriveFilter }}
        <u-icon
          name="arrow-down"
          size="24"
          style="padding-left: 12rpx"
        ></u-icon>
      </view>
      <view class="tabbox" @click="selectshow = true">
        {{ receptionDuration }}
        <u-icon
          name="arrow-down"
          size="24"
          style="padding-left: 12rpx"
        ></u-icon>
      </view>
      <view class="tabbox" @click="huaxiangShow = true">
        画像标签<u-icon
          name="arrow-down"
          size="24"
          style="padding-left: 12rpx"
        ></u-icon>
      </view>
    </view>
    <view class="count" v-if="recordList.length > 0">
      筛选结果：<text>{{ totalRecords }} </text>条
    </view>
    <view class="content">
      <view
        v-if="recordList.length == 0"
        style="width: 100%; height: 100%; display: flex; align-items: center"
      >
        <view style="width: 100%; padding-top: 200rpx; background: #ffffff">
          <view style="width: 100%; text-align: center">
            <image
              style="width: 220rpx; height: 200rpx"
              src="https://static.quhouse.com/zhikong_xcx_img/nodatalist.png"
              mode=""
            ></image>
          </view>
          <view
            style="
              text-align: center;
              width: 100%;
              margin-top: 20rpx;
              color: #999999;
            "
            >暂无数据</view
          >
        </view>
      </view>
      <view
        v-if="recordList.length != 0"
        class="content-tips"
        v-for="(item, index) in recordList"
        :key="index"
        @click="gotoDetail(item.id)"
      >
        <view class="content-first">
          <view class="left">
            <view v-if="item.level.length == 0"></view>
            <view class="img" v-else-if="item.level == 1">A</view>
            <view class="img" v-else-if="item.level == 2">B</view>
            <view class="img" v-else-if="item.level == 3">C</view>
            <view class="img" v-else-if="item.level == 4">D</view>
            <view class="test">{{ item.name }}</view>
          </view>
          <view class="right">
            <view class="test"
              >销讲执行：<text class="blue"
                >{{ item.fraction || 0 }}%</text
              ></view
            >
          </view>
        </view>
        <view class="content-sec">
          <view class="content-sec-lab">
            <view class="content-sec-lab1"
              >手机号码：{{ item.phone || "--" }}</view
            >
            <view class="content-sec-lab1" style="width: 44%"
              >到访次数：{{ item.visitRecord || "--" }}次/{{
                item.mm || 0
              }}min</view
            >
          </view>
          <view class="content-sec-lab">
            <view class="content-sec-lab1" 
              >需求挖掘：{{ item.wordFraction || 0 }}%</view
            >
            <view class="content-sec-lab1" style="width: 44%"
              >画像标签：<text style="font-weight: 600">{{
                item.demand.cusSemanticWordsList.length || 0
              }}</text></view
            >
          </view>
          <!-- <view class="content-sec-lab" style="line-height: 46rpx;">
						客户标签：
						<text v-if="item.demand.cusSemanticWordsList==null">暂无</text>
						<view v-else class="content-sec-tips" v-for="(che,ind) in item.demand.cusSemanticWordsList"
							:key='ind'>{{che.name}}</view>
					</view> -->
          <view class="content-sec-lab">
            <view class="content-sec-lab1" 
              >所属顾问：{{ item.agentName || "--" }}</view
            >
            <view class="content-sec-lab1" style="width: 44%"
              >客户阶段：{{ item.agentName || "--" }}</view
            >
          </view>
          <view class="content-sec-lab">
            <view class="content-sec-lab1"
              >上次到访：{{ item.createTime || "--" }}</view
            >
          </view>
        </view>
        <view class="content-last" v-if="item.isshow">
          <view class="content-last-tab">
            <!-- <image class="icon" src="https://static.quhouse.com/5daebdec0aad4f63a62d3720437034bc.png" mode="" />
						添加提醒 -->
          </view>
          <view class="content-last-tab">
            <!-- <image class="icon" src="https://static.quhouse.com/b867df5efc72480f8c1f3bc9399c7d6c.png" mode="" />
						拨打电话 -->
          </view>
          <view class="content-last-tab" @click.stop="gotoFollowUp(item.id)">
            <image
              class="icon"
              src="https://static.quhouse.com/3730fc3a185c4d65ae6a1821601038ab.png"
              mode=""
            />
            写跟进</view
          >
        </view>
      </view>
    </view>
    <!-- 更多筛选 -->
    <u-popup v-model="screenShow" mode="top" height="850">
      <view class="screen">
				<scroll-view scroll-y="true" style="height: 700rpx;">
					 <!-- 咨询业务 -->
					<!-- <view class="screen-record">
						<view class="screen-record-text" @click="zixunArrow = !zixunArrow">
							咨询业务<image
								v-if="zixunArrow"
								class="arrow"
								src="https://static.quhouse.com/6cf38a2b82694392a7ab6eea24ce76b1.png"
								mode=""
							/>
							<image
								v-else
								class="arrow"
								src="https://static.quhouse.com/17d69984ec7c4830b43f712016f06807.png"
								mode=""
							/>
						</view>
						<view class="screen-record-tab" v-if="zixunArrow">
							<block v-for="(item, index) in zixunList" :key="index">
								<view
									class="screen-record-item"
									:class="[
										item.isShow ? 'screen-record-chose' : 'screen-record-nochose',
									]"
									@click="choice(item)"
								>
									{{ item.label }}
								</view>
							</block>
						</view>
					</view> -->
					<!-- 接待时长 -->
					<view class="screen-record">
						<view class="screen-record-text" @click="jiedaiArrow = !jiedaiArrow">
							接待时长<image
								v-if="jiedaiArrow"
								class="arrow"
								src="https://static.quhouse.com/6cf38a2b82694392a7ab6eea24ce76b1.png"
								mode=""
							/>
							<image
								v-else
								class="arrow"
								src="https://static.quhouse.com/17d69984ec7c4830b43f712016f06807.png"
								mode=""
							/>
						</view>
						<view class="screen-record-tab" v-if="jiedaiArrow">
							<block v-for="(item, index) in jiedaiList" :key="index">
								<view
									class="screen-record-item"
									:class="[
										item.isShow ? 'screen-record-chose' : 'screen-record-nochose',
									]"
									@click="choice(item)"
								>
									{{ item.label }}
								</view>
							</block>
						</view>
					</view>
					<!-- 客户等级 -->
					<view class="screen-record">
						<view class="screen-record-text" @click="levelArrow = !levelArrow">
							客户等级<image
								v-if="levelArrow"
								class="arrow"
								src="https://static.quhouse.com/6cf38a2b82694392a7ab6eea24ce76b1.png"
								mode=""
							/>
							<image
								v-else
								class="arrow"
								src="https://static.quhouse.com/17d69984ec7c4830b43f712016f06807.png"
								mode=""
							/>
						</view>
						<view class="screen-record-tab" v-if="levelArrow">
							<block v-for="(item, index) in levelList" :key="index">
								<view
									class="screen-record-item"
									:class="[
										item.isShow ? 'screen-record-chose' : 'screen-record-nochose',
									]"
									@click="choice(item)"
								>
									{{ item.label }}
								</view>
							</block>
						</view>
					</view>
					<!-- 客户来源 -->
					<view class="screen-record">
						<view class="screen-record-text" @click="sourceArrow = !sourceArrow">
							客户来源<image
								v-if="sourceArrow"
								class="arrow"
								src="https://static.quhouse.com/6cf38a2b82694392a7ab6eea24ce76b1.png"
								mode=""
							/>
							<image
								v-else
								class="arrow"
								src="https://static.quhouse.com/17d69984ec7c4830b43f712016f06807.png"
								mode=""
							/>
						</view>
						<view class="screen-record-tab" v-if="sourceArrow">
							<block v-for="(item, index) in sourceList" :key="index">
								<view
									class="screen-record-item"
									:class="[
										item.isShow ? 'screen-record-chose' : 'screen-record-nochose',
									]"
									@click="choice(item)"
								>
									{{ item.label }}
								</view>
							</block>
						</view>
					</view>
					<!-- 客户阶段 -->
					<view class="screen-record">
						<view
							class="screen-record-text"
							@click="jieduanArrow = !jieduanArrow"
						>
							客户阶段<image
								v-if="jieduanArrow"
								class="arrow"
								src="https://static.quhouse.com/6cf38a2b82694392a7ab6eea24ce76b1.png"
								mode=""
							/>
							<image
								v-else
								class="arrow"
								src="https://static.quhouse.com/17d69984ec7c4830b43f712016f06807.png"
								mode=""
							/>
						</view>
						<view class="screen-record-tab" v-if="jieduanArrow">
							<block v-for="(item, index) in stageList" :key="index">
								<view
									class="screen-record-item"
									:class="[
										item.isShow ? 'screen-record-chose' : 'screen-record-nochose',
									]"
									@click="choice(item)"
								>
									{{ item.label }}
								</view>
							</block>
						</view>
					</view>
					<!-- 需求挖掘率 -->
					<view class="screen-record">
						<view class="screen-record-text" @click="wajueArrow = !wajueArrow">
							需求挖掘率<image
								v-if="wajueArrow"
								class="arrow"
								src="https://static.quhouse.com/6cf38a2b82694392a7ab6eea24ce76b1.png"
								mode=""
							/>
							<image
								v-else
								class="arrow"
								src="https://static.quhouse.com/17d69984ec7c4830b43f712016f06807.png"
								mode=""
							/>
						</view>
						<view class="screen-record-tab" v-if="wajueArrow">
							<block v-for="(item, index) in wajueList" :key="index">
								<view
									class="screen-record-item"
									:class="[
										item.isShow ? 'screen-record-chose' : 'screen-record-nochose',
									]"
									@click="choice(item)"
								>
									{{ item.label }}
								</view>
							</block>
						</view>
					</view>
					<!-- 销讲执行率 -->
					<view class="screen-record">
						<view
							class="screen-record-text"
							@click="xiaojiangArrow = !xiaojiangArrow"
						>
							销讲执行率
							<image
								v-if="xiaojiangArrow"
								class="arrow"
								src="https://static.quhouse.com/6cf38a2b82694392a7ab6eea24ce76b1.png"
								mode=""
							/>
							<image
								v-else
								class="arrow"
								src="https://static.quhouse.com/17d69984ec7c4830b43f712016f06807.png"
								mode=""
							/>
						</view>
						<view class="screen-record-tab" v-if="xiaojiangArrow">
							<block v-for="(item, index) in xiaojiangList" :key="index">
								<view
									class="screen-record-item"
									:class="[
										item.isShow ? 'screen-record-chose' : 'screen-record-nochose',
									]"
									@click="choice(item)"
								>
									{{ item.label }}
								</view>
							</block>
						</view>
					</view>
					<!-- 到访次数 -->
					<view class="screen-record">
						<view class="screen-record-text" @click="visitArrow = !visitArrow">
							到访次数<image
								v-if="visitArrow"
								class="arrow"
								src="https://static.quhouse.com/6cf38a2b82694392a7ab6eea24ce76b1.png"
								mode=""
							/>
							<image
								v-else
								class="arrow"
								src="https://static.quhouse.com/17d69984ec7c4830b43f712016f06807.png"
								mode=""
							/>
						</view>
						<view class="screen-record-tab" v-if="visitArrow">
							<block v-for="(item, index) in visitList" :key="index">
								<view
									class="screen-record-item"
									:class="[
										item.isShow ? 'screen-record-chose' : 'screen-record-nochose',
									]"
									@click="choice(item)"
								>
									{{ item.label }}
								</view>
							</block>
						</view>
					</view>
				</scroll-view>
       
        <view class="screen-foot">
          <view class="screen-foot-reset" @click="reset"> 重置 </view>
          <view class="screen-foot-sure" @click="screensure"> 确定 </view>
        </view>
      </view>
    </u-popup>
    <!-- 选择顾问的选择框 -->
    <u-select
      v-model="selectshow"
      :list="freeList"
      @confirm="actionSelectCallback"
    ></u-select>
    <!-- 客户阶段 -->
    <u-select
      v-model="selectPhaseShow"
      :list="phaseList"
      @confirm="selectPhase"
    ></u-select>
    <u-calendar
      v-model="totalTimeShow"
      mode="range"
      @change="totalTimeChange"
    ></u-calendar>
    <!-- 到访时间 -->
    <u-popup v-model="timeshow" mode="bottom">
      <view
        class="timeview"
        :style="{ color: activeTotal == 5 ? '#2B6EFF' : '#333333' }"
        @click="tabtimetap(5, '接待时间')"
      >
        全部</view
      >
      <view
        class="timeview"
        :style="{ color: activeTotal == 0 ? '#2B6EFF' : '#333333' }"
        @click="tabtimetap(0, '今天')"
      >
        今天</view
      >
      <view
        class="timeview"
        :style="{ color: activeTotal == 1 ? '#2B6EFF' : '#333333' }"
        @click="tabtimetap(1, '昨天')"
      >
        昨天</view
      >
      <view
        class="timeview"
        :style="{ color: activeTotal == 2 ? '#2B6EFF' : '#333333' }"
        @click="tabtimetap(2, '近7天')"
      >
        近7天</view
      >
      <view
        class="timeview"
        :style="{ color: activeTotal == 6 ? '#2B6EFF' : '#333333' }"
        @click="tabtimetap(6, '近30天')"
      >
        近30天</view
      >
      <view
        class="timeview"
        :style="{ color: activeTotal == 4 ? '#2B6EFF' : '#333333' }"
        @click="tabtimetap(4)"
      >
        自定义</view
      >
    </u-popup>
    <!-- 画像标签 -->
    <u-popup v-model="huaxiangShow" mode="top" height="850">
      <view class="screen">
				<scroll-view scroll-y="true" style="height: 700rpx;">
					<view class="screen-record" v-if="item.children.length" v-for="(item,index) in huaxiangList" :key="index">
						<view class="screen-record-text" @click="choice(item)">
							{{item.name}}<image
								v-if="item.isShow"
								class="arrow"
								src="https://static.quhouse.com/6cf38a2b82694392a7ab6eea24ce76b1.png"
								mode=""
							/>
							<image
								v-else
								class="arrow"
								src="https://static.quhouse.com/17d69984ec7c4830b43f712016f06807.png"
								mode=""
							/>
						</view>
						<view class="screen-record-tab" v-if="item.isShow">
							<block v-for="(subitem, ind) in item.children" :key="ind">
								<view
									class="screen-record-item"
									:class="[
										subitem.isShow ? 'screen-record-chose' : 'screen-record-nochose',
									]"
									@click="choice(subitem)"
								>
									{{ subitem.name }}
								</view>
							</block>
						</view>
					</view>
				</scroll-view>
        <view class="screen-foot">
          <view class="screen-foot-reset" @click="resetHuaXiang"> 重置 </view>
          <view class="screen-foot-sure" @click="screensure"> 确定 </view>
        </view>
      </view>
    </u-popup>
<!-- 排序 -->
    <u-select
      v-model="soltishow"
      :list="orderBylist"
      @confirm="selectCallback2"
    ></u-select>

    <!-- 加载组件  -->
    <loading v-model="LOADING"></loading>
  </view>
</template>

<script>
import loading from "@/components/loading/index.vue";
const config = require("@/config");
export default {
  components: {
    loading,
  },
  data() {
    return {
      huaxiangShow: false,
      wajueArrow: false,
      jieduanArrow: false,
      sourceArrow: false,
      levelArrow: false,
      zixunArrow: true,
      jiedaiArrow: false,
      luyinArrow: false,
      visitArrow: false,
      xiaojiangArrow: false,
      huaxiangList: [],
      orderBylist: [
        {
          label: "创建时间倒序",
          value: "1",
        },
        {
          label: "创建时间正序",
          value: "2",
        },
        {
          label: "接待时间倒序",
          value: "3",
        },
        {
          label: "接待时间正序",
          value: "4",
        },
        {
          label: "执行率倒序",
          value: "5",
        },
        {
          label: "执行率正序",
          value: "6",
        },
        {
          label: "接访次数正序",
          value: "7",
        },
        {
          label: "接访次数倒序",
          value: "8",
        },
        {
          label: "需求挖掘率正序",
          value: "9",
        },
        {
          label: "需求挖掘率倒序",
          value: "10",
        },
      ],
      zixunList: [
        {
          label: "一期住宅",
          value: 1,
          isShow: false,
        },
        {
          label: "二期住宅",
          value: 2,
          isShow: false,
        },
        {
          label: "三期住宅",
          value: 3,
          isShow: false,
        },
        {
          label: "商铺",
          value: 4,
          isShow: false,
        },
      ],
      jiedaiList: [
        {
          label: "0~15min",
          value: 1,
          isShow: false,
        },
        {
          label: "15~30min",
          value: 2,
          isShow: false,
        },
        {
          label: "30~60min",
          value: 3,
          isShow: false,
        },
        {
          label: "60~90min",
          value: 4,
          isShow: false,
        },
        {
          label: "90min以上",
          value: 5,
          isShow: false,
        },
      ],
      wajueList: [
        {
          label: "30%以下",
          value: 1,
          isShow: false,
        },
        {
          label: "30%~50%",
          value: 2,
          isShow: false,
        },
        {
          label: "50%~70%",
          value: 3,
          isShow: false,
        },
        {
          label: "70%以上",
          value: 4,
          isShow: false,
        },
      ],
      xiaojiangList: [
        {
          label: "30%以下",
          value: 1,
          isShow: false,
        },
        {
          label: "30%~50%",
          value: 2,
          isShow: false,
        },
        {
          label: "50%~70%",
          value: 3,
          isShow: false,
        },
        {
          label: "70%以上",
          value: 4,
          isShow: false,
        },
      ],
      screenShow: false,
      selectshow: false,
      selectPhaseShow: false,//客户阶段
      buildingID: "",
      screen: {
        staTime: "",
        endTime: "",
        orderBy: "",// 排序
        agentId: "",//顾问
        sourceIds: [],// 客户来源
        level: [],// 客户等级
        visitRecord: [],// 到访次数
        // zixunVal: [],// 咨询业务
        wajueVal: [],// 需求挖掘
        xiaojiangVal:[],//销讲执行率
        jiedaiVal: [],// 接待时长
        validInvalid: null,// 录音标识
        clientStage: [],// 客户阶段 clientStage
      },
      stageList: [
        {
          label: "未知",
          value: 1,
          isShow: false,
        },
        {
          label: "到访",
          value: 2,
          isShow: false,
        },
        {
          label: "意向",
          value: 3,
          isShow: false,
        },
        {
          label: "定金",
          value: 4,
          isShow: false,
        },
        {
          label: "成交",
          value: 5,
          isShow: false,
        },
      ],//客户阶段
      recordList: [],
      nextPage: 1,
      totalRecord: "",
      freeList: [],
      userInfo: {},
      phaseList: [],//客户阶段
      isnorefresh: "",
      activeTotal: 5,
      totalTimeShow: false,
      timeshow: false,
      soltishow: false,
      totalRecords: "",
      visitList: [
        {
          label: "首次到访",
          value: 1,
          isShow: false,
        },
        {
          label: "2次到访",
          value: 2,
          isShow: false,
        },
        {
          label: "3次到访",
          value: 3,
          isShow: false,
        },
        {
          label: "3次以上",
          value: 4,
          isShow: false,
        },
      ],
      levelList: [
        {
          label: "A",
          value: 1,
          isShow: false,
        },
        {
          label: "B",
          value: 2,
          isShow: false,
        },
        {
          label: "C",
          value: 3,
          isShow: false,
        },
        {
          label: "D",
          value: 4,
          isShow: false,
        },
      ],
      sourceList: [],//客户来源
      isRefresh: false,
      // 筛选文字展示
      sortFilter: "排序",
      arriveFilter: "到访时间",
      receptionDuration: "所属顾问",
    };
  },
  onLoad(options) {
    this.LOADING = true;
    this.isnorefresh = options.refresh;
  },
  onShow() {
    if (this.isnorefresh == "refresh") {
      this.buildingID = uni.getStorageSync("buildingID").id;
      this.nextPage = 1;
      this.recordList = [];
      this.isRefresh = false;
      this.getMyCustom();
      this.getFreeList();
      this.getWordMiningList();
      this.getCustomPhase();
      this.getFromSource();
      this.isnorefresh = "";
    }
  },
  onPullDownRefresh() {
    this.resetFilter();
    this.isRefresh = true;
    this.nextPage = 1;
    this.getMyCustom();
    setTimeout(() => {
      uni.stopPullDownRefresh();
    }, 1000);
  },
  onReachBottom() {
    if (this.totalRecord == this.nextPage) {
      uni.showToast({
        icon: "none",
        title: "到底了",
        duration: 2000,
      });
      return;
    } else {
      this.nextPage += 1;
      this.isRefresh = false;
      this.getMyCustom();
    }
  },
  
  methods: {
    // 获取客户来源
    getFromSource() {
      this.$u.get(config.service.sourceList, {
        houseId: this.buildingID
      })
      .then((res) => {
        console.log(res)
        if(res.length){
          res.forEach((item) => {
            item.label = item.sourceName
            item.value = item.id
            item.isShow = false
          })
        }
        this.sourceList = res
      })
    },
    //  过滤
    resetFilter() {
      this.sortFilter = "排序";
      this.receptionDuration = "所属顾问";
      this.arriveFilter = "到访时间";
      this.screen.orderBy = null;
      this.screen.staTime = "";
      this.screen.endTime = "";
      this.nextPage = 1;
      this.activeTotal = 5;
      this.recordList = [];
    },
    choice(item) {
      item.isShow = !item.isShow;
    },
    //选择标签
    selectCallback2(e) {
      this.sortFilter = e[0].label;
      this.orderBy = e[0].value;
      this.nextPage = 1;
      this.recordList = [];
      this.isRefresh = false;
      this.getMyCustom();
    },
    //选择录音时长
    timetap(index, text) {
      if (text) this.receptionDuration = text;
      this.nextPage = 1;
      this.recordList = [];
      this.isRefresh = false;
      this.getMyCustom();
    },
    //时间选择
    tabtimetap(index, text) {
      this.timeshow = false;
      if (text) this.arriveFilter = text;
      if (index == 4) {
        this.totalTimeShow = true;
      } else {
        this.activeTotal = index;
        this.screen.staTime = "";
        this.screen.endTime = "";
        this.nextPage = 1;
        this.recordList = [];
        this.isRefresh = false;
        this.getMyCustom();
      }
    },
    //自定义时间
    totalTimeChange(e) {
      this.screen.staTime = e.startDate;
      this.screen.endTime = e.endDate;
      this.activeTotal = 4;
      this.nextPage = 1;
      this.recordList = [];
      this.isRefresh = false;
      this.getMyCustom();
    },
    // 字典表接口
    getListByType() {
      this.$u
        .get("/matchKeywords/findPersonalMatchData", {
          customerId: this.customerId,
        })
        .then((res) => {
          // console.log(res)
          res.forEach((item1) => {
            item1.children.map((item) => {
              if (item.isInterval == 0) {
                item.label =
                  item.name + item.unit + "-" + item.endName + item.unit;
              } else {
                item.label = item.name;
              }
              item.value = item.id;
            });
          });
          // console.log(res)
          this.allList = res;
        });
    },
    // 客户详情
    gotoDetail(id) {
      uni.navigateTo({
        url: `/pages/center/consumer/consumerDetail?id=${id}`,
      });
    },
    getMyCustom() {
      let dateType = 0;
      if (this.activeTotal == 5||this.activeTotal == 4) {
        dateType = null;
      } else {
        dateType = this.activeTotal;
      }
      // 到访次数
				this.visitList.forEach(i => {
					if(i.isShow) this.screen.visitRecord.push(i.value)
				})
				// 接待时长
				this.jiedaiList.forEach(i => {
					if(i.isShow) this.screen.jiedaiVal.push(i.value)
				})
				// 需求挖掘
				this.wajueList.forEach(i => {
					if(i.isShow) this.screen.wajueVal.push(i.value)
				})
      // 销讲执行率
				this.xiaojiangList.forEach(i => {
					if(i.isShow) this.screen.xiaojiangVal.push(i.value)
				})
        	// 客户等级
				this.levelList.forEach(i => {
					if(i.isShow) this.screen.level.push(i.value)
				})
        	//客户阶段
				this.stageList.forEach(i => {
					if(i.isShow) this.screen.clientStage.push(i.value)
				})
        	// 客户来源
				this.sourceList.forEach(i => {
					if(i.isShow) this.screen.sourceIds.push(i.value)
				})
        let keywordsIds = []
        this.huaxiangList.forEach(item => {
          if(item.children.length){
            item.children.forEach(im=>{
              if(im.isShow) keywordsIds.push(im.id)
            })
          }
        })
      var parames = {
        pageNum: this.nextPage,
        pageSize: 10,
        query: {
          projectId: this.buildingID,
          fractions: this.screen.xiaojiangVal.join(','),// 销讲执行率
          wordFractions: this.screen.wajueVal.join(','),//需求挖掘
          visitRecordNum: this.screen.visitRecord.join(','),//到访次数
          clientStages: this.screen.clientStage.join(','), // 客户阶段
          sourceIds: this.screen.sourceIds.join(','),// 客户来源
          level: this.screen.level.join(','),// 客户等级
          duractionNums: this.screen.jiedaiVal.join(','),// 接待时长
          keywordsIds: keywordsIds.length?keywordsIds.join(','):'',// 画像标签
          dateType: dateType, // 接待时间
          staTime: this.screen.staTime,
          endTime: this.screen.endTime,
          agentId: this.screen.agentId,// 顾问
          orderBy: this.screen.orderBy==0?null: this.screen.orderBy,// 排序
        },
      };
      this.userInfo = uni.getStorageSync("weapp_session_userInfo_data");
      this.$u.post("/customer/customerManagement", parames)
        .then((data) => {
          this.LOADING = false;
          if (this.screen.staTime && this.screen.endTime) {
            this.arriveFilter = `${this.screen.staTime}-${this.screen.endTime}`;
          }
          var list = data.results || [];
          list.forEach((item) => {
            if (this.userInfo.dataCode == 6) {
              item.isshow = true;
            } else {
              item.isshow = false;
            }
          });

          list.forEach((item) => {
            if (item.demand.cusSemanticWordsList != null) {
              item.demand.cusSemanticWordsList.forEach((che) => {
                if (che.isInterval == 0) {
                  che.name = che.name + che.unit + "-" + che.endName + che.unit;
                }
              });
            }
          });
          if (this.isRefresh) {
            this.recordList = list;
          } else {
            this.recordList = [...this.recordList, ...list];
          }
          this.totalRecord = data.totalPage;
          this.totalRecords = data.totalRecord;
        })
        .catch((e) => {
          this.LOADING = false;
        });
    },
    //获取画像标签
    getWordMiningList() {
      this.huaxiangList = [];
      this.$u.get("/corpus/findSelectedWordMiningTemplate", {
          houseId: this.buildingID,
          selected: 1
        })
        .then((res) => {
          // console.log(res)
          if(res.length){
            res.forEach(item=>{
              item.isShow = false;
              if(item.children.length){
                item.children.forEach(subitem=>{
                  subitem.isShow = false;
                })
              }
            })
          }
          this.huaxiangList = res;
        });
    },
    //获取顾问列表
    getFreeList() {
      this.freeList = [];
      this.$u
        .post("/cusLvStatistics/selectAllAccountIdByHouseId", {
          houseId: this.buildingID,
        })
        .then((res) => {
          this.freeList = res;
          this.freeList.forEach((item) => {
            item.label = item.name;
            item.value = item.accountId;
          });
          this.freeList.unshift({
            label: '全部',
            value: '',
          })
        });
    },
    // 获取客户阶段数据
    getCustomPhase() {
      this.phaseList = [];
      this.$u
        .post("/customer/lifeTrackDefineList", {
          houseId: this.buildingID,
        })
        .then((res) => {
          let tempArr = [];
          res.forEach((item) => {
            let tempObj = {};
            tempObj.label = item.stageName;
            tempObj.value = item.id;
            tempArr.push(tempObj);
          });
          this.phaseList = tempArr;
        });
    },
    //选择顾问
    actionSelectCallback(e) {
      this.screen.agentId = e[0].value;
      this.receptionDuration = e[0].label;
      this.nextPage = 1;
      this.recordList = [];
      this.screenShow = false;
      this.huaxiangShow = false;
      this.isRefresh = false;
      this.getMyCustom();
    },
    // 客户阶段
    selectPhase(e) {
      this.screen.clientStageName = e[0].label;
      this.screen.clientStage = e[0].value;
    },
    //重置
    reset() {
      this.screen = {
        agentId: "",
        visitRecord: [],
        record: [],
        clientStage: "",
        clientStageName: "",
      };
      this.sourceList.map((i) => {
        i.isShow = false;
      });
      this.wajueList.map((i) => {
        i.isShow = false;
      });
      this.stageList.map((i) => {
        i.isShow = false;
      });
      this.jiedaiList.map((i) => {
        i.isShow = false;
      });
      this.xiaojiangList.map((i) => {
        i.isShow = false;
      });
      this.visitList.map((i) => {
        i.isShow = false;
      });
      this.levelList.map((i) => {
        i.isShow = false;
      });
      this.nextPage = 1;
      this.recordList = [];
      this.isRefresh = false;
      this.getMyCustom();
    },
    //重置画像标签选择
    resetHuaXiang(){
      if(this.huaxiangList.length){
        this.huaxiangList.forEach(item=>{
          item.isShow = false;
          if(item.children.length){
            item.children.forEach(subitem=>{
              subitem.isShow = false;
            })
          }
        })
      }
    },
    //筛选确认
    screensure() {
      this.nextPage = 1;
      this.recordList = [];
      this.screenShow = false;
      this.huaxiangShow = false;
      this.isRefresh = false;
      this.getMyCustom();
    },
    goSearch() {
      uni.navigateTo({
        url: "/pages/center/consumer/consumerSearch",
      });
    },
    gotoFollowUp(id) {
      uni.navigateTo({
        url: `/pages/center/consumer/newFollowup/newFollowup?id=${id}`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100%;
  background: #f8f8f8;
}

.count {
  width: 100%;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border-top: 1px solid #e0e0e0;

  text {
    color: #f71616;
  }
}

.timeview {
  height: 80rpx;
  line-height: 80rpx;
  width: 100%;
  text-align: center;
  border-bottom: 1px solid #f8f8f8;
}

//时间切换的样式
.boxtittab {
  position: sticky;
  top: var(--window-top);
  z-index: 999;
  width: 100;
  height: 92rpx;
  background: #ffffff;
  display: flex;
  align-items: center;

  .tabbox {
    flex: 1;
    height: 100%;
    text-align: center;
    line-height: 92rpx;
    color: #666666;
    font-size: 28rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    /* 将对象作为弹性伸缩盒子模型显示 */
    -webkit-line-clamp: 1;
    /* 控制最多显示几行 */
    -webkit-box-orient: vertical;
    /* 设置或检索伸缩盒对象的子元素的排列方式 */
  }
}
.top-search {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  padding-right: 30rpx;
  .filter-icon {
    width: 40rpx;
    height: 40rpx;
    padding: 15rpx;
  }
  .search-box {
    width: 670rpx;
    height: 102rpx;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;

    .search {
      width: 94%;
      height: 70rpx;
      display: flex;
      align-items: center;
      background: #f8f8f8;
      border-radius: 33rpx;

      .search-img {
        width: 26rpx;
        height: 30rpx;
        margin-left: 20rpx;

        .search-img1 {
          width: 100%;
          height: 100%;
          margin-top: 2rpx;
        }
      }

      .search-text {
        font-size: 28rpx;
        font-weight: 400;
        color: #999999;
        margin-left: 10rpx;
      }
    }

    .search-screen {
      width: 40rpx;
      height: 40rpx;
      margin-left: 30rpx;

      .search-screen1 {
        width: 100%;
        height: 100%;
      }
    }
  }
}

.content {
  overflow: hidden;

  .content-tips {
    background: #fff;
    margin-top: 20rpx;
    overflow: hidden;
    padding-bottom: 30rpx;

    .content-first {
      padding: 19rpx 30rpx;
      display: flex;
      justify-content: space-between;
      box-sizing: border-box;
      font-weight: 400;
      color: #292929;
      height: 90rpx;
      font-size: 30rpx;
      line-height: 30rpx;

      .left {
        display: flex;

        .img {
          width: 52rpx;
          height: 52rpx;
          border-radius: 50%;
          text-align: center;
          line-height: 50rpx;
          margin-right: 20rpx;
          color: #fff;
          font-size: 30rpx;
          background: #9f61c8;
        }

        .test {
          margin-top: 11rpx;
          font-weight: 500;
          color: #333333;
        }
      }

      .right {
        display: flex;
        .test {
          margin-top: 11rpx;
          .blue {
            font-size: 32rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #2671e2;
          }
        }
      }
    }

    .content-sec {
      border-top: 1px solid #e0e0e0;
      padding: 0 30rpx;
      // padding-bottom: 30rpx;
      position: relative;

      .content-sec-lab {
        margin-top: 28rpx;
        display: flex;
        justify-content: space-between;
        font-size: 30rpx;
        font-weight: 400;
        color: #666666;
        line-height: 42rpx;

        .content-sec-lab1 {
          color: #333333;
        }

        .content-sec-tips {
          max-width: 160rpx;
          height: 46rpx;
          background: #f2f2f2;
          border-radius: 6rpx;
          text-align: center;
          line-height: 26rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 26rpx;
          font-weight: 400;
          color: #333333;
          margin-right: 20rpx;
          box-sizing: border-box;
          padding: 10rpx 24rpx;
        }
      }

      .content-sec-num {
        position: absolute;
        width: 200rpx;
        height: 90rpx;
        background: #f4f8fd;
        border-radius: 12rpx;
        font-weight: 400;
        color: #2671e2;
        line-height: 45rpx;
        bottom: 30rpx;
        right: 30rpx;
        text-align: center;
      }
    }

    .content-last {
      display: flex;
      height: 42rpx;
			margin-top: 30rpx;

      .content-last-tab {
        width: 33.4%;
        text-align: center;
        font-size: 30rpx;
        font-weight: 400;
        color: #333333;
        line-height: 78rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        .icon {
          width: 40rpx;
          height: 40rpx;
          margin-right: 12rpx;
        }
      }
    }
  }
}

// 这是弹出层
.screen {
		.screen-record {
			overflow: hidden;
			padding: 0 30rpx;
			box-sizing: border-box;
			border-bottom: 1px solid #e0e0e0;

			.screen-record-text {
				font-weight: 600;
				padding: 30rpx 0;
				font-size: 30rpx;
				color: #333333;
				line-height: 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.arrow {
					width: 30rpx;
					height: 14rpx;
				}
			}

			.screen-record-tab {
				margin-top: 30rpx;
				padding-bottom: 10rpx;
				display: flex;
				flex-wrap: wrap;
				.screen-record-item {
					min-width: 150rpx;
					padding: 0 14rpx;
					height: 60rpx;
					border-radius: 8rpx;
					text-align: center;
					line-height: 60rpx;
					margin: 0 22rpx 22rpx 0;
					&:nth-child(4n) {
						margin-right: 0;
					}
				}
				.screen-record-chose {
					background: #f1f6fd;
					color: #2671e2;
				}
				.screen-record-nochose {
					background: #f7f8fa;
					color: #333;
				}
			}
		}

  .screen-foot {
    width: 100%;
    height: 78rpx;
    display: flex;
		margin: 30rpx 30rpx 0;

    .screen-foot-reset {
      width: 176rpx;
			height: 78rpx;
			line-height: 78rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
			border: 1px solid #2671E2;
			margin-right: 30rpx;
			font-size: 30rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #2671E2;
			text-align: center;
    }

    .screen-foot-sure {
      width: 484rpx;
			height: 78rpx;
			line-height: 78rpx;
			background: #2671E2;
			border: 1px solid #2671E2;
			border-radius: 8rpx;
			font-size: 30rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			text-align: center;
    }
  }
}
</style>