clearticker_merchant/src/pages/login/merchant.vue

<template>
  <div class="wrap">
    <div class="inner">
      <div class="img">
        <img src="../../assets/cover.svg">
      </div>

      <a-card :bordered="false" class="login-box">
        <template #title>
          <div class="title">
            <b>OTA商户管理平台</b> <a-tag color="orange">用户登录</a-tag>
          </div>
        </template>

        <a-form
          ref="formRef"
          :model="formState"
          :wrapper-col="{ span: 24 }"
        >
          <a-form-item
            :rules="{
              required: true,
              message: '请输入商户名'
            }"
            name="projectName">
            <a-input v-model:value="formState.projectName" placeholder="商户名">
              <template #prefix><ShopOutlined style="color: rgba(0, 0, 0, 0.25)" /></template>
            </a-input>
          </a-form-item>

          <a-form-item
            :rules="{
              required: true,
              message: '请输入用户名'
            }"
            name="userName">
            <a-input v-model:value="formState.userName" placeholder="用户名">
              <template #prefix><UserOutlined style="color: rgba(0, 0, 0, 0.25)" /></template>
            </a-input>
          </a-form-item>

          <a-form-item
            :rules="{
              required: true,
              message: '请输入密码'
            }"
            name="password">
            <a-input v-model:value="formState.password" type="password" placeholder="密码">
              <template #prefix><LockOutlined style="color: rgba(0, 0, 0, 0.25)" /></template>
            </a-input>
          </a-form-item>

          <a-form-item >
            <a-button block type="primary" html-type="submit" @click="submitForm">
              登录
            </a-button>
          </a-form-item>
          <div class="register">
            <span>没有商户?</span><a-button type="link" @click="$refs.modal.showModal()">免费注册</a-button>
          </div>
          <!-- <div style="text-align:right">
            <router-link to="/"> 客户端登录 >></router-link>
          </div> -->
        </a-form>
      </a-card>
    </div>
    <!-- <a :href="admin_url" class="link">管理端</a> -->
    <Modal ref="modal"></Modal>

    <Footer></Footer>
  </div>
</template>

<script setup>
import router from '@/router'
import { message } from 'ant-design-vue'
import Modal from './Modal.vue'
import md5 from 'md5'
import { encrypt } from '@/utils'
import { login, logout } from '@/api/login'
import { reactive, ref } from 'vue'
import { UserOutlined, LockOutlined, MailOutlined, ShopOutlined } from '@ant-design/icons-vue'
import Footer from './Footer.vue'

const admin_url = window.location.href.replace('merchant', 'merchant_mgt')
const appType = import.meta.env.MODE
const formRef = ref()
const formState = reactive(
  !import.meta.env.PROD
    ? {
        projectName: 'demo',
        userName: 'admin',
        password: 'Aa123456'
      }
    : {
        projectName: '',
        password: '', // 123456 md5加密
        userName: ''
      }
)

const state = reactive({
  time: 60,
  smsSendBtn: false
})

const submitForm = () => {
  formRef.value.validate()
    .then(async() => {
      const params = { ...formState, password: encrypt(formState.password) }
      // await logout()
      login(params).then(res => {
        message.success('登录成功')

        setTimeout(() => {
          router.push('/order/index')
        }, 500)
      })
    })
    .catch(error => {
      console.log('error', error)
    })
}
</script>

<style lang="scss" scoped>
@import './index.scss';
.register{
  text-align: right;
  margin-top: -15px;
    span{
      color: grey;
  }
}
</style>