<template>
<view class="container" :style="{'min-height':screenHeight+'px'}">
<uni-nav-bar title="个人信息" statusBar fixed leftIcon="arrowleft" @clickLeft="clickBack"></uni-nav-bar>
<view class="content_view">
<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
<image class="avatar" :src="avatarUrl"></image>
</button>
<input type="nickname" class="weui-input" placeholder="请输入昵称" maxlength="15" :value="nickName"
@change="getNickname" />
</view>
<view class="bottom_view">
<view class="report_view" @click="submit">
<text class="report_text">确认修改</text>
</view>
</view>
</view>
</template>
<script>
const defaultAvatarUrl =
'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
import {
uploadTheImg,
} from "@/utils/index.js";
import {
updateNickNameAndHeadImg
} from '@/service/base-service.js'
export default {
data() {
return {
userInfo: {},
avatarUrl: defaultAvatarUrl,
nickName: "",
}
},
created() {
this.userInfo = uni.getStorageSync('memberInfo');
this.nickName = this.userInfo.nickName
this.avatarUrl = this.userInfo.headImage
console.log("userInfo", this.userInfo)
},
mounted() {
},
methods: {
clickBack() {
uni.navigateBack();
},
getNickname(e) {
console.log("getNickname", e.detail.value)
this.nickName = e.detail.value
this.checkNickName()
},
checkNickName() {
if (!this.nickName) {
uni.showToast({
title: '请输入昵称',
icon: 'none'
})
return false
}
let str = this.nickName.trim();
if (str.length == 0) {
uni.showToast({
title: '请输入正确的昵称',
icon: 'none'
})
return false
}
this.nickName = str
// if ((/[^/a-zA-Z0-9\u4E00-\u9FA5]/g).test(str)) {
// uni.showToast({
// title: '请输入中英文和数字',
// icon: 'none'
// })
// return false
// }
return true
},
onChooseAvatar(e) {
console.log("onChooseAvatar===", e)
this.avatarUrl = e.detail.avatarUrl
let params = {
urlType: "public",
prefix: "miniAvatar",
};
let that = this
uploadTheImg([this.avatarUrl], params).then(res => {
// console.log("zsppppppppppppp========", res)
if (!res || res.length == 0) {
return
}
that.avatarUrl = res[0]
})
},
submit() {
console.log("submit提交", this.nickName, this.avatarUrl)
// return
if (!this.avatarUrl) {
uni.showToast({
title: '请上传头像',
icon: 'none'
})
return
}
if (!this.checkNickName()) {
return
}
let params = {
nickName: this.nickName,
headImage: this.avatarUrl,
memberId: this.userInfo.id,
}
console.log("params====", params)
// return
uni.showLoading({
title: '加载中',
mask: true
})
updateNickNameAndHeadImg(params).then(res => {
uni.hideLoading()
console.log("updateNickNameAndHeadImg==", res)
if (res.errorCode != 0) {
return
}
uni.showToast({
title: '修改成功',
icon: 'none'
})
this.userInfo.nickName = this.nickName
this.userInfo.headImage = this.avatarUrl
uni.setStorageSync('memberInfo', this.userInfo)
setTimeout(function() {
uni.$emit("userInfoRefresh", {
isRefresh: true,
});
uni.navigateBack();
}, 2000);
}, err => {
uni.hideLoading()
})
},
}
}
</script>
<style lang='scss'>
.container {
display: flex;
flex-direction: column;
}
/* 边框样式 */
button::after {
border: 0;
}
.content_view {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
margin-top: 68px;
position: relative;
/* background-color: #F6F6FC; */
}
.avatar-wrapper {
width: 100px;
height: 100px;
padding: 0 !important;
margin: 0 !important;
border-radius: 100px;
}
.avatar {
width: 100px;
height: 100px;
border-radius: 100px;
border-style: solid;
border-width: 1px;
border-color: #d6d6d5;
}
.weui-input {
margin-top: 40px;
width: 300px;
height: 40px;
background: #f4f4f6;
line-height: 40px;
text-align: center;
}
.bottom_view {
position: fixed;
bottom: 0;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 100%;
background-color: white;
z-index: 20;
padding-top: 10px;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
.report_view {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 706rpx;
height: 76rpx;
background-color: #e60012;
border-radius: 19px;
margin-bottom: 10px;
}
.report_text {
color: #fff;
font-size: 15px;
}
</style>
网友评论