art-design-uniapp/pages/borrow/borrow_list - 副本 (2).vue

<template>
	<view class="home-page">
		<uni-nav-bar leftText=" " :fixed="true" leftIcon="back" :border="false"  @clickLeft="leftClick" color="#fff" backgroundColor="rgb(48, 116, 247)" :statusBar="true" title="借用列表"></uni-nav-bar>
		
		<view class="content-wrapper">
			<!-- Tab栏 -->
			<view class="tab-bar">
				<view 
					class="tab-item" 
					:class="{ 'tab-item-active': currentTab === index }"
					v-for="(tab, index) in tabList" 
					:key="index"
					@click="switchTab(index)"
				>
					<text class="tab-text">{{ tab }}</text>
					<view v-if="currentTab === index" class="tab-underline"></view>
				</view>
			</view>
			
			<!-- 列表内容 -->
			<view class="list-container">
				<view 
					class="borrow-card" 
					v-for="(item, index) in filteredList" 
					:key="index"
				>
					<!-- 状态标签（右上角旋转丝带） -->
					<view class="status-ribbon" :class="'ribbon-' + item.status">
						<text class="ribbon-text">{{ getStatusText(item.status) }}</text>
					</view>
					
					<!-- 卡片内容 -->
					<view class="card-content">
						<view class="card-title">{{ item.itemName }}</view>
						<view class="card-info">
							<text class="info-item">申请人: {{ item.applicant }}</text>
							<text class="info-item">借用时间: {{ item.borrowTime }}</text>
							<text class="info-item">公司名称: {{ item.companyName }}</text>
						</view>
						
						<!-- 操作按钮 -->
						<view class="card-actions" v-if="item.status !== 'returned'">
							<button 
								class="action-btn" 
								:class="'btn-' + item.status"
								@click="handleAction(item)"
							>
								{{ getActionText(item.status) }}
							</button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentTab: 0,
				tabList: ['全部', '已归还', '未归还', '待复核'],
				borrowList: [
					{
						id: 1,
						itemName: '公章',
						applicant: '刘宇',
						borrowTime: '2024-11-06 09:41:18',
						companyName: '合塑',
						status: 'returned' // returned, notReturned, pendingReview
					},
					{
						id: 2,
						itemName: '公章',
						applicant: '刘宇',
						borrowTime: '2024-11-06 09:41:18',
						companyName: '合塑',
						status: 'notReturned'
					},
					{
						id: 3,
						itemName: '公章',
						applicant: '刘宇',
						borrowTime: '2024-11-06 09:41:18',
						companyName: '合塑',
						status: 'pendingReview'
					}
				]
			}
		},
		computed: {
			filteredList() {
				if (this.currentTab === 0) {
					return this.borrowList
				} else if (this.currentTab === 1) {
					return this.borrowList.filter(item => item.status === 'returned')
				} else if (this.currentTab === 2) {
					return this.borrowList.filter(item => item.status === 'notReturned')
				} else if (this.currentTab === 3) {
					return this.borrowList.filter(item => item.status === 'pendingReview')
				}
				return []
			}
		},
		methods: {
			leftClick(){
				uni.navigateBack({})
			},
			switchTab(index) {
				this.currentTab = index
			},
			getStatusText(status) {
				const statusMap = {
					'returned': '已归还',
					'notReturned': '未归还',
					'pendingReview': '待复核'
				}
				return statusMap[status] || ''
			},
			getActionText(status) {
				const actionMap = {
					'notReturned': '立即归还',
					'pendingReview': '立即复核'
				}
				return actionMap[status] || ''
			},
			handleAction(item) {
				if (item.status === 'notReturned') {
					// 归还操作
					uni.showModal({
						title: '提示',
						content: '确定要归还该物品吗？',
						success: (res) => {
							if (res.confirm) {
								uni.showToast({
									title: '归还成功',
									icon: 'success'
								})
								// 这里可以调用API更新状态
							}
						}
					})
				} else if (item.status === 'pendingReview') {
					// 复核操作
					uni.showModal({
						title: '提示',
						content: '确定要复核该申请吗？',
						success: (res) => {
							if (res.confirm) {
								uni.showToast({
									title: '复核成功',
									icon: 'success'
								})
								// 这里可以调用API更新状态
							}
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.home-page {
		min-height: 100vh;
		background: rgb(244, 246, 248);
	}
	
	.content-wrapper {
	}
	
	// Tab栏样式
	.tab-bar {
		display: flex;
		background: #F4F6F8;
	}
	
	.tab-item {
		flex: 1;
		position: relative;
		padding: 24rpx 0;
		text-align: center;
	}
	
	.tab-text {
		font-size: 28rpx;
		color: #666;
	}
	
	.tab-item-active .tab-text {
		color: #3074F7;
		font-weight: 500;
	}
	
	.tab-underline {
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 60rpx;
		height: 4rpx;
		background: #3074F7;
		border-radius: 2rpx;
	}
	
	// 列表容器
	.list-container {
		padding: 24rpx 28rpx;
	}
	
	// 借用卡片
	.borrow-card {
		position: relative;
		background: #fff;
		border-radius: 12rpx;
		margin-bottom: 24rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
		overflow: hidden;
	}
	
	// 状态标签（旋转丝带效果）
	.status-ribbon {
		position: absolute;
		top: -4px;
		right: -32px;
		width: 100px;
		height: 47px;
		background: #4CAF50;
		transform: rotate(45deg);
		z-index: 10;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.15);
	}
	
	.ribbon-returned {
		background: #4CAF50; // 绿色
	}
	
	.ribbon-notReturned {
		background: #F44336; // 红色
	}
	
	.ribbon-pendingReview {
		background: #2196F3; // 蓝色
	}
	
	.ribbon-text {
		color: #fff;
		font-size: 20rpx;
		font-weight: 500;
		transform: rotate(0deg);
		transform-origin: center;
		display: block;
		text-align: center;
		margin-top: 16rpx;
		white-space: nowrap;
		letter-spacing: 1rpx;
	}
	
	// 卡片内容
	.card-content {
		padding: 32rpx;
		padding-top: 48rpx;
	}
	
	.card-title {
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
		margin-bottom: 24rpx;
	}
	
	.card-info {
		display: flex;
		flex-direction: column;
		gap: 12rpx;
		margin-bottom: 24rpx;
	}
	
	.info-item {
		font-size: 26rpx;
		color: #666;
		line-height: 1.6;
	}
	
	// 操作按钮
	.card-actions {
		display: flex;
		justify-content: flex-end;
		margin-top: 24rpx;
	}
	
	.action-btn {
		padding: 14rpx 40rpx;
		background: #3074F7;
		color: #fff;
		border-radius: 8rpx;
		font-size: 26rpx;
		border: none;
		line-height: 1;
		
		&::after {
			border: none;
		}
	}
	
	.btn-notReturned {
		background: #3074F7;
	}
	
	.btn-pendingReview {
		background: #3074F7;
	}
</style>