stocktaking/pages/index/index.vue

<template>
	<view class="index-bg">
		<view class="index-content">
			<view class="btn-group">
				<button class="main-btn" @click="scanInventory">扫码盘点</button>
				<button class="main-btn outline" @click="scanView">扫码查看</button>
			</view>
			<view class="recent-section">
				<view class="recent-title">最近盘点记录</view>
				<view class="recent-list">
					<view class="recent-item" v-for="(item, idx) in recentRecords" :key="idx">
						<view class="recent-info">
							<text class="recent-name">{{item.title}}</text>
							<text class="recent-time">{{item.time}}</text>
						</view>
						<text class="recent-status" :class="item.status">{{item.statusText}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentDate: '',
				recentRecords: [
					{ title: '仓库A盘点', time: '2024-03-20 14:30', status: 'completed', statusText: '已完成' },
					{ title: '办公用品盘点', time: '2024-03-19 10:15', status: 'processing', statusText: '进行中' },
					{ title: '设备资产盘点', time: '2024-03-18 16:45', status: 'completed', statusText: '已完成' }
				]
			}
		},
		onLoad() {
			this.updateDate()
		},
		methods: {
			updateDate() {
				const now = new Date()
				const year = now.getFullYear()
				const month = String(now.getMonth() + 1).padStart(2, '0')
				const day = String(now.getDate()).padStart(2, '0')
				this.currentDate = `${year}-${month}-${day}`
			},
			scanInventory() {
				uni.scanCode({
					success: (res) => {
						uni.navigateTo({
							url: `/pages/inventory/inventory?code=${encodeURIComponent(res.result)}`
						});
					},
					fail: () => {
						uni.showToast({ title: '扫码失败', icon: 'none' });
					}
				});
			},
			scanView() {
				uni.scanCode({
					success: (res) => {
						uni.navigateTo({
							url: `/pages/detail/detail?code=${encodeURIComponent(res.result)}`
						});
					},
					fail: () => {
						uni.showToast({ title: '扫码失败', icon: 'none' });
					}
				});
			}
		}
	}
</script>

<style>
	.index-bg {
		min-height: 100vh;
		background: linear-gradient(180deg, #eaf1fb 0%, #f7fafd 100%);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.index-content {
		width: 100%;
		max-width: 600px;
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 4vw 0 6vw 0;
		box-sizing: border-box;
	}

	.btn-group {
		width: 90%;
		max-width: 500px;
		display: flex;
		flex-direction: column;
		margin: 0 auto 48rpx auto;
	}

	.main-btn {
		height: 110rpx;
		font-size: 38rpx;
		font-weight: 800;
		border-radius: 28rpx;
		background: linear-gradient(90deg, #409eff 0%, #3b7cff 100%);
		color: #fff;
		box-shadow: 0 8px 24px rgba(64,158,255,0.15);
		letter-spacing: 10rpx;
		margin: 0;
		border: none;
		outline: none;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: background 0.2s, box-shadow 0.2s;
		margin-bottom: 36rpx;
	}

	.main-btn:last-child {
		margin-bottom: 0;
	}

	.main-btn:active {
		background: linear-gradient(90deg, #337ecc 0%, #2a5db0 100%);
		box-shadow: 0 4px 12px rgba(64,158,255,0.10);
	}

	.main-btn.outline {
		background: #fff;
		color: #409eff;
		border: 3px solid #409eff;
		box-shadow: none;
	}

	.main-btn.outline:active {
		background: #f0f7ff;
	}

	.recent-section {
		width: 92%;
		max-width: 520px;
		margin: 0 auto;
		background: #fff;
		border-radius: 22rpx;
		box-shadow: 0 4px 18px rgba(64,158,255,0.07);
		padding: 28rpx 20rpx 18rpx 20rpx;
	}

	.recent-title {
		font-size: 28rpx;
		color: #222;
		font-weight: 700;
		margin-bottom: 18rpx;
	}

	.recent-list {
		display: flex;
		flex-direction: column;
		gap: 14rpx;
	}

	.recent-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 14rpx 0;
		border-bottom: 1px solid #f0f0f0;
	}

	.recent-item:last-child {
		border-bottom: none;
	}

	.recent-info {
		display: flex;
		flex-direction: column;
	}

	.recent-name {
		font-size: 24rpx;
		color: #333;
		font-weight: 600;
	}

	.recent-time {
		font-size: 20rpx;
		color: #999;
		margin-top: 2rpx;
	}

	.recent-status {
		font-size: 20rpx;
		padding: 4rpx 14rpx;
		border-radius: 16rpx;
	}

	.recent-status.completed {
		background-color: #e8f5e9;
		color: #4caf50;
	}

	.recent-status.processing {
		background-color: #fff3e0;
		color: #ff9800;
	}
</style>