119 lines
2.8 KiB
Vue
119 lines
2.8 KiB
Vue
<template>
|
|
<view>
|
|
<view class="flex items-center justify-center" v-if="userInfo" style="padding: 130rpx 0">
|
|
<button open-type="chooseAvatar" @chooseavatar="chooseAvatar" class="btn">
|
|
<u-avatar :src="`${userInfo.avatar ? userInfo.avatar : ''}`" size="80"/>
|
|
</button>
|
|
</view>
|
|
<view class="p-20">
|
|
<u-cell-group :border="false">
|
|
<u-cell title="昵称">
|
|
<input type="nickname" class="text-right" v-model="userInfo.nickname"
|
|
slot="right-icon" @change="changeUsername"/>
|
|
</u-cell>
|
|
</u-cell-group>
|
|
</view>
|
|
<view class="p-20">
|
|
<u-button @click="save" type="primary" shape="circle">保存修改</u-button>
|
|
</view>
|
|
<u-action-sheet :actions="genderList" :show="showActionSheet" :closeOnClickAction="true"
|
|
round="10" cancelText="取消" @select="selectGender"
|
|
@close="showActionSheet = false"/>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {userInfoReq, userInfoUpdateReq} from "@/api/user";
|
|
import {setUserInfo} from "@/util/user";
|
|
import {uploadImg} from "@/util";
|
|
import {MAIN_API} from "@/config";
|
|
|
|
export default {
|
|
name: "profile",
|
|
|
|
data() {
|
|
return {
|
|
cardTypeList: ['充值卡', '月卡', '次卡'],
|
|
uri: MAIN_API,
|
|
userInfo: {
|
|
avatar: null,
|
|
nickname: null,
|
|
phone: null,
|
|
gender: null,
|
|
},
|
|
genderList: [
|
|
{
|
|
name: '未知',
|
|
value: 0
|
|
},
|
|
{
|
|
name: '男',
|
|
value: 1
|
|
},
|
|
{
|
|
name: '女',
|
|
value: 2
|
|
}
|
|
],
|
|
showModal: false,
|
|
showActionSheet: false,
|
|
}
|
|
},
|
|
methods: {
|
|
async getUserInfo() {
|
|
const {data} = await userInfoReq()
|
|
this.userInfo = data
|
|
},
|
|
async chooseAvatar({detail}) {
|
|
const url = detail.avatarUrl
|
|
const {path} = await uploadImg(url)
|
|
console.log(path)
|
|
this.userInfo.avatar = path
|
|
},
|
|
selectGender(item) {
|
|
this.userInfo.gender = item.value
|
|
this.showActionSheet = false
|
|
},
|
|
changeUsername({detail}) {
|
|
const {value} = detail
|
|
this.userInfo.nickname = value
|
|
},
|
|
async save() {
|
|
uni.showLoading({
|
|
title: '保存中'
|
|
})
|
|
await userInfoUpdateReq({
|
|
avatar: this.userInfo.avatar,
|
|
nickname: this.userInfo.nickname,
|
|
})
|
|
uni.hideLoading()
|
|
uni.showToast({
|
|
icon: 'success',
|
|
title: '已保存',
|
|
complete: () => {
|
|
setTimeout(() => {
|
|
setUserInfo({
|
|
header: this.userInfo.avatar,
|
|
nickname: this.userInfo.nickname,
|
|
})
|
|
uni.navigateBack()
|
|
}, 1500)
|
|
}
|
|
})
|
|
}
|
|
},
|
|
async onShow() {
|
|
await this.getUserInfo()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.btn {
|
|
background: none;
|
|
}
|
|
|
|
.btn::after {
|
|
border: none;
|
|
}
|
|
</style> |