AI销管
Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.
 
 
 
 

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