470 lines
12 KiB
Vue
470 lines
12 KiB
Vue
<template>
|
||
<view id="myapp" class="bodyA">
|
||
<!-- 滚动区域 -->
|
||
<view class="content">
|
||
<van-form @submit="onSubmit">
|
||
<van-cell-group class="vanCellGroup" inset>
|
||
<van-field class="required" v-model="form.name" label="姓名" placeholder="暂无" :rules="rulesObj.name"
|
||
readonly>
|
||
</van-field>
|
||
<van-field class="required" v-model="dicObj.sex[form.sex]" label="性别" is-link readonly
|
||
:rules="rulesObj.sex" @click="sexFlag=true">
|
||
</van-field>
|
||
<!-- <van-field v-model="dicObj.sex[form.sex]" label="性别" readonly :rules="rulesObj.sex">
|
||
</van-field> -->
|
||
<van-field class="required" v-model="form.dept" label="部门" placeholder="暂无" :rules="rulesObj.dept"
|
||
readonly>
|
||
</van-field>
|
||
<van-field class="required" v-model="form.idcard" label="身份证" placeholder="请输入身份证号"
|
||
:rules="rulesObj.idcard" right-icon="delete" @click-right-icon="form.idcard = ''"></van-field>
|
||
<van-field class="required" v-model="form.mobile" label="手机号" placeholder="请输入手机号"
|
||
:rules="rulesObj.mobile" right-icon="delete" @click-right-icon="form.mobile = ''"
|
||
maxlength="11">
|
||
</van-field>
|
||
<!-- <van-field v-model="form.regularPhone" label="座机号" placeholder="请输入" type="number" readonly>
|
||
</van-field>
|
||
<van-field v-model="form.carId" label="车牌号" placeholder="请输入" readonly>
|
||
</van-field>
|
||
<van-field v-model="form.mealCard" label="餐卡号" placeholder="请输入" type="tel" readonly>
|
||
</van-field>
|
||
<van-field v-model="form.address" label="现居地" placeholder="请输入" readonly></van-field> -->
|
||
|
||
<view style="display: flex;align-items: center;" v-if="verifyCodeSwitch == 1">
|
||
<van-field v-model="verifyCode" label="验证码" @input="e =>verifyCode= validForbadAll(e)" required
|
||
:rules="[{ required: true, message: '' }]" name="verifyCode" placeholder="请输入验证码">
|
||
</van-field>
|
||
<span style="margin-right: 36upx;width: 256upx" :class="jsq ? 'bg-ccc' : ''"
|
||
class="verifyCodeBtn" @click="getCodeInfo()">{{btnText}}</span>
|
||
</view>
|
||
|
||
</van-cell-group>
|
||
<!-- <view class="tips">
|
||
<van-icon class="icon" name="volume" size="30upx"></van-icon>
|
||
温馨提示：餐卡号为员工卡背面右下角前十位数字
|
||
</view> -->
|
||
|
||
<view class="footer">
|
||
<van-button class="footerBtn" @click="onSubmit" round block type="primary" native-type="submit"
|
||
v-if="!showLoading">更新
|
||
</van-button>
|
||
<van-button class="footerBtn" round block loading loading-text="加载中..." loading-type color="#C0C0C0"
|
||
v-if="showLoading" disabled></van-button>
|
||
</view>
|
||
|
||
</van-form>
|
||
</view>
|
||
<van-popup v-model:show="sexFlag" round position="bottom">
|
||
<van-picker show-toolbar :columns="columns" value-key="typeName" @cancel="sexFlag = false"
|
||
@confirm="onConfirm">
|
||
</van-picker>
|
||
</van-popup>
|
||
<!-- 底部 -->
|
||
<!-- <view class="footer">
|
||
<van-button class="footerBtn">按钮</van-button>
|
||
</view> -->
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
getPhoneCode,
|
||
getPhoneCodeOnOff,
|
||
updateUserData,
|
||
updateUserInfo,
|
||
getUserInfo
|
||
} from '@/common/api.js'
|
||
import {
|
||
callbackRequest
|
||
} from '@/common/util.js'
|
||
import CryptoJS from "@/common/crypto-js";
|
||
import {Decrypt2} from "@/common/utils";
|
||
export default {
|
||
data() {
|
||
return {
|
||
jsq: null, //验证码倒计时计时器
|
||
btnText: '获取验证码',
|
||
verifyCode: '', // 6位数验证码
|
||
verifyCodeSwitch: 0, // 短信校验控制
|
||
loadingFlag: '',
|
||
loadingFlag_Tm: 'x',
|
||
// code
|
||
columns: [{
|
||
typeName: '男',
|
||
type: 1
|
||
},
|
||
{
|
||
typeName: '女',
|
||
type: 2
|
||
},
|
||
],
|
||
sexFlag: false,
|
||
idCard: '',
|
||
mobile: '',
|
||
rulesObj: {
|
||
name: [{
|
||
required: true,
|
||
message: '姓名不能为空'
|
||
}],
|
||
sex: [{
|
||
required: true,
|
||
message: '性别不能为空'
|
||
}],
|
||
dept: [{
|
||
required: true,
|
||
message: '部门不能为空'
|
||
}],
|
||
idcard: [{
|
||
required: true,
|
||
message: '身份证不能为空'
|
||
},
|
||
{
|
||
pattern: /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
|
||
message: '请再次确认输入正确身份证',
|
||
trigger: 'onBlur'
|
||
}
|
||
],
|
||
mobile: [{
|
||
required: true,
|
||
message: '手机号不能为空',
|
||
trigger: 'onBlur'
|
||
},
|
||
{
|
||
pattern: /^1((34[0-8])|(8\d{2})|(([35][0-35-9]|4[579]|66|7[35678]|9[1389])\d{1}))\d{7}$/,
|
||
message: '请填写正确的手机号',
|
||
trigger: 'onBlur'
|
||
}
|
||
], // 手机号
|
||
},
|
||
showLoading: false,
|
||
form: {
|
||
name: '', // 姓名
|
||
sex: '', // 性别
|
||
dept: '', // 部门
|
||
idcard: '', // 身份证
|
||
mobile: '', // 手机
|
||
regularPhone: '', // 座机
|
||
carId: '', // 车牌号
|
||
mealCard: '', // 餐卡号
|
||
address: '', // 地址
|
||
},
|
||
dicObj: {
|
||
sex: {
|
||
1: '男',
|
||
2: '女',
|
||
}
|
||
},
|
||
};
|
||
},
|
||
mounted() {
|
||
// this.controlDX();
|
||
this.getUserInfo();
|
||
},
|
||
methods: {
|
||
|
||
//验证码重新获取倒计时
|
||
timer() {
|
||
let i = 60
|
||
let _this = this
|
||
this.jsq = setInterval(function() {
|
||
if (i == 0) {
|
||
_this.btnText = '重新发送'
|
||
clearInterval(_this.jsq)
|
||
_this.jsq = null
|
||
return false
|
||
}
|
||
_this.btnText = i + '秒'
|
||
i--
|
||
}, 1000)
|
||
|
||
},
|
||
//身份证号验证
|
||
idCardTest: function(text) {
|
||
var self = this
|
||
var reg = new RegExp(
|
||
/^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/)
|
||
if (text.indexOf("*") == -1) {
|
||
if (reg.test(text) == false && text != "") {
|
||
if (text == self.form.idCard) self.form.idCard = ""
|
||
return false
|
||
}
|
||
return true
|
||
}
|
||
},
|
||
//手机号验证
|
||
teltest: function(text) {
|
||
var self = this
|
||
var reg = new RegExp(/^1[3456789]\d{9}$/)
|
||
if (text.indexOf("*") == -1) {
|
||
if (reg.test(text) == false && text != "") {
|
||
// mui.toast("请输入正确的11位手机号码", {
|
||
|
||
if (text == self.form.mobile) self.form.mobile = ""
|
||
return false
|
||
}
|
||
return true
|
||
}
|
||
},
|
||
//获取验证码
|
||
getCodeInfo() {
|
||
var self = this
|
||
const phoneA = this.form.mobile;
|
||
if (self.jsq) {
|
||
return false
|
||
}
|
||
if (self.teltest(phoneA)) {
|
||
vant.Toast({
|
||
message: '请输入符合规范的手机号码',
|
||
duration: 2000
|
||
})
|
||
return false
|
||
}
|
||
|
||
|
||
var obj = {}
|
||
obj.mobile = phoneA
|
||
self.loadingFlag_Tm = ''
|
||
request.getPhoneCode(obj, function(res) {
|
||
self.loadingFlag_Tm = 'x'
|
||
console.log(res);
|
||
if (res.returnCode == 1) {
|
||
mui.toast(res.returnMsg, {
|
||
duration: "long"
|
||
})
|
||
self.timer()
|
||
} else {
|
||
mui.toast(res.returnMsg, {
|
||
duration: "short"
|
||
})
|
||
}
|
||
})
|
||
|
||
},
|
||
// xxx
|
||
validForbadAll: function(value, number = 100) {
|
||
let val = value
|
||
value = val.replace(
|
||
/[`~!@#$%^&()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&（）——\-+={}|《》？：“”【】、；‘'，。、]|null|undefined{1}/g,
|
||
'').replace(/\s/g, "")
|
||
console.log(value)
|
||
if (value.lenght >= number) {
|
||
uni.showToast({
|
||
title: `输入内容不能超过${{ number }}个字符`,
|
||
icon: 'none',
|
||
duration: 2000,
|
||
})
|
||
}
|
||
return value
|
||
},
|
||
// 控制短信校验
|
||
controlDX() {
|
||
const that = this;
|
||
request.getPhoneCodeOnOff({}, function(res) {
|
||
if (res.returnCode == 1) {
|
||
that.verifyCodeSwitch = res.returnData
|
||
}
|
||
})
|
||
|
||
},
|
||
// 更新用户信息
|
||
updateUserInfos() {
|
||
console.log(123123, this.idCard)
|
||
const that = this;
|
||
let form = this.form;
|
||
|
||
let temp = that.idCard.substring(4, 15)
|
||
temp = that.idCard.replace(temp, '***********');
|
||
console.log(temp, form.idcard, this.idCard, '1')
|
||
if (form.idcard == temp) {
|
||
console.log('---')
|
||
form.idcard = this.idCard
|
||
}
|
||
let temps = that.mobile.substring(3, 7)
|
||
temp = that.mobile.replace(temp, '****');
|
||
console.log(temp, form.mobile, this.mobile, '1')
|
||
if (form.mobile == temps) {
|
||
console.log('---')
|
||
form.mobile = this.mobile
|
||
}
|
||
if (!form.idcard) {
|
||
uni.showToast({
|
||
title: "请输入身份证号",
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
this.showLoading = false;
|
||
return false
|
||
}
|
||
if (!this.idCardTest(form.idcard)) {
|
||
uni.showToast({
|
||
title: "请输入正确的身份证号",
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
this.showLoading = false;
|
||
return false
|
||
}
|
||
if (!form.mobile) {
|
||
uni.showToast({
|
||
title: "请输入手机号码",
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
this.showLoading = false;
|
||
return false
|
||
}
|
||
if (!this.teltest(form.mobile)) {
|
||
uni.showToast({
|
||
title: "请输入正确的11位手机号码",
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
this.showLoading = false;
|
||
return false
|
||
}
|
||
let params = {
|
||
idCard: form.idcard, // 身份证
|
||
gender: form.sex, // 性别
|
||
mobile: form.mobile, // 手机
|
||
landline: form.regularPhone, // 座机
|
||
carNumber: form.carId, // 车牌号
|
||
mealNo: form.mealCard, // 餐卡号
|
||
liveAddr: form.address, // 住址
|
||
code: this.verifyCode, // 短信验证码
|
||
verifyCodeSwitch: this.verifyCodeSwitch, // 开关
|
||
method: updateUserInfo,
|
||
}
|
||
console.log(params, '更新入参');
|
||
|
||
|
||
if (this.verifyCodeSwitch == 1) {
|
||
if (this.verifyCode.length != 6) {
|
||
uni.showToast({
|
||
title: '请输入六位数字类型验证码',
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
|
||
this.loadingFlag_Tm = 'x';
|
||
this.showLoading = false;
|
||
return;
|
||
}
|
||
}
|
||
|
||
callbackRequest(params).then(res => {
|
||
console.log(res, '返回参数');
|
||
let msg;
|
||
if (res.returnCode == 1) {
|
||
msg = res.returnMsg
|
||
setTimeout(() => {
|
||
window.history.go(-1)
|
||
}, 2000);
|
||
msg = '更新成功'
|
||
} else {
|
||
msg = '更新失败，请重试...'
|
||
}
|
||
that.showLoading = false;
|
||
that.loadingFlag_Tm = 'x';
|
||
uni.showToast({
|
||
title: msg,
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
})
|
||
},
|
||
// 获取用户信息
|
||
async getUserInfo() {
|
||
const that = this;
|
||
let resData = await this.userInfo()
|
||
console.log('111', resData)
|
||
that.form.name = resData.realName;
|
||
that.form.sex = resData.gender;
|
||
that.form.dept = resData.departmentName;
|
||
|
||
that.idCard = resData.idCard ? resData.idCard : '';
|
||
if (that.idCard) {
|
||
let temp = Decrypt2(resData.idCard).substring(4, 15)
|
||
that.form.idcard = Decrypt2(resData.idCard).replace(temp, '***********');
|
||
}
|
||
that.mobile = resData.mobile ? resData.mobile : '';
|
||
if (that.mobile) {
|
||
let temps = resData.mobile.substring(3, 7)
|
||
console.log('222', temps)
|
||
that.form.mobile = resData.mobile.replace(temps, '****');
|
||
console.log('333', that.form.mobile)
|
||
}
|
||
that.form.regularPhone = resData.landline ? resData.landline : '';
|
||
that.form.mealCard = resData.mealNo ? resData.mealNo : '';
|
||
that.form.address = resData.liveAddr ? resData.liveAddr : '';
|
||
console.log('111', that.form)
|
||
},
|
||
userInfo() {
|
||
let params = {
|
||
method: getUserInfo,
|
||
}
|
||
return new Promise((resove, reject) => {
|
||
callbackRequest(params).then(res => {
|
||
uni.setStorageSync('userInfos', res.returnData)
|
||
if (res.returnCode == 1) {
|
||
console.log('getUnReadNum');
|
||
resove(res.returnData)
|
||
} else {}
|
||
});
|
||
})
|
||
},
|
||
onConfirm(e) {
|
||
console.log('xxxxxxxxx', this.sexFlag, e);
|
||
this.form.sex = e.type
|
||
this.sexFlag = false;
|
||
},
|
||
onSubmit() {
|
||
console.log('onSubmit');
|
||
this.showLoading = true;
|
||
this.loadingFlag_Tm = '';
|
||
this.updateUserInfos();
|
||
},
|
||
// code
|
||
back() {
|
||
// window.location.href = "indexIndex.html"
|
||
window.history.go(-1)
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.content {
|
||
font-size: .38*74upx;
|
||
color: #0e1a24;
|
||
padding: .32*74upx;
|
||
padding-bottom: 2*74upx;
|
||
}
|
||
|
||
.vanCellGroup {
|
||
border-radius: .24*74upx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.vanCellGroup input {
|
||
border: none;
|
||
}
|
||
|
||
.tips {
|
||
font-size: .38*74upx;
|
||
color: #fb8107;
|
||
padding: .34*74upx .2*74upx;
|
||
background-color: #fff;
|
||
border-radius: .24*74upx;
|
||
margin-top: .24*74upx;
|
||
font-weight: bold;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.tips .icon {
|
||
margin-right: .12*74upx;
|
||
}
|
||
|
||
/deep/ .van-cell-group--inset {
|
||
margin: 0;
|
||
}
|
||
</style> |