[vue/compiler-sfc] 'return' outside of function. (178:6)
时间: 2024-12-01 13:30:11 浏览: 5
vue-template-babel-compiler:为基于 Babel 的 Vue.js SFC 启用 Optional Chaining 和许多新的 ES 特性
在 Vue 单文件组件(SFC)中,`<script setup>` 标签内的代码是模块作用域的,不能直接使用 `return` 语句。`return` 通常用于函数内部,但在 `<script setup>` 中,你需要将需要暴露给模板的变量或方法通过解构赋值的方式导出。
在你的代码中,`return` 语句应该被移除,并且需要确保所有需要在模板中使用的变量和方法都通过解构赋值的方式导出。以下是修改后的代码示例:
```html
<script setup>
import { ref, reactive, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { message } from 'ant-design-vue';
import { login, getImage, getHallcode, getReadcard, gethallCode, getCompanies } from '../utils/api';
import md5 from 'md5';
import { encryption } from '@/utils/encryption/aesEncrypt';
const router = useRouter();
const route = useRoute();
const loginBtn = ref(false);
const loginObject = reactive({
companyCode: '',
username: '',
password: '',
hallCode: '',
code: '',
rememberMe: false,
});
const companiesInfo = ref([]);
const hallCodeDataList = ref([]);
const randCodeImage = ref('');
const verifiedCode = ref("");
const requestCodeSuccess = ref(false);
const encryptedString = reactive({ key: "1234567890adbcde", iv: "1234567890hjlkew" });
onMounted(() => {
window.localStorage.setItem('icCardModeLogin', 'http://127.0.0.1:16021');
handleChangeCheckCode();
currdatetime = new Date().getTime();
getHallCodeList();
getCompaniesInfo();
});
const handleSubmit = async () => {
const valid = await formRef.validate();
if (valid) {
console.log("参数1", encryptedString.key, encryptedString.iv);
const loginParams = {
companyCode: loginObject.companyCode,
username: loginObject.username,
password: encryption(new Date().getTime() + md5(loginObject.password), encryptedString.key, encryptedString.iv),
hallCode: loginObject.hallCode,
remember_me: loginObject.rememberMe,
timestamp: new Date().getTime(),
captcha: loginObject.code,
checkKey: currdatetime,
};
console.log("登录参数", loginParams);
loginBtn.value = true;
try {
const response = await login(loginParams);
if (response.code === 200) {
message.success('欢迎回来', 1);
router.push("/photo");
} else {
console.error('登录失败', response.message);
}
} catch (error) {
console.error('请求错误', error);
} finally {
loginBtn.value = false;
}
} else {
loginBtn.value = false;
}
};
const handleChangeCheckCode = (url) => {
currdatetime = new Date().getTime();
url = '/' + currdatetime;
getImage(url).then(res => {
if (res.success) {
randCodeImage.value = res.result;
requestCodeSuccess.value = true;
generateCode(res.result);
} else {
message.error(res.message);
requestCodeSuccess.value = false;
}
}).catch(() => {
requestCodeSuccess.value = false;
});
};
const inputCodeChange = (e) => {
loginObject.code = e.target.value;
};
const generateCode = (value) => {
verifiedCode.value = value.toLowerCase();
};
const validateInputCode = (rule, value, callback) => {
if (!value || verifiedCode.value == loginObject.code) {
callback();
} else {
callback("您输入的验证码不正确!");
}
};
const getHallCode = () => {
if (window.localStorage.icCardModeLogin) {
getReadCard(window.localStorage.icCardModeLogin);
} else {
const companyCode = loginObject.companyCode;
const formData = { companyCode };
if (!companyCode) {
hallCodeDataList.value = [];
} else {
gethallCode(formData).then((res) => {
if (res.code == 200) {
window.localStorage.icCardModeLogin = res.result;
getReadCard(window.localStorage.icCardModeLogin);
}
});
}
}
};
const getReadCard = (url) => {
const that = this;
url = window.localStorage.icCardModeLogin + '/cardApi/Card/GetStationNo';
getReadcard(url).then(responseHttp => {
if (!responseHttp.responseCode) {
that.currentHallCode = responseHttp.result;
getHallCodeList();
} else {
getHallCodeList();
}
}).catch(error => {
console.error('请求错误', error);
getHallCodeList();
});
};
const getHallCodeList = () => {
formRef.resetFields("hallCode");
hallCodeDataList.value = [];
let currentHallCode = loginObject.hallCode;
let currentCompanyCode = loginObject.companyCode;
let username = loginObject.username;
const formData = { _t: new Date().getTime(), hallCode: currentHallCode, companyCode: currentCompanyCode, username: username };
getHallcode(formData).then(res => {
if (res.success) {
hallCodeDataList.value = res.result;
hallCodeDataList.value.forEach(item => {
if (item.isChoose) {
formRef.setFieldsValue({ hallCode: item.hallCode });
}
});
} else {
hallCodeDataList.value = [];
}
}).catch(error => {
console.error('请求错误', error);
});
};
const getCompaniesInfo = () => {
getCompanies().then(res => {
if (res.success) {
const comArr = [];
companiesInfo.value = res.result ? res.result : [];
if (companiesInfo.value.length > 0) {
companiesInfo.value.forEach(item => {
comArr.push(item.value);
});
if (comArr.indexOf(currentCompany) !== -1) {
formRef.setFieldsValue({ companyCode: currentCompany });
}
}
getHallCode();
}
});
};
// 解构赋值,暴露给模板
const { loginBtn, loginObject, companiesInfo, hallCodeDataList, randCodeImage, requestCodeSuccess, handleSubmit, handleChangeCheckCode, getHallCode } = {};
</script>
```
请注意,`formRef` 和 `currentCompany` 变量没有在代码中定义,如果你需要这些变量,请确保它们已经在其他地方定义并导入。
阅读全文