GEKE_PHONE/pages/wages/wagesuser.vue

<template>
	<div style="background-color: #FFFFFF;">
		<!-- <div class="top" @click="ret()">
			<div style="width: 10%;height: 5px;"></div>
			<div style="margin-left: 10px;">
			<span style="float: left;width: 20px;height: 20px;">
				<image src="../../static/icon/fanhui3.png" style="width: 18px;height: 18px;"></image>
			</span>	
			<div style="margin-top: 5px;">
			<span style="color: #FFFFFF;">返回</span>
			</div>
			</div>
			<div style="text-align: center;margin-top: -22px;">
			<span style="color: #FFFFFF;">工资发放情况</span>
			</div>
		</div> -->
		<cu-custom bgColor="bg-gradual-pink" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content" >工资发放情况</block>
		</cu-custom>
		<div class="ins">
			<div style="height: 3px;"></div>
			 <input   placeholder="🔍  搜索" style="text-align: center;" v-model="name" />
		</div>
		<br>
		<div>
			<span style="color: #0081FF;margin-left: 20px;font-size: 18px;">工资发放情况</span>
			<div style="width: 100%;height: 10px;"></div>
		</div>
		<div style="width: 100%;height: 10px;background-color:#F1F1F1 ;"></div>
		
			<view class="cu-list menu  radius" >
			  <view class="cu-item "v-for='(item,index) in data'>
			    <navigator class="content" @click="details(item.id)" hover-class="none">
					<div style="margin-top: -10px;">
			     <span class="imgs">
			     	<image :src="item.avatar" class="imgs"></image>
			     </span>	
				 </div>
			     <div style="margin-top: -40px;">
					  <text style="margin-left: 30%;">{{item.realname}}</text>
				 </div>
				 <div style="margin-top: -25px;">
				 				  <text class="text-grey" style="margin-left: 60%;">{{item.orgCodeTxt}}</text>
				 </div>
				 
			   </navigator>
			  </view> 
						</view>
			<!-- <div style="margin-left: 10px;">
			<ul>
				<li class="s" v-for='(item,index) in data'  @click="details(item.id)">
				<br>
				<span class="imgs">
					<image :src="item.avatar" class="imgs"></image>
				</span>	
				<div style="margin-left: 50px;margin-top: -40px;">
					<div>
						<h3>{{item.realname}}</h3>
					</div>
					<div style="margin-top: -27px;margin-left: 80px;">
					<span style="margin-left: 15%;color: #0081FF;font-size: 15px;">{{item.orgCodeTxt}}</span>
					<span style="float: right;width: 20px;height: 10px;"></span>
					
					</div>
				</div>
				<br>
				<div style="width: 100%; height: 1px; border-top: solid #ACC0D8 1px;margin-top: 10px;"></div>
				
				</li>
				
			</ul>
			</div> -->
		
		
		
		
	</div>
</template>

<script>
	import api from '@/api/api'
	export default {
		data() {
			return {
				name:'',
				data:[],
				userUrl:'/sys/user/querywagesList'
			}
			},
			watch:{
				name:{
					handler(newVal, objVal) {
					 this.querys(newVal);
			  },
				}
			},
			created(){
				
				this.query()
			},
			methods:{
				ss(){
					this.$Router.push({name:'dome'})
				},
				
				// 返回 类似 2016-01-02 格式的字符串
				formatDate: function(year, month, day) {
					var y = year
					var m = month
					if (m < 10) m = '0' + m
					var d = day
					if(day!=null &&day !=""){
						if (d < 10) d = '0' + d
						return y + '-' + m + '-' + d
					}else{
						return y + '-' + m 
					}
					
					
				},
				details(item){
					this.$store.commit('SET_WAGESID',item);
					  this.$Router.push({name:'wagesdetail2'})
				},
				query(){
					this.data=[];
					this.$http.get(this.userUrl,{params:{username:this.name}}).then(res=>{
						if(res.data.length>0){
								for(var i=0;i<res.data.length;i++){
									var s={
									id:res.data[i].id,
									realname:res.data[i].realname,
									post:res.data[i].post,
									avatar:(res.data[i].avatar && res.data[i].avatar.length > 0)? api.getFileAccessHttpUrl(res.data[i].avatar):'/static/avatar_boy.png',
									orgCodeTxt:res.data[i].orgCodeTxt,
									del:res.data[i].del
								}
							this.data.push(s)
							}
						}
					}).catch(err => {
						console.log(err);
					}); 
					
				},
				querys(s){
					this.data=[];
						this.$http.get(this.userUrl,{params:{username:s}}).then(res=>{
							if(res.data.length>0){
									for(var i=0;i<res.data.length;i++){
										var s={
										id:res.data[i].id,
										realname:res.data[i].realname,
										post:res.data[i].post,
										avatar:(res.data[i].avatar && res.data[i].avatar.length > 0)? api.getFileAccessHttpUrl(res.data[i].avatar):'/static/avatar_boy.png',
										orgCodeTxt:res.data[i].orgCodeTxt,
										del:res.data[i].del
									}
								this.data.push(s)
								}
							}
						}).catch(err => {
							console.log(err);
						}); 
				},
				ret(){
					this.$Router.push({name:'index'})
				}
				
				
			}
			
	}
	
	
</script>

<style>

	.month ul {
		margin: 0;
		padding: 0;
		display: flex;
		justify-content: space-between;
		height: 35px;
	}
	
	.year-month {
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-top: 10px;
	}
	
	.choose-month {
		text-align: center;
		font-size: 12px;
	}
	
	.arrow {
		padding: 15px;
		color: #999999;
	}
	
	.month ul li {
		font-size: 12px;
		text-transform: uppercase;
		letter-spacing: 3px;
	}
	
	#calendar {
		font-size: 12px;
		width: 100%;
		margin: 0 auto;
		box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.1),
			0 1px 5px 0 rgba(0, 0, 0, 0.12);
			
	}
	
	.month {
		width: 100%;
		color: #333333;
		background: #ffffff;
	}
	.ins{
		background-color: #F1F1F1;
		width: 90%;
		height: 30px;
		margin:0 auto;
		border-radius:5px 5px 5px 5px; 
		margin-top: 10px;
		
	}
	.s{
		list-style-type:none;
		margin-left: -40px;
	}
	
	.imgs{
		width: 40px;
		height: 40px;
		border-radius:5px 5px 5px 5px; 
		
	}
	.top{
		  background-color: #5677AC;
		  width: 100%;
		  height: 40px;
		 
	}
	
</style>