sport_pc/.svn/pristine/b0/b0f3fd15842b59f92de5d29f371c4ed11cba626b.svn-base

<template>
	<div>
		<div class="box">
			<div class="row allAlignment center head_on_box">
				<p
						class="logo"
						style="font-size:.6rem;color:#E1E1DF;font-family:  'Franklin Gothic Medium'"
				>
					<i style="color:#F76649;">HX</i>669
				</p>
				<p style="color:#fffffe;font-size:.36rem">盈亏记录</p>
				<!-- <img class="log" src="../assets/st-imges/indexlogo.png" alt=""> -->
				<div class="row allAlignment center">
					<img class="user-ion" @click="toRouter()" src="@/assets/st-imges/close.png" alt>
					<!-- <div v-if="nameShow" class="row allAlignment center username">
						{{name}}
					</div>-->
					<img
							style="margin-left: 0.44rem;"
							class="user-ion"
							src="@/assets/st-imges/contact.png"
							alt
					>
				</div>
			</div>
		</div>
		<div class="boxIn row item-center">
			<div class="date row center">
				<yd-button-group>
					<yd-button size="large" bgcolor="rgba(0,0,0,0)" @click.native="openStart">{{startTime}}</yd-button>
				</yd-button-group>
			</div>
			<p style="margin:0 .22rem">至</p>
			<div class="date row center">
				<yd-button-group>
					<yd-button size="large" bgcolor="rgba(0,0,0,0)" @click.native="openEnd">
						<div>{{endTime}}</div>
					</yd-button>
				</yd-button-group>
			</div>
			<button class="dateBtn" @click="reset()">查询</button>
		</div>
		<div
				class="row center"
				style="height:.88rem;color:#ebebeb;font-size:.32rem;background:#666;margin-top:.1rem;"
				v-if="!list"
		>对不起，您当前没有登录，请前往登录</div>
		<div>
			<div class="datalist">
				<div>
					<yd-infinitescroll :callback="loadList" ref="infinitescrollDemo">
						<yd-list theme="5" slot="list">
							<yd-list-item v-for="(item,index) in list" :key="index">
								<yd-list-other slot="other">
									<div class="datalistbox row allAlignment">
										<p>{{item.money_time}}</p>
										<p>{{item.money_type=='1'?'+'+item.money:'-'+item.money}}元</p>
									</div>
								</yd-list-other>
							</yd-list-item>
						</yd-list>
					</yd-infinitescroll>
				</div>
			</div>
		</div>
		<yd-cell-group style="display:none;">
			<yd-cell-item arrow>
				<yd-datetime
						type="date"
						ref="datetimeStart"
						:end-date="endTime"
						slot="right"
						v-model="startTime"
				></yd-datetime>
			</yd-cell-item>
		</yd-cell-group>
		<yd-cell-group style="display:none;">
			<yd-cell-item arrow>
				<yd-datetime
						type="date"
						ref="datetimeEnd"
						:start-date="startTime"
						:end-date="date"
						slot="right"
						v-model="endTime"
				></yd-datetime>
			</yd-cell-item>
		</yd-cell-group>
	</div>
</template>
<script>
	import "@/css/index.css";
	export default {
		name: "ProfitAndLossRecord",
		data() {
			return {
				img: require("@/assets/st-imges/date.png"),
				img1: require("@/assets/st-imges/home.png"),
				img2: require("@/assets/st-imges/gengduo-1.png"),
				active: 0,
				list: [],
				// 当前时间 同时也是日历结束时间
				date: "",
				//   查询开始时间
				startTime: "",
				//   查询结束时间
				endTime: "",
				// 分页
				page: 1,
				pageSize: 10,
				timers: true
			};
		},
		created() {
			this.initialTime();
		},
		methods: {
			//判断登录是否过期
			getuserData() {
				if (localStorage.getItem("token")) {
					this.$http
						.post(this.$ports.login.getAgent, {
							token: localStorage.getItem("token")
						})
						.then(res => {
							if (res.data.status == -4001) {
								this.$store.dispatch("SET_TOKEN", "");
								this.$store.dispatch("GET_ISSHOW", false);
								this.$dialog.toast({
									mes: "对不起您的登录已过期，请您重新登录",
									timeout: 3000
								});
								this.$router.push("/");
							}
						});
				}
			},
			reset() {
				this.list = [];
				this.page = 1;
				// 重置下拉加载
				this.$refs.infinitescrollDemo.$emit("ydui.infinitescroll.reInit");
				this.loadList();
			},
			// 导航
			toRouter() {
				this.$router.go(-2);
			},
			// 初始化时间
			initialTime() {
				// 现在的时间
				let date = new Date();
				//  日历开始时间
				let date2 = new Date(date);
				date2.setMonth(date.getMonth() - 3);
				this.startDate += `${date2.getFullYear()}-${
					date2.getMonth() + 1 < 10
						? "0" + (date2.getMonth() + 1)
						: date2.getMonth() + 1
				}-${date2.getDate() < 10 ? "0" + date2.getDate() : date2.getDate()}`;
				this.date += `${date.getFullYear()}-${
					date.getMonth() + 1 < 10
						? "0" + (date.getMonth() + 1)
						: date.getMonth() + 1
				}-${date.getDate() < 10 ? "0" + date.getDate() : date.getDate()}`;
				//  查询结束时间
				this.endTime += `${date.getFullYear()}-${
					date.getMonth() + 1 < 10
						? "0" + (date.getMonth() + 1)
						: date.getMonth() + 1
				}-${date.getDate() < 10 ? "0" + date.getDate() : date.getDate()}`;
				this.startTime = `${date.getFullYear()}-${
					date.getMonth() - 2 < 10
						? "0" + (date.getMonth() - 2)
						: date.getMonth() - 2
				}-${date.getDate() < 10 ? "0" + date.getDate() : date.getDate()}`;
				// console.log(this.startDate);
			},
			loadList() {
				// 补全时间
				this.$http
					.post(this.$ports.login.ProfitAndLossRecord, {
						currentPage: this.page,
						pageSize: this.pageSize,
						startTime: this.startTime + " 00:00:00", //此处是补全开始时间的时间
						endTime:this.endTime + ' 23:59:59',
						token: localStorage.getItem("token"),
						money_type: 1
					})
					.then(res => {
						// console.log(res, "aaa");
						/* 单次请求数据完毕 */
						if (res.data.data) {
							let table = res.data.data.list;
							this.list = [...this.list, ...table];
						}

						if (res.data.data.list.length < this.pageSize) {
							this.$dialog.toast({ mes: "当前已经没有记录", timeout: 1500 });
							/* 所有数据加载完毕 */
							this.$refs.infinitescrollDemo.$emit(
								"ydui.infinitescroll.loadedDone"
							);
							return;
						} else {
							/* 单次请求数据完毕 */
							this.$refs.infinitescrollDemo.$emit(
								"ydui.infinitescroll.finishLoad"
							);
							this.page++;
						}
					});
			},
			// 日历开关
			openStart() {
				this.$refs.datetimeStart.open();
			},
			openEnd() {
				this.$refs.datetimeEnd.open();
			}
		},
		mounted() {
			this.loadList();
			let _this = this;
			this.$public.ajaxTimerFun(function(timing) {
				if (_this.timers) {
					_this.getuserData();
				} else {
					clearInterval(timing);
				}
			}, 1000 * 60);
		},
		beforeDestroy() {
			this.timers = false;
		}
	};
</script>
<style  scoped>
	.yd-list-theme5 .yd-list-item {
		padding: 0;
	}
	div /deep/ .yd-list-theme5 .yd-list-item .yd-list-mes {
		padding: 0;
	}
	div /deep/ .yd-list-img {
		display: none;
	}
	div /deep/ .yd-list-mes {
		padding: 0;
	}
	div /deep/ .yd-list-other {
		padding: 0;
	}
	.boxIn {
		background: #e4e4e4;
		height: 0.88rem;
		padding: 0 0.32rem;
	}
	.date {
		width: 2.5rem;
		height: 0.6rem;
		border-radius: 0.25rem;
		background: #ccc;
	}
	.dateBtn {
		width: 0.94rem;
		height: 0.6rem;
		border: none;
		border-radius: 0.08rem;
		background-image: linear-gradient(7deg, #565656 0%, #999999 100%),
		linear-gradient(#4a4949, #4a4949);
		color: #ffffff;
		margin-left: 0.22rem;
	}
	.datalist-box p {
		height: 0.88rem;
		display: flex;
		align-items: center;
	}
	.datalistbox div {
		width: 100%;
	}
	.datalist-box {
		width: 100%;
		height: 0.88rem;
	}
	.paging {
		width: 100%;
		height: 0.88rem;
		position: absolute;
		bottom: 0;
	}
	.paging p {
		width: 0.6rem;
		height: 0.6rem;
		margin-left: 0.05rem;
		border-radius: 0.08rem;
		background: #ccc;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #363636;
	}
	.paging p input {
		width: 0.6rem;
		height: 0.6rem;
		background: #ebebeb;
		border: 2px solid #ccc;
		border-radius: 0.08rem;
	}
	.paging p button {
		width: 0.6rem;
		height: 0.6rem;
		border: none;
		background: #555;
		color: #efefef;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 0.08rem;
	}
	.paging p button:active {
		background: rgb(126, 125, 125);
		color: #ccc;
	}
	.datalistbox {
		margin-top: 0.3rem;
		width: 100%;
		height: 1rem;
		background: #efefef;
		padding: 0 0.3rem;
		font-size: 0.28rem;
		color: #555555;
		line-height: 1rem;
	}
	.datalist {
		position: relative;
	}
	.datalistlet {
		background-color: #cccccc;
	}
	.datalist .active {
		background: #f76649 !important;
		color: #efefef !important;
	}
	.msg {
		height: 0.88rem;
		margin-top: 0.3rem;
		color: #ccc;
		background: #333;
	}
	.classifyactive {
		color: #f76649;

		border-bottom: 2px solid #f76649;
	}
	.active {
		color: rgb(247, 102, 73) !important;
	}
	.box {
		background: #ebebeb;
		padding-left: 0.14rem;
	}
	div /deep/ .yd-btn-block {
		height: 100%;
	}
	#NavSlide {
		width: 100%;
		overflow: hidden;
	}
	#NavSlide nav {
		padding-top: 0.1rem;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: middle;
		-ms-flex-align: middle;
		align-items: middle;
		overflow: auto;
	}
	div /deep/ .yd-datetime-content,
	div /deep/ .yd-datetime-shade,
	div /deep/ .yd-datetime-indicator {
		height: 2rem !important;
	}
	div /deep/ .yd-button {
		padding: 0;
		width: 100%;
		height: 100%;
	}
	div /deep/ .yd-button button {
		margin: 0;
		border-radius: 0;
	}
	#NavSlide p {
		text-align: center;
		font-size: 0.28rem;
		-ms-flex-negative: 0;
		flex-shrink: 0;
		padding: 0 0.1rem;
		color: #b8b8b8;
	}
	/* #NavSlide p a{
		color: #E5E5E5;
		text-decoration: none;
	} */
	#NavSlide p span.active {
		color: #363636;
	}

	.head_on_box {
		padding: 0 0.32rem;
	}
	.box {
		height: 0.88rem;
		background: linear-gradient(to bottom, #999999, #6a6a6b);
		overflow: hidden;
	}
	.user-ion {
		width: 0.3rem;
		height: 0.3rem;
	}
	#NavSlide p {
		width: 1.1rem;
	}
</style>