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.
shop-app/pages/account/setting/setName.vue

80 lines
1.7 KiB

<!--
* @Author: ch
* @Date: 2022-03-28 15:38:23
* @LastEditors: ch
* @LastEditTime: 2022-04-29 23:00:02
* @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">
page {
background: $color-grey1;
}
</style>
<style lang="scss" scoped>
.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>