118 lines
3.4 KiB
Vue
118 lines
3.4 KiB
Vue
|
<template>
|
|||
|
|
<view class="u-m-20">
|
|||
|
|
<u-navbar :is-back="true" title="个人信息" :border-bottom="false"></u-navbar>
|
|||
|
|
<view>
|
|||
|
|
<u-cell-group>
|
|||
|
|
<u-cell-item title="头像" :arrow="true" hover-class="none" @click="updateAvatar">
|
|||
|
|
<u-avatar :src="pic" size="100"></u-avatar>
|
|||
|
|
</u-cell-item>
|
|||
|
|
</u-cell-group>
|
|||
|
|
<u-cell-group>
|
|||
|
|
<u-cell-item title="昵称" :arrow="true" hover-class="none" @click="updateName">
|
|||
|
|
{{vuex_user.user.nickName}}
|
|||
|
|
</u-cell-item>
|
|||
|
|
</u-cell-group>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<u-modal v-model="showModel" @confirm="confirmName" ref="uModal" :async-close="true"
|
|||
|
|
title="设置昵称">
|
|||
|
|
<view class="slot-content">
|
|||
|
|
<u-input v-model="nickName" type="text" :border="false" placeholder="请输入昵称"/>
|
|||
|
|
</view>
|
|||
|
|
</u-modal>
|
|||
|
|
|
|||
|
|
<!-- <view class="u-m-t-20">
|
|||
|
|
<u-button type="primary" @click="subProfile">提交</u-button>
|
|||
|
|
</view> -->
|
|||
|
|
|
|||
|
|
<!-- 如果是微信登录小程序，则获取用户的昵称与头像 -->
|
|||
|
|
<!-- #ifdef MP-WEIXIN -->
|
|||
|
|
<!-- <u-button type="default">使用微信头像与昵称</u-button> -->
|
|||
|
|
<!-- #endif -->
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import config from "@/common/config.js" // 全局配置文件
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
pic:uni.getStorageSync('lifeData').vuex_user.user.avatar.includes(config.staticUrl)?uni.getStorageSync('lifeData').vuex_user.user.avatar:config.staticUrl+uni.getStorageSync('lifeData').vuex_user.user.avatar,
|
|||
|
|
nickName:null,
|
|||
|
|
showModel:false,
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
updateName(){
|
|||
|
|
this.showModel = true;
|
|||
|
|
},
|
|||
|
|
confirmName() {
|
|||
|
|
if(!this.nickName){
|
|||
|
|
this.showModel = false;
|
|||
|
|
return this.$mytip.toast('请输入昵称')
|
|||
|
|
}
|
|||
|
|
let url = "api/profile/updateProfile";
|
|||
|
|
let vuex_user = uni.getStorageSync('lifeData').vuex_user
|
|||
|
|
let user = vuex_user.user
|
|||
|
|
let userId = user.userId;
|
|||
|
|
this.$u.put(url,{
|
|||
|
|
userId:userId,
|
|||
|
|
nickName:this.nickName,
|
|||
|
|
}).then(data => {
|
|||
|
|
// 关闭
|
|||
|
|
user.nickName = this.nickName
|
|||
|
|
this.$u.vuex('vuex_user', vuex_user);
|
|||
|
|
this.showModel = false;
|
|||
|
|
this.$mytip.toast('昵称修改成功')
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
updateAvatar(){
|
|||
|
|
this.$u.route('/pages/profile/avatar')
|
|||
|
|
},
|
|||
|
|
subProfile(){
|
|||
|
|
// 1.更新vuex中的用户信息
|
|||
|
|
this.$mytip.toast('修改成功')
|
|||
|
|
// 2.页面跳转
|
|||
|
|
uni.switchTab({
|
|||
|
|
url: '/pages/center/center'
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
getUserProfile(){
|
|||
|
|
// 如果是微信登录小程序，则获取用户的昵称与头像
|
|||
|
|
// #ifdef MP-WEIXIN
|
|||
|
|
// 此处执行微信才执行
|
|||
|
|
// #endif
|
|||
|
|
var that = this;
|
|||
|
|
uni.getUserProfile({
|
|||
|
|
desc: '获取您的微信信息以授权小程序',
|
|||
|
|
lang: 'zh_CN',
|
|||
|
|
success: UserProfileRes => {
|
|||
|
|
console.log(UserProfileRes)
|
|||
|
|
uni.login({
|
|||
|
|
provider: 'weixin',
|
|||
|
|
success: function(loginRes) {
|
|||
|
|
let avatarUrl = UserProfileRes.userInfo.avatarUrl; //用户头像
|
|||
|
|
let nickName = UserProfileRes.userInfo.nickName; //用户微信名
|
|||
|
|
let gender = UserProfileRes.userInfo.gender;//性别
|
|||
|
|
console.log(avatarUrl);
|
|||
|
|
// 去修改用户的昵称与头像
|
|||
|
|
},
|
|||
|
|
fail(err) {
|
|||
|
|
console.log(err)
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
fail:err=>{
|
|||
|
|
console.log(err)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.slot-content{
|
|||
|
|
padding: 40rpx;
|
|||
|
|
}
|
|||
|
|
</style>
|