partnerApp/pages/institutional/institutional - 副本.vue

<template>
	<view >
		<public-module></public-module>
		<view class=" flexd " style="z-index: 99;">
			<view class="search dis a-c j-s">
				<u-search v-model="pageRequest.deptName" @custom="custom" @search="search" :shape="shape"
					:height='68' bg-color="#fff"  
					:input-style="{background:'transparent'}" placeholder-color="#ccc" :clearabled="clearabled"
					:show-action="showAction" :input-align="inputAlign" @clear="clear"
					:action-style="{background:'#fff'}" placeholder="请输入机构关键词"></u-search>
				<image src="/static/shaixuan.png" mode="" @click="searchPopup"></image>
			</view>
		</view>
		<o-empty v-if="pageResult.length==0" />
		<view  style="padding-top:120upx"  >
			<view class="institutional-list" v-for="item in pageResult" @click="closeDetail(item)">
				<view class="homepage" style="font-size: 13px;font-weight: 500;">
					<text>团队名称：{{item.deptName}}</text>
					<text>￥{{item.sumpremium}}</text>
				</view>
				<view class="dis j-s">
					<view class="homepage-title">
						<text class="button1">出单{{item.orderManNum}}人</text>
						<text class="button2">总人数{{item.deptManNum}}人</text>
					</view>
					<view>
					<u-button   size="mini" type="primary"  class="view-now" @click="closeDetail(item)">查看详情</u-button>
				</view>
				<!-- 	<text>团队人数：{{item.deptManNum}}</text>
					<text>出单人力：{{item.orderManNum}}</text> -->
				</view>
				
				<!-- <u-button class="view-now"  >立即查看</u-button> -->
			</view>
		</view>
		<u-loadmore v-if="pageResult.length!=0" :status="status" />
		<!-- 普通弹窗 -->
		<u-popup ref="popup"  :mask="true" mode="bottom">
			<view  >
				<view class="tabs">
					 <u-tabs style="justify-content: flex-start;"  :show-bar="false"
						active-color="#232832" :is-scroll="false" :current="0"  :list="tabslist" 
						bar-width="60"></u-tabs> 
				</view>
				<view class="dis  a-c f-wrap j-s" style="margin: 10px;">
					<view class="status-data" :class="item.value==timespecifications? 'active':''"
						v-for="(item,index) in dateList" @tap="dateclick(index)" :key="index">
						{{item.label}}
					</view>
					<view class="dis a-c">
						<view class="status-data" :class="startShow? 'active' :''"
							@tap="startShowmethod()">
							<text v-if="pageRequest.beginTime!=''">{{pageRequest.beginTime}}</text>
							<text v-else>{{transformTime()}}</text>
						</view>
						<text style="margin: 0 8px;font-size: 12px;">至</text>
						<view class="status-data" :class="endShow? 'active' :''" @tap="endShowmethod()">
							<text v-if="pageRequest.endTime!=''">{{pageRequest.endTime}}</text>
							<text v-else>{{transformTime()}}</text>
						</view>
					</view>
				</view>
				<view class="dis  a-c f-wrap j-s trading-foot">
					<text @click="$refs.popup.close()">取消</text>
					<text @click="confirm">确认</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { log } from 'util';
	export default {
		name: 'name', //插件名称
		data() {
			return {
				//日期筛选list
				dateList: [{
						label: '全部',
						value: 0,
					},
					{
						label: '一周内',
						value: 1,
					},
					{
						label: '一个月内',
						value: 2,
					},
					{
						label: '三个月内',
						value: 3,
					},
					{
						label: '六个月内',
						value: 4,
					},
				
				],
				rangeData:'',
				 btnGetCode: {
				          borderRadius: '7px',//驼峰命名注意----这里如果不规范，会整体失效,px，rpx作为单位都可以,一定要有引号
				          height: '34px', 
				    },
				isLoading:false,
				clearabled: true,
				inputAlign: 'left',
				showAction: false,
				shape: 'square',
				pageRequest: { //查询的默认条件
					deptName: "",
					beginTime:'',
					endTime:'',
					pageNum: 1,
					pageSize: 20,
				},
				pageResult:[],
				tabslist: [{
					name: '时间筛选'
				}, ],
				timespecifications: null,
				startShow: false,
				endShow:false,
				totalPages: 0, //订单总页数
				status: 'loadmore',
			}
		},
		async onLoad(e) {
			// if(e.userId){
			// 	this.pageRequest.userId=e.userId
			// }
			this.getOrdersList(1, 20)
		},
		methods: {
			closeDetail(val){
				uni.navigateTo({
					url: `/pages/institutional/detail?deptId=${val.deptId}&deptName=${val.deptName}&startTime=${val.startTime}`
				})
			},
			onReachBottom() {
				if (this.pageRequest.pageNum >= this.totalPages) return;
				this.status = 'loading';
				this.pageRequest.pageNum = ++this.pageRequest.pageNum;
				setTimeout(async () => {
					let res = await this.$http.post('/agency/queryTeamInfoPage', this.pageRequest);
					if (res.code == '200') {
						this.pageResult = [...this.pageResult, ...res.data.content];
					}
					if (this.pageRequest.pageNum >= this.totalPages) this.status = 'nomore';
					else this.status = 'loading';
				}, 1000)
			},
			//当前时间
			transformTime(day) {
				var date = new Date();
				date.setFullYear(date.getFullYear());
				date.setTime(date.getTime());
				var strYear = date.getFullYear();
				var strDay = day ? date.getDate() - day : date.getDate();
				var strMonth = date.getMonth() + 1;
				if (strMonth < 10) {
					strMonth = "0" + strMonth;
				}
				if (strDay < 10) {
					strDay = "0" + strDay;
				}
				var datastr = strYear + "-" + strMonth + "-" + strDay;
				return datastr;
			},
			transformTime1(month) {
				var date = new Date();
				date.setFullYear(date.getFullYear());
				date.setTime(date.getTime());
				var strYear = date.getFullYear();
				var strDay = date.getDate();
				var strMonth = month ? (date.getMonth() + 1) - month : date.getMonth() + 1;
				if (strMonth < 10) {
					strMonth = "0" + strMonth;
				}
				if (strDay < 10) {
					strDay = "0" + strDay;
				}
				var datastr = strYear + "-" + strMonth + "-" + strDay;
				return datastr;
			},
			startShowmethod() {
				this.startShow = true;
				this.timespecifications = null;
			},
			endShowmethod() {
				this.endShow = true;
				this.timespecifications = null;
			},
			//日期筛选
			dateclick(e) {
				/* 0:全部  1：一周内 2：一个月内 3：三个月内  4:六个月内*/
				switch (e) {
					case 0:
						this.pageRequest.beginTime = "";
						this.pageRequest.endTime = "";
						break;
					case 1:
						this.pageRequest.beginTime = this.transformTime(7);
						this.pageRequest.endTime = this.transformTime();
						break;
					case 2:
						this.pageRequest.beginTime = this.transformTime1(1);
						this.pageRequest.endTime = this.transformTime();
						break;
					case 3:
						this.pageRequest.beginTime = this.transformTime1(3);
						this.pageRequest.endTime = this.transformTime();
						break;
					case 4:
						this.pageRequest.beginTime = this.transformTime1(6);
						this.pageRequest.endTime = this.transformTime();
						break;
					default:
				}
				this.timespecifications = e;
			},
			searchPopup() {
				this.$refs.popup.open()
			},
			search(e) {
				this.pageRequest.deptName=e
				this.getOrdersList(1, 20);
			},
			confirm() {
				this.getOrdersList(1, 20);
				this.$refs.popup.close()
			},
			async getOrdersList(page, size) {
				this.isLoading=true
				this.pageRequest.pageNum = page;
				this.pageRequest.pageSize = size;
				let res = await this.$http.post('/agency/queryTeamInfoPage', this.pageRequest);
				if (res.code == '200') {
					this.isLoading=false
					this.pageResult = res.data.content;
					this.totalPages = res.data.totalPages;
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.flexd {
		position: fixed;
		left: 0;
		right: 0;
		background: linear-gradient( 180deg, #DAE0EE 0%, #E9ECF4 100%);
	}
	.homepage{
		display: flex;
		width: 100%;
		 justify-content: space-between;
	}
.search {
		padding: 13px 16px;
		image {
			width: 22px;
			height: 22px;
			margin-left: 20px;
		}
	}
	.institutional-list{
		background: #FFFFFF;
		padding: 20upx;
		font-size: 38upx;
		border-bottom: 1px solid #ccc;
	}
	.tabs {
		padding: 0 15px;
		border: 1px solid #f2f2f2;
	}
	
	.status-data {
		padding: 4px 10px;
		box-sizing: border-box;
		margin: 0 4px 4px 0;
		font-size: 12px;
		border: 1px solid #eee;
		cursor: pointer;
	}
	.active {
		position: relative;
		background: rgba(0, 82, 255, 0.1);
		color: #0052FF;
		border: 1px solid #0052FF;
		font-weight: 700;
	}
	
	.active::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 10px;
		height: 10px;
		background-image: url("/static/image/car-insure/before.png");
		background-size: cover;
	}
	.trading-foot>text{
		width: 50%;
		text-align: center;
		background: #EAEAEA;
		color: #0052FF;
		line-height: 80upx;
	}
	.trading-foot>text:last-child{
		background: #343EEF;
		color: #FFFFFF;
	}
	.homepage-title{
		margin-top: 5px;
		button{
			background-color: #FEF0E1 ;
			color: #FE8F1C ;
		}
	}
	.homepage-title>button:last-child{
		background: #E6FAE3;
		color: #3AC716;
			margin-left: 10px;
	}
	.view-now{
		background: linear-gradient( 90deg, #7E99D1 0%, #4F78B1 100%);
		border-radius: 20px 20px 20px 20px;
	}
	.button1{
		background-color: #FEF0E1 ;
		color: #FE8F1C ;
		font-size: 11px;
		padding:5px 10px
	}
	.button2{
		background: #E6FAE3;
		color: #3AC716;
		margin-left: 10px;
		font-size: 11px;
		padding:5px 10px
	}
</style>