浅念
453 lines
10 KiB
Vue
453 lines
10 KiB
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="form-card">
|
|
<view class="form-item form-item-row">
|
|
<text class="form-label">申请人:</text>
|
|
<text class="form-value">{{ formData.applicant || '犇犇' }}</text>
|
|
</view>
|
|
<view class="form-item form-item-row">
|
|
<text class="form-label">公司名称:</text>
|
|
<text class="form-value">{{ formData.companyName || '合塑' }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 借用详情卡片 -->
|
|
<view class="form-card4">
|
|
<!-- 借用时间 -->
|
|
<view class="form-item form-item-row">
|
|
<text class="form-label">借用时间</text>
|
|
<view class="form-input-container">
|
|
<uni-datetime-picker
|
|
ref="borrowTimePicker"
|
|
type="datetime"
|
|
v-model="formData.borrowTime"
|
|
placeholder="请选择时间"
|
|
:border="false"
|
|
:clear-icon="false"
|
|
@change="onBorrowTimeChange"
|
|
>
|
|
<view class="custom-datetime-input">
|
|
<text class="custom-datetime-text" :class="{ 'placeholder': !formData.borrowTime }">
|
|
{{ formData.borrowTime || '请选择时间' }}
|
|
</text>
|
|
<uni-icons type="calendar" size="18" color="#999"></uni-icons>
|
|
</view>
|
|
</uni-datetime-picker>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="form-card4">
|
|
<!-- 计划归还时间 -->
|
|
<view class="form-item form-item-row">
|
|
<text class="form-label">计划归还时间</text>
|
|
<view class="form-input-container">
|
|
<uni-datetime-picker
|
|
ref="returnTimePicker"
|
|
type="datetime"
|
|
v-model="formData.returnTime"
|
|
placeholder="请选择时间"
|
|
:border="false"
|
|
:clear-icon="false"
|
|
@change="onReturnTimeChange"
|
|
>
|
|
<view class="custom-datetime-input">
|
|
<text class="custom-datetime-text" :class="{ 'placeholder': !formData.returnTime }">
|
|
{{ formData.returnTime || '请选择时间' }}
|
|
</text>
|
|
<uni-icons type="calendar" size="18" color="#999"></uni-icons>
|
|
</view>
|
|
</uni-datetime-picker>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="form-card4">
|
|
<!-- 物品所属公司 -->
|
|
<view class="form-item form-item-row">
|
|
<text class="form-label">物品所属公司</text>
|
|
<view class="form-input-container">
|
|
<uni-data-select
|
|
v-model="formData.itemCompany"
|
|
:localdata="itemCompanyOptions"
|
|
placeholder="请选择"
|
|
:clear="false"
|
|
></uni-data-select>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="form-card">
|
|
<!-- 借用事由 -->
|
|
<view class="form-item">
|
|
<text class="form-label">借用事由</text>
|
|
<uni-easyinput
|
|
v-model="formData.borrowReason"
|
|
type="textarea"
|
|
:autoHeight="true"
|
|
placeholder="请填写借用事由"
|
|
:maxlength="500"
|
|
></uni-easyinput>
|
|
</view>
|
|
</view>
|
|
<view class="form-card4">
|
|
<!-- 物品名称 -->
|
|
<view class="form-item form-item-row">
|
|
<text class="form-label required">归还物品名称</text>
|
|
<view class="form-input-container">
|
|
<uni-data-select
|
|
v-model="formData.itemName"
|
|
:localdata="itemNameOptions"
|
|
placeholder="请选择"
|
|
:clear="false"
|
|
></uni-data-select>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="form-card">
|
|
<!-- 计划归还时间 -->
|
|
<view class="form-item form-item-row">
|
|
<text class="form-label required">实际归还时间</text>
|
|
<view class="form-input-container">
|
|
<uni-datetime-picker
|
|
ref="returnTimePicker"
|
|
type="datetime"
|
|
v-model="formData.returnTime"
|
|
placeholder="请选择时间"
|
|
:border="false"
|
|
:clear-icon="false"
|
|
@change="onReturnTimeChange"
|
|
>
|
|
<view class="custom-datetime-input">
|
|
<text class="custom-datetime-text" :class="{ 'placeholder': !formData.returnTime }">
|
|
{{ formData.returnTime || '请选择时间' }}
|
|
</text>
|
|
<uni-icons type="calendar" size="18" color="#999"></uni-icons>
|
|
</view>
|
|
</uni-datetime-picker>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 备注卡片 -->
|
|
<view class="form-card " style="margin-bottom: 8rpx;">
|
|
<view class="form-item">
|
|
<text class="form-label">备注</text>
|
|
<uni-easyinput
|
|
v-model="formData.remarks"
|
|
type="textarea"
|
|
:autoHeight="true"
|
|
placeholder="请填写备注"
|
|
:maxlength="500"
|
|
></uni-easyinput>
|
|
</view>
|
|
</view>
|
|
<!-- 附件卡片 -->
|
|
<view class="form-card">
|
|
<view class="form-item">
|
|
<text class="form-label form-label1">附件</text>
|
|
<uni-file-picker
|
|
v-model="formData.attachments"
|
|
file-mediatype="image"
|
|
mode="grid"
|
|
:limit="9"
|
|
:auto-upload="false"
|
|
@select="onFileSelect"
|
|
>
|
|
<image src="/static/image/upload.png" mode="" class="addimg"></image>
|
|
</uni-file-picker>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 提交按钮 -->
|
|
<view class="submit-btn-wrapper">
|
|
<button class="submit-btn" @click="handleSubmit">提交</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
formData: {
|
|
applicant: '犇犇',
|
|
companyName: '合塑',
|
|
borrowTime: '',
|
|
returnTime: '',
|
|
itemName: '',
|
|
itemCompany: '',
|
|
borrowReason: '',
|
|
remarks: '',
|
|
attachments: []
|
|
},
|
|
itemNameOptions: [
|
|
{ text: '物品1', value: 'item1' },
|
|
{ text: '物品2', value: 'item2' },
|
|
{ text: '物品3', value: 'item3' }
|
|
],
|
|
itemCompanyOptions: [
|
|
{ text: '公司A', value: 'companyA' },
|
|
{ text: '公司B', value: 'companyB' },
|
|
{ text: '公司C', value: 'companyC' }
|
|
]
|
|
}
|
|
},
|
|
methods: {
|
|
leftClick(){
|
|
uni.navigateBack({})
|
|
},
|
|
onBorrowTimeChange(e) {
|
|
// uni-datetime-picker返回的已经是格式化后的字符串
|
|
this.formData.borrowTime = e
|
|
},
|
|
onReturnTimeChange(e) {
|
|
// uni-datetime-picker返回的已经是格式化后的字符串
|
|
this.formData.returnTime = e
|
|
},
|
|
onFileSelect(e) {
|
|
console.log('文件选择:', e)
|
|
},
|
|
handleSubmit() {
|
|
// 表单验证
|
|
if (!this.formData.borrowTime) {
|
|
uni.showToast({
|
|
title: '请选择借用时间',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
if (!this.formData.returnTime) {
|
|
uni.showToast({
|
|
title: '请选择计划归还时间',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
if (!this.formData.itemName) {
|
|
uni.showToast({
|
|
title: '请选择物品名称',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
if (!this.formData.itemCompany) {
|
|
uni.showToast({
|
|
title: '请选择物品所属公司',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
if (!this.formData.borrowReason) {
|
|
uni.showToast({
|
|
title: '请填写借用事由',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
|
|
// 提交表单
|
|
console.log('提交表单:', this.formData)
|
|
uni.showToast({
|
|
title: '提交成功',
|
|
icon: 'success'
|
|
})
|
|
// 这里可以调用API提交数据
|
|
}
|
|
}
|
|
}
|
|
</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;
|
|
}
|
|
.addimg{
|
|
width: 50px;
|
|
height:50px;
|
|
}
|
|
.form-card {
|
|
background: #fff;
|
|
border-radius: 12rpx;
|
|
padding:20rpx 34rpx;
|
|
margin-bottom: 24rpx;
|
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
|
}
|
|
.form-card4 {
|
|
background: #fff;
|
|
border-radius: 6px;
|
|
padding: 3px 17px;
|
|
margin-bottom: 4px;
|
|
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
|
|
height: 35px;
|
|
line-height: 35px;
|
|
}
|
|
.form-item {
|
|
margin-bottom: 32rpx;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
&.form-item-row {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: nowrap;
|
|
}
|
|
}
|
|
|
|
.form-label {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
// margin-bottom: 16rpx;
|
|
display: block;
|
|
flex-shrink: 0;
|
|
min-width: 160rpx;
|
|
|
|
&.required::before {
|
|
content: '*';
|
|
color: #ff0000;
|
|
margin-right: 4rpx;
|
|
}
|
|
}
|
|
.form-label1{
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
.form-item-row .form-label {
|
|
margin-bottom: 0;
|
|
margin-right: 24rpx;
|
|
}
|
|
|
|
.form-input-container {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.form-value {
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
flex: 1;
|
|
text-align: right;
|
|
}
|
|
|
|
.form-input-wrapper {
|
|
width: 100%;
|
|
}
|
|
|
|
.form-input-container .form-input-wrapper {
|
|
width: 100%;
|
|
}
|
|
|
|
.custom-datetime-input {
|
|
border-radius: 4px;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
text-align: right;
|
|
}
|
|
|
|
.custom-datetime-text {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
flex: 1;
|
|
|
|
&.placeholder {
|
|
color: #999;
|
|
}
|
|
}
|
|
|
|
// uni-datetime-picker 样式覆盖
|
|
::v-deep .uni-date-editor {
|
|
width: 100%;
|
|
}
|
|
|
|
::v-deep .uni-date-editor--x {
|
|
border: none !important;
|
|
background: transparent !important;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
::v-deep .uni-date-x {
|
|
width: 100%;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
::v-deep .uni-date__x-input {
|
|
display: none;
|
|
}
|
|
|
|
::v-deep .icon-calendar {
|
|
display: none;
|
|
}
|
|
|
|
.submit-btn-wrapper {
|
|
margin-top: 40rpx;
|
|
padding-bottom: 40rpx;
|
|
}
|
|
|
|
.submit-btn {
|
|
width: 70%;
|
|
height: 88rpx;
|
|
background: #3074F7;
|
|
color: #fff;
|
|
border-radius: 44rpx;
|
|
font-size: 32rpx;
|
|
line-height: 88rpx;
|
|
border: none;
|
|
|
|
&::after {
|
|
border: none;
|
|
}
|
|
}
|
|
|
|
// uni-data-select 样式调整
|
|
::v-deep .uni-stat__select {
|
|
width: 100%;
|
|
}
|
|
|
|
::v-deep .uni-select {
|
|
width: 100%;
|
|
border: none;
|
|
text-align: right;
|
|
}
|
|
|
|
::v-deep .uni-select__input-text {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
}
|
|
|
|
::v-deep .uni-select__input-placeholder {
|
|
color: #999;
|
|
}
|
|
|
|
// uni-easyinput 样式调整
|
|
::v-deep .uni-easyinput {
|
|
width: 100%;
|
|
}
|
|
|
|
::v-deep .uni-easyinput__content {
|
|
border: none;
|
|
min-height: 120rpx;
|
|
}
|
|
|
|
::v-deep .uni-easyinput__content-textarea {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
min-height: 120rpx;
|
|
padding-left: 0px;
|
|
}
|
|
|
|
// uni-file-picker 样式调整
|
|
::v-deep .uni-file-picker {
|
|
width: 100%;
|
|
}
|
|
</style>
|