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="showDetail(item)">
							设置代理价格
						</view>
						<view  class="btn-sale" @click.stop="showDetail(item)">
							设置销售价格
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import {getCompanyStoreOrderList} from '@/api/storeOrder'
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], 
		data() {
			return {
				searchKey:"",
				mescroll:null,
				// 上拉加载的配置
				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'},
					{name:'蓝西',phone:'18056647845',proxyPrice:1.0,salePrice:0.8,createTime:'2025-07-10 14:20',img:'/static/images/health/female_profile.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()
			},
			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
				};
				// getCompanyStoreOrderList(data).then(res => {
				// 	if(res.code==200){
				// 		//设置列表数据
				// 		if (page.num == 1) {
				// 			that.dataList = res.data.list; 
							
				// 		} else {
				// 			that.dataList = that.dataList.concat(res.data.list);
							 
				// 		}
				// 		that.mescroll.endBySize(res.data.list.length, res.data.total);
						
				// 	}else{
				// 		uni.showToast({
				// 			icon:'none',
				// 			title: "请求失败",
				// 		});
				// 		that.dataList = null;
				// 		that.mescroll.endErr();
				// 	}
				// });
			},
			showDetail(item) {
				uni.navigateTo({
					url: './clientDetail?id=' 
				})
			},
			// cancel(item){
			// 	var that=this;
			// 	uni.showModal({
			// 	    title: '提示',
			// 	    content: '确定取消订单吗',
			// 	    success: function (res) {
			// 	        if (res.confirm) {
			// 				var data = {
			// 					orderId:item.id
			// 				};
			// 				cancelOrder(data).then(res => {
			// 					if(res.code==200){
			// 						uni.showToast({
			// 							icon:'success',
			// 							title: "操作成功",
			// 						});
			// 						 that.mescroll.resetUpScroll()
			// 					}else{
			// 						uni.showToast({
			// 							icon:'none',
			// 							title: res.msg,
			// 						});
			// 					}
			// 				});
			// 	        } 
			// 			else if (res.cancel) {
			// 	        }
			// 	    }
			// 	});
			// },
			// pay(item) {
			// 	 uni.navigateTo({
			// 	 	url: '../shopping/paymentOrder?orderId='+item.id
			// 	 })
			// },
			// 查看物流
			// showDelivery(item) {
			// 	uni.navigateTo({
			// 		url: './storeOrderDelivery?orderId='+item.id
			// 	})
			// }
			
		}
	}
</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 ;
	}
	.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>