partnerApp/pages/wallet/billDetails1.vue

<template>
	<view>
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		
		<view class="white-box">
			<view class="tx">
				<view class="tx-grid">
					<view class="tx-grid-text">
						<view class="title">预收账户</view>
						<view class="money">
							<text>{{ advanceMoney }}</text>
							<text class="money-b">元</text>
						</view>
					</view>
				</view>
			</view>
			<view class="palace palace-one">
				<view class="palace-grid">
					<view class="palace-grid-text active">
						<view class="palace-grid-text-data">
							<text>{{ carAdvanceMoney }}</text>
							<text class="palace-grid-text-data-b">元</text>
						</view>
						<view class="palace-grid-text-name">车险预收</view>
					</view>
				</view>
				<view class="palace-grid">
					<view class="palace-grid-text">
						<view class="palace-grid-text-data">
							<text>{{ lifeAdvanceMoney }}</text>
							<text class="palace-grid-text-data-b">元</text>
						</view>
						<view class="palace-grid-text-name">寿险预收</view>
					</view>
				</view>
				<view class="palace-grid">
					<view class="palace-grid-text">
						<view class="palace-grid-text-data">
							<text>{{ accidentAdvanceMoney }}</text>
							<text class="palace-grid-text-data-b">元</text>
						</view>
						<view class="palace-grid-text-name">意外险预收</view>
					</view>
				</view>
			</view>
		</view>
		<z-paging auto-show-back-to-top ref="paging" @query="getOrdersList" :list.sync="list" :default-page-size="10"  :mounted-auto-call-reload="true" :style="getHeight">
			<view class="list-view">
				
				<!-- 查询区域Start -->
				<view class="queryView d-flex">
					<view class="d-flex a-center j-center" >
						<picker @change="bindPickerTypeChange" :value="typeIndex" :range="typeArray">
						    <view class="d-flex a-center">{{typeArray[typeIndex]}} <view class="icon iconfont icon-xiala"></view></view>
						</picker>
					</view>
					<view class="d-flex a-center j-center">
						<picker @change="bindPickerYearChange" :value="yearIndex" :range="yearArray">
						    <view class="d-flex a-center">{{yearArray[yearIndex]}}年 <view class="icon iconfont icon-xiala"></view></view>
						</picker>
					</view>
					<view class="d-flex a-center j-center">
						<picker @change="bindPickerMonthChange" :value="monthIndex" :range="monthArray">
						    <view class="d-flex a-center">{{monthArray[monthIndex]}}月 <view class="icon iconfont icon-xiala"></view></view>
						</picker>
					</view>
					<view class="d-flex a-center j-center">
						<picker @change="bindPickerDateChange" :value="dateIndex" :range="dateArray">
						    <view class="d-flex a-center">{{dateArray[dateIndex]}}日 <view class="icon iconfont icon-xiala"></view></view>
						</picker>
					</view>
					<view class="d-flex a-center j-center">
						<view class="d-flex a-center px-2">合计：0.00</view>
					</view>
				</view>
				<!-- 查询区域End -->
				
				<block v-for="(item,index) in list" :key="index">
					<view class="list-item" >
						<view class="content-box">
							<view class="des-box">
								<view class="tit">订单号：{{item.orderno }}</view>
								<view class="tit">投保公司：{{item.inscompany}}</view>
								<view class="tit">车牌号：{{ item.licenseNo }}</view>
								<view class="time">签单时间：{{ item.createtime }}</view>
							</view>
						</view>
						<view class="money d-flex a-center j-center flex-column">
							<view>+{{((item.feeamount-0)+(item.disamount-0)).toFixed(2) }}</view>
							<view>应发佣金</view>
						</view>
					</view>
				</block>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import {mapState} from "vuex"
	import ZPagingMixin from '@/uni_modules/z-paging/components/z-paging/js/z-paging-mixin';
	export default {
		components: {
			ZPagingMixin
		},
		data() {
			return {
				/* 查询区域Start */
				typeIndex:0,	//订单的类型选择
				typeArray:['车险','意外险','寿险'],	//订单的类型
				yearArray:[],	//订单的查询年份
				yearIndex:0,	//订单的年份选择
				monthArray:[],	//订单的查询月份
				monthIndex:0, 	//订单的月份选择
				dateArray:[],	//订单的查询月份
				dateIndex:0, 	//订单的月份选择
				/* 查询区域End */
				
				currentPage: 1, //当前页码
				pageSize: 5, //每页展示条数
				totalPages: 0, //总页数
				totalSize: 0, //总条数
				list: [],
				loadStatus: 0,

				advanceMoney: 0, //预收金额
				carAdvanceMoney: 0, //车险预收金额
				lifeAdvanceMoney: 0, //寿险预金额
				accidentAdvanceMoney: 0, //意外险金额
			};
		},
		onLoad() {
			// 搜索年选项Start
			this.yearArray=[(new Date().getFullYear()-2),(new Date().getFullYear()-1),new Date().getFullYear(),]
			this.yearIndex=this.yearArray.length-1;
			// 搜索年选项End
			
			// 搜索月选项Start
			var month = new Date().getMonth()+1;
			for(var i=1;i<=month;i++){
				if(i<10){
					this.monthArray.push('0'+i);
				}else{
					this.monthArray.push(i);
				}
			}
			this.monthIndex=this.monthArray.length-1;
			// 搜索月选项End
			// 搜索日选项Start
			var date = new Date().getDate();
			for(var i=1;i<=date;i++){
				if(i<10){
					this.dateArray.push('0'+i);
				}else{
					this.dateArray.push(i);
				}
			}
			this.dateIndex=this.dateArray.length-1;
			// 搜索日选项End
		},
		computed:{
			...mapState(['userInfo']),
			getHeight() {
				let height = uni.getSystemInfoSync().windowHeight - uni.upx2px(356);
				return `height: ${height}px`;
			}
		},
		onShow() {
			this.getCarAdvanceMoney();
		},
		methods: {
			bindPickerTypeChange(e){
				this.typeIndex = e.target.value;
			},
			//搜索年发生变化
			bindPickerYearChange(e) {
				this.yearIndex = e.target.value;
				this.monthArray=[];
				if(this.yearIndex == (this.yearArray.length-1)){
					var month = new Date().getMonth()+1;
					for(var i=1;i<=month;i++){
						if(i<10){
							this.monthArray.push('0'+i);
						}else{
							this.monthArray.push(i);
						}
					}
					this.monthIndex=this.monthArray.length-1;
				}else{
					for(var i=1;i<=12;i++){
						if(i<10){
							this.monthArray.push('0'+i);
						}else{
							this.monthArray.push(i);
						}
					}
					this.monthIndex=0;
				}
			},
			//搜索月发生变化
			bindPickerMonthChange(e) {
				this.monthIndex = e.target.value;
			},
			bindPickerDateChange(e){
				this.dateIndex = e.target.value;
			},
			
			
			
			// 预收账户金额查询 
			async getCarAdvanceMoney() {
				let res = await this.$http.get('/insPayApply/advanceAccount?userid=' + this.userInfo.sysUser.id,{},{load:false});
				if (res.code == 200) {
					this.carAdvanceMoney = res.data;
					this.advanceMoney = res.data;
				}
			},

			//获取订单数据Start
			async getOrdersList(pageNo, pageSize) {
				var data = {
					"columnFilters": {
						"settletype": {
							"name": "settletype",
							"value": "B"
						},
						"settlestatus": {
							"name": "settlestatus",
							"value": "0"
						},
						"userid": {
							"name": "userid",
							"value": this.userInfo.sysUser.id
						}
					},
					"pageNum": pageNo,
					"pageSize": pageSize
				};
				let res = await this.$http.post('/insFeeDetail/queryInsCompanyFee',data);
				
				let content = [];
				if (res.code == 200) {
					if(res.data.content.length>0){
						content = res.data.content;
					}
				}
				this.$refs.paging.complete(content);
			},
			//获取订单数据End
		},
	};
</script>

<style lang="scss" scoped>
@import '@/style/mixin.scss';
page {
	background-color: #fff;
}
.white-box {
	width: 94%;
	background: white;
	border-radius: 10rpx;
	margin: 20rpx auto 20rpx;
	box-shadow: 0 6rpx 20rpx #e7e7e7;
}
.white-box .tx {
	padding-top: 26rpx;
	overflow: hidden;
	display: flex;
	justify-content: space-between;
	align-content: center;
}
.white-box .tx .tx-grid {
	box-sizing: border-box;
}
.white-box .tx .tx-grid:first-child {
	margin-left: 40rpx;
}
.white-box .tx .tx-grid .tx-grid-comm-sign {
	display: block;
	border-radius: 40rpx 0 0 40rpx;
	font-size: 26rpx;
	padding: 16rpx 44rpx;
	background: linear-gradient(to right, rgba($themeColor,0.8), rgba($themeColor,0.6));
	color: #fff;
	font-weight: bold;
}

.white-box .tx .tx-grid .tx-grid-text {
	display: block;
	color: #333;
	font-size: 26rpx;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.white-box .tx .tx-grid .tx-grid-text .title {
	font-size: 26rpx;
	font-weight: normal;
	color: $themeColor;
}

.white-box .tx .tx-grid .tx-grid-text .money {
	font-size: 60rpx;
	color: $themeColor;
	letter-spacing: 2rpx;
	margin-bottom: 10rpx;
}

.white-box .tx .tx-grid .tx-grid-text .money-b {
	font-size: 28rpx;
}

.white-box .palace {
	padding-bottom: 20rpx;
	overflow: hidden;
	display: flex;
	justify-content: center;
}

.white-box .palace .palace-grid {
	flex: 1;
	position: relative;
	box-sizing: border-box;
}
.white-box .palace .palace-grid .palace-grid-text {
	display: block;
	text-align: center;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
.white-box .palace .palace-grid .palace-grid-text.active{
	background-color: rgba($themeColor,0.6);
}
.white-box .palace .palace-grid .palace-grid-text .palace-grid-text-name {
	font-size: 26rpx;
	font-weight: normal;
	color: $themeColor;
}
.white-box .palace .palace-grid .palace-grid-text.active .palace-grid-text-name {
	color: #FFFFFF!important;
}
.white-box .palace .palace-grid .palace-grid-text .palace-grid-text-data {
	font-size: 32rpx;
	color: $themeColor;
	letter-spacing: 2rpx;
	margin-bottom: 5rpx;
}
.white-box .palace .palace-grid .palace-grid-text.active .palace-grid-text-data {
	color: #FFFFFF!important;
}
.white-box .palace .palace-grid .palace-grid-text .palace-grid-text-data .palace-grid-text-data-b {
	font-size: 20rpx;
}

.list-view {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.list-item {
	width: 100%;
	padding: 30rpx 28rpx;
	box-sizing: border-box;
	background: #fff;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	border-bottom: 1rpx solid #eaeef1;
}

.item-last::after {
	left: 0 !important;
}

.content-box {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

.des-box {
	min-height: 80rpx;
	padding-left: 28rpx;
	box-sizing: border-box;
	vertical-align: top;
	color: #333;
	font-size: 24rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.tit {
	font-size: 30rpx;
	max-width: 500rpx;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.source {
	margin: 12rpx 0;
}

.time {
	color: #888;
}

.money {
	font-size: 38rpx;
	font-weight: 500;
	color: #1E85FE;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding-left: 20rpx;
}

.less {
	color: #4caf50 !important;
}

.tip {
	margin-top: 50rpx;
	display: flex;
	justify-content: center;
	align-content: center;
	font-size: 24rpx;
	color: #888;
}

.nothing {
	position: absolute;
	top: 320upx;
	left: 0;
	right: 0;
	bottom: 0;
}

.nothing>view {
	line-height: 1;
}

.nothing>view.icon {
	/* color: #66A3FF; */
	color: #989898;
	font-size: 260upx;
}

.nothing>view.text {
	font-size: 28upx;
	color: #989898;
}


/* 查询区域Start */
.queryView {
	justify-content: space-around;
	height: 82upx;
	line-height: 80upx;
}
.queryView>view{
	border-top: 1px solid #FFC38F;
	border-bottom: 1px solid #FFC38F;
	border-left: 1px solid #FFC38F;
	box-sizing: border-box;
	color: #FFC38F;
}
.queryView>view:nth-child(1){
	flex: 3;
}
.queryView>view:nth-child(2){
	flex: 4;
}
.queryView>view:nth-child(3){
	flex: 3;
}
.queryView>view:nth-child(4){
	border-right: 1px solid #FFC38F;
	flex: 3;
}
/* 查询区域End */
</style>