caimei-applets-caimei/pages/user/operator/list.vue

<template>
	<view class="container operator clearfix">
		<view class="operator-top clearfix">
			<view class="operator-title">
				<view class="head"><image src="../../../static/temp/logo@3x.png" mode=""></image></view>
				<view class="title">{{clubName}}</view>
			</view>
			<view class="operator-search">
				<view class="search-wrap">
					<view class="search-from name">
						<view class="label">姓名:</view>
						<input class="input" type="text" v-model="linkman" placeholder="请输入姓名" maxlength="6"/>
					</view>
					<view class="search-from phone">
						<view class="label">手机号:</view>
						<input class="input" type="text" v-model="clubMobile" placeholder="请输入手机号" maxlength="11"/>
					</view>
				</view>
				<view class="search-wrap">
					<button class="search-btn" type="default" @click.stop="searchOpertor">搜索</button>
				</view>
			</view>
		</view>
		<view class="operator-main">
			<view v-if="isEmpty" class="empty-container">
				<view class="txt">暂无运营人员</view>
				<view class="add-btn" @click="this.$api.navigateTo('/pages/user/operator/addoperator')">添加运营人员</view>
			</view>
			<view v-else class="operator-list">
				<scroll-view scroll-y="true">
					<view class="list" v-for="(item, index) in operatorList" :key="index" @click.stop="showOperatorModel(item)">
						<view class="list-left">
							<view class="list-head"><image :src="item.image" mode=""></image></view>
							<view class="list-tel">
								<text class="txt">{{item.name}}</text>
								<text class="txt">{{item.mobile}}</text>
							</view>
						</view>
						<view class="list-opea">
							<view class="opea-type">
								<view class="opea-type-cell" v-if="item.status != '0'">
									<text class="iconfont icon-iconfontweixin" :style="{color: iconStautsColor(item.status)}"></text>
									<text :style="{color: rexpStautsColor(item.status)}">{{ rexpStautsText(item.status) }}</text>
								</view>
							</view>
							<view class="opea-del">
								<view class="opea-type-cell" @click.stop="deleteOperator(item)">
									<text class="iconfont icon-shanchu"></text>
									<text>删除</text>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="add-btn" @click="this.$api.navigateTo('/pages/user/operator/addoperator')">添加运营人员</view>
			</view>
		</view>
		<view class="operator-model" v-if="isOperatorModel" @click.stop="closeModel">
			<view class="operator-alert">
				<text class="iconfont icon-iconfontguanbi" @click.stop="closeModel"></text>
				<view class="content">
					<view class="ciew-t">姓名：{{modelData.name}}</view>
					<view class="ciew-t">手机号：{{modelData.mobile}}</view>
					<view class="ciew-t">邀请码：{{modelData.code ? modelData.code : '无'}}<text :style="{color: rexpStautsColor(modelData.status)}">{{modelStautsText(modelData.status)}}</text></view>
					<view class="ciew-t">邀请码有效期：{{modelData.time}}</view>
					<view class="ciew-t">状态：{{modelData.status == '2' ? '已绑定' : '未绑定'}}</view>
					<view class="ciew-t">添加时间：{{modelData.addtime}}</view>
					<view class="ciew-t">绑定时间：{{modelData.bindtime}}</view>
				</view>
				<view class="btn" v-if="modelData.status != '2'" @click.stop="updateInvitationCode">更新邀请码</view>
			</view>
		</view>
	</view>
</template>

<script>
	import authorize from '@/common/config/authorize.js'	
	import modelAlert from '@/components/module/modelAlert/modelAlert.vue'
	import { queryOperatorList, deleteOperator , updateCode } from "@/api/operator.js"
	export default {
		components:{
			modelAlert
		},
		data() {
			return {
				clubName:'采美商城采购机构按时',
				isSelect:false,
				isEmpty:false,
				isLoadMore:false,
				alertText:'确定要删除该地址？',
				userID:'',
				pageNum:1,
				pageSize:10,
				addressList: [],
				hasNextPage:false,
				allowDataStatus:true,
				wrapperHeight:'100%',
				scrollHeight:'',
				deleteAddressId:'',
				currPage:'',//当前页面
				prevPage:'',//上一个页面
				isOperatorModel:false,
				operatorList:[
					{
						image:'../../../static/temp/logo@3x.png',
						name:'张三',
						mobile:'18888888888',
						status:'1',
						code:'456789',
						time:'5',
						static:'1',
						addtime:'2020-03-18 23:48:56',
						bindtime:'2020-03-18 23:48:56',
					},
					{
						image:'../../../static/temp/logo@3x.png',
						name:'张三',
						mobile:'18888888888',
						status:'2',
						code:'456789',
						time:'5',
						addtime:'2020-03-18 23:48:56',
						bindtime:'2020-03-18 23:48:56',
					},
					{
						image:'../../../static/temp/logo@3x.png',
						name:'张三',
						mobile:'18888888888',
						status:'3',
						code:'456789',
						time:'5',
						addtime:'2020-03-18 23:48:56',
						bindtime:'2020-03-18 23:48:56',
					},
					{
						image:'../../../static/temp/logo@3x.png',
						name:'张三',
						mobile:'18888888888',
						status:'0',
						code:'',
						time:'5',
						addtime:'2020-03-18 23:48:56',
						bindtime:'2020-03-18 23:48:56',
					},
				],
				modelData:''
			}
		},
		onLoad(option){	
			if(option.type=='select'){this.isSelect = true;}
			this.setScrollHeight();
		},
		onReachBottom() {
			// console.log('滑动到页面底部')
			if(this.isLoadMore) {
				// this.initAddressList();
			}
		},
		methods: {
			setScrollHeight() {
				// 窗口高度 - 底部距离
				setTimeout(()=> {
					const query = wx.createSelectorQuery().in(this);
					query.selectAll('.add-btn').boundingClientRect();
					query.exec(res => {
						if(res[0][0]){
							let winHeight = this.$api.getWindowHeight(),
								eleTop = res[0][0].top - 1;
								this.scrollHeight =  eleTop;
						}
					})
				}, 500)
			},
			searchOpertor(){
				this.initAddressList()
			},
			initAddressList(){	
				queryOperatorList({status:2,pageNum:this.pageNum,pageSize:this.pageSize}).then(response =>{
					if(response.results == ''){
						this.isEmpty = true
					}else{
						this.isEmpty = false
						let results =[];
						results = response.results;
						this.addressList = this.addressList.concat(results);
						this.pageNum = response.index +1;
						if(this.pageNum === response.totalPage + 1 ){
							this.isLoadMore = false;
						} else {
							this.isLoadMore = true;
						}
					}
				}).catch(response =>{
					this.$util.msg(response.msg,2000);
				})
			},		
			showOperatorModel(item){
				console.log(item)
				this.isOperatorModel = true
				this.modelData = item
			},
			closeModel(){
				this.isOperatorModel = false
			},
			deleteOperator(id){//删除运营人员
				console.log('删除地址的ID',id)
				this.$util.modal('','确定删除运营人员吗？','确定删除','取消',true,() =>{
					deleteOperator({id:id}).then(response =>{
						this.$util.msg('删除成功',2000);
					}).catch(response =>{
						this.$util.msg(response.msg,2000);
					})
				})
			},
			updateInvitationCode(item){	//更新邀请码	
				this.$util.modal('','确定更新邀请码并发送给运营人员？','确定更新','取消',true,() =>{
					updateCode({id:item.id,status:item.status}).then(response =>{
						this.$util.msg('更新邀请码成功',2000);
						this.isOperatorModel = false
					}).catch(response =>{
						this.$util.msg(response.msg,2000);
					})
				})
			},
			rexpStautsText(status) {
			      let text = ''
			      switch (status) {
			        case '1':
			          text = '邀请码有效'
			          break
			        case '2':
			          text = '邀请码已使用'
			          break
			        case '3':
			          text = '邀请码已过期'
			          break
			      }
			      return text
			},
			modelStautsText(status) {
			      let text = ''
			      switch (status) {
			        case '1':
			          text = '(有效)'
			          break
			        case '2':
			          text = '(已使用)'
			          break
			        case '3':
			          text = '(已过期)'
			          break
			      }
			      return text
			},
			rexpStautsColor(status) {
			  let textColor = ''
			  switch (status) {
				case '1':
				  textColor = '#55BB00'
				  break
				case '2':
				  textColor = '#0056BB'
				  break
				case '3':
				  textColor = '#BB0000'
				  break
			  }
			  return textColor
			},  
			iconStautsColor(status) {
			  let textColor = ''
			  if(status == '2'){
				   textColor = '#09BB07'
			  }else{
				   textColor = '#DDDDDD'
			  }
			  return textColor
			},
		},
		onShow() {
			this.pageNum = 1;
			this.addressList = [];
			this.initAddressList();
			var pages = getCurrentPages();
			var prevPage = pages[pages.length - 2];  //上一个页面	
				// prevPage.setData({select:''})
		}
	}
</script>

<style lang='scss'>
	page {
		height: auto;
	}
	page,.container{
		/* padding-bottom: 120upx; */
		background: #F7F7F7;
		border-top: 1px solid #EBEBEB;
	}
	.container{
		position: relative;
	}
	.operator-top{
		width: 702rpx;
		padding: 0 24rpx;
		height: auto;
		background: #FFFFFF;
		margin-bottom: 24rpx;
		.operator-title{
			width: 100%;
			height: 92rpx;
			padding: 34rpx 0;
			.title{
				float: left;
				font-size: $font-size-36;
				color: $text-color;
				line-height: 92rpx;
				text-align: left;
				margin-left: 20rpx;
			}
			.head{
				width: 92rpx;
				height: 92rpx;
				border-radius: 50%;
				border: 1px solid $color-system;
				float: left;
				image{
					width: 92rpx;
					height: 92rpx;
					border-radius: 50%;
				}
			}
		}
		.operator-search{
			width: 100%;
			height: auto;
			.search-from{
				width: 300rpx;
				height: 40rpx;
				padding: 24rpx;
				background: $sub-bg-color;
				border-radius: 14rpx;
				position: relative;
				margin-bottom: 20rpx;
				float: left;
				&.name{
					width: 260rpx;
					margin-right: 20rpx;
					.input{
						width: 180rpx;
						padding-left:10rpx;
						font-size: $font-size-28;
						color: $text-color;
						line-height: 40rpx;
						float: left;
						height: 40rpx;
					}
				}
				&.phone{
					width: 324rpx;
					.input{
						width: 220rpx;
						padding-left:10rpx;
						font-size: $font-size-28;
						color: $text-color;
						line-height: 40rpx;
						float: left;
						height: 40rpx;
					}
				}
				.label{
					text-align: left;
					font-size: $font-size-28;
					color:$text-color;
					line-height: 40rpx;
					float: left;
				}
				
			}
			.search-btn{
				width: 702rpx;
				height: 88rpx;
				border: 1px solid $color-system;
				border-radius: 14rpx;
				font-size: $font-size-28;
				color: $color-system;
				line-height: 88rpx;
			}
		}
	}
	.list{
		display: flex;
		align-items: center;
		width: 702rpx;
		height: 92rpx;
		padding: 24rpx;
		background: #FFFFFF;
		position: relative;
		border-bottom: 1px solid #EBEBEB;
		.list-left{
			display: flex;
			flex: 4;
			.list-head{
				width: 92rpx;
				height: 92rpx;
				border: 1px solid $color-system;
				border-radius: 50%;
				image{
					width: 92rpx;
					height: 92rpx;
					border-radius: 50%;
				}
			}
			.list-tel{
				margin-left: 18rpx;
				.txt{
					display: flex;
					flex: 1;
					font-size: $font-size-28;
					color: $text-color;
					line-height: 46rpx;
				}
			}
		}
		.list-opea{
			flex:6;
			.opea-type{
				flex-direction: column;
				align-items: center;
				margin-left: 20rpx;
				float: left;
				.opea-type-cell{
					width: 186rpx;
					height: 64rpx;
					padding:0 16rpx;
					border-radius: 10rpx;
					border: 1px solid #DDDDDD;
					line-height: 64rpx;
					font-size: $font-size-24;
					.icon-iconfontweixin{
						margin-right: 8rpx;
						font-size: $font-size-32;
					}
				}
			}
			.opea-del{
				float: right;
				flex-direction: column;
				align-items: center;
				.opea-type-cell{
					width: 86rpx;
					height: 64rpx;
					padding:0 24rpx;
					border-radius: 10rpx;
					border: 1px solid #DDDDDD;
					line-height: 64rpx;
					font-size: $font-size-24;
					color: #FF0000;
					.icon-shanchu{
						font-size: $font-size-32;
						margin-right: 6rpx;
					}
				}
			}
		}
	}
	.operator-model{
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,.1);
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		margin: auto;
		z-index: 992;
		.operator-alert{
			width: 430rpx;
			height: 376rpx;
			padding: 68rpx 32rpx;
			background: #FFFFFF;
			border-radius: 14rpx;
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			margin: auto;
			z-index: 999;
			.icon-iconfontguanbi{
				width: 68rpx;
				height: 68rpx;
				text-align: center;
				line-height: 68rpx;
				position: absolute;
				right: 0;
				top: 0;
				font-size: $font-size-36;
				color: #999999;
			}
			.content{
				.ciew-t{
					font-size: $font-size-28;
					color: $text-color;
					line-height: 48rpx;
				}
			}
			.btn{
				width: 100%;
				height: 68rpx;
				border-top: 1px solid #F7F7F7;
				line-height: 68rpx;
				font-size: $font-size-26;
				text-align: center;
				color: $color-system;
				position: absolute;
				bottom:0 ;
				left: 0;
			}
		}
	}
	
	.add-btn{
		position: fixed;
		left: 24rpx;
		right: 24rpx;
		bottom: 34rpx;
		z-index: 95;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 702rpx;
		height: 88rpx;
		font-size: $font-size-28;
		line-height: 88rpx;
		color: #FFFFFF;
		text-align: center;
		background: $btn-confirm;
		border-radius: 14rpx;
	}
	.adds-btn{
		width: 702rpx;
		height: 88rpx;
		font-size: 28rpx;
		line-height: 88rpx;
		color: #FFFFFF;
		margin: 0 auto;
		text-align: center;
		background: #000000;
		border-radius: 14rpx;
	}
</style>