main.ts
import { createApp } from 'vue'
import App from './App.vue'
// 请求方法
import request from '@/api/request.ts'
const app = createApp(App)
app.config.globalProperties.$request = request
app.mount('#app')
login.vue
<template>
<div id="backcont">
<div class="meituan-content">
<div class="login-cont">
<div class="meituan-title">扫码点餐商户端</div>
<div class="meituan-user">
<p>账号</p>
<el-input clearable v-model="account" class="inptflex" placeholder="请输入账号" />
</div>
<div class="meituan-user">
<p>密码</p>
<el-input v-model="password" show-password class="inptflex" placeholder="请输入密码" />
</div>
<!-- 登录或注册按钮提交 -->
<el-button @click="signin" type="success" :loading="load" class="meituan-btn">登录</el-button>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import {reactive,ref,toRefs,getCurrentInstance,ComponentInternalInstance } from 'vue'
import {UserAccountForm} from '../../types/loginType'
let instance: ComponentInternalInstance | null = getCurrentInstance();//获取app实例
const router = useRouter();
const form = reactive<UserAccountForm>({
account: '',
password: '',
regi:'注册',
load:false
})
const {account,password,regi,load} = toRefs(form)
//登录回调
const signin = async()=>{
form.load = true
const obj = {account:form.account,password:form.password}
try{
const res = instance?.proxy?.$request.post('https://meituan.thexxdd.cn/apit/login',obj)
form.load = false
}catch(e){
form.load = false
}
}
</script>
<style scoped>
</style>