wxapp_shuibei/pages/users/user_asset/asset_info/asset_info.vue

<template>
	<view class="asset_container">
		<view class="asset_refresh_box">
			<view class="refresh_time">
				更新于：{{refreshTime}}
			</view>
			<view class="refresh_btn" @click="refreshClickHandle">
				<image src="/static/images/refresh_icon.png" mode="heightFix" class="refresh_icon"></image>
				<text>刷新</text>
			</view>
		</view>

		<scroll-view class="asset_list" scroll-y="true">
			<view class="list_container">
				<view class="asset_item">
					<view class="asset_title">
						<image src="/static/images/au_icon.png" mode="widthFix" class="title_icon"></image>
						<view class="">
							黄金资产
						</view>
					</view>
					<view class="asset_count">
						<view class="total_count">
							<view class="count_title">
								累计进货
							</view>
							<view class="count_num">
								{{auStock.total || 0}}g
							</view>
						</view>
						<view class="total_count">
							<view class="count_title">
								可用库存
							</view>
							<view class="count_num" :class="{green: Number(auStock.useful)<0}">
								{{auStock.useful || 0}}g
							</view>
						</view>
						<view class="total_count">
							<view class="count_title">
								累计销售
							</view>
							<view class="count_num">
								{{auStock.used || 0}}g
							</view>
						</view>
					</view>
					<view class="asset_tips" v-if="Number(auStock.useful)<0">
						<image src="/static/images/warn_icon.png" mode="heightFix" class="warn_icon"></image>
						<text>库存过低，请及时补货</text>
					</view>
					<view class="asset_btns">
						<view class="record_list" @click="recordClickHandle(1)">
							交易记录
						</view>
						<view class="stock_in" @click="stockInClickHandle(1)">
							补仓
						</view>
					</view>
				</view>

				<view class="asset_item">
					<view class="asset_title">
						<image src="/static/images/pt_icon.png" mode="widthFix" class="title_icon"></image>
						<view class="">
							铂金资产
						</view>
					</view>
					<view class="asset_count">
						<view class="total_count">
							<view class="count_title">
								累计进货
							</view>
							<view class="count_num">
								{{ptStock.total || 0}}g
							</view>
						</view>
						<view class="total_count">
							<view class="count_title">
								可用库存
							</view>
							<view class="count_num" :class="{green: Number(ptStock.useful)<0}">
								{{ptStock.useful || 0}}g
							</view>
						</view>
						<view class="total_count">
							<view class="count_title">
								累计销售
							</view>
							<view class="count_num">
								{{ptStock.used || 0}}g
							</view>
						</view>
					</view>
					<view class="asset_tips" v-if="Number(ptStock.useful)<0">
						<image src="/static/images/warn_icon.png" mode="heightFix" class="warn_icon"></image>
						<text>库存过低，请及时补货</text>
					</view>
					<view class="asset_btns">
						<view class="record_list" @click="recordClickHandle(2)">
							交易记录
						</view>
						<view class="stock_in" @click="stockInClickHandle(2)">
							补仓
						</view>
					</view>
				</view>

				<view class="asset_item">
					<view class="asset_title">
						<image src="/static/images/ag_icon.png" mode="widthFix" class="title_icon"></image>
						<view class="">
							白银资产
						</view>
					</view>
					<view class="asset_count">
						<view class="total_count">
							<view class="count_title">
								累计进货
							</view>
							<view class="count_num">
								{{agStock.total || 0}}g
							</view>
						</view>
						<view class="total_count">
							<view class="count_title">
								可用库存
							</view>
							<view class="count_num" :class="{green: Number(agStock.useful)<0}">
								{{agStock.useful || 0}}g
							</view>
						</view>
						<view class="total_count">
							<view class="count_title">
								累计销售
							</view>
							<view class="count_num">
								{{agStock.used || 0}}g
							</view>
						</view>
					</view>
					<view class="asset_tips" v-if="Number(agStock.useful)<0">
						<image src="/static/images/warn_icon.png" mode="heightFix" class="warn_icon"></image>
						<text>库存过低，请及时补货</text>
					</view>
					<view class="asset_btns">
						<view class="record_list" @click="recordClickHandle(3)">
							交易记录
						</view>
						<view class="stock_in" @click="stockInClickHandle(3)">
							补仓
						</view>
					</view>
				</view>
			</view>

		</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref,
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReachBottom
	} from "@dcloudio/uni-app";

	import {
		restockSubmitAPI,
		fetchMerchantMetalBalanceAPI
	} from '@/api/merchant';

	import {
		useImageUpload
	} from "@/hooks/useImageUpload";
	import {
		useToast
	} from "@/hooks/useToast";

	import {
		throttle
	} from '@/uni_modules/uview-plus';


	onLoad(() => {
		console.log("asset_list page =====>  Loaded")
		
	})
	
		
	onShow(()=>{
		fetchBalance()
	})

	const auStock = ref({
		total: '-',
		useful: '-',
		used: '-',
	})
	const ptStock = ref({
		total: '-',
		useful: '-',
		used: '-',
	})
	const agStock = ref({
		total: '-',
		useful: '-',
		used: '-',
	})

	const refreshTime = ref()


	/**
	 * 获取当前登录商户金属资产明细
	 */
	function fetchBalance(isRefresh) {
		fetchMerchantMetalBalanceAPI().then(res => {
			console.log(res)
			const {
				data,
				code
			} = res
			console.log(data, code)
			if (isRefresh) {
				uni.showToast({
					title: '刷新成功',
					icon: 'none',
					duration: 1000
				})
			}

			if (code === 200 && data.length > 0) {
				refreshTime.value = fetchCurrentTime()

				data.forEach(item => {
					console.log(item);
					switch (item.metalType) {
						case 1:
							auStock.value = {
								total: item.totalIncreaseWeight,
								useful: item.availableStock,
								used: item.totalDecreaseWeight
							}
							break;
						case 2:
							ptStock.value = {
								total: item.totalIncreaseWeight,
								useful: item.availableStock,
								used: item.totalDecreaseWeight
							}
							break;
						case 3:
							agStock.value = {
								total: item.totalIncreaseWeight,
								useful: item.availableStock,
								used: item.totalDecreaseWeight
							}
							break;
						default:
							break;
					}
				})
			}
		}).catch(err => {
			console.log(err);
		})
	}

	function fetchCurrentTime() {
		const now = new Date();
		let year = now.getFullYear(),
			month = now.getMonth() + 1,
			day = now.getDate(),
			hour = now.getHours(),
			min = now.getMinutes(),
			sec = now.getSeconds();

		month = month < 10 ? ('0' + month) : (month)
		day = day < 10 ? ('0' + day) : (day)
		hour = hour < 10 ? ('0' + hour) : (hour)
		min = min < 10 ? ('0' + min) : (min)
		sec = sec < 10 ? ('0' + sec) : (sec)

		return `${year}-${month}-${day} ${hour}:${min}:${sec}`
	}

	function recordClickHandle(type) {
		uni.navigateTo({
			url: `/pages/users/user_asset/record_list/record_list?type=${type}`
		})
	}

	function stockInClickHandle(type) {
		uni.navigateTo({
			url: `/pages/users/user_asset/stock_in/stock_in?type=${type}`
		})
	}

	function refreshClickHandle() {
		throttle(() => {
			fetchBalance(1)
		}, 1000)
	}
</script>

<style scoped lang="scss">
	uni-page-body {
		height: 100%;
	}

	.asset_refresh_box {
		width: 750rpx;
		display: flex;
		justify-content: space-between;
		padding: 0 0 0 32rpx;
		height: 76rpx;
		align-items: center;
		// position: absolute;
		// top:0;
		// left: 0;

		background-color: #FEF8E6;

		.refresh_time {
			font-size: 28rpx;
			color: #333;
		}

		.refresh_btn {
			display: flex;
			align-items: center;
			padding: 20rpx 32rpx 20rpx 20rpx;
			font-size: 24rpx;
			line-height: 32rpx;
			color: #F8C008;

			.refresh_icon {
				// width: 32rpx;
				height: 32rpx;
				margin-right: 8rpx;
			}
		}
	}

	.asset_container {
		// padding-top: 92rpx;
		background-color: #F9F7F0;
		height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;

		.asset_list {
			width: 100%;
			background-color: #F9F7F0;
			height: 400rpx;
			flex: 1;
			padding: 16rpx;

			.list_container {
				padding-bottom: 20rpx;
			}

			.asset_item {
				width: 100%;
				border-radius: 16rpx;
				background-color: #fff;
				min-height: 200rpx;
				padding: 20rpx;
				margin-bottom: 20rpx;

				.asset_title {
					width: 100%;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					font-size: 32rpx;
					color: #333;
					font-weight: bold;

					.title_icon {
						width: 48rpx;
						height: 48rpx;
						margin-right: 8rpx;
					}
				}

				.asset_count {
					width: 100%;
					padding: 16rpx;
					border-radius: 16rpx;
					background-color: #F9F7F0;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 20rpx;

					.total_count {
						display: flex;
						flex: 1;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						min-width: 160rpx;
						flex-shrink: 0;

						.count_title {
							font-size: 24rpx;
							color: #333;
							margin-bottom: 10rpx;
						}

						.count_num {
							font-size: 40rpx;
							color: #3D3D3D;
							font-weight: bold;
							max-width: 200rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;

							&.green {
								color: #2DAB6C;
							}
						}
					}
				}

				.asset_tips {
					width: 100%;
					height: 80rpx;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					background-color: #FEEAEA;
					border-radius: 16rpx;
					padding: 18rpx;
					font-size: 28rpx;
					line-height: 32rpx;
					color: #F52929;
					margin: 20rpx 0;

					.warn_icon {
						// width: 32rpx;
						height: 32rpx;
						margin-right: 16rpx;
					}
				}

				.asset_btns {
					width: 100%;
					display: flex;
					justify-content: space-between;
					margin-top: 20rpx;

					.record_list {
						width: 330rpx;
						height: 60rpx;
						line-height: 60rpx;
						text-align: center;
						color: #333;
						font-size: 28rpx;
						border-radius: 18rpx;
						background-color: rgba(248, 192, 8, 0.10);
					}

					.stock_in {
						width: 330rpx;
						height: 60rpx;
						line-height: 60rpx;
						text-align: center;
						color: #333;
						font-size: 28rpx;
						border-radius: 18rpx;
						background-color: #F8C008;

					}
				}
			}
		}
	}
</style>