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.
 
 
 

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