warewms-PDA/pages/index/configuration.vue

<template>
  <view class="content">
    <!-- <div class="rec"></div> -->
    <view class="title_ipunt">
      <text class="text">请求IP:</text>
      <input
        type="text"
        v-model="ip"
        name=""
        focus
        id=""
        @focus="focusState"
        :class="recshow ? 'rec' : ''"
        :placeholder="ip"
        style="
          border-bottom: 1px solid #dfdfdf;
          width: 80%;
          margin-left: 10px;
        " />
    </view>
    <view class="title_ipunt">
      <text class="text">端口:</text>
      <input
        v-model="host"
        type="text"
        name=""
        id=""
        @focus="focusStateto"
        :class="recshowto ? 'rec' : ''"
        :placeholder="host"
        style="
          border-bottom: 1px solid #dfdfdf;
          width: 80%;
          margin-left: 10px;
        " />
    </view>

    <view class="botins">
      <wButton
        class="wbutton"
        text="确定"
        :rotate="isRotate"
        @click="startLogin"></wButton>
    </view>
  </view>
</template>

<script>
let _this;
import wButton from "../../components/watch-login/watch-button.vue"; //button
export default {
  components: {
    wButton,
  },
  data() {
    return {
      ip: "",
      host: "",
      isRotate: false, //是否加载旋转
      isFocus: true, // 是否聚焦
      recshow: false,
      recshowto: false,
      recshowthree: false,
      //logo图片 base64
      list3: [
        "https://cdn.uviewui.com/uview/swiper/swiper3.png",
        "https://cdn.uviewui.com/uview/swiper/swiper2.png",
        "https://cdn.uviewui.com/uview/swiper/swiper1.png",
      ],
    };
  },

  mounted() {
    _this = this;
    uni.getStorage({
      key: "ip",
      success(res) {
        console.log("获取成功", res.data);
        _this.ip = res.data;
      },
    });
    uni.getStorage({
      key: "host",
      success(res) {
        console.log("获取成功", res.data);
        _this.host = res.data;
      },
    });
  },
  methods: {
    focusState() {
      this.recshow = true;
      this.recshowto = false;
      this.recshowthree = false;
    },
    focusStateto() {
      this.recshow = false;
      this.recshowthree = false;
      this.recshowto = true;
    },
    focusStatethree() {
      this.recshow = false;
      this.recshowto = false;
      this.recshowthree = true;
    },

    startLogin(e) {
      uni.removeStorage({
        key: "ip",
      });
      uni.removeStorage({
        key: "host",
      });
      console.log(e, "田炯", this.ip);
      let that = this;
      uni.setStorage({
        key: "ip",
        data: this.ip,
      });
      uni.setStorage({
        key: "host",
        data: this.host,
      });

      uni.getStorage({
        key: "ip",
        success(res) {
          console.log("获取成功", res.data);

          that.ip = res.data;
        },
      });
      uni.getStorage({
        key: "host",
        success(res) {
          console.log("获取成功", res.data);
          that.host = res.data;
        },
      });
      let host = that.ip + ":" + that.host;

      uni.setStorage({
        key: "hostappst",
        data: host,
      });
      uni.getStorage({
        key: "hostappst",
        success(res) {
          console.log("获取成功", res.data);
          uni.showToast({
            title: host,
            icon: "none",
          });
        },
      });

      //登录
      if (this.isRotate) {
        //判断是否加载中，避免重复点击请求
        return false;
      }

      console.log("登录成功");

      _this.isRotate = true;
      setTimeout(function () {
        uni.navigateTo({
          url: "/pages/index/login",
        });
        _this.isRotate = false;
      }, 1000);
    },
    Waereroter() {
      uni.navigateTo({
        url: "/pages/Warehousing/index",
      });
    },
  },
};
</script>
<style scoped>
.rec::before {
  position: absolute;

  bottom: 0;
  content: "";
  height: 2px;
  width: 258px;
  background-color: red;
  /* 依次对应：动画名、时长、匀速、无限循环 */
  animation: move 3s;
}
</style>
<style scoped lang="scss">
@import url("./css/main.css");
.u-button--square {
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  border-top-left-radius: 3px;
  width: 86%;
  border-top-right-radius: 3px;
  border-radius: 8vw;
  background: red;
  color: aliceblue;
}
.content {
  padding: 15px;
  margin-top: 17px;
  .title_ipunt {
    display: flex;
    width: 100%;
    font-size: 16px;
    font-weight: 400;
    color: #5a5a5a;
    margin: 0 0 6vw 0;
    .text {
      width: 22%;
      text-align-last: justify;
    }
  }
  .botins {
    position: absolute;
    bottom: 35px;
    left: 0;
    right: 0;
  }
}
</style>