front-end/jdApp/src/pagesStatistics/business.vue

<template>
<view>
	<scroll-view scroll-y class="business-page">
		<template v-if="!$util.isEmpty(baseInfo)">
			<view class="business-info">
				<view class="amount-view">
					<text class="amount-label">账户余额</text>
				</view>
				<view class="price-view">
					<text class="unit">￥</text>
					<text class="price">{{ baseInfo.balance || "--" }}</text>
				</view>

				<view class="down-view">
					<view class="down-item">
						<text class="label">应收客户款</text>
						<text class="value"
							><text class="unit">￥</text>{{ baseInfo.mayGathering || "--" }}</text
						>
					</view>
					<view class="down-item">
						<text class="label">应付供货商款</text>
						<text class="value"
							><text class="unit">￥</text>{{ baseInfo.mayPay || "--" }}</text
						>
					</view>
				</view>
			</view>
			<view class="space-view space-layout">
				<view class="space-left">
					<view class="title-bar">
						<image
							class="title-icon"
							:src="`${constant.imgUrl}/common/inventory.png`"
						>
						</image>
						<text class="title">
							库存成本 ¥ {{baseInfo.stockCost}}
						</text>
					</view>
				</view>
				<view class="space-right"> </view>
			</view>
			<view class="space-view space-remark">
				<view class="space-left">
					<view class="show-item">
						<view class="show-name">库存总数（大约）</view>
						<view class="show-value">{{baseInfo.stockBigNum}}扎 {{baseInfo.stockSmallNum}}支</view>
					</view>
				</view>
				<view class="space-right">
					<view class="show-item">
						<view class="show-name">库存预警数</view>
						<view class="show-value red">{{baseInfo.stockWarning}}</view>
					</view>
				</view>
			</view>
			<view class="space-view space-layout">
				<view class="space-left">
					<view class="title-bar">
						<image
							class="title-icon"
							:src="`${constant.imgUrl}/common/icon_market.png`"
						>
						</image>
						<text class="title">
							今日收入 ¥ {{baseInfo.today}}
						</text>
					</view>
				</view>
			</view>
			<view class="space-view space-remark">
				<view class="space-left">
					<view class="show-item">
						<view class="show-name">近7天收入</view>
						<view class="show-value"><text class="unit">￥</text>{{baseInfo.latestSeven}}</view>
					</view>
				</view>
				<view class="space-right">
					<view class="show-item">
						<view class="show-name">
							近30天收入
						</view>
						<view class="show-value red"><text class="unit">￥</text>{{baseInfo.latestThirty}}</view>
					</view>
				</view>
			</view>

			<view class="space-view space-layout business-list">
				<view class="list-tab">
					<view
						@click="changeDate(index)"
						:class="['tab-item', { active: curTabIndex == index }]"
						v-for="(item, index) in tabList"
						:key="index"
					>
						{{ item.label }}
					</view>
				</view>
				<view class="list-main">
					<view v-for="(item, index) in bussinessList" :key="index">
						<template v-if="index == curTabIndex">
							<view class="list-item" >
								<view class="item-left">

									<view class="content-row">
										<text class="content-label"> 收入金额</text>
										<text class="content-value"> <text class="unit">¥</text> {{item.saleAmount}}</text>
									</view>
								</view>
								<view class="item-right">
									<!-- <text class="iconfont iconxiangyou"> </text> -->
								</view>
							</view>
							<view class="list-item" >
								<view class="item-left">
									<view class="content-row">
										<text class="content-label"> 采购数量</text>
										<text class="content-value"> <text class="unit"></text> {{item.purchaseNum}}</text>
									</view>
									<view class="content-row">
										<text class="content-label"> 采购金额</text>
										<text class="content-value"> <text class="unit">¥</text> {{item.purchaseAmount}}</text>
									</view>
								</view>
								<view class="item-right">
									<!-- <text class="iconfont iconxiangyou"> </text> -->
								</view>
							</view>
						</template>
					</view>

				</view>
			</view>
		</template>
	</scroll-view>
  </view>
</template>
<script>
import {getMainProfile} from '@/api/stat'
import {mapGetters} from "vuex";
export default {
	name:'Business',
	components:{
		
	},
	mixins:[],
	computed:{
		...mapGetters(["getMyShopInfo"]),
	},
	data() {
		return {
			curTabIndex: 0,
			tabList: [
				{
					label: "今日",
					value: "01"
				},
				{
					label: "昨日",
					value: "02"
				},
				{
					label: "近7天",
					value: "03"
				},
				{
					label: "近30天",
					value: "04"
				}
			],
			bussinessList: [{}, {}],
			baseInfo:{},
		};
	},
  onPullDownRefresh() {
    this.init().then(res => {
      uni.stopPullDownRefresh();
    })
  },
	methods:{
		async init(id){
				this.shopId = id?id:this.getMyShopInfo.id
				uni.showLoading({
					title: '加载中'
				});
				try {
					let {data:{base,more}} = await getMainProfile({
						shopId: this.shopId
					})
					this.baseInfo = base
					this.bussinessList = [more.today,more.yesterday,more.latestSeven,more.latestThirty]
				} finally {
					uni.hideLoading();
				}
		},
		changeDate(idx){
			this.curTabIndex = idx;
		},
		selectSussess(val){
			this.shopId = val.selectItem.id;
			this.init(val.selectItem.id);
		}
	},
};
</script>

<style lang="scss" scoped>
.business-page {
	width: 100%;
	height: 100%;
	background-color: #f9fbfc;
	.space-layout {
		margin-top: 20upx;
	}
	.space-remark {
		margin-top: 1upx;
	}
	.space-view {
		display: flex;
		padding: 30upx;
		background-color: #fff;
		.space-left {
			flex: 1.5;
			.title-bar {
				display: flex;
				align-items: center;
				.title-icon {
					margin-right: 20upx;
					width: 36upx;
					height: 36upx;
          // background-color: pink;
				}
				.title {
					font-size: 28upx;
					font-weight: 600;
					color: #333333;
				}
			}
		}
		.space-right {
			flex: 1;
		}

		.show-item {
			.show-name {
				display: flex;
				align-items: center;
				font-size: 24upx;
				font-weight: 400;
				.iconfont {
					margin-left: 10upx;
					color: $mainColor;
					font-size: 30upx;
				}
			}
			.show-value {
				margin-top: 20upx;
				color: #999999;

				font-size: 36upx;
				font-weight: bold;
				.unit {
					margin-right: 5upx;
					font-size: 24upx;
				}
				&.red {
					color: $redColor;
				}
			}
		}
		.show-tag {
			margin-top: 10upx;
			display: flex;
			align-items: center;
			&.up {
				color: $redColor;
				.tag {
					background-color: $redColor;
				}
			}
			&.down {
				color: $mainColor1;
				.tag {
					background-color: $mainColor1;
				}

				.arrow {
					transform: rotate(180deg);
				}
			}
			.tag {
				margin-right: 10upx;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 80upx;
				height: 30upx;
				color: #fff;
				border-radius: 4upx;
				font-size: 22upx;
			}
			.arrow {
				margin-left: 10upx;
				width: 13upx;
				height: 19upx;
			}
		}
	}

	.business-list {
		display: flex;
		flex-direction: column;
		padding: 30upx;
		width: 100%;
		.list-tab {
			width: 100%;
			display: flex;
			align-items: center;
			border-radius: 8upx;
			overflow: hidden;
			border: 1upx solid $mainColor;

			.tab-item {
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;

				height: 60upx;

				background: #ffffff;

				color: $mainColor;
				&:not(:last-child) {
					border-right: 1upx solid $mainColor;
				}
				&.active {
					color: #fff;
					background-color: $mainColor;
				}
			}
		}
		.list-main {
			margin-top: 20upx;
			width: 100%;
			.list-item {
				&:not(:last-child) {
					border-bottom: 1upx solid #eee;
				}
				padding: 30upx 0;
				width: 100%;
				display: flex;
				align-items: center;
				.item-left {
					flex: 1;
					.content-row {
						.content-label {
							font-size: 28upx;
							font-weight: 400;
							color: #666;
						}
						.content-value {
							margin-left: 20upx;
							font-size: 28upx;
							font-weight: 400;
							color: #333333;
							.unit {
								font-size: 24upx;
							}
						}
					}
				}

				.item-right {
					flex-shrink: 0;
					.iconfont {
						font-size: 28upx;
						color: #bbbbbb;
					}
				}
			}
		}
	}
	.business-info {
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 100%;
		height: 300upx;
		padding: 30upx;
		// background: linear-gradient(30deg, #3ab7ff, #38a6ff, #3386ff);
		background: url(../static/images/admin/bg2.png) no-repeat;
		background-size: 100% 100%;
		color: #fff;

		.amount-view {
			display: flex;
			justify-content: space-between;
			align-items: center;
			.amount-btn {
				border: 1upx solid #ffffff;
				border-radius: 22upx;
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;
			 	 padding: 0upx 17upx;
				//width: 165upx;
				height: 44upx;
				& ::v-deep .select-title {
					color: #FFFFFF;
				}
			// 	font-size: 24upx;
			// 	font-family: PingFang SC;
			// 	font-weight: 400;
			// 	color: #ffffff;
			// 	// margin: 0 10upx;
			// 	position: relative;
			// 	.iconfont {
			// 		margin-left: 20upx;
			// 		font-size: 25upx;
			// 		padding-right: 10upx;
			// 	}
			}
		}
		.price-view {
			margin-top: 10upx;
			.unit {
				font-size: 24upx;
				font-family: DIN Alternate;
				font-weight: bold;
			}
			.price {
				font-size: 60upx;
				font-family: DIN Alternate;
				font-weight: bold;
			}
		}
		.down-view {
			display: flex;
			margin-top: 30upx;

			.down-item {
				position: relative;
				flex: 1;
				display: flex;
				flex-direction: column;
				&:nth-child(2) {
					padding-left: 60upx;
					&:after {
						position: absolute;
						left: 0;
						top: 50%;
						transform: translateY(-50%);
						content: "";
						width: 1upx;
						height: 70upx;
						background-color: #dddddd;
					}
				}
				.label {
					font-size: 24upx;
					font-weight: 400;
				}
				.value {
					margin-top: 20upx;
					font-size: 32upx;
					font-family: DIN Alternate;
					font-weight: bold;
					.unit {
						font-size: 24upx;
					}
				}
			}
		}
	}
}
</style>