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

index.vue 16 KiB

2 years ago
2 years ago
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777
  1. <template>
  2. <view class="box">
  3. <!-- 选择器 -->
  4. <view class="boxtittab">
  5. <view class="tabbox" @click="taptimeisshow">
  6. {{ timeText }}
  7. <u-icon name="arrow-down" size="24" style="padding-left: 12rpx;"></u-icon>
  8. </view>
  9. <view class="tabbox" @click="selectshow = true">
  10. {{ guwenText }}
  11. <u-icon name="arrow-down" size="24" style="padding-left: 12rpx;"></u-icon>
  12. </view>
  13. <view class="tabbox" @click="tapsoltishow">
  14. {{ steyStatus }}
  15. <u-icon name="arrow-down" size="24" style="padding-left: 12rpx;"></u-icon>
  16. </view>
  17. <view class="tabbox" @click="showIdent = true">
  18. {{ weijinTag }}
  19. <u-icon name="arrow-down" size="24" style="padding-left: 12rpx;"></u-icon>
  20. </view>
  21. </view>
  22. <view class="count" v-if="recordList.length > 0">
  23. 筛选结果:<text>{{totalRecords}} </text>条
  24. </view>
  25. <view class="content">
  26. <view v-if="recordList.length==0"
  27. style="width: 100%;height: 100%;display: flex;align-items: center;background: #FFFFFF;">
  28. <view style="width: 100%;padding-top: 200rpx;">
  29. <view style="width: 100%;text-align: center;">
  30. <image style="width: 220rpx;height: 200rpx;"
  31. src="https://static.quhouse.com/zhikong_xcx_img/nodatalist.png" mode=""></image>
  32. </view>
  33. <view style="text-align: center;width: 100%;margin-top: 20rpx;color: #999999;">暂无数据</view>
  34. </view>
  35. </view>
  36. <view v-if="recordList.length!=0" class="content-tips" v-for="(item,index) in recordList" :key='index'
  37. @click="tapThevisiting(item, index)">
  38. <view class="content-first">
  39. <view class="left">
  40. <view class="img">顾</view>
  41. <view class="name">{{item.agentName}}</view>
  42. <view class="status" v-if="item.replaceReception==1">代接待</view>
  43. </view>
  44. <view class="right">
  45. <view class="">
  46. {{ item.violatedStatus | ViolatedStatus }}|{{ item.disposeStatus | DisposeStatus }}
  47. </view>
  48. </view>
  49. </view>
  50. <view class="content-last">
  51. <view class="item">
  52. <image src="@/static/images/img/time.png" mode=""></image>
  53. <text>{{item.createTime}}</text>
  54. </view>
  55. <view class="item">
  56. <image src="@/static/images/img/voice.png" mode=""></image>
  57. <text>{{item.mm || '0'}}min</text>
  58. </view>
  59. <view class="item">
  60. <image src="@/static/images/img/hit.png" mode=""></image>
  61. <text>{{item.violatedFrequency || '0'}}</text>
  62. </view>
  63. </view>
  64. </view>
  65. </view>
  66. <!-- 选择顾问的选择框 -->
  67. <u-select v-model="selectshow" :list="freeList" @confirm="actionSelectCallback"></u-select>
  68. <u-calendar v-model="totalTimeShow" mode="range" @change="totalTimeChange"></u-calendar>
  69. <u-popup v-model="timeshow" mode="bottom">
  70. <block v-for="(data, index) in activeList" :key="index">
  71. <view class="timeview" :style="{ color: activeTotal == data.id ? '#2B6EFF' : '#333333' }"
  72. @click="tabtimetap(data.id, data.title)">{{ data.title }}</view>
  73. </block>
  74. </u-popup>
  75. <u-select v-model="soltishow" :list="orderBylist" @confirm="selectCallback2"></u-select>
  76. <u-select v-model="showIdent" :list="identList" @confirm="selectIdent"></u-select>
  77. </view>
  78. </template>
  79. <script>
  80. export default {
  81. data() {
  82. return {
  83. orderBylist: [{
  84. label: '全部',
  85. value: null
  86. }, {
  87. label: '待处理',
  88. value: 0
  89. }, {
  90. label: '已处理',
  91. value: 1
  92. }],
  93. activeTotal: 5,
  94. activeList: [ // 时间筛选数组
  95. {
  96. title: '全部',
  97. id: 5,
  98. },
  99. {
  100. title: '今天',
  101. id: 0,
  102. },
  103. {
  104. title: '昨天',
  105. id: 1,
  106. },
  107. {
  108. title: '近7天',
  109. id: 2,
  110. },
  111. {
  112. title: '近30天',
  113. id: 3,
  114. },
  115. {
  116. title: '自定义',
  117. id: 4,
  118. },
  119. ],
  120. showIdent: false, // 显示选择违禁标识列表
  121. identList: [ // 违禁标识列表
  122. {
  123. label: '全部',
  124. value: null
  125. },
  126. {
  127. label: '有效',
  128. value: 1
  129. },
  130. {
  131. label: '无效',
  132. value: 2
  133. },
  134. ],
  135. violatedStatus: null, // 违禁状态
  136. selectshow: false,
  137. totalTimeShow: false,
  138. screen: {
  139. agentId: '', //顾问id
  140. record: '0',
  141. },
  142. freeList: [], //顾问
  143. recordList: [],
  144. buildingID: '',
  145. nextPage: 1,
  146. totalRecord: "",
  147. staTime: '',
  148. endtime: '',
  149. isnorefresh: '',
  150. activeTotal2: 0,
  151. timeshow: false,
  152. soltishow: false,
  153. orderBy: null,
  154. userInfo: {},
  155. totalRecords: '', // 列表全部的条数
  156. isRefresh: false,
  157. nextPageObj: {}, // 跳转详情页面的参数
  158. // 页面文字展示内容
  159. timeText: '接待时间', //
  160. guwenText: '顾问', //
  161. steyStatus: '处理状态', //
  162. weijinTag: '违禁标识', // 违禁标识
  163. }
  164. },
  165. onLoad(options) {
  166. this.isnorefresh = options.refresh;
  167. if (options.activeTotal) {
  168. this.activeTotal = options.activeTotal
  169. }
  170. if (options.staTime) {
  171. this.staTime = options.staTime;
  172. this.endtime = options.endtime;
  173. this.timeText = `${options.staTime}-${options.endtime}`
  174. }
  175. if (options.violatedStatus) {
  176. this.violatedStatus = options.violatedStatus
  177. this.weijinTag = this.identList[options.violatedStatus].label
  178. }
  179. },
  180. onShow() {
  181. this.userInfo = uni.getStorageSync('weapp_session_userInfo_data');
  182. if (this.isnorefresh == 'refresh') {
  183. this.buildingID = uni.getStorageSync('buildingID').id;
  184. this.recordList = [];
  185. this.nextPage = 1;
  186. this.isRefresh = false;
  187. this.getMyCustom()
  188. this.getFreeList();
  189. this.isnorefresh = '';
  190. }
  191. var pages = getCurrentPages();
  192. pages[0].$vm.path = '/pages/index/index'
  193. console.log(pages[0].$vm.path)
  194. },
  195. onPullDownRefresh() {
  196. this.nextPage = 1;
  197. this.isRefresh = true;
  198. this.getMyCustom()
  199. this.resetRefreshParams()
  200. setTimeout(function() {
  201. uni.stopPullDownRefresh();
  202. }, 1000);
  203. },
  204. onReachBottom() {
  205. if (this.totalRecord == this.nextPage) {
  206. uni.showToast({
  207. icon: 'none',
  208. title: '到底了',
  209. duration: 2000
  210. });
  211. return
  212. } else {
  213. this.nextPage += 1;
  214. this.isRefresh = false;
  215. this.getMyCustom();
  216. }
  217. },
  218. methods: {
  219. // 重置参数
  220. resetRefreshParams() {
  221. this.timeText = '接待时间'
  222. this.activeTotal = 5
  223. this.guwenText = '顾问'
  224. this.screen.agentId = '' // 顾问id
  225. this.steyStatus = '处理状态'
  226. this.orderBy = null
  227. this.weijinTag = '违禁标识'
  228. this.violatedStatus = null // 违禁状态
  229. },
  230. tapsoltishow() {
  231. this.soltishow = true;
  232. },
  233. taptimeisshow() {
  234. this.timeshow = true;
  235. },
  236. //选择标签
  237. selectCallback2(e) {
  238. this.orderBy = e[0].value;
  239. this.steyStatus = e[0].label;
  240. this.nextPage = 1;
  241. this.recordList = [];
  242. this.isRefresh = false;
  243. this.getMyCustom();
  244. },
  245. // 选择违禁标识
  246. selectIdent(e) {
  247. this.violatedStatus = e[0].value
  248. this.weijinTag = e[0].label
  249. this.nextPage = 1;
  250. this.recordList = [];
  251. this.isRefresh = false;
  252. this.getMyCustom();
  253. },
  254. //时间选择
  255. tabtimetap(index, title) {
  256. this.timeshow = false;
  257. if (index == 4) {
  258. this.totalTimeShow = true;
  259. } else {
  260. this.timeText = title
  261. this.activeTotal = index;
  262. this.staTime = '';
  263. this.endtime = '';
  264. this.nextPage = 1;
  265. this.recordList = [];
  266. this.isRefresh = false;
  267. this.getMyCustom();
  268. }
  269. },
  270. //自定义时间
  271. totalTimeChange(e) {
  272. this.staTime = e.startDate;
  273. this.endtime = e.endDate;
  274. this.timeText = `${e.startDate}-${e.endDate}`
  275. this.activeTotal = 4;
  276. this.nextPage = 1;
  277. this.recordList = [];
  278. this.isRefresh = false;
  279. this.getMyCustom();
  280. },
  281. // 跳转违禁详情
  282. tapThevisiting(item, index) {
  283. if (item.status == 0) {
  284. uni.showToast({
  285. icon: "none",
  286. title: "排队中"
  287. })
  288. return
  289. } else {
  290. const parames = {
  291. pageNum: 1,
  292. pageSize: 100,
  293. query: {
  294. customerId: item.id,
  295. }
  296. }
  297. this.$u.post("/customer/prohibitedMatch", {
  298. customerId: item.id
  299. }).then(res => {
  300. let newweijin = res[0];
  301. newweijin.transferContent = JSON.parse(newweijin.transferContent)
  302. var item = {
  303. bg: newweijin.transferContent.bg,
  304. customerId: newweijin.corpusId,
  305. }
  306. uni.setStorageSync("searchobj", item); //写入缓存
  307. this.$u.post("/corpus/findByPage", parames).then(res => {
  308. if (res == null) {
  309. uni.showToast({
  310. icon: "none",
  311. title: "暂无音频"
  312. })
  313. return
  314. } else {
  315. let newobj = res[0];
  316. let obj = {
  317. pageSize: index+1,
  318. num: this.totalRecords,
  319. query: {
  320. ...this.nextPageObj
  321. }
  322. }
  323. uni.setStorageSync('nextPageObj', JSON.stringify(obj))
  324. uni.navigateTo({
  325. url: `/pages/center/prohibited/details?customerId=${newobj.customerId}&status=${newobj.status}&stateisshow=${"2"}&index=${index}&isMerge=${res[0].merge}`
  326. })
  327. // if (res[0].merge == 0) {
  328. // }
  329. // else {
  330. // uni.navigateTo({
  331. // url: `/pages/mine/details?customerId=${newobj.customerId}&status=${newobj.status}&stateisshow=${"2"}`
  332. // })
  333. // }
  334. }
  335. })
  336. })
  337. }
  338. },
  339. // 获取围巾列表
  340. getMyCustom() {
  341. let dateType = 0;
  342. if (this.activeTotal == 5) {
  343. dateType = null;
  344. } else if (this.activeTotal == 4) {
  345. dateType = null;
  346. } else {
  347. dateType = this.activeTotal;
  348. }
  349. var parames = {
  350. pageNum: this.nextPage,
  351. pageSize: 10,
  352. query: {
  353. projectId: this.buildingID,
  354. time: 1,
  355. staTime: this.staTime,
  356. endtime: this.endtime,
  357. taboo: 1,
  358. dateType: dateType,
  359. disposeStatus: this.orderBy, // 处理状态
  360. violatedStatus: this.violatedStatus, // 违禁状态
  361. }
  362. };
  363. if (this.screen.agentId) {
  364. parames.query.agentId = this.screen.agentId
  365. }
  366. this.$u.post("/customer/findbypage", parames).then(data => {
  367. var list = data.results || [];
  368. if (this.isRefresh) {
  369. this.recordList = list;
  370. } else {
  371. this.recordList = [...this.recordList, ...list];
  372. }
  373. this.totalRecord = data.totalPage;
  374. this.totalRecords = data.totalRecord;
  375. this.nextPageObj = parames.query
  376. })
  377. },
  378. //获取顾问列表
  379. getFreeList() {
  380. this.$u.post("/cusLvStatistics/selectAllAccountIdByHouseId", {
  381. houseId: this.buildingID
  382. }).then(res => {
  383. this.freeList = res;
  384. this.freeList.forEach(item => {
  385. item.label = item.name;
  386. item.value = item.accountId
  387. })
  388. this.freeList.unshift({
  389. label: '全部',
  390. value: null,
  391. })
  392. })
  393. },
  394. //顾问确认
  395. actionSelectCallback(e) {
  396. this.screen.agentId = e[0].value;
  397. this.guwenText = e[0].label;
  398. this.recordList = [];
  399. this.nextPage = 1;
  400. this.selectshow = false;
  401. this.isRefresh = false;
  402. this.getMyCustom();
  403. },
  404. },
  405. filters: {
  406. // violatedStatus
  407. ViolatedStatus(status) {
  408. let str = '';
  409. switch (status) {
  410. case 0:
  411. str = '有效违禁'
  412. break;
  413. case 1:
  414. str = '有效违禁'
  415. break;
  416. case 2:
  417. str = '无效违禁'
  418. break;
  419. }
  420. return str
  421. },
  422. // DisposeStatus
  423. DisposeStatus(status) {
  424. let str = '';
  425. switch (status) {
  426. case 0:
  427. str = '待处理'
  428. break;
  429. case 1:
  430. str = '已处理'
  431. break;
  432. }
  433. return str
  434. },
  435. }
  436. }
  437. </script>
  438. <style lang="scss" scoped>
  439. .box {
  440. width: 100vw;
  441. min-height: calc(100vh - var(--window-top));
  442. background: #F8F8F8;
  443. }
  444. .count {
  445. width: 100%;
  446. height: 90rpx;
  447. display: flex;
  448. align-items: center;
  449. justify-content: center;
  450. background-color: #FBE4E4;
  451. text {
  452. color: #F71616;
  453. }
  454. }
  455. .timeview {
  456. height: 80rpx;
  457. line-height: 80rpx;
  458. width: 100%;
  459. text-align: center;
  460. border-bottom: 1px solid #F8F8F8;
  461. }
  462. //时间切换的样式
  463. .boxtittab {
  464. position: sticky;
  465. top: var(--window-top);
  466. z-index: 100;
  467. width: 100;
  468. height: 92rpx;
  469. background: #FFFFFF;
  470. border: 1px solid #E0E0E0;
  471. display: flex;
  472. align-items: center;
  473. .tabbox {
  474. flex: 1;
  475. height: 100%;
  476. text-align: center;
  477. line-height: 92rpx;
  478. color: #666666;
  479. font-size: 28rpx;
  480. overflow: hidden;
  481. /* 超出一行文字自动隐藏 */
  482. text-overflow: ellipsis;
  483. /*文字隐藏后添加省略号*/
  484. white-space: nowrap;
  485. /*强制不换行*/
  486. }
  487. }
  488. .search-box {
  489. width: 100%;
  490. height: 102rpx;
  491. background: #FFFFFF;
  492. display: flex;
  493. align-items: center;
  494. justify-content: center;
  495. .search {
  496. width: 94%;
  497. height: 70rpx;
  498. display: flex;
  499. align-items: center;
  500. background: #F8F8F8;
  501. border-radius: 33rpx;
  502. .search-img {
  503. width: 26rpx;
  504. height: 30rpx;
  505. margin-left: 20rpx;
  506. .search-img1 {
  507. width: 100%;
  508. height: 100%;
  509. margin-top: 2rpx;
  510. }
  511. }
  512. .search-text {
  513. font-size: 28rpx;
  514. font-weight: 400;
  515. color: #999999;
  516. margin-left: 10rpx;
  517. }
  518. }
  519. .search-screen {
  520. width: 40rpx;
  521. height: 40rpx;
  522. margin-left: 30rpx;
  523. .search-screen1 {
  524. width: 100%;
  525. height: 100%;
  526. }
  527. }
  528. }
  529. .content {
  530. .content-tips {
  531. margin: 0 0 20rpx 0;
  532. background: #fff;
  533. box-sizing: border-box;
  534. display: flex;
  535. flex-direction: column;
  536. .content-first {
  537. padding: 20rpx 30rpx;
  538. display: flex;
  539. justify-content: space-between;
  540. background-color: #EEF4FD;
  541. .left {
  542. display: flex;
  543. .img {
  544. margin-right: 10rpx;
  545. width: 52rpx;
  546. height: 52rpx;
  547. background: #FFFFFF;
  548. border: 1px solid #C9C9C9;
  549. border-radius: 50%;
  550. text-align: center;
  551. line-height: 52rpx;
  552. }
  553. .name {
  554. font-weight: 600;
  555. color: #333333;
  556. // margin-left: 20rpx;
  557. margin-top: 11rpx;
  558. }
  559. .status {
  560. width: 110rpx;
  561. height: 42rpx;
  562. background: #FFF9F5;
  563. border-radius: 4rpx;
  564. font-size: 26rpx;
  565. font-weight: 400;
  566. color: #EC8D49;
  567. line-height: 42rpx;
  568. text-align: center;
  569. margin-left: 19rpx;
  570. margin-top: 11rpx;
  571. }
  572. }
  573. .right {
  574. display: flex;
  575. margin-top: 11rpx;
  576. .point {
  577. width: 12rpx;
  578. height: 12rpx;
  579. background: #2B6EFF;
  580. border-radius: 50%;
  581. margin-right: 9rpx;
  582. margin-top: 16rpx;
  583. }
  584. }
  585. }
  586. .content-last {
  587. padding: 24rpx 30rpx;
  588. font-size: 30rpx;
  589. font-weight: 400;
  590. color: #666666;
  591. display: flex;
  592. justify-content: space-between;
  593. .item {
  594. flex-shrink: 0;
  595. display: flex;
  596. align-items: center;
  597. image {
  598. margin-right: 10rpx;
  599. width: 32rpx;
  600. height: 32rpx;
  601. }
  602. text {
  603. font-size: 28rpx;
  604. }
  605. }
  606. }
  607. }
  608. }
  609. // 这是弹出层
  610. .screen {
  611. // box-sizing: border-box;
  612. // padding: 0 30rpx;
  613. position: absolute;
  614. .screen-counselor {
  615. display: flex;
  616. height: 106rpx;
  617. // padding: 40rpx 30rpx 36rpx 30rpx;
  618. padding: 0 30rpx;
  619. box-sizing: border-box;
  620. border-bottom: 1px solid #EEEEEE;
  621. .screen-text {
  622. margin: 40rpx 0 36rpx 0;
  623. font-size: 30rpx;
  624. font-weight: 400;
  625. color: #333333;
  626. line-height: 30rpx;
  627. }
  628. .screen-sel {
  629. display: flex;
  630. justify-content: space-between;
  631. width: 500rpx;
  632. margin-left: 60rpx;
  633. .screen-sel-img {
  634. margin: 40rpx 0 36rpx 0;
  635. width: 14rpx;
  636. height: 30rpx;
  637. }
  638. .screen-inp {
  639. margin-top: 20rpx;
  640. }
  641. }
  642. }
  643. .screen-record {
  644. height: 192rpx;
  645. // width: 100%;
  646. overflow: hidden;
  647. padding: 0 30rpx;
  648. box-sizing: border-box;
  649. border-bottom: 1px solid #EEEEEE;
  650. .screen-record-text {
  651. margin-top: 36rpx;
  652. font-size: 30rpx;
  653. font-weight: 400;
  654. color: #333333;
  655. line-height: 30rpx;
  656. }
  657. .screen-record-tab {
  658. margin-top: 30rpx;
  659. display: flex;
  660. // justify-content: space-around;
  661. .screen-record-chose {
  662. width: 156rpx;
  663. height: 60rpx;
  664. background: #2671E2;
  665. border-radius: 4rpx;
  666. border: 1px solid #2671E2;
  667. text-align: center;
  668. line-height: 60rpx;
  669. margin-right: 22rpx;
  670. color: #FFFFFF;
  671. }
  672. .screen-record-nochose {
  673. width: 156rpx;
  674. height: 60rpx;
  675. background: #FFFFFF;
  676. border-radius: 4rpx;
  677. border: 1px solid #C9C9C9;
  678. text-align: center;
  679. line-height: 60rpx;
  680. margin-right: 22rpx;
  681. }
  682. }
  683. }
  684. .screen-foot {
  685. width: 100%;
  686. height: 100rpx;
  687. display: flex;
  688. .screen-foot-reset {
  689. width: 50%;
  690. text-align: center;
  691. height: 100rpx;
  692. line-height: 100rpx;
  693. font-size: 30rpx;
  694. font-weight: 400;
  695. color: #666666;
  696. }
  697. .screen-foot-sure {
  698. width: 50%;
  699. text-align: center;
  700. line-height: 100rpx;
  701. height: 100rpx;
  702. font-size: 30rpx;
  703. font-weight: 400;
  704. color: #FFFFFF;
  705. background: #2671E2;
  706. }
  707. }
  708. }
  709. </style>