OfficeApp/subpkg/finance/finance.vue

<template>
	<view class="">
		<view class="finance_head">
			<view class="top">
				<view @click="navTo()">
					<view v-if="user_id==0" class="accont">
						<u--image :showLoading="true" :src="userInfo.avatar||'../../static/img/public/man.png'"
							width="44px" height="44px" shape="circle"></u--image>
						<view class="name">{{userInfo.nickname}}</view>
						<!-- <u-icon name="setting-fill" color="white" size="20"></u-icon> -->
					</view>
					<view v-else class="accont">
						<u--image :showLoading="true" :src="userInfo.avatar||'../../static/img/public/man.png'"
							width="44px" height="44px" shape="circle"></u--image>

						<view class="name">{{userInfo.nickname}}</view>
						<!-- <u-icon name="setting-fill" color="white" size="20"></u-icon> -->
					</view>
				</view>
				<!-- <view class="right" @click="navTo('/subpkg/topUp/topUp')">
          账户充值
        </view> -->
			</view>
			<view class="center">
				<view class="title">
					<text style="margin-right: 20rpx;">账户总金额(元)</text><uni-icons @click="updateEye()"
						:type="eyeType?'eye-filled':'eye-slash-filled'" color="#fff"></uni-icons>
				</view>
				<view class="price" v-show="eyeType">{{userInfo.user_money?userInfo.user_money:'0.00'}}元</view>
				<view class="price" v-show="!eyeType">****元</view>
				<view class="bubble">
					<!-- <image src="../../static/img/contract/bubble.png"></image> -->
					<view class="text" v-show="eyeType">可提现金额{{userInfo.user_money||0.00}}元</view>
					<view class="text" v-show="!eyeType">可提现金额****元</view>
				</view>
			</view>
			<view class="bottom" @click="navTo('/subpkg/orderDetail/orderDetail')">
				<view class="item">
					<view>账户余额(元)</view>
					<view class="num" v-show="eyeType">{{userInfo.user_money||0.00}}</view>
					<view class="num" v-show="!eyeType">****</view>
				</view>
				<u-line direction="col" length="40%" color="#999999FF"></u-line>
				<view class="item">
					<view>收益金额(元)</view>
					<view class="num" v-show="eyeType">{{userInfo.deposit||0.00}}</view>
					<view class="num" v-show="!eyeType">****</view>
				</view>
			</view>
		</view>
		<view class="bill">
			<view style="width: 100%;height: 90rpx;background-color: #fff;"></view>
			<uni-section titleFontSize="32rpx" type="line" title="账单流水"></uni-section>
			<!-- <u-subsection :list="billTypeList" :current="current" mode="subsection"></u-subsection> -->
			<view class="type_box">
				<view class="type">
					<view :class="current==0?'active':''" @click="changeBillType(0)">日账单</view>
					<view :class="current==1?'active':''" @click="changeBillType(1)">月账单</view>
				</view>
			</view>
			<!-- 日账单 -->
			<view class="bill_list" v-show="current==0">
				<!-- <view class="card" v-for="(item, index) in billList" :key="index">
          <view class="top">
            <view class="blue">账单详情</view>
            <view>账单日期：{{item.create_time}}</view>
          </view>
          <view class="bottom">
            <view class="left">
              <view>收益金额(元)</view>
              <view class="num">{{item.change_amount}}</view>
            </view>
            <view class="right">
              <view>支出金额:{{item.change_amount_desc<0?item.change_amount:'0.00'}}</view>
              <view>入账金额:{{item.change_amount_desc>0?item.change_amount:'0.00'}}</view>
            </view>
          </view>
        </view> -->
				<view class="item" v-for="(item, index) in billList" :key="item.id">
					<view class="top">
						账单日期: {{current?item.month:item.create_time}}
					</view>
					<view class="bottom">
						<view class="text">
							<view class="t_item" v-if="current==0">
								<view class="t_title">任务名称：</view>
								<view class="tips">{{item.remark}}</view>
							</view>
							<view class="t_item">
								<view class="t_title">金额归属：</view>
								<view class="tips">{{$store.state.app.userInfo.nickname}}</view>
							</view>
							<view class="t_item">
								<view class="t_title">收益来源：</view>
								<view class="tips">

									<text v-if="item.change_type==202" style="color: #46be61;">{{item.type_desc}}</text>
									<text v-else-if="item.change_type==203"
										style="color: #ff7c32;">{{item.type_desc}}</text>
									<text v-else="item.change_type==203">{{item.type_desc}}</text>
								</view>
							</view>
						</view>
						<view class="price">
							{{current?(item.expenditure==0?'+'+item.income:'-'+item.income):item.change_amount_desc}}
						</view>
					</view>


				</view>


				<!-- <view class="card" v-for="(item, index) in billList" :key="index">
					<view class="top">
						<view class="blue">账单详情</view>
						<view>账单日期：{{current?item.month:item.create_time}}</view>
					</view>
					<view class="bottom">
						<view class="left">
							<view>收益金额(元)</view>
							<view class="num">
								{{current?(item.expenditure==0?item.income:'-'+item.income):item.change_amount_desc}}
							</view>
						</view>
						<view class="right">
							<view>支出金额:{{item.expenditure>0?item.expenditure:'0.00'}}</view>
							<view>入账金额:{{item.income>0?item.income:'0.00'}}</view>
						</view>
					</view>
				</view>

				 -->
				<u-loadmore :status="loadConfig.status" :loading-text="loadConfig.loadingText"
					:loadmore-text="loadConfig.loadmoreText" :nomore-text="loadConfig.nomoreText" />
			</view>
			<!-- 月账单 -->
			<view class="bill_list" v-show="current==1">
				<view class="card" v-for="(item, index) in billListMonth" :key="index">
					<view class="top">
						<view class="blue">账单详情</view>
						<view>账单日期：{{item.month}}</view>
					</view>
					<view class="bottom">
						<view class="left">
							<view>收益金额(元)</view>
							<view class="num">{{item.income}}</view>
						</view>
						<view class="right">
							<view>支出金额:{{item.expenditure>0?item.expenditure:'0.00'}}</view>
							<view>入账金额:{{item.income>0?item.income:'0.00'}}</view>
						</view>
					</view>
				</view>
				<u-loadmore status="nomore" nomore-text="仅展示一年数据" />
			</view>

			<!-- <button class="btn" @click="navTo('/subpkg/withdrawDeposit/withdrawDeposit')">提现余额</button> -->
		</view>
	</view>
</template>

<script>
	import {
		accountLogLists,
		accountLogListsMonth
	} from "@/api/pay.js"
	import {
		userInfo
	} from "@/api/oaUser.js"

	import {
		Toast
	} from '@/libs/uniApi.js'
	export default {
		data() {
			return {
				user_id: 0,
				userInfo: {},
				otherUserInfo: {},
				billTypeList: ['日账单', '月账单'],
				current: 0,
				billList: [],
				billListMonth: [],
				loadConfig: {
					page: 1,
					limit: 25,
					loadingText: '努力加载中',
					loadmoreText: '轻轻上拉',
					nomoreText: '没有更多账单了~~',
					status: 'loadmore'
				},
			}
		},
		onLoad(e) {
			if (e.id > 0) {
				this.user_id = e.id

			}
			this.loadBill()
		},
		onShow() {
			// console.log(this.userInfo);
			if (this.user_id == 0) {
				// this.userInfo = this.$store.state.app.userInfo;
				userInfo().then((res) => {
					this.$store.commit('setUserInfo', res.data);
					this.userInfo = res.data;
				})
			} else {
				this.OtherUserInfo()
			}
		},
		computed: {
			eyeType() {
				return this.$store.state.config.eyeType;
			}
		},
		onBackPress() {
			this.loadBill()
		},
		methods: {
			navTo(url) {
				url ?
					uni.navigateTo({
						url: url
					}) : Toast('暂未开放')
			},
			async OtherUserInfo() {
				let res = await userInfo({
					id: this.user_id
				});
				this.userInfo = res.data
			},
			updateEye() {
				this.$store.commit('SET_EYE_TYPE')
			},
			// 选择日账单月账单
			changeBillType(type) {
				this.current = type;
				if (type == 1) this.loadBillMonth();
			},
			async loadBill() {
				if (this.loadConfig.status == "nomore") return;
				this.loadConfig.status = "loading"
				let res = await accountLogLists({
					type: 'um', //账户余额
					page_no: this.loadConfig.page,
					page_size: this.loadConfig.limit,
					user_id: this.user_id
				});
				this.loadConfig.status = "loadmore"
				if (res.data.lists.length < this.loadConfig.limit) {
					this.loadConfig.status = "nomore"
				} else {
					this.loadConfig.page++;
				}
				this.billList = [...this.billList, ...res.data.lists];
			},
			async loadBillMonth() {
				let res = await accountLogListsMonth();
				let list = [];
				for (let key in res.data) {
					list.push(res.data[key])
				}
				this.billListMonth = list;
			}
		},
		onPullDownRefresh() {
			uni.stopPullDownRefresh()
		}
	}
</script>

<style lang="scss">
	page {
		// background-color: #fff;
	}

	.finance_head {
		background-color: $theme-oa-color;
		height: 400rpx;
		position: relative;
		// box-shadow: 0 -10px 20px rgba(#fff, 0.9) inset;
		background-image: linear-gradient(to top, rgba(#fff, 1), transparent);
		// box-shadow: -10px -10px 40px rgba(#fff, 0.9);
		background-size: 100% 35%;
		background-repeat: no-repeat;
		background-position: center bottom;

		.top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex: 1;
			color: #fff;
			padding: 10rpx 28rpx;

			.accont {
				// background-color: red;
				display: flex;
				justify-content: space-between;
				width: auto;
				line-height: 44px;

				.name {
					margin-left: 20rpx;
				}
			}

			.left {
				display: flex;
				align-items: center;
				flex: 1;
				font-size: 28rpx;
				font-weight: 500;
				color: #FFFFFF;


				.name {
					margin: 0 17.5rpx;
				}

				image {
					width: 40rpx;
					height: 40rpx;
				}
			}

			.right {
				font-size: 24.53rpx;
				font-weight: 400;
				color: #FFFFFF;
			}
		}

		.center {
			color: #fff;
			display: flex;
			flex-direction: column;
			align-items: center;

			.title {
				font-size: 25rpx;
				font-weight: 400;
				line-height: 39rpx;
			}

			.price {
				font-size: 60rpx;
				font-weight: bold;
				line-height: 39rpx;
				margin-top: 28rpx;
				margin-bottom: 14rpx;
			}

			.bubble {
				padding: 20rpx 28rpx 10rpx 28rpx;
				background-image: url('../../static/img/contract/bubble.png');
				background-repeat: no-repeat;
				background-size: 100% 100%;

				.text {}
			}
		}

		.bottom {
			position: absolute;
			bottom: -78rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 694rpx;
			height: 140rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 18rpx 2rpx rgba(50, 116, 249, 0.1);
			border-radius: 14rpx 14rpx 14rpx 14rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;

			.item {
				text-align: center;
				font-size: 25rpx;
				font-weight: 400;
				color: #666666;
				line-height: 39rpx;

				.num {
					font-size: 39rpx;
					font-weight: 500;
					color: #F02828;
					line-height: 39rpx;
				}
			}
		}
	}

	.bill {
		// padding: 28rpx;
		// padding-top: 90rpx;
		padding-bottom: 32rpx;
		background-color: #f5f5f5;

		.type_box {
			background-color: #fff;
			padding: 32rpx 0;

			.type {
				height: 53rpx;
				width: 333rpx;
				display: flex;
				align-items: center;
				overflow: hidden;
				margin: 0 auto;

				view {
					flex: 1;
					color: $theme-oa-color;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					border: 1px solid #3274F9;

					&:nth-child(1) {
						border-radius: 30rpx 0 0 30rpx;
					}

					&:nth-child(2) {
						border-radius: 0 30rpx 30rpx 0;
					}
				}

				.active {
					background-color: $theme-oa-color;
					color: #fff;
				}
			}
		}

		.bill_list {
			// background-color: #f5f5f5;
			padding-bottom: 100rpx;
			padding-top: 28rpx;

			.card {
				padding: 28rpx;
				background-color: #fff;
				margin-bottom: 21rpx;

				.top {
					display: flex;
					align-items: center;
					font-size: 25rpx;
					font-weight: 400;
					color: #333333FF;
					line-height: 39rpx;

					.blue {
						width: 137rpx;
						height: 49rpx;
						background: #3274F9;
						border-radius: 26rpx 26rpx 26rpx 26rpx;
						font-size: 25rpx;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 39rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						margin-right: 28rpx;
					}
				}

				.bottom {
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 160rpx;

					.left {
						flex: 1;
						text-align: center;
						font-size: 25rpx;
						font-weight: 400;
						color: #666666;
						line-height: 39rpx;

						.num {
							font-size: 39rpx;
							font-weight: 500;
							color: #F02828;
							line-height: 39rpx;
						}
					}

					.right {
						flex: 1;
						font-size: 25rpx;
						font-weight: 400;
						color: #666666;
						line-height: 39rpx;
					}
				}
			}

			.item {
				margin: 0 auto;
				margin-bottom: 28rpx;
				width: 694rpx;
				// height: 238rpx;
				background: #FFFFFF;
				border-radius: 14rpx 14rpx 14rpx 14rpx;
				opacity: 1;
				padding: 28rpx;

				.top {
					margin-bottom: 28rpx;
					font-size: 25rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;

					&:before {
						display: inline-block;
						content: '账单详情';
						width: 137rpx;
						height: 49rpx;
						line-height: 49rpx;
						text-align: center;
						background: #3274F9;
						border-radius: 26rpx 26rpx 26rpx 26rpx;
						color: #fff;
						margin-right: 28rpx;
					}
				}

				.bottom {
					display: flex;
					justify-content: space-between;

					.text {
						font-size: 25rpx;
						font-weight: 400;
						color: #999999;
						line-height: 39rpx;

						.t_item {
							display: flex;

							.t_title {
								margin-bottom: 16rpx;
								flex-shrink: 0 !important;
							}

							.tips {
								font-size: 28rpx;
								font-weight: 400;
								color: #333333;
							}
						}
					}

					.price {
						display: flex;
						align-items: center;
						font-size: 32rpx;
						font-weight: 500;
						color: #F02828;
					}
				}
			}
		}

		.btn {
			color: #fff;
			border-radius: 100px;
			text-align: center;
			line-height: 84.21rpx;
			margin: 0 auto;
			margin-top: 84.21rpx;
			width: 693.93rpx;
			height: 84.21rpx;
			background: $theme-oa-color;
			box-shadow: 0px 9px 26px 1px #E9EFF5;
			position: fixed;
			bottom: 0;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	}
</style>