supervise/supervise-uniapp/pages/index/DataAssembleList2.vue

<template>
	<view class="page">

		<view class="top">

			<text class="top-title">全部项目</text>

			<view class="top-num">
				<image class="top-num-img" src="../../static/baseIcon/project.png"></image>
				<text class="top-num-text">{{dataList.length}}</text>

			</view>

			<view class="top-date"  @click="openDate">
				<text class="top-date-text">{{params.orderDate}}</text>
				<image class="top-date-img" src="../../static/baseIcon/calendar.png"></image>
			</view>

		</view>

		<view class="money">

			<text class="money-text">总授信：{{allCredit}}元</text>
			<text class="money-text">总用信：{{allUseCredit}}元</text>

		</view>

		<view class="list">
			<view v-for="(item,index) in dataList" class="newslist" @click="itemClick(item)">

				<view class="item" :class="{'item2':index==dataList.length-1}">

					<view class="item-name">{{item.projectName}}</view>

					<view>
						<text class="item-num" :class="{'item-num2':item.state=='2'}">{{item.pledgeRatePercent}}%</text>
						<text class="item-num">/ {{item.bankPledgeRate}}%</text>
					</view>

					<image src="../../static/baseIcon/zy.png" style="width: 15px;height: 15px;" mode="aspectFill">
					</image>
				</view>

			</view>

		</view>

		<u-datetime-picker ref="datetimePicker" :closeOnClickOverlay='true' @close="cancelClick" @cancel="cancelClick"
			@confirm="confirmClick" :show="datetimeShow" v-model="orderDate" mode="date" :formatter="formatter">
		</u-datetime-picker>

	</view>


</template>

<script>
	import {
		formatTimeTwo,
		beforeDay
	} from "@/utils/index";
	export default {
		data() {
			return {
				datetimeShow: false,
				allCredit: "",
				allUseCredit: "",
				orderDate:"",
				params: {
					userSid: getApp().globalData.sid ,
					orderDate: "",
				},
				dataList: [
					
				],

			};
		},
		onLoad() {
			this.params.orderDate = beforeDay(null,-1)
		},

		onShow() {
			this.loadData();
		},
		onReady() {
			/*  #ifdef  MP-WEIXIN */
			// 微信小程序需要用此写法
			this.$refs.datetimePicker.setFormatter(this.formatter)
			/* #endif */
		},
		methods: {
			openDate() {
				
				console.log('openDate')
				this.datetimeShow = true
			},
			formatter(type, value) {
			
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
			cancelClick() {
				this.datetimeShow = false
			},
			confirmClick(date) {
				console.log('confirmClick', date)
				console.log('confirmClick', formatTimeTwo(parseInt(date.value), "Y-M-D"))
			
						this.params.orderDate = formatTimeTwo(parseInt(date.value), "Y-M-D")
				this.datetimeShow = false
				this.loadData()
			
			},
			loadData() {
				console.log('params', this.params)
				this.$api.projectListPageNew(this.params).then((resp) => {
					// if (resp.success) {
					console.log('1111', resp)
					this.allCredit=resp.creditLimitTotal
					this.allUseCredit=resp.useLimitTotal
					this.dataList = resp.list

				}).catch(e => {
					console.log('eeeee', e)
				})

			},
			itemClick(item) {
				console.log('itemClick', item)
				console.log('orderDate', this.params.orderDate)
				uni.navigateTo({
					url: '../index/RegulatoryReporting?projectSid=' + item.projectSid + "&orderDate=" + this.params.orderDate
				});
			}
		}
	}
</script>

<style lang="scss">
	.page {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;

		.top {
			margin-top: 5px;
			padding: 20px;
			background: #fff;
			display: flex;
			flex-direction: row;
			align-items: center;

			.top-title {
				color: #000;
				font-size: 18px;
				font-family: sans-serif;
				font-weight: 600;
			}

			.top-num {
				margin-left: 20px;
				flex: 1;
				display: flex;
				flex-direction: row;
				align-items: center;

				.top-num-img {
					width: 14px;
					height: 14px;
				}

				.top-num-text {
					margin-left: 5px;
					color: #E99D42;
					font-size: 14px;
				}
			}

			.top-date {
				display: flex;
				flex-direction: row;
				align-items: center;

				.top-date-text {
					color: #717171 100%;
					font-size: 14px;
					margin-right: 10px;
				}

				.top-date-img {
					width: 14px;
					height: 14px;
				}

			}
		}

		.money {
			display: flex;
			flex-direction: row;
			align-items: center;
			border-top: 1px solid #eee;
			padding: 10px 0px;
			background: #fff;

			.money-text {
				margin-left: 20px;
				font-size: 15px;
				color: #191919;
			}
		}

		.list {
			margin-top: 10px;
			background: #fff;

			.newslist {
				width: 100%;
				display: flex;
				flex-direction: row;
				align-items: center;

				.item {
					width: 100%;
					padding: 20px 20px;
					display: flex;
					flex-direction: row;
					align-items: center;
					border-bottom: 1px #eee solid;

					.item-name {
						flex: 1;
						color: #191919;
						font-size: 15px;
						font-weight: 600;
						font-family: sans-serif;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
						margin-right: 20px;
					}

					.item-num {
						margin-right: 5px;
						color: #999999;
						font-size: 12px;
					}

					.item-num2 {
						color: #FF5006;

					}
				}

				.item2 {
					border-bottom: none;
				}
			}

		}
	}
</style>