index.vue 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674
  1. <template>
  2. <view class="page u-skeleton">
  3. <!-- 经纪人信息卡片 -->
  4. <view class="userinfo-wrap u-skeleton-fillet box-shadow">
  5. <!-- 个人信息 -->
  6. <view class="userinfo">
  7. <view class="user">
  8. <view class="avatar-wrap">
  9. <u-avatar
  10. class="u-skeleton-circle"
  11. :src="userInfo.avatar"
  12. size="128"
  13. mode="circle"
  14. ></u-avatar>
  15. <!-- :show-level="true" -->
  16. <view class="avatar-bg box-shadow"></view>
  17. </view>
  18. <view class="info">
  19. <view class="nickname u-skeleton-rect">
  20. {{userInfo.user_id ? userInfo.nickname ? userInfo.nickname : '未设置用户名' : '未登录'}}
  21. </view>
  22. </view>
  23. <image v-if="userInfo && userInfo.manage_type == 2" src="../../static/bg_scan.png" class="scoped-scan-img" @click="scanHandle"></image>
  24. </view>
  25. <u-button
  26. v-if="!userInfo.user_id"
  27. class="u-skeleton-fillet"
  28. size="mini"
  29. type="primary"
  30. @click="pageTo('/pages/user/login/login')"
  31. :customStyle="{ margin: 0 }"
  32. >
  33. 立即登录
  34. </u-button>
  35. <u-button
  36. v-if="userInfo.user_id"
  37. <u-icon name="/static/icon/setting.png" size="24"></u-icon>
  38. </u-button>
  39. </view>
  40. <u-line length="650rpx" margin="30rpx 0 0"></u-line>
  41. <!-- 数据信息 -->
  42. <view class="datainfo">
  43. <view class="data-item" @click="pageTo('/pages/agent/recommend/list?filterStepStatus=1')">
  44. <view class="data u-skeleton-fillet">{{reportStepCountObj['1'] || 0}}</view>
  45. <view class="item u-skeleton-fillet">未到访</view>
  46. </view>
  47. <view class="data-item" @click="pageTo('/pages/agent/recommend/list?filterStepStatus=2')">
  48. <view class="data u-skeleton-fillet">{{reportStepCountObj['2'] || 0}}</view>
  49. <view class="item u-skeleton-fillet">已到访</view>
  50. </view>
  51. <view class="data-item" @click="pageTo('/pages/agent/recommend/list?filterStepStatus=3')">
  52. <view class="data u-skeleton-fillet">{{reportStepCountObj['3'] || 0}}</view>
  53. <view class="item u-skeleton-fillet">已认筹</view>
  54. </view>
  55. <view class="data-item" @click="pageTo('/pages/agent/recommend/list?filterStepStatus=4')">
  56. <view class="data u-skeleton-fillet">
  57. {{reportStepCountObj['4'] || 0}}
  58. </view>
  59. <view class="item u-skeleton-fillet">已转签</view>
  60. </view>
  61. <view class="data-item" @click="pageTo('/pages/agent/recommend/list?filterStepStatus=5')">
  62. <view class="data u-skeleton-fillet">{{reportStepCountObj['5'] || 0}}</view>
  63. <view class="item u-skeleton-fillet">已结佣</view>
  64. </view>
  65. </view>
  66. </view>
  67. <!-- 功能卡片 -->
  68. <view class="function-card-wrap">
  69. <view class="col-card-wrap">
  70. <view class="function-card box-shadow u-skeleton-fillet" @click="pageTo('/pages/agent/recommend/create')">
  71. <view class="title-wrap">
  72. <view class="main-title">
  73. <u-icon class="u-m-r-5" name="/static/icon/thump-up.png" size="32"></u-icon>
  74. ️我要推荐
  75. </view>
  76. <view class="sub-title u-line-1">Recommend</view>
  77. </view>
  78. <u-image src="/static/icon/wenli1.png" mode="heightFix" height="144rpx" class="icon"></u-image>
  79. </view>
  80. <view class="function-card box-shadow u-skeleton-fillet" @click="pageTo('/pages/agent/recommend/list')">
  81. <view class="title-wrap">
  82. <view class="main-title">
  83. <u-icon class="u-m-r-5" name="/static/icon/money.png" size="32"></u-icon>
  84. 我的报备
  85. </view>
  86. <view class="sub-title u-line-1">Filing</view>
  87. </view>
  88. <u-image src="/static/icon/wenli2.png" mode="heightFix" height="144rpx" class="icon"></u-image>
  89. </view>
  90. </view>
  91. <view class="col-card-wrap">
  92. <view class="function-card box-shadow u-skeleton-fillet" @click="pageTo('/pages/cust/list')">
  93. <view class="title-wrap">
  94. <view class="main-title">
  95. <u-icon class="u-m-r-5" name="/static/icon/customer.png" size="32"></u-icon>
  96. 我的客户
  97. </view>
  98. <view class="sub-title u-line-1">Customer</view>
  99. </view>
  100. <u-image src="/static/icon/wenli3.png" mode="heightFix" height="144rpx" class="icon"></u-image>
  101. </view>
  102. <view class="function-card box-shadow u-skeleton-fillet" @click="commonRulesShow = true">
  103. <view class="title-wrap">
  104. <view class="main-title">
  105. <u-icon class="u-m-r-5" name="/static/icon/book.png" size="32"></u-icon>
  106. 佣金政策
  107. </view>
  108. <view class="sub-title u-line-1">Rules</view>
  109. </view>
  110. <u-image src="/static/icon/wenli4.png" mode="heightFix" height="144rpx" class="icon"></u-image>
  111. </view>
  112. </view>
  113. </view>
  114. <!-- 项目卡片 -->
  115. <view class="card-list-wrap box-shadow u-m-b-20">
  116. <view class="header-title-warp">
  117. <view class="title u-skeleton-rect">
  118. <u-icon class="u-m-r-5" name="/static/icon/fire.png" size="36"></u-icon>
  119. 高佣热销
  120. </view>
  121. <view v-show="propertyList.length > 5" class="more u-skeleton-rect">
  122. 更多
  123. <u-icon name="arrow-right"></u-icon>
  124. </view>
  125. </view>
  126. <view v-if="propertyList.length == 0" class="u-m-t-40 u-m-b-40"><u-empty mode="list" text="暂无在售房源"></u-empty></view>
  127. <view :class="'property-row-wrap'">
  128. <view class="property-body u-skeleton-fillet box-shadow" v-for="(item, index) in propertyList" :key="index" @click="showDetail(index)">
  129. <view class="image-wrap">
  130. <text class="tag u-skeleton-rect">{{ item.sale_tag }}</text>
  131. <image class="u-skeleton-rect" :src="item.cover_image" mode="aspectFill"></image>
  132. </view>
  133. <view class="property-info-wrap">
  134. <view class="title u-skeleton-rect">{{ item.name }}</view>
  135. <view class="commission u-line-1 u-skeleton-rect">{{ item.commissionText }}</view>
  136. </view>
  137. </view>
  138. </view>
  139. </view>
  140. <!-- 平台佣金政策弹窗 -->
  141. <u-popup v-model="commonRulesShow" mode="center" width="80%" height="800rpx" border-radius="20" closeable>
  142. <view class="bwin-popup">
  143. <view class="popup-header">平台佣金政策</view>
  144. <view class="popup-body"><!-- <u-parse :html="xxxxxxxxxx"></u-parse> --></view>
  145. </view>
  146. </u-popup>
  147. <!-- 项目佣金政策信息弹窗 -->
  148. <u-popup v-model="propertyPopupShow" mode="center" width="80%" height="800rpx" border-radius="20" closeable>
  149. <view class="bwin-popup">
  150. <view class="popup-header">{{ propertyList[currentPropertyIndex].name + '佣金政策' }}</view>
  151. <view class="popup-body">
  152. <u-parse :html="propertyList[currentPropertyIndex].rulesInfo.des_content"></u-parse>
  153. <u-divider marginTop="20" marginBottom="20">详情</u-divider>
  154. <view class="property-info">
  155. <view class="item">
  156. <view class="item-title">营销中心:</view>
  157. <view class="item-info">{{ propertyList[currentPropertyIndex].address }}</view>
  158. </view>
  159. <view class="item">
  160. <view class="item-title">销售热线:</view>
  161. <view class="item-info">{{ propertyList[currentPropertyIndex].tel }}</view>
  162. </view>
  163. <view class="item">
  164. <view class="item-title">保护期:</view>
  165. <view class="item-info">{{ propertyList[currentPropertyIndex].rulesInfo.safe_time + '小时' }}</view>
  166. </view>
  167. </view>
  168. </view>
  169. </view>
  170. </u-popup>
  171. <!-- 骨架屏 -->
  172. <u-skeleton :loading="skeletonLoading" animation></u-skeleton>
  173. </view>
  174. </template>
  175. <script>
  176. var that;
  177. export default {
  178. data() {
  179. // 页面数据变量
  180. return {
  181. userInfo: {},
  182. skeletonLoading: true,
  183. agentTypeList: ['', '自由经纪人', '渠道经纪人', '老业主'],
  184. propertyList: [
  185. {
  186. name: '在售项目1',
  187. cover_image: 'https://zdcdn.2bwin.cn/uploads/20220501/af6eb9c2a5d462be10a15c2302e5e6b5.jpg',
  188. sale_tag: '刚需好盘',
  189. rulesInfo: {
  190. des: '内容加载中....',
  191. des_content: '内容加载中....'
  192. }
  193. },
  194. {
  195. name: '在售项目2',
  196. cover_image: 'https://zdcdn.2bwin.cn/uploads/20220501/f11aa1c5e2e091f6b1e8a1d58fbe9d5e.jpg',
  197. sale_tag: '佣金易拿',
  198. rulesInfo: {
  199. des: '内容加载中....',
  200. des_content: '内容加载中....'
  201. }
  202. }
  203. ],
  204. commonRulesShow: false,
  205. propertyPopupShow: false,
  206. currentPropertyIndex: 0,
  207. // init请求返回的数据
  208. data: {},
  209. // 表单请求数据
  210. form1: {},
  211. scrollTop: 0,
  212. reportStepCountObj: {}
  213. };
  214. },
  215. onPageScroll(e) {
  216. this.scrollTop = e.scrollTop;
  217. },
  218. // 监听 - 页面每次【加载时】执行(如:前进)
  219. onLoad(options = {}) {
  220. that = this;
  221. this.options = options;
  222. this.init(options);
  223. },
  224. // 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快,会在页面进入动画完成前触发
  225. onReady() {
  226. },
  227. // 监听 - 页面每次【显示时】执行(如:前进和返回) (页面每次出现在屏幕上都触发,包括从下级页面点返回露出当前页面)
  228. onShow() {},
  229. // 监听 - 页面每次【隐藏时】执行(如:返回)
  230. onHide() {},
  231. // 监听 - 页面触底部
  232. onReachBottom() {},
  233. // 监听 - 窗口尺寸变化(仅限:App、微信小程序)
  234. onResize() {},
  235. // 监听 - 点击右上角转发时
  236. onShareAppMessage(options) {},
  237. // 监听 - 页面创建时
  238. created() {},
  239. // 函数
  240. methods: {
  241. scanHandle () {
  242. uni.scanCode({
  243. success: function (res) {
  244. uni.navigateTo({
  245. url: `/pages/agent/recommend/detail2?id=${res.result}`
  246. })
  247. }
  248. })
  249. },
  250. // 页面数据初始化函数
  251. init(options) {
  252. const userInfo = uni.getStorageSync('MD_userInfo')
  253. this.userInfo = userInfo
  254. uni.api.estate.apireportcount().then(res => {
  255. const reportStepCount = res.report_step_count || []
  256. let reportStepCountObj = {}
  257. reportStepCount.forEach(item => {
  258. reportStepCountObj[item.report_step] = item.total || 0
  259. })
  260. this.reportStepCountObj = {...reportStepCountObj}
  261. })
  262. // uni.api.estate.apireportlist({
  263. // token: 'xxxx'
  264. // }).then(res => {
  265. // console.log(res)
  266. // })
  267. // uni.api.estate.apiestatelist().then(res => {
  268. // console.log(res)
  269. // })
  270. // let currentTime = Date.parse(new Date()) / 1000; // 秒级
  271. // // 初始化平台数据
  272. // let systemConfig = vk.vuex.get('$app.systemConfig');
  273. // if (!systemConfig.use_skeleton) {
  274. this.skeletonLoading = false;
  275. // }
  276. // if (vk.pubfn.isNull(systemConfig._id)) {
  277. // // 不存在则直接初始化
  278. // vk.callFunction({
  279. // url: 'client/agent/pub/getConfigInfo',
  280. // needAlert: false
  281. // }).then(res => {
  282. // vk.vuex.set('$app.systemConfig', res.config);
  283. // vk.vuex.set('$app.systemConfig.lastGetTime', currentTime);
  284. // });
  285. // } else {
  286. // let mathTime = ((currentTime - systemConfig.lastGetTime) / 3600).toFixed(2);
  287. // if (mathTime > systemConfig.cache_time) {
  288. // vk.callFunction({
  289. // url: 'client/agent/pub/getConfigInfo',
  290. // needAlert: false
  291. // }).then(res => {
  292. // vk.vuex.set('$app.systemConfig', res.config);
  293. // vk.vuex.set('$app.systemConfig.lastGetTime', currentTime);
  294. // });
  295. // }
  296. // }
  297. // // 请求经纪人个人数据
  298. // let lastInitAgentDataTime = vk.vuex.get('$user.history.lastInitAgentDataTime');
  299. // if (currentTime - lastInitAgentDataTime >= 60 && vk.checkToken()) {
  300. // // 个人数据1分钟主动更新1次
  301. // vk.callFunction({
  302. // url: 'client/agent/kh/getAgentData',
  303. // data: {
  304. // agentId: vk.vuex.get('$user.agentInfo._id')
  305. // },
  306. // needAlert: false
  307. // }).then(res => {
  308. // vk.vuex.set('$user.dataInfo.recommendNum', res.data.recommendNum);
  309. // vk.vuex.set('$user.dataInfo.visitedNum', res.data.visitedNum);
  310. // vk.vuex.set('$user.dataInfo.buyNum', res.data.buyNum);
  311. // vk.vuex.set('$user.dataInfo.totalCommission', res.data.totalCommission);
  312. // vk.vuex.set('$user.history.lastInitAgentDataTime', currentTime);
  313. // });
  314. // }
  315. // // 请求未读消息数量
  316. // // 最快1分钟请求一次
  317. // let lastGetUnreadMsgTime = vk.vuex.get('$user.history.lastGetUnreadMsgTime');
  318. // if (currentTime - lastGetUnreadMsgTime > 60 && vk.checkToken()) {
  319. // vk.callFunction({
  320. // url: 'client/agent/kh/getUnreadMsgNum'
  321. // }).then(res => {
  322. // vk.vuex.set('$user.dataInfo.unreadMsgNum', res.num);
  323. // vk.vuex.set('$user.history.lastGetUnreadMsgTime', currentTime);
  324. // });
  325. // }
  326. // // 请求在售项目列表
  327. // vk.callFunction({
  328. // url: 'client/agent/pub/getPropertyList',
  329. // needAlert: false
  330. // }).then(res => {
  331. // that.propertyList = res.list;
  332. // // 存储到vuex,方便其他页面调用
  333. // if (res.list.length < 5) {
  334. // // 若大于等于5则可能有更多项目,则不缓存
  335. // let list = res.list.map(function(val, index) {
  336. // return { value: val._id, label: val.name };
  337. // });
  338. // vk.vuex.set('$app.propertyList', list);
  339. // }
  340. // // 拼接佣金政策
  341. // // 非经纪人身份时显示佣金政策简介
  342. // // 否则显示最高可获得的佣金额度
  343. // let i;
  344. // for (i = 0; i < res.list.length; i++) {
  345. // let agentType = vk.vuex.get('$user.agentInfo.type');
  346. // if (vk.pubfn.isNull(agentType)) {
  347. // // 还未注册为经纪人
  348. // that.propertyList[i].commissionText = that.propertyList[i].rulesInfo.des;
  349. // } else {
  350. // let commissionInfo = that.propertyList[i].rulesInfo.commission_info;
  351. // let item = vk.pubfn.getListItem(commissionInfo, 'type', agentType);
  352. // that.propertyList[i].commissionText = '您最高可获得佣金' + item.amount + '元';
  353. // }
  354. // }
  355. // that.skeletonLoading = false;
  356. // });
  357. },
  358. pageTo(path) {
  359. if (path === 'dev') {
  360. uni.$msg('开发中~')
  361. return
  362. }
  363. uni.navigateTo({
  364. url: path
  365. })
  366. },
  367. // 弹窗展示项目佣金详情
  368. showDetail(index) {
  369. that.currentPropertyIndex = index;
  370. that.propertyPopupShow = true;
  371. }
  372. },
  373. // 监听器
  374. watch: {},
  375. // 计算属性
  376. computed: {}
  377. };
  378. </script>
  379. <style lang="scss" scoped>
  380. .page {
  381. min-height: calc(100vh - 44px);
  382. }
  383. .userinfo-wrap {
  384. display: flex;
  385. flex-direction: column;
  386. align-items: flex-start;
  387. background-color: #fff;
  388. padding: 32rpx;
  389. width: 100%;
  390. margin-bottom: 20rpx;
  391. border-radius: 10rpx;
  392. position: relative;
  393. .userinfo {
  394. width: 100%;
  395. display: flex;
  396. align-items: center;
  397. justify-content: space-between;
  398. .user {
  399. display: flex;
  400. align-items: center;
  401. .avatar-wrap {
  402. position: relative;
  403. .avatar-bg {
  404. position: absolute;
  405. left: 0;
  406. top: 0;
  407. border-radius: 50%;
  408. width: 128rpx;
  409. height: 128rpx;
  410. }
  411. }
  412. .info {
  413. margin-left: 32rpx;
  414. .nickname {
  415. font-size: $u-p;
  416. font-weight: bold;
  417. color: $u-main-color;
  418. margin-bottom: 5rpx;
  419. }
  420. .mobile {
  421. font-size: $u-p1;
  422. color: $u-tips-color;
  423. }
  424. }
  425. }
  426. }
  427. .datainfo {
  428. width: 100%;
  429. display: flex;
  430. align-items: flex-end;
  431. justify-content: space-between;
  432. padding: 20rpx 0 0;
  433. .data-item {
  434. display: flex;
  435. flex-direction: column;
  436. align-items: center;
  437. .data {
  438. font-weight: bold;
  439. font-size: $u-h2;
  440. line-height: $u-h2;
  441. margin-bottom: 10rpx;
  442. }
  443. .item {
  444. font-size: $u-p2;
  445. color: $u-content-color;
  446. }
  447. }
  448. }
  449. }
  450. .function-card-wrap {
  451. .col-card-wrap {
  452. display: flex;
  453. align-items: center;
  454. justify-content: space-between;
  455. }
  456. .function-card {
  457. background-color: #fff;
  458. padding: 32rpx 20rpx;
  459. width: 345rpx;
  460. margin-bottom: 20rpx;
  461. border-radius: 10rpx;
  462. position: relative;
  463. overflow: hidden;
  464. .title-wrap {
  465. text-align: left;
  466. .main-title {
  467. display: flex;
  468. align-items: center;
  469. font-size: $u-p;
  470. font-weight: bold;
  471. }
  472. .sub-title {
  473. font-size: $u-p2;
  474. color: $u-content-color;
  475. }
  476. }
  477. .icon {
  478. text-align: right;
  479. position: absolute;
  480. top: 0;
  481. right: 0;
  482. }
  483. }
  484. }
  485. // 项目列表
  486. .card-list-wrap {
  487. background-color: #fff;
  488. // margin: 0rpx -20rpx 20rpx;
  489. padding: 20rpx 20rpx 0 20rpx;
  490. display: flex;
  491. flex-direction: column;
  492. border-radius: 10rpx;
  493. .header-title-warp {
  494. width: 100%;
  495. margin-bottom: 20rpx;
  496. display: flex;
  497. align-items: center;
  498. justify-content: space-between;
  499. .title {
  500. display: flex;
  501. align-items: center;
  502. color: $u-main-color;
  503. font-weight: bold;
  504. font-size: $u-p;
  505. }
  506. .more {
  507. font-size: $u-sub;
  508. color: $u-tips-color;
  509. }
  510. }
  511. // 行版
  512. .property-row-wrap {
  513. .property-body {
  514. width: 100%;
  515. border-radius: 10rpx;
  516. margin-bottom: 20rpx;
  517. // background-color: #fff;
  518. .image-wrap {
  519. position: relative;
  520. image {
  521. width: 100%;
  522. height: 300rpx;
  523. display: block;
  524. border-top-left-radius: 10rpx;
  525. border-top-right-radius: 10rpx;
  526. }
  527. .tag {
  528. color: #ffffff;
  529. background-color: $u-theme-color;
  530. font-size: $u-p2;
  531. position: absolute;
  532. z-index: 1;
  533. left: 0;
  534. padding: 8rpx 20rpx;
  535. border-top-left-radius: 10rpx;
  536. border-bottom-right-radius: 10rpx;
  537. }
  538. }
  539. .property-info-wrap {
  540. padding: 20rpx;
  541. .title {
  542. font-weight: bold;
  543. color: $u-main-color;
  544. font-size: $u-p;
  545. }
  546. .commission {
  547. margin-top: 10rpx;
  548. font-size: $u-p2;
  549. color: $u-content-color;
  550. }
  551. }
  552. }
  553. }
  554. // 两列版
  555. .property-col-wrap {
  556. display: flex;
  557. flex-wrap: wrap;
  558. justify-content: space-between;
  559. align-items: flex-start;
  560. .property-body {
  561. width: 325rpx;
  562. border-radius: 10rpx;
  563. margin-bottom: 20rpx;
  564. // background-color: #fff;
  565. .image-wrap {
  566. position: relative;
  567. image {
  568. width: 100%;
  569. height: 300rpx;
  570. display: block;
  571. border-top-left-radius: 10rpx;
  572. border-top-right-radius: 10rpx;
  573. }
  574. .tag {
  575. color: #ffffff;
  576. background-color: $u-theme-color;
  577. font-size: $u-sub;
  578. position: absolute;
  579. z-index: 1;
  580. left: 0;
  581. padding: 8rpx 20rpx;
  582. border-top-left-radius: 10rpx;
  583. border-bottom-right-radius: 10rpx;
  584. }
  585. }
  586. .property-info-wrap {
  587. padding: 20rpx;
  588. .title {
  589. font-weight: bold;
  590. color: $u-main-color;
  591. font-size: $u-p2;
  592. }
  593. .commission {
  594. margin-top: 10rpx;
  595. font-size: $u-sub;
  596. color: $u-content-color;
  597. }
  598. }
  599. }
  600. }
  601. }
  602. .popup-body {
  603. .property-info {
  604. font-size: $u-p1;
  605. .item {
  606. display: flex;
  607. margin-bottom: 10rpx;
  608. .item-title {
  609. font-weight: bold;
  610. }
  611. }
  612. }
  613. }
  614. .scoped-scan-img {
  615. padding-left: 20px;
  616. width: 90rpx;
  617. height: 90rpx;
  618. }
  619. </style>