equipment-rental-mini/pages/borrow/borrow.vue

<template>
	<view class="home">
		<view class="detail-area">
			<view class="layout-row">
				<u-row
					justify="space-between"
					gutter="10">
					 <u-col span="4">
						<view class="demo-layout">
							资产编号
						</view>
					</u-col>
					<u-col span="8" >
						<view class="demo-layout">001077-00007335</view>
					</u-col>
				</u-row>
			</view>
			<view class="layout-row">
				<u-row
					justify="space-between"
					gutter="10">
					 <u-col span="4">
						<view class="demo-layout">资产名称</view>
					</u-col>
					<u-col span="8">
						<view class="demo-layout">放免防护屏</view>
					</u-col>
				</u-row>
			</view>
			<view class="layout-row">
				<u-row
					justify="space-between"
					gutter="10">
					 <u-col span="4">
						<view class="demo-layout">资产种类</view>
					</u-col>
					<u-col span="8">
						<view class="demo-layout">固定资产</view>
					</u-col>
				</u-row>
			</view>
			<view class="layout-row">
				<u-row
					justify="space-between"
					gutter="10">
					 <u-col span="4">
						<view class="demo-layout">资产分类</view>
					</u-col>
					<u-col span="8">
						<view class="demo-layout">[3220399]其他医用电子仪器</view>
					</u-col>
				</u-row>
			</view>
			<view class="layout-row">
				<u-row
					justify="space-between"
					gutter="10">
					 <u-col span="4">
						<view class="demo-layout">使用部门</view>
					</u-col>
					<u-col span="8">
						<view class="demo-layout">生物医学工程系实验中心</view>
					</u-col>
				</u-row>
			</view>
			<view class="layout-row">
				<u-row
					justify="space-between"
					gutter="10">
					 <u-col span="4">
						<view class="demo-layout">资产原值(元)</view>
					</u-col>
					<u-col span="8">
						<view class="demo-layout">1820.00</view>
					</u-col>
				</u-row>
			</view>
			<view class="layout-row">
				<u-row
					justify="space-between"
					gutter="10">
					 <u-col span="4">
						<view class="demo-layout">数量</view>
					</u-col>
					<u-col span="8">
						<view class="demo-layout">1</view>
					</u-col>
				</u-row>
			</view>
			<view class="layout-row">
				<u-row
					justify="space-between"
					gutter="10">
					 <u-col span="4">
						<view class="demo-layout">存放地点</view>
					</u-col>
					<u-col span="8">
						<view class="demo-layout">番禺A1-512</view>
					</u-col>
				</u-row>
			</view>
			<view class="layout-row">
				<u-row
					justify="space-between"
					gutter="10">
					 <u-col span="4">
						<view class="demo-layout">登记人</view>
					</u-col>
					<u-col span="8">
						<view class="demo-layout">超级用户</view>
					</u-col>
				</u-row>
			</view>
			<view class="layout-row">
				<u-row
					justify="space-between"
					gutter="10">
					 <u-col span="4">
						<view class="demo-layout">取得日期</view>
					</u-col>
					<u-col span="8">
						<view class="demo-layout">2022-12-14</view>
					</u-col>
				</u-row>
			</view>
			<view class="layout-row">
				<u-row
					justify="space-between"
					gutter="10">
					 <u-col span="4">
						<view class="demo-layout">资产用途</view>
					</u-col>
					<u-col span="8">
						<view class="demo-layout">培训教学</view>
					</u-col>
				</u-row>
			</view>
			<view class="layout-row">
				<u-row
					justify="space-between"
					gutter="10">
					 <u-col span="4">
						<view class="demo-layout">规格型号</view>
					</u-col>
					<u-col span="8">
						<view class="demo-layout">RKD-01</view>
					</u-col>
				</u-row>
			</view>
		</view>
		<view class="borrow-date" v-if="status==1">
			<view class="layout-row">
				<u-row
					justify="space-between"
					gutter="10">
					 <u-col span="4">
						<view class="demo-layout">借用日期</view>
					</u-col>
					<u-col span="8">
						<view class="demo-layout">
							<u--input
							placeholder="请输入内容"
							border="none"
							v-model="borrowDate"
							@focus="borrowShow = true"
							></u--input>
							<u-datetime-picker
							:show="borrowShow"
							v-model="borrowValue"
							mode="datetime"
							@confirm="changeDate"
							@cancel="borrowShow = false"
							></u-datetime-picker>
						</view>
					</u-col>
				</u-row>
			</view>
			<view class="layout-row">
				<u-row
					justify="space-between"
					gutter="10">
					 <u-col span="4">
						<view class="demo-layout">归还日期</view>
					</u-col>
					<u-col span="8">
						<view class="demo-layout">
							<u--input
							placeholder="请输入内容"
							border="none"
							v-model="returnDate"
							@focus="returnShow = true"
							></u--input>
							<u-datetime-picker
							:show="returnShow"
							v-model="returnValue"
							mode="datetime"
							@confirm="returnChange"
							@cancel="returnShow = false"
							></u-datetime-picker>
						</view>
					</u-col>
				</u-row>
			</view>
		</view>
		<view class="btn-area">
			<u-button text="借用" color="#000" v-if="status==1">借用</u-button>
			<u-button text="归还" color="#000" v-else-if="status==2">归还</u-button>
		</view>
		<view class="repair-btn">
			<i class="iconfont icon-a-shezhi2"></i>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				borrowDate:this.$core.dateToString(new Date()),
				returnDate:this.$core.dateToString(new Date()),
				borrowShow:false,
				borrowValue:Number(new Date()),
				returnShow:false,
				returnValue:Number(new Date()),
				status:1
			};
		},
		onLoad:function(option){
			console.log(option.number)
		},
		methods:{
			changeDate(val){
				let date = this.$core.dateToString(val.value);
				this.borrowDate = date
				this.borrowShow = false
			},
			returnChange(val){
				let date = this.$core.dateToString(val.value);
				this.returnDate = date
				this.returnShow = false
			}
		}
	}
</script>

<style lang="scss" scoped>
.home{
	padding: 20rpx;
	display: flex;
	flex-direction: column;
	height: 100vh;
	box-sizing: border-box;
}
.detail-area{
	height: 72%;
	border: 1px solid $uni-border-black;
	padding: 0 20rpx;
	overflow-y: scroll;
}
.borrow-date{
	border: 1px solid $uni-border-black;
	padding: 0 20rpx;
	margin-top: 20rpx;
}
.layout-row{
	border-top: 2rpx solid #999999;
	padding: 20rpx 0 ;
}
.demo-layout {
	height: 25px;
}
.btn-area{
	margin-top: 20rpx;
	padding: 0 250rpx;
}
.repair-btn{
	width: 80rpx;
	height: 80rpx;
	color: rgba(80, 80, 80, 1);
	border-radius: 21px;
	line-height: 150%;
	box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	flex-direction: column;
	font-size: 36rpx;
	position: fixed;
	bottom: 20rpx;
	right: 20rpx;
	.iconfont{
		font-size: 42rpx;
	}
}
</style>