FE_CRM/pages/clients/clients.vue

<template>
	<view>
		<ul class="tab">
			<li v-for="(tab, i) in tabs" :class="{active: curTab === tab.id}" @click="tabChange(tab)">{{ tab.name }}</li>
		</ul>
		
		<view class="top">
			<uni-search-bar class="search" radius="5" placeholder="请输入客户名称" clearButton="auto" cancelButton="none" @confirm="search" />
			<uni-icons class="icon" custom-prefix="iconfont" type="icon-filter" size="18" color="#007eff"></uni-icons>
		</view>
		
		<ul class="list">
			<li v-for="item in list" @click="toDetail">
				<view class="name">{{ item.customerName }}</view>	
				<view class="info">
					<view class="left">
						<view class="text">联系人：海文</view>
						<view class="text">账号：海文</view>
						<view class="text">产品到期时间：海文</view>
						<view class="text">商务经理：海文</view>
					</view>
					<view class="type">
						试用客户
					</view>
				</view>
			</li>
		</ul>
	</view>
</template>

<script>
	import { queryCustomer } from '@/apis/modules/client.js'
	export default {
		data() {
			return {
				curTab: 0,
				tabs: [
					{
						name: '我的客户',
						id: 0
					},
					{
						name: '团队全部客户',
						id: 1
					}
				],
				reachBottom: 0,
				list: [],
				page: 1,
				pageSize: 10
			}
		},
		onPullDownRefresh() {
			this.initPage()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1500)
		},
		onReachBottom() {
			this.reachBottom = 1
			uni.showNavigationBarLoading()
			this.getList()
		},
		onLoad() {
			this.getList()
		},
		methods: {
			getList() {
				queryCustomer({
					countries: '中国',
					provinceId: '',
					cityId: '',
					searchContent: '',
					page: this.page,
					size: this.pageSize
				}).then(({ message }) => {
					this.list = this.reachBottom ? [...this.list, ...message.list] : message.list
					this.reachBottom = 0
					this.page++
					uni.hideNavigationBarLoading()
				}).catch(e => {
					
				})
			},
			initPage() {
				this.page = 1
				this.getList()
			},
			// tab切换
			tabChange(tab) {
				this.curTab = tab.id
			},
			search(res) {
				uni.showToast({
					title: '搜索：' + res.value,
					icon: 'none'
				})
			},
			// 跳转详情
			toDetail() {
				this.$util.to('../clientDetail/clientDetail')
			}
		}
	}
</script>

<style scoped lang="scss">
.top {
	display: flex;
	align-items: center;
	padding: 5px 15px 5px 5px;
	margin-bottom: 10px;
	background-color: #fff;
	.search {
		flex: 1;
	}
}
.list {
	background-color: #fff;
	li {
		padding: 10px 20px;
		border-bottom: 2px solid #f8f8f8;
	}
	.name {
		font-size: 16px;
		color: #333;
	}
	.info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 10px;
	}
	.text {
		font-size: 13px;
		line-height: 24px;
		color: #ccc;
	}
	.type {
		font-size: 14px;
		color: $uni-primary;
	}
}
</style>