shop-applet/pages/users/user_invoice_Finance/index.vue

<template>
	<view class="box">
		<view class="bg">
			<view class="head">
				<view class="head_top">
					账户余额(元)
					<image src="@/static/images/yanjing.png" class="yanjing" mode=""></image>
				</view>
				<view class="pirc">666666666666</view>
				<view class="tubiao">
					<!-- <image src="@/static/images/tishi.png" mode="widthFix"></image> -->
					<view class="zhi">
						可提现金额 <span>115.00</span> 元
					</view>
				</view>
			</view>
		</view>
		<view class="conet">
			<ul>
				<li>
					<span>商户收入(元)</span>
					<view class="pic">100.00</view>
				</li>
				<li class="kuang"><span>暂存金额(元)</span>
					<view class="pic">100.00</view>
				</li>
				<li><span>优惠券补贴(元)</span>
					<view class="pic">100.00</view>
				</li>
				<li><span>退款支出(元)</span>
					<view class="pic">100.00</view>
				</li>
				<li class="kuang"><span>佣金支出(元)</span>
					<view class="pic">100.00</view>
				</li>
				<li><span>平台手续费(元)</span>
					<view class="pic">100.00</view>
				</li>
			</ul>
		</view>
		<view class="footer">
			<view class="footer_top">
				<view class="top_left">
					账单数据
				</view>
				<view class="top_reight" @click="riqipop">
					日期选择
					<u-icon name="arrow-down-fill" color="#999999" size="12" style="margin-left: 3px;"></u-icon>
				</view>
			</view>
			<view class="footer_b">
				<view class="bon_top">
					<!-- #ifdef MP-WEIXIN -->
					<view :class="left" @click="riqi(1)">
						日账单
					</view>
					<view :class="reight" @click="riqi(2)">
						月账单
					</view>
					<!-- #endif -->
					<!-- #ifdef H5 -->
					<view :class="this.left" @click.stop="riqi(1)">
						日账单
					</view>
					<view :class="this.reight" @click.stop="riqi(2)">
						月账单
					</view>
					<!-- #endif -->
					<!-- #ifdef APP-PLUS -->
					<view :class="this.left" @click.stop="riqi(1)">
						日账单
					</view>
					<view :class="this.reight" @click.stop="riqi(2)">
						月账单
					</view>
					<!-- #endif -->
				</view>
				<view v-if="Riqi == 1" class="bon_bon">
					<scroll-view scroll-y="true" class="scroll-Y">
						<view class="bon_shuju">
							<view class="top">
								<view class="xiangqin" @click="todetails">
									账单详情
								</view>
								<view class="riqi">
									账单日期:
									<span>2020.20.22</span>
								</view>
							</view>
							<view class="bottom">
								<view class="left">
									收入金额(元)
									<view>100.00</view>
								</view>
								<view class="reight">
									<p>
										支出金额: <span>0.00</span> 元
									</p>
									<p>
										入账金额: <span>100.00</span> 元
									</p>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view v-else class="bon_bon">
					<scroll-view scroll-y="true" class="scroll-Y">
						<view class="bon_shuju">
							<view class="top">
								<view class="xiangqin" @click="todetails">
									账单详情
								</view>
								<view class="riqi">
									账单月份:
									<span>2020.20</span>
								</view>
							</view>
							<view class="bottom">
								<view class="left">
									收入金额(元)
									<view>100.00</view>
								</view>
								<view class="reight">
									<p>
										支出金额: <span>0.00</span> 元
									</p>
									<p>
										入账金额: <span>100.00</span> 元
									</p>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		<uni-calendar ref="calendar" :insert="false" @confirm="confirm" />
	</view>
</template>

<script>
	// import {
	// 	finaHeaderDataApi
	// } from "@/api/admin";
	export default {
		data() {
			return {
				mer_id: '',
				//日期
				Riqi: 1,
				left: 'haver',
				reight: 'reight',
			}
		},
		onLoad(options) {
			this.mer_id = options.mer_id
			// this.getHeaderData()
		},
		methods: {
			//跳转详情
			todetails() {
				uni.navigateTo({
					url: `/pages/users/user_invoice_order_list/index?mer_id=${this.mer_id}`
				})
			},
			//日期菜单
			riqi(e) {
				this.Riqi = e
				if (e == 1) {
					this.left = 'haver'
					this.reight = 'reight'
				} else {
					this.left = 'left'
					this.reight = 'havers'
				}
			},
			riqipop() {
				this.$refs.calendar.open();
			},
			//日期
			confirm(e) {
				console.log(e);
			},
			//账单数据
			// getHeaderData() {
			// 	finaHeaderDataApi({
			// 		date: this.tableForm.date
			// 	}).then(res =>{
			// 		console.log(res);
			// 	}).catch(err => {
			// 	})
			// },
		},
	}
</script>

<style lang="scss" scoped>
	* {
		padding: 0;
		margin: 0;
	}

	.box {
		height: 60vh;
		background-color: #fff;
	}

	/* #ifdef MP-WEIXIN */
	.box {
		height: 60vh;
		background-color: #fff;
	}

	/* #endif */
	.bg {
		width: 100%;
		height: 504rpx;
		background: url(@/static/images/dingdan.png);

		.head {
			color: white;
			padding-top: 30px;

			.head_top {
				width: 100%;
				height: 40px;
				display: flex;
				justify-content: center;
				align-items: center;

				.yanjing {
					margin-left: 10px;
					width: 35rpx;
					height: 35rpx;

				}
			}

			.pirc {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 60rpx;
				margin-top: 30rpx;
			}

			.tubiao {
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
				margin: auto;
				margin-top: 16px;
				width: 290rpx;
				height: 75rpx;
				background: url(@/static/images/tishi.png);

				.zhi {
					position: absolute;
					font-size: 25rpx;

					span {
						margin-left: 5px;
						margin-right: 5px;
					}
				}


			}

			/* #ifdef MP-WEIXIN */
			.tubiao {
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
				margin: auto;
				margin-top: 16px;
				width: 320rpx;
				height: 80rpx;
				background: url(@/static/images/tishi.png);

				.zhi {
					position: absolute;
					font-size: 25rpx;

					span {
						margin-left: 5px;
						margin-right: 5px;
					}
				}


			}

			/* #endif */
			/* #ifdef APP-PLUS */
			.tubiao {
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
				margin: auto;
				margin-top: 15px;
				width: 307rpx;
				height: 78rpx;
				background: url(@/static/images/tishi.png);

				.zhi {
					position: absolute;
					font-size: 25rpx;

					span {
						margin-left: 5px;
						margin-right: 5px;
					}
				}


			}

			/* #endif */
		}

	}

	.conet {
		width: 694rpx;
		height: 252rpx;
		background-color: white;
		position: absolute;
		top: 190px;
		left: 15px;
		border-radius: 15px;
		box-shadow: 0rpx 0rpx 18rpx 2rpx rgba(203, 30, 20, 0.1);

		ul {
			display: flex;
			flex-wrap: wrap;
			list-style: none;

			li {
				text-align: center;
				margin-left: 6px;
				margin-top: 19px;
				width: 120px;

				span {
					font-size: 25rpx;

				}

				.pic {
					font-size: 32rpx;
					color: #F84221;
					margin-top: 3px;
				}
			}

			.kuang {
				border-left: 1px solid #999999;
				border-right: 1px solid #999999;
			}
		}

		/* #ifdef MP-WEIXIN */
		ul {
			display: flex;
			flex-wrap: wrap;
			list-style: none;

			li {
				text-align: center;
				margin-left: 6px;
				margin-top: 15px;
				width: 105px;

				span {
					font-size: 25rpx;

				}

				.pic {
					font-size: 32rpx;
					color: #F84221;
					margin-top: 3px;
				}
			}

			.kuang {
				border-left: 1px solid #999999;
				border-right: 1px solid #999999;
			}
		}

		/* #endif */
		/* #ifdef APP-PLUS */
		ul {
			display: flex;
			flex-wrap: wrap;
			list-style: none;

			li {
				text-align: center;
				margin-left: 6px;
				margin-top: 15px;
				width: 115px;

				span {
					font-size: 25rpx;

				}

				.pic {
					font-size: 32rpx;
					color: #F84221;
					margin-top: 3px;
				}
			}

			.kuang {
				border-left: 1px solid #999999;
				border-right: 1px solid #999999;
			}
		}

		/* #endif */
	}

	.footer {
		width: 100%;
		position: absolute;
		top: 370px;

		.footer_top {
			width: 694rpx;
			display: flex;
			justify-content: space-between;
			box-sizing: border-box;


			.top_left {
				font-size: 32rpx;
				font-weight: bold;
				margin-left: 20px;
				padding-left: 5px;
				border-left: 3px solid #F84221;
			}

			.top_reight {
				width: 100px;
				color: #999999;
				background-color: #F5F5F5;
				border-radius: 10px;
				display: flex;
				align-items: center;
				justify-content: center;

			}
		}

		.footer_b {
			width: 100%;
			margin-top: 20px;

			.bon_top {
				color: #F84221;
				display: flex;
				justify-content: center;
				align-items: center;

				.left {
					width: 85px;
					height: 30px;
					text-align: center;
					line-height: 30px;
					font-size: 28rpx;
					border: 1px solid #F45346;
					border-radius: 15px 0 0 15px;
				}

				.reight {
					width: 85px;
					height: 30px;
					text-align: center;
					line-height: 30px;
					font-size: 28rpx;
					border: 1px solid #F45346;
					border-radius: 0 15px 15px 0;
				}

				.haver {
					width: 85px;
					height: 30px;
					text-align: center;
					line-height: 30px;
					font-size: 28rpx;
					border: 1px solid #F45346;
					border-radius: 15px 0 0 15px;
					color: #fff;
					background-image: linear-gradient(90deg, #F98649 0%, #F34E45 100%);
				}

				.havers {
					width: 85px;
					height: 30px;
					text-align: center;
					line-height: 30px;
					font-size: 28rpx;
					border: 1px solid #F45346;
					border-radius: 0 15px 15px 0;
					color: #fff;
					background-image: linear-gradient(90deg, #F34E45 0%, #F98649 100%);
				}
			}

		}

		.bon_bon {
			width: 100%;
			height: 20px;
			background-color: #fff;
			margin-top: 15px;

			.scroll-Y {
				max-height: 50vh;

				.bon_shuju {
					padding-top: 10px;
					padding-bottom: 10px;
					background-color: #fff;
					margin-bottom: 20px;

					.top {
						margin-left: 20px;
						display: flex;
						justify-content: flex-start;

						.xiangqin {
							color: #fff;
							width: 137rpx;
							height: 49rpx;
							text-align: center;
							line-height: 49rpx;
							margin-right: 15px;
							background: linear-gradient(95deg, #F98649 0%, #F34E45 100%);
							border-radius: 26rpx 26rpx 26rpx 26rpx;
						}

						.riqi {
							height: 49rpx;
							text-align: center;
							line-height: 49rpx;
							font-size: 25rpx;

							span {
								margin-left: 10px;
							}
						}
					}

					.bottom {
						display: flex;
						justify-content: space-evenly;
						margin-top: 20px;

						.left {
							font-size: 25rpx;
							color: #666666;

							view {
								font-size: 42rpx;
								color: #F84221;
								font-weight: 500;
							}
						}

						.reight {
							p {
								margin-bottom: 7px;

								span {
									margin-left: 6px;
								}
							}

						}
					}
				}
			}



		}
	}

	/* #ifdef MP-WEIXIN */
	.footer {
		width: 100%;
		position: absolute;
		top: 340px;

		.footer_top {
			width: 694rpx;
			display: flex;
			justify-content: space-between;
			box-sizing: border-box;


			.top_left {
				font-size: 32rpx;
				font-weight: bold;
				margin-left: 20px;
				border-left: 3px solid #F84221;
			}

			.top_reight {
				width: 100px;
				color: #999999;
				background-color: #F5F5F5;
				border-radius: 10px;
				display: flex;
				align-items: center;
				justify-content: center;

			}
		}

		.footer_b {
			width: 100%;
			margin-top: 20px;

			.bon_top {
				color: #F84221;
				display: flex;
				justify-content: center;
				align-items: center;

				.left {
					width: 85px;
					height: 30px;
					text-align: center;
					line-height: 30px;
					font-size: 28rpx;
					border: 1px solid #F45346;
					border-radius: 15px 0 0 15px;
				}

				.reight {
					width: 85px;
					height: 30px;
					text-align: center;
					line-height: 30px;
					font-size: 28rpx;
					border: 1px solid #F45346;
					border-radius: 0 15px 15px 0;
				}

				.haver {
					color: #fff;
					background-image: linear-gradient(90deg, #F98649 0%, #F34E45 100%);
				}

				.havers {
					color: #fff;
					background-image: linear-gradient(90deg, #F34E45 0%, #F98649 100%);
				}
			}
		}

		.bon_bon {
			width: 100%;
			height: 20px;
			background-color: #fff;
			margin-top: 15px;

			.scroll-Y {
				max-height: 50vh;

				.bon_shuju {
					padding-top: 10px;
					padding-bottom: 10px;
					background-color: #fff;
					margin-bottom: 20px;

					.top {
						margin-left: 20px;
						display: flex;
						justify-content: flex-start;

						.xiangqin {
							color: #fff;
							width: 137rpx;
							height: 49rpx;
							text-align: center;
							line-height: 49rpx;
							margin-right: 15px;
							background: linear-gradient(95deg, #F98649 0%, #F34E45 100%);
							border-radius: 26rpx 26rpx 26rpx 26rpx;
						}

						.riqi {
							height: 49rpx;
							text-align: center;
							line-height: 49rpx;
							font-size: 25rpx;
						}
					}

					.bottom {
						display: flex;
						justify-content: space-evenly;
						margin-top: 20px;

						.left {
							font-size: 25rpx;
							color: #666666;

							view {
								font-size: 42rpx;
								color: #F84221;
								font-weight: 500;
							}
						}

						.reight {
							p {
								margin-bottom: 7px;

								span {
									margin-left: 6px;
								}
							}

						}
					}
				}
			}



		}
	}

	/* #endif */
</style>