list.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555
  1. <template>
  2. <view class="scoped-box">
  3. <wm-watermark :text="userInfo2.phone" :num="50"></wm-watermark>
  4. <u-navbar
  5. :customBack="customBack"
  6. back-icon-color="#fff"
  7. :title="`报备列表(${curTotal})`"
  8. :background="{ backgroundColor: '#2080f0' }"
  9. title-color="#fff"
  10. :border-bottom="false"
  11. ></u-navbar>
  12. <!-- 顶部筛选栏 -->
  13. <HM-filterDropdown :menuTop="menuTop" :filterData="filterData" :defaultSelected="filterDropdownValue" @confirm="confirmFilter"></HM-filterDropdown>
  14. <view class="customer-list-wrap">
  15. <view v-if="customerList.length == 0" class="empty-wrap"><u-empty mode="list" text="暂无相关客户"></u-empty></view>
  16. <view v-for="(item, index) in customerList" class="customer-item" :key="index">
  17. <view class="info" @click="listItemHandle(item)">
  18. <view class="customer">
  19. <view class="relname">
  20. {{ item.name }}
  21. <u-icon
  22. class="u-m-l-5"
  23. :name="item.sex == 'male' ? 'man' : 'woman'"
  24. size="28"
  25. :color="item.sex == 'male' ? '#2080f0' : '#f85f69'"
  26. ></u-icon>
  27. </view>
  28. <view class="item">
  29. <u-icon class="u-m-r-5" name="phone" size="28"></u-icon>
  30. {{ item.phone }}
  31. </view>
  32. <view class="item">
  33. <u-icon class="u-m-r-5" name="home" size="28"></u-icon>
  34. {{ item.estate_name }}
  35. </view>
  36. <!-- <view class="item">
  37. <u-icon class="u-m-r-5" name="rmb" size="22"></u-icon>
  38. 预期最高收益{{ item.commission }}元
  39. </view> -->
  40. </view>
  41. <view class="data-wrap">
  42. <view class="date u-m-t-5">报备时间:{{item.create_at}}</view>
  43. <view class="date" v-if="item.lock_at">保护期截止:{{item.lock_at}}</view>
  44. </view>
  45. </view>
  46. <view class="tool-wrap">
  47. <view class="tag">
  48. <u-tag
  49. :text="item.report_state == 3 ? '无效客户' : item.report_state == 2 ? '审核中' : '有效客户'"
  50. :type="item.report_state == 3 ? 'error' : item.report_state == 2 ? 'warning' : 'success'"
  51. size="mini"
  52. class="u-m-r-10"
  53. ></u-tag>
  54. <u-tag
  55. v-if="item.report_state == 1"
  56. :text="stepList[item.report_step]"
  57. :type="Number(item.report_step) > 1 ? 'success' : 'warning'"
  58. size="mini"
  59. ></u-tag>
  60. <u-icon
  61. v-if="item.report_state == 3"
  62. name="reload"
  63. size="32"
  64. label="重新报备"
  65. label-size="24"
  66. color="#f00"
  67. label-color="#f00"
  68. @click="pageTo('/pages/agent/recommend/create', { info: item })"
  69. ></u-icon>
  70. </view>
  71. <!-- v-if="curRoles == 1 || curRoles == 3 || curRoles == 5 || curRoles == 6" -->
  72. <view class="scoped-list-more-info">
  73. <text @click="dial(item.create_user.phone)">报备人:{{item.create_user.nickname}}</text>
  74. <u-tag
  75. @click="copyTextHandle(item)"
  76. style="margin-left: 10px;"
  77. text="复制"
  78. type="primary"
  79. size="mini"
  80. ></u-tag>
  81. </view>
  82. </view>
  83. </view>
  84. </view>
  85. <view class="float-search" @click="searchPopupShow = true"><u-icon name="search" size="42" color="#fff"></u-icon></view>
  86. <!-- 平台佣金政策弹窗 -->
  87. <u-popup v-model="searchPopupShow" mode="center" width="80%" height="440rpx" border-radius="20">
  88. <view class="bwin-popup">
  89. <view class="popup-header">客户搜索</view>
  90. <view class="popup-body">
  91. <u-input v-model="searchFormData.name" border placeholder="请输入客户姓名(支持模糊搜索)"></u-input>
  92. <u-divider marginTop="10" marginBottom="10">或</u-divider>
  93. <u-input v-model="searchFormData.phone" border placeholder="请输入客户手机号(可仅输入一部分)"></u-input>
  94. </view>
  95. <view class="popup-footer" style="position: absolute;">
  96. <u-button size="medium" @click="searchPopupShow = false">取消</u-button>
  97. <u-button size="medium" type="primary" @click="searchHandle()">搜索</u-button>
  98. </view>
  99. </view>
  100. </u-popup>
  101. <u-loadmore
  102. v-if="customerList.length > 0"
  103. marginTop="32"
  104. :line="true"
  105. :status="loadmore.status"
  106. :loading-text="loadmore.loadingText"
  107. :loadmore-text="loadmore.defaultText"
  108. :nomore-text="loadmore.nomoreText"
  109. />
  110. </view>
  111. </template>
  112. <script>
  113. import wmWatermark from '@/components/wm-watermark/wm-watermark.vue'
  114. import uniCopy from '@/js_sdk/xb-copy/uni-copy.js'
  115. var that;
  116. export default {
  117. components: {
  118. wmWatermark
  119. },
  120. data() {
  121. return {
  122. searchKeyword: null,
  123. searchPopupShow: false,
  124. searchFormData: {
  125. name: '',
  126. phone: ''
  127. }, // 搜索栏数据
  128. menuTop: 110, // 筛选栏距顶部距离
  129. filterData: [
  130. {
  131. name: '日期范围',
  132. type: 'hierarchy',
  133. submenu: [
  134. {
  135. name: '全部',
  136. value: 0
  137. },
  138. {
  139. name: '24小时内',
  140. value: 24
  141. },
  142. {
  143. name: '7天内',
  144. value: 168
  145. },
  146. {
  147. name: '30天内',
  148. value: 720
  149. }
  150. ]
  151. },
  152. {
  153. name: '意向项目',
  154. type: 'hierarchy',
  155. submenu: [
  156. {
  157. name: '全部',
  158. value: 999
  159. }
  160. ]
  161. },
  162. {
  163. name: '客户状态',
  164. type: 'hierarchy',
  165. submenu: [
  166. {
  167. name: '全部状态',
  168. value: 999
  169. },
  170. {
  171. name: '有效',
  172. value: 1
  173. },
  174. {
  175. name: '审核中',
  176. value: 2
  177. },
  178. {
  179. name: '无效',
  180. value: 3
  181. }
  182. ]
  183. },
  184. {
  185. name: '客户进度',
  186. type: 'hierarchy',
  187. submenu: [
  188. {
  189. name: '全部进度',
  190. value: 999
  191. },
  192. {
  193. name: '未到访',
  194. value: 1
  195. },
  196. {
  197. name: '已到访',
  198. value: 2
  199. },
  200. {
  201. name: '已认购',
  202. value: 3
  203. },
  204. {
  205. name: '已签约',
  206. value: 4
  207. },
  208. {
  209. name: '已结佣',
  210. value: 5
  211. }
  212. ]
  213. },
  214. {
  215. name: '排序',
  216. type: 'hierarchy',
  217. submenu: [
  218. {
  219. name: '时间近到远',
  220. value: 1
  221. },
  222. {
  223. name: '时间远到近',
  224. value: 2
  225. },
  226. // {
  227. // name: '预期佣金高到底',
  228. // value: 2
  229. // },
  230. // {
  231. // name: '预期佣金低到高',
  232. // value: 3
  233. // }
  234. ]
  235. }
  236. ],
  237. filterHours: 0,
  238. filterPropertyId: 999,
  239. filterVerifyStatus: 999,
  240. filterStepStatus: 999,
  241. orderMethod: 0,
  242. filterDropdownValue: {}, // 默认筛选
  243. customerList: [], // 客户列表
  244. stepList: ['审核中', '未到访', '已到访', '已认购', '已签约', '已结佣'],
  245. loadmore: {
  246. status: 'loadmore',
  247. loadingText: '努力加载中',
  248. defaultText: '轻轻上拉 查看更多',
  249. nomoreText: '实在没有了',
  250. currnetPage: 1
  251. },
  252. curRoles: '',
  253. userInfo2: {},
  254. curTotal: 0,
  255. };
  256. },
  257. onLoad(params) {
  258. that = this;
  259. // #ifdef H5
  260. that.menuTop = 88;
  261. // #endif
  262. // #ifdef MP
  263. let systemInfo = wx.getSystemInfoSync();
  264. //状态栏高度
  265. let statusBarHeight = Number(systemInfo.statusBarHeight);
  266. let menu = wx.getMenuButtonBoundingClientRect();
  267. //导航栏高度
  268. let navBarHeight = menu.height + (menu.top - statusBarHeight) * 2;
  269. //状态栏加导航栏高度
  270. let navStatusBarHeight = statusBarHeight + menu.height + (menu.top - statusBarHeight) * 2; // 现在是px
  271. let rpxHeight = parseInt((navStatusBarHeight * 750) / systemInfo.windowWidth);
  272. rpxHeight = Math.ceil(rpxHeight / 10) * 10;
  273. that.menuTop = rpxHeight;
  274. // console.log(that.menuTop);
  275. // #endif
  276. // 默认筛选项
  277. if (params.filterStepStatus !== undefined) {
  278. that.filterStepStatus = parseInt(params.filterStepStatus);
  279. this.filterDropdownValue = [[],[],[],[that.filterStepStatus],[]]
  280. }
  281. // 项目筛选
  282. uni.api.estate.apiestatelist({page_size: 100}).then(res => {
  283. let propertyList = res.list || []
  284. if (propertyList.length > 0) {
  285. that.filterData[1]['submenu'] = propertyList.map(function(val, index) {
  286. return { name: val.estate_name, value: val.estate_id };
  287. });
  288. that.filterData[1]['submenu'].unshift({ value: 999, name: '全部' });
  289. }
  290. })
  291. this.getDataList()
  292. this.userInfo2 = uni.getStorageSync('MD_userInfo2')
  293. this.curRoles = uni.getStorageSync('MD_userInfo2') ? uni.getStorageSync('MD_userInfo2').roles : ''
  294. },
  295. onReachBottom() {
  296. if (that.loadmore.status == 'nomore') return;
  297. that.loadmore.currnetPage++
  298. this.getDataList()
  299. },
  300. onPullDownRefresh() {
  301. // 防止频繁刷新
  302. },
  303. methods: {
  304. dial(tel) {
  305. uni.makePhoneCall({
  306. phoneNumber: tel
  307. });
  308. },
  309. listItemHandle (item) {
  310. if (item.report_state == 2) {
  311. if (this.curRoles == 1 || this.curRoles == 5 || this.curRoles == 7) {
  312. uni.$msgConfirm('当前客户报备审核中,是否前往审核?', () => {
  313. uni.navigateTo({
  314. url: `/pages/agent/recommend/check?id=${item.id}&name=${item.name}-${item.phone}`
  315. })
  316. })
  317. } else {
  318. uni.$msgConfirm('当前客户报备审核中~')
  319. }
  320. } else {
  321. uni.navigateTo({
  322. url: '/pages/agent/recommend/detail?id=' + item.id
  323. })
  324. }
  325. },
  326. copyTextHandle (item) {
  327. // return
  328. uniCopy({
  329. content: `项目:${item.estate_name}
  330. 客户姓氏:${item.name}${item.sex == 'male'?'先生':'女士'}
  331. 客户联系方式:${item.phone}
  332. 经纪人姓氏:${item.create_user.nickname}
  333. 经纪人联系方式:${item.create_user.phone}
  334. 预计到访时间:尽快`,
  335. success:(res)=>{
  336. uni.showToast({
  337. title: res,
  338. icon: 'none'
  339. })
  340. },
  341. error:(e)=>{
  342. uni.showToast({
  343. title: e,
  344. icon: 'none',
  345. duration:3000,
  346. })
  347. }
  348. })
  349. },
  350. getDataList (bc) {
  351. const that = this
  352. let params = {
  353. ...this.searchFormData
  354. }
  355. if (that.filterHours > 0) {
  356. let d = +new Date()
  357. params.start_at = parseInt((d - 1000 * 60 * 60 * that.filterHours) / 1000)
  358. params.end_at = parseInt(d / 1000)
  359. }
  360. if (that.filterVerifyStatus < 999) {
  361. params.report_state = that.filterVerifyStatus
  362. }
  363. if (that.filterStepStatus < 999) {
  364. params.report_step = that.filterStepStatus
  365. }
  366. if (that.filterPropertyId < 999) {
  367. params.estate_id = that.filterPropertyId
  368. }
  369. if (that.orderMethod > 0) {
  370. if (that.orderMethod === 1) {
  371. params.order_by = JSON.stringify([{
  372. field: 'create_at',
  373. sort: 'desc',
  374. }])
  375. }
  376. if (that.orderMethod === 2) {
  377. params.order_by = JSON.stringify([{
  378. field: 'create_at',
  379. sort: 'asc',
  380. }])
  381. }
  382. }
  383. uni.api.estate.apireportlist({
  384. page: that.loadmore.currnetPage,
  385. ...params,
  386. }).then(res => {
  387. this.curTotal = res.total || 0
  388. const list = res.list || []
  389. if (list.length < 10) {
  390. that.loadmore.status = 'nomore';
  391. }
  392. if (res.current_page === 1) {
  393. if (list.length === 0) {
  394. uni.$msg('无搜索结果', 'none');
  395. }
  396. that.customerList = [...list]
  397. } else {
  398. that.customerList = that.customerList.concat(list)
  399. }
  400. if (bc) bc()
  401. })
  402. },
  403. customBack() {
  404. // uni.navigateBack();
  405. uni.reLaunch({
  406. url: '/pages/index/index'
  407. })
  408. },
  409. // 带监听器跳转
  410. pageTo(url, data) {
  411. /// xxxxx
  412. uni.navigateTo({
  413. url: url,
  414. events: {
  415. // 为指定事件添加一个监听器,获取被打开页面传送到当前页面的数据
  416. update: function(data) {
  417. // 当B页面运行 eventChannel.emit('update', { a:1 }); 时,会运行这里的代码逻辑。
  418. }
  419. },
  420. success: function(res) {
  421. // 通过eventChannel向被打开页面传送数据
  422. res.eventChannel.emit('data', data);
  423. }
  424. });
  425. },
  426. searchHandle() {
  427. this.loadmore.currnetPage = 1
  428. this.getDataList(() => {
  429. this.searchPopupShow = false
  430. })
  431. },
  432. // 筛选
  433. confirmFilter(e) {
  434. if (e['value'][0][0] !== null) that.filterHours = e['value'][0][0];
  435. if (e['value'][1][0] !== null) that.filterPropertyId = e['value'][1][0];
  436. if (e['value'][2][0] !== null) that.filterVerifyStatus = e['value'][2][0];
  437. if (e['value'][3][0] !== null) that.filterStepStatus = e['value'][3][0];
  438. if (e['value'][4][0] !== null) that.orderMethod = e['value'][4][0];
  439. that.loadmore.currnetPage = 1;
  440. this.getDataList()
  441. },
  442. getTime(n) {
  443. let date = n ? new Date(n) : new Date()
  444. let year = date.getFullYear()
  445. let month = date.getMonth() + 1
  446. month = month > 9 ? month : '0' + month
  447. let day = date.getDate()
  448. day = day > 9 ? day : '0' + day
  449. let hour = date.getHours()
  450. hour = hour > 9 ? hour : '0' + hour
  451. let minute = date.getMinutes()
  452. minute = minute > 9 ? minute : '0' + minute
  453. let second = date.getSeconds()
  454. second = second > 9 ? second : '0' + second
  455. return `${year}-${month}-${day} ${hour}:${minute}:${second}`
  456. },
  457. }
  458. };
  459. </script>
  460. <style lang="scss">
  461. .scoped-box {
  462. font-size: 30rpx;
  463. }
  464. .search-wrap {
  465. padding: 20rpx;
  466. }
  467. .filter-wrap {
  468. position: relative;
  469. }
  470. // 列表
  471. .customer-list-wrap {
  472. margin-top: 80rpx;
  473. width: 100%;
  474. .customer-item {
  475. display: flex;
  476. flex-direction: column;
  477. align-items: flex-start;
  478. font-size: $u-p;
  479. color: $u-content-color;
  480. border-bottom: 1rpx solid $u-border-color;
  481. padding: 24rpx 32rpx;
  482. .info {
  483. display: flex;
  484. align-items: flex-start;
  485. justify-content: space-between;
  486. width: 100%;
  487. margin-bottom: 10rpx;
  488. .customer {
  489. display: flex;
  490. flex-direction: column;
  491. align-items: flex-start;
  492. .relname {
  493. color: $u-main-color;
  494. font-size: 34rpx;
  495. font-weight: bold;
  496. margin-bottom: 10rpx;
  497. }
  498. .item {
  499. margin-bottom: 10rpx;
  500. }
  501. }
  502. .data-wrap {
  503. text-align: right;
  504. .date {
  505. font-size: $u-sub;
  506. }
  507. }
  508. }
  509. .tool-wrap {
  510. display: flex;
  511. align-items: center;
  512. justify-content: space-between;
  513. width: 100%;
  514. }
  515. }
  516. }
  517. .float-search {
  518. opacity: 0.9;
  519. position: fixed;
  520. right: 20rpx;
  521. bottom: 40rpx;
  522. padding: 20rpx;
  523. border-radius: 50%;
  524. background-color: $u-theme-color;
  525. }
  526. .scoped-list-more-info {
  527. position: absolute;
  528. right: 20rpx;
  529. font-size: 24rpx;
  530. }
  531. </style>