first commit

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

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