flat: css
This commit is contained in:
Apcallover
@@ -1,142 +1,155 @@
|
||||
<template>
|
||||
<AppLayout title="申请信息提交" :use-scroll-view="false" :show-bg-image="false">
|
||||
<template #headerleft >
|
||||
<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="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" />
|
||||
<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 { 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';
|
||||
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 popup = ref();
|
||||
|
||||
const active = ref(1);
|
||||
const startDate = ref(null);
|
||||
const endDate = ref(null);
|
||||
|
||||
// 选择开始时间
|
||||
const changestartTime = () => {
|
||||
@@ -149,33 +162,31 @@ const changestartTime = () => {
|
||||
};
|
||||
// 选择结束时间
|
||||
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('结束时间不能小于开始时间!');
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
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 open = () => {
|
||||
popup.value.open('bottom');
|
||||
};
|
||||
|
||||
const tijiao = () => {
|
||||
popup.value.close()
|
||||
}
|
||||
popup.value.close();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
});
|
||||
onMounted(() => {});
|
||||
|
||||
const tijiao1 = () => {
|
||||
safeReLaunch('/pages/index/index')
|
||||
}
|
||||
|
||||
safeReLaunch('/pages/index/index');
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@@ -194,42 +205,42 @@ image {
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -244,7 +255,7 @@ image {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
background: #fff;
|
||||
|
||||
|
||||
.popup-container-title {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
||||
Reference in New Issue
Block a user