mdapp/pages/estate/lib.vue

<template>
	<view>
		<wm-watermark :text="userInfo2.phone" :num="50"></wm-watermark>

		<view class="scoped-estate-list">
			<view v-for="(item, index) in dataList" :class="curEid == item.id ? 'sel-item cur' : 'sel-item'" :key="index" @click="listItemHandle(item, index)">
				<view class="sel-info">
					<view class="p1">{{item.estate_name}}
						<u-tag
							style="margin-left: 20rpx;"
							:text="areaTypeObj[item.area_type]"
							:type="'success'"
							size="mini"
						></u-tag>
					</view>
					<view class="more">
						<view class="w-box" v-if="item.moreList && item.moreList.length > 0">
							<view class="w-op" v-for="(tag, ti) in item.moreList" :key="ti">
								<view class="w-l">
									<view class="t" :style="'background-color: '+colorObj[tag.company]" >{{tag.company}}</view>
								</view>
								<view class="w-r">
									<view class="w-p1">佣金：{{tag.brokerage}}</view>
									<view class="w-p2">{{tag.report_visit}}</view>
								</view>
							</view>
						</view>
						<view class="t" v-else :style="'background-color: '+colorObj[tag]" v-for="(tag, ti) in item.brokerageTag" :key="ti">{{tag}}</view>
					</view>
				</view>
			</view>
		</view>

		<view class="float-search" @click="searchPopupShow = true"><u-icon name="search" size="42" color="#fff"></u-icon></view>

		<!-- 平台佣金政策弹窗 -->
		<u-popup v-model="searchPopupShow" mode="center" width="80%" height="440rpx" border-radius="20">
			<view class="bwin-popup">
				<view class="popup-header">楼盘搜索</view>
				<view class="popup-body">
					<u-input v-model="searchFormData.estate_name" border placeholder="请输入楼盘名称(支持模糊搜索)"></u-input>
					<u-divider marginTop="10" marginBottom="10">或</u-divider>
					<u-input v-model="searchFormData.brokerage_tag" border placeholder="请输入分销渠道)"></u-input>
				</view>
				<view class="popup-footer" style="position: absolute;">
					<u-button size="medium" @click="searchPopupShow = false">取消</u-button>
					<u-button size="medium" type="primary" @click="searchHandle()">搜索</u-button>
				</view>
			</view>
		</u-popup>

		<u-loadmore
			v-if="dataList.length > 0"
			marginTop="32"
			:line="true"
			:status="loadmore.status"
			:loading-text="loadmore.loadingText"
			:loadmore-text="loadmore.defaultText"
			:nomore-text="loadmore.nomoreText"
		/>
	</view>
</template>
<script>
import { arrToObj } from '@/utils'
import wmWatermark from '@/components/wm-watermark/wm-watermark.vue'
import uniCopy from '@/js_sdk/xb-copy/uni-copy.js'
export default {
	components: {
		wmWatermark
	},
	data() {
		return {
			colorArr: ['#fb7366', '#fb7366', '#9f7df5', '#60c68b', '#4da4ee', '#e77ad4'],
			colorObj: {},
			searchKeyword: null,
			searchPopupShow: false,
			searchFormData: {
				name: '',
				brokerage_tag: ''
			}, // 搜索栏数据
			orderMethod: 0,
			filterDropdownValue: {}, // 默认筛选
			dataList: [], // 客户列表
			loadmore: {
				status: 'loadmore',
				loadingText: '努力加载中',
				defaultText: '轻轻上拉 查看更多',
				nomoreText: '实在没有了',
				currnetPage: 1
			},
			curRoles: '',
			userInfo2: {},
			areaTypeObj: {},
			curEid: '',
			curEname: '',
			curAreaType: '',
		};
	},
	onLoad(params) {
		if (params.v) this.curAreaType = params.v
		this.userInfo2 = uni.getStorageSync('MD_userInfo2')
		this.curRoles = uni.getStorageSync('MD_userInfo2') ? uni.getStorageSync('MD_userInfo2').roles : ''
		this.getDataList()
		const dictObj = uni.getStorageSync('MD_dict')
		this.areaTypeObj = arrToObj(dictObj.area_type)
		let brokerage_company = dictObj.brokerage_company
		let colorObj = {}
		brokerage_company.forEach(item => {
			colorObj[item.key] = item.option1
		})
		this.colorObj = {...colorObj}
	},
	onReachBottom() {
		if (this.loadmore.status == 'nomore') return;
		this.loadmore.currnetPage++
		this.getDataList()
	},
	onPullDownRefresh() {
		// 防止频繁刷新
	},
	methods: {
		listItemHandle (item, index) {
			let dataList = [...this.dataList]
			if (dataList[index].moreList && dataList[index].moreList.length > 0) {
				return
			}
			uni.api.estate.apiestatelibdetail({id: item.id}).then(res => {
				dataList[index].moreList = res.brokerage_list || []
				this.dataList = [...dataList]
			})
		},
		copyTextHandle (item) {
			uniCopy({
				content: `${item.name}-${item.sex == 'male'?'男':'女'}-${item.phone}`,
				success:(res)=>{
					uni.showToast({
						title: res,
						icon: 'none'
					})
				},
				error:(e)=>{
					uni.showToast({
						title: e,
						icon: 'none',
						duration:3000,
					})
				}
			})
		},
		
		getDataList (bc) {
			if (this.userInfo2.roles == 1 || this.userInfo2.roles == 5 || this.userInfo2.roles == 7 || this.userInfo2.roles == 10 || this.userInfo2.roles == 11) {
				const that = this
				let params = {
					page_size: 30,
					...this.searchFormData
				}
				if (this.curAreaType) {
					params.area_type = this.curAreaType
				}
				if (that.orderMethod > 0) {
					if (that.orderMethod === 1) {
						params.order_by = JSON.stringify([{
							field: 'create_at',
							sort: 'desc',
						}])
					}
					if (that.orderMethod === 2) {
						params.order_by = JSON.stringify([{
							field: 'create_at',
							sort: 'asc',
						}])
					}
				}
				uni.api.estate.apiestateliblist({
					page: that.loadmore.currnetPage,
					...params,
				}).then(res => {
					let list = res.list || []
					list.map(item =>{
						if (item.brokerage_tag) item.brokerageTag = JSON.parse(item.brokerage_tag)
					})
					if (list.length < 10) {
						that.loadmore.status = 'nomore';
					}
					if (res.current_page === 1) {
						if (list.length === 0) {
							uni.$msg('无搜索结果', 'none');
						}
						that.dataList = [...list]
					} else {
						that.dataList = that.dataList.concat(list)
					}
					if (bc) bc()
				})
			}
		},
		customBack() {
			uni.navigateBack();
		},
		// 带监听器跳转
		pageTo(url, data) {
			/// xxxxx
			uni.navigateTo({
				url: url,
				events: {
					// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
					update: function(data) {
						// 当B页面运行 eventChannel.emit('update', { a:1 }); 时，会运行这里的代码逻辑。
					}
				},
				success: function(res) {
					// 通过eventChannel向被打开页面传送数据
					res.eventChannel.emit('data', data);
				}
			});
		},
		searchHandle() {
			this.loadmore.currnetPage = 1
			this.getDataList(() => {
				this.searchPopupShow = false
			})
		},
		getTime(n) {
			let date = n ? new Date(n) : new Date()
			let year = date.getFullYear()
			let month = date.getMonth() + 1
			month = month > 9 ? month : '0' + month
			let day = date.getDate()
			day = day > 9 ? day : '0' + day
			let hour = date.getHours()
			hour = hour > 9 ? hour : '0' + hour
			let minute = date.getMinutes()
			minute = minute > 9 ? minute : '0' + minute
			let second = date.getSeconds()
			second = second > 9 ? second : '0' + second
			return `${year}-${month}-${day} ${hour}:${minute}:${second}`
		},
	}
};
</script>
<style lang="scss">
// 列表
.scoped-estate-list {
	padding-top: 20rpx;
	.sel-item {
		box-shadow: 0 0 6rpx #ccc;
		margin: 0 20rpx 20rpx;
		padding: 20rpx;
		border-radius: 10rpx;
	}
	.sel-info {
		.p1 {
			font-size: 34rpx;
			font-weight: bold;
			margin-bottom: 10rpx;
		}
		.more {
			.t {
				display: inline-block;
				vertical-align: middle;
				padding: 6rpx 20rpx;
				border-radius: 6rpx;
				color: #fff;
				margin-right: 10rpx;
				font-size: 26rpx;
			}
		}
		.w-box {
			// border: 1PX solid #dcdcdc;
			padding: 16rpx;
			border-radius: 10rpx;
			.w-op	{
				display: flex;
				border-bottom: 1PX solid #dcdcdc;
				&:last-child {
					border-bottom: 0;
				}
				.w-l {
					width: 160rpx;
					padding-top: 16rpx;
				}
				.w-r {
					flex: 1;
					font-size: 26rpx;
					border-left: 1PX solid #dcdcdc;
					padding-left: 16rpx;
					.w-p1 {
						padding-bottom: 10rpx;
						padding-top: 10rpx;
						color: #666;
						font-weight: bold;
					}
					.w-p2 {
						padding-bottom: 10rpx;
						color: #999;
					}
				}
			}
		}
	}
}

.float-search {
	opacity: 0.9;
	position: fixed;
	right: 20rpx;
	bottom: 40rpx;
	padding: 20rpx;
	border-radius: 50%;
	background-color: $u-theme-color;
}

.scoped-list-more-info {
	position: absolute;
	right: 20rpx;
}
</style>