first commit

项目合集/聊天室/app版本/代码/fontend/pages/editName/editName.vue

@@ -0,0 +1,123 @@
+<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>