ohplay_h5/src/pages/public/uuid.vue

<template>
  <view>
    <view class="tips">请输入您的设备MAC地址：</view>
    <!-- 搜索框 -->
    <view class="search_container">
      <input
        type="text"
        v-model="inputValue"
        class="search_public"
        focus="true"
        confirm-type="done"
        placeholder=""
      />
      <button class="search_btn" type="submit" @click="getSubmit">绑定</button>
    </view>
    <view class="explain">
      MAC地址获取途径：设备页-当前连接设备-右上角箭头标展开详情-点击关于本机-单机MAC地址复制
      <br />（绑定验证成功文字提示：“绑定成功”并跳转下个页面，绑定验证MAC地址不正确提示文字“MAC地址不正确，请确认后重新输入，绑定成功后该页面不再展示”）
      <br />每个MAC地址限一个远程操作账号绑定，即只存在一个当前绑定远程操作账号，最新绑定的为当前绑定账号，其他账号自动失效，以此类推。</view
    >
  </view>
</template>

<script>
import { deviceBind, deviceBindInfo, getUserInfo } from "@/api/public.js";
export default {
  data() {
    return {
      code: "",
      state: "",
      openId: "",
      inputValue: "",
    };
  },
  onLoad(e) {
    this.code = e.code;
    this.state = e.state;
    this.getUserInfo();
  },
  methods: {
    ///获取用户信息
    getUserInfo() {
      getUserInfo({
        code: this.code,
      }).then((res) => {
        if (res.code === 0) {
          this.openId = res.data.openid;
        }
      });
    },

    // http://ptt.radio1964.com/v1/device/get-wifi?UUId=AIrSMArT_210052355545
    getSubmit() {
      if (this.inputValue.trim().length === 0) {
        uni.showToast({
          title: "MAC地址不能为空",
          icon: "none",
          mask: true,
          duration: 2000,
        });
        return;
      }

      deviceBindInfo({
        state: this.state,
        openId: this.openId,
      }).then((res) => {
        if (res.code === 0) {
          var isBind = res.data.isBind;
          ///已经绑定
          if (isBind) {
            uni.redirectTo({
              url: `/pages/public/remote?state=${this.state}&openId=${this.openId}`,
            });
          } else {
            deviceBind({
              deviceMac: this.inputValue,
              state: this.state,
              openId: this.openId,
            }).then((res) => {
              if (res.code === 0) {
                uni.redirectTo({
                  url: `/pages/public/remote?state=${this.state}&openId=${this.openId}`,
                });
              } else {
                uni.showToast({
                  title: res.message,
                  icon: "none",
                  mask: true,
                  duration: 2000,
                });
              }
            });
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.tips {
  padding-top: 40%;
  margin-left: 40rpx;
  margin-right: 40rpx;
  font-size: 30rpx;
}

.search_container {
  display: flex;
  flex-direction: row;
  margin-top: 20rpx;
}

.search_public {
  background: #ededed;
  height: 80rpx;
  line-height: 80rpx;
  margin-left: 40rpx;
  margin-right: 20rpx;
  border-radius: 50rpx;
  align-items: center;
  justify-content: center;
  text-align: start;
  color: black;
}

.search_btn {
  height: 80rpx;
  line-height: 80rpx;
  margin-top: 20rpx;
  width: 200rpx;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 30rpx;
  border-radius: 50rpx;
  margin-right: 4%;
}

.explain {
  font-size: 25rpx;
  margin-top: 40rpx;
  margin-left: 40rpx;
  margin-right: 40rpx;
}
</style>