293 lines
7.0 KiB
Vue
293 lines
7.0 KiB
Vue
<template>
|
|
<view class="change-info-container">
|
|
<view class="title-main">完善你的资料</view>
|
|
<view class="title-sub"></view>
|
|
|
|
<view class="avatar-section">
|
|
<view class="avatar-container">
|
|
<image class="avatar-img" :src="imgUrl" mode="aspectFill" @click="chooseImage"/>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 表单部分保持不变 -->
|
|
<view class="form-section">
|
|
<view class="form-row">
|
|
<view class="form-label">取个昵称</view>
|
|
<view class="input-wrapper">
|
|
<input class="form-input" v-model="userInfo.userName" placeholder="请输入昵称" />
|
|
</view>
|
|
</view>
|
|
<view class="form-row">
|
|
<view class="form-label">你的手机号</view>
|
|
<view class="input-wrapper">
|
|
<input class="form-input" v-model="userInfo.phone" placeholder="请输入您的手机号" />
|
|
</view>
|
|
</view>
|
|
<view class="form-row">
|
|
<view class="form-label">你的性别</view>
|
|
<view class="input-wrapper">
|
|
<picker class="form-input gender-select" mode="selector" :range="genderOptions" range-key="label" @change="selectGender" v-model="userInfo.gender">
|
|
<view class="gender-text">{{userInfo.sexLabel}}</view>
|
|
</picker>
|
|
</view>
|
|
</view>
|
|
<view class="form-row">
|
|
<view class="form-label">证件号</view>
|
|
<view class="input-wrapper">
|
|
<input class="form-input" v-model="userInfo.idCard" placeholder="请输入您的证件号" />
|
|
</view>
|
|
</view>
|
|
<view class="form-row">
|
|
<view class="form-label">所属单位</view>
|
|
<view class="input-wrapper">
|
|
<input class="form-input" :value="userInfo.unitName" disabled />
|
|
</view>
|
|
</view>
|
|
|
|
<view class="form-group">
|
|
<view class="group-title">联系信息</view>
|
|
<view class="form-row">
|
|
<view class="form-label">邮箱</view>
|
|
<view class="input-wrapper">
|
|
<input class="form-input" v-model="userInfo.email" placeholder="请输入邮箱" />
|
|
</view>
|
|
</view>
|
|
<view class="form-row">
|
|
<view class="form-label">车牌号</view>
|
|
<view class="input-wrapper">
|
|
<input class="form-input" v-model="userInfo.carNumber" placeholder="请输入车牌号" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<button class="submit-btn" @click="onsubmit()">确认修改</button>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {uploadFiles} from "../../../../common/upload";
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
userInfo: {
|
|
idCard: '',
|
|
unitName:'',
|
|
email: '',
|
|
carNumber: '',
|
|
img: '',
|
|
userName:'',
|
|
phone:'',
|
|
gender:'',
|
|
sexLabel:'',
|
|
|
|
},
|
|
genderOptions: [
|
|
{value: 1, label: '男'},
|
|
{value: 2, label: '女'}
|
|
],
|
|
imgUrl:''
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.getUserInfo()
|
|
console.log(this.userInfo);
|
|
|
|
},
|
|
methods: {
|
|
getUserInfo() {
|
|
let params = {
|
|
id: this.vuex_user.id,
|
|
unitId: this.vuex_user.unitId,
|
|
}
|
|
this.$u.api.unit.queryEmployeeById(params).then(res => {
|
|
if (res.code == "200") {
|
|
this.userInfo =res.data;
|
|
this.userInfo.sexLabel = this.genderOptions[this.userInfo.gender-1].label;
|
|
params.img = this.userInfo.img;
|
|
this.$u.api.getImageUrl(params).then(res=>{
|
|
if (res.code == 200) {
|
|
this.imgUrl=res.data[0].url;
|
|
}
|
|
});
|
|
}
|
|
});
|
|
this.$u.api.unit.queryUnitById(params).then(res => {
|
|
if (res.code == 200) {
|
|
this.userInfo.unitName =res.data.name;
|
|
}
|
|
});
|
|
},
|
|
selectGender(e) {
|
|
const index = e.detail.value;
|
|
this.userInfo.gender = this.genderOptions[index].value;
|
|
this.userInfo.sexLabel = this.genderOptions[index].label;
|
|
},
|
|
onsubmit(){
|
|
this.$u.api.unit.updateEmployee(this.userInfo).then(res => {
|
|
if (res.code == 200) {
|
|
uni.reLaunch({
|
|
url: '/pages/sys/user/mine'
|
|
});
|
|
}
|
|
});
|
|
},
|
|
chooseImage() {
|
|
uni.chooseImage({
|
|
count: 1,
|
|
sizeType: ['compressed'],
|
|
sourceType: ['album', 'camera'],
|
|
success: async (res) => {
|
|
const tempFilePaths = res.tempFilePaths;
|
|
this.userInfo.img = tempFilePaths[0];
|
|
const result = await uploadFiles({
|
|
files: tempFilePaths,
|
|
url: this.vuex_config.baseUrl + '/resource/oss/upload',
|
|
name: 'file',
|
|
vm: this
|
|
});
|
|
this.userInfo.img = result[0].data.ossId;
|
|
this.imgUrl = result[0].data.url;
|
|
const allSuccess = result.every(item => item.code == 200);
|
|
if (!allSuccess) {
|
|
uni.showToast({
|
|
title: '上传失败',
|
|
icon: 'none'
|
|
});
|
|
return;
|
|
}
|
|
}
|
|
});
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.change-info-container {
|
|
position: relative;
|
|
padding-bottom: 60rpx;
|
|
padding-top: 24rpx;
|
|
min-height: 100vh;
|
|
background: linear-gradient(180deg, #d2edff 0%, #ffffff 100%);
|
|
}
|
|
|
|
.back-arrow {
|
|
width: 24rpx;
|
|
height: 42rpx;
|
|
left: 45rpx;
|
|
}
|
|
|
|
.title-main {
|
|
font-size: 50rpx;
|
|
font-weight: bold;
|
|
color: #000;
|
|
margin-top: 45rpx;
|
|
margin-left: 65rpx;
|
|
}
|
|
|
|
.title-sub {
|
|
font-size: 50rpx;
|
|
color: #000;
|
|
font-weight: bold;
|
|
margin-left: 65rpx;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
.avatar-section {
|
|
margin: 0 68rpx 62rpx 68rpx;
|
|
display: flex;
|
|
}
|
|
|
|
.avatar-container {
|
|
position: relative;
|
|
width: 200rpx;
|
|
height: 200rpx;
|
|
border-radius: 50%;
|
|
border: 2rpx solid #e0e0e0;
|
|
background-color: #fff;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.avatar-img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
|
|
|
|
.form-section {
|
|
margin: 0 68rpx;
|
|
background: transparent;
|
|
}
|
|
|
|
.form-row {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 18rpx;
|
|
}
|
|
|
|
.form-label {
|
|
color: #555;
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
width: 200rpx;
|
|
}
|
|
|
|
.input-wrapper {
|
|
flex: 1;
|
|
}
|
|
|
|
.form-input {
|
|
width: 100%;
|
|
background: #fff;
|
|
border-radius: 14rpx;
|
|
border: 2rpx solid #e0e0e0;
|
|
padding: 0 20rpx;
|
|
height: 98rpx;
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
}
|
|
|
|
.gender-select {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.gender-text {
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
.form-group {
|
|
margin-top: 40rpx;
|
|
border-top: 1px solid #e0e0e0;
|
|
padding-top: 20rpx;
|
|
}
|
|
|
|
.group-title {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.submit-btn {
|
|
width: 90vw;
|
|
height: 80rpx;
|
|
background: linear-gradient(90deg, #2e6cf6 0%, #4fc3f7 100%);
|
|
color: #fff;
|
|
font-size: 32rpx;
|
|
border: none;
|
|
border-radius: 40rpx;
|
|
margin: 80rpx auto 40rpx auto;
|
|
display: block;
|
|
box-shadow: 0 8rpx 24rpx rgba(46, 108, 246, 0.12);
|
|
}
|
|
|
|
.form-input:disabled {
|
|
background-color: #f5f5f5;
|
|
color: #666;
|
|
}
|
|
</style>
|