web-app-v1/pages/stock/stock.vue

<template>
	<view class="StockContainer">
		<view class="dataTop" @click="toUrlLink('stock/total')">
			<view class="allList">
				<view class="all">
					<view class="num">
						{{ Number(info.hard) + Number(info.simple) + Number(info.old) + Number(info.new_old) + Number(info.youth) }}
					</view>
					<view class="name">总库存（套）</view>
				</view>
				<view class="all">
					<view class="num">
						{{ Number(info.hard) * 149 + Number(info.simple) * 79 + Number(info.old) * 89 + Number(info.new_old) * 47 +  Number(info.youth) * 89 }}
					</view>
					<view class="name">总金额（元）</view>
				</view>
			</view>
			<view class="typeList">
				<view class="typeItem">
					<view class="num">{{ info.hard || 0 }}</view>
					<view class="name">精装版</view>
				</view>
				<view class="typeItem">
					<view class="num">{{ info.simple || 0 }}</view>
					<view class="name">简约版</view>
				</view>
				<view class="typeItem">
					<view class="num">{{ info.old || 0 }}</view>
					<view class="name">高腰版</view>
				</view>
				<view class="typeItem">
					<view class="num">{{ info.new_old || 0 }}</view>
					<view class="name">纯棉版</view>
				</view>
				<view class="typeItem">
					<view class="num">{{ info.youth || 0 }}</view>
					<view class="name">青春版</view>
				</view>
			</view>
		</view>
		<view class="control ruku" @click="toUrlLink('stock/ruku_type')">
			<view class="left">
				<view class="name">入库</view>
				<view class="more">
					<view>查看详情</view>
				</view>
			</view>
		</view>
		<view class="control chuku" @click="toUrlLink('stock/chuku')">
			<view class="left">
				<view class="name">出库</view>
				<view class="more">
					<view>查看详情</view>
				</view>
			</view>
		</view>
		<view class="control panku" @click="toUrlLink(info.status ? 'stock/first_panku' : 'stock/panku')">
			<view class="left">
				<view class="name">盘库</view>
				<view class="more">
					<view>查看详情</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		myStock
	} from "@/apis/stock.js"
	export default {
		data() {
			return {
				info: {
					hard: 0,
					simple: 0,
					new_old: 0,
					old: 0,
					status: true
				}
			}
		},
		onShow() {
			this.getMyStock()
		},
		methods: {
			// 我的库存
			getMyStock() {
				uni.showLoading()
				myStock().then(res => {
					uni.hideLoading()
					if (res.code === 200) {
						this.info = res.data
					} else {
						uni.showModal({
							content: res.message || '获取我的库存失败',
							showCancel: false
						})
					}
				}).catch(() => {
					uni.hideLoading()
					uni.showModal({
						content: '获取我的库存失败',
						showCancel: false
					})
				})
			},
			toUrlLink(url) {
				if (!url) return false
				uni.navigateTo({
					url: `../${url}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		display: flex;
		flex-direction: column;
	}

	.StockContainer {
		flex: 1;
		width: 100%;
		padding: 30rpx;
		background-color: #F9F9FB;

		.dataTop {
			width: 100%;
			height: 342rpx;
			background-image: url(../../static/new_stock/top.png);
			background-position: center;
			background-size: cover;
			padding: 24rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-direction: column;
			margin-bottom: 30rpx;
			border-radius: 24rpx;

			.num {
				font-size: 40rpx;
				color: #FFFFFF;
				line-height: 56rpx;
				margin-bottom: 6rpx;
				text-align: center;
			}

			.name {
				color: #FFFFFF;
				font-size: 28rpx;
				line-height: 40rpx;
				text-align: center;
			}

			.allList {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.all {
					flex: 1;
					overflow: hidden;
					display: flex;
					flex-direction: column;
					align-items: center;
				}
			}

			.all .num {
				font-size: 60rpx !important;
				line-height: 84rpx !important;
			}

			.typeList {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 28rpx;

				.typeItem {
					width: 25%;
				}
			}
		}

		.control {
			width: 100%;
			height: 300rpx;
			border-radius: 24rpx;
			background-size: 100% auto !important;
			background-position: bottom !important;
			background-repeat: no-repeat !important;
			padding: 68rpx 62rpx;
			box-sizing: border-box;
			margin-bottom: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			&::after {
				content: "";
				display: block;
				width: 142rpx;
				height: 142rpx;
				background-position: center;
				background-size: 100% auto;
				background-repeat: no-repeat;
			}

			&.ruku {
				background: url(../../static/new_stock/control.png), linear-gradient(to bottom, #FB6FAC 0%, #FFAACF 100%);

				&::after {
					background-image: url(../../static/new_stock/ruku.png);
				}

				.more {
					color: #FF58A0;

					&::after {
						border-left-color: #FF58A0;
					}
				}
			}

			&.chuku {
				background: url(../../static/new_stock/control.png), linear-gradient(to bottom, #FFD063 0%, #FBB92F 100%);

				&::after {
					background-image: url(../../static/new_stock/chuku.png);
				}

				.more {
					color: #ECA103;

					&::after {
						border-left-color: #ECA103;
					}
				}
			}

			&.panku {
				background: url(../../static/new_stock/control.png), linear-gradient(to bottom, #FA924F 0%, #FF7B39 100%);

				&::after {
					background-image: url(../../static/new_stock/panku.png);
				}

				.more {
					color: #FF6619;

					&::after {
						border-left-color: #FF6619;
					}
				}
			}

			.name {
				color: #FFFFFF;
				font-size: 56rpx;
				line-height: 80rpx;
				margin-bottom: 20rpx;
			}

			.more {
				width: 200rpx;
				height: 60rpx;
				border-radius: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #ffffff;
				font-size: 28rpx;
				line-height: 40rpx;

				&::after {
					content: "";
					display: block;
					width: 0;
					height: 0;
					border: 10rpx solid transparent;
					border-left-width: 16rpx;
					margin-left: 10rpx;
				}
			}
		}
	}
</style>