316 lines
9.5 KiB
Vue
316 lines
9.5 KiB
Vue
<template>
|
|
<AppLayout title="申请信息提交" :use-scroll-view="false" :show-bg-image="false">
|
|
<template #headerleft>
|
|
<view class="btnback">
|
|
<image src="@/static/icon/back.png" @click="navBack"></image>
|
|
</view>
|
|
</template>
|
|
<view class="app-container">
|
|
<view class="personal-info">
|
|
<view class="personal-info-title">个人基本信息</view>
|
|
<view class="personal-info-list">
|
|
<view class="personal-info-list-l">
|
|
<span>*</span>
|
|
姓名
|
|
</view>
|
|
<view class="personal-info-list-r">
|
|
<input :value="userInfo.name" class="uni-input" placeholder="请输入你的姓名" />
|
|
</view>
|
|
</view>
|
|
|
|
<view class="personal-info-list">
|
|
<view class="personal-info-list-l">
|
|
<span>*</span>
|
|
联系方式
|
|
</view>
|
|
<view class="personal-info-list-r">
|
|
<input :value="userInfo.phone" class="uni-input" placeholder="请输入联系方式" />
|
|
</view>
|
|
</view>
|
|
|
|
<view class="personal-info-list">
|
|
<view class="personal-info-list-l">
|
|
<span>*</span>
|
|
身份证号
|
|
</view>
|
|
<view class="personal-info-list-r">
|
|
<input :value="userInfo.idNumber" class="uni-input" placeholder="请输入身份证号" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="personal-info">
|
|
<view class="personal-info-title">工作单位相关信息</view>
|
|
<view class="personal-info-list">
|
|
<view class="personal-info-list-l">工作单位名称</view>
|
|
<view class="personal-info-list-r">
|
|
<input class="uni-input" placeholder="请输入工作单位名称" />
|
|
</view>
|
|
</view>
|
|
<view class="personal-info-list">
|
|
<view class="personal-info-list-l">工作单位地址</view>
|
|
<view class="personal-info-list-r">
|
|
<input class="uni-input" placeholder="请输入工作单位地址" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="personal-info">
|
|
<view class="personal-info-title">劳动关系存续期间</view>
|
|
<view class="personal-info-list">
|
|
<view class="personal-info-list-l">开始时间</view>
|
|
<view class="personal-info-list-r" @click="changestartTime">
|
|
<!-- <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
|
|
<view class="uni-input">{{date}}</view>
|
|
</picker> -->
|
|
<input class="uni-input" :value="startDate" placeholder="开始时间" />
|
|
</view>
|
|
</view>
|
|
<view class="personal-info-list">
|
|
<view class="personal-info-list-l">结束时间</view>
|
|
<view class="personal-info-list-r" @click="changeendTime">
|
|
<input class="uni-input" :value="endDate" placeholder="结束时间" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="personal-info">
|
|
<view class="personal-info-title">侵权情况描述</view>
|
|
<view class="personal-info-list">
|
|
<view class="personal-info-list-l">描述内容</view>
|
|
<view class="personal-info-list-r">
|
|
<textarea placeholder="请输入描述内容" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="personal-info">
|
|
<view class="personal-info-title" @click="open">证据材料上传</view>
|
|
</view>
|
|
<button class="tijiao tijiao-pos" @click="tijiao1">提交申请</button>
|
|
<uni-popup ref="popup" type="bottom">
|
|
<view class="popup-container">
|
|
<view class="popup-container-title"><h3>证据材料上传</h3></view>
|
|
<view class="popup-container-list">
|
|
<view class="popup-container-list-title">劳动合同</view>
|
|
<view style="padding: 10rpx">
|
|
<uni-file-picker file-mediatype="all">
|
|
<button class="button" size="mini">选择文件</button>
|
|
</uni-file-picker>
|
|
</view>
|
|
</view>
|
|
<view class="popup-container-list">
|
|
<view>工资条</view>
|
|
<view style="padding: 10rpx">
|
|
<uni-file-picker file-mediatype="all">
|
|
<button class="button1" size="mini">选择文件</button>
|
|
</uni-file-picker>
|
|
</view>
|
|
</view>
|
|
<view class="popup-container-list">
|
|
<view>考勤记录</view>
|
|
<view style="padding: 10rpx">
|
|
<uni-file-picker file-mediatype="all">
|
|
<button class="button2" size="mini">选择文件</button>
|
|
</uni-file-picker>
|
|
</view>
|
|
</view>
|
|
<view class="popup-container-list">
|
|
<view>沟通记录截图</view>
|
|
<view style="padding: 10rpx">
|
|
<uni-file-picker file-mediatype="all">
|
|
<button class="button3" size="mini">选择文件</button>
|
|
</uni-file-picker>
|
|
</view>
|
|
</view>
|
|
<view style="padding-top: 20rpx">
|
|
<button class="tijiao" @click="tijiao">提交材料</button>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
<DatePicker ref="datePicker" />
|
|
</view>
|
|
</AppLayout>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive, inject, computed, watch, ref, onMounted } from 'vue';
|
|
import { onLoad, onShow } from '@dcloudio/uni-app';
|
|
const { $api, debounce, throttle, navBack, safeReLaunch } = inject('globalFunction');
|
|
import { storeToRefs } from 'pinia';
|
|
import useUserStore from '@/stores/useUserStore';
|
|
import DatePicker from '@/components/DatePicker/DatePicker.vue';
|
|
import { navTo } from '@/common/globalFunction';
|
|
|
|
const { userInfo } = storeToRefs(useUserStore());
|
|
|
|
// 获取时间选择器组件的引用
|
|
const datePicker = ref();
|
|
const popup = ref();
|
|
|
|
const active = ref(1);
|
|
const startDate = ref(null);
|
|
const endDate = ref(null);
|
|
|
|
// 选择开始时间
|
|
const changestartTime = () => {
|
|
datePicker.value.open({
|
|
title: '选择开始时间',
|
|
success: (selectedDate) => {
|
|
startDate.value = selectedDate;
|
|
},
|
|
});
|
|
};
|
|
// 选择结束时间
|
|
const changeendTime = () => {
|
|
datePicker.value.open({
|
|
title: '选择结束时间',
|
|
success: (selectedDate) => {
|
|
endDate.value = selectedDate;
|
|
if (startDate.value && new Date(startDate.value) > new Date(selectedDate)) {
|
|
endDate.value = '';
|
|
$api.msg('结束时间不能小于开始时间!');
|
|
}
|
|
},
|
|
});
|
|
};
|
|
|
|
const open = () => {
|
|
popup.value.open('bottom');
|
|
};
|
|
|
|
const tijiao = () => {
|
|
popup.value.close();
|
|
};
|
|
|
|
onMounted(() => {});
|
|
|
|
const tijiao1 = () => {
|
|
safeReLaunch('/pages/index/index');
|
|
};
|
|
</script>
|
|
|
|
<style lang="stylus" scoped>
|
|
.btnback{
|
|
width: 64rpx;
|
|
height: 64rpx;
|
|
}
|
|
image {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
.app-container{
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #EEE;
|
|
display: flex;
|
|
padding-top: 10rpx;
|
|
flex-direction: column;
|
|
|
|
.personal-info {
|
|
width: 100%;
|
|
background: #fff;
|
|
padding: 20rpx;
|
|
margin-bottom: 10rpx;
|
|
|
|
.personal-info-title {
|
|
width: 100%;
|
|
// padding: 10rpx 0;
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
|
|
}
|
|
|
|
.personal-info-list {
|
|
width: 100%;
|
|
display: flex;
|
|
padding: 10rpx 0;
|
|
border-bottom: 1px solid #EEE;
|
|
|
|
.personal-info-list-l {
|
|
width: 200rpx;
|
|
color: #B0B0B0;
|
|
font-weight: bolder !important;
|
|
padding-right: 20rpx;
|
|
|
|
span {
|
|
color: red;
|
|
}
|
|
}
|
|
|
|
.personal-info-list-r {
|
|
flex: 1;
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
.steps {
|
|
height: 200rpx;
|
|
}
|
|
|
|
.popup-container {
|
|
height: 800rpx;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: auto;
|
|
background: #fff;
|
|
|
|
.popup-container-title {
|
|
width: 100%;
|
|
text-align: center;
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
color: #B0B0B0;
|
|
font-weight: bolder !important;
|
|
}
|
|
}
|
|
|
|
.popup-container-list {
|
|
padding: 0 20rpx;
|
|
padding-top: 20rpx;
|
|
border-bottom: 1px solid #EEE;
|
|
}
|
|
|
|
|
|
.popup-container-list-title {
|
|
font-size: 28rpx;
|
|
font-weight: blod;
|
|
}
|
|
|
|
.button {
|
|
border: none !important;
|
|
background: #EEF2FF;
|
|
color: #4338CA;
|
|
}
|
|
|
|
.button1 {
|
|
border: none !important;
|
|
background: #F0FDF4;
|
|
color: #288B4C;
|
|
}
|
|
|
|
.button2 {
|
|
border: none !important;
|
|
background: #FEFCE8;
|
|
color: #A76C17;
|
|
}
|
|
|
|
.button3 {
|
|
border: none !important;
|
|
background: #FEF2F2;
|
|
color: #C23B3B;
|
|
}
|
|
.tijiao {
|
|
width: 80%;
|
|
background: #58BE6B;
|
|
color: #fff;
|
|
}
|
|
|
|
.tijiao-pos {
|
|
position: absolute;
|
|
bottom: 100rpx;
|
|
left: 10%;
|
|
}
|
|
</style>
|