334 lines
7.2 KiB
Vue
334 lines
7.2 KiB
Vue
<template>
|
||
<view class="container">
|
||
<view class="list">
|
||
<view class="item u-flex u-col-center u-row-between">
|
||
<view class="l">
|
||
头像
|
||
</view>
|
||
<view class="r" @click="upload">
|
||
<image :src="$config.imageBaseUrl + userInfo.avatar" mode="aspectFill" v-if="userInfo.avatar"></image>
|
||
<image src="@/static/images/mine/up.png" mode="aspectFill" v-else></image>
|
||
</view>
|
||
</view>
|
||
<view class="item u-flex u-col-center u-row-between">
|
||
<view class="l">
|
||
昵称<text>*</text>
|
||
</view>
|
||
<view class="r">
|
||
<input type="text" v-model="userInfo.nickName" placeholder="请输入">
|
||
</view>
|
||
</view>
|
||
<view class="item u-flex u-col-center u-row-between">
|
||
<view class="l">
|
||
性别<text>*</text>
|
||
</view>
|
||
<view class="r u-flex u-col-center u-row-right">
|
||
<view class="i u-flex u-col-center" @click="userInfo.sex=1">
|
||
<image src="@/static/images/mine/c2.png" mode="aspectFill" v-if="userInfo.sex==1"></image>
|
||
<image src="@/static/images/mine/c1.png" mode="aspectFill" v-else></image>
|
||
<text :class="{on:userInfo.sex==1}">男</text>
|
||
|
||
</view>
|
||
<view class="i u-flex u-col-center" @click="userInfo.sex=2">
|
||
<image src="@/static/images/mine/c2.png" mode="aspectFill" v-if="userInfo.sex==2"></image>
|
||
<image src="@/static/images/mine/c1.png" mode="aspectFill" v-else></image>
|
||
<text :class="{on:userInfo.sex==2}">女</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="item u-flex u-col-center u-row-between">
|
||
<view class="l">
|
||
手机号<text>*</text>
|
||
</view>
|
||
<view class="r">
|
||
<input type="number" v-model="userInfo.phonenumber" placeholder="请输入">
|
||
</view>
|
||
</view>
|
||
<view class="item u-flex u-col-center u-row-between">
|
||
<view class="l">
|
||
邮箱<text>*</text>
|
||
</view>
|
||
<view class="r">
|
||
<input type="text" v-model="userInfo.email" placeholder="请输入">
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
<view class="f-btn" @click="submit">
|
||
确认
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {userInformation} from '@/api/mine/index.js'
|
||
import {uploadAvatar, getUserProfile} from '@/api/system/user.js'
|
||
export default {
|
||
data() {
|
||
return {
|
||
http:this.$imgUrl,
|
||
userId: "",
|
||
userInfo: {
|
||
userName: '',
|
||
phonenumber: "",
|
||
type: '',
|
||
nickName: "",
|
||
avatar: '',
|
||
sex: "",
|
||
email:"",
|
||
},
|
||
}
|
||
},
|
||
onLoad() {
|
||
let user = uni.getStorageSync('user')
|
||
this.userId = user.userId
|
||
if (!user.userId) {
|
||
uni.reLaunch({
|
||
url: '/pages/index/index'
|
||
})
|
||
return
|
||
}
|
||
this.getUserInfo()
|
||
},
|
||
methods: {
|
||
upload(){
|
||
uni.chooseImage({
|
||
count: 1, // 限制选择文件的数量，这里只选择1个文件
|
||
sizeType: ['compressed'], // 限制选择文件的类型，这里只选择压缩过的文件
|
||
success: (res) => {
|
||
uploadAvatar({
|
||
"filePath":res.tempFilePaths[0]
|
||
}).then(res => {
|
||
console.log('res222',res)
|
||
this.userInfo.avatar = res.imgUrl
|
||
})
|
||
},
|
||
fail: (err) => {
|
||
console.log(err)
|
||
}
|
||
})
|
||
|
||
},
|
||
submit(){
|
||
if(!this.userInfo.nickName){
|
||
uni.showToast({
|
||
title: '昵称不能为空',
|
||
icon: "none",
|
||
duration: 1500
|
||
});
|
||
return
|
||
}
|
||
if(!this.userInfo.sex){
|
||
uni.showToast({
|
||
title: '请选择性别',
|
||
icon: "none",
|
||
duration: 1500
|
||
});
|
||
return
|
||
}
|
||
if(!this.userInfo.phonenumber){
|
||
uni.showToast({
|
||
title: '手机号不能为空',
|
||
icon: "none",
|
||
duration: 1500
|
||
});
|
||
return
|
||
}
|
||
if(!this.userInfo.email){
|
||
uni.showToast({
|
||
title: '邮箱不能为空',
|
||
icon: "none",
|
||
duration: 1500
|
||
});
|
||
return
|
||
}
|
||
userInformation({
|
||
userId:this.userId,
|
||
email:this.userInfo.email,
|
||
phonenumber:this.userInfo.phonenumber,
|
||
nickName:this.userInfo.nickName,
|
||
avatar:this.userInfo.avatar,
|
||
sex:this.userInfo.sex,
|
||
}).then(res => {
|
||
if(res.code == 200){
|
||
uni.showToast({
|
||
title: '修改成功',
|
||
icon: "none",
|
||
duration: 1500
|
||
});
|
||
|
||
setTimeout(() => {
|
||
uni.navigateBack({
|
||
delta:1
|
||
})
|
||
}, 1500)
|
||
}else{
|
||
uni.showToast({
|
||
title:res.msg,
|
||
icon: "none",
|
||
duration: 1500
|
||
});
|
||
}
|
||
|
||
})
|
||
},
|
||
getUserInfo() {
|
||
getUserProfile().then(res => {
|
||
this.userInfo = res.data
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
$color: #4892FD;
|
||
|
||
.container {
|
||
.f-btn {
|
||
position: fixed;
|
||
bottom: 60rpx;
|
||
left: 30rpx;
|
||
right: 30rpx;
|
||
height: 90rpx;
|
||
line-height: 90rpx;
|
||
text-align: center;
|
||
background-color: $color;
|
||
color: #fff;
|
||
font-size: 28rpx;
|
||
border-radius: 20rpx;
|
||
}
|
||
|
||
padding:30rpx;
|
||
|
||
.list {
|
||
background-color: #fff;
|
||
border-radius: 20rpx;
|
||
padding: 10rpx 30rpx;
|
||
width:100%;
|
||
.item {
|
||
padding: 20rpx 0;
|
||
border-bottom: 1rpx solid #eee;
|
||
|
||
&:last-child {
|
||
border-bottom: 0;
|
||
}
|
||
|
||
.l {
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
color: #333333;
|
||
line-height: 60rpx;
|
||
height: 60rpx;
|
||
width: 200rpx;
|
||
|
||
text {
|
||
color: #c33;
|
||
margin-left: 6rpx;
|
||
}
|
||
}
|
||
|
||
.r {
|
||
flex: 1;
|
||
width: 1rpx;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
line-height: 40rpx;
|
||
text-align: right;
|
||
|
||
input {
|
||
width: 100%;
|
||
height: 100%;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
image {
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.i {
|
||
margin-left: 30rpx;
|
||
|
||
image {
|
||
width: 35rpx;
|
||
height: 35rpx;
|
||
}
|
||
|
||
text {
|
||
font-size: 24rpx;
|
||
color: #666;
|
||
margin-left: 10rpx;
|
||
}
|
||
|
||
.on {
|
||
color: $color;
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
</style>
|
||
|
||
|
||
<!-- <template>
|
||
<view class="container">
|
||
<uni-list>
|
||
<uni-list-item showExtraIcon="true" :extraIcon="{ type: 'person-filled' }" title="昵称" :rightText="user.nickName" />
|
||
<uni-list-item showExtraIcon="true" :extraIcon="{ type: 'phone-filled' }" title="手机号码"
|
||
:rightText="user.phonenumber" />
|
||
<uni-list-item showExtraIcon="true" :extraIcon="{ type: 'email-filled' }" title="邮箱" :rightText="user.email" />
|
||
<uni-list-item showExtraIcon="true" :extraIcon="{ type: 'auth-filled' }" title="岗位" :rightText="postGroup" />
|
||
<uni-list-item showExtraIcon="true" :extraIcon="{ type: 'staff-filled' }" title="角色" :rightText="roleGroup" />
|
||
<uni-list-item showExtraIcon="true" :extraIcon="{ type: 'calendar-filled' }" title="创建日期"
|
||
:rightText="user.createTime" />
|
||
</uni-list>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { getUserProfile } from "@/api/system/user"
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
user: {},
|
||
roleGroup: "",
|
||
postGroup: ""
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.getUser()
|
||
},
|
||
methods: {
|
||
getUser() {
|
||
getUserProfile().then(response => {
|
||
this.user = response.data
|
||
this.roleGroup = response.roleGroup
|
||
this.postGroup = response.postGroup
|
||
})
|
||
}
|
||
},
|
||
onUnload() {
|
||
const that = this
|
||
return that.$listenOB.goBack()
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background-color: #ffffff;
|
||
}
|
||
|
||
.uni-list {
|
||
width: 100vw;
|
||
}
|
||
</style> -->
|