You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
78 lines
1.7 KiB
78 lines
1.7 KiB
<!--
|
|
* @Author: ch
|
|
* @Date: 2022-03-28 15:38:23
|
|
* @LastEditors: ch
|
|
* @LastEditTime: 2022-04-24 18:24:33
|
|
* @Description: file content
|
|
-->
|
|
<template>
|
|
<view>
|
|
<UiPageHeader class="header" title="设置昵称">
|
|
<view slot="operation" class="header-btn" @click="confirm">确定</view>
|
|
</UiPageHeader>
|
|
<u--input class="input" v-model="userInfo.nickname" maxlength="10" placeholder="请输入昵称" clearable ></u--input>
|
|
<view class="tips">
|
|
<text>请输入1-10个字符</text>
|
|
<text>({{userInfo.nickname.length}}/10)</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import UiButton from '@/components/UiButton.vue'
|
|
import UiCell from '@/components/UiCell.vue'
|
|
import UiPageHeader from '@/components/UiPageHeader.vue'
|
|
import {ApiPutUser} from '@/common/api/account';
|
|
export default {
|
|
components: { UiCell, UiButton, UiPageHeader },
|
|
computed:{
|
|
userInfo (){
|
|
return this.$store.state.userInfo
|
|
}
|
|
},
|
|
methods:{
|
|
async confirm(){
|
|
const {error, result} = await ApiPutUser({
|
|
nickname : this.userInfo.nickname
|
|
});
|
|
if(error){
|
|
ui.$u.totas(error.message);
|
|
return false;
|
|
}
|
|
this.$store.commit('SET_USER_INFO', {...this.userInfo});
|
|
this.$Router.back();
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
page{
|
|
background: $color-grey1;
|
|
}
|
|
.header{
|
|
background: $color-grey0;
|
|
}
|
|
.header-btn{
|
|
height: 88rpx;
|
|
line-height: 88rpx;
|
|
font-size: $font-size-base;
|
|
color: $color-yellow3;
|
|
}
|
|
.input{
|
|
margin-top: 20rpx;
|
|
padding: 20rpx 40rpx !important;
|
|
height: 100rpx;
|
|
background: $color-grey0;
|
|
border: 0;
|
|
font-size: $font-size-base;
|
|
color: $color-grey6;
|
|
}
|
|
.tips{
|
|
padding: 20rpx 40rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
text{
|
|
font-size: $font-size-sm;
|
|
color: $color-grey4;
|
|
}
|
|
}
|
|
</style> |