list.vue 12 KB

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