front-end-of-violet
/
login.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="js/element-lib/index.js"></script>
    <link rel="stylesheet" href="js/element-lib/theme-chalk/index.css">
    <style>
        body {
            padding: 0;
            margin: 0;
        }

        .el-row {
            margin-bottom: 20px;
        }

        .el-col {
            border-radius: 5px;
            padding-top: 2%;
        }

        .grid-content {
            border-radius: 4px;
        }

        .row-bg {
            padding: 10px 0;
            background-color: #f9fafc;
        }

        .el-input {
            padding-top: 10px;
            padding-bottom: 10px;
        }

        .bg-purple {
            margin-top: 80px;
            background-color: #732FD2;
            height: 230px;
        }
    </style>
</head>

<body>
    <div id="app" style="width: 100%;padding: 0;margin: 0;">
        <div>
            <h1 style="text-align: center;color: #732FD2;">欢迎使用紫罗兰后台管理系统</h1>
        </div>
        <el-row style="margin: 0;padding: 0;width: 100%;" type="flex" justify="center" align="center">
            <el-col :span="10">
                <div class="bg-purple"></div>
            </el-col>
            <el-col :span="7">
                <div style="border: 1px solid #732FD2;border-radius: 5px;">
                    <div style="background-color: #732FD2;width: 100%;height: 10px;border-radius: 4px"></div>
                    <div style="display: flex;justify-content: center;margin-top: 20px;"><i class="el-icon-goods"
                            style="color: #732FD2;font-size: 80px;"></i>
                    </div>
                    <div>
                        <h2 style="text-align: center;color: #732FD2;">violet-admin-web</h2>
                    </div>
                    <el-form ref="form" :model="form" label-width="80px"
                        style="padding-left: 20px;padding-right: 20px;">
                        <el-input v-model="form.username">
                            <i class="el-icon-user el-input__icon" slot="prefix" style="color: #732FD2;">
                            </i>
                        </el-input>
                        <el-input v-model="form.pwd" show-password>
                            <i class="el-icon-lock el-input__icon" slot="prefix" style="color: #732FD2;">
                            </i>
                        </el-input>
                        <div style="display: flex;justify-content: center;margin-bottom: 30px;padding-bottom: 10px;">
                            <el-button type="primary" @click="adminLogin()" style="width: 150px;"
                                icon="el-icon-s-custom">管理员登录</el-button>
                            <el-button @click="franchiseeLogin()" type="primary" style="width: 150px;"
                                icon="el-icon-s-shop">加盟店登录</el-button>
                        </div>
                    </el-form>
                </div>
            </el-col>
            <el-col :span="10">
                <div class="bg-purple"></div>
            </el-col>
        </el-row>

        <el-dialog title="请选择要管理的门店" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
            <el-select v-model="value" placeholder="请选择">
                <el-option v-for="item in franchiseStores" :key="item.franchiseStoresName"
                    :label="item.franchiseStoresName" :value="item.id">
                </el-option>
            </el-select>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="selectStore()">确 定</el-button>
            </span>
        </el-dialog>
    </div>

    <script>
        axios.defaults.baseURL = "http://localhost:8080/admin/";
        let vm = new Vue({
            el: "#app",
            data() {
                return {
                    form: {
                        username: "",
                        pwd: ""
                    },
                    dialogVisible: false,
                    franchiseStores: [],
                    value: ''
                }
            }, methods: {
                adminLogin() {
                    axios({
                        url: "/login/admin",
                        method: "POST",
                        params: {
                            administratorName: vm.form.username,
                            pwd: vm.form.pwd
                        }
                    }).then(function (resp) {
                        if (resp.data.code == 500) {
                            vm.$message.error('账号或密码错误');
                        } else if (resp.data.code == 200) {
                            vm.$message({
                                message: '恭喜你，登陆成功',
                                type: 'success'
                            });
                            localStorage.setItem("adminToken", resp.data.data);
                            location.href = "index.html"
                        }
                    })
                }, franchiseeLogin() {
                    axios({
                        url: "/login/franchisee",
                        method: "POST",
                        params: {
                            franchiseePhoneNumber: vm.form.username,
                            franchiseePwd: vm.form.pwd
                        }
                    }).then(function (resp) {
                        if (resp.data.code == 500) {
                            vm.$message.error('账号或密码错误');
                        } else if (resp.data.code == 200) {
                            vm.$message({
                                message: '恭喜你，登陆成功，请选择要管理的店铺',
                                type: 'success'
                            });
                            vm.franchiseStores = resp.data.data
                            vm.dialogVisible = true
                        }
                    })
                }, selectStore() {
                    axios({
                        url: "/login/select/store",
                        method: "GET",
                        params: {
                            id: vm.value
                        }
                    }).then(resp => {
                        localStorage.setItem("franchiseeToken", resp.data.data);
                        location.href = "storeindex.html"
                    })
                }
            }
        })
    </script>
</body>

</html>