H5_QiCaiYao/page_salesman_index/adminSalesman/adminSalesman.vue

<template>
	<page-meta :page-style="themeColor"></page-meta>
	<view class="index">
		<!-- <z-paging ref="paging" v-model="list" @query="queryList"> -->

			<!-- <template slot="top"> -->
				<u-navbar title="业务员管理" autoBack placeholder>
					<div slot="right" class="right">
						<image :src="$util.img(`/upload/weapp/pageSalesman/customer/sx.png`)"
							@click="$refs.selectPopup.start()"></image>
						<image :src="$util.img(`/upload/weapp/pageSalesman/customer/add.png`)" @click="add"></image>
					</div>
				</u-navbar>
			<!-- </template> -->
			<div class="customer-list">
				<div class="customer-item" v-for="(item,index) in listtwo.length>0?listtwo:list" :key="index">
					<div class="top">
						<div v-if="item.auth_level==1">
							{{item.realname}}
							<div class="tag">一类</div>
						</div>
						<div v-if="item.auth_level==2">
							{{item.realname}}
							<div class="tag">二类</div>
						</div>
						<div class="status" style="color: '#00BEF9'" v-if="item.status==1">正常</div>
						<div class="status" style="color: '#F33B50'" v-else>停用</div>
					</div>
					<u-line color="#F2F2F2"></u-line>

					<div class="item" style="margin-top: 16rpx;">
						<div>登录账号</div>
						<div class="phone">{{item.username}}</div>
					</div>
					<div class="item">
						<div>联系电话</div>
						<div class="phone">{{item.tel}}</div>
					</div>
					<div class="item">
						<div>部门</div>
						<div class="phone">{{item.depart_name}}</div>
					</div>
					<div class="btn" @click="itemClick(index)">
						<div>编辑</div>
					</div>
				</div>
			</div>
		<!-- </z-paging> -->
		<selectPopup :fatherMethod="fatherMethod" ref="selectPopup"></selectPopup>

	</view>
</template>

<script>
	import selectPopup from './components/selectPopup.vue'
	export default {
		components: {
			selectPopup
		},
		data() {
			return {
				list: [],
				page:1,
				auth_level:'',
				listtwo:[]
			};
		},
		onShow() {
			let _this=this
			uni.getStorage({
				key: 'salasman',
				success: function (res) {
					console.log(JSON.parse(res.data),'显示');
					_this.listtwo=JSON.parse(res.data)
				},
			})
			this.$api.sendRequest({
				url: '/api/salasman/info',
				data: {
					token: uni.getStorageSync('token')
				},
				// async:false,
				success: (res) => {
					console.log(res, 'res');
				},
			})
			this.$api.sendRequest({
				url: '/api/salasman/lists',
				data: {},
				// async:false,
				success: (res) => {
					console.log(res.data.list, '业务员列表');
					this.list = res.data.list
				},
			})
		},
		methods: {
			
			//筛选
			 fatherMethod(auth_level,position_id,depart_id,keywords) {
					this.$api.sendRequest({
						url: '/api/salasman/lists',
						data: {
							auth_level,
							position_id,
							depart_id,
							keywords
						},
						success: (res) => {
							console.log(res.data.list, '筛选结果');
							uni.setStorageSync('salasman', JSON.stringify(res.data.list));
							this.list=res.data.list
						},
					})
			 },
			add() {
				uni.navigateTo({
					url: '/page_salesman_index/adminSalesman/addSalesman'
				})
			},
			itemClick(index) {
				// setTimeout(()=>{
				// 	uni.$emit('item',this.list[index].uid)
				// },500)
				uni.navigateTo({
					url: `/page_salesman_index/adminSalesman/addSalesman?uid=${this.list[index].uid}`
				})
			}
		},
		async onPullDownRefresh(){
			this.$api.sendRequest({
				url: '/api/salasman/lists',
				data: {},
				success: (res) => {
					console.log(res.data.list, '业务员列表');
					this.list = res.data.list
					this.page=1
					uni.stopPullDownRefresh()
				},
			})
		},
		async onReachBottom() {
			this.page+=1
			await this.$api.sendRequest({
				url: '/api/salasman/lists',
				data: {
					page:this.page
				},
				success: res => {
					// this.list.push([...res.data.list])
					this.list=[...this.list,...res.data.list]
				}
			})
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep{
		/* #ifdef APP */
		.u-popup__content{
			margin-top: 170rpx;
		}
		/* #endif */
	}
	.index {
		padding: 32rpx;

		.right {
			display: flex;
			align-items: center;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-left: 40rpx;
			}
		}

		.customer-list {
			.customer-item {
				background: #FFFFFF;
				border-radius: 24rpx;
				padding: 32rpx 32rpx 22rpx;
				margin-bottom: 32rpx;
				position: relative;

				.btn {
					position: absolute;
					display: flex;
					justify-content: flex-end;
					bottom: 32rpx;
					right: 32rpx;

					>div {
						width: 152rpx;
						display: inline-block;
						height: 60rpx;
						line-height: 60rpx;
						background: #21BBF3;
						border-radius: 30rpx;
						font-size: 24rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: bold;
						color: #FFFFFF;
						text-align: center;
					}
				}

				.item {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #222222;
					margin: 12rpx 0;
					display: flex;
					align-items: center;

					.phone {
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;

						color: #999999;
						margin-left: 32rpx;
					}
				}

				.top {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.status {
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #00BEF9;
					}

					>div {
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding-bottom: 16rpx;

						.tag {
							padding: 2rpx 16rpx;
							margin-left: 16rpx;
							font-size: 20rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #FF7D02;
							line-height: 36rpx;
							text-align: center;
							height: 36rpx;
							background: #FFF0E2;
							border-radius: 4rpx;
						}
					}
				}
			}
		}
	}
</style>