art-design-uniapp/pages/borrow/borrow_detils.vue

<template>
	<view class="home-page">
		<uni-nav-bar leftText=" " :fixed="true" leftIcon="back" :border="false"  @clickLeft="leftClick" color="#fff" backgroundColor="rgb(79 137 247)" :statusBar="true" title="详情"></uni-nav-bar>
		
		<view class="content-wrapper">
			<view class="detail-card">
				<!-- 状态丝带 -->
				<view class="status-ribbon" :class="statusClass">
					<text class="ribbon-text">{{ statusText }}</text>
				</view>
				
				<!-- 标题 -->
				<view class="card-header">
					<text class="item-title">{{ detail.itemName }}</text>
				</view>
				
				<!-- 申请信息 -->
				<view class="section">
					<text class="section-title">申请信息</text>
					<view class="info-row">
						<text class="label">申请人</text>
						<text class="value">{{ detail.applicant }}</text>
					</view>
					<view class="info-row">
						<text class="label">公司名称</text>
						<text class="value">{{ detail.companyName }}</text>
					</view>
					<view class="info-row">
						<text class="label">物品所属公司</text>
						<text class="value">{{ detail.itemCompany }}</text>
					</view>
					<view class="info-row">
						<text class="label">借用时间</text>
						<text class="value">{{ detail.borrowTime }}</text>
					</view>
					<view class="info-row">
						<text class="label">计划归还时间</text>
						<text class="value">{{ detail.returnTime }}</text>
					</view>
					<view class="info-row">
						<text class="label">借用事由</text>
						<text class="value">{{ detail.borrowReason }}</text>
					</view>
					<view class="info-row" v-if="detail.remarks">
						<text class="label">备注</text>
						<text class="value">{{ detail.remarks }}</text>
					</view>
				</view>
				
				<!-- 复核信息 -->
				<view class="section">
					<text class="section-title">复核信息</text>
					<view class="info-row">
						<text class="label">复核人</text>
						<text class="value">{{ detail.reviewer || '—' }}</text>
					</view>
					<view class="info-row">
						<text class="label">复核时间</text>
						<text class="value">{{ detail.reviewTime || '—' }}</text>
					</view>
					<view class="info-row">
						<text class="label">复核结果</text>
						<text class="value">{{ detail.reviewResult || '—' }}</text>
					</view>
					<view class="info-row" v-if="detail.reviewRemark">
						<text class="label">复核说明</text>
						<text class="value">{{ detail.reviewRemark }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				detail: {
					status: 'returned', // returned | notReturned | pendingReview
					itemName: '公章',
					applicant: '刘宇',
					companyName: '合塑',
					itemCompany: '合塑',
					borrowTime: '2024-11-06 09:41:18',
					returnTime: '2024-11-10 18:00:00',
					borrowReason: '合同签署使用',
					remarks: '请保持物品完整',
					reviewer: '张伟',
					reviewTime: '2024-11-07 09:00:00',
					reviewResult: '已复核',
					reviewRemark: '流程符合规定'
				}
			}
		},
		computed: {
			statusText() {
				const map = {
					returned: '已归还',
					notReturned: '未归还',
					pendingReview: '待复核'
				}
				return map[this.detail.status] || ''
			},
			statusClass() {
				return `ribbon-${this.detail.status}`
			}
		},
		onLoad(options) {
			this.id = options.id;
		},
		methods: {
			leftClick(){
				uni.navigateBack({})
			}
		}
	}
</script>

<style lang="scss">
	.home-page{
		min-height: 100vh;
		background: linear-gradient(180.05deg, #3074F7 0.04%, #F4F6F8 34.07%);
		box-sizing: border-box;
		padding-bottom: 120rpx;
		padding: 0px 28rpx;
	}
	.content-wrapper{
		margin-top: 20rpx;
	}
	
	.detail-card{
		position: relative;
		background: #fff;
		border-radius: 12rpx;
		padding: 32rpx;
		box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
		overflow: hidden;
	}
	
	.card-header{
		margin-bottom: 16rpx;
	}
	
	.item-title{
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
	}
	
	.section{
		margin-top: 24rpx;
		padding-top: 12rpx;
	}
	
	.section-title{
		font-size: 28rpx;
		font-weight: 500;
		color: #444;
		margin-bottom: 12rpx;
		display: block;
	}
	
	.info-row{
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 12rpx;
	}
	
	.label{
		color: #666;
		font-size: 26rpx;
	}
	
	.value{
		color: #333;
		font-size: 26rpx;
		text-align: right;
		max-width: 66%;
	}
	
	.status-ribbon{
		position: absolute;
		top: -5px;
		right: -24px;
		width: 75px;
		height: 37px;
		background: #08A400;
		transform: rotate(45deg);
		z-index: 10;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
	}
	
	.ribbon-returned{
		background: #08A400;
	}
	
	.ribbon-notReturned{
		background: #BD0000;
	}
	
	.ribbon-pendingReview{
		background: #3471FF;
	}
	
	.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;
	}
</style>