record-club-list.vue 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736
  1. <template>
  2. <view class="container product clearfix">
  3. <view class="container-fiexd-top">
  4. <view class="club-search clearfix">
  5. <view class="search-from name">
  6. <text class="iconfont icon-iconfonticonfontsousuo1"></text>
  7. <input
  8. class="input"
  9. type="text"
  10. confirm-type="search"
  11. v-model="listQuery.search"
  12. @input="onShowClose"
  13. @confirm="getClubRemarksList"
  14. placeholder="搜索关键词/咨询人/机构名称/手机号"
  15. maxlength="16"
  16. />
  17. <text class="iconfont icon-shanchu1" v-if="isShowClose" @click="delInputText()"></text>
  18. </view>
  19. </view>
  20. <view class="fiexd-top-title">
  21. <view class="top-left">
  22. 共 <text>{{ totalRecord }}</text> 条咨询记录
  23. </view>
  24. </view>
  25. </view>
  26. <view class="remarks-content" :style="{ paddingBottom: isIphoneX ? '216rpx' : '168rpx' }">
  27. <view :class="{ 'tui-order-list': scrollTop >= 0 }" class="clearfix">
  28. <!-- 空白页 -->
  29. <view class="empty-container" v-if="isEmpty">
  30. <image class="empty-container-image" :src="StaticUrl + '/icon/icon-remarks-empty@2x.png'"></image>
  31. <text class="error-text">暂无任何数据~</text>
  32. </view>
  33. <!-- 列表 -->
  34. <view
  35. class="tui-remarks-cell tui-mtop clearfix"
  36. v-for="(remark, index) in remarksList"
  37. :key="index"
  38. :class="{ orange: remark.followup == 1, blue: remark.followup == 2, grey: remark.followup == 3 }"
  39. @click.stop="details(remark.remarksId)"
  40. >
  41. <view class="tui-remarks-title">
  42. <view class="tui-remarks-title-top">
  43. <view class="tui-remarks-time tt" :style="{ paddingLeft: remark.newDeal === 1 ? '90rpx' : '0rpx' }"
  44. >
  45. <text class="tags" v-if="remark.newDeal === 1">新分配</text>
  46. {{ remark.clubName }}
  47. </view
  48. >
  49. <view class="tui-remarks-time sm" v-if="remark.followup">
  50. <text
  51. :class="{
  52. orange: remark.followup == 1,
  53. blue: remark.followup == 2,
  54. grey: remark.followup == 3
  55. }"
  56. >{{ remark.followup | followupFilters }}</text
  57. >
  58. </view>
  59. </view>
  60. <view class="tui-remarks-title-bot">
  61. <view class="tui-remarks-text-view">
  62. <view class="tui-remarks-text h"
  63. ><text class="iconfont icon-bianji"></text>记录人:{{ remark.recordName }}</view
  64. >
  65. </view>
  66. <view class="tui-remarks-text-view" v-if="listQuery.manager >= 0">
  67. <view class="tui-remarks-text h"
  68. ><text class="iconfont icon-guanliyuan"></text>管理员:{{
  69. remark.leaderName ? remark.leaderName : ''
  70. }}</view
  71. >
  72. <view class="tui-remarks-text y">{{ remark.addTime }}</view>
  73. </view>
  74. </view>
  75. </view>
  76. <view class="tui-remarks-name">
  77. <view class="tui-remarks-name-text h">
  78. 咨询人:{{ remark.questionMan ? remark.questionMan : '' }}
  79. </view>
  80. <view class="tui-remarks-name-text y">
  81. 咨询类别:{{ remark.consultBack ? remark.consultBack : '无' }}
  82. </view>
  83. </view>
  84. <view class="tui-remarks-name none" v-if="remark.satisfied">
  85. <view class="tui-remarks-name-text h">
  86. 意向程度:<text class="red">{{ remark.satisfied | intenActionsFilters }}</text>
  87. </view>
  88. <view class="tui-remarks-name-text y" v-if="remark.status">
  89. 报备状态:<text
  90. :class="{
  91. reviewed: remark.status == 1,
  92. approved: remark.status == 2,
  93. failed: remark.status == 3
  94. }"
  95. >{{ remark.status | statusFilters }}</text
  96. >
  97. </view>
  98. </view>
  99. <view class="tui-remarks-content">
  100. <text class="tui-remarks-span" v-for="(label, labelIndex) in remark.remarkLabel" :key="labelIndex">
  101. {{ label.label }}
  102. </text>
  103. </view>
  104. <view class="tui-remarks-button" v-if="remark.createServiceProviderId === listQuery.serviceProviderId">
  105. <view class="btn edit" @click.stop="handEditRemark(remark.remarksId)">修改</view>
  106. <view class="btn del" @click.stop="deleteRemark(remark.remarksId)">删除</view>
  107. </view>
  108. </view>
  109. <!--加载loadding-->
  110. <tui-loadmore :visible="loadding" :index="3" type="black" />
  111. <tui-nomore :visible="!pullUpOn" :backgroundColor="'#F7F7F7'" :text="nomoreText" />
  112. <!--加载loadding-->
  113. </view>
  114. </view>
  115. <!-- 弹窗提示 -->
  116. <tui-modal
  117. :show="modal"
  118. @click="handleClick"
  119. @cancel="hideMobel"
  120. :content="contentModalText"
  121. :button="modalButton"
  122. color="#333"
  123. :size="32"
  124. shape="circle"
  125. :maskClosable="false"
  126. />
  127. </view>
  128. </template>
  129. <script>
  130. import { mapState, mapMutations } from 'vuex'
  131. const defaultListQuery = {
  132. clubId: 0,
  133. search:'',
  134. pageNum: 1,
  135. pageSize: 10
  136. }
  137. export default {
  138. data() {
  139. return {
  140. StaticUrl: this.$Static,
  141. isIphoneX: this.$store.state.isIphoneX,
  142. modalButton: [
  143. {
  144. text: '取消',
  145. type: 'gray',
  146. plain: true //是否空心
  147. },
  148. {
  149. text: '确认',
  150. customStyle: {
  151. color: '#fff',
  152. bgColor: 'linear-gradient(90deg, #F28F31 0%, #FF5B00 100%)'
  153. },
  154. plain: false
  155. }
  156. ],
  157. totalRecord: 0,
  158. popupShow: true,
  159. popupShow1: false,
  160. listQuery: Object.assign({}, defaultListQuery),
  161. remarksList: [],
  162. scrollTop: 0,
  163. isEmpty: false,
  164. loadding: false,
  165. pullUpOn: true,
  166. pullFlag: true,
  167. hasNextPage: false,
  168. navbarHeight: '',
  169. nomoreText: '上拉显示更多',
  170. contentModalText: '', //操作文字提示语句
  171. modal: false,
  172. handleRemarksId: 0,
  173. }
  174. },
  175. filters: {
  176. statusFilters(value) {
  177. // 订单来源
  178. const map = {
  179. 1: '待审核',
  180. 2: '审核通过',
  181. 3: '审核未通过'
  182. }
  183. return map[value]
  184. },
  185. followupFilters(value) {
  186. // 订单来源
  187. const map = {
  188. 1: '跟进中',
  189. 2: '跟进完成',
  190. 3: '已放弃'
  191. }
  192. return map[value]
  193. },
  194. intenActionsFilters(value) {
  195. // 意向
  196. if (value) {
  197. const map = {
  198. 1: '意向强烈',
  199. 2: '意向一般',
  200. 3: '意向平淡',
  201. 4: '随便看看'
  202. }
  203. return map[value]
  204. } else {
  205. return ''
  206. }
  207. }
  208. },
  209. onLoad(option) {
  210. console.log('option',option)
  211. this.listQuery.clubId = option.clubId
  212. this.getClubRemarksList()
  213. },
  214. computed: {
  215. ...mapState(['hasLogin', 'userInfo'])
  216. },
  217. methods: {
  218. ...mapMutations(['login', 'logout']),
  219. async getClubRemarksList() {
  220. try{
  221. this.remarksList = []
  222. this.listQuery.pageNum = 1
  223. const res = await this.SellerService.getClubAllRemark(this.listQuery)
  224. const data = res.data
  225. if (data.results && data.results.length > 0) {
  226. this.isEmpty = false
  227. this.hasNextPage = data.hasNextPage
  228. this.totalRecord = data.totalRecord
  229. this.remarksList = data.results
  230. this.pullFlag = false
  231. setTimeout(() => {
  232. this.pullFlag = true
  233. }, 500)
  234. if (this.hasNextPage) {
  235. this.pullUpOn = false
  236. this.nomoreText = '上拉显示更多'
  237. } else {
  238. if (this.remarksList.length < 8) {
  239. this.pullUpOn = true
  240. } else {
  241. this.pullUpOn = false
  242. this.loadding = false
  243. this.nomoreText = '已至底部'
  244. }
  245. }
  246. } else {
  247. this.isEmpty = true
  248. }
  249. this.isRequest = true
  250. }catch(error){
  251. //TODO handle the exception
  252. this.$util.msg(error.msg, 2000)
  253. }
  254. },
  255. async GetOnReachBottomData(index) {
  256. //上拉加载
  257. try{
  258. this.listQuery.pageNum ++
  259. const res = await this.SellerService.getClubAllRemark(this.listQuery)
  260. const data = res.data
  261. if (data.results && data.results.length > 0) {
  262. this.hasNextPage = data.hasNextPage
  263. this.remarksList = this.remarksList.concat(data.results)
  264. this.pullFlag = false // 防上拉暴滑
  265. setTimeout(() => {
  266. this.pullFlag = true
  267. }, 500)
  268. if (this.hasNextPage) {
  269. this.pullUpOn = false
  270. this.nomoreText = '上拉显示更多'
  271. } else {
  272. this.pullUpOn = false
  273. this.loadding = false
  274. this.nomoreText = '已至底部'
  275. }
  276. }
  277. }catch(error){
  278. //TODO handle the exception
  279. this.$util.msg(error.msg, 2000)
  280. }
  281. },
  282. deleteRemark(remarksId) {
  283. this.handleRemarksId = remarksId
  284. this.modal = true
  285. this.contentModalText = '确定删除这条记录吗?'
  286. },
  287. handEditRemark(remarksId) {
  288. //跳转修改客户咨询记录
  289. this.$api.navigateTo(`/pages/seller/remarks/add?type=edit&remarksId=${remarksId}`)
  290. },
  291. handleChoiceaClubData(data) {
  292. //跳转添加记录
  293. this.$api.navigateTo(`/pages/seller/remarks/add?userId=${data.userId}`)
  294. },
  295. handleClick(e) {
  296. //确认删除
  297. if (e.index == 1) {
  298. this.handleDeleteUserLike()
  299. }
  300. this.modal = false
  301. },
  302. handleDeleteUserLike() {
  303. //操作删除资料备注
  304. this.UserService.getUserClubRemarksDelete({
  305. remarksId: this.handleRemarksId
  306. })
  307. .then(response => {
  308. this.$util.msg('已删除', 2000, true, 'success')
  309. setTimeout(() => {
  310. this.getClubRemarksList()
  311. }, 2000)
  312. })
  313. .catch(error => {
  314. this.$util.msg(error.msg, 2000)
  315. })
  316. },
  317. onShowClose() {
  318. //输入框失去焦点时触发
  319. if (this.listQuery.keyWord != '') {
  320. this.isShowClose = true
  321. } else {
  322. this.isShowClose = false
  323. this.listQuery.pageNum = 1
  324. this.getClubRemarksList()
  325. }
  326. },
  327. delInputText() {
  328. //清除输入框内容
  329. this.listQuery.keyWord = ''
  330. this.isShowClose = false
  331. this.listQuery.pageNum = 1
  332. this.getClubRemarksList()
  333. },
  334. hideMobel() {
  335. this.modal = false
  336. },
  337. details(remarksId) {
  338. this.$api.navigateTo(`/pages/seller/remarks/details?remarksId=${remarksId}`)
  339. },
  340. handlerGoReportList() {
  341. this.$api.navigateTo(`/pages/seller/remarks/report-list`)
  342. }
  343. },
  344. onPageScroll(e) {
  345. //实时获取到滚动的值
  346. },
  347. onReachBottom() {
  348. if (this.hasNextPage) {
  349. this.loadding = true
  350. this.pullUpOn = true
  351. this.GetOnReachBottomData()
  352. }
  353. },
  354. onPullDownRefresh() {
  355. setTimeout(() => {
  356. this.listQuery.pageNum = 1
  357. uni.stopPullDownRefresh()
  358. }, 200)
  359. },
  360. onShow() {
  361. }
  362. }
  363. </script>
  364. <style lang="scss">
  365. @import '@/uni.scss';
  366. page {
  367. background: #f7f7f7;
  368. }
  369. .empty-container {
  370. z-index: 99;
  371. }
  372. .container-fiexd-top {
  373. width: 100%;
  374. height: 208rpx;
  375. background: #f5f5f5;
  376. box-sizing: border-box;
  377. position: fixed;
  378. top: 0;
  379. left: 0;
  380. z-index: 982;
  381. .club-search {
  382. width: 100%;
  383. height: 112rpx;
  384. padding: 24rpx;
  385. background: #ffffff;
  386. box-sizing: border-box;
  387. .search-screen {
  388. width: 152rpx;
  389. height: 64rpx;
  390. float: right;
  391. box-sizing: border-box;
  392. padding: 0 20rpx;
  393. border: 1px solid #999999;
  394. line-height: 64rpx;
  395. border-radius: 32rpx;
  396. color: #333333;
  397. text-align: center;
  398. font-size: 28rpx;
  399. .icon-gengduo1 {
  400. font-size: 30rpx;
  401. margin-right: 10rpx;
  402. }
  403. }
  404. .search-from {
  405. width: 526rpx;
  406. height: 100%;
  407. background: #f7f7f7;
  408. border-radius: 32rpx;
  409. float: left;
  410. position: relative;
  411. .input {
  412. width: 420rpx;
  413. height: 64rpx;
  414. float: left;
  415. line-height: 64rpx;
  416. color: $text-color;
  417. font-size: $font-size-24;
  418. }
  419. .icon-iconfonticonfontsousuo1 {
  420. width: 64rpx;
  421. height: 64rpx;
  422. line-height: 64rpx;
  423. text-align: center;
  424. display: block;
  425. font-size: $font-size-38;
  426. float: left;
  427. color: #999999;
  428. }
  429. .icon-shanchu1 {
  430. font-size: $font-size-32;
  431. color: #999999;
  432. position: absolute;
  433. width: 64rpx;
  434. height: 64rpx;
  435. line-height: 64rpx;
  436. text-align: center;
  437. top: 0;
  438. right: 0;
  439. z-index: 10;
  440. }
  441. }
  442. }
  443. .fiexd-top-title {
  444. width: 100%;
  445. height: 96rpx;
  446. box-sizing: border-box;
  447. padding: 24rpx;
  448. .top-left {
  449. float: left;
  450. line-height: 48rpx;
  451. font-size: 26rpx;
  452. color: #666666;
  453. text {
  454. color: #FF5B00;
  455. }
  456. }
  457. }
  458. }
  459. .remarks-content {
  460. width: 100%;
  461. height: auto;
  462. position: relative;
  463. padding: 0;
  464. box-sizing: border-box;
  465. padding: 24rpx;
  466. padding-top: 232rpx;
  467. .empty-container-image {
  468. width: 260rpx;
  469. height: 260rpx;
  470. margin-top: -300rpx;
  471. }
  472. .tui-remarks-cell {
  473. width: 100%;
  474. border-radius: 16rpx;
  475. margin-bottom: 24rpx;
  476. background: #ffffff;
  477. box-sizing: border-box;
  478. padding: 0 24rpx 24rpx 24rpx;
  479. &.orange {
  480. background: #ffffff linear-gradient(180deg, #ffede5 0%, rgba(255, 255, 255, 0) 50%);
  481. }
  482. &.blue {
  483. background: #ffffff linear-gradient(180deg, #deefff 0%, rgba(255, 255, 255, 0) 50%);
  484. }
  485. &.grey {
  486. background: #ffffff linear-gradient(180deg, #ececec 0%, rgba(255, 255, 255, 0) 50%);
  487. }
  488. .tui-remarks-title {
  489. width: 100%;
  490. height: auto;
  491. box-sizing: border-box;
  492. padding: 20rpx 0;
  493. border-bottom: 1px solid #e1e1e1;
  494. float: left;
  495. .tui-remarks-title-top {
  496. width: 100%;
  497. height: 56rpx;
  498. line-height: 56rpx;
  499. float: left;
  500. .tui-remarks-time {
  501. float: left;
  502. box-sizing: border-box;
  503. position: relative;
  504. &.tt {
  505. width: 58%;
  506. font-size: $font-size-32;
  507. color: #333333;
  508. text-align: left;
  509. text-overflow: ellipsis;
  510. overflow: hidden;
  511. display: -webkit-box;
  512. -webkit-line-clamp: 1;
  513. line-clamp: 1;
  514. -webkit-box-orient: vertical;
  515. font-weight: bold;
  516. .tags {
  517. display: inline-block;
  518. padding: 0 10rpx;
  519. border-radius: 8rpx;
  520. line-height: 36rpx;
  521. font-size: 22rpx;
  522. background-color: #f94b4b;
  523. color: #ffffff;
  524. text-align: center;
  525. font-weight: normal;
  526. position: absolute;
  527. left: 0;
  528. top: 10rpx;
  529. }
  530. }
  531. &.sm {
  532. width: 40%;
  533. font-size: $font-size-26;
  534. color: #999999;
  535. text-align: right;
  536. .orange {
  537. display: inline-block;
  538. padding: 0 15rpx;
  539. border-radius: 24rpx;
  540. line-height: 48rpx;
  541. font-size: 24rpx;
  542. background-color: #FF5B00;
  543. color: #ffffff;
  544. text-align: center;
  545. }
  546. .blue {
  547. display: inline-block;
  548. padding: 0 15rpx;
  549. border-radius: 24rpx;
  550. line-height: 48rpx;
  551. font-size: 24rpx;
  552. background-color: #1890f9;
  553. color: #ffffff;
  554. text-align: center;
  555. }
  556. .grey {
  557. display: inline-block;
  558. padding: 0 15rpx;
  559. border-radius: 24rpx;
  560. line-height: 48rpx;
  561. font-size: 24rpx;
  562. background-color: #e1e1e1;
  563. color: #999999;
  564. text-align: center;
  565. }
  566. }
  567. }
  568. }
  569. .tui-remarks-title-bot {
  570. width: 100%;
  571. height: auto;
  572. float: left;
  573. .tui-remarks-text-view {
  574. width: 100%;
  575. height: 48rpx;
  576. .tui-remarks-text {
  577. width: 50%;
  578. height: 48rpx;
  579. line-height: 48rpx;
  580. box-sizing: border-box;
  581. text-align: left;
  582. font-size: $font-size-26;
  583. color: #999999;
  584. float: left;
  585. text-overflow: ellipsis;
  586. overflow: hidden;
  587. display: -webkit-box;
  588. -webkit-line-clamp: 1;
  589. line-clamp: 1;
  590. -webkit-box-orient: vertical;
  591. &.a {
  592. width: 100%;
  593. }
  594. &.y {
  595. text-align: right;
  596. }
  597. }
  598. }
  599. }
  600. }
  601. .tui-remarks-name {
  602. width: 100%;
  603. height: 48rpx;
  604. line-height: 48rpx;
  605. font-size: $font-size-26;
  606. color: #666666;
  607. text-align: left;
  608. margin-bottom: 10rpx;
  609. margin-top: 20rpx;
  610. float: left;
  611. &.none {
  612. margin-top: 0;
  613. margin-bottom: 20rpx;
  614. }
  615. .tui-remarks-name-text {
  616. height: 48rpx;
  617. box-sizing: border-box;
  618. text-align: left;
  619. font-size: $font-size-26;
  620. color: #333333;
  621. float: left;
  622. text-overflow: ellipsis;
  623. overflow: hidden;
  624. display: -webkit-box;
  625. -webkit-line-clamp: 1;
  626. line-clamp: 1;
  627. -webkit-box-orient: vertical;
  628. .red {
  629. color: #f94b4b;
  630. }
  631. &.a {
  632. width: 100%;
  633. }
  634. &.h {
  635. width: 40%;
  636. padding-right: 24rpx;
  637. }
  638. &.y {
  639. width: 60%;
  640. padding-left: 24rpx;
  641. .reviewed{
  642. color: #FF5B00;
  643. }
  644. .approved{
  645. color: #0DB26D;
  646. }
  647. .failed{
  648. color: #F94B4B;
  649. }
  650. }
  651. }
  652. }
  653. .tui-remarks-content {
  654. width: 100%;
  655. height: auto;
  656. .tui-remarks-span {
  657. height: 48rpx;
  658. line-height: 48rpx;
  659. text-align: center;
  660. padding: 0 20rpx;
  661. background-color: #f7f7f7;
  662. font-size: $font-size-26;
  663. color: #666666;
  664. border-radius: 25rpx;
  665. display: inline-block;
  666. margin-right: 24rpx;
  667. margin-bottom: 24rpx;
  668. &:nth-child(4n) {
  669. margin-right: none;
  670. }
  671. }
  672. }
  673. .tui-remarks-button {
  674. width: 100%;
  675. height: 68rpx;
  676. border-top: 1px solid #e1e1e1;
  677. padding-top: 20rpx;
  678. .btn {
  679. width: 50%;
  680. line-height: 48rpx;
  681. box-sizing: border-box;
  682. text-align: center;
  683. font-size: $font-size-34;
  684. float: left;
  685. font-weight: bold;
  686. &.edit {
  687. color: #1890f9;
  688. border-right: 1px solid #e1e1e1;
  689. }
  690. &.del {
  691. color: #f94b4b;
  692. }
  693. }
  694. }
  695. }
  696. }
  697. .tui-popup-box {
  698. position: relative;
  699. box-sizing: border-box;
  700. min-height: 100rpx;
  701. padding: 6rpx 24rpx;
  702. .tui-popup-content {
  703. padding-top: 30rpx;
  704. }
  705. }
  706. .tui-popup-btn {
  707. width: 100%;
  708. height: auto;
  709. float: left;
  710. box-sizing: border-box;
  711. margin-top: 30rpx;
  712. .tui-button {
  713. width: 600rpx;
  714. height: 88rpx;
  715. background: $btn-confirm;
  716. line-height: 88rpx;
  717. text-align: center;
  718. color: #ffffff;
  719. font-size: $font-size-28;
  720. border-radius: 44rpx;
  721. margin: 0 auto;
  722. }
  723. .tui-button-text {
  724. width: 600rpx;
  725. height: 48rpx;
  726. line-height: 48rpx;
  727. text-align: center;
  728. color: #FF5B00;
  729. font-size: $font-size-26;
  730. margin: 0 auto;
  731. margin-top: 15rpx;
  732. }
  733. }
  734. </style>