16 changed files with 635 additions and 17 deletions
|
After Width: | Height: | Size: 898 B |
|
After Width: | Height: | Size: 7.7 KiB |
@ -0,0 +1,297 @@ |
|||
// subpages/goOut/goOut/goOut.js
|
|||
var config = require('../../../utils/config') |
|||
Page({ |
|||
|
|||
/** |
|||
* 页面的初始数据 |
|||
*/ |
|||
data: { |
|||
reasonName: '', |
|||
currentDateStart: '', |
|||
currentDateEnd: '', |
|||
showReason: false, |
|||
showDateStart: false, |
|||
showDateEnd: false, |
|||
options: ['本人及其直系亲属因病因伤住院', '就业创业人员因公出差/培训', '就业人员法定节假日期间单位假期多于法定日期'], |
|||
minDate: new Date(new Date().setHours(0, 0, 0, 0)).getTime(), |
|||
maxDate: new Date(new Date().setHours(23, 59, 59, 999)).getTime(), |
|||
endMinDate: null, // 结束时间最小日期
|
|||
endMaxDate: null, // 结束时间最大日期
|
|||
fileList: [], // 上传的文件列表
|
|||
submitting: false, // 提交状态
|
|||
showSuccessModal: true, // 显示成功弹框
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面加载 |
|||
*/ |
|||
onLoad(options) { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面初次渲染完成 |
|||
*/ |
|||
onReady() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面显示 |
|||
*/ |
|||
onShow() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面隐藏 |
|||
*/ |
|||
onHide() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面卸载 |
|||
*/ |
|||
onUnload() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 页面相关事件处理函数--监听用户下拉动作 |
|||
*/ |
|||
onPullDownRefresh() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 页面上拉触底事件的处理函数 |
|||
*/ |
|||
onReachBottom() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 用户点击右上角分享 |
|||
*/ |
|||
onShareAppMessage() { |
|||
|
|||
}, |
|||
handleReason() { |
|||
this.setData({ |
|||
showReason: true |
|||
}) |
|||
}, |
|||
onconfirm(e) { |
|||
const { |
|||
index, |
|||
value |
|||
} = e.detail; |
|||
console.log(index); |
|||
this.setData({ |
|||
reasonName: value, |
|||
showReason: false |
|||
}) |
|||
}, |
|||
oncancel() { |
|||
this.setData({ |
|||
reasonName: '', |
|||
showReason: false |
|||
}) |
|||
}, |
|||
handleDateStart() { |
|||
console.log('handleDateStart'); |
|||
|
|||
this.setData({ |
|||
showDateStart: true |
|||
}) |
|||
}, |
|||
oncancelStart() { |
|||
this.setData({ |
|||
currentDateStart: '', |
|||
showDateStart: false |
|||
}) |
|||
}, |
|||
formatDate(date) { |
|||
date = new Date(date); |
|||
console.log(date); |
|||
return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`; |
|||
}, |
|||
onconfirmStart(e) { |
|||
const selectedDate = new Date(e.detail); |
|||
// 计算结束时间的最小日期（开始时间当天）
|
|||
const endMinDate = new Date(selectedDate); |
|||
// 计算结束时间的最大日期（开始时间往后7天）
|
|||
const endMaxDate = new Date(selectedDate); |
|||
endMaxDate.setDate(selectedDate.getDate() + 7); |
|||
|
|||
this.setData({ |
|||
showDateStart: false, |
|||
currentDateStart: this.formatDate(e.detail), |
|||
endMinDate: endMinDate.getTime(), |
|||
endMaxDate: endMaxDate.getTime(), |
|||
currentDateEnd: '' // 清空之前选择的结束时间
|
|||
}) |
|||
}, |
|||
oncancelEnd() { |
|||
this.setData({ |
|||
currentDateEnd: '', |
|||
showDateEnd: false |
|||
}) |
|||
}, |
|||
onconfirmEnd(e) { |
|||
this.setData({ |
|||
showDateEnd: false, |
|||
currentDateEnd: this.formatDate(e.detail) |
|||
}) |
|||
}, |
|||
handleDateEnd() { |
|||
this.setData({ |
|||
showDateEnd: true |
|||
}) |
|||
}, |
|||
|
|||
// 文件上传相关方法
|
|||
uploadFile() { |
|||
// 触发文件选择
|
|||
wx.chooseImage({ |
|||
count: 5 - this.data.fileList.length, |
|||
sizeType: ['compressed'], |
|||
sourceType: ['album', 'camera'], |
|||
success: (res) => { |
|||
const tempFiles = res.tempFilePaths.map((path, index) => ({ |
|||
url: path, |
|||
name: `证明材料${this.data.fileList.length + index + 1}.jpg`, |
|||
isImage: true |
|||
})); |
|||
this.setData({ |
|||
fileList: [...this.data.fileList, ...tempFiles] |
|||
}); |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
afterRead(event) { |
|||
const { file } = event.detail; |
|||
const _this = this |
|||
wx.uploadFile({ |
|||
url: `${config.BASEURL()}/common/upload`, // 仅为示例，非真实的接口地址
|
|||
filePath: file.url, |
|||
name: 'file', |
|||
header: { |
|||
"Content-type": "multipart/form-data", |
|||
'Authorization': wx.getStorageSync('token') |
|||
}, |
|||
success(res) { |
|||
const res1 = JSON.parse(res.data) |
|||
_this.setData({ |
|||
fileList: _this.data.fileList.concat([{ url: res1.url, name: `证明材料${_this.data.fileList.length + 1}.jpg` }]) |
|||
}); |
|||
}, |
|||
}); |
|||
// 这里可以添加上传到服务器的逻辑
|
|||
console.log('文件上传成功:', file); |
|||
|
|||
}, |
|||
|
|||
deleteFile(event) { |
|||
const { index } = event.detail; |
|||
const fileList = [...this.data.fileList]; |
|||
fileList.splice(index, 1); |
|||
this.setData({ fileList }); |
|||
}, |
|||
|
|||
// 提交申请
|
|||
submit() { |
|||
// 表单验证
|
|||
if (!this.data.reasonName) { |
|||
wx.showToast({ |
|||
title: '请选择外出原因', |
|||
icon: 'none' |
|||
}); |
|||
return; |
|||
} |
|||
if (!this.data.currentDateStart) { |
|||
wx.showToast({ |
|||
title: '请选择开始时间', |
|||
icon: 'none' |
|||
}); |
|||
return; |
|||
} |
|||
if (!this.data.currentDateEnd) { |
|||
wx.showToast({ |
|||
title: '请选择结束时间', |
|||
icon: 'none' |
|||
}); |
|||
return; |
|||
} |
|||
if (this.data.fileList.length === 0) { |
|||
wx.showToast({ |
|||
title: '请上传证明材料', |
|||
icon: 'none' |
|||
}); |
|||
return; |
|||
} |
|||
|
|||
this.setData({ submitting: true }); |
|||
|
|||
// 模拟提交过程
|
|||
setTimeout(() => { |
|||
this.setData({ submitting: false }); |
|||
wx.showToast({ |
|||
title: '提交成功', |
|||
icon: 'success' |
|||
}); |
|||
// 这里可以添加实际的提交逻辑
|
|||
}, 2000); |
|||
}, |
|||
submit() { |
|||
if (!this.data.reasonName) { |
|||
wx.showToast({ |
|||
title: '请选择外出原因', |
|||
icon: 'none' |
|||
}); |
|||
return |
|||
} |
|||
if (!this.data.currentDateStart) { |
|||
wx.showToast({ |
|||
title: '请选择开始时间', |
|||
icon: 'none' |
|||
}); |
|||
return |
|||
} |
|||
if (!this.data.currentDateEnd) { |
|||
wx.showToast({ |
|||
title: '请选择结束时间', |
|||
icon: 'none' |
|||
}); |
|||
return |
|||
} |
|||
if (this.data.fileList.length === 0) { |
|||
wx.showToast({ |
|||
title: '请上传证明材料', |
|||
icon: 'none' |
|||
}); |
|||
return |
|||
} |
|||
let parms = { |
|||
reasonName: this.data.reasonName, |
|||
currentDateStart: this.data.currentDateStart, |
|||
currentDateEnd: this.data.currentDateEnd, |
|||
fileList: this.data.fileList |
|||
} |
|||
// goOutSubmit(parms).then(res => {
|
|||
// if (res.code === 200) {
|
|||
// wx.showToast({
|
|||
// title: '提交成功',
|
|||
// icon: 'success'
|
|||
// });
|
|||
// }
|
|||
// })
|
|||
}, |
|||
closeSuccessModal() { |
|||
this.setData({ |
|||
showSuccessModal: false |
|||
}) |
|||
}, |
|||
}) |
|||
@ -0,0 +1,13 @@ |
|||
{ |
|||
"usingComponents": { |
|||
"van-cell": "@vant/weapp/cell/index", |
|||
"van-cell-group": "@vant/weapp/cell-group/index", |
|||
"van-popup": "@vant/weapp/popup/index", |
|||
"van-picker": "@vant/weapp/picker/index", |
|||
"van-uploader": "@vant/weapp/uploader/index", |
|||
"van-field": "@vant/weapp/field/index", |
|||
"van-calendar": "@vant/weapp/calendar/index", |
|||
"van-button": "@vant/weapp/button/index" |
|||
}, |
|||
"navigationBarTitleText": "外出申请" |
|||
} |
|||
@ -0,0 +1,64 @@ |
|||
<!-- subpages/goOut/goOut/goOut.wxml --> |
|||
<view class="header"> |
|||
<view class="tip"> |
|||
<view class="flex flex-center-i"> |
|||
<image src="../../../images/icon/warning.png" mode="" style="width: 44rpx;height: 52rpx;" /> |
|||
温馨提示： |
|||
</view> |
|||
<text> |
|||
由于本人及其直系亲属因病因伤住院，就业创业人员因公出差、培训，就业人员法定节假日期间单位假期多于法定日期(比如春节)等特殊情况，导致租赁期限内房间空置时间连续超过7天，可提交申请。毕业生入住期间，每人最多可申请2次，单次不超过7天。 |
|||
证明材料： |
|||
1、本人及其直系亲届因病因伤住院:须提供诊断记录住院证明等相关材料。 |
|||
2、就业创业人员因公出差/培训:须提供单位外出通知(微信截图、单位盖章等均可)、往返预定车票、机票等材料。 |
|||
3、就业人员法定节假日期间单位假期多于法定日期:须提供单位节假日放假通知。 |
|||
</text> |
|||
</view> |
|||
</view> |
|||
<view class="card" style="padding: 0;"> |
|||
<view class="info"> |
|||
<van-cell-group inset> |
|||
<van-field r label="选择外出原因" required model:value="{{reasonName}}" right-icon="arrow" input-align="right" arrow-direction="right" placeholder="请选择" required readonly="{{true}}" bind:click-icon="handleReason" bind:click-input="handleReason" icon="arrow" /> |
|||
<van-popup show="{{ showReason }}" round position="bottom"> |
|||
<van-picker columns="{{ options }}" bind:confirm="onconfirm" bind:cancel="oncancel" show-toolbar /> |
|||
</van-popup> |
|||
<van-field label="外出开始时间" required model:value="{{currentDateStart}}" icon="arrow" input-align="right" required bind:click-input="handleDateStart" bind:click-icon="handleDateStart" bind:click-input="handleDateStart" readonly="{{true}}" border placeholder="请选择" /> |
|||
<van-calendar show="{{showDateStart}}" bind:close="oncancelStart" bind:confirm="onconfirmStart" /> |
|||
<van-field label="外出结束时间" required model:value="{{currentDateEnd}}" placeholder="请选择" required readonly="{{true}}" bind:click-input="handleDateEnd" bind:click-icon="handleDateEnd" bind:click-input="handleDateEnd" input-align="right" icon="arrow" /> |
|||
<van-calendar show="{{showDateEnd}}" bind:close="oncancelEnd" bind:confirm="onconfirmEnd" min-date="{{endMinDate}}" max-date="{{endMaxDate}}" /> |
|||
</van-cell-group> |
|||
</view> |
|||
</view> |
|||
<view class="upload-card"> |
|||
<view class="upload-header"> |
|||
<view class="upload-title"> |
|||
<text class="required">*</text> |
|||
<text>请上传证明材料</text> |
|||
</view> |
|||
<view class="upload-tips">只能上传jpg、jpeg文件，文件最多5个且不超过8M</view> |
|||
</view> |
|||
<view class="upload-content"> |
|||
<van-uploader file-list="{{ fileList }}" bind:after-read="afterRead" bind:delete="deleteFile" max-count="5" accept="image" size-type="compressed" bind:click-upload="uploadFile"> |
|||
<view class="upload-btn"> |
|||
<text class="upload-text">点击上传</text> |
|||
</view> |
|||
</van-uploader> |
|||
</view> |
|||
</view> |
|||
<view class="submit-section" bind:click="submit">提交申请</view> |
|||
<van-popup show="{{showSuccessModal}}" round> |
|||
<view class="success-modal"> |
|||
<view class="success-icon"> |
|||
<image src="../../../images/success.png" style="width: 150rpx;height: 130rpx;margin-bottom: 24rpx;" /> |
|||
<view class="success-title">提交成功</view> |
|||
</view> |
|||
<view class="success-message"> |
|||
我们会尽快对您提交的证明进行审核，请您耐心等待。 |
|||
</view> |
|||
<view class="success-btn"> |
|||
<van-button slot="button" block type="primary" round color="linear-gradient(to right, #0DC6C6 , #46DBD5)" bind:tap="closeSuccessModal"> |
|||
我知道了 |
|||
</van-button> |
|||
</view> |
|||
</view> |
|||
</van-popup> |
|||
|
|||
@ -0,0 +1,155 @@ |
|||
/* subpages/goOut/goOut/goOut.wxss */ |
|||
.header { |
|||
width: 100%; |
|||
background-image: linear-gradient(to right, #befeed 0%, #d5eefe 50%, #ebe9fb 100%); |
|||
background-size: 100% 280rpx; |
|||
background-repeat: no-repeat; |
|||
background-position: top; |
|||
background-color: #fff; |
|||
padding:28rpx 18rpx ; |
|||
box-sizing: border-box; |
|||
} |
|||
.tip{ |
|||
background-color: #fffbe6; |
|||
border-radius: 12rpx; |
|||
font-size: 28rpx; |
|||
color: #595959; |
|||
padding:28rpx 24rpx ; |
|||
} |
|||
|
|||
/* 卡片样式 */ |
|||
.card { |
|||
margin: 20rpx 24rpx; |
|||
background: #fff; |
|||
border-radius: 16rpx; |
|||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08); |
|||
overflow: hidden; |
|||
} |
|||
|
|||
/* 上传证明材料样式 */ |
|||
.upload-card { |
|||
margin: 20rpx 24rpx; |
|||
background: #fff; |
|||
border-radius: 16rpx; |
|||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08); |
|||
padding: 32rpx 24rpx; |
|||
} |
|||
|
|||
.upload-header { |
|||
margin-bottom: 24rpx; |
|||
} |
|||
|
|||
.upload-title { |
|||
display: flex; |
|||
align-items: center; |
|||
font-size: 32rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
margin-bottom: 12rpx; |
|||
} |
|||
|
|||
.required { |
|||
color: #ff4d4f; |
|||
margin-right: 8rpx; |
|||
font-size: 28rpx; |
|||
} |
|||
|
|||
.upload-tips { |
|||
font-size: 24rpx; |
|||
color: #999; |
|||
line-height: 1.5; |
|||
} |
|||
|
|||
.upload-content { |
|||
margin-top: 20rpx; |
|||
} |
|||
|
|||
.upload-btn { |
|||
border-color: #1890ff; |
|||
background: #1890ff; |
|||
color: #ffffff; |
|||
font-size: 28rpx; |
|||
text-align: center; |
|||
line-height: 70rpx; |
|||
border-radius: 10rpx; |
|||
height: 70rpx; |
|||
width: 200rpx; |
|||
} |
|||
|
|||
|
|||
.upload-icon { |
|||
width: 60rpx; |
|||
height: 60rpx; |
|||
margin-bottom: 16rpx; |
|||
} |
|||
|
|||
.upload-icon image { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
|
|||
/* 提交按钮样式 */ |
|||
.submit-section { |
|||
margin: 0 auto; |
|||
width: 55%; |
|||
height: 70rpx; |
|||
line-height: 70rpx; |
|||
border-radius: 600rpx; |
|||
background: linear-gradient(86.25deg, rgba(13, 198, 198, 1) 3.03%, rgba(19, 194, 194, 1) 3.03%, rgba(70, 219, 213, 1) 96.43%); |
|||
color: rgba(255, 255, 255, 1); |
|||
font-size: 34rpx; |
|||
text-align: center; |
|||
} |
|||
|
|||
.submit-btn { |
|||
height: 88rpx !important; |
|||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important; |
|||
border: none !important; |
|||
font-size: 32rpx !important; |
|||
font-weight: 600 !important; |
|||
box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.3) !important; |
|||
transition: all 0.3s ease !important; |
|||
} |
|||
|
|||
.submit-btn:active { |
|||
transform: translateY(2rpx); |
|||
box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.4) !important; |
|||
} |
|||
|
|||
.submit-btn::after { |
|||
border: none !important; |
|||
} |
|||
.success-modal{ |
|||
width: 600rpx; |
|||
height: 514rpx; |
|||
background-image: linear-gradient(to right, #befeed 0%, #d5eefe 50%, #ebe9fb 100%); |
|||
background-size: 100% 280rpx; |
|||
background-repeat: no-repeat; |
|||
border-radius: 16rpx; |
|||
padding: 24rpx; |
|||
box-sizing: border-box; |
|||
} |
|||
.success-title{ |
|||
font-size: 32rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
margin-bottom: 12rpx; |
|||
} |
|||
.success-message{ |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
margin-bottom: 12rpx; |
|||
} |
|||
.success-btn{ |
|||
width: 80%; |
|||
margin: 0 auto; |
|||
margin-top: 24rpx; |
|||
} |
|||
.success-icon{ |
|||
margin: 24rpx auto 50rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
@ -0,0 +1,66 @@ |
|||
// subpages/goOut/mygoOut/mygoOut.js
|
|||
Page({ |
|||
|
|||
/** |
|||
* 页面的初始数据 |
|||
*/ |
|||
data: { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面加载 |
|||
*/ |
|||
onLoad(options) { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面初次渲染完成 |
|||
*/ |
|||
onReady() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面显示 |
|||
*/ |
|||
onShow() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面隐藏 |
|||
*/ |
|||
onHide() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面卸载 |
|||
*/ |
|||
onUnload() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 页面相关事件处理函数--监听用户下拉动作 |
|||
*/ |
|||
onPullDownRefresh() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 页面上拉触底事件的处理函数 |
|||
*/ |
|||
onReachBottom() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 用户点击右上角分享 |
|||
*/ |
|||
onShareAppMessage() { |
|||
|
|||
} |
|||
}) |
|||
@ -0,0 +1,3 @@ |
|||
{ |
|||
"usingComponents": {} |
|||
} |
|||
@ -0,0 +1,2 @@ |
|||
<!--subpages/goOut/mygoOut/mygoOut.wxml--> |
|||
<text>subpages/goOut/mygoOut/mygoOut.wxml</text> |
|||
@ -0,0 +1 @@ |
|||
/* subpages/goOut/mygoOut/mygoOut.wxss */ |
|||
Loading…
Reference in new issue