H5_QiCaiYao/page_salesman_index/Customer_name/Customer_name.vue

<template>
	<view>
		<!-- <z-paging ref="paging" v-model="list" @query="queryList"> -->

		<!-- <template slot="top"> -->
			<view class="head" style="background-color: rgb(255, 255, 255);">
				<view class="head-head df aic">
					<div class="input">
						<u-input placeholder="请输入客户名称/联系人/电话号码" v-model="kehuj" @change="change">
							<div class="prefix" slot="prefix">
								<image :src="$util.img(`/upload/weapp/pageSalesman/search.png`)" mode=""></image>
							</div>
						</u-input>
					</div>
				</view>
			</view>
		<!-- </template> -->
		<view class="list" v-for="(item,index) in list" :key="index" @click="btn(item.member_id,item.nickname)">
			<div class="df aic jcsb">
				<div class="df aic">
					<image v-if="item.headimg.length>0" style="width: 50rpx;height: 50rpx;margin: 4rpx 24rpx 0 24rpx;" :src="$util.img(item.headimg)" mode=""></image>
					<image v-else style="width: 50rpx;height: 50rpx;margin: 4rpx 24rpx 0 24rpx;" :src="$util.img('https://cbtadmin.jtyqt.com/public/static/img/default_img/head.png')" mode=""></image>
					{{item.nickname}}

				</div>
				<!-- <div>默认类型</div> -->
				<div>电话：{{item.mobile}}</div>
			</div>
			
			<div class="df aic jcsb">
				<div>注册时间：{{item.reg_time}}</div>
			</div>
		</view>
		<!-- </z-paging> -->
	</view>
</template>

<script>
	import eventBus  from '@/common/js/bus.js'
	export default {
		data() {
			return {
				list:[],
				kehuj:'',
				page:1
			};
		},
		onShow() {
			this.$api.sendRequest({
				url: "/api/salasman/getMemberPageList",
				data: {},
				success: res => {
					console.log(res,'客户');
					this.list=res.data.list
				}
			});
		},
		methods:{
			queryList(pageNo, pageSize) {
				// this.$refs.paging.complete(this.list);
			},
			change(value){
				this.$api.sendRequest({
					url: "/api/salasman/getMemberPageList",
					data: {
						keywords:value
					},
					success: res => {
						console.log(res,'客户筛选');
						this.list=res.data.list
					}
				});
			},
			btn(id,nickname){
				
				uni.navigateTo({
					url: `/page_salesman_index/Valet_order/Valet_order?id=${id}`
				})
			}
		},
		async onPullDownRefresh(){
			await this.$api.sendRequest({
				url: '/api/salasman/getMemberPageList',
				data: {},
				success: res => {
					this.list = res.data.list
					this.page=1
					uni.stopPullDownRefresh()
				}
			})
		},
		async onReachBottom() {
			this.page+=1
			await this.$api.sendRequest({
				url: '/api/salasman/getMemberPageList',
				data: {
					page:this.page
				},
				success: res => {
					// this.list.push([...res.data.list])
					this.list=[...this.list,...res.data.list]
				}
			})
		}
	}
</script>

<style lang="scss">
	.input {
		flex:1;
		.prefix {
			image {
				width: 36rpx;
				height: 36rpx;
				position: relative;
				top: 8rpx;
				margin-right: 5rpx;
			}
		}
		::v-deep {
			.u-input--radius{
				border-radius: 16rpx;
				border: 2rpx solid #E8E8E8;
			}
		}

	}
.head{
	width: 750rpx;
	height: 120rpx;
	background-color: rgb(255, 255, 255);
	box-sizing: border-box;
	padding: 0 30rpx;
	.head-head{
		width: 690rpx;
		height: 72rpx;
		position: absolute;
		margin: 0 auto;
		margin: 24rpx 0;
		.placeholder{
			height: 100%;
		}


	}

}

.list{
	width: 702rpx;
	background: #FFFFFF;
	border-radius: 16rpx;
	margin: 0 auto;
	margin-top: 24rpx;
	box-sizing: border-box;
	padding: 32rpx;

	div:nth-child(1){

		div:nth-child(1){
			font-size: 30rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #222222;
			line-height: 44rpx;
			// margin-top: 32rpx;
		}
		div:nth-child(2){
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #585858;
			line-height: 40rpx;
			// margin-top: 32rpx;
		}
	}
	div:nth-child(2){
		div:nth-child(1){
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			line-height: 44rpx;
			margin-top: 32rpx;
		}
		div:nth-child(2){
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			line-height: 44rpx;
			margin-top: 32rpx;
		}
	}
}
</style>