Retired/pages/mine/edit-info.vue

758 lines
23 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<!-- 我的/设置/修改资料 -->
<view class="edit-info">
<view style="padding-bottom: 200rpx;">
<u-cell-group :border='false'>
<!-- @click="handleName" -->
<u-cell title="姓名" size="large" :border='false' :titleStyle="{fontSize:'32rpx',color:'#9CA3AF'}">
<view slot="title">
<text style="color: #f56c6c;margin-right: 10rpx;">*</text>
<text style="font-size: 16px; color: #9CA3AF;">姓名</text>
</view>
<view class="input-val" style="width: 400rpx;" slot="value">
<input type="text" v-model="userInfo.name" />
</view>
<u-icon slot="right-icon" name="edit-pen" size="26" color="#9CA3AF"></u-icon>
</u-cell>
<!-- @click="handleIdcard" -->
<u-cell title="身份证号" size="large" :border='false' :titleStyle="{fontSize:'32rpx',color:'#9CA3AF'}">
<view slot="title">
<text style="color: #f56c6c;margin-right: 10rpx;">*</text>
<text style="font-size: 16px; color: #9CA3AF;">身份证号</text>
</view>
<view class="input-val" style="width: 350rpx;" slot="value">
<input type="text" v-model="userInfo.idcard" />
</view>
<u-icon slot="right-icon" name="edit-pen" size="26" color="#9CA3AF"></u-icon>
</u-cell>
<!-- @click="handleMobile" -->
<u-cell title="手机号" size="large" :border='false' :titleStyle="{fontSize:'32rpx',color:'#9CA3AF'}">
<view slot="title">
<text style="color: #f56c6c;margin-right: 10rpx;">*</text>
<text style="font-size: 16px; color: #9CA3AF;">手机号</text>
</view>
<view class="input-val" style="width: 350rpx;" slot="value">
<input type="number" v-model="userInfo.contact_mobile" />
</view>
<u-icon slot="right-icon" name="edit-pen" size="26" color="#9CA3AF"></u-icon>
</u-cell>
<u-cell title="性别" size="large" :border='false' :titleStyle="{fontSize:'32rpx',color:'#9CA3AF'}"
@click="handleSex">
<view slot="title">
<text style="color: #f56c6c;margin-right: 10rpx;">*</text>
<text style="font-size: 16px; color: #9CA3AF;">性别</text>
</view>
<view class="input-val" style="width: 350rpx;" slot="value">
{{userInfo.sex?sexList[userInfo.sex-1]:''}}
</view>
<u-icon slot="right-icon" name="edit-pen" size="26" color="#9CA3AF"></u-icon>
</u-cell>
<u-cell @click="handleBirth" title="生日" size="large" :border='false'
:titleStyle="{fontSize:'32rpx',color:'#9CA3AF'}">
<view slot="title">
<text style="color: #f56c6c;margin-right: 10rpx;">*</text>
<text style="font-size: 16px; color: #9CA3AF;">生日</text>
</view>
<view class="input-val" style="width: 350rpx;" slot="value">
{{userInfo.birthday}}
</view>
<u-icon slot="right-icon" name="edit-pen" size="26" color="#9CA3AF"></u-icon>
</u-cell>
<u-cell title="学历" size="large" :border='false' :titleStyle="{fontSize:'32rpx',color:'#9CA3AF'}"
@click="handleEmotion">
<view slot="title">
<text style="color: #f56c6c;margin-right: 10rpx;">*</text>
<text style="font-size: 16px; color: #9CA3AF;">学历</text>
</view>
<view class="input-val" style="width: 350rpx;" slot="value">
{{userInfo.degree?educationList[userInfo.degree-1]:''}}
</view>
<u-icon slot="right-icon" name="edit-pen" size="26" color="#9CA3AF"></u-icon>
</u-cell>
<u-cell title="政治面貌" size="large" :border='false' :titleStyle="{fontSize:'32rpx',color:'#9CA3AF'}"
@click="handleJob">
<view slot="title">
<text style="color: #f56c6c;margin-right: 10rpx;">*</text>
<text style="font-size: 16px; color: #9CA3AF;">政治面貌</text>
</view>
<view class="input-val" style="width: 350rpx;" slot="value">
{{userInfo.political?politicalList[userInfo.political-1]:''}}
</view>
<u-icon slot="right-icon" name="edit-pen" size="26" color="#9CA3AF"></u-icon>
</u-cell>
<u-cell title="安置地" size="large" :border='false' :titleStyle="{fontSize:'32rpx',color:'#9CA3AF'}"
@click="showCity">
<view slot="title">
<text style="color: #f56c6c;margin-right: 10rpx;">*</text>
<text style="font-size: 16px; color: #9CA3AF;">安置地</text>
</view>
<view class="input-val" style="width: 450rpx;" slot="value">
{{userInfo.to_province_name}}{{userInfo.to_city_name}}{{userInfo.to_area_name}}
</view>
<u-icon slot="right-icon" name="edit-pen" size="26" color="#9CA3AF"></u-icon>
</u-cell>
<u-cell title="现居住地" size="large" :border='false' :titleStyle="{fontSize:'32rpx',color:'#9CA3AF'}"
@click="showReside">
<view slot="title">
<text style="color: #f56c6c;margin-right: 10rpx;">*</text>
<text style="font-size: 16px; color: #9CA3AF;">现居住地</text>
</view>
<view class="input-val" style="width: 450rpx;" slot="value">
{{userInfo.reside_province_name}}{{userInfo.reside_city_name}}{{userInfo.reside_area_name}}
</view>
<u-icon slot="right-icon" name="edit-pen" size="26" color="#9CA3AF"></u-icon>
</u-cell>
<!-- @click="handleDetail" -->
<u-cell title="详细地址" size="large" :border='false' :titleStyle="{fontSize:'32rpx',color:'#9CA3AF'}">
<view slot="title">
<text style="color: #f56c6c;margin-right: 10rpx;">*</text>
<text style="font-size: 16px; color: #9CA3AF;">详细地址</text>
</view>
<view class="input-val" style="width: 450rpx;" slot="value">
<input type="text" v-model="userInfo.detail" />
</view>
<u-icon slot="right-icon" name="edit-pen" size="26" color="#9CA3AF"></u-icon>
</u-cell>
<u-cell @click="handlejoinTime" title="入伍时间" size="large" :border='false'
:titleStyle="{fontSize:'32rpx',color:'#9CA3AF'}">
<view slot="title">
<text style="color: #f56c6c;margin-right: 10rpx;">*</text>
<text style="font-size: 16px; color: #9CA3AF;">入伍时间</text>
</view>
<view class="input-val" style="width: 350rpx;" slot="value">
{{userInfo.join_time}}
</view>
<u-icon slot="right-icon" name="edit-pen" size="26" color="#9CA3AF"></u-icon>
</u-cell>
<u-cell @click="handleretireTime" title="退役时间" size="large" :border='false'
:titleStyle="{fontSize:'32rpx',color:'#9CA3AF'}">
<view slot="title">
<text style="color: #f56c6c;margin-right: 10rpx;">*</text>
<text style="font-size: 16px; color: #9CA3AF;">退役时间</text>
</view>
<view class="input-val" style="width: 350rpx;" slot="value">
{{userInfo.retire_time}}
</view>
<u-icon slot="right-icon" name="edit-pen" size="26" color="#9CA3AF"></u-icon>
</u-cell>
<u-cell title="人员类别" size="large" :border='false' :titleStyle="{fontSize:'32rpx',color:'#9CA3AF'}"
@click="handleCategory">
<view slot="title">
<text style="color: #f56c6c;margin-right: 10rpx;">*</text>
<text style="font-size: 16px; color: #9CA3AF;">人员类别</text>
</view>
<view class="input-val" style="width: 350rpx;" slot="value">
{{userInfo.category?categoryList[userInfo.category-1]:''}}
</view>
<u-icon slot="right-icon" name="edit-pen" size="26" color="#9CA3AF"></u-icon>
</u-cell>
<u-cell title="健康状态" size="large" :border='false' :titleStyle="{fontSize:'32rpx',color:'#9CA3AF'}"
@click="handleHealth">
<view slot="title">
<text style="color: #f56c6c;margin-right: 10rpx;">*</text>
<text style="font-size: 16px; color: #9CA3AF;">健康状态</text>
</view>
<view class="input-val" style="width: 350rpx;" slot="value">
{{ userInfo.health?healthList[userInfo.health-1]:''}}
</view>
<u-icon slot="right-icon" name="edit-pen" size="26" color="#9CA3AF"></u-icon>
</u-cell>
<!-- @click="handlePurpose" -->
<u-cell title="职业技能培训意向" size="large" :border='false' :titleStyle="{fontSize:'32rpx',color:'#9CA3AF'}">
<view slot="title">
<text style="color: #f56c6c;margin-right: 10rpx;">*</text>
<text style="font-size: 16px; color: #9CA3AF;">职业技能培训意向</text>
</view>
<view class="input-val" style="width: 330rpx;" slot="value">
<input type="text" v-model="userInfo.purpose" />
</view>
<u-icon slot="right-icon" name="edit-pen" size="26" color="#9CA3AF"></u-icon>
</u-cell>
</u-cell-group>
</view>
<!-- 底部操作 -->
<view class="fixed">
<view class="set-button">
<button @click="submit" class="button">确认</button>
</view>
</view>
<!-- 安置地城市选择 -->
<liuChooseAddress ref="scroll" @change='chooseSuccess'></liuChooseAddress>
<!-- 现居地城市选择 -->
<liuChooseAddress ref="scrolls" @change='chooseSuccesss'></liuChooseAddress>
<!-- 生日 -->
<u-datetime-picker @cancel="birth=false" :minDate="Number(new Date('1950-01-01'))"
:maxDate='new Date().getTime()' ref="datetimePicker" :show="birth" v-model="value1" mode="date"
:formatter="formatter" @confirm="birthConfirm"></u-datetime-picker>
<!-- 入伍时间 -->
<u-datetime-picker @cancel="joinTime=false" :minDate="Number(new Date('1950-01-01'))"
:maxDate='new Date().getTime()' ref="datetimePicker" :show="joinTime" v-model="value1" mode="date"
:formatter="formatter" @confirm="joinTimeConfirm"></u-datetime-picker>
<!-- 退伍时间 -->
<u-datetime-picker @cancel="retireTime=false" :minDate="Number(new Date('1950-01-01'))"
:maxDate='new Date().getTime()' ref="datetimePicker" :show="retireTime" v-model="value1" mode="date"
:formatter="formatter" @confirm="retireTimeConfirm"></u-datetime-picker>
</view>
</template>
<script>
import {
register,
infoEdit,
preInfo,
} from "@/api/login.js"
import liuChooseAddress from '@/components/liu-choose-address/liu-choose-address.vue'
import {
rsaEncrypt
} from '@/utils/lib/rsa.js';
export default {
components: {
liuChooseAddress
},
data() {
return {
birth: false,
joinTime: false,
retireTime: false,
value1: Number(new Date()),
userInfo: {
code: "", //登录code
org_id: "", //机构ID 默认1
name: "", //姓名
idcard: "", //身份证号
sex: "", //性别 1.男 2.女
birthday: "", //出生日期
degree: "", //学历 1.博士研究生 2.硕士研究生 3.本科 4.大专 5.高中 6.初中及以下
political: "", //政治面貌 1.中共党员 2.中共预备党员 3.中共团员 4.群众
to_province_code: "", //省代码 安置地
to_province_name: "", //省名称 安置地
to_city_code: "", //市代码 安置地
to_city_name: "", //市名称 安置地
to_area_code: "", //区县代码 安置地
to_area_name: "", //区县名称 安置地
category: "", //人员类别 1.退役军官 2.退役士兵
join_time: "", //入伍时间
retire_time: "", //退役时间
health: "", //健康状态 1.健康或良好 2.一般或较弱 3.有慢性病 4.患有大病 5.残疾
reside_province_code: "", //省代码 现居住地
reside_province_name: "", //省名称 现居住地
reside_city_code: "", //市代码 现居住地
reside_city_name: "", //市名称 现居住地
reside_area_code: "", //区县代码 现居住地
reside_area_name: "", //区县名称 现居住地
detail: "", //详细地址 现居住地
contact_mobile: "", //联系电话
purpose: "" //职业技能培训意向
},
form: {
username: 'MrThinco',
sex: 0,
emotion: 1,
job: 0,
birth: '2020-10-10',
city: '四川成都'
},
sexList: ['男', '女'],
// 1.博士研究生 2.硕士研究生 3.本科 4.大专 5.高中 6.初中及以下
educationList: ['博士研究生', '硕士研究生', '本科', '大专', '高中', '初中及以下'],
//政治面貌 1.中共党员 2.中共预备党员 3.中共团员 4.群众
politicalList: ['中共党员', '中共预备党员', '中共团员', '群众'],
// 人员类别
categoryList: ['退役军官', '退役士兵'],
healthList: ['健康或良好', '一般或较弱', '有慢性病', '患有大病', '残疾'],
// cityDefault: [0, 0, 1],
// 按钮配置
btnStyle: {
width: "90%",
height: "75rpx",
background: "linear-gradient(to right, #00B7FF, #006EEF)",
color: "#FFFFFF",
fontSize: "30rpx",
},
isPickerVisible: false, // 控制选择器显示状态
selectedAddress: '', // 存储选择的地址
pageType: 'edit',
}
},
onLoad(options) {
var that = this
if (options.type && options.type == 'register') {
that.userInfo.org_id = 1
that.pageType = options.type
uni.login({
success(res) {
if (res.errMsg == "login:ok") {
that.userInfo.code = res.code
}
}
})
uni.setNavigationBarTitle({
title: '用户注册'
});
} else {
this.getPreInfo()
uni.setNavigationBarTitle({
title: '修改资料'
});
}
},
onReady() {
// 微信小程序需要用此写法
this.$refs.datetimePicker.setFormatter(this.formatter)
},
methods: {
formatter(type, value) {
if (type === 'year') {
return `${value}年`
}
if (type === 'month') {
return `${value}月`
}
if (type === 'day') {
return `${value}日`
}
return value
},
getPreInfo() {
uni.showLoading({
title: '加载中...'
})
preInfo().then(res => {
uni.hideLoading()
this.userInfo = res.data
this.userInfo.org_id = 1
this.userInfo.name = ''
this.userInfo.idcard = ''
this.userInfo.contact_mobile = ''
})
},
// 修改昵称
handleName() {
this.$refs.inputDialog.open()
},
nameConfirm(val) {
this.userInfo.name = val
},
// 身份证号
handleIdcard() {
this.$refs.idcardDialog.open()
},
async idcardConfirm(val) {
var reslut = await this.isValidIDCard(val)
if (!reslut) {
uni.showToast({
title: '请输入正确的身份证号',
icon: 'none'
})
this.userInfo.idcard = ''
return
}
this.userInfo.idcard = val
this.$refs.idcardDialog.close()
},
idcardClose() {
this.$refs.idcardDialog.close()
},
// 手机号
handleMobile() {
this.$refs.mobileDialog.open()
},
handleDetail() {
this.$refs.detailDialog.open()
},
handlePurpose() {
this.$refs.purposeDialog.open()
},
purposeConfirm(val) {
this.userInfo.purpose = val
},
async mobileConfirm(val) {
var reslut = await this.isValidPhoneNumber(val)
if (!reslut) {
uni.showToast({
title: '请输入正确的手机号',
icon: 'none'
})
this.userInfo.contact_mobile = ''
return
}
this.userInfo.contact_mobile = val
this.$refs.mobileDialog.close()
},
mobileClose() {
this.$refs.mobileDialog.close()
},
detailConfirm(val) {
this.userInfo.detail = val
},
isValidPhoneNumber(phone) {
const regex = /^1[3-9]\d{9}$/; // 正则表达式匹配以1开头后面跟随9位数字
return regex.test(phone);
},
isValidIDCard(id) {
// 正则表达式验证格式
const regex = /^(?:\d{15}|\d{17}[\dxX])$/;
if (!regex.test(id)) {
return false; // 格式不匹配
}
// 如果是18位身份证进行校验位的计算
if (id.length === 18) {
const weights = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
const checksum = '10X98765432';
let sum = 0;
for (let i = 0; i < 17; i++) {
sum += parseInt(id[i]) * weights[i];
}
const calculatedCheckDigit = checksum[sum % 11];
return calculatedCheckDigit === id[17].toUpperCase(); // 校验位匹配
}
return true; // 15位身份证通过格式验证即为有效
},
// 修改性别
handleSex() {
const _this = this
uni.showActionSheet({
itemList: this.sexList,
success: function(res) {
_this.userInfo.sex = res.tapIndex + 1
},
fail: function(res) {
console.log(res.errMsg);
}
})
},
formatDate(timestamp) {
const date = new Date(timestamp);
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始所以要加1
const day = String(date.getDate()).padStart(2, '0');
return `${year}-${month}-${day}`;
},
// 修改生日
handleBirth() {
this.birth = true
},
birthConfirm(e) {
this.birth = false
this.userInfo.birthday = this.formatDate(e.value)
},
handlejoinTime() {
this.joinTime = true
},
joinTimeConfirm(e) {
this.joinTime = false
this.userInfo.join_time = this.formatDate(e.value)
},
handleretireTime() {
this.retireTime = true
},
retireTimeConfirm(e) {
this.retireTime = false
this.userInfo.retire_time = this.formatDate(e.value)
},
// 修改情感
handleEmotion() {
const _this = this
uni.showActionSheet({
itemList: this.educationList,
success: function(res) {
console.log(res, 'res');
_this.userInfo.degree = res.tapIndex + 1
},
fail: function(res) {
console.log(res.errMsg);
}
})
},
// 修改职业
handleJob() {
const _this = this
uni.showActionSheet({
itemList: this.politicalList,
success: function(res) {
_this.userInfo.political = res.tapIndex + 1
},
fail: function(res) {
console.log(res.errMsg)
}
})
},
handleCategory() {
const _this = this
uni.showActionSheet({
itemList: this.categoryList,
success: function(res) {
_this.userInfo.category = res.tapIndex + 1
},
fail: function(res) {
console.log(res.errMsg)
}
})
},
handleHealth() {
const _this = this
uni.showActionSheet({
itemList: this.healthList,
success: function(res) {
_this.userInfo.health = res.tapIndex + 1
},
fail: function(res) {
console.log(res.errMsg)
}
})
},
showCity() {
this.$refs.scroll.open()
},
showReside() {
this.$refs.scrolls.open()
},
chooseSuccess(e) {
this.userInfo.to_province_code = e.value[0].value
this.userInfo.to_province_name = e.value[0].label
this.userInfo.to_city_code = e.value[1].value
this.userInfo.to_city_name = e.value[1].label
this.userInfo.to_area_code = e.value[2].value
this.userInfo.to_area_name = e.value[2].label
},
chooseSuccesss(e) {
this.userInfo.reside_province_code = e.value[0].value
this.userInfo.reside_province_name = e.value[0].label
this.userInfo.reside_city_code = e.value[1].value
this.userInfo.reside_city_name = e.value[1].label
this.userInfo.reside_area_code = e.value[2].value
this.userInfo.reside_area_name = e.value[2].label
},
// 提交
submit() {
var that = this
console.log(that.userInfo);
if (!that.userInfo.name) {
uni.showToast({
title: '请输入姓名',
icon: 'none'
})
return
}
if (!that.userInfo.idcard) {
uni.showToast({
title: '请输入身份证号',
icon: 'none'
})
return
}
if (!that.isValidIDCard(that.userInfo.idcard)) {
uni.showToast({
title: '身份证格式错误',
icon: 'none'
})
return
}
if (!that.userInfo.contact_mobile) {
uni.showToast({
title: '请输入手机号',
icon: 'none'
})
return
}
if (!that.isValidPhoneNumber(that.userInfo.contact_mobile)) {
uni.showToast({
title: '手机号格式错误',
icon: 'none'
})
return
}
if (!that.userInfo.sex) {
uni.showToast({
title: '请选择性别',
icon: 'none'
})
return
}
if (!that.userInfo.birthday) {
uni.showToast({
title: '请选择出生日期',
icon: 'none'
})
return
}
if (!that.userInfo.degree) {
uni.showToast({
title: '请选择学历',
icon: 'none'
})
return
}
if (!that.userInfo.political) {
uni.showToast({
title: '请选择政治面貌',
icon: 'none'
})
return
}
if (!that.userInfo.to_province_name) {
uni.showToast({
title: '请选择安置地',
icon: 'none'
})
return
}
if (!that.userInfo.reside_city_name) {
uni.showToast({
title: '请选择现居地',
icon: 'none'
})
return
}
if (!that.userInfo.category) {
uni.showToast({
title: '请选择人员类别',
icon: 'none'
})
return
}
if (!that.userInfo.join_time) {
uni.showToast({
title: '请选择入伍时间',
icon: 'none'
})
return
}
if (!that.userInfo.retire_time) {
uni.showToast({
title: '请选择退役时间',
icon: 'none'
})
return
}
if (!that.userInfo.health) {
uni.showToast({
title: '请选择健康状态',
icon: 'none'
})
return
}
if (!that.userInfo.detail) {
uni.showToast({
title: '请填写详细地址',
icon: 'none'
})
return
}
if (!that.userInfo.purpose) {
uni.showToast({
title: '请填写职业技能培训意向',
icon: 'none'
})
return
}
uni.showLoading({
title: '提交中...'
})
that.userInfo.name = rsaEncrypt(that.userInfo.name);
that.userInfo.idcard = rsaEncrypt(that.userInfo.idcard);
that.userInfo.contact_mobile = rsaEncrypt(that.userInfo.contact_mobile);
if (that.pageType == 'edit') {
infoEdit(that.userInfo).then(res => {
uni.hideLoading()
if (res.code == 0) {
uni.showToast({
title: '提交成功',
icon: 'none'
})
setTimeout(() => {
uni.navigateBack({
delta: 1
})
}, 400)
} else {
uni.showToast({
title: res.msg,
icon: 'none'
})
}
})
} else {
register(that.userInfo).then(res => {
uni.hideLoading()
if (res.code == 0) {
uni.showToast({
title: '提交成功',
icon: 'none'
})
uni.setStorageSync('token', res.data.token);
setTimeout(() => {
uni.reLaunch({
url: '/pages/home/home'
})
}, 400)
} else {
uni.showToast({
title: res.msg,
icon: 'none'
})
}
})
}
}
}
}
</script>
<style lang="scss">
page {
background-color: #F5F5F5;
}
.edit-info {
background-color: #FFFFFF;
}
.fixed {
position: fixed;
bottom: 0;
width: 100%;
background-color: #FFFFFF;
height: 180rpx;
box-shadow: 0rpx -4rpx 16rpx 0rpx rgba(0, 0, 0, 0.08);
.set-button {
padding-top: 30rpx;
width: 80%;
margin: 0 auto;
.button {
background: linear-gradient(to right, #00B7FF, #006EEF);
border-radius: 20rpx;
color: #FFFFFF;
}
}
}
.input-val {
white-space: nowrap;
overflow: hidden;
text-align: right;
}
/deep/.uni-popup .uni-popup__wrapper {
bottom: 200rpx;
}
</style>