You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
392 lines
11 KiB
Vue
392 lines
11 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from "vue";
|
|
import closedIcon from "@/assets/svg/dialog/closed.svg";
|
|
import manIcon from "@/assets/home/man.png";
|
|
import womanIcon from "@/assets/home/woman.png";
|
|
import { reactive } from "vue";
|
|
import { saveUserParam } from "@/api/home";
|
|
import { message } from "@/utils/message";
|
|
import { usePermissionStoreHook } from "@/store/modules/permission";
|
|
|
|
defineOptions({
|
|
name: "LoginRemind"
|
|
});
|
|
const dataInfo = reactive({
|
|
age: undefined,
|
|
sex: undefined,
|
|
socialSecurityType: undefined,
|
|
offsiteSocialSecurityInfo: undefined,
|
|
residentLocation: "",
|
|
pensionPaymentPeriod: undefined
|
|
});
|
|
defineExpose({
|
|
async open() {
|
|
dialogVisible.value = true;
|
|
}
|
|
});
|
|
const closed = () => {
|
|
dialogVisible.value = false;
|
|
};
|
|
const dialogVisible = ref(false);
|
|
|
|
const changeValue = (key, val) => {
|
|
dataInfo[key] = val;
|
|
};
|
|
const save = async () => {
|
|
const list = [];
|
|
for (const key in dataInfo) {
|
|
if (dataInfo[key] !== undefined) {
|
|
list.push({
|
|
itemEn: key,
|
|
valueNum: dataInfo[key]
|
|
});
|
|
}
|
|
}
|
|
const res: any = await saveUserParam(list);
|
|
if (res.code === 200) {
|
|
sessionStorage.setItem("roleSetId", res.data);
|
|
usePermissionStoreHook().changeSexCode(dataInfo.sex);
|
|
message("设置成功", { type: "success" });
|
|
dialogVisible.value = false;
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<el-dialog
|
|
width="1000"
|
|
append-to-body
|
|
style="background-color: unset"
|
|
v-model="dialogVisible"
|
|
:show-close="false"
|
|
:before-close="closed"
|
|
custom-class="CharacterSet"
|
|
>
|
|
<div class="CharacterSet">
|
|
<div class="top">
|
|
<closedIcon @click="closed" style="cursor: pointer" />
|
|
</div>
|
|
<div class="title">人物定制</div>
|
|
<div class="gender">
|
|
<div @click="changeValue('sex', 0)" class="gender_item">
|
|
<img :src="manIcon" alt="" />
|
|
<span>男性</span>
|
|
<span
|
|
:class="[dataInfo.sex === 0 ? 'actived' : '']"
|
|
class="gender_item_select"
|
|
/>
|
|
</div>
|
|
<div @click="changeValue('sex', 1)" class="gender_item">
|
|
<img :src="womanIcon" alt="" />
|
|
<span>女性</span>
|
|
<span
|
|
:class="[dataInfo.sex === 1 ? 'actived' : '']"
|
|
class="gender_item_select"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="main">
|
|
<div class="main_item" style="margin-right: 56px">
|
|
<span class="label">户口所在地</span>
|
|
<el-select
|
|
size="large"
|
|
class="main_item_select"
|
|
v-model="dataInfo.residentLocation"
|
|
placeholder="请选择"
|
|
>
|
|
<el-option label="深圳户口" :value="0" />
|
|
<el-option label="港澳台和外籍人员" :value="1" />
|
|
<el-option label="广东省其他地区" :value="2" />
|
|
<el-option label="省外户口" :value="3" />
|
|
</el-select>
|
|
</div>
|
|
<div class="main_item">
|
|
<span class="label">异地社保转入情况</span>
|
|
<div class="select_list">
|
|
<div
|
|
@click="changeValue('offsiteSocialSecurityInfo', 0)"
|
|
:class="[
|
|
dataInfo.offsiteSocialSecurityInfo === 0
|
|
? 'selected'
|
|
: 'unselected'
|
|
]"
|
|
class="select_list_item"
|
|
>
|
|
<span>无异地社保</span>
|
|
<span class="select_item" />
|
|
</div>
|
|
<div
|
|
@click="changeValue('offsiteSocialSecurityInfo', 1)"
|
|
:class="[
|
|
dataInfo.offsiteSocialSecurityInfo === 1
|
|
? 'selected'
|
|
: 'unselected'
|
|
]"
|
|
class="select_list_item"
|
|
>
|
|
<span>已转入</span>
|
|
<span class="select_item" />
|
|
</div>
|
|
<div
|
|
@click="changeValue('offsiteSocialSecurityInfo', 2)"
|
|
:class="[
|
|
dataInfo.offsiteSocialSecurityInfo === 2
|
|
? 'selected'
|
|
: 'unselected'
|
|
]"
|
|
class="select_list_item"
|
|
>
|
|
<span>未转入</span>
|
|
<span class="select_item" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="main_item" style="margin-right: 56px">
|
|
<span class="label">年龄</span>
|
|
<div class="select_list">
|
|
<div
|
|
style="width: 180px"
|
|
@click="changeValue('age', 0)"
|
|
:class="[dataInfo.age === 0 ? 'selected' : 'unselected']"
|
|
class="select_list_item"
|
|
>
|
|
<span>年满60岁</span>
|
|
<span class="select_item" />
|
|
</div>
|
|
<div
|
|
@click="changeValue('age', 1)"
|
|
style="width: 180px"
|
|
:class="[dataInfo.age === 1 ? 'selected' : 'unselected']"
|
|
class="select_list_item"
|
|
>
|
|
<span>未满60岁</span>
|
|
<span class="select_item" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="main_item">
|
|
<span class="label">退休类型</span>
|
|
<div class="select_list">
|
|
<div
|
|
style="width: 180px"
|
|
@click="changeValue('socialSecurityType', 0)"
|
|
:class="[
|
|
dataInfo.socialSecurityType === 0 ? 'selected' : 'unselected'
|
|
]"
|
|
class="select_list_item"
|
|
>
|
|
<span>城乡居民</span>
|
|
<span class="select_item" />
|
|
</div>
|
|
<div
|
|
style="width: 180px"
|
|
@click="changeValue('socialSecurityType', 1)"
|
|
:class="[
|
|
dataInfo.socialSecurityType === 1 ? 'selected' : 'unselected'
|
|
]"
|
|
class="select_list_item"
|
|
>
|
|
<span>企业职工</span>
|
|
<span class="select_item" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="main_item" style="margin-right: 56px">
|
|
<span class="label">最后参保地</span>
|
|
<el-select
|
|
size="large"
|
|
class="main_item_select"
|
|
v-model="dataInfo.job"
|
|
placeholder="请选择"
|
|
>
|
|
<el-option label="图片" :value="0" />
|
|
<el-option label="视频" :value="1" />
|
|
<el-option label="音频" :value="2" />
|
|
</el-select>
|
|
</div> -->
|
|
<div class="main_item">
|
|
<span class="label">养老缴费年限是否满15年</span>
|
|
<div class="select_list">
|
|
<div
|
|
@click="changeValue('pensionPaymentPeriod', 0)"
|
|
style="width: 180px"
|
|
:class="[
|
|
dataInfo.pensionPaymentPeriod === 0
|
|
? 'selected'
|
|
: 'unselected'
|
|
]"
|
|
class="select_list_item"
|
|
>
|
|
<span>是</span>
|
|
<span class="select_item" />
|
|
</div>
|
|
<div
|
|
@click="changeValue('pensionPaymentPeriod', 1)"
|
|
style="width: 180px"
|
|
:class="[
|
|
dataInfo.pensionPaymentPeriod === 1
|
|
? 'selected'
|
|
: 'unselected'
|
|
]"
|
|
class="select_list_item"
|
|
>
|
|
<span>否</span>
|
|
<span class="select_item" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="footer_btn">
|
|
<div class="reset" @click="closed()">取消</div>
|
|
<div class="main_btn" @click="save()">保存</div>
|
|
</div>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
<style lang="scss">
|
|
.CharacterSet {
|
|
.el-dialog__header {
|
|
display: none;
|
|
}
|
|
.el-dialog__body {
|
|
padding: 0;
|
|
}
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
.CharacterSet {
|
|
background-color: transparent !important;
|
|
background-image: url("../../assets/home/dialog_bg.png");
|
|
height: 722px;
|
|
background-size: 100% 100%;
|
|
.top {
|
|
display: flex;
|
|
flex-direction: row-reverse;
|
|
padding: 100px 43px 0 0;
|
|
}
|
|
.title {
|
|
font-weight: bold;
|
|
font-size: 24px;
|
|
color: #08409f;
|
|
margin-left: 100px;
|
|
margin-bottom: 24px;
|
|
}
|
|
.gender {
|
|
display: flex;
|
|
margin-left: 100px;
|
|
.gender_item {
|
|
width: 178px;
|
|
height: 82px;
|
|
background: #f5f7fe;
|
|
border-radius: 10px 10px 10px 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 16px;
|
|
margin-right: 12px;
|
|
font-size: 14px;
|
|
color: #000000;
|
|
cursor: pointer;
|
|
img {
|
|
width: 50px;
|
|
height: 50px;
|
|
margin-right: 12px;
|
|
}
|
|
.gender_item_select {
|
|
width: 17px;
|
|
height: 17px;
|
|
border: 1px solid #d9d9d9;
|
|
border-radius: 50%; /* 将正方形元素变成圆形 */
|
|
margin-left: 30px;
|
|
}
|
|
.actived {
|
|
border: 4px solid #0052d9;
|
|
}
|
|
}
|
|
}
|
|
.main {
|
|
padding: 79px 100px 0 100px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
.main_item {
|
|
width: 372px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-bottom: 32px;
|
|
.label {
|
|
font-size: 16px;
|
|
color: #666666;
|
|
margin-bottom: 12px;
|
|
}
|
|
.main_item_select {
|
|
// margin-right: 56px;
|
|
}
|
|
.select_list {
|
|
display: flex;
|
|
.select_list_item {
|
|
cursor: pointer;
|
|
height: 40px;
|
|
background: #f5f7fe;
|
|
border-radius: 6px 6px 6px 6px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 8px 16px;
|
|
font-size: 16px;
|
|
color: #333333;
|
|
margin-right: 8px;
|
|
}
|
|
.selected .select_item {
|
|
width: 17px;
|
|
height: 17px;
|
|
border: 4px solid #0052d9;
|
|
border-radius: 50%; /* 将正方形元素变成圆形 */
|
|
margin-left: 4px;
|
|
}
|
|
.unselected .select_item {
|
|
width: 17px;
|
|
height: 17px;
|
|
border: 1px solid #d9d9d9;
|
|
border-radius: 50%; /* 将正方形元素变成圆形 */
|
|
margin-left: 4px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.footer_btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
.reset {
|
|
width: 188px;
|
|
height: 40px;
|
|
margin-right: 24px;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
line-height: 40px;
|
|
color: #4287ff;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
background: #fff;
|
|
border: 1px solid #0052d9;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.main_btn {
|
|
width: 188px;
|
|
height: 40px;
|
|
font-size: 16px;
|
|
line-height: 40px;
|
|
color: #fff;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
background: #0052d9;
|
|
border: 1px solid #4287ff;
|
|
border-radius: 6px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|