mdapp/pages/trade/list.vue

<template>
	<view>
		<wm-watermark :text="userInfo2.phone" :num="50"></wm-watermark>
		<view class="scoped-list">
			<view v-if="customerList.length == 0" class="empty-wrap"><u-empty mode="list" text="暂无成交单"></u-empty></view>
			<view v-for="(item, index) in customerList" class="sl-item" :key="index">
				<view :class="'sli-top t' + item.deal_type">{{ item.deal_item }}[{{ thtObj[item.house_type] }}] {{ item.house_no }} 
					<view v-if="item.create_by === userInfo2.id" class="r2" @click="pageTo('/pages/trade/create', { info: item })">编辑</view>
					<view class="r" @click="copyTextHandle(item)">喜报</view>
				</view>
				<view class="sli-body" @click="pageTo('/pages/trade/record?id=' + item.id)">
					<view class="sli-p2">总价：<view class="n">{{ item.price }}元</view> => {{(Number(item.price)/item.area).toFixed(2)}}元|<view class="n">{{ item.area }}㎡</view></view>
					<view class="sli-p4" v-if="item.discount">折扣：{{ item.discount || '未知' }}</view>
					<view class="sli-p1">客户：{{ item.customer_name }}({{ item.customer_phone }})</view>
					<view class="sli-p1">业务：{{ item.deal_clerk }}报备至{{ item.report_dept }}({{ tdtObj[item.deal_type] }})</view>
					<view class="sli-p1">佣金：<view class="n">{{ item.brokerage || '0' }}</view> 元 | 返佣<view class="n">{{ item.rebate || '0' }}</view>元
					</view>
					<view class="sli-state">佣金审核：<view :class="'s s' + item.check_state">{{ checkStateObj[item.check_state]}}{{ item.check_state == 1 ? '或不需审核' : '' }}</view></view>
					<view class="sli-p3">成交日期：{{ item.deal_at }}</view>
				</view>
			</view>
		</view>

		<view class="float-search2" @click="pageTo('/pages/trade/create')"><u-icon name="plus" size="42" color="#fff"></u-icon></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="700rpx" border-radius="20">
			<view class="bwin-popup">
				<view class="popup-header">成交单搜索</view>
				<view class="popup-body">
					<u-input v-model="searchFormData.deal_item" border placeholder="请输入成交项目(支持模糊搜索)"></u-input>
					<u-divider marginTop="10" marginBottom="10">或</u-divider>
					<u-input v-model="searchFormData.deal_clerk" border placeholder="请输入成交业务员姓名(支持模糊搜索)"></u-input>
					<u-divider marginTop="10" marginBottom="10">或</u-divider>
					<u-input v-model="searchFormData.customer_name" border placeholder="请输入客户姓名(支持模糊搜索)"></u-input>
					<u-divider marginTop="10" marginBottom="10">或</u-divider>
					<u-input v-model="searchFormData.customer_phone" 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="customerList.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'
var that;
export default {
	components: {
		wmWatermark
	},
	data() {
		return {
			userInfo2: {},
			thtObj: {},
			tdtObj: {},
			checkStateObj: {},
			searchKeyword: null,
			searchPopupShow: false,
			searchFormData: {
				deal_item: '',
				deal_clerk: '',
				customer_name: '',
				customer_phone: ''
			}, // 搜索栏数据
			customerList: [],
			loadmore: {
				status: 'loadmore',
				loadingText: '努力加载中',
				defaultText: '轻轻上拉 查看更多',
				nomoreText: '实在没有了',
				currnetPage: 1
			}
		};
	},
	onLoad(params) {
		that = this;

		// 默认筛选项
		if (params.filterStepStatus !== undefined) {
			that.filterStepStatus = parseInt(params.filterStepStatus);
			this.filterDropdownValue = [[],[],[],[that.filterStepStatus],[]]
		}

		const dictObj = uni.getStorageSync('MD_dict')
		this.thtObj = arrToObj(dictObj.trade_house_type)
		this.tdtObj = arrToObj(dictObj.trade_deal_type)
		this.checkStateObj = arrToObj(dictObj.check_state)


		

		this.getDataList()
	},
	created () {
		this.userInfo2 = uni.getStorageSync('MD_userInfo2')
	},
	onReachBottom() {
		if (that.loadmore.status == 'nomore') return;
		that.loadmore.currnetPage++
		this.getDataList()
	},
	onPullDownRefresh() {
		// 防止频繁刷新
	},
	methods: {
		// 带监听器跳转
		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);
				}
			});
		},
		copyTextHandle (item) {
			uni.api.cust.apitradesubtotal({
				user_id: item.create_by,
				deal_at: item.deal_at,
			}).then(res =>{
				uniCopy({
					content: `【洪楼News】${item.deal_at}喜报
恭喜${item.deal_clerk}小伙伴今日成交${this.thtObj[item.house_type]}第1套
本月(${res.month}月)喜报总计:${res.month_total}套，个人总计:${res.user_total}套
(1)客户姓名: ${item.customer_name}
(2)报备电话：${item.customer_phone}
(3)报备渠道：${item.report_dept}(${this.tdtObj[item.deal_type]})
(4)成交项目：${item.deal_item}
(5)具体房号：${item.house_no}
(6)面积：${item.area}㎡
(7)总价：${item.price}元
(8)单价：${(Number(item.price)/item.area).toFixed(2)}元
(9)折扣：${item.discount || '未知' }
齐心协力向前冲，洪楼业绩显峥嵘！`,
					success:(res)=>{
						uni.showToast({
							title: res,
							icon: 'none'
						})
					},
					error:(e)=>{
						uni.showToast({
							title: e,
							icon: 'none',
							duration:3000,
						})
					}
				})
			})
		},
		delHandle (item) {
			uni.$msgConfirm('确定删除吗？', () => {				
				uni.api.cust.apiprivatecustomerdel({
					id: item.id
				}).then(res => {
					uni.$msg('删除成功~')
					this.loadmore.currnetPage = 1
					this.getDataList()
				})
			})
		},
		getDataList (bc) {
			const that = this
			let params = {
				...this.searchFormData
			}
			uni.api.cust.apitradelist({
				page: that.loadmore.currnetPage,
				...params,
			}).then(res => {
				const list = res.list || []
				if (list.length < 10) {
					that.loadmore.status = 'nomore';
				}
				if (res.current_page === 1) {
					if (list.length == 0) {
						uni.$msg('无搜索结果', 'none');
					}
					that.customerList = [...list]
				} else {
					that.customerList = that.customerList.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() {
			that.loadmore.currnetPage = 1
			this.getDataList(() => {
				this.searchPopupShow = false
			})
		},
	}
};
</script>
<style lang="scss">
.scoped-list {
	padding-top: 20rpx;
	.sl-item {
		box-shadow: 0 0 5px #ccc;
		margin: 0 20rpx 20rpx;
		border-radius: 20rpx;
		overflow: hidden;
		.sli-top {
			position: relative;
			height: 70rpx;
			line-height: 70rpx;
			color: #fff;
			background: #2d8cf0;
			padding-left: 20rpx;
			&.t2 {
				background: #19be6b;
			}
			&.t3 {
				background: #795548;
			}
			.r {
				position: absolute;
				top: 0;
				right: 20rpx;
				height: 70rpx;
				line-height: 70rpx;
				color: #eee;
			}
			.r2 {
				position: absolute;
				top: 0;
				right: 100rpx;
				height: 70rpx;
				line-height: 70rpx;
				color: #eee;
			}
		}
		.sli-body {
			padding: 10rpx 20rpx;
		}
		.sli-p1 {
			color: #666;
			margin-bottom: 10rpx;
			font-size: 28rpx;
			.n {
				color: #ff9900;
				display: inline-block;
				font-weight: bold;
			}
			.i {
				color: #2d8cf0;
				font-weight: bold;
				display: inline-block;
				padding-left: 10rpx;
			}
		}
		.sli-p2 {
			color: #333;
			margin-bottom: 10rpx;
			.n {
				font-size: 30rpx;
				display: inline-block;
				font-weight: bold;
				color: #ed4014;
			}
		}
		.sli-p3 {
			color: #999;
			font-size: 28rpx;
			margin-bottom: 10rpx;
		}
		.sli-p4 {
			background: rgba(255,229,100,.3);
			color: #666;
			margin-bottom: 10rpx;
		}
		.sli-state {
			margin-bottom: 10rpx;
			color: #666;
			.s {
				font-weight: bold;
				background: #2d8cf0;
				padding: 6rpx 10rpx;
				color: #fff;
				border-radius: 10rpx;
				display: inline-block;
				font-size: 24rpx;
				&.s1 {
					background: #ccc;
				}
				&.s5 {
					background: #19be6b;
				}
			}
		}
	}
}


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