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.
 
 
 

1044 lines
25 KiB

  1. <template>
  2. <view class="box">
  3. <!-- 搜索框点击跳转 -->
  4. <view>
  5. <view class="search-box">
  6. <view class="search" @click="goSearch">
  7. <view class="search-img">
  8. <image class="search-img1" src="../../../static/images/search.png" mode=""></image>
  9. </view>
  10. <view class="search-text">输入客户姓名/手机号</view>
  11. </view>
  12. </view>
  13. </view>
  14. <!-- 选择器 -->
  15. <view class="boxtittab">
  16. <view class="tabbox" @click="tapsoltishow">
  17. {{ sortFilter }}
  18. <u-icon name="arrow-down" size="24" style="padding-left: 12rpx;"></u-icon>
  19. </view>
  20. <view class="tabbox" @click="taptimeisshow">
  21. {{ arriveFilter }}
  22. <u-icon name="arrow-down" size="24" style="padding-left: 12rpx;"></u-icon>
  23. </view>
  24. <view class="tabbox" @click="taptimetuisshow">
  25. {{ receptionDuration }}
  26. <u-icon name="arrow-down" size="24" style="padding-left: 12rpx;"></u-icon>
  27. </view>
  28. <view class="tabbox" @click="screenshow">
  29. 更多筛选<u-icon name="arrow-down" size="24" style="padding-left: 12rpx;"></u-icon>
  30. </view>
  31. </view>
  32. <view class="count" v-if="recordList.length > 0">
  33. 筛选结果:<text>{{totalRecords}} </text>条
  34. </view>
  35. <view class="content">
  36. <view v-if="recordList.length==0"
  37. style="width: 100%;height: 100%;display: flex;align-items: center;background: #FFFFFF;">
  38. <view style="width: 100%;padding-top: 200rpx;">
  39. <view style="width: 100%;text-align: center;">
  40. <image style="width: 220rpx;height: 200rpx;"
  41. src="https://static.quhouse.com/zhikong_xcx_img/nodatalist.png" mode=""></image>
  42. </view>
  43. <view style="text-align: center;width: 100%;margin-top: 20rpx;color: #999999;">暂无数据</view>
  44. </view>
  45. </view>
  46. <view v-if="recordList.length!=0" class="content-tips" v-for="(item,index) in recordList" :key='index'
  47. @click="tapThevisiting(item)">
  48. <view class="content-first">
  49. <view class="left">
  50. <!-- <view class="img">{{item.agentName.slice(0,1)}}</view> -->
  51. <view class="name">{{item.agentName}}</view>
  52. <view class="status" v-if="item.replaceReception==1">代接待</view>
  53. <view style="margin-left: 6rpx;margin-top: 11rpx;color: red;">{{item.receptionStatusName || ''}}
  54. </view>
  55. </view>
  56. <view class="right" v-if="item.recording!=0">
  57. <view style="margin-right: 6rpx;">{{item.validInvalidName||''}}</view>
  58. <view v-if="methodsisshow==true">
  59. <text style="color: red;" v-if="item.taboo==1">违禁接待</text>
  60. <text v-if="item.taboo==1"> |</text>
  61. </view>
  62. <!-- <view class="point"></view> -->
  63. <view v-if="item.markAdvisor==0" class="">未标记</view>
  64. <view v-if="item.markAdvisor==1" class="">已标记</view>
  65. </view>
  66. <view class="right" v-else>
  67. <view class="">无录音</view>
  68. </view>
  69. </view>
  70. <view class="content-sec">
  71. <view class="left">
  72. <view class="cus">客户:{{item.name || '--'}} |</view>
  73. <view class="arriveNum">第{{item.visitRecord || "--"}}次接待</view>
  74. </view>
  75. <view class="right">
  76. {{item.fraction || '0'}}%
  77. </view>
  78. </view>
  79. <view class="content-last">
  80. 需求挖掘:{{item.wordFraction|| 0}}%
  81. </view>
  82. <view class="content-last">
  83. {{item.createTime}} | {{item.mm || '0'}} min
  84. </view>
  85. </view>
  86. </view>
  87. <u-popup v-model="screenShow" mode="top" height="777">
  88. <view class="screen">
  89. <!-- 顾问选择 -->
  90. <view class="screen-counselor">
  91. <view class="screen-text">
  92. 所属顾问
  93. </view>
  94. <view class="screen-sel" @click="selectshow = true">
  95. <u-input v-model="screen.counselorName" type="text" placeholder='请选择' class="screen-inp"
  96. disabled />
  97. <image class="screen-sel-img" src="../../../static/images/right.png" mode=""></image>
  98. </view>
  99. </view>
  100. <!-- <view class="screen-counselor">
  101. <view class="screen-text">
  102. 客户阶段
  103. </view>
  104. <view class="screen-sel" @click="selectPhaseShow = true">
  105. <u-input v-model="screen.clientStageName" type="text" placeholder='请选择' class="screen-inp"
  106. disabled />
  107. <image class="screen-sel-img" src="../../../static/images/right.png" mode=""></image>
  108. </view>
  109. </view> -->
  110. <view class="screen-record">
  111. <view class="screen-record-text">
  112. 录音标识
  113. </view>
  114. <view class="screen-record-tab">
  115. <view :class="[screen.validInvalid==0?'screen-record-chose':'screen-record-nochose']"
  116. @click="screenvisivalidInvalid(0)">
  117. 有效接待
  118. </view>
  119. <view :class="[screen.validInvalid==1?'screen-record-chose':'screen-record-nochose']"
  120. @click="screenvisivalidInvalid(1)">
  121. 无效接待
  122. </view>
  123. <view :class="[screen.validInvalid==2?'screen-record-chose':'screen-record-nochose']"
  124. @click="screenvisivalidInvalid(2)">
  125. 无录音
  126. </view>
  127. </view>
  128. </view>
  129. <view class="screen-record">
  130. <view class="screen-record-text">
  131. 标记顾问
  132. </view>
  133. <view class="screen-record-tab">
  134. <view :class="[screen.markAdvisor==1?'screen-record-chose':'screen-record-nochose']"
  135. @click="screenvisitRecord(1)">
  136. 标记
  137. </view>
  138. <view :class="[screen.markAdvisor==0?'screen-record-chose':'screen-record-nochose']"
  139. @click="screenvisitRecord(0)">
  140. 未标记
  141. </view>
  142. </view>
  143. </view>
  144. <view class="screen-record">
  145. <view class="screen-record-text">
  146. 到访次数
  147. </view>
  148. <view class="screen-record-tab">
  149. <block v-for="(item,index) in visitList" :key="index">
  150. <view :class="[item.isShow?'screen-record-chose':'screen-record-nochose']"
  151. @click="choice(index,item.value)">
  152. {{item.label}}
  153. </view>
  154. </block>
  155. <!-- <view :class="[screen.visitRecord==1?'screen-record-chose':'screen-record-nochose']" @click="recordclick(1)">
  156. 首次到访
  157. </view>
  158. <view :class="[screen.visitRecord==2?'screen-record-chose':'screen-record-nochose']" @click="recordclick(2)">
  159. 2次到访
  160. </view>
  161. <view :class="[screen.visitRecord==3?'screen-record-chose':'screen-record-nochose']" @click="recordclick(3)">
  162. 3次到访
  163. </view>
  164. <view :class="[screen.visitRecord==4?'screen-record-chose':'screen-record-nochose']" @click="recordclick(4)">
  165. 3次以上
  166. </view> -->
  167. </view>
  168. </view>
  169. <view class="screen-foot">
  170. <view class="screen-foot-reset" @click="reset">
  171. 重置
  172. </view>
  173. <view class="screen-foot-sure" @click="screensure">
  174. 确定
  175. </view>
  176. </view>
  177. </view>
  178. </u-popup>
  179. <!-- 选择顾问的选择框 -->
  180. <u-select v-model="selectshow" :list="freeList" @confirm="actionSelectCallback"></u-select>
  181. <!-- 客户阶段 -->
  182. <u-select v-model="selectPhaseShow" :list="phaseList" @confirm="selectPhase"></u-select>
  183. <u-calendar v-model="totalTimeShow" mode="range" @change="totalTimeChange"></u-calendar>
  184. <u-popup v-model="timeshow" mode="bottom">
  185. <view class="timeview" :style="{ color: activeTotal == 5 ? '#2B6EFF' : '#333333' }"
  186. @click="tabtimetap(5, '到访时间')">
  187. 全部</view>
  188. <view class="timeview" :style="{ color: activeTotal == 0 ? '#2B6EFF' : '#333333' }"
  189. @click="tabtimetap(0, '今天')">
  190. 今天</view>
  191. <view class="timeview" :style="{ color: activeTotal == 1 ? '#2B6EFF' : '#333333' }"
  192. @click="tabtimetap(1, '昨天')">
  193. 昨天</view>
  194. <view class="timeview" :style="{ color: activeTotal == 2 ? '#2B6EFF' : '#333333' }"
  195. @click="tabtimetap(2, '近7天')">
  196. 近7天</view>
  197. <view class="timeview" :style="{ color: activeTotal == 3 ? '#2B6EFF' : '#333333' }"
  198. @click="tabtimetap(3, '近30天')">
  199. 近30天</view>
  200. <view class="timeview" :style="{ color: activeTotal == 4 ? '#2B6EFF' : '#333333' }"
  201. @click="tabtimetap(4, '')">
  202. 自定义</view>
  203. </u-popup>
  204. <u-popup v-model="timetushow" mode="bottom">
  205. <view class="timeview" :style="{ color: activeTotal2 == 0 ? '#2B6EFF' : '#333333' }"
  206. @click="timetap(0, '接待时长')">全部
  207. </view>
  208. <view class="timeview" :style="{ color: activeTotal2 == 1 ? '#2B6EFF' : '#333333' }"
  209. @click="timetap(1, '0~15min')">
  210. 0~15min</view>
  211. <view class="timeview" :style="{ color: activeTotal2 == 2 ? '#2B6EFF' : '#333333' }"
  212. @click="timetap(2, '15~30min')">
  213. 15~30min</view>
  214. <view class="timeview" :style="{ color: activeTotal2 == 3 ? '#2B6EFF' : '#333333' }"
  215. @click="timetap(3, '30~60min')">
  216. 30~60min</view>
  217. <view class="timeview" :style="{ color: activeTotal2 == 4 ? '#2B6EFF' : '#333333' }"
  218. @click="timetap(4, '60~90min')">
  219. 60~90min</view>
  220. <view class="timeview" :style="{ color: activeTotal2 == 5 ? '#2B6EFF' : '#333333' }"
  221. @click="timetap(5, '90min以上')">
  222. 90min以上</view>
  223. </u-popup>
  224. <u-select v-model="soltishow" :list="orderBylist" @confirm="selectCallback2"></u-select>
  225. <!-- 加载组件 -->
  226. <loading v-model="LOADING"></loading>
  227. </view>
  228. </template>
  229. <script>
  230. import loading from "@/components/loading/index.vue"
  231. export default {
  232. components: {
  233. loading
  234. },
  235. data() {
  236. return {
  237. orderBylist: [{
  238. label: '全部',
  239. value: '0'
  240. },
  241. {
  242. label: '创建时间倒序',
  243. value: '1'
  244. },
  245. {
  246. label: '创建时间正序',
  247. value: '2'
  248. },
  249. {
  250. label: '接待时间倒序',
  251. value: '3'
  252. },
  253. {
  254. label: '接待时间正序',
  255. value: '4'
  256. },
  257. {
  258. label: '执行率正序',
  259. value: '5'
  260. },
  261. {
  262. label: '执行率倒序',
  263. value: '6'
  264. },
  265. {
  266. label: '接访次数正序',
  267. value: '7'
  268. },
  269. {
  270. label: '接访次数倒序',
  271. value: '8'
  272. },
  273. ],
  274. activeTotal: 5,
  275. value: '',
  276. screenShow: false,
  277. selectshow: false,
  278. selectPhaseShow: false,
  279. phaseList: [],
  280. totalTimeShow: false,
  281. screen: {
  282. agentId: '', //顾问id
  283. record: '0',
  284. markAdvisor: null,
  285. visitRecord: [],
  286. validInvalid: null,
  287. clientStage: '',
  288. clientStageName: ''
  289. },
  290. freeList: [], //顾问
  291. recordList: [],
  292. buildingID: '',
  293. nextPage: 1,
  294. totalRecord: "",
  295. staTime: '',
  296. endtime: '',
  297. isnorefresh: '',
  298. activeTotal2: 0,
  299. timeshow: false,
  300. timetushow: false,
  301. soltishow: false,
  302. orderBy: '',
  303. methodsisshow: false,
  304. userInfo: {},
  305. visitList: [{
  306. label: '首次到访',
  307. value: 1,
  308. isShow: false,
  309. }, {
  310. label: '2次到访',
  311. value: 2,
  312. isShow: false,
  313. }, {
  314. label: '3次到访',
  315. value: 3,
  316. isShow: false,
  317. }, {
  318. label: '3次以上',
  319. value: 4,
  320. isShow: false,
  321. }, ],
  322. totalRecords: '',
  323. isRefresh: false,
  324. // 筛选文字展示
  325. sortFilter: '排序',
  326. arriveFilter: '到访时间',
  327. receptionDuration: '接待时长',
  328. }
  329. },
  330. onLoad(options) {
  331. this.LOADING = true
  332. this.isnorefresh = options.refresh;
  333. if (options.activeTotal) {
  334. this.activeTotal = options.activeTotal
  335. }
  336. if (options.markAdvisor) {
  337. this.screen.markAdvisor = options.markAdvisor
  338. }
  339. if (options.validInvalid) {
  340. this.screen.validInvalid = options.validInvalid
  341. }
  342. if (options.staTime) {
  343. this.staTime = options.staTime;
  344. this.endtime = options.endtime + ' 23:59:59';
  345. }
  346. },
  347. onShow() {
  348. this.userInfo = uni.getStorageSync('weapp_session_userInfo_data');
  349. if (this.userInfo.dataCode == 6 || this.userInfo.dataCode == 3) {
  350. this.methodsisshow = false;
  351. } else {
  352. this.methodsisshow = true;
  353. }
  354. if (this.isnorefresh == 'refresh') {
  355. this.buildingID = uni.getStorageSync('buildingID').id;
  356. this.recordList = [];
  357. this.nextPage = 1;
  358. this.isRefresh = false;
  359. this.getMyCustom()
  360. this.getFreeList();
  361. this.isnorefresh = '';
  362. }
  363. this.getCustomPhase()
  364. },
  365. onPullDownRefresh() {
  366. this.resetFilter()
  367. this.isRefresh = true;
  368. this.nextPage = 1;
  369. this.getMyCustom()
  370. setTimeout(function() {
  371. uni.stopPullDownRefresh();
  372. }, 1000);
  373. },
  374. onReachBottom() {
  375. if (this.totalRecord == this.nextPage) {
  376. uni.showToast({
  377. icon: 'none',
  378. title: '到底了',
  379. duration: 2000
  380. });
  381. return
  382. } else {
  383. this.nextPage += 1;
  384. this.getMyCustom();
  385. this.isRefresh = false;
  386. }
  387. },
  388. methods: {
  389. // 过滤
  390. resetFilter() {
  391. this.sortFilter = '排序';
  392. this.orderBy = null;
  393. this.arriveFilter = '到访时间';
  394. this.staTime = '';
  395. this.endtime = '';
  396. this.nextPage = 1;
  397. this.activeTotal = 5;
  398. this.recordList = [];
  399. this.receptionDuration = '接待时长';
  400. this.activeTotal2 = 0;
  401. },
  402. choice(index, e) {
  403. if (this.visitList[index].isShow == true) {
  404. this.visitList[index].isShow = false;
  405. for (var i = 0; i < this.screen.visitRecord.length; i++) {
  406. if (this.screen.visitRecord[i] === e) {
  407. this.screen.visitRecord.splice(i, 1);
  408. }
  409. }
  410. } else {
  411. this.visitList[index].isShow = true;
  412. this.screen.visitRecord.push(e)
  413. }
  414. },
  415. getCustomPhase() {
  416. this.phaseList = []
  417. this.$u.post("/customer/lifeTrackDefineList", {
  418. houseId: this.buildingID
  419. }).then(res => {
  420. this.LOADING = false
  421. let tempArr = []
  422. res.forEach(item => {
  423. let tempObj = {}
  424. tempObj.label = item.stageName;
  425. tempObj.value = item.id;
  426. tempArr.push(tempObj)
  427. })
  428. this.phaseList = tempArr;
  429. })
  430. },
  431. selectPhase(e) {
  432. this.screen.clientStageName = e[0].label;
  433. this.screen.clientStage = e[0].value;
  434. },
  435. tapsoltishow() {
  436. this.soltishow = true;
  437. },
  438. taptimetuisshow() {
  439. this.timetushow = true;
  440. },
  441. taptimeisshow() {
  442. this.timeshow = true;
  443. },
  444. //选择标签
  445. selectCallback2(e) {
  446. this.sortFilter = e[0].label;
  447. this.orderBy = e[0].value;
  448. this.nextPage = 1;
  449. this.recordList = [];
  450. this.isRefresh = false;
  451. this.getMyCustom();
  452. },
  453. //选择录音时长
  454. timetap(index, text) {
  455. if (text) this.receptionDuration = text
  456. this.timetushow = false;
  457. this.activeTotal2 = index;
  458. this.nextPage = 1;
  459. this.recordList = [];
  460. this.isRefresh = false;
  461. this.getMyCustom();
  462. },
  463. //时间选择
  464. tabtimetap(index, text) {
  465. this.timeshow = false;
  466. if (text) this.arriveFilter = text
  467. if (index == 4) {
  468. this.totalTimeShow = true;
  469. } else {
  470. this.activeTotal = index;
  471. this.staTime = '';
  472. this.endtime = '';
  473. this.nextPage = 1;
  474. this.recordList = [];
  475. this.isRefresh = false;
  476. this.getMyCustom();
  477. }
  478. },
  479. //自定义时间
  480. totalTimeChange(e) {
  481. this.staTime = e.startDate;
  482. this.endtime = e.endDate;
  483. this.activeTotal = 4;
  484. this.nextPage = 1;
  485. this.recordList = [];
  486. this.isRefresh = false;
  487. this.getMyCustom();
  488. },
  489. tapThevisiting(item) {
  490. uni.showLoading({
  491. title: '加载中',
  492. mask: true
  493. });
  494. if (item.status == 0) {
  495. setTimeout(function() {
  496. uni.hideLoading();
  497. }, 2000);
  498. uni.showToast({
  499. icon: "none",
  500. title: "排队中"
  501. })
  502. return
  503. } else {
  504. const parames = {
  505. pageNum: 1,
  506. pageSize: 100,
  507. query: {
  508. customerId: item.id,
  509. }
  510. }
  511. var item = {
  512. bg: 0,
  513. customerId: item.id,
  514. wordFraction: item.wordFraction
  515. }
  516. uni.setStorageSync("searchobj", item); //写入缓存
  517. uni.setStorageSync("entrance", 1); //写入缓存
  518. this.$u.post("/corpus/findByPage", parames).then(res => {
  519. if (res == null) {
  520. setTimeout(function() {
  521. uni.hideLoading();
  522. }, 2000);
  523. uni.showToast({
  524. icon: "none",
  525. title: "暂无音频"
  526. })
  527. return
  528. } else {
  529. setTimeout(function() {
  530. uni.hideLoading();
  531. }, 2000);
  532. let newobj = res[0];
  533. if (res[0].merge == 0) {
  534. uni.navigateTo({
  535. url: `/pages/mine/details2?customerId=${newobj.customerId}&status=${newobj.status}&stateisshow=${"2"}&wordFraction=${item.wordFraction}`
  536. })
  537. } else {
  538. uni.navigateTo({
  539. url: `/pages/mine/details?customerId=${newobj.customerId}&status=${newobj.status}&stateisshow=${"1"}`
  540. })
  541. }
  542. }
  543. })
  544. }
  545. },
  546. getMyCustom() {
  547. let dateType = 0;
  548. let recDurationInterval = 0;
  549. let orderBy = 0;
  550. if (this.activeTotal == 5) {
  551. dateType = null;
  552. } else if (this.activeTotal == 3) {
  553. dateType = null;
  554. } else if (this.activeTotal == 4) {
  555. dateType = null;
  556. } else {
  557. dateType = this.activeTotal;
  558. }
  559. if (this.activeTotal2 == 0) {
  560. recDurationInterval = null
  561. } else {
  562. recDurationInterval = this.activeTotal2
  563. }
  564. if (this.orderBy == 0) {
  565. orderBy = null;
  566. } else {
  567. orderBy = this.orderBy;
  568. }
  569. var parames = {
  570. pageNum: this.nextPage,
  571. pageSize: 10,
  572. query: {
  573. projectId: this.buildingID,
  574. time: 1,
  575. staTime: this.staTime,
  576. endtime: this.endtime,
  577. visitRecords: this.screen.visitRecord.join(','),
  578. markAdvisor: this.screen.markAdvisor,
  579. dateType: dateType,
  580. recDurationInterval: recDurationInterval,
  581. orderBy: orderBy,
  582. validInvalid: this.screen.validInvalid,
  583. clientStage: this.screen.clientStage,
  584. recording: this.screen.validInvalid == 2 ? 0 : null
  585. }
  586. };
  587. if (this.screen.agentId) {
  588. parames.query.agentId = this.screen.agentId
  589. }
  590. this.$u.post("/customer/findbypage", parames).then(data => {
  591. this.LOADING = false
  592. if (this.staTime && this.endtime) {
  593. this.arriveFilter = `${this.staTime}-${this.endtime}`
  594. }
  595. var list = data.results || [];
  596. if (this.isRefresh) {
  597. this.recordList = list;
  598. } else {
  599. this.recordList = [...this.recordList, ...list];
  600. }
  601. this.totalRecord = data.totalPage;
  602. this.totalRecords = data.totalRecord;
  603. }).catch(e => {
  604. this.LOADING = false
  605. })
  606. },
  607. //获取顾问列表
  608. getFreeList() {
  609. this.$u.post("/cusLvStatistics/selectAllAccountIdByHouseId", {
  610. houseId: this.buildingID
  611. }).then(res => {
  612. this.freeList = res;
  613. this.freeList.forEach(item => {
  614. item.label = item.name;
  615. item.value = item.accountId
  616. })
  617. })
  618. },
  619. // 筛选
  620. screenshow() {
  621. this.screenShow = true
  622. },
  623. actionSelectCallback(e) {
  624. this.screen.agentId = e[0].value;
  625. this.screen.counselorName = e[0].label;
  626. this.recordList = [];
  627. this.nextPage = 1;
  628. this.isRefresh = false;
  629. this.getMyCustom();
  630. },
  631. reset() {
  632. this.screen = {
  633. counselorName: '',
  634. record: '0',
  635. markAdvisor: null,
  636. visitRecord: [],
  637. validInvalid: null,
  638. clientStage: '',
  639. clientStageName: '',
  640. recording: null,
  641. visitRecords: "",
  642. }
  643. this.visitList.map(i => {
  644. i.isShow = false
  645. })
  646. // this.screenShow = false;
  647. this.nextPage = 1;
  648. this.recordList = [];
  649. this.getMyCustom();
  650. },
  651. recordclick(i) {
  652. if (this.screen.visitRecord == i) {
  653. this.screen.visitRecord = null
  654. } else {
  655. this.screen.visitRecord = i
  656. }
  657. },
  658. screenvisitRecord(i) {
  659. if (this.screen.markAdvisor == i) {
  660. this.screen.markAdvisor = null
  661. } else {
  662. this.screen.markAdvisor = i
  663. }
  664. },
  665. screenvisivalidInvalid(i) {
  666. console.log(this.screen.validInvalid, i)
  667. if (this.screen.validInvalid == i) {
  668. this.screen.validInvalid = null
  669. } else {
  670. this.screen.validInvalid = i
  671. }
  672. },
  673. screensure() {
  674. this.screenShow = false;
  675. this.recordList = [];
  676. this.nextPage = 1;
  677. this.isRefresh = false;
  678. this.getMyCustom();
  679. },
  680. goSearch() {
  681. uni.navigateTo({
  682. url: '/pages/center/records/recordSearch'
  683. });
  684. },
  685. },
  686. }
  687. </script>
  688. <style lang="scss" scoped>
  689. .box {
  690. width: 100%;
  691. height: 100%;
  692. background: #F8F8F8;
  693. }
  694. .count {
  695. width: 100%;
  696. height: 90rpx;
  697. display: flex;
  698. align-items: center;
  699. justify-content: center;
  700. background-color: #FBE4E4;
  701. text {
  702. color: #F71616;
  703. }
  704. }
  705. .timeview {
  706. height: 80rpx;
  707. line-height: 80rpx;
  708. width: 100%;
  709. text-align: center;
  710. border-bottom: 1px solid #F8F8F8;
  711. }
  712. //时间切换的样式
  713. .boxtittab {
  714. position: sticky;
  715. top: var(--window-top);
  716. z-index: 999;
  717. width: 100;
  718. height: 92rpx;
  719. background: #FFFFFF;
  720. border: 1px solid #E0E0E0;
  721. display: flex;
  722. align-items: center;
  723. .tabbox {
  724. flex: 1;
  725. height: 100%;
  726. text-align: center;
  727. line-height: 92rpx;
  728. color: #666666;
  729. font-size: 28rpx;
  730. overflow: hidden;
  731. text-overflow: ellipsis;
  732. display: -webkit-box;
  733. /* 将对象作为弹性伸缩盒子模型显示 */
  734. -webkit-line-clamp: 1;
  735. /* 控制最多显示几行 */
  736. -webkit-box-orient: vertical;
  737. /* 设置或检索伸缩盒对象的子元素的排列方式 */
  738. }
  739. }
  740. .search-box {
  741. width: 100%;
  742. height: 102rpx;
  743. background: #FFFFFF;
  744. display: flex;
  745. align-items: center;
  746. justify-content: center;
  747. .search {
  748. width: 94%;
  749. height: 70rpx;
  750. display: flex;
  751. align-items: center;
  752. background: #F8F8F8;
  753. border-radius: 33rpx;
  754. .search-img {
  755. width: 26rpx;
  756. height: 30rpx;
  757. margin-left: 20rpx;
  758. .search-img1 {
  759. width: 100%;
  760. height: 100%;
  761. margin-top: 2rpx;
  762. }
  763. }
  764. .search-text {
  765. font-size: 28rpx;
  766. font-weight: 400;
  767. color: #999999;
  768. margin-left: 10rpx;
  769. }
  770. }
  771. .search-screen {
  772. width: 40rpx;
  773. height: 40rpx;
  774. margin-left: 30rpx;
  775. .search-screen1 {
  776. width: 100%;
  777. height: 100%;
  778. }
  779. }
  780. }
  781. .content {
  782. .content-tips {
  783. background: #fff;
  784. padding: 0 20rpx;
  785. box-sizing: border-box;
  786. overflow: hidden;
  787. margin-top: 20rpx;
  788. .content-first {
  789. margin-top: 19rpx;
  790. display: flex;
  791. justify-content: space-between;
  792. .left {
  793. display: flex;
  794. .img {
  795. width: 52rpx;
  796. height: 52rpx;
  797. background: #FFFFFF;
  798. border: 1px solid #C9C9C9;
  799. border-radius: 50%;
  800. text-align: center;
  801. line-height: 52rpx;
  802. }
  803. .name {
  804. font-weight: 600;
  805. color: #333333;
  806. // margin-left: 20rpx;
  807. margin-top: 11rpx;
  808. }
  809. .status {
  810. width: 110rpx;
  811. height: 42rpx;
  812. background: #FFF9F5;
  813. border-radius: 4rpx;
  814. font-size: 26rpx;
  815. font-weight: 400;
  816. color: #EC8D49;
  817. line-height: 42rpx;
  818. text-align: center;
  819. margin-left: 19rpx;
  820. margin-top: 11rpx;
  821. }
  822. }
  823. .right {
  824. display: flex;
  825. margin-top: 11rpx;
  826. .point {
  827. width: 12rpx;
  828. height: 12rpx;
  829. background: #2B6EFF;
  830. border-radius: 50%;
  831. margin-right: 9rpx;
  832. margin-top: 16rpx;
  833. }
  834. }
  835. }
  836. .content-sec {
  837. display: flex;
  838. justify-content: space-between;
  839. margin-top: 19rpx;
  840. .left {
  841. display: flex;
  842. .cus {
  843. font-size: 30rpx;
  844. font-weight: 400;
  845. color: #666666;
  846. // line-height: 30rpx;
  847. }
  848. .arriveNum {
  849. font-size: 30rpx;
  850. font-weight: 400;
  851. // line-height: 30rpx;
  852. margin-left: 10rpx;
  853. }
  854. }
  855. .right {
  856. width: 120rpx;
  857. height: 46rpx;
  858. background: #F4F8FD;
  859. border-radius: 6rpx;
  860. text-align: center;
  861. line-height: 46rpx;
  862. font-weight: 400;
  863. color: #2671E2;
  864. }
  865. }
  866. .content-last {
  867. // margin: 30rpx 0;
  868. font-size: 30rpx;
  869. font-weight: 400;
  870. color: #666666;
  871. line-height: 30rpx;
  872. margin-top: 22rpx;
  873. margin-bottom: 30rpx;
  874. }
  875. }
  876. }
  877. // 这是弹出层
  878. .screen {
  879. // box-sizing: border-box;
  880. // padding: 0 30rpx;
  881. position: absolute;
  882. .screen-counselor {
  883. display: flex;
  884. height: 106rpx;
  885. // padding: 40rpx 30rpx 36rpx 30rpx;
  886. padding: 0 30rpx;
  887. box-sizing: border-box;
  888. border-bottom: 1px solid #EEEEEE;
  889. .screen-text {
  890. margin: 40rpx 0 36rpx 0;
  891. font-size: 30rpx;
  892. font-weight: 400;
  893. color: #333333;
  894. line-height: 30rpx;
  895. }
  896. .screen-sel {
  897. display: flex;
  898. justify-content: space-between;
  899. width: 500rpx;
  900. margin-left: 60rpx;
  901. .screen-sel-img {
  902. margin: 40rpx 0 36rpx 0;
  903. width: 14rpx;
  904. height: 30rpx;
  905. }
  906. .screen-inp {
  907. margin-top: 20rpx;
  908. }
  909. }
  910. }
  911. .screen-record {
  912. height: 192rpx;
  913. // width: 100%;
  914. overflow: hidden;
  915. padding: 0 30rpx;
  916. box-sizing: border-box;
  917. border-bottom: 1px solid #EEEEEE;
  918. .screen-record-text {
  919. margin-top: 36rpx;
  920. font-size: 30rpx;
  921. font-weight: 400;
  922. color: #333333;
  923. line-height: 30rpx;
  924. }
  925. .screen-record-tab {
  926. margin-top: 30rpx;
  927. display: flex;
  928. // justify-content: space-around;
  929. .screen-record-chose {
  930. width: 156rpx;
  931. height: 60rpx;
  932. background: #2671E2;
  933. border-radius: 4rpx;
  934. border: 1px solid #2671E2;
  935. text-align: center;
  936. line-height: 60rpx;
  937. margin-right: 22rpx;
  938. color: #FFFFFF;
  939. }
  940. .screen-record-nochose {
  941. width: 156rpx;
  942. height: 60rpx;
  943. background: #FFFFFF;
  944. border-radius: 4rpx;
  945. border: 1px solid #C9C9C9;
  946. text-align: center;
  947. line-height: 60rpx;
  948. margin-right: 22rpx;
  949. }
  950. }
  951. }
  952. .screen-foot {
  953. width: 100%;
  954. height: 100rpx;
  955. display: flex;
  956. .screen-foot-reset {
  957. width: 50%;
  958. text-align: center;
  959. height: 100rpx;
  960. line-height: 100rpx;
  961. font-size: 30rpx;
  962. font-weight: 400;
  963. color: #666666;
  964. }
  965. .screen-foot-sure {
  966. width: 50%;
  967. text-align: center;
  968. line-height: 100rpx;
  969. height: 100rpx;
  970. font-size: 30rpx;
  971. font-weight: 400;
  972. color: #FFFFFF;
  973. background: #2671E2;
  974. }
  975. }
  976. }
  977. </style>