wx_oms/userManagement/yunSite/index.vue

<template>
	<view @click="ejectOpen=false" style="height: 100vh;display: flex;flex-direction: column;">
		<view class="header">
			<view :style="{height:styles.top+'px'}"></view>
			<uni-nav-bar @clickLeft='jump(-1)' :border="false" color='white' backgroundColor="rgba(0,0,0,0)"
				left-icon="back" title="用户信息" />
			<view class="seach">
				<uni-easyinput style="flex:1" :candidate='candidate' :ejectOpen='ejectOpen' @ejectFn='ejectFn'
					:letfText='letfText' confirmType='search' @confirm='seachFn'
					placeholder-style="color:#bbbbbb;font-weight: 100;" v-model="seachValue"
					:placeholder="letfText=='油站'?'油站名,油站ID':'司机姓名,司机手机号'" @iconClick="onClick">
				</uni-easyinput>
				<button @tap="jump('/userManagement/yunSite/detail')" class="header_seach_butten">
					<uni-icons type="plusempty" size="20" color="#bbbbbb"></uni-icons>
					<view>新增</view>
				</button>
			</view>
		</view>
		<view style="flex:1;overflow: hidden;">
			<view v-if="!tableList.length"
				style="width: 100vw; height: 100%; display: flex;align-items: center;justify-content: center;">
				<image src="@/static/qx.png" style="width: 500rpx; height: 355rpx;"></image>
			</view>
			<scroll-view style="height: 100%;" scroll-y="true" @scrolltolower='scrolltolower'>
				<view class="container">
					<view v-for="(item,index) in tableList" class="form_body">
						<view @tap="jump('/userManagement/yunSite/detail',item)" class="form_body_item">
							<view class="form_body_item_body">
								<view class="form-item_body_left" style="">
									<image :src="item.headPhoto?item.headPhoto: '../../static/tx.png'"
										style="width: 100rpx; height: 100rpx;border-radius: 50%;"></image>
									<view class="form_body_item_body_container">
										<view :style="{color:item.customerName ?'':'#999999'}">
											{{item.customerName ||'暂无' }}
										</view>
										<view>
											{{item.phone || '暂无'}}
											<view class="copy" v-if="item.phone" @tap.stop="copy(item.phone)"></view>
										</view>
										<view class="form-item_body_left_bottom_text" style="">
											{{item.siteName ||'暂无'}}
										</view>
									</view>
								</view>
							</view>
							<view class="form_body_item_footer">
								<view>{{item.customerId}}</view>
								<!-- <view>{{item.updateTime}}</view> -->
							</view>
						</view>
					</view>

				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import serve from '@/api/userManagement/yunSite.js'
	export default {
		data() {
			return {
				seachValue: '',
				letfText: '司机',
				ejectOpen: false,
				candidate: ['司机', '油站'],

				styles: {},
				paramter: {
					currentPage: 1,
					pageSize: 10,
					sorted: {
						createTime: 'desc'
					},
					params: {}
				},
				tableList: []
			}
		},
		onLoad() {
			this.styles = uni.getMenuButtonBoundingClientRect()
		},
		onShow() {
			this.seachFn()
		},
		methods: {
			ejectFn(e) {
				this.letfText = e
				this.tableList = []
				this.getByPage()
			},
			seachFn() {
				this.tableList = []
				this.paramter.currentPage = 1
				this.getByPage()
			},
			getByPage() {
				if (this.letfText == '油站') {
					this.paramter.params = {
						siteName: this.seachValue
					}
				} else {
					this.paramter.params = {
						nameOrPhoneOrId: this.seachValue,
					}
				}
				this.siteHandle()
			},
			siteHandle() {
				serve.customerRelationSite(this.paramter).then(res => {
					if (!res.data.list.length) {
						uni.showToast({
							title: '没有数据了哦~',
							icon: 'none'
						})
						return
					}
					this.tableList = this.tableList.concat(res.data.list);
				})
			},
			// 触底加载
			scrolltolower() {
				this.paramter.currentPage += 1
				this.getByPage()

			},
			handlerNumber(number) {
				if (number == 0) return number
				if (!number) {
					return '--'
				}
				return +number.toFixed(2)
			},

			jump(path, item) {
				if (path === -1) {
					return uni.navigateBack()
				}
				let url = item ? `${path}?item=${encodeURI(JSON.stringify(item))}` : path
				uni.navigateTo({
					url
				})
			},
			onClick() {
				this.ejectOpen = !this.ejectOpen
			}
		}
	}
</script>

<style lang="scss">
	.uni-easyinput__content {
		background-color: #fff;
	}

	.header {
		position: relative;
		width: 100%;
		min-height: 403rpx;
		background: url('https://xoi-support.oss-cn-hangzhou.aliyuncs.com/星油admin小程序/sjbj.png') center/100% no-repeat;
	}

	.header .seach {
		display: flex;
		margin-top: 60rpx;
		padding: 0 50rpx;
		height: 80rpx;
	}

	.uni-easyinput__content {
		height: 80rpx;
	}

	.header_seach_butten {
		font-size: 24rpx !important;
		display: flex !important;
		align-items: center !important;
		margin: 0 !important;
		flex-shrink: 1;
		margin-left: 9rpx !important;
		background: #FFFFFF !important;
		justify-content: center;
	}

	.container {
		padding: 40rpx;
	}

	.form_body {
		/* width: 100vw; */
		padding: 0 10px;
		margin-top: 40rpx;
		box-sizing: border-box;

		&:nth-of-type(1) {
			margin-top: 0;
		}
	}

	.form_body_item {
		height: 217rpx;
		background: #FFFFFF;
		box-shadow: 0px 3px 9px 0px rgba(88, 88, 88, 0.2);
		border-radius: 12rpx;
		font-size: 28rpx;
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		padding-bottom: 0;
	}

	/* 	.form-item_body_right {
		flex-grow: 1;
		text-align: end;
		color: #999999;
		font-size: 24rpx;
		height: max-content;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	} */

	.form_body_item_body {
		padding-bottom: 30rpx;
		border-bottom: 1px solid #F0F0F0;
	}

	.form_body_item_body_container {
		margin-left: 24rpx;
		font-size: 28rpx;
	}

	.form-item_body_left {
		display: flex;
		align-items: center;
	}

	.form-item_body_left_bottom_text {
		font-size: 24rpx;
		color: #999999;
	}

	.form_body_item_footer {
		display: flex;
		color: #BBBBBB;
		font-size: 22rpx;
		justify-content: space-between;
		/* margin-top: 15rpx; */
		align-items: center;
		flex: 1;
	}
</style>