<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="https://www.thymeleaf.org ">
<head>
    <title>采美365网-中国美业全方位线上交易服务互动平台，做美业，上采美</title>
    <template th:replace="components/head-link"></template>
    <link th:href="@{/css/base/form.css(v=${version})}" rel="stylesheet" type="text/css">
    <link th:href="@{/css/account/login.css(v=${version})}" rel="stylesheet" type="text/css">
</head>
<body>
<!-- 引用头部 -->
<template th:replace="account/components/header"></template>

<!-- 二级页面 -->
<div id="loginPage">
    <div class="loginWrap clear">
        <div class="loginForm">
            <div class="title">
                <h1>欢迎登录</h1>
                <h2>生美 / 医美采购服务平台</h2>
            </div>
            <form v-show="!qrCodeLogin">
                <div class="formLine">
                    <input type="text" v-model="loginAccount" placeholder="请输入邮箱或手机号" :rule="rule.account" maxlength="30" @blur="blurHandle($event)" needverify>
                    <i class="checked icon mIcon"></i>
                    <span class="errTips icon mIcon" tips="请提供正确的邮箱或手机号码"></span>
                </div>
                <div class="formLine">
                    <input type="password" v-model="loginPassword" placeholder="请输入密码" :rule="rule.password" maxlength="30" @blur="blurHandle($event)" needverify>
                    <i class="checked icon mIcon"></i>
                    <span class="errTips icon mIcon" tips="请输入正确的密码"></span>
                    <i class="icon showPwd" @click="showPassword($event)"></i>
                </div>
                <div class="forget">
                    <a href="/forget.html">忘记密码？</a>
                </div>
                <div class="submit clear">
                    <a v-if="isPC" class="btn" href="/register.html">免费注册</a>
                    <button class="btn" type="button" @click="loginSubmit()">登录</button>
                    <a v-if="!isPC" class="btn" href="/register.html">免费注册</a>
                </div>
                <a v-if="isPC" href="javascript:void(0);" class="codeBtn icon" @click="toQrCodeLogin()"></a>
            </form>
            <div v-if="isPC" v-show="qrCodeLogin" class="qrCodeBox">
                <a href="javascript:void(0);" class="changeBtn icon" @click="toNormalLogin()">账号登录</a>
                <div id="qrCodeWrap">
                    <div class="qrCode"><img src="" alt=""></div>
                    <div class="qrInfo">请使用微信扫描二维码登录“采美365网”</div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 引入底部 -->
<template th:replace="components/footer"></template>
<template th:replace="components/foot-link"></template>
<script charset="utf-8" type="text/javascript" src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/user.service.js(v=${version})}"></script>
<script charset="utf-8" type="text/javascript" th:src="@{/js/account/login.js(v=${version})}"></script>
</body>
</html>
