25개 이상의 토픽을 선택하실 수 없습니다. Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

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