first commit
This commit is contained in:
皮
366
pages/Idphotomanagement/Idphotomanagement.vue
Normal file
366
pages/Idphotomanagement/Idphotomanagement.vue
Normal file
@@ -0,0 +1,366 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user