shop-app/pages/account/setting/setName.vue

<!--
 * @Author: ch
 * @Date: 2022-03-28 15:38:23
 * @LastEditors: ch
 * @LastEditTime: 2022-04-22 19:16:20
 * @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});
		}
	}
}
</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>