選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。

index.vue 40 KiB

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