ohplay_business/src/views/store/devices/detail.vue

<template>
  <div class='app-container'>
    <el-row>
      <el-col :xs="24" :sm="10" :md="8" :lg="8" :xl="6">
        <el-form label-width="100px" :model="data.form" ref="form" :rules="data.rules">
          <el-form-item label="wifi名称：" prop="wifiName">
            <el-input v-model="data.form.wifiName" placeholder="请输入wifi名称" />
          </el-form-item>
          <el-form-item label="wifi密码：" prop="wifiPwd">
            <el-input v-model="data.form.wifiPwd" placeholder="请输入wifi密码" />
          </el-form-item>
          <el-form-item label="设备ID：" prop="deviceMac">
            <el-input v-model="data.form.deviceMac" placeholder="请输入设备ID" />
          </el-form-item>
          <el-form-item label="设备型号：" prop="clientType">
            <el-input v-model="data.form.clientType" placeholder="请输入设备型号" />
          </el-form-item>
        </el-form>
        <div :class="[deviceType === 'Mobile' ? '' : 'form-btn']">
          <el-button :style="{ width: deviceType === 'Mobile' ? '100%' : '' }" type="primary"
            @click="getSubmit">确定</el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { wifi } from '@/api/store/devices'

const { proxy } = getCurrentInstance()

const data = reactive({
  // 表单
  form: {},
  // 
  rules: {
    wifiName: [{
      required: true, message: '请输入wifi名称', trigger: 'bulr'
    }],
    wifiPwd: [{
      required: true, message: '请输入wifi密码', trigger: 'bulr'
    }],
    deviceMac: [{
      required: true, message: '请输入设备ID', trigger: 'bulr'
    }],
    clientType: [{
      required: true, message: '请输入设备型号', trigger: 'bulr'
    }]
  }
})

const deviceType = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ? "Mobile" : "Desktop";
console.log(deviceType);

const getDetail = () => {
  data.form = proxy.$route.query
}
getDetail()

const getSubmit = () => {
  proxy.$refs.form.validate((vaild) => {
    if (vaild) {
      wifi(data.form).then(res => {
        if (res.code === 0) {
          proxy.$modal.msgSuccess('配网成功！')
        }
      })
    } else {
      return false
    }
  })
}
</script>