<template> <view class="page"> <!-- 经纪人信息卡片 --> <view class="userinfo-wrap box-shadow"> <!-- 个人信息 --> <view class="userinfo"> <view class="user"> <u-avatar class="u-skeleton-circle box-shadow" :src="vk.vuex.get('$user.userInfo.avatar')" size="120" :show-level="vk.checkToken() && vk.vuex.get('$user.agentInfo.verify_status') == 1" @click="vk.checkToken() ? vk.navigateTo('/pages/user/setting/avatar') : vk.toast('登录后可设置头像')" ></u-avatar> <view class="info"> <view class="nickname u-skeleton-rect"> {{ vk.checkToken() ? vk.vuex.get('$user.agentInfo.relname') ? vk.vuex.get('$user.agentInfo.relname') : vk.vuex.get('$user.userInfo.username') : '未登录' }} </view> <u-tag class="u-m-r-10" v-if="vk.checkToken() && vk.pubfn.isNotNull(vk.vuex.get('$user.agentInfo.type'))" size="mini" type="primary" :text="agentTypeList[vk.vuex.get('$user.agentInfo.type')]" ></u-tag> <u-tag v-if="vk.vuex.get('$user.agentInfo.verify_status') == 1" size="mini" type="success" text="已认证"></u-tag> <view v-else class="mobile u-skeleton-rect">登录后开始推荐赚佣</view> </view> </view> <view class="commission-num"> <view class="main-title"><u-count-to bold :start-val="0" :end-val="vk.vuex.get('$user.dataInfo.totalCommission')"></u-count-to></view> <view class="sub-title">元</view> </view> </view> </view> <view v-show="dataList.length == 0" class="empty-wrap"><u-empty text="暂无佣金记录"></u-empty></view> <!-- 记录 --> <u-cell-group class="box-shadow" v-show="dataList.length > 0"> <u-cell-item v-for="(item, index) in dataList" :key="index" :title="item.customerInfo.name + '(' + item.customerInfo.mobile + ')'" :label="item.propertyInfo.name + ' / ' + item.amount + '元 / ' + vk.pubfn.timeFormat(item._add_time, 'yyyy-MM-dd')" value="查看详情" arrow @click="showDetailPopup(index)" ></u-cell-item> </u-cell-group> <!-- 消息详情 --> <!-- <u-popup v-model="detailPopupShow" mode="center" width="80%" height="480rpx" border-radius="20" closeable close-icon-color="#fff"> <view class="bwin-popup"> <view class="popup-header">消息详情</view> <view v-if="detailPopupShow" class="popup-body"> <text class="content" v-if="dataList[currentItemIndex].type == 'text'">{{ dataList[currentItemIndex].body.content }}</text> <u-image v-if="dataList[currentItemIndex].type == 'image'" :src="dataList[currentItemIndex].body.files" mode="widthFix" width="100%"></u-image> <view class="from-info"> <view class="nickname">{{ dataList[currentItemIndex].fromUserInfo.nickname }}</view> <view class="date">{{ dataList[currentItemIndex]._add_time | date('yyyy-mm-dd hh:MM:ss') }}</view> </view> </view> </view> </u-popup> --> <u-loadmore v-if="dataList.length > 0" marginTop="20" :line="true" :status="loadmore.status" :loading-text="loadmore.loadingText" :loadmore-text="loadmore.defaultText" :nomore-text="loadmore.nomoreText" /> </view> </template> <script> var that; export default { data() { return { agentTypeList: ['', '自由经纪人', '渠道经纪人', '老业主'], dataList: [], detailPopupShow: false, currentItemIndex: 0, loadmore: { status: 'loadmore', loadingText: '努力加载中', defaultText: '轻轻上拉 查看更多', nomoreText: '实在没有了', currentPage: 1 } }; }, onLoad() { that = this; vk.callFunction({ url: 'client/agent/kh/getCommissionList', title: '请求中...', data: { agentId: vk.vuex.get('$user.agentInfo._id') }, needAlert: false }).then(res => { if (res.list.length < 10) { that.loadmore.status = 'nomore'; } that.dataList = res.list; vk.vuex.set('$user.dataInfo.totalCommission', res.totalCommission); }); }, onReachBottom() { if (that.loadmore.status == 'nomore') { return; } that.loadmore.currentPage++; vk.callFunction({ url: 'client/agent/kh/getCommissionList', title: '请求中...', needAlert: false, data: { pageIndex: that.loadmore.currentPage, agentId: vk.vuex.get('$user.agentInfo._id') } }).then(res => { if (res.list.length < 10) { that.loadmore.status = 'nomore'; } that.dataList = that.dataList.concat(res.list); }); }, methods: { showDetailPopup(index) { that.currentItemIndex = index; that.detailPopupShow = true; } } }; </script> <style lang="scss"> .page { min-height: calc(100vh - 44px); } .userinfo-wrap { display: flex; flex-direction: column; align-items: flex-start; background-color: #fff; padding: 32rpx; width: 100%; margin-bottom: 20rpx; border-radius: 10rpx; position: relative; .userinfo { width: 100%; display: flex; align-items: center; justify-content: space-between; .user { display: flex; align-items: center; .info { margin-left: 32rpx; .nickname { font-size: $u-p; font-weight: bold; color: $u-main-color; margin-bottom: 5rpx; } .mobile { font-size: $u-p1; color: $u-tips-color; } } } } .commission-num { display: flex; align-items: flex-end; .main-title { font-size: $u-h1; font-weight: bold; line-height: $u-h2; margin-right: 10rpx; } .sub-title { font-size: $u-p2; } } } .popup-body { .content { font-size: $u-p; display: flex; padding: 20rpx; background-color: $u-bg-color; border-radius: 10rpx; width: 100%; } .from-info { padding-top: 20rpx; width: 100%; display: flex; align-items: center; justify-content: space-between; font-size: $u-p1; .nickname { color: $u-main-color; } .date { color: $u-content-color; } } } </style>