610 lines
18 KiB
Vue
610 lines
18 KiB
Vue
<template>
|
||
<view>
|
||
<u-navbar title="个人信息"></u-navbar>
|
||
<view class="flex-col group">
|
||
<view class="flex-col section_2">
|
||
<view class="flex-col">
|
||
<view class="justify-between headerImg flex-center">
|
||
<text class="text_15">头像</text>
|
||
<u-avatar
|
||
@click="chooseAvatar"
|
||
:src="$u.http.config.imgUrl + form.head"
|
||
class="image_2"
|
||
></u-avatar>
|
||
<!-- <ima
|
||
src="/static/common/img/row_right.png"
|
||
class="image_3"
|
||
/> -->
|
||
</view>
|
||
</view>
|
||
<view class="list-row">
|
||
<text class="text_15">用户名</text>
|
||
<u-input
|
||
class="input"
|
||
:type="'text'"
|
||
:border="false"
|
||
:maxlength="8"
|
||
v-model="form.userName"
|
||
placeholder="请输入"
|
||
inputAlign="right"
|
||
/>
|
||
</view>
|
||
<view class="list-row">
|
||
<text class="text_15">真实姓名</text>
|
||
<u-input
|
||
:type="'text'"
|
||
:border="false"
|
||
v-model="form.name"
|
||
placeholder="请输入"
|
||
:disabled="form.name != ''"
|
||
inputAlign="right"
|
||
/>
|
||
</view>
|
||
<view class="list-row">
|
||
<text class="text_15">性别</text>
|
||
<view class="item-row">
|
||
<view class="input-cover" @click="sex = true"></view>
|
||
<u-input
|
||
class="input"
|
||
:type="'text'"
|
||
:border="false"
|
||
placeholder="请选择"
|
||
v-model="form.sex"
|
||
disabled
|
||
inputAlign="right"
|
||
/>
|
||
<image src="/static/common/img/row_right.png" class="image-right" />
|
||
</view>
|
||
</view>
|
||
<view class="list-row">
|
||
<text class="text_15">出生日期</text>
|
||
<view class="item-row">
|
||
<view class="input-cover" @click="birthdays = true"></view>
|
||
<u-input
|
||
class="input"
|
||
:type="'text'"
|
||
:border="false"
|
||
v-model="form.birthday"
|
||
placeholder="请选择出生日期"
|
||
disabled
|
||
inputAlign="right"
|
||
/>
|
||
<image src="/static/common/img/row_right.png" class="image-right" />
|
||
</view>
|
||
</view>
|
||
<view class="list-row">
|
||
<text class="text_15">手机号码</text>
|
||
<u-input
|
||
class="input"
|
||
:type="'number'"
|
||
:border="false"
|
||
v-model="form.phone"
|
||
disabled
|
||
inputAlign="right"
|
||
/>
|
||
</view>
|
||
<view class="list-row">
|
||
<text class="text_15">籍贯</text>
|
||
<view class="item-row">
|
||
<view class="input-cover" @click="NativePlace = true"></view>
|
||
<u-input
|
||
class="input"
|
||
:type="'text'"
|
||
:border="false"
|
||
placeholder="请选择"
|
||
v-model="form.NativePlace"
|
||
disabled
|
||
inputAlign="right"
|
||
/>
|
||
<image src="/static/common/img/row_right.png" class="image-right" />
|
||
</view>
|
||
</view>
|
||
<view class="list-row">
|
||
<text class="text_15">现居地</text>
|
||
<view class="item-row">
|
||
<view class="input-cover" @click="address = true"></view>
|
||
<u-input
|
||
class="input"
|
||
:type="'text'"
|
||
:border="false"
|
||
placeholder="请选择"
|
||
v-model="form.residence"
|
||
disabled
|
||
inputAlign="right"
|
||
/>
|
||
<image src="/static/common/img/row_right.png" class="image-right" />
|
||
</view>
|
||
</view>
|
||
<view class="list-row">
|
||
<text class="text_15">详细地址</text>
|
||
<u-input
|
||
class="input"
|
||
:type="'text'"
|
||
:border="false"
|
||
v-model="form.address"
|
||
placeholder="请输入"
|
||
inputAlign="right"
|
||
/>
|
||
</view>
|
||
<view class="list-row" v-if="![0].includes(vuex_user.userType)">
|
||
<text class="text_15">工作领域</text>
|
||
<view class="item-row">
|
||
<view class="input-cover" @click="WorkArea = true"></view>
|
||
<u-input
|
||
class="input"
|
||
:type="'text'"
|
||
:border="false"
|
||
placeholder="请选择"
|
||
v-model="form.WorkArea"
|
||
disabled
|
||
inputAlign="right"
|
||
/>
|
||
<image src="/static/common/img/row_right.png" class="image-right" />
|
||
</view>
|
||
</view>
|
||
<view class="list-row">
|
||
<text class="text_15">兴趣爱好</text>
|
||
<view class="item-row">
|
||
<view class="input-cover" @click="selectHobby"></view>
|
||
<u-input
|
||
class="input"
|
||
:type="'text'"
|
||
:border="false"
|
||
placeholder="请选择"
|
||
v-model="form.hobby"
|
||
disabled
|
||
inputAlign="right"
|
||
/>
|
||
<image src="/static/common/img/row_right.png" class="image-right" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view style="height: 100rpx; width: 100%"></view>
|
||
<view class="btn-box">
|
||
<view class="flex-col items-center button" @click="save">
|
||
<text>保存</text>
|
||
</view>
|
||
<!-- <view class="flex-col items-center button_1" @click="goHome">
|
||
<text>取消</text>
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
<!-- 地址 -->
|
||
<u-picker
|
||
mode="region"
|
||
v-model="address"
|
||
:area-code="addressId"
|
||
@confirm="selectAddress"
|
||
></u-picker>
|
||
<!-- 性别 -->
|
||
<u-select
|
||
v-model="sex"
|
||
mode="single-column"
|
||
:default-value="sexId"
|
||
:list="sexList"
|
||
@confirm="selectSex"
|
||
></u-select>
|
||
<!-- 出生日期 -->
|
||
<u-picker
|
||
mode="time"
|
||
v-model="birthdays"
|
||
:end-year="EndYear"
|
||
:default-time="birthdaysId"
|
||
@confirm="selectBirthdays"
|
||
></u-picker>
|
||
<!-- 籍贯 -->
|
||
<u-picker
|
||
mode="region"
|
||
v-model="NativePlace"
|
||
:area-code="NativePlaceId"
|
||
@confirm="selectNativePlace"
|
||
></u-picker>
|
||
<!-- 工作领域 -->
|
||
<u-select
|
||
v-model="WorkArea"
|
||
mode="single-column"
|
||
:default-value="WorkAreaId"
|
||
:list="WorkAreaList"
|
||
@confirm="selectWorkArea"
|
||
></u-select>
|
||
<!-- 提示 -->
|
||
<u-top-tips ref="uTips" :navbar-height="0"></u-top-tips>
|
||
<u-toast ref="uToast" />
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
// input 样式
|
||
/* inputStyle: {
|
||
lineHeight: "0.5rem",
|
||
height: "0.5rem",
|
||
width: "2rem",
|
||
}, */
|
||
sex: false, //性别选择框的显示/隐藏
|
||
sexList: [
|
||
//性别选择框内容
|
||
{ label: "男", value: "0" },
|
||
{ label: "女", value: "1" },
|
||
],
|
||
sexId: [0], //记录选择的性别进行数据复现
|
||
address: false, //现居地址选择框的显示/隐藏
|
||
addressId: [11, 1101, 110101], //记录选择的现居地址进行数据复现
|
||
birthdays: false, //出生日期选择框的显示/隐藏
|
||
birthdaysId: "", //记录选择的出生日期进行数据复现
|
||
EndYear: 2022, //出生日期选择框的最大年份
|
||
NativePlace: false, //籍贯选择框的显示/隐藏
|
||
NativePlaceId: [11, 1101, 110101], //记录选择的籍贯进行数据复现
|
||
WorkArea: false, //工作领域选择框的显示/隐藏
|
||
WorkAreaId: [0], //记录选择的工作领域进行数据复现
|
||
//工作领域选择框内容
|
||
WorkAreaList: [
|
||
{ label: "在校生", value: "1" },
|
||
{ label: "计算机/互联网/通信/电子", value: "2" },
|
||
{ label: "销售/客服", value: "3" },
|
||
{ label: "会计/金融/银行/保险", value: "4" },
|
||
{ label: "生产/营运/采购/物流", value: "5" },
|
||
{ label: "建筑/房地产", value: "6" },
|
||
{ label: "设计/市场/媒体/广告", value: "7" },
|
||
{ label: "人事/行政/高级管理", value: "8" },
|
||
{ label: "教育/培训", value: "9" },
|
||
{ label: "生物/制药/化工/医疗", value: "10" },
|
||
{ label: "咨询/法律/科研", value: "11" },
|
||
{ label: "服务业", value: "12" },
|
||
{ label: "政府机构/翻译/其他", value: "13" },
|
||
],
|
||
form: {
|
||
head: "",
|
||
workFieldId: "",
|
||
userName: "admin",
|
||
name: "管理员",
|
||
sex: "男",
|
||
nativeProvince: "", //籍贯省
|
||
nativeCity: "", //籍贯市
|
||
nativeArea: "", //籍贯区
|
||
nHomProvince: "", //现居省
|
||
nHomCity: "", //现居市
|
||
nHomArea: "", //现居区
|
||
residence: "", //现居地
|
||
birthday: "", //出生日期
|
||
phone: "", //手机号
|
||
NativePlace: "",
|
||
address: "",
|
||
WorkArea: "",
|
||
hobby:"",
|
||
list:[]
|
||
},
|
||
};
|
||
},
|
||
onLoad() {
|
||
this.EndYear = new Date().getFullYear();
|
||
Object.assign(this.form, this.vuex_user);
|
||
this.form.list = this.vuex_user_hobby
|
||
if (this.form.birthday != "0001-01-01 00:00:00") {
|
||
this.form.birthday = this.form.birthday.slice(0, 10);
|
||
} else {
|
||
this.form.birthday = "";
|
||
}
|
||
this.form.NativePlace =
|
||
this.form.nativeProvince +
|
||
"-" +
|
||
this.form.nativeCity +
|
||
"-" +
|
||
this.form.nativeArea;
|
||
this.form.residence =
|
||
this.form.nHomProvince +
|
||
"-" +
|
||
this.form.nHomCity +
|
||
"-" +
|
||
this.form.nHomArea;
|
||
if (this.form.NativePlace == "null-null-null") {
|
||
this.form.NativePlace = "";
|
||
}
|
||
if (this.form.residence == "null-null-null") {
|
||
this.form.residence = "";
|
||
}
|
||
|
||
},
|
||
onShow(){
|
||
if(this.vuex_user_hobby){
|
||
const selectedIds = this.vuex_user_hobby.map(item => {
|
||
return {lableId:item.lableId}
|
||
});
|
||
this.$u.vuex("vuex_hobby", selectedIds);
|
||
this.form.hobby = this.vuex_user_hobby.map(item => item.lableName).join('、')
|
||
}
|
||
},
|
||
created() {
|
||
// 监听从裁剪页发布的事件，获得裁剪结果
|
||
uni.$on("uAvatarCropper", (path) => {
|
||
this.form.head = path;
|
||
var file = this.common.base64toFile(path, new Date().getTime());
|
||
if (file.type.indexOf("image") < 0) {
|
||
// this.$tips("请选择图片", "error");
|
||
this.$refs.uToast.show({
|
||
title: "请选择图片",
|
||
type: "error",
|
||
});
|
||
return false;
|
||
}
|
||
uni.uploadFile({
|
||
url: this.$u.http.config.baseUrl + "/app/User/UserHead",
|
||
file: file,
|
||
fileType: "image",
|
||
header: {
|
||
Authorization: "Bearer " + this.vuex_token,
|
||
},
|
||
complete: (res) => {
|
||
this.$u.apiList
|
||
.GetUser({
|
||
userId: this.vuex_user.id,
|
||
})
|
||
.then((res) => {
|
||
this.$u.vuex("vuex_user", res);
|
||
this.form.head = this.vuex_user.head;
|
||
});
|
||
// this.form.head = JSON.parse(res.data).data;
|
||
},
|
||
});
|
||
});
|
||
this.getWorkFile();
|
||
},
|
||
|
||
methods: {
|
||
// 头像裁剪
|
||
chooseAvatar() {
|
||
// 此为uView的跳转方法，详见"文档-JS"部分，也可以用uni的uni.navigateTo
|
||
this.$u.route({
|
||
// 关于此路径，请见下方"注意事项"
|
||
url: "/uview-ui/components/u-avatar-cropper/u-avatar-cropper",
|
||
// 内部已设置以下默认参数值，可不传这些参数
|
||
params: {
|
||
// 输出图片宽度，高等于宽，单位px
|
||
destWidth: 200,
|
||
// 裁剪框宽度，高等于宽，单位px
|
||
rectWidth: 200,
|
||
// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
|
||
fileType: "jpg",
|
||
},
|
||
});
|
||
},
|
||
//获取工作领域
|
||
getWorkFile() {
|
||
this.$u.apiList.GetWorkFile().then((res) => {
|
||
this.WorkAreaList = res.map((item) => {
|
||
return {
|
||
label: item.workFieldName,
|
||
value: item.id,
|
||
};
|
||
});
|
||
let data = this.WorkAreaList.find((item) => {
|
||
return item.value == this.form.workFieldId;
|
||
});
|
||
this.form.WorkArea = data.label;
|
||
this.form.workFieldId = data.value;
|
||
});
|
||
},
|
||
// 提示
|
||
tips(title, type, time) {
|
||
this.$refs.uToast.show({
|
||
title: title ? title : "",
|
||
type: type ? type : "success",
|
||
duration: time ? time + "" : "1000",
|
||
});
|
||
},
|
||
// 保存
|
||
save() {
|
||
var data = this.form;
|
||
data.id = this.vuex_user.id;
|
||
data.list = this.vuex_hobby
|
||
var reg = new RegExp("^[\u4e00-\u9fa5]{0,}$", "g"); //真实姓名
|
||
var reg1 = new RegExp("^[\u4E00-\u9FA5A-Za-z0-9]+$", "g");
|
||
if (data.userName === "" || !reg1.test(data.userName)) {
|
||
this.tips("用户名格式不正确", "error");
|
||
return;
|
||
}
|
||
if (data.name === "" || !reg.test(data.name)) {
|
||
this.tips("请输入正确的真实姓名", "error");
|
||
return;
|
||
}
|
||
if (data.sex === "" || data.sex === null) {
|
||
this.tips("请选择性别", "error");
|
||
return;
|
||
}
|
||
if (data.birthday === "" || this.isBirthday(data.birthday)) {
|
||
this.tips("请选择正确出生日期", "error");
|
||
return;
|
||
}
|
||
// reg = new RegExp("^[1][3,4,5,7,8,9][0-9]{9}$", "g"); //手机号
|
||
// if (data.phone === "" || !reg.test(data.phone)) {
|
||
// this.tips("请输入正确的手机号码", "error");
|
||
// return;
|
||
// }
|
||
if (data.NativePlace === "") {
|
||
this.tips("请选择籍贯", "error");
|
||
return;
|
||
}
|
||
if (data.residence === "" || data.residence === null) {
|
||
this.tips("请选择现居地", "error");
|
||
return;
|
||
}
|
||
if (data.address === "" || data.address === null) {
|
||
this.tips("请输入详细地址", "error");
|
||
return;
|
||
}
|
||
if (data.WorkArea === ""&&![0].includes(this.vuex_user.userType)) {
|
||
this.tips("请选择工作领域", "error");
|
||
return;
|
||
}
|
||
this.$u.apiList.UpdateUser(data).then((res) => {
|
||
/* uni.showToast({
|
||
title: "修改成功",
|
||
duration: 2000,
|
||
}); */
|
||
this.$refs.uToast.show({
|
||
title: "修改成功",
|
||
type: "success",
|
||
});
|
||
setTimeout(() => {
|
||
this.$u.route({
|
||
url: "pages/my/mySeting/mySeting",
|
||
});
|
||
}, 1000);
|
||
});
|
||
},
|
||
// 盘判断出生日期
|
||
isBirthday(data) {
|
||
return new Date(data) >= new Date();
|
||
},
|
||
// 选择工作领域
|
||
selectWorkArea(e) {
|
||
this.form.WorkArea = e[0].label;
|
||
this.form.workFieldId = e[0].value;
|
||
},
|
||
// 选择兴趣爱好
|
||
selectHobby() {
|
||
this.$u.route({
|
||
url: "pages/my/myDetails/myInterest",
|
||
});
|
||
},
|
||
// 选择籍贯
|
||
selectNativePlace(e) {
|
||
this.form.nativeProvince = e.province.label;
|
||
this.form.nativeCity = e.city.label;
|
||
this.form.nativeArea = e.area.label;
|
||
this.form.NativePlace =
|
||
e.province.label + "-" + e.city.label + "-" + e.area.label;
|
||
var arr = [];
|
||
// - 0 是转化为隐式转换为数组类型
|
||
arr.push(e.province.value - 0);
|
||
arr.push(e.city.value - 0);
|
||
arr.push(e.area.value - 0);
|
||
this.NativePlaceId = arr;
|
||
},
|
||
// 选择出生日期
|
||
selectBirthdays(e) {
|
||
this.form.birthday = e.year + "-" + e.month + "-" + e.day;
|
||
this.birthdaysId = e.year + "-" + e.month + "-" + e.day;
|
||
},
|
||
// 选择性别
|
||
selectSex(e) {
|
||
this.form.sex = e[0].label;
|
||
this.sexId = [parseInt(e[0].value)];
|
||
},
|
||
// 选择地址
|
||
selectAddress(e) {
|
||
this.form.nHomProvince = e.province.label;
|
||
this.form.nHomCity = e.city.label;
|
||
this.form.nHomArea = e.area.label;
|
||
this.form.residence =
|
||
e.province.label + "-" + e.city.label + "-" + e.area.label;
|
||
var arr = [];
|
||
// - 0 是转化为隐式转换为数组类型
|
||
arr.push(e.province.value - 0);
|
||
arr.push(e.city.value - 0);
|
||
arr.push(e.area.value - 0);
|
||
this.addressId = arr;
|
||
},
|
||
goHome() {
|
||
this.$u.route({
|
||
url: "pages/my/mySeting/mySeting",
|
||
});
|
||
},
|
||
//返回上一级
|
||
router() {
|
||
this.$u.route({
|
||
url: "pages/my/mySeting/mySeting",
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.group {
|
||
width: 100vw;
|
||
flex: 1 1 auto;
|
||
overflow-y: auto;
|
||
}
|
||
.section_2 {
|
||
width: calc(100% - 60rpx);
|
||
margin: 0.1rem auto 0.5rem;
|
||
border-radius: 40rpx;
|
||
background: #fff;
|
||
padding: 40rpx;
|
||
}
|
||
.image-right {
|
||
width: 12rpx;
|
||
height: 20rpx;
|
||
margin-left: 20rpx;
|
||
// margin-top: 5rpx;
|
||
}
|
||
.text_15 {
|
||
width: 200rpx;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: rgba(0, 0, 0, 0.9);
|
||
}
|
||
|
||
.button_1,
|
||
.button {
|
||
padding: 0.13rem 0;
|
||
color: rgb(255, 255, 255);
|
||
font-size: 0.15rem;
|
||
line-height: 0.14rem;
|
||
letter-spacing: 0.03rem;
|
||
white-space: nowrap;
|
||
background-color: #3cb5fb;
|
||
border-radius: 0.3rem;
|
||
width: 3.1rem;
|
||
margin: 0 auto;
|
||
z-index: 999;
|
||
}
|
||
.list-row {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
height: 120rpx;
|
||
border-bottom: 2rpx solid #f6f8f9;
|
||
&:last-of-type {
|
||
border-bottom: none;
|
||
}
|
||
}
|
||
.item-row {
|
||
display: flex;
|
||
width: 380rpx;
|
||
align-items: center;
|
||
position: relative;
|
||
}
|
||
|
||
.input-cover {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
z-index: 1;
|
||
}
|
||
|
||
.flex-center {
|
||
height: 120rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
// 按钮
|
||
.btn-box {
|
||
position: fixed;
|
||
width: 100%;
|
||
bottom: 0;
|
||
height: 150rpx;
|
||
border-top: 1px solid #f1f2f6;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background-color: white;
|
||
}
|
||
</style>
|