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

<template>
  <view class="login">
    <image mode="widthFix" src="@/static/orage.png" class="right"></image>
    <image mode="widthFix" src="@/static/blue.png" class="bottom"></image>
    <view class="login_text">
      <view class="text">iChat</view>
      <view class="tips">还您纯粹的聊天体验..</view>
    </view>

    <view class="login_input">
      <uni-icons v-if="SelectImgUrl.length == 0" type="plusempty" size="40" @click="open"></uni-icons>
      <image @click="open" class="portraitImg" v-else :src="SelectImgUrl"></image>

      <input class="user_name" v-model="UserName" type="text" placeholder="昵称" />
      <input class="user_pwd" type="text" v-model="UserRoom" placeholder="群号" />
      <image class="enter" src="@/static/enter.png" @click="EnterInfo"></image>
    </view>

    <uni-popup ref="popup" type="dialog">
      <uni-popup-dialog type="info" title="请选择头像" :duration="2000" 
       @close="close" @confirm="confirm"
        :before-close="true">
        <view class="portrait_list">
          <image mode="widthFix" :class="index == currentIndex ? 'select' : ''" v-for="(item, index) in config.portrait"
            @click="SelectImg(item, index)" :src="'../../static/' + item" :key="index">
          </image>
        </view>
      </uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script>
  import config from "@/config/index.js";
  export default {
    data() {
      return {
        UserName: "",
        UserRoom: "",
        config: config,
        currentIndex: 0,
        SelectImgUrl: "",
      };
    },
    created() {
      this.onSocket();
    },
    methods: {
      onSocket() {
        this._.socket.on("LoginSuccess", (res) => {
          uni.setStorage({
            key: 'UserInfo',
            data: res,
            success: function() {
              uni.redirectTo({
                url: "/pages/index/index",
              });
            }
          });

        });

        this._.socket.on("UserAlready", (res) => {
          uni.showToast({
            icon: "none",
            title: res,
            duration: 2000,
          });
        });
      },
      SelectImg(item, index) {
        this.currentIndex = index;
        this.SelectImgUrl = "../../static/" + item;
      },
      EnterInfo() {
        if (this.SelectImgUrl.length == 0) {
          uni.showToast({
            icon: "none",
            title: "头像必选",
            duration: 2000,
          });
          return;
        }

        if (this.UserName.length == 0) {
          uni.showToast({
            icon: "none",
            title: "昵称必填",
            duration: 2000,
          });
          return;
        }

        if (this.UserRoom.length == 0) {
          uni.showToast({
            icon: "none",
            title: "群号必填",
            duration: 2000,
          });
          return;
        }

        this._.socket.emit("UserLogin", {
          name: this.UserName,
          room: this.UserRoom,
          img: this.SelectImgUrl,
        });
      },
      open() {
        this.$refs.popup.open("center");
      },
      close() {
        // TODO 做一些其他的事情，before-close 为true的情况下，手动执行 close 才会关闭对话框
        // ...
        this.$refs.popup.close();
      },
      /**
       * 点击确认按钮触发
       * @param {Object} done
       * @param {Object} value
       */
      confirm(value) {
        this.$refs.popup.close();
      },
    },
  };
</script>

<style lang="less" scope>
  .login {
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;

    .right {
      position: fixed;
      top: -120rpx;
      transform: translateX(60%);
    }

    .bottom {
      position: fixed;
      transform: translateX(-85%);
      bottom: 10rpx;
    }

    .login_text {
      padding-top: 261.806rpx;
      padding-left: 59.722rpx;

      .text {
        font-family: MicrosoftYaHei-Bold;
        font-size: 69.444rpx;
        color: #000000;
        font-weight: 700;
      }

      .tips {
        font-family: MicrosoftYaHei;
        font-size: 34.722rpx;
        color: #666666;
        opacity: 0.67;
      }
    }

    .login_input {
      width: 626.389rpx;
      margin: 0 auto;
      margin-top: 120.111rpx;

      /deep/ .input-placeholder {
        font-family: MicrosoftYaHei;
        font-size: 30.833rpx;
        color: #999999;
      }

      .uni-icons {
        margin: 0 auto;
        display: inherit;
        margin-bottom: 80rpx;
      }

      .portraitImg {
        width: 200rpx;
        height: 200rpx;
        border-radius: 100%;
        margin: 0 auto;
        display: inherit;
      }

      // 输入框的公共方法，接受两个参数
      // @bottom 底部边距
      // @img 背景图地址
      .pub_input(@bottom: 0px, @img) {
        box-shadow: 0rpx 11.111rpx 40.417rpx 1.25rpx rgba(203, 203, 203, 0.58);
        border-radius: 48.611rpx;
        height: 100.222rpx;
        background-color: #ffffff;
        padding-left: 111.111rpx;
        box-sizing: border-box;
        margin-bottom: @bottom;
        background: url("@/static/@{img}.png") no-repeat;
        background-size: 34.028rpx;
        background-position: 41.667rpx 50%;
      }

      .user_name {
        .pub_input(48.611rpx, user);
        margin-top: 90rpx;
      }

      .user_pwd {
        .pub_input(117.361rpx, pwd);
      }
    }

    .portrait_list {
      display: flex;
      flex-wrap: wrap;

      image {
        width: 80rpx;
        height: 80rpx;
        margin-bottom: 10rpx;
        margin-right: 10rpx;
      }

      .select {
        border: 1px solid #000000;
      }
    }

    .enter {
      width: 115.278rpx;
      height: 70.417rpx;
      float: right;
    }
  }
</style>