5 changed files with 422 additions and 125 deletions
@ -0,0 +1,253 @@ |
|||||
|
<template> |
||||
|
<view> |
||||
|
<view class="top-bg"></view> |
||||
|
<view class="container"> |
||||
|
<u-form :model="form" ref="uForm" label-width="120"> |
||||
|
<view class="info-card"> |
||||
|
<u-form-item label="房间" prop="room" required> |
||||
|
<u-input |
||||
|
v-model="form.room" |
||||
|
placeholder="请输入房间" |
||||
|
border="none" |
||||
|
input-align="right" |
||||
|
/> |
||||
|
</u-form-item> |
||||
|
</view> |
||||
|
|
||||
|
<view class="info-card"> |
||||
|
<u-form-item label="姓名" prop="name" required> |
||||
|
<u-input |
||||
|
v-model="form.name" |
||||
|
placeholder="请输入姓名" |
||||
|
border="none" |
||||
|
input-align="right" |
||||
|
/> |
||||
|
</u-form-item> |
||||
|
<u-form-item label="身份证号" prop="idCard" required> |
||||
|
<u-input |
||||
|
v-model="form.idCard" |
||||
|
placeholder="请输入身份证号" |
||||
|
border="none" |
||||
|
input-align="right" |
||||
|
/> |
||||
|
</u-form-item> |
||||
|
<u-form-item label="手机号" prop="phone" required> |
||||
|
<u-input |
||||
|
v-model="form.phone" |
||||
|
placeholder="请输入手机号" |
||||
|
border="none" |
||||
|
input-align="right" |
||||
|
/> |
||||
|
</u-form-item> |
||||
|
<u-form-item |
||||
|
label="退房日期" |
||||
|
prop="leaveDate" |
||||
|
required |
||||
|
@click="showDate = true" |
||||
|
> |
||||
|
<u--input |
||||
|
v-model="form.leaveDate" |
||||
|
placeholder="请选择退房日期" |
||||
|
border="none" |
||||
|
readonly |
||||
|
input-align="right" |
||||
|
></u--input> |
||||
|
</u-form-item> |
||||
|
</view> |
||||
|
<view class="desc-card"> |
||||
|
<view class="label-des">说明</view> |
||||
|
<u-textarea |
||||
|
v-model="value" |
||||
|
:formatter="formatter" |
||||
|
ref="textarea" |
||||
|
placeholder="请输入内容（不超过500字）" |
||||
|
maxlength="500" |
||||
|
height="150" |
||||
|
border="none" |
||||
|
custom-style="background:#f7f7f7;border-radius:12rpx;padding:16rpx;" |
||||
|
></u-textarea> |
||||
|
<view class="label-des">上传图片/视频</view> |
||||
|
<u-upload |
||||
|
:fileList="fileList" |
||||
|
@afterRead="afterRead" |
||||
|
@delete="deletePic" |
||||
|
multiple |
||||
|
:maxCount="10" |
||||
|
accept="image,video" |
||||
|
uploadIconColor="#12c3c3" |
||||
|
uploadText="点击上传" |
||||
|
> |
||||
|
</u-upload> |
||||
|
</view> |
||||
|
<view class="submit-box"> |
||||
|
<u-button |
||||
|
type="primary" |
||||
|
shape="circle" |
||||
|
@click="submit" |
||||
|
:custom-style="btnStyle" |
||||
|
>提交</u-button |
||||
|
> |
||||
|
</view> |
||||
|
</u-form> |
||||
|
<u-datetime-picker |
||||
|
:show="showDate" |
||||
|
v-model="form.pickerValue" |
||||
|
mode="date" |
||||
|
@confirm="onDateConfirm" |
||||
|
@cancel="showDate = false" |
||||
|
/> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
btnStyle: |
||||
|
"background:linear-gradient(90deg,#0DC6C6 0%,#13C2C2 100%);font-size:36rpx;border-radius:48rpx;width:60vw;height:80rpx; margin-bottom:60rpx;", |
||||
|
form: { |
||||
|
room: "", |
||||
|
name: "", |
||||
|
idCard: "", |
||||
|
phone: "", |
||||
|
leaveDate: "", |
||||
|
desc: "", |
||||
|
imageUrl: "", |
||||
|
pickerValue: "", |
||||
|
}, |
||||
|
fileList: [], |
||||
|
showDate: false, |
||||
|
minDate: "2000-01-01", |
||||
|
maxDate: "2100-12-31", |
||||
|
descStyle: |
||||
|
"background:#f7f8fa;border-radius:12rpx;padding:24rpx;font-size:28rpx;color:#222;min-height:250rpx;box-sizing:border-box;", |
||||
|
}; |
||||
|
}, |
||||
|
methods: { |
||||
|
afterRead(event) { |
||||
|
// 这里只做本地预览，实际开发中应上传到服务器 |
||||
|
const file = event.file; |
||||
|
this.fileList = [file]; |
||||
|
this.form.imageUrl = file.url || file.path; |
||||
|
}, |
||||
|
onDateConfirm(e) { |
||||
|
// e.value 是时间戳，格式化为 YYYY-MM-DD |
||||
|
const date = new Date(e.value); |
||||
|
const y = date.getFullYear(); |
||||
|
const m = (date.getMonth() + 1).toString().padStart(2, "0"); |
||||
|
const d = date.getDate().toString().padStart(2, "0"); |
||||
|
this.form.leaveDate = `${y}-${m}-${d}`; |
||||
|
this.showDate = false; |
||||
|
}, |
||||
|
submit() { |
||||
|
this.$refs.uForm.validate((valid) => { |
||||
|
if (valid) { |
||||
|
uni.showToast({ title: "提交成功", icon: "success" }); |
||||
|
// 这里可以提交form数据到后端 |
||||
|
} else { |
||||
|
uni.showToast({ title: "请完善表单", icon: "none" }); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.top-bg { |
||||
|
position: fixed; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
width: 100vw; |
||||
|
height: 220rpx; |
||||
|
background: linear-gradient(120deg, #c6e6f7 0%, #e3e5fc 100%); |
||||
|
z-index: 0; |
||||
|
} |
||||
|
.container { |
||||
|
position: relative; |
||||
|
z-index: 1; |
||||
|
padding: 32rpx 24rpx 0 24rpx; |
||||
|
background: transparent; |
||||
|
min-height: 80vh; |
||||
|
} |
||||
|
.info-card { |
||||
|
background: #fff; |
||||
|
border-radius: 24rpx; |
||||
|
padding: 0rpx 24rpx 0 24rpx; |
||||
|
margin-bottom: 24rpx; |
||||
|
box-shadow: 0 4rpx 16rpx 0 #e6f6fd; |
||||
|
} |
||||
|
::v-deep .u-form-item__body__left { |
||||
|
color: #6a7fa3 !important; |
||||
|
font-size: 28rpx !important; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
.u-form-item__body__left .u-form-item__body__left__required { |
||||
|
color: #ff5a5a !important; |
||||
|
margin-right: 4rpx; |
||||
|
font-size: 28rpx; |
||||
|
} |
||||
|
|
||||
|
.u-form-item__body__right { |
||||
|
text-align: right; |
||||
|
color: #222; |
||||
|
font-size: 28rpx; |
||||
|
} |
||||
|
|
||||
|
.u-form-item { |
||||
|
border-bottom: 1rpx solid #f2f4f8 !important; |
||||
|
margin-bottom: 0 !important; |
||||
|
padding-bottom: 0 !important; |
||||
|
} |
||||
|
.u-form-item:last-child { |
||||
|
border-bottom: none !important; |
||||
|
} |
||||
|
|
||||
|
.desc-card { |
||||
|
background: #fff; |
||||
|
border-radius: 20rpx; |
||||
|
padding: 24rpx 20rpx 24rpx 20rpx; |
||||
|
margin-bottom: 24rpx; |
||||
|
box-shadow: 0 2rpx 8rpx #f2f4f8; |
||||
|
} |
||||
|
.label-des { |
||||
|
color: #68758b; |
||||
|
font-size: 32rpx; |
||||
|
margin: 20rpx 0; |
||||
|
} |
||||
|
.custom-desc-textarea { |
||||
|
background: #f7f8fa !important; |
||||
|
border-radius: 12rpx !important; |
||||
|
padding: 24rpx !important; |
||||
|
font-size: 28rpx !important; |
||||
|
color: #222 !important; |
||||
|
min-height: 500rpx !important; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
/* u-upload自定义按钮样式（如需更改） */ |
||||
|
.u-upload__wrap__button { |
||||
|
background: #f7f8fa !important; |
||||
|
border-radius: 16rpx !important; |
||||
|
width: 120rpx !important; |
||||
|
height: 120rpx !important; |
||||
|
display: flex !important; |
||||
|
flex-direction: column !important; |
||||
|
align-items: center !important; |
||||
|
justify-content: center !important; |
||||
|
} |
||||
|
.u-upload__wrap__button .u-icon { |
||||
|
color: #2fd7e6 !important; |
||||
|
font-size: 48rpx !important; |
||||
|
} |
||||
|
.u-upload__wrap__button .u-upload__wrap__button__text { |
||||
|
color: #b0b0b0 !important; |
||||
|
font-size: 24rpx !important; |
||||
|
margin-top: 8rpx; |
||||
|
} |
||||
|
::v-deep .u-form-item__body__left__content__label span { |
||||
|
color: #68758b; |
||||
|
font-size: 32rpx; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue