building-sign/pagesB/worker/worker.vue

<template>
	<view class="pad-x120">
		<!-- 头部 -->
		<status-nav navBarTitle="工人列表"></status-nav>
		<view class="content" :style="{'padding-top':statusHeight+50+'px'}">
			<!-- 工人列表 -->
			<view class="worker-record bg-white">
				<view class="item font26" v-for="(item,index) in workerList" :key="index">
					<view class="info enter-info">
						<text>工地：{{item.worksite_name}}</text>
						<text>姓名：{{item.real_name}}</text>
					</view>
					<!-- 星级 -->
					<view class="star-rating">
						<image src="/static/icon//icon-star-active.png" mode="widthFix" v-for="(item1,index1) in parseInt(item.star)" :key="index1"></image>
						<image src="/static/icon/icon-star.png" mode="widthFix" v-for="(item1,index1) in 5-parseInt(item.star)" :key="index1"></image>
					</view>
					<!-- 操作 -->
					<view class="handle-btns font24 color-blue">
						<view class="btn" @tap="openStar(index,item.id)">工人评定</view>
						<view class="btn" @tap="toRecord(item.id)">评定记录</view>
						<view class="btn" @tap="toDetail(item.id)">查看详情</view>
					</view>
				</view>
			</view>
			<!-- 加载更多 -->
			<view class="more-tips font24">{{workerList.length==total?'没有更多数据了':'下滑获取更多'}}</view>
		</view>
		<!-- 工人评定弹窗 -->
		<view class="pop-up-bg" v-if="showEvaluate">
			<view class="sign-cate bg-white">
				<view class="title font34">工人评定</view>
				<view class="txt evaluate-txt font28">
					<view class="evaluate-tips">请根据工人本月的表现情况进行评定</view>
					<view class="evaluate-stars" v-for="(item,index) in allStars" :key="index">
						<image @tap="changeStars(index)" :src="index<=curStars-1?'/static/icon/icon-stars-active.png':'/static/icon/icon-stars.png'" mode="widthFix"></image>
					</view>
				</view>
				<!-- 审核按钮 -->
				<view class="sign-cate-btns color-white font30">
					<view class="btn" @tap="showEvaluate=false">取消</view>
					<view class="btn" @tap="submitEv">确认</view>
				</view>
			</view>
		</view>
		<!-- 尾部 -->
		<tabbar :userType="userType" current="2"></tabbar>
	</view>
</template>
<script>
	import tabbar from '@/components/tabbar/tabbar';
	export default {
		components:{
			tabbar
		},
		data() {
			return {
				statusHeight:uni.getSystemInfoSync().statusBarHeight, //状态栏高度
				userType:'director', //账户类型 工人：worker 负责人：director
				workerList:[], //打卡列表
				page:1,
				size:10,
				total:0,
				
				showEvaluate:false,//是否显示评定弹窗
				allStars:5, //总共几星
				curStars:0, //选择几星
				
				workerId:0, //工人id
				changeIndex:0,//改变星级位置
			}
		},
		onLoad() {
			
		},
		onShow() {
			// 获取工人列表
			this.getWorkerList();
		},
		onReachBottom() {
			if(this.signList.length<this.total){
				this.page++;
				// 获取工人列表
				this.getWorkerList();
			}
		},
		onPullDownRefresh() {
			this.page = 1;
			// 获取工人列表
			this.getWorkerList();	
			// 关闭下拉刷新
			uni.stopPullDownRefresh();
		},
		methods: {
			// 打开工人评定
			openStar(index,id){
				this.showEvaluate = true;
				this.curStars = 0;
				this.changeIndex = index;
				this.workerId = id;
			},
			
			// 选择几星
			changeStars(index){
				if(index!==this.curStars-1){
					this.curStars = index+1;
				}
			},
			
			// 工人评定
			submitEv(){
				let params = {
					id:this.workerId,
					star:this.curStars,
				}
				this.$requst.post('/api/v1/manager/star',params).then(res=>{
					if(res.code==0){
						this.$toolAll.tools.showToast('评定成功');
						this.showEvaluate = false;
						this.workerList[this.changeIndex].star = this.curStars;
					}else{
						this.$toolAll.tools.showToast(res.msg);
					}
				})
			},
			
			// 获取工人列表
			getWorkerList(){
				let params = {
					page:this.page,
					size:this.size,
				}
				if(this.page==1) this.workerList = [];
				this.$requst.post('/api/v1/manager/worker-list',params).then(res=>{
					if(res.code==0){
						console.log(res,'工人列表');
						this.total = res.data.total;
						this.workerList = this.workerList.concat(res.data.list);
					}
				})
			},
			
			// 查看详情
			toDetail(id){
				uni.navigateTo({
					url:`/pagesB/workerDetail/workerDetail?id=${id}&userType=director`,
				})
			},
			// 评定记录
			toRecord(id){
				uni.navigateTo({
					url:`/pagesB/evaluateRecord/evaluateRecord?id=${id}`,
				})
			},
		}
	}
</script>
<style scoped>
	
</style>