AI销管
Nelze vybrat více než 25 témat Téma musí začínat písmenem nebo číslem, může obsahovat pomlčky („-“) a může být dlouhé až 35 znaků.
 
 
 
 

1757 řádky
45 KiB

  1. <template>
  2. <view class="box">
  3. <view class="top-search">
  4. <view class="search-box">
  5. <view class="search" @click="goSearch">
  6. <view class="search-img">
  7. <image class="search-img1" src="../../../static/images/search.png" mode=""></image>
  8. </view>
  9. <view class="search-text">输入客户姓名/手机号</view>
  10. </view>
  11. </view>
  12. <template v-if="showFilterOption">
  13. <image @click="screenShow = true" class="filter-icon" src="@/static/images/iconFilter.png" mode="">
  14. </image>
  15. </template>
  16. <template v-else>
  17. <image class="filter-icon" @click="screenShow = true"
  18. src="https://static.quhouse.com/f4feade4a19d413085b591612179457f.png" mode="" />
  19. </template>
  20. </view>
  21. <!-- 选择器 -->
  22. <view class="boxtittab">
  23. <view class="tabbox" :class="{activeColor: sortFilter!=='排序'}" @click="soltishow = true">
  24. {{ sortFilter }}
  25. <u-icon name="arrow-down" size="24" style="padding-left: 12rpx;"></u-icon>
  26. </view>
  27. <view class="tabbox" :class="{activeColor: arriveFilter!=='接待时间'}" @click="timeshow = true">
  28. {{ arriveFilter }}
  29. <u-icon name="arrow-down" size="24" style="padding-left: 12rpx;"></u-icon>
  30. </view>
  31. <view class="tabbox" :class="{activeColor: agentIdtext!=='接待顾问'}" @click="selectshow=true">
  32. {{ agentIdtext }}
  33. <u-icon name="arrow-down" size="24" style="padding-left: 12rpx;"></u-icon>
  34. </view>
  35. <view class="tabbox" :class="{activeColor: tagSign}" @click="huaxiangShow = true">
  36. 画像标签<u-icon name="arrow-down" size="24" style="padding-left: 12rpx;"></u-icon>
  37. </view>
  38. <view class="tabbox" :class="{activeColor: trendTagSign}" @click="trendShow=true">
  39. {{ trendShowText }}
  40. <u-icon name="arrow-down" size="24" style="padding-left: 12rpx;"></u-icon>
  41. </view>
  42. </view>
  43. <!-- 筛选后的数量 -->
  44. <view class="count" v-if="recordList.length > 0">
  45. 筛选结果:<text>{{totalRecords}} </text>条
  46. </view>
  47. <view class="content">
  48. <view v-if="recordList.length==0" style="width: 100%;height: 100%;display: flex;align-items: center;">
  49. <view style="width: 100%;height: 100%;padding-top: 200rpx;">
  50. <view style="width: 100%;text-align: center;">
  51. <image style="width: 220rpx;height: 200rpx;"
  52. src="https://static.quhouse.com/zhikong_xcx_img/nodatalist.png" mode=""></image>
  53. </view>
  54. <view style="text-align: center;width: 100%;margin-top: 20rpx;color: #999999;">暂无数据</view>
  55. </view>
  56. </view>
  57. <view v-if="recordList.length" class="content-tips" v-for="(item,index) in recordList" :key='index'
  58. @click="gotoDetail(item.id)">
  59. <view class="content-first">
  60. <view class="left">
  61. <view v-if="item.level.length == 0"></view>
  62. <view class="img A" v-else-if="item.level == 1">A</view>
  63. <view class="img B" v-else-if="item.level == 2">B</view>
  64. <view class="img C" v-else-if="item.level == 3">C</view>
  65. <view class="img D" v-else-if="item.level == 4">D</view>
  66. <view class="test">{{item.name}}</view>
  67. </view>
  68. <view class="right">
  69. <view class="clientStageName">
  70. {{ item.fraction || 0 }}%
  71. </view>
  72. </view>
  73. </view>
  74. <view class="content-sec">
  75. <view class="content-sec-lab">
  76. <view class="content-sec-lab1">手机号码:{{ item.phone || "--" }}</view>
  77. <view class="content-sec-lab1" style="width: 44%">客户阶段:{{ item.clientStageName || '--' }}</view>
  78. </view>
  79. <view class="content-sec-lab">
  80. <view class="content-sec-lab1">负责顾问:{{ item.agentName || "--" }}</view>
  81. </view>
  82. <view class="content-sec-lab">
  83. <view class="content-sec-lab1">
  84. 挖掘执行/成功:{{ max100(item.wordFraction) }}%/{{ max100(item.wordFinishFraction) }}%</view>
  85. <view class="content-sec-lab1" style="width: 44%">
  86. 客户意向率:{{ `${item.levelFraction||'0'}%` }}
  87. </view>
  88. </view>
  89. <view class="content-sec-lab">
  90. <view class="content-sec-lab1">最近到访:{{ item.createTime || "--" }}</view>
  91. <view class="content-sec-lab1-min">
  92. 到访{{ item.visitRecord || 0 }}次/{{ item.mm || 0 }}min
  93. </view>
  94. </view>
  95. </view>
  96. <view class="content-last">
  97. <template v-if="permissions.commonly2">
  98. <view class="content-last-tab" @click.stop="gotoFollowUp(item)">
  99. <image src="/static/images/genjin-icon.png" mode="" />
  100. 写跟进
  101. </view>
  102. </template>
  103. <template v-if="CHECKAUTHORITY('khgl_bj')">
  104. <view class="content-last-tab" @click.stop="goedit(item)">
  105. <image class="icon" src="https://static.quhouse.com/5daebdec0aad4f63a62d3720437034bc.png"
  106. mode="" />
  107. 打标签
  108. </view>
  109. </template>
  110. </view>
  111. </view>
  112. </view>
  113. <!-- 更多筛选 -->
  114. <u-popup v-model="screenShow" mode="top" height="900">
  115. <view class="screen">
  116. <scroll-view scroll-y="true" style="height: 750rpx;">
  117. <!-- 销讲业务 -->
  118. <view class="screen-record">
  119. <view class="screen-record-text" @click="showTemplate=!showTemplate">
  120. 销讲业务
  121. <image v-if="showTemplate" class="arrow"
  122. src="https://static.quhouse.com/6cf38a2b82694392a7ab6eea24ce76b1.png" mode="" />
  123. <image v-else class="arrow"
  124. src="https://static.quhouse.com/17d69984ec7c4830b43f712016f06807.png" mode="" />
  125. </view>
  126. <view class="screen-record-tab" v-if="showTemplate">
  127. <block v-for="(item,index) in templateList" :key="index">
  128. <view class="screen-record-item"
  129. :class="[item.isShow?'screen-record-chose':'screen-record-nochose']"
  130. @click="choice(item)">
  131. {{item.templateName}}
  132. </view>
  133. </block>
  134. </view>
  135. </view>
  136. <!-- 接待时长 -->
  137. <view class="screen-record">
  138. <view class="screen-record-text" @click="jiedaiArrow = !jiedaiArrow">
  139. 接待时长
  140. <image v-if="jiedaiArrow" class="arrow"
  141. src="https://static.quhouse.com/6cf38a2b82694392a7ab6eea24ce76b1.png" mode="" />
  142. <image v-else class="arrow"
  143. src="https://static.quhouse.com/17d69984ec7c4830b43f712016f06807.png" mode="" />
  144. </view>
  145. <view class="screen-record-tab" v-if="jiedaiArrow">
  146. <block v-for="(item, index) in jiedaiList" :key="index">
  147. <view class="screen-record-item" :class="[
  148. item.isShow ? 'screen-record-chose' : 'screen-record-nochose',
  149. ]" @click="choice(item)">
  150. {{ item.label }}
  151. </view>
  152. </block>
  153. </view>
  154. </view>
  155. <!-- 客户等级 -->
  156. <view class="screen-record">
  157. <view class="screen-record-text" @click="levelArrow = !levelArrow">
  158. 意向等级
  159. <image v-if="levelArrow" class="arrow"
  160. src="https://static.quhouse.com/6cf38a2b82694392a7ab6eea24ce76b1.png" mode="" />
  161. <image v-else class="arrow"
  162. src="https://static.quhouse.com/17d69984ec7c4830b43f712016f06807.png" mode="" />
  163. </view>
  164. <view class="screen-record-tab" v-if="levelArrow">
  165. <block v-for="(item, index) in levelList" :key="index">
  166. <view class="screen-record-item" :class="[
  167. item.isShow ? 'screen-record-chose' : 'screen-record-nochose',
  168. ]" @click="choice(item)">
  169. {{ item.label }}
  170. </view>
  171. </block>
  172. </view>
  173. </view>
  174. <!-- 客户来源 -->
  175. <view class="screen-record">
  176. <view class="screen-record-text" @click="sourceArrow = !sourceArrow">
  177. 客户来源
  178. <image v-if="sourceArrow" class="arrow"
  179. src="https://static.quhouse.com/6cf38a2b82694392a7ab6eea24ce76b1.png" mode="" />
  180. <image v-else class="arrow"
  181. src="https://static.quhouse.com/17d69984ec7c4830b43f712016f06807.png" mode="" />
  182. </view>
  183. <view class="screen-record-tab" v-if="sourceArrow">
  184. <block v-for="(item, index) in sourceList" :key="index">
  185. <view class="screen-record-item" :class="[
  186. item.isShow ? 'screen-record-chose' : 'screen-record-nochose',
  187. ]" @click="choice(item)">
  188. {{ item.label }}
  189. </view>
  190. </block>
  191. </view>
  192. </view>
  193. <!-- 客户阶段 -->
  194. <view class="screen-record">
  195. <view class="screen-record-text" @click="jieduanArrow = !jieduanArrow">
  196. 客户阶段
  197. <image v-if="jieduanArrow" class="arrow"
  198. src="https://static.quhouse.com/6cf38a2b82694392a7ab6eea24ce76b1.png" mode="" />
  199. <image v-else class="arrow"
  200. src="https://static.quhouse.com/17d69984ec7c4830b43f712016f06807.png" mode="" />
  201. </view>
  202. <view class="screen-record-tab" v-if="jieduanArrow">
  203. <block v-for="(item, index) in phaseList" :key="index">
  204. <view class="screen-record-item" :class="[
  205. item.isShow ? 'screen-record-chose' : 'screen-record-nochose',
  206. ]" @click="choice(item)">
  207. {{ item.label }}
  208. </view>
  209. </block>
  210. </view>
  211. </view>
  212. <!-- 需求挖掘率 -->
  213. <view class="screen-record">
  214. <view class="screen-record-text" @click="wajueArrow = !wajueArrow">
  215. 挖掘执行率
  216. <image v-if="wajueArrow" class="arrow"
  217. src="https://static.quhouse.com/6cf38a2b82694392a7ab6eea24ce76b1.png" mode="" />
  218. <image v-else class="arrow"
  219. src="https://static.quhouse.com/17d69984ec7c4830b43f712016f06807.png" mode="" />
  220. </view>
  221. <view class="screen-record-tab" v-if="wajueArrow">
  222. <block v-for="(item, index) in wajueList" :key="index">
  223. <view class="screen-record-item" :class="[
  224. item.isShow ? 'screen-record-chose' : 'screen-record-nochose',
  225. ]" @click="choice(item)">
  226. {{ item.label }}
  227. </view>
  228. </block>
  229. </view>
  230. </view>
  231. <!-- 需求挖掘率 -->
  232. <view class="screen-record">
  233. <view class="screen-record-text" @click="wajueArrows=!wajueArrows">
  234. 挖掘成功率
  235. <image v-if="wajueArrows" class="arrow"
  236. src="https://static.quhouse.com/6cf38a2b82694392a7ab6eea24ce76b1.png" mode="" />
  237. <image v-else class="arrow"
  238. src="https://static.quhouse.com/17d69984ec7c4830b43f712016f06807.png" mode="" />
  239. </view>
  240. <view class="screen-record-tab" v-if="wajueArrows">
  241. <block v-for="(item,index) in wajueLists" :key="index">
  242. <view class="screen-record-item"
  243. :class="[item.isShow?'screen-record-chose':'screen-record-nochose']"
  244. @click="choice(item)">
  245. {{item.label}}
  246. </view>
  247. </block>
  248. </view>
  249. </view>
  250. <!-- 销讲执行率 -->
  251. <view class="screen-record">
  252. <view class="screen-record-text" @click="xiaojiangArrow = !xiaojiangArrow">
  253. 销讲执行率
  254. <image v-if="xiaojiangArrow" class="arrow"
  255. src="https://static.quhouse.com/6cf38a2b82694392a7ab6eea24ce76b1.png" mode="" />
  256. <image v-else class="arrow"
  257. src="https://static.quhouse.com/17d69984ec7c4830b43f712016f06807.png" mode="" />
  258. </view>
  259. <view class="screen-record-tab" v-if="xiaojiangArrow">
  260. <block v-for="(item, index) in xiaojiangList" :key="index">
  261. <view class="screen-record-item" :class="[
  262. item.isShow ? 'screen-record-chose' : 'screen-record-nochose',
  263. ]" @click="choice(item)">
  264. {{ item.label }}
  265. </view>
  266. </block>
  267. </view>
  268. </view>
  269. <!-- 到访次数 -->
  270. <view class="screen-record">
  271. <view class="screen-record-text" @click="visitArrow = !visitArrow">
  272. 到访次数
  273. <image v-if="visitArrow" class="arrow"
  274. src="https://static.quhouse.com/6cf38a2b82694392a7ab6eea24ce76b1.png" mode="" />
  275. <image v-else class="arrow"
  276. src="https://static.quhouse.com/17d69984ec7c4830b43f712016f06807.png" mode="" />
  277. </view>
  278. <view class="screen-record-tab" v-if="visitArrow">
  279. <block v-for="(item, index) in visitList" :key="index">
  280. <view class="screen-record-item" :class="[
  281. item.isShow ? 'screen-record-chose' : 'screen-record-nochose',
  282. ]" @click="choice(item)">
  283. {{ item.label }}
  284. </view>
  285. </block>
  286. </view>
  287. </view>
  288. </scroll-view>
  289. <view class="screen-foot">
  290. <view class="screen-foot-reset" @click="reset"> 重置 </view>
  291. <view class="screen-foot-sure" @click="screensure"> 确定 </view>
  292. </view>
  293. </view>
  294. </u-popup>
  295. <!-- 选择顾问的选择框 -->
  296. <u-select v-model="selectshow" :list="freeList" @confirm="actionSelectCallback"></u-select>
  297. <!-- 自定义时间 -->
  298. <u-calendar v-model="totalTimeShow" mode="range" @change="totalTimeChange"></u-calendar>
  299. <!-- 选择接待时间 -->
  300. <u-popup v-model="timeshow" mode="bottom">
  301. <view class="timeview" :style="{ color: activeTotal == 5 ? '#2B6EFF' : '#333333' }"
  302. @click="tabtimetap(5, '接待时间')">
  303. 全部</view>
  304. <view class="timeview" :style="{ color: activeTotal == 0 ? '#2B6EFF' : '#333333' }"
  305. @click="tabtimetap(0, '今天')">
  306. 今天</view>
  307. <view class="timeview" :style="{ color: activeTotal == 1 ? '#2B6EFF' : '#333333' }"
  308. @click="tabtimetap(1, '昨天')">
  309. 昨天</view>
  310. <view class="timeview" :style="{ color: activeTotal == 2 ? '#2B6EFF' : '#333333' }"
  311. @click="tabtimetap(2, '近7天')">
  312. 近7天</view>
  313. <view class="timeview" :style="{ color: activeTotal == 3 ? '#2B6EFF' : '#333333' }"
  314. @click="tabtimetap(3, '近30天')">
  315. 近30天</view>
  316. <view class="timeview" :style="{ color: activeTotal == 4 ? '#2B6EFF' : '#333333' }" @click="tabtimetap(4)">
  317. 自定义</view>
  318. </u-popup>
  319. <!-- 排序 -->
  320. <u-popup v-model="soltishow" mode="bottom">
  321. <view class="soltishow" @tap.stop @touchmove.stop>
  322. <block v-for="(item, index) in orderBylist" :key="index">
  323. <view class="soltishow-item" :style="orderBy==item.value?'color: #2B6EFF':''"
  324. @click="selectCallback2(item)">
  325. {{ item.label }}
  326. </view>
  327. </block>
  328. </view>
  329. </u-popup>
  330. <!-- 画像标签 -->
  331. <u-popup v-model="huaxiangShow" mode="top" height="850">
  332. <view class="screen">
  333. <scroll-view scroll-y="true" style="height: 700rpx;">
  334. <view class="screen-record" v-if="item.children.length" v-for="(item,index) in huaxiangList"
  335. :key="index">
  336. <view class="screen-record-text" @click="choice(item)">
  337. {{item.name}}
  338. <image v-if="item.isShow" class="arrow"
  339. src="https://static.quhouse.com/6cf38a2b82694392a7ab6eea24ce76b1.png" mode="" />
  340. <image v-else class="arrow"
  341. src="https://static.quhouse.com/17d69984ec7c4830b43f712016f06807.png" mode="" />
  342. </view>
  343. <view class="screen-record-tab" v-if="item.isShow">
  344. <block v-for="(subitem, ind) in item.children" :key="ind">
  345. <view class="screen-record-item" :class="[
  346. subitem.isShow ? 'screen-record-chose' : 'screen-record-nochose',
  347. ]" @click="choice(subitem)">
  348. {{ subitem.name }}
  349. </view>
  350. </block>
  351. </view>
  352. </view>
  353. </scroll-view>
  354. <view class="screen-foot">
  355. <view class="screen-foot-reset" @click="resetHuaXiang"> 重置 </view>
  356. <view class="screen-foot-sure" @click="screensure"> 确定 </view>
  357. </view>
  358. </view>
  359. </u-popup>
  360. <!-- 销讲话术 -->
  361. <u-popup v-model="trendShow" mode="top" height="850">
  362. <view class="screen">
  363. <scroll-view scroll-y="true" style="height: 700rpx;">
  364. <view class="screen-record" v-if="item.children.length"
  365. v-for="(item,index) in trendAnalysisAllLevelList" :key="index">
  366. <view class="screen-record-text" @click="choice(item)">
  367. {{item.name}}
  368. <image v-if="item.isShow" class="arrow"
  369. src="https://static.quhouse.com/6cf38a2b82694392a7ab6eea24ce76b1.png" mode="" />
  370. <image v-else class="arrow"
  371. src="https://static.quhouse.com/17d69984ec7c4830b43f712016f06807.png" mode="" />
  372. </view>
  373. <view class="screen-record-tab" v-if="item.isShow">
  374. <block v-for="(subitem, ind) in item.children" :key="ind">
  375. <view class="screen-record-item" :class="[
  376. subitem.isShow ? 'screen-record-chose' : 'screen-record-nochose',
  377. ]" @click="choices(subitem)">
  378. {{ subitem.name }}
  379. </view>
  380. </block>
  381. </view>
  382. </view>
  383. </scroll-view>
  384. <view class="screen-foot">
  385. <view class="screen-foot-reset" @click="resetHuaShu"> 重置 </view>
  386. <view class="screen-foot-sure" @click="screensures"> 确定 </view>
  387. </view>
  388. </view>
  389. </u-popup>
  390. <!-- 加载组件 -->
  391. <u-loadings v-model="LOADING"></u-loadings>
  392. </view>
  393. </template>
  394. <script>
  395. var config = require("@/config");
  396. let _this
  397. export default {
  398. data() {
  399. return {
  400. keywordsIds: [], // 画像标签
  401. sourceList: [], //客户来源
  402. templateList: [], // 销讲业务
  403. showTemplate: true, // 展示销讲业务
  404. agentIdtext: '接待顾问',
  405. phaseList: [], // 客户阶段
  406. huaxiangShow: false,
  407. wajueArrow: true,
  408. wajueArrows: true,
  409. jieduanArrow: true,
  410. sourceArrow: true,
  411. levelArrow: true,
  412. zixunArrow: true,
  413. jiedaiArrow: true,
  414. luyinArrow: true,
  415. visitArrow: true,
  416. xiaojiangArrow: true,
  417. huaxiangList: [],
  418. orderBylist: [{
  419. label: '创建时间倒序',
  420. value: '1'
  421. },
  422. {
  423. label: '创建时间正序',
  424. value: '2'
  425. },
  426. {
  427. label: '接待时间倒序',
  428. value: '3'
  429. },
  430. {
  431. label: '接待时间正序',
  432. value: '4'
  433. },
  434. {
  435. label: '执行率正序',
  436. value: '5'
  437. },
  438. {
  439. label: '执行率倒序',
  440. value: '6'
  441. },
  442. {
  443. label: '接访次数正序',
  444. value: '7'
  445. },
  446. {
  447. label: '接访次数倒序',
  448. value: '8'
  449. },
  450. ],
  451. jiedaiList: [{
  452. label: "0~15min",
  453. value: 1,
  454. isShow: false,
  455. },
  456. {
  457. label: "16~30min",
  458. value: 2,
  459. isShow: false,
  460. },
  461. {
  462. label: "31~60min",
  463. value: 3,
  464. isShow: false,
  465. },
  466. {
  467. label: "61~90min",
  468. value: 4,
  469. isShow: false,
  470. },
  471. {
  472. label: "91min及以上",
  473. value: 5,
  474. isShow: false,
  475. },
  476. ],
  477. wajueList: [{
  478. label: "31%及以下",
  479. value: 1,
  480. isShow: false,
  481. },
  482. {
  483. label: "31%~50%",
  484. value: 2,
  485. isShow: false,
  486. },
  487. {
  488. label: "51%~70%",
  489. value: 3,
  490. isShow: false,
  491. },
  492. {
  493. label: "71%及以上",
  494. value: 4,
  495. isShow: false,
  496. },
  497. ],
  498. wajueLists: [{
  499. label: '30%及以下',
  500. value: 1,
  501. isShow: false,
  502. }, {
  503. label: '31%~50%',
  504. value: 2,
  505. isShow: false,
  506. }, {
  507. label: '51%~70%',
  508. value: 3,
  509. isShow: false,
  510. }, {
  511. label: '71%及以上',
  512. value: 4,
  513. isShow: false,
  514. }],
  515. xiaojiangList: [{
  516. label: "30%及以下",
  517. value: 1,
  518. isShow: false,
  519. },
  520. {
  521. label: "31%~50%",
  522. value: 2,
  523. isShow: false,
  524. },
  525. {
  526. label: "51%~70%",
  527. value: 3,
  528. isShow: false,
  529. },
  530. {
  531. label: "71%及以上",
  532. value: 4,
  533. isShow: false,
  534. },
  535. ],
  536. value: '',
  537. screenShow: false,
  538. selectshow: false,
  539. selectTipshow: false,
  540. buildingID: '',
  541. screen: {
  542. staTime: "",
  543. endTime: "",
  544. orderBy: "", // 排序
  545. agentId: "", //顾问
  546. sourceIds: [], // 客户来源
  547. level: [], // 客户等级
  548. visitRecord: [], // 到访次数
  549. wajueVal: [], // 需求挖掘
  550. xiaojiangVal: [], //销讲执行率
  551. jiedaiVal: [], // 接待时长
  552. validInvalid: null, // 录音标识
  553. clientStage: [], // 客户阶段 clientStage
  554. },
  555. stageList: ['未知', '到访', '意向', '定金', '成交'],
  556. recordList: [],
  557. nextPage: 1,
  558. totalRecord: '',
  559. totalRecords: '', // 总条数
  560. freeList: [],
  561. userInfo: {},
  562. isnorefresh: '',
  563. activeTotal: 5,
  564. activeTotal2: 0,
  565. totalTimeShow: false,
  566. timeshow: false,
  567. soltishow: false,
  568. permissions: {
  569. commonly1: false,
  570. commonly2: false
  571. },
  572. list: [], // 客户来源列表
  573. sourceId: '', // 选中的客户来源id
  574. // 不同等级之间的颜色
  575. colorName: [
  576. '', "A", "B", "C", "D"
  577. ],
  578. // 筛选文字展示
  579. sortFilter: '排序',
  580. arriveFilter: '接待时间',
  581. visitList: [{
  582. label: '首次到访',
  583. value: 1,
  584. isShow: false,
  585. }, {
  586. label: '2次到访',
  587. value: 2,
  588. isShow: false,
  589. }, {
  590. label: '3次到访',
  591. value: 3,
  592. isShow: false,
  593. }, {
  594. label: '3次以上',
  595. value: 4,
  596. isShow: false,
  597. }, ],
  598. levelList: [{
  599. label: 'A',
  600. value: 1,
  601. isShow: false,
  602. }, {
  603. label: 'B',
  604. value: 2,
  605. isShow: false,
  606. }, {
  607. label: 'C',
  608. value: 3,
  609. isShow: false,
  610. }, {
  611. label: 'D',
  612. value: 4,
  613. isShow: false,
  614. }, ],
  615. isRefresh: false,
  616. showFilterOption: false, // 筛选
  617. tagSign: false, // 画像标签active
  618. trendAnalysisAllLevelList: [], // 销讲执行列表
  619. trendShow: false, // 销讲话术
  620. trendShowText: '销讲话术', // 销讲话术
  621. trendTagSign: false, // 选中内容
  622. resultList: [], // result最终结果数组
  623. }
  624. },
  625. onLoad(options) {
  626. this.LOADING = true
  627. this.userInfo = uni.getStorageSync("weapp_session_userInfo_data")
  628. let newmenulist = uni.getStorageSync('weapp_session_Menu_data');
  629. this.permissions.commonly1 = newmenulist.khgl_ck;
  630. this.permissions.commonly2 = newmenulist.khgl_gj;
  631. _this = this
  632. },
  633. onPullDownRefresh() {
  634. this.buildingID = uni.getStorageSync('buildingID').id;
  635. this.LOADING = true
  636. this.nextPage = 1;
  637. this.isRefresh = true;
  638. this.resetFilter()
  639. this.reset()
  640. this.getFreeList()
  641. this.getFromSource();
  642. this.getMyCustom();
  643. setTimeout(() => {
  644. uni.stopPullDownRefresh()
  645. }, 2000)
  646. },
  647. onShow() {
  648. this.getTabBarBadge()
  649. this.buildingID = uni.getStorageSync('buildingID').id;
  650. this.updatebuildingID = uni.getStorageSync('updatebuildingID')
  651. if (this.isnorefresh != 'refresh' || this.updatebuildingID == 'updatebuildingID') {
  652. this.nextPage = 1;
  653. this.recordList = []
  654. this.getMyCustom()
  655. this.getFreeList()
  656. this.getWordMiningList();
  657. this.getCustomPhase();
  658. this.getFromSource();
  659. this.getMarketingBusiness(); // 销讲业务
  660. this.trendAnalysisAllLevel()
  661. this.isRefresh = false;
  662. this.isnorefresh = 'refresh';
  663. uni.setStorageSync('updatebuildingID', '');
  664. }
  665. this.updateInit()
  666. },
  667. onReachBottom() {
  668. if (this.totalRecord == this.nextPage) {
  669. uni.showToast({
  670. icon: 'none',
  671. title: '到底了',
  672. duration: 2000
  673. });
  674. return
  675. } else {
  676. this.isRefresh = false;
  677. this.nextPage = this.nextPage + 1;
  678. this.getMyCustom();
  679. }
  680. },
  681. methods: {
  682. // 获取一级销讲词
  683. trendAnalysisAllLevel() {
  684. this.$u.get('customer/trendAnalysisAllLevel', {
  685. showStatus: 0,
  686. houseId: this.buildingID,
  687. }).then(res => {
  688. if (res) {
  689. res.forEach(item => {
  690. item.isShow = true
  691. if (item.children) {
  692. item.children.forEach(i => {
  693. i.isShow = false
  694. })
  695. }
  696. })
  697. this.trendAnalysisAllLevelList = res
  698. }
  699. })
  700. },
  701. // 跳转编辑
  702. goedit(data) {
  703. uni.navigateTo({
  704. url: `/pages/center/consumer/edit?id=${data.id}&projectId=${data.projectId}`
  705. })
  706. },
  707. // 获取客户阶段数据
  708. getCustomPhase() {
  709. this.phaseList = [];
  710. this.$u
  711. .post("/customer/lifeTrackDefineList", {
  712. houseId: this.buildingID,
  713. })
  714. .then((res) => {
  715. if (res.length) {
  716. this.phaseList = res.map(item => {
  717. return {
  718. label: item.stageName,
  719. value: item.id,
  720. isShow: false
  721. }
  722. })
  723. } else {
  724. this.phaseList = []
  725. }
  726. });
  727. },
  728. // 获取客户来源
  729. getFromSource() {
  730. this.$u.get(config.service.sourceList, {
  731. houseId: this.buildingID
  732. })
  733. .then((res) => {
  734. if (res.length) {
  735. this.sourceList = res.map((item) => {
  736. return {
  737. label: item.sourceName,
  738. value: item.id,
  739. isShow: false
  740. }
  741. })
  742. } else {
  743. this.sourceList = []
  744. }
  745. })
  746. },
  747. max100(num) {
  748. if (num > 100) {
  749. return 100
  750. } else if (!num) {
  751. return 0;
  752. } else {
  753. return num;
  754. }
  755. },
  756. // 获取销讲业务
  757. getMarketingBusiness() {
  758. this.$u.get('/customer/marketingBusiness', {
  759. houseId: this.buildingID,
  760. }).then(res => {
  761. this.templateList = res.map(item => {
  762. return {
  763. ...item,
  764. isShow: false,
  765. }
  766. })
  767. })
  768. },
  769. updateInit() {
  770. this.$u.get(config.service.notReadNum, {
  771. id: uni.getStorageSync('weapp_session_userInfo_data').accountId,
  772. projectId: uni.getStorageSync('buildingID').id
  773. }).then(res => {
  774. console.log(res)
  775. if (res > 0) {
  776. uni.setTabBarBadge({ //显示数字
  777. index: 4, //tabbar下标
  778. text: `${res}` //数字
  779. })
  780. } else {
  781. uni.removeTabBarBadge({
  782. index: 4
  783. })
  784. }
  785. }).catch(e => {
  786. uni.removeTabBarBadge({
  787. index: 4
  788. })
  789. })
  790. },
  791. filterFun() {
  792. },
  793. // 过滤
  794. resetFilter() {
  795. this.sortFilter = '排序';
  796. this.agentIdtext = '接待顾问';
  797. this.screen.orderBy = null;
  798. this.arriveFilter = '接待时间';
  799. this.screen.staTime = '';
  800. this.screen.endTime = '';
  801. this.nextPage = 1;
  802. this.activeTotal = 5;
  803. this.recordList = [];
  804. this.activeTotal2 = 0;
  805. },
  806. //选择排序
  807. selectCallback2(e) {
  808. this.sortFilter = e.label;
  809. this.screen.orderBy = e.value;
  810. this.nextPage = 1;
  811. this.recordList = [];
  812. this.soltishow = false;
  813. this.isRefresh = false;
  814. this.getMyCustom();
  815. },
  816. //时间选择
  817. tabtimetap(index, text) {
  818. this.timeshow = false;
  819. if (text) this.arriveFilter = text
  820. if (index == 4) {
  821. this.totalTimeShow = true;
  822. } else {
  823. this.activeTotal = index;
  824. this.screen.staTime = '';
  825. this.screen.endTime = '';
  826. this.nextPage = 1;
  827. this.isRefresh = false;
  828. this.recordList = [];
  829. this.getMyCustom();
  830. }
  831. },
  832. //自定义时间
  833. totalTimeChange(e) {
  834. this.screen.staTime = e.startDate;
  835. this.screen.endTime = e.endDate;
  836. this.activeTotal = 4;
  837. this.nextPage = 1;
  838. this.recordList = [];
  839. this.isRefresh = false;
  840. this.arriveFilter = this.screen.staTime + '-' + this.screen.endTime
  841. this.getMyCustom();
  842. },
  843. choice(item) {
  844. item.isShow = !item.isShow;
  845. },
  846. // 销讲
  847. choices(item) {
  848. item.isShow = !item.isShow;
  849. let arr = []
  850. this.trendAnalysisAllLevelList.filter(item => {
  851. if (item.children) {
  852. let array = item.children.filter(i => i.isShow)
  853. if (array) {
  854. arr = [...arr, ...array]
  855. }
  856. }
  857. })
  858. if (arr.length > 0) {
  859. this.trendTagSign = true
  860. } else {
  861. this.trendTagSign = false
  862. }
  863. },
  864. // 客户详情
  865. gotoDetail(id) {
  866. if (this.permissions.commonly1 == true) {
  867. uni.navigateTo({
  868. url: `/pages/center/consumer/consumerDetail?id=${id}`
  869. })
  870. }
  871. },
  872. getMyCustom() {
  873. this.screen.visitRecord = []
  874. this.screen.jiedaiVal = []
  875. this.screen.wajueVal = []
  876. this.screen.xiaojiangVal = []
  877. this.screen.level = []
  878. this.screen.clientStage = []
  879. this.screen.sourceIds = []
  880. let dateType = 0;
  881. if (this.activeTotal == 5 || this.activeTotal == 4) {
  882. dateType = null;
  883. } else {
  884. dateType = this.activeTotal;
  885. }
  886. // 到访次数
  887. this.visitList.forEach(i => {
  888. if (i.isShow) this.screen.visitRecord.push(i.value)
  889. })
  890. // 接待时长
  891. this.jiedaiList.forEach(i => {
  892. if (i.isShow) this.screen.jiedaiVal.push(i.value)
  893. })
  894. // 需求挖掘
  895. this.wajueList.forEach(i => {
  896. if (i.isShow) this.screen.wajueVal.push(i.value)
  897. })
  898. // 需求挖掘成功
  899. this.wajueLists.forEach(i => {
  900. if (i.isShow) this.screen.wajueVals.push(i.value)
  901. })
  902. // 销讲执行率
  903. this.xiaojiangList.forEach(i => {
  904. if (i.isShow) this.screen.xiaojiangVal.push(i.value)
  905. })
  906. // 客户等级
  907. this.levelList.forEach(i => {
  908. if (i.isShow) this.screen.level.push(i.value)
  909. })
  910. //客户阶段
  911. this.phaseList.forEach(i => {
  912. if (i.isShow) this.screen.clientStage.push(i.value)
  913. })
  914. // 客户来源
  915. this.sourceList.forEach(i => {
  916. if (i.isShow) this.screen.sourceIds.push(i.value)
  917. })
  918. // 销讲话术
  919. // this.trendAnalysisAllLevelList.forEach(i => {
  920. // if (i.isShow) this.screen.sourceIds.push(i.value)
  921. // })
  922. const parames = {
  923. pageNum: this.nextPage,
  924. pageSize: 10,
  925. query: {
  926. projectId: this.buildingID,
  927. fractions: this.screen.xiaojiangVal.length ? this.screen.xiaojiangVal.join(',') : '', // 销讲执行率
  928. wordFractions: this.screen.wajueVal.length ? this.screen.wajueVal.join(',') : '', //需求挖掘
  929. visitRecordNum: this.screen.visitRecord.length ? this.screen.visitRecord.join(',') : '', //到访次数
  930. clientStages: this.screen.clientStage.length ? this.screen.clientStage.join(',') : '', // 客户阶段
  931. sourceIds: this.screen.sourceIds.length ? this.screen.sourceIds.join(',') : '', // 客户来源
  932. level: this.screen.level.length ? this.screen.level.join(',') : '', // 客户等级
  933. duractionNums: this.screen.jiedaiVal.length ? this.screen.jiedaiVal.join(',') : '', // 接待时长
  934. keywordsIds: this.keywordsIds.length ? this.keywordsIds.join(',') : '', // 画像标签
  935. dateType: dateType, // 接待时间
  936. staTime: this.screen.staTime,
  937. endTime: this.screen.endTime,
  938. agentId: this.screen.agentId, // 顾问
  939. orderBy: this.screen.orderBy == '' ? '' : this.screen.orderBy, // 排序
  940. result: this.resultList.join(','), // 销讲话术二级的词
  941. },
  942. };
  943. let ars = []
  944. this.templateList.forEach(item => {
  945. if (item.isShow) {
  946. ars.push(item.id)
  947. }
  948. })
  949. parames.query.marketingBusiness = ars.join(',')
  950. this.$u.post("/customer/customerManagement", parames)
  951. .then((data) => {
  952. this.LOADING = false;
  953. var list = data.records || [];
  954. list.forEach((item) => {
  955. if (this.userInfo.dataCode == 6) {
  956. item.isshow = true;
  957. } else {
  958. item.isshow = false;
  959. }
  960. });
  961. if (this.isRefresh) {
  962. this.recordList = list;
  963. } else {
  964. this.recordList = [...this.recordList, ...list];
  965. }
  966. this.totalRecord = data.pages;
  967. this.totalRecords = data.total;
  968. })
  969. .catch((e) => {
  970. this.LOADING = false;
  971. });
  972. },
  973. getMyCustom1() {
  974. let dateType = 0;
  975. let recDurationInterval = 0;
  976. let orderBy = 0;
  977. if (this.activeTotal == 5) {
  978. dateType = null;
  979. } else if (this.activeTotal == 4) {
  980. dateType = null;
  981. } else {
  982. dateType = this.activeTotal;
  983. }
  984. if (this.activeTotal2 == 0) {
  985. recDurationInterval = null
  986. } else {
  987. recDurationInterval = this.activeTotal2
  988. }
  989. if (this.orderBy == 0) {
  990. orderBy = null;
  991. } else {
  992. orderBy = this.orderBy;
  993. }
  994. var parames = {
  995. pageNum: this.nextPage,
  996. pageSize: 10,
  997. query: {
  998. projectId: this.buildingID,
  999. keywordsId: this.screen.cunsumerTipsid,
  1000. agentId: this.screen.agentId,
  1001. dateType: dateType,
  1002. staDate: this.screen.staTime,
  1003. endDate: this.screen.endTime,
  1004. recDurationInterval: recDurationInterval,
  1005. orderBy: orderBy,
  1006. sourceId: this.sourceId
  1007. }
  1008. };
  1009. if (this.screen.visitRecord.length > 0) {
  1010. parames.query.visitRecords = this.screen.visitRecord.join(',');
  1011. }
  1012. if (this.screen.record.length > 0) {
  1013. parames.query.level = this.screen.record.join(',');
  1014. }
  1015. this.$u.post("/customer/customerManagement", parames).then(data => {
  1016. this.LOADING = false
  1017. var list = data.results || [];
  1018. list.forEach(item => {
  1019. if (item.demand.cusSemanticWordsList != null) {
  1020. item.demand.cusSemanticWordsList.forEach(che => {
  1021. if (che.isInterval == 0) {
  1022. che.name = che.name + che.unit + '-' + che.endName + che.unit;
  1023. }
  1024. })
  1025. }
  1026. })
  1027. if (this.isRefresh) {
  1028. this.recordList = list;
  1029. } else {
  1030. console.log('我在这里被打印了', this.recordList)
  1031. this.recordList = [...this.recordList, ...list];
  1032. }
  1033. this.totalRecord = data.totalPage;
  1034. this.totalRecords = data.totalRecord;
  1035. }).catch(e => {
  1036. this.LOADING = false
  1037. })
  1038. },
  1039. //获取顾问列表
  1040. getFreeList() {
  1041. this.$u.post("/cusLvStatistics/selectAllAccountIdByHouseId", {
  1042. houseId: this.buildingID
  1043. }).then(res => {
  1044. res.forEach(item => {
  1045. item.label = item.name;
  1046. item.value = item.accountId
  1047. })
  1048. res.unshift({
  1049. label: '全部',
  1050. value: ''
  1051. })
  1052. this.freeList = res
  1053. console.log(this.freeList)
  1054. })
  1055. },
  1056. //获取画像标签
  1057. getWordMiningList() {
  1058. this.huaxiangList = [];
  1059. this.$u.get("/corpus/findSelectedWordMiningTemplate", {
  1060. houseId: this.buildingID,
  1061. selected: 1
  1062. })
  1063. .then((res) => {
  1064. // console.log(res)
  1065. if (res.length) {
  1066. res.forEach(item => {
  1067. item.isShow = true;
  1068. if (item.children.length) {
  1069. item.children.forEach(subitem => {
  1070. subitem.isShow = false;
  1071. })
  1072. }
  1073. })
  1074. }
  1075. this.huaxiangList = res;
  1076. });
  1077. },
  1078. //选择顾问
  1079. actionSelectCallback(e) {
  1080. console.log(e)
  1081. if (e[0].label == '全部') {
  1082. this.agentIdtext = '接待顾问'
  1083. this.screen.agentId = ''
  1084. } else {
  1085. this.screen.agentId = e[0].value;
  1086. this.agentIdtext = e[0].label;
  1087. }
  1088. this.nextPage = 1;
  1089. this.recordList = [];
  1090. this.isRefresh = false;
  1091. this.getMyCustom();
  1092. },
  1093. //重置
  1094. reset() {
  1095. this.screen = {
  1096. agentId: "",
  1097. visitRecord: [],
  1098. record: [],
  1099. clientStage: "",
  1100. clientStageName: "",
  1101. };
  1102. this.sourceList.map((i) => {
  1103. i.isShow = false;
  1104. });
  1105. this.wajueList.map((i) => {
  1106. i.isShow = false;
  1107. });
  1108. this.wajueLists.forEach(i => {
  1109. i.isShow = false
  1110. })
  1111. this.phaseList.map((i) => {
  1112. i.isShow = false;
  1113. });
  1114. this.jiedaiList.map((i) => {
  1115. i.isShow = false;
  1116. });
  1117. this.xiaojiangList.map((i) => {
  1118. i.isShow = false;
  1119. });
  1120. this.visitList.map((i) => {
  1121. i.isShow = false;
  1122. });
  1123. this.levelList.map((i) => {
  1124. i.isShow = false;
  1125. });
  1126. this.nextPage = 1;
  1127. this.recordList = [];
  1128. this.isRefresh = false;
  1129. },
  1130. // 重置销讲话术
  1131. resetHuaShu() {
  1132. if (this.trendAnalysisAllLevelList.length) {
  1133. this.trendAnalysisAllLevelList.forEach(item => {
  1134. item.isShow = true;
  1135. if (item.children.length) {
  1136. item.children.forEach(subitem => {
  1137. subitem.isShow = false;
  1138. })
  1139. }
  1140. })
  1141. }
  1142. },
  1143. //重置画像标签选择
  1144. resetHuaXiang() {
  1145. if (this.huaxiangList.length) {
  1146. this.huaxiangList.forEach(item => {
  1147. item.isShow = true;
  1148. if (item.children.length) {
  1149. item.children.forEach(subitem => {
  1150. subitem.isShow = false;
  1151. })
  1152. }
  1153. })
  1154. }
  1155. },
  1156. chooseMores() {
  1157. let change1 = this.templateList.some(item => item.isShow == true)
  1158. let change2 = this.jiedaiList.some(item => item.isShow == true)
  1159. let change3 = this.levelList.some(item => item.isShow == true)
  1160. let change4 = this.sourceList.some(item => item.isShow == true)
  1161. let change5 = this.phaseList.some(item => item.isShow == true)
  1162. let change6 = this.wajueList.some(item => item.isShow == true)
  1163. let change9 = this.wajueLists.some(item => item.isShow == true)
  1164. let change7 = this.xiaojiangList.some(item => item.isShow == true)
  1165. let change8 = this.visitList.some(item => item.isShow == true)
  1166. if (change1 || change2 || change3 || change4 || change5 || change6 || change7 || change8 || change9) {
  1167. return true
  1168. } else {
  1169. return false
  1170. }
  1171. },
  1172. chooseMore() {
  1173. let a = false
  1174. this.huaxiangList.forEach(item => {
  1175. if (item.children.some(so => so.isShow == true)) {
  1176. a = true
  1177. }
  1178. })
  1179. return a
  1180. },
  1181. // 重置分页参数
  1182. resetPageParams() {
  1183. this.nextPage = 1;
  1184. this.recordList = [];
  1185. this.keywordsIds = []
  1186. this.resultList = [];
  1187. this.screenShow = false;
  1188. this.huaxiangShow = false;
  1189. this.trendShow = false
  1190. this.isRefresh = false;
  1191. },
  1192. //筛选确认
  1193. screensures() {
  1194. let arr = []
  1195. this.resetPageParams()
  1196. this.trendAnalysisAllLevelList.filter(item => {
  1197. if (item.children) {
  1198. let array = item.children.filter(i => i.isShow)
  1199. if (array) {
  1200. arr = [...arr, ...array]
  1201. }
  1202. }
  1203. })
  1204. console.log(arr)
  1205. if (arr.length > 0) {
  1206. this.trendTagSign = true
  1207. this.resultList = arr.map(item => {
  1208. return item.name
  1209. })
  1210. console.log(this.resultList)
  1211. } else {
  1212. this.trendTagSign = false
  1213. }
  1214. this.getMyCustom();
  1215. },
  1216. //筛选确认
  1217. screensure() {
  1218. this.showFilterOption = this.chooseMores()
  1219. this.tagSign = this.chooseMore()
  1220. this.resetPageParams()
  1221. // 画像标签
  1222. this.huaxiangList.forEach(item => {
  1223. if (item.children.length) {
  1224. item.children.forEach(im => {
  1225. if (im.isShow) this.keywordsIds.push(im.id)
  1226. })
  1227. }
  1228. })
  1229. this.getMyCustom();
  1230. },
  1231. goSearch() {
  1232. uni.navigateTo({
  1233. url: '/pages/center/consumer/consumerSearch'
  1234. });
  1235. },
  1236. gotoFollowUp(item) {
  1237. uni.navigateTo({
  1238. url: `/pages/center/consumer/newFollowup/newFollowup?id=${item.id}&level=${item.level}&clientStageName=${item.clientStageName}`
  1239. })
  1240. },
  1241. },
  1242. filters: {
  1243. // 筛选等级展示文字
  1244. levelText(level) {
  1245. let str = '';
  1246. switch (Number(level)) {
  1247. case 1:
  1248. str = "A"
  1249. break;
  1250. case 2:
  1251. str = "B"
  1252. break;
  1253. case 3:
  1254. str = "C"
  1255. break;
  1256. case 4:
  1257. str = "D"
  1258. break;
  1259. default:
  1260. str = ''
  1261. break;
  1262. }
  1263. return str
  1264. },
  1265. // 加密手机
  1266. phoneText(mobile) {
  1267. if (!mobile) return '--'
  1268. if (_this.userInfo.showPhoneStatus == 1) return mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
  1269. else return mobile
  1270. },
  1271. // 格式化时间
  1272. formatTime(time) {
  1273. if (!time) return
  1274. return time.substring(5, time.length)
  1275. }
  1276. }
  1277. }
  1278. </script>
  1279. <style lang="scss" scoped>
  1280. .box {
  1281. width: 100vw;
  1282. min-height: calc(100vh - var(--window-top));
  1283. background: #F8F8F8;
  1284. display: flex;
  1285. flex-direction: column;
  1286. .top-search {
  1287. display: flex;
  1288. align-items: center;
  1289. justify-content: space-between;
  1290. background: #fff;
  1291. padding-right: 30rpx;
  1292. .filter-icon {
  1293. width: 40rpx;
  1294. height: 40rpx;
  1295. padding: 15rpx;
  1296. }
  1297. .search-box {
  1298. width: 670rpx;
  1299. height: 102rpx;
  1300. background: #ffffff;
  1301. display: flex;
  1302. align-items: center;
  1303. justify-content: center;
  1304. .search {
  1305. width: 94%;
  1306. height: 70rpx;
  1307. display: flex;
  1308. align-items: center;
  1309. background: #f8f8f8;
  1310. border-radius: 33rpx;
  1311. .search-img {
  1312. width: 26rpx;
  1313. height: 30rpx;
  1314. margin-left: 20rpx;
  1315. .search-img1 {
  1316. width: 100%;
  1317. height: 100%;
  1318. margin-top: 2rpx;
  1319. }
  1320. }
  1321. .search-text {
  1322. font-size: 28rpx;
  1323. font-weight: 400;
  1324. color: #999999;
  1325. margin-left: 10rpx;
  1326. }
  1327. }
  1328. .search-screen {
  1329. width: 40rpx;
  1330. height: 40rpx;
  1331. margin-left: 30rpx;
  1332. .search-screen1 {
  1333. width: 100%;
  1334. height: 100%;
  1335. }
  1336. }
  1337. }
  1338. }
  1339. .content {
  1340. flex-grow: 1;
  1341. }
  1342. }
  1343. .timeview {
  1344. height: 90rpx;
  1345. line-height: 90rpx;
  1346. width: 100%;
  1347. text-align: center;
  1348. border-bottom: 1rpx solid #F8F8F8;
  1349. }
  1350. //时间切换的样式
  1351. .boxtittab {
  1352. position: sticky;
  1353. top: var(--window-top);
  1354. z-index: 999;
  1355. width: 100;
  1356. height: 72rpx;
  1357. background: #FFFFFF;
  1358. flex-shrink: 0;
  1359. display: flex;
  1360. align-items: center;
  1361. .tabbox {
  1362. flex: 1;
  1363. height: 100%;
  1364. text-align: center;
  1365. line-height: 72rpx;
  1366. color: #666666;
  1367. font-size: 28rpx;
  1368. overflow: hidden;
  1369. text-overflow: ellipsis;
  1370. display: -webkit-box;
  1371. /* 将对象作为弹性伸缩盒子模型显示 */
  1372. -webkit-line-clamp: 1;
  1373. /* 控制最多显示几行 */
  1374. -webkit-box-orient: vertical;
  1375. /* 设置或检索伸缩盒对象的子元素的排列方式 */
  1376. }
  1377. .activeColor {
  1378. color: #2671E2;
  1379. font-weight: bold;
  1380. }
  1381. }
  1382. .soltishow {
  1383. width: 100%;
  1384. min-height: 40vh;
  1385. .soltishow-item {
  1386. width: 100%;
  1387. height: 80rpx;
  1388. display: flex;
  1389. align-items: center;
  1390. justify-content: center;
  1391. }
  1392. }
  1393. .count {
  1394. width: 100%;
  1395. height: 82rpx;
  1396. line-height: 82rpx;
  1397. display: flex;
  1398. align-items: center;
  1399. justify-content: center;
  1400. background-color: #f8f8f8;
  1401. font-size: 30rpx;
  1402. font-family: PingFangSC-Regular, PingFang SC;
  1403. font-weight: 400;
  1404. color: #333333;
  1405. text {
  1406. color: #E7483C;
  1407. }
  1408. }
  1409. .content {
  1410. .content-tips {
  1411. background: #fff;
  1412. margin-bottom: 20rpx;
  1413. .content-first {
  1414. padding: 19rpx 30rpx;
  1415. display: flex;
  1416. justify-content: space-between;
  1417. align-items: center;
  1418. box-sizing: border-box;
  1419. color: #292929;
  1420. height: 90rpx;
  1421. font-size: 30rpx;
  1422. .left {
  1423. display: flex;
  1424. align-items: center;
  1425. .img {
  1426. width: 48rpx;
  1427. height: 48rpx;
  1428. line-height: 48rpx;
  1429. text-align: center;
  1430. margin-right: 16rpx;
  1431. background: #E6625B;
  1432. border-radius: 6rpx;
  1433. font-size: 28rpx;
  1434. font-family: PingFangSC-Regular, PingFang SC;
  1435. font-weight: 400;
  1436. color: #FFFFFF;
  1437. }
  1438. .A {
  1439. background: #E6625B;
  1440. }
  1441. .B {
  1442. background: #FF981E;
  1443. }
  1444. .C {
  1445. background: #F6BD16;
  1446. }
  1447. .D {
  1448. background: #E6625B;
  1449. }
  1450. .test {
  1451. height: 42rpx;
  1452. font-size: 30rpx;
  1453. font-family: PingFangSC-Medium, PingFang SC;
  1454. font-weight: 500;
  1455. color: #333333;
  1456. line-height: 42rpx;
  1457. margin-right: 16rpx;
  1458. }
  1459. }
  1460. .right {
  1461. display: flex;
  1462. align-items: center;
  1463. color: #2671E2;
  1464. font-size: 30rpx;
  1465. align-items: flex-end;
  1466. .clientStageName {
  1467. font-size: 38rpx;
  1468. font-family: PingFangSC-Regular, PingFang SC;
  1469. font-weight: bold;
  1470. // color: #FF981E;
  1471. height: 48rpx;
  1472. line-height: 48rpx;
  1473. background: #FFFFFF;
  1474. // border-radius: 4rpx;
  1475. // border: 1rpx solid #FF981E;
  1476. box-sizing: border-box;
  1477. }
  1478. .right-img {
  1479. margin: 5rpx 0 0 10rpx;
  1480. width: 14rpx;
  1481. height: 30rpx;
  1482. }
  1483. }
  1484. }
  1485. .content-sec {
  1486. border-top: 1px solid #e0e0e0;
  1487. padding: 0 30rpx;
  1488. position: relative;
  1489. .content-sec-lab {
  1490. margin-top: 28rpx;
  1491. display: flex;
  1492. justify-content: space-between;
  1493. font-size: 30rpx;
  1494. font-weight: 400;
  1495. color: #666666;
  1496. line-height: 42rpx;
  1497. .content-sec-lab1 {
  1498. color: #333333;
  1499. word-break: break-all;
  1500. }
  1501. .content-sec-lab1-min {
  1502. flex-shrink: 0;
  1503. margin-bottom: 20rpx;
  1504. padding: 0 10rpx;
  1505. background: rgba($color: #2671e2, $alpha: 1);
  1506. color: #fff;
  1507. border-radius: 8rpx;
  1508. }
  1509. .content-sec-tips {
  1510. max-width: 160rpx;
  1511. height: 46rpx;
  1512. background: #f2f2f2;
  1513. border-radius: 6rpx;
  1514. text-align: center;
  1515. line-height: 26rpx;
  1516. overflow: hidden;
  1517. text-overflow: ellipsis;
  1518. white-space: nowrap;
  1519. font-size: 26rpx;
  1520. font-weight: 400;
  1521. color: #333333;
  1522. margin-right: 20rpx;
  1523. box-sizing: border-box;
  1524. padding: 10rpx 24rpx;
  1525. }
  1526. }
  1527. .content-sec-num {
  1528. position: absolute;
  1529. width: 200rpx;
  1530. height: 90rpx;
  1531. background: #f4f8fd;
  1532. border-radius: 12rpx;
  1533. font-weight: 400;
  1534. color: #2671e2;
  1535. line-height: 45rpx;
  1536. bottom: 30rpx;
  1537. right: 30rpx;
  1538. text-align: center;
  1539. }
  1540. }
  1541. .content-last {
  1542. display: flex;
  1543. justify-content: flex-end;
  1544. align-items: center;
  1545. padding-bottom: 30rpx;
  1546. .content-last-tab {
  1547. width: 214rpx;
  1548. height: 70rpx;
  1549. line-height: 70rpx;
  1550. background: #FFFFFF;
  1551. border-radius: 8rpx;
  1552. border: 1rpx solid #2671E2;
  1553. box-sizing: border-box;
  1554. font-family: PingFangSC-Regular, PingFang SC;
  1555. font-weight: 400;
  1556. color: #2671E2;
  1557. font-size: 30rpx;
  1558. margin-right: 30rpx;
  1559. display: flex;
  1560. align-items: center;
  1561. justify-content: center;
  1562. image {
  1563. width: 40rpx;
  1564. height: 40rpx;
  1565. margin-right: 12rpx;
  1566. }
  1567. .icon {
  1568. width: 40rpx;
  1569. height: 40rpx;
  1570. margin-right: 12rpx;
  1571. }
  1572. }
  1573. }
  1574. }
  1575. }
  1576. // 这是弹出层
  1577. .screen {
  1578. .screen-record {
  1579. overflow: hidden;
  1580. padding: 0 30rpx;
  1581. box-sizing: border-box;
  1582. border-bottom: 1px solid #e0e0e0;
  1583. .screen-record-text {
  1584. font-weight: 600;
  1585. padding: 30rpx 0;
  1586. font-size: 30rpx;
  1587. color: #333333;
  1588. line-height: 30rpx;
  1589. display: flex;
  1590. align-items: center;
  1591. justify-content: space-between;
  1592. .arrow {
  1593. width: 30rpx;
  1594. height: 14rpx;
  1595. }
  1596. }
  1597. .screen-record-tab {
  1598. margin-top: 30rpx;
  1599. padding-bottom: 10rpx;
  1600. display: flex;
  1601. flex-wrap: wrap;
  1602. .screen-record-item {
  1603. min-width: 150rpx;
  1604. padding: 0 14rpx;
  1605. height: 60rpx;
  1606. border-radius: 8rpx;
  1607. text-align: center;
  1608. line-height: 60rpx;
  1609. margin: 0 22rpx 22rpx 0;
  1610. &:nth-child(4n) {
  1611. margin-right: 0;
  1612. }
  1613. }
  1614. .screen-record-chose {
  1615. background: #f1f6fd;
  1616. color: #2671e2;
  1617. }
  1618. .screen-record-nochose {
  1619. background: #f7f8fa;
  1620. color: #333;
  1621. }
  1622. }
  1623. }
  1624. .screen-foot {
  1625. width: 100%;
  1626. height: 78rpx;
  1627. display: flex;
  1628. margin: 30rpx 30rpx 0;
  1629. .screen-foot-reset {
  1630. width: 176rpx;
  1631. height: 78rpx;
  1632. line-height: 78rpx;
  1633. background: #FFFFFF;
  1634. border-radius: 8rpx;
  1635. border: 1px solid #2671E2;
  1636. margin-right: 30rpx;
  1637. font-size: 30rpx;
  1638. font-family: PingFangSC-Regular, PingFang SC;
  1639. font-weight: 400;
  1640. color: #2671E2;
  1641. text-align: center;
  1642. }
  1643. .screen-foot-sure {
  1644. width: 484rpx;
  1645. height: 78rpx;
  1646. line-height: 78rpx;
  1647. background: #2671E2;
  1648. border: 1px solid #2671E2;
  1649. border-radius: 8rpx;
  1650. font-size: 30rpx;
  1651. font-family: PingFangSC-Regular, PingFang SC;
  1652. font-weight: 400;
  1653. color: #FFFFFF;
  1654. text-align: center;
  1655. }
  1656. }
  1657. }
  1658. </style>