<template>
<view class="container">
<view class=""></view>
<view class="wrapper">
<view class="left-top-sign">
<image class="imgss" :src="banner" v-model="banner"></image>
</view>
<view class="welcome">
<input @change="changesnumber" @blur="onNickName" type="nickname" placeholder="请输入昵称" v-model="value"
name="value" />
</view>
</view>
<view class="oauth">
<button class="confirm-btn" style="font-size: 13px;" open-type="chooseAvatar"
@chooseavatar="bindchooseavatar">获取头像</button>
</view>
</view>
</view>
</template>
<script>
import {
imgUrl
} from "@/http/baseApi.js"
export default {
data() {
return {
banner: 'http://pic.un1024.com/kaliu/my/avatar-default.jpg',
value: ''
}
},
onLoad(option) {
const userinfo = uni.getStorageSync("userinfo")
this.banner = userinfo.avatar ? userinfo.avatar : this.banner
this.value = userinfo.nickName ? userinfo.nickName : ''
},
methods: {
bindchooseavatar(e) {
console.log(e);
this.banner = e.detail.avatarUrl
this.changeinfo(this.value, this.banner)
},
onNickName(e) {
console.log(e.detail);
console.log(4444);
this.value = e.detail.value
this.changeinfo(this.value, this.banner)
},
changesnumber() {
this.changeinfo(this.value, this.banner)
},
async changeinfo(value, banner) { //修改用户信息
const resUrl = await this.uploadact(value, banner);
await this.reqEditAvatar(resUrl)
},
//修改头像
uploadact(value, filePath) {
return new Promise((resolve, reject) => {
uni.uploadFile({
url: imgUrl + '/api/Common/upload', //仅为示例,非真实的接口地址
filePath: filePath,
formData: {
'category': 'category2'
},
name: 'file',
success: function(res) {
console.log(
"图片上传返回地址res :>> ",
JSON.parse(res.data).data
);
resolve(imgUrl+JSON.parse(res.data).data.url);
},
fail: (err) => {
reject(err);
return uni.showToast({
icon: "loading",
title: "上传失败",
});
},
});
})
},
async reqEditAvatar(resUrl) {
let data = {
nickName: this.value,
avatarUrl: resUrl,
}
let url = '/userInfo/updateUser';
await this.$api.apiget(url, data)
this.$apimsg.msg('修改成功');
uni.switchTab({
url: '/pages/my/my'
})
}
},
}
</script>
<style lang='scss'>
page {
background: #fff;
}
.container {
padding-top: 115px;
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
background: #fff;
}
.wrapper {
position: relative;
z-index: 90;
background: #fff;
padding-bottom: 40upx;
}
.back-btn {
position: absolute;
left: 40upx;
z-index: 9999;
padding-top: var(--status-bar-height);
top: 40upx;
font-size: 40upx;
color: $font-color-dark;
}
.left-top-sign {
font-size: 120upx;
color: $page-color-base;
position: relative;
text-align: center;
.imgss {
width: 176upx;
height: 176upx;
}
}
.right-top-sign {
position: absolute;
top: 80upx;
right: -30upx;
z-index: 95;
&:before,
&:after {
display: block;
content: "";
width: 400upx;
height: 80upx;
background: #b4f3e2;
}
&:before {
transform: rotate(50deg);
border-radius: 0 50px 0 0;
}
&:after {
position: absolute;
right: -198upx;
top: 0;
transform: rotate(-50deg);
border-radius: 50px 0 0 0;
/* background: pink; */
}
}
.left-bottom-sign {
position: absolute;
left: -270upx;
bottom: -320upx;
border: 100upx solid #d0d1fd;
border-radius: 50%;
padding: 180upx;
}
.welcome {
position: relative;
font-size: 36upx;
color: #555;
text-shadow: 1px 0px 1px rgba(0, 0, 0, .3);
text-align: center;
}
.input-content {
padding: 0 60upx;
}
.input-item {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
padding: 0 30upx;
background: $page-color-light;
height: 120upx;
border-radius: 4px;
margin-bottom: 50upx;
&:last-child {
margin-bottom: 0;
}
.tit {
height: 50upx;
line-height: 56upx;
font-size: $font-sm+2upx;
color: $font-color-base;
}
input {
height: 60upx;
font-size: $font-base + 2upx;
color: $font-color-dark;
width: 100%;
}
}
.confirm-btn {
width: 630upx;
height: 76upx;
line-height: 76upx;
border-radius: 50px;
margin: auto;
margin-top: 70upx;
background: $uni-color-primary;
background-color: #277EEB;
color: #fff;
font-size: $font-lg;
&:after {
border-radius: 100px;
}
}
.forget-section {
font-size: $font-sm+2upx;
color: $font-color-spec;
text-align: center;
margin-top: 40upx;
}
.register-section {
position: absolute;
left: 0;
bottom: 50upx;
width: 100%;
font-size: $font-sm+2upx;
color: $font-color-base;
text-align: center;
text {
color: $font-color-spec;
margin-left: 10upx;
}
}
</style>