123 lines
2.6 KiB
Vue
123 lines
2.6 KiB
Vue
<template>
|
||
<view class="editName">
|
||
<view class="content">
|
||
<view class="text_top">我在群里的昵称</view>
|
||
<view class="text_tips"
|
||
>昵称修改后，只会在此群显示，群内成员都可以看见。</view
|
||
>
|
||
|
||
<view class="editUserName">
|
||
<image :src="UserInfo.img"></image>
|
||
<input
|
||
class="uni-input"
|
||
v-model="NewUserName"
|
||
type="text"
|
||
@input="nameChange"
|
||
placeholder=""
|
||
value=""
|
||
/>
|
||
<icon
|
||
v-if="isShowClear"
|
||
type="clear"
|
||
size="15"
|
||
@click="NewUserName = ''"
|
||
/>
|
||
</view>
|
||
|
||
<div class="submit" :class="isActive ? 'active' : ''">完成</div>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
UserInfo: {}, // 用户登录信息
|
||
OldUserName: "",
|
||
NewUserName: "",
|
||
isActive: false,
|
||
isShowClear: true,
|
||
};
|
||
},
|
||
onLoad() {
|
||
this.UserInfo = uni.getStorageSync("UserInfo");
|
||
this.NewUserName = this.UserInfo.name;
|
||
this.OldUserName = this.UserInfo.name;
|
||
},
|
||
methods: {
|
||
nameChange() {
|
||
this.NewUserName.length == 0
|
||
? (this.isShowClear = false)
|
||
: (this.isShowClear = true);
|
||
|
||
if (this.NewUserName != this.OldUserName) {
|
||
this.isActive = true;
|
||
} else {
|
||
this.isActive = false;
|
||
}
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.editName {
|
||
padding: 0 60rpx;
|
||
.content {
|
||
margin-top: 140rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
.text_top {
|
||
margin-bottom: 45rpx;
|
||
font-weight: 700;
|
||
font-size: 36rpx;
|
||
}
|
||
.text_tips {
|
||
text-align: center;
|
||
color: #191919;
|
||
font-size: 32rpx;
|
||
margin-bottom: 65rpx;
|
||
}
|
||
.editUserName {
|
||
width: 100%;
|
||
border-top: 0.5rpx solid #e5e5e5;
|
||
border-bottom: 0.5rpx solid #e5e5e5;
|
||
height: 105rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
image {
|
||
width: 75rpx;
|
||
height: 75rpx;
|
||
border-radius: 12rpx;
|
||
margin-right: 30rpx;
|
||
}
|
||
input {
|
||
flex: 1;
|
||
height: 75rpx;
|
||
}
|
||
}
|
||
|
||
.active {
|
||
color: #fff !important;
|
||
background: #08c05f !important;
|
||
}
|
||
.submit {
|
||
width: 345rpx;
|
||
height: 75rpx;
|
||
background: #f2f2f2;
|
||
color: #c2c2c2;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: fixed;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
bottom: 170rpx;
|
||
border-radius: 10rpx;
|
||
font-size: 32rpx;
|
||
}
|
||
}
|
||
}
|
||
</style> |