You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

index.vue 40 KiB

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