提交源文件
This commit is contained in:
13
src/views/home.vue
Normal file
13
src/views/home.vue
Normal file
@@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<el-button type="primary">我是{{ userStore.name }}</el-button>
|
||||
<el-button @click="changeUser">改变用户</el-button>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useUserStore } from "@/store/user";
|
||||
const userStore = useUserStore();
|
||||
|
||||
const changeUser = () => {
|
||||
userStore.login("李四");
|
||||
};
|
||||
</script>
|
||||
181
src/views/login.vue
Normal file
181
src/views/login.vue
Normal file
@@ -0,0 +1,181 @@
|
||||
<template>
|
||||
<div class="login-container">
|
||||
<div class="logo">
|
||||
<el-image :src="logo" style="width: 180px"></el-image>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="reg-wrap">
|
||||
<router-link :to="{ name: 'register' }">
|
||||
<el-link type="primary">注册</el-link>
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="header">
|
||||
<span class="t1">银收客</span>
|
||||
<span class="t2">收银、库存、营销、支付等业务一体化解决方案</span>
|
||||
</div>
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
label-position="top"
|
||||
size="large"
|
||||
hide-required-asterisk
|
||||
>
|
||||
<el-form-item label="注册商户号" prop="shopCode">
|
||||
<el-input
|
||||
v-model="form.shopCode"
|
||||
placeholder="请输入注册商户号"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="手机号码" prop="phone">
|
||||
<el-input
|
||||
v-model="form.phone"
|
||||
placeholder="请输入11位手机号码"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="登录密码" prop="password">
|
||||
<el-input
|
||||
v-model="form.password"
|
||||
type="password"
|
||||
placeholder="请输入登录密码"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<div style="width: 100%; display: flex; justify-content: flex-end">
|
||||
<router-link :to="{ name: 'register' }">
|
||||
<el-link type="info">忘记密码</el-link>
|
||||
</router-link>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
style="width: 100%"
|
||||
:loading="loading"
|
||||
@click="submitHandle"
|
||||
>
|
||||
登录
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button plain style="width: 100%" @click="logout">退出</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="version">
|
||||
<el-text size="large">Ver2.1.6</el-text>
|
||||
<el-text size="large">陕西超掌柜科技有限公司</el-text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import logo from "@/assets/logo.png";
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
import { reactive, ref } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { ipcRenderer } from "electron";
|
||||
|
||||
const router = useRouter();
|
||||
const formRef = ref(null);
|
||||
const loading = ref(false);
|
||||
|
||||
const form = reactive({
|
||||
shopCode: "",
|
||||
phone: "",
|
||||
password: "",
|
||||
});
|
||||
|
||||
const rules = reactive({
|
||||
shopCode: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入注册商户号",
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
phone: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入11位手机号码",
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
password: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入登录密码",
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
// 提交
|
||||
const submitHandle = () => {
|
||||
formRef.value.validate((valid) => {
|
||||
if (valid) {
|
||||
loading.value = true;
|
||||
ElMessage.success("登录成功");
|
||||
localStorage.setItem("token", "skk918sjakajhjjqhw19jsdkandkahk");
|
||||
setTimeout(() => {
|
||||
router.replace({
|
||||
name: "home",
|
||||
});
|
||||
}, 1500);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const logout = () => {
|
||||
ElMessageBox.confirm("确定要关闭软件吗？")
|
||||
.then(() => {
|
||||
ipcRenderer.send("quitHandler", "退出吧");
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.login-container {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
.logo {
|
||||
flex: 1;
|
||||
height: inherit;
|
||||
background-color: var(--el-color-primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.form-wrap {
|
||||
flex: 1;
|
||||
height: inherit;
|
||||
padding: 50px;
|
||||
}
|
||||
.reg-wrap {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
.header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-bottom: 100px;
|
||||
.t1 {
|
||||
font-size: 52px;
|
||||
color: #999;
|
||||
}
|
||||
.t2 {
|
||||
font-size: 24px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
.version {
|
||||
padding-top: 50px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
185
src/views/register.vue
Normal file
185
src/views/register.vue
Normal file
@@ -0,0 +1,185 @@
|
||||
<template>
|
||||
<div class="login-container">
|
||||
<div class="logo">
|
||||
<el-image :src="logo" style="width: 180px"></el-image>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="header">
|
||||
<span class="t1">注册</span>
|
||||
<div class="mt50">
|
||||
<el-radio-group v-model="type" size="large">
|
||||
<el-radio-button :label="1">餐饮版</el-radio-button>
|
||||
<el-radio-button :label="2">商超版</el-radio-button>
|
||||
<el-radio-button :label="3">快餐版</el-radio-button>
|
||||
<el-radio-button :label="4">美业版</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
label-position="top"
|
||||
size="large"
|
||||
hide-required-asterisk
|
||||
>
|
||||
<el-form-item label="店铺名称" prop="shopName">
|
||||
<el-input
|
||||
v-model="form.shopName"
|
||||
placeholder="请输入店铺名称"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="手机号码" prop="phone">
|
||||
<el-input
|
||||
v-model="form.phone"
|
||||
placeholder="请输入注册手机号"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="验证码" prop="code">
|
||||
<el-input v-model="form.code" placeholder="请输入验证码"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="登录密码" prop="password">
|
||||
<el-input
|
||||
v-model="form.password"
|
||||
type="password"
|
||||
placeholder="请输入登录密码"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="确认登录密码" prop="repassword">
|
||||
<el-input
|
||||
v-model="form.repassword"
|
||||
type="password"
|
||||
placeholder="请重复输入登录密码"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" style="width: 100%" @click="submitHandle"
|
||||
>注册</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button plain style="width: 100%" @click="router.back()">
|
||||
返回
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import logo from "@/assets/logo.png";
|
||||
import { reactive, ref } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
const router = useRouter();
|
||||
|
||||
const type = ref(1);
|
||||
|
||||
const formRef = ref(null);
|
||||
|
||||
const form = reactive({
|
||||
shopName: "",
|
||||
phone: "",
|
||||
code: "",
|
||||
password: "",
|
||||
repassword: "",
|
||||
});
|
||||
const repasswordPass = (rule, value, callback) => {
|
||||
if (!form.repassword) {
|
||||
callback(new Error("请重复输入登录密码"));
|
||||
} else if (form.password !== form.repassword) {
|
||||
callback(new Error("两次密码输入不一致"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
const rules = reactive({
|
||||
shopName: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入店铺名称",
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
phone: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入注册手机号",
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
code: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入验证码",
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
password: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入登录密码",
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
repassword: [
|
||||
{
|
||||
validator: repasswordPass,
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
// 提交
|
||||
const submitHandle = () => {
|
||||
formRef.value.validate((valid) => {
|
||||
if (valid) {
|
||||
}
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.login-container {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
.logo {
|
||||
flex: 1;
|
||||
height: inherit;
|
||||
background-color: var(--el-color-primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.form-wrap {
|
||||
flex: 1;
|
||||
height: inherit;
|
||||
padding: 50px;
|
||||
}
|
||||
.reg-wrap {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
.header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-bottom: 50px;
|
||||
.t1 {
|
||||
font-size: 52px;
|
||||
color: #999;
|
||||
}
|
||||
.t2 {
|
||||
font-size: 24px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
.version {
|
||||
padding-top: 50px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user