367 lines
7.8 KiB
Vue
367 lines
7.8 KiB
Vue
<template>
|
||
<view class="page padding">
|
||
<view class="text-gray text-center" v-if="!hasData">暂无证件照记录</view>
|
||
<button class="cuIcon-add bg-blue round margin-top-xl" @click="showAddPopup = true">新增</button>
|
||
|
||
<!-- 新增证件照弹窗 -->
|
||
<u-popup :show="showAddPopup" mode="center" round="20" @close="showAddPopup = false">
|
||
<view class="popup-content">
|
||
<view class="popup-header">
|
||
<view class="popup-title text-bold">新增证照</view>
|
||
<view class="popup-close" @click="showAddPopup = false">×</view>
|
||
</view>
|
||
|
||
<view class="popup-body">
|
||
<!-- 部门 -->
|
||
<view class="form-item">
|
||
<view class="form-label">部门<text class="text-red">*</text></view>
|
||
<view class="form-input form-select" @click="showDeptPopup = true">
|
||
<text :class="formData.dept ? '' : 'text-gray'">
|
||
{{ formData.dept || '请选择部门' }}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 证件类型 -->
|
||
<view class="form-item">
|
||
<view class="form-label">证件类型</view>
|
||
<input class="form-input" v-model="formData.idType" placeholder="请输入证件类型" />
|
||
</view>
|
||
|
||
<!-- 证件编号 -->
|
||
<view class="form-item">
|
||
<view class="form-label">证件编号</view>
|
||
<input class="form-input" v-model="formData.number" placeholder="请输入证件编号" />
|
||
</view>
|
||
<!-- 开始日期 -->
|
||
<view class="form-item">
|
||
<view class="form-label">开始日期</view>
|
||
<view class="form-input form-select" @click="showDatePicker = true">
|
||
<text :class="formData.expireDate ? '' : 'text-gray'">
|
||
{{ formData.expireDate || '请选择开始时间' }}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
<!-- 结束日期 -->
|
||
<view class="form-item">
|
||
<view class="form-label">结束日期</view>
|
||
<view class="form-input form-select" @click="showDatePicker = true">
|
||
<text :class="formData.expireDate ? '' : 'text-gray'">
|
||
{{ formData.expireDate || '请选择结束时间' }}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 上传证件照 -->
|
||
<view class="form-item">
|
||
<view class="form-label">封面图片</view>
|
||
<view class="upload-box" @click="chooseImage">
|
||
<view class="upload-add" v-if="!formData.image">
|
||
<text class="upload-icon">+</text>
|
||
<text class="upload-text">上传照片</text>
|
||
</view>
|
||
<image v-else :src="formData.image" mode="aspectFill" class="upload-img"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="popup-footer">
|
||
<button class="btn-cancel" @click="showAddPopup = false">取消</button>
|
||
<button class="btn-confirm bg-blue" @click="handleSubmit">确定</button>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
|
||
<!-- 日期选择器 -->
|
||
<u-datetime-picker
|
||
:show="showDatePicker"
|
||
mode="date"
|
||
@confirm="onDateConfirm"
|
||
@cancel="showDatePicker = false"
|
||
></u-datetime-picker>
|
||
|
||
<!-- 选择部门弹窗 -->
|
||
<u-popup :show="showDeptPopup" mode="center" round="20" @close="showDeptPopup = false">
|
||
<view class="dept-popup">
|
||
<view class="popup-header">
|
||
<view class="popup-title text-bold">选择部门</view>
|
||
<view class="popup-close" @click="showDeptPopup = false">×</view>
|
||
</view>
|
||
|
||
<view class="dept-list">
|
||
<view
|
||
class="dept-item"
|
||
v-for="(item, index) in deptList"
|
||
:key="index"
|
||
@click="selectedDept = item"
|
||
>
|
||
<view class="dept-checkbox" :class="{ 'dept-checkbox-active': selectedDept === item }">
|
||
<text v-if="selectedDept === item">✓</text>
|
||
</view>
|
||
<text class="dept-name">{{ item }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<button class="btn-dept-confirm bg-blue" @click="confirmDept">确定</button>
|
||
</view>
|
||
</u-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, reactive } from 'vue';
|
||
|
||
const hasData = ref(false);
|
||
const showAddPopup = ref(false);
|
||
const showDatePicker = ref(false);
|
||
const showDeptPopup = ref(false);
|
||
|
||
// 部门列表
|
||
const deptList = ref([
|
||
'湘西自治州和谐网络科技有限公司',
|
||
'湘西自治州和谐云大数据科技有限公司',
|
||
'湘西网络有限公司'
|
||
]);
|
||
const selectedDept = ref('');
|
||
|
||
const formData = reactive({
|
||
dept: '',
|
||
type: '',
|
||
idType: '',
|
||
number: '',
|
||
startDate: '',
|
||
expireDate: '',
|
||
image: ''
|
||
});
|
||
|
||
// 确认选择部门
|
||
const confirmDept = () => {
|
||
if (selectedDept.value) {
|
||
formData.dept = selectedDept.value;
|
||
}
|
||
showDeptPopup.value = false;
|
||
};
|
||
|
||
// 选择图片
|
||
const chooseImage = () => {
|
||
uni.chooseImage({
|
||
count: 1,
|
||
sizeType: ['compressed'],
|
||
sourceType: ['album', 'camera'],
|
||
success: (res) => {
|
||
formData.image = res.tempFilePaths[0];
|
||
}
|
||
});
|
||
};
|
||
|
||
// 日期选择确认
|
||
const onDateConfirm = (e) => {
|
||
const date = new Date(e.value);
|
||
const year = date.getFullYear();
|
||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||
const day = String(date.getDate()).padStart(2, '0');
|
||
formData.expireDate = `${year}-${month}-${day}`;
|
||
showDatePicker.value = false;
|
||
};
|
||
|
||
// 提交表单
|
||
const handleSubmit = () => {
|
||
if (!formData.dept) {
|
||
uni.showToast({ title: '请选择部门', icon: 'none' });
|
||
return;
|
||
}
|
||
|
||
console.log('提交数据：', formData);
|
||
uni.showToast({ title: '新增成功', icon: 'success' });
|
||
showAddPopup.value = false;
|
||
|
||
// 重置表单
|
||
formData.dept = '';
|
||
formData.type = '';
|
||
formData.number = '';
|
||
formData.startDate = '';
|
||
formData.expireDate = '';
|
||
formData.image = '';
|
||
selectedDept.value = '';
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.page {
|
||
min-height: 100vh;
|
||
background: #EBF2FC;
|
||
}
|
||
|
||
// 弹出框样式
|
||
.popup-content {
|
||
width: 600rpx;
|
||
background: #fff;
|
||
border-radius: 20rpx;
|
||
padding: 30rpx;
|
||
}
|
||
|
||
.popup-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.popup-title {
|
||
font-size: 34rpx;
|
||
color: #333;
|
||
}
|
||
|
||
.popup-close {
|
||
font-size: 48rpx;
|
||
color: #999;
|
||
line-height: 1;
|
||
}
|
||
|
||
.popup-body {
|
||
max-height: 700rpx;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.form-item {
|
||
margin-bottom: 24rpx;
|
||
}
|
||
|
||
.form-label {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
|
||
.form-input {
|
||
width: 100%;
|
||
height: 80rpx;
|
||
border: 2rpx solid #E5E5E5;
|
||
border-radius: 12rpx;
|
||
padding: 0 24rpx;
|
||
font-size: 28rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.form-select {
|
||
display: flex;
|
||
align-items: center;
|
||
line-height: 80rpx;
|
||
}
|
||
|
||
.upload-box {
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
border: 2rpx dashed #ccc;
|
||
border-radius: 12rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.upload-add {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.upload-icon {
|
||
font-size: 60rpx;
|
||
color: #999;
|
||
}
|
||
|
||
.upload-text {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
margin-top: 8rpx;
|
||
}
|
||
|
||
.upload-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 12rpx;
|
||
}
|
||
|
||
.popup-footer {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 30rpx;
|
||
margin-top: 40rpx;
|
||
}
|
||
|
||
.btn-cancel {
|
||
flex: 1;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
border: 2rpx solid #E5E5E5;
|
||
border-radius: 40rpx;
|
||
background: #fff;
|
||
color: #333;
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.btn-confirm {
|
||
flex: 1;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
border-radius: 40rpx;
|
||
color: #fff;
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
// 部门选择弹窗
|
||
.dept-popup {
|
||
width: 600rpx;
|
||
background: #fff;
|
||
border-radius: 20rpx;
|
||
padding: 30rpx;
|
||
}
|
||
|
||
.dept-list {
|
||
max-height: 400rpx;
|
||
overflow-y: auto;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.dept-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 24rpx;
|
||
border: 2rpx solid #E5E5E5;
|
||
border-radius: 12rpx;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.dept-checkbox {
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
border: 2rpx solid #ccc;
|
||
border-radius: 6rpx;
|
||
margin-right: 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.dept-checkbox-active {
|
||
background: #2667E9;
|
||
border-color: #2667E9;
|
||
color: #fff;
|
||
}
|
||
|
||
.dept-name {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
}
|
||
|
||
.btn-dept-confirm {
|
||
width: 100%;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
border-radius: 40rpx;
|
||
color: #fff;
|
||
font-size: 30rpx;
|
||
}
|
||
</style>
|