179crm_user_app/pages_company/clientList.vue

<template>
	<view class="content">
		<view class="top-bg">
				<view class="top-title">我的下级人数</view>
				<view class="num">285</view>
		</view>
		<view class="search-cont">
			<view class="inner">
				<image class="icon-search" src="/static/images/search.png" mode=""></image>
				<input type="text" value="" placeholder="搜索名称或编号" confirm-type="搜索"   placeholder-style="font-size:28rpx;color:#BBBBBB;font-family: PingFang SC;" />
			</view>
			<view class="btn-serach" @click="goSearch" >搜索</view>
		</view>
		<view class="top-title">下级列表</view>
		<!-- 订单列表 -->
		<mescroll-body ref="mescrollRef" :up="upOption">
			<view class="client-list">
				<view v-for="(item,index) in dataList" :key="index" class="item"  @click="showDetail()">
					<view class="top-box">
						<image :src="item.img==null?'../static/images/health/my_heads.png':item.img" mode="aspectFill"></image>
						<view class="right">
							<view class="name">{{item.name}}</view>
							<view class="align-end">
								<view class="proxy">
									<view class="title">代理价格</view>
									<view class="price">¥{{item.proxyPrice.toFixed(2)}}</view>
								</view>
								<view class="sale">
									<view class="title">销售价格</view>
									<view class="price">¥{{item.salePrice.toFixed(2)}}</view>
								</view>
							</view>
							<view class="phone">手机号：{{item.phone}}</view>
							<view class="time">注册时间：{{item.createTime}}</view>
						</view>
					</view>
					<view class="btn-box">
						<view  class="btn-proxy" @click.stop="openEditMoney(1)">
							设置代理价格
						</view>
						<view  class="btn-sale" @click.stop="openEditMoney(2)">
							设置销售价格
						</view>
					</view>
				</view>
				
			</view>
			<view class="h20"></view>
		</mescroll-body>
		<view class="popup-box" v-if="editShow">
		  <view class="info-mask"  @click.stop="cancelEditMoney()" ></view>
		  <view class="info-form" >
				<view class="title">{{type==1?'设置代理价格':'设置销售价格'}}</view>
				<view class="form-box">
					<view class="form-item">
						<text class="label">{{type==1?'代理价格':'销售价格'}}</text>
						<input type="text" v-model="proxyPrice" maxlength="10" placeholder="请输入价格" class="form-input" />
					</view>
				</view>
				<view class="btns">
					<view class="sub-btn" @click.stop="confirmEditMoney()">提交</view>
				</view>
		  </view>
		</view>
	</view>
</template>

<script>
	import {getCompanyStoreOrderList} from '@/api/storeOrder'
	import {getUserInfo} from '@/api/companyUser'
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], 
		data() {
			return {
				searchKey:"",
				mescroll:null,
				type:0,
				editShow:false,
				proxyPrice:0,
				// 上拉加载的配置
				upOption: {
					onScroll:true,
					use: true, // 是否启用上拉加载; 默认true
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 10, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						icon:'/static/images/no_data.png',
						tip: '暂无数据'
					}
				},
				// 列表数据
				dataList: [
					{name:'西航宇',phone:'18056647845',proxyPrice:0.8,salePrice:0.6,createTime:'2025-06-10 14:20',img:'/static/images/health/my_heads.png'},
				]
				
			};
		},
		onLoad(options) {
			var that=this;
			// uni.$on('refreshOrder', () => {
			// 	that.mescroll.resetUpScroll()
			// })
			this.companyId=options.companyId;
			this.companyUserId=options.companyUserId;
		},
		methods: {
			goSearch(e) {
				this.searchKey=e.detail.value;
				this.mescroll.resetUpScroll()
			},
			// getUserInfo(){
			// 	var data={token:uni.getStorageSync('CompanyUserToken')}
			// 	getUserInfo(data).then(
			// 		res => {
			// 			if(res.code==200){
			// 				  this.user=res.data;
			// 			}
			// 			else if(res.code==403){
			// 				uni.setStorageSync('CompanyUserToken',null);
			// 				uni.navigateBack({
			// 					delta:-1
			// 				})			
			// 			}else{
			// 				uni.showToast({
			// 					icon:'none',
			// 					title: res.msg,
			// 				});
			// 			}
			// 		},
			// 		rej => {}
			// 	);
			// },
			openEditMoney(value){
				this.type=value
				this.editShow = true
			},
			cancelEditMoney(){
				this.editShow = false
			},
			confirmEditMoney(){
				if(parseFloat(this.proxyPrice)>=0){
					var that=this;
					// var data={orderId:this.order.id,token:uni.getStorageSync('CompanyUserToken'),money:this.payMoney}
					// editOrderMoney(data).then(
					// 	res => {
					// 		if(res.code==200){
					// 			this.editShow = false
					// 			this.getMyStoreOrderById();
					// 		}else{
					// 			uni.showToast({
					// 				icon:'none',
					// 				title: res.msg,
					// 			});
					// 		}
					// 	},
					// 	rej => {}
					// );
					
				}
				else{
					uni.showToast({
						icon:'none',
						title: "价格应大于等于0",
					});
				}
			},
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			/*下拉刷新的回调 */
			downCallback(mescroll) {
				mescroll.resetUpScroll()
			},
			upCallback(page) {
				//联网加载数据
				var that = this;
				var data = {
					keyword:this.searchKey,
					companyId:this.companyId,
					companyUserId:this.companyUserId,
					page: page.num,
					pageSize: page.size
				};
			},
			showDetail(item) {
				// uni.navigateTo({
				// 	url: './clientDetail?companyId='+this.companyId+"&companyUserId="+this.companyUserId
				// })
			},
			
			
		}
	}
</script>

<style lang="scss">
	.content{
		padding:20upx;
	}
	.top-bg{
		background: linear-gradient( 266deg, #FEA603 0%, #E83924 100%);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		.top-title{
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
			text-align: left;
		}
		.num{
			font-family: Roboto;
			font-weight: 500;
			font-size: 64rpx;
			color: #FFFFFF;
			text-align: left;
		}
	}
	.search-cont{
		// padding: 16upx 30upx;
		// background-color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content:space-between;
		.inner{
			box-sizing: border-box;
			width: 80%;
			height: 64rpx;
			background: #fff;
			border-radius: 32upx;
			display: flex;
			align-items: center;
			padding: 0 30upx;
			.icon-search{
				width: 28upx;
				height: 28upx;
				margin-right: 20upx;
			}
			input{
				height: 60upx;
				line-height: 60upx;
				flex: 1;
			}
		}
		.btn-serach{
			width: 112rpx;
			height: 64rpx;
			line-height: 64rpx;
			text-align: center;
			font-weight: 600;
			font-size: 24rpx;
			color: #fff;
			background: #008FD3;
			border-radius: 34rpx 34rpx 34rpx 34rpx;
		}
	}
	.top-title{
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 36rpx;
		color: #222426;
		text-align: left;
		padding:22rpx ;
	}
	.popup-box{
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		z-index: 999;
		display: flex;
		justify-content: center;
		align-items: center;
		.info-mask {
			position: fixed;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background-color: rgba($color: #000000, $alpha: 0.5);
			z-index: 999;
		}
		.info-form {
			z-index: 1000;
			width: 650rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding: 0 30upx;
			background: #FFFFFF;
			border-radius: 16upx;
			.title{
				padding: 30rpx 0rpx 15rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 40upx;
				line-height: 44upx;
				font-family: PingFang SC;
				color: #222222;
			}
			.form-box{
				width: 100%;
				.form-item{
					padding: 30upx 0;
					display: flex;
					align-items: flex-start;
					border-bottom: 1px solid #F1F1F1;
					.label{
						width: 160upx;
						text-align: left;
						font-size: 30upx;
						line-height: 44upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #222222;
						flex-shrink: 0;
					}
					input{
						text-align: left;
					}
					.form-input{
						font-size: 34upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #222222;
						text-align: left;
					}
					 
				}
			}
			.btns{
				width: 100%;
				height: 120upx;
				padding: 0 30upx;
				display: flex;
				align-items: center;
				justify-content: center;
				.sub-btn{
					width: 100%;
					height: 88upx;
					line-height: 88upx;
					text-align: center;
					font-size: 30upx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
					background: #008FD3;
					border-radius: 44upx;
				}
			}
			
		}
	}
	.client-list{
		.item{
			background: #fff;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			padding: 30rpx;
			margin-bottom: 20rpx;
			.top-box{
				padding-bottom: 30rpx;
				display: flex;
				align-items: flex-start;
				border-bottom: 1rpx solid #ECECEC;
				image{
					width: 112rpx;
					height: 112rpx;
					background: #EAEAEA;
					border-radius:50%;
					margin-right: 22rpx;
				}
				.right{
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.name{
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 32rpx;
						color: #222426;
						text-align: left;
						margin-bottom: 10rpx;
					}
					.proxy{
						// width: 166rpx;
						// height: 36rpx;
						border-radius: 4rpx 4rpx 4rpx 4rpx;
						border: 1rpx solid #008FD3;
						display: flex;
						    align-items: center;
							margin-right: 16rpx;
						.title{
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 20rpx;
							color: #FFFFFF;
							background: #008FD3;
							padding: 8rpx;
						}
						.price{
							font-weight: 500;
							font-size: 20rpx;
							color: #008FD3;
							padding: 4rpx 12rpx;
						}
					}
					.sale{
						// width: 166rpx;
						// height: 36rpx;
						border-radius: 4rpx 4rpx 4rpx 4rpx;
						border: 1rpx solid #FF5030;
						display: flex;
						    align-items: center;
						.title{
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 20rpx;
							color: #FFFFFF;
							background: #FF5030;
							padding: 8rpx;
						}
						.price{
							font-weight: 500;
							font-size: 20rpx;
							color: #FF5030;
							padding: 4rpx 12rpx;
						}
					}
					.phone,.time{
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #898E91;
						text-align: left;
						margin-top: 16rpx;
					}
				}
				
			}
			.btn-box{
				padding-top: 30rpx;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				.btn-proxy{
					width: 224rpx;
					height: 60rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;
	                text-align: center;
					line-height:60rpx;
					background: #008FD3;
					border-radius: 30rpx 30rpx 30rpx 30rpx;
					margin-right: 16rpx;
				}
				.btn-sale{
					width: 224rpx;
					height: 60rpx;
					font-weight: 400;
					font-size: 24rpx;
					text-align: center;
					line-height:60rpx;
					color: #FFFFFF;
					background: #FF5030;
					border-radius: 30rpx 30rpx 30rpx 30rpx;
				}
			}
		
		}
	}
	
</style>